feat(CategoryIcon): new state disabled and variant primary (#3627)

* feat(CategoryIcon): new state disabled and variant primary * feat: new prop category icon variant on navigation
scaleway · Apr 4, 2024 · a71f616 · a71f616
1 parent 6c1edef
commit a71f616
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 33 deletions.
diff --git a/.changeset/five-rats-unite.md b/.changeset/five-rats-unite.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": minor
+---
+
+New prop `categoryIconVariant` in `<Navigation />`
diff --git a/.changeset/late-books-shop.md b/.changeset/late-books-shop.md
@@ -0,0 +1,6 @@
+---
+"@ultraviolet/themes": minor
+"@ultraviolet/icons": minor
+---
+
+New `neutral` and `disabled` states on `<CategoryIcon />` component
diff --git a/packages/icons/src/components/CategoryIcon/__stories__/List.stories.tsx b/packages/icons/src/components/CategoryIcon/__stories__/List.stories.tsx
@@ -1,19 +1,31 @@
 import type { StoryFn } from '@storybook/react'
-import { Stack, Text } from '@ultraviolet/ui'
+import { Row, Stack, Text } from '@ultraviolet/ui'
 import { CategoryIcon } from '..'
 import { CATEGORY_ICONS } from '../Icons'
 
 export const List: StoryFn<typeof CategoryIcon> = props => (
   <Stack gap={1}>
     {Object.keys(CATEGORY_ICONS).map(iconName => (
-      <Stack direction="row" gap={1} alignItems="center">
-        <CategoryIcon
-          {...props}
-          name={iconName as keyof typeof CATEGORY_ICONS}
-        />
+      <Stack direction="row" alignItems="center" gap={2}>
         <Text as="span" variant="bodyStrong">
           {iconName}
         </Text>
+        <Row templateColumns="repeat(3, 3fr)" gap={1} alignItems="center">
+          <CategoryIcon
+            {...props}
+            name={iconName as keyof typeof CATEGORY_ICONS}
+          />
+          <CategoryIcon
+            {...props}
+            name={iconName as keyof typeof CATEGORY_ICONS}
+            variant="neutral"
+          />
+          <CategoryIcon
+            {...props}
+            name={iconName as keyof typeof CATEGORY_ICONS}
+            disabled
+          />
+        </Row>
       </Stack>
     ))}
   </Stack>

diff --git a/packages/icons/src/components/CategoryIcon/index.tsx b/packages/icons/src/components/CategoryIcon/index.tsx
@@ -4,26 +4,48 @@ import { CATEGORY_ICONS } from './Icons'
 
 const StyledIcon = (
   component: FunctionComponent<SVGProps<SVGSVGElement>>,
-) => styled(component)`
+) => styled(component, {
+  shouldForwardProp: prop => !['variant', 'disabled'].includes(prop),
+})<{ variant: 'neutral' | 'primary'; disabled?: boolean }>`
   .fill {
-    fill: ${({ theme }) => theme.colors.other.icon.category.primary.fill};
+    fill: ${({ theme, variant, disabled }) =>
+      theme.colors.other.icon.category[variant][
+        disabled ? 'fillDisabled' : 'fill'
+      ]};
   }
 
   .fillStrong {
-    fill: ${({ theme }) => theme.colors.other.icon.category.primary.fillStrong};
+    fill: ${({ theme, variant, disabled }) =>
+      theme.colors.other.icon.category[variant][
+        disabled ? 'fillStrongDisabled' : 'fillStrong'
+      ]};
   }
 `
 
 type CategoryIconProps = {
   name: keyof typeof CATEGORY_ICONS
+  variant?: 'primary' | 'neutral'
+  disabled?: boolean
 }
 
 /**
  * CategoryIcon component is used to render category icons, those icons are more complex than system icons
  * as they involve multiple colors that changes depending on theme.
  */
-export const CategoryIcon = ({ name }: CategoryIconProps) => {
+export const CategoryIcon = ({
+  name,
+  variant = 'primary',
+  disabled,
+}: CategoryIconProps) => {
   const Icon = StyledIcon(CATEGORY_ICONS[name])
 
-  return <Icon width="20" height="20" viewBox="0 0 20 20" />
+  return (
+    <Icon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      variant={variant}
+      disabled={disabled}
+    />
+  )
 }
diff --git a/packages/plus/src/components/Navigation/__stories__/Playground.stories.tsx b/packages/plus/src/components/Navigation/__stories__/Playground.stories.tsx
@@ -90,13 +90,15 @@ export const Playground: StoryFn<ComponentProps<typeof Navigation>> = props => {
         <Navigation.Item
           label="Organization Dashboard"
           categoryIcon="console"
+          categoryIconVariant="neutral"
           noPinButton
           active={active === 'Organization Dashboard'}
           onClick={() => setActive('Organization Dashboard')}
         />
         <Navigation.Item
           label="Project Dashboard"
           categoryIcon="useCase"
+          categoryIconVariant="neutral"
           noPinButton
           active={active === 'Project Dashboard'}
           onClick={() => setActive('Project Dashboard')}

diff --git a/packages/plus/src/components/Navigation/components/Item.tsx b/packages/plus/src/components/Navigation/components/Item.tsx
@@ -201,6 +201,7 @@ type ItemProps = {
    * Sets a category icon on the left of the item
    */
   categoryIcon?: ComponentProps<typeof CategoryIcon>['name']
+  categoryIconVariant?: ComponentProps<typeof CategoryIcon>['variant']
   /**
    * The label of the item that will be shown.
    * It is also used as the key for pinning.
@@ -268,6 +269,7 @@ type ItemProps = {
 export const Item = ({
   children,
   categoryIcon,
+  categoryIconVariant,
   label,
   subLabel,
   badgeText,
@@ -440,7 +442,11 @@ export const Item = ({
                 alignItems="center"
                 justifyContent="center"
               >
-                <CategoryIcon name={categoryIcon} />
+                <CategoryIcon
+                  name={categoryIcon}
+                  variant={categoryIconVariant}
+                  disabled={disabled}
+                />
               </ContainerCategoryIcon>
             ) : null}
             <Stack>

diff --git a/packages/themes/src/themes/console/dark.ts b/packages/themes/src/themes/console/dark.ts
@@ -162,23 +162,36 @@ export const darkTheme = {
         text: { dark: '#0c0f1a', light: '#ffffff' },
       },
       icon: {
-        category: { primary: { fill: '#a061f4', fillStrong: '#d8c5fc' } },
+        category: {
+          neutral: {
+            fill: '#e9e9ec',
+            fillDisabled: '#252a3b',
+            fillStrong: '#7e8291',
+            fillStrongDisabled: '#484b5a',
+          },
+          primary: {
+            fill: '#a061f4',
+            fillDisabled: '#252a3b',
+            fillStrong: '#d8c5fc',
+            fillStrongDisabled: '#484b5a',
+          },
+        },
         product: {
           danger: {
             fill: '#4e0921',
-            fillDisabled: '#252a3b',
+            fillDisabled: '#484b5a',
             fillStrong: '#4e0921',
-            fillStrongDisabled: '#252a3b',
+            fillStrongDisabled: '#484b5a',
             fillWeak: '#e71964',
-            fillWeakDisabled: '#191f33',
+            fillWeakDisabled: '#252a3b',
           },
           original: {
             fill: '#ffffff',
-            fillDisabled: '#252a3b',
+            fillDisabled: '#484b5a',
             fillStrong: '#bf96f8',
-            fillStrongDisabled: '#252a3b',
+            fillStrongDisabled: '#484b5a',
             fillWeak: '#4f1c89',
-            fillWeakDisabled: '#191f33',
+            fillWeakDisabled: '#252a3b',
           },
           primary: {
             fill: '#a061f4',
@@ -190,11 +203,11 @@ export const darkTheme = {
           },
           warning: {
             fill: '#36220e',
-            fillDisabled: '#252a3b',
+            fillDisabled: '#484b5a',
             fillStrong: '#36220e',
-            fillStrongDisabled: '#252a3b',
+            fillStrongDisabled: '#484b5a',
             fillWeak: '#ebb000',
-            fillWeakDisabled: '#191f33',
+            fillWeakDisabled: '#252a3b',
           },
         },
       },

diff --git a/packages/themes/src/themes/console/darker.ts b/packages/themes/src/themes/console/darker.ts
@@ -162,23 +162,36 @@ export const darkerTheme = {
         text: { dark: '#000000', light: '#e2e4e4' },
       },
       icon: {
-        category: { primary: { fill: '#8d40ee', fillStrong: '#ceb1fb' } },
+        category: {
+          neutral: {
+            fill: '#d8d9dc',
+            fillDisabled: '#151a2d',
+            fillStrong: '#72747e',
+            fillStrongDisabled: '#3b3f4f',
+          },
+          primary: {
+            fill: '#8d40ee',
+            fillDisabled: '#151a2d',
+            fillStrong: '#ceb1fb',
+            fillStrongDisabled: '#3b3f4f',
+          },
+        },
         product: {
           danger: {
             fill: '#2e0514',
-            fillDisabled: '#212638',
+            fillDisabled: '#3b3f4f',
             fillStrong: '#2e0514',
-            fillStrongDisabled: '#212638',
+            fillStrongDisabled: '#3b3f4f',
             fillWeak: '#cd1759',
-            fillWeakDisabled: '#0c0f1a',
+            fillWeakDisabled: '#151a2d',
           },
           original: {
             fill: '#ffffff',
-            fillDisabled: '#212638',
+            fillDisabled: '#3b3f4f',
             fillStrong: '#bf95fd',
-            fillStrongDisabled: '#212638',
+            fillStrongDisabled: '#3b3f4f',
             fillWeak: '#4f1c89',
-            fillWeakDisabled: '#0c0f1a',
+            fillWeakDisabled: '#151a2d',
           },
           primary: {
             fill: '#954cf7',
@@ -190,11 +203,11 @@ export const darkerTheme = {
           },
           warning: {
             fill: '#1e1309',
-            fillDisabled: '#212638',
+            fillDisabled: '#3b3f4f',
             fillStrong: '#1e1309',
-            fillStrongDisabled: '#212638',
+            fillStrongDisabled: '#3b3f4f',
             fillWeak: '#d89d00',
-            fillWeakDisabled: '#0c0f1a',
+            fillWeakDisabled: '#151a2d',
           },
         },
       },

diff --git a/packages/themes/src/themes/console/light.ts b/packages/themes/src/themes/console/light.ts
@@ -162,7 +162,20 @@ export const lightTheme = {
         text: { dark: '#222638', light: '#ffffff' },
       },
       icon: {
-        category: { primary: { fill: '#521094', fillStrong: '#a060f6' } },
+        category: {
+          neutral: {
+            fill: '#151a2d',
+            fillDisabled: '#f3f3f4',
+            fillStrong: '#b5b7bd',
+            fillStrongDisabled: '#d9dadd',
+          },
+          primary: {
+            fill: '#521094',
+            fillDisabled: '#f3f3f4',
+            fillStrong: '#a060f6',
+            fillStrongDisabled: '#d9dadd',
+          },
+        },
         product: {
           danger: {
             fill: '#ffebf2',