feat(DropdownItem): add color prop, rename existing color prop to con…

…trast, update bindings
shuriken-ui · Feb 22, 2024 · 9aa5f01 · 9aa5f01
1 parent 78a8204
commit 9aa5f01
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 38 deletions.
diff --git a/src/plugins/components/dropdown-item/dropdown-item.component.ts b/src/plugins/components/dropdown-item/dropdown-item.component.ts
@@ -13,7 +13,8 @@ export const DropdownItem = ({
   rel,
   type,
   rounded = 'sm',
-  color = 'default',
+  contrast = 'default',
+  color = 'primary',
   title,
   text,
   active,
@@ -34,6 +35,7 @@ export const DropdownItem = ({
                 'nui-dropdown-item',
                 active && 'nui-active',
                 rounded && variants.rounded[rounded],
+                contrast && variants.contrast[contrast],
                 color && variants.color[color],
               ]
                 .filter(Boolean)

diff --git a/src/plugins/components/dropdown-item/dropdown-item.config.ts b/src/plugins/components/dropdown-item/dropdown-item.config.ts
@@ -18,31 +18,77 @@ export const defaultConfig = {
     md: 'lg',
     lg: 'xl',
   },
-  color: {
+  contrast: {
     default: {
       background: {
         light: 'muted-100',
         dark: 'muted-700',
       },
-      font: {
-        color: {
-          light: 'primary-500',
-          dark: 'primary-500',
-        },
-      },
     },
     contrast: {
       background: {
         light: 'muted-100',
         dark: 'muted-900',
       },
+    },
+  },
+  color: {
+    primary: {
       font: {
         color: {
           light: 'primary-500',
           dark: 'primary-500',
         },
       },
     },
+    info: {
+      font: {
+        color: {
+          light: 'info-500',
+          dark: 'info-500',
+        },
+      },
+    },
+    success: {
+      font: {
+        color: {
+          light: 'success-500',
+          dark: 'success-500',
+        },
+      },
+    },
+    warning: {
+      font: {
+        color: {
+          light: 'info-500',
+          dark: 'info-500',
+        },
+      },
+    },
+    danger: {
+      font: {
+        color: {
+          light: 'info-500',
+          dark: 'info-500',
+        },
+      },
+    },
+    dark: {
+      font: {
+        color: {
+          light: 'muted-900',
+          dark: 'muted-100',
+        },
+      },
+    },
+    black: {
+      font: {
+        color: {
+          light: 'black',
+          dark: 'white',
+        },
+      },
+    },
   },
   transition: {
     property: 'colors',

diff --git a/src/plugins/components/dropdown-item/dropdown-item.stories.ts b/src/plugins/components/dropdown-item/dropdown-item.stories.ts
@@ -25,7 +25,7 @@ const meta = {
       control: { type: 'boolean' },
       defaultValue: false,
     },
-    color: {
+    contrast: {
       control: { type: 'select' },
       options: ['default', 'contrast'],
       defaultValue: 'default',
@@ -50,7 +50,7 @@ export const Main: Story = {
   args: {
     // set default values used for UI preview
     href: '#',
-    color: 'default',
+    contrast: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
     rounded: 'sm',
@@ -64,7 +64,7 @@ export const ShapeStraight: Story = {
   name: 'Rounded: none',
   args: {
     href: '#',
-    color: 'default',
+    contrast: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
     rounded: 'none',
@@ -76,7 +76,7 @@ export const ShapeRounded: Story = {
   name: 'Rounded: sm',
   args: {
     href: '#',
-    color: 'default',
+    contrast: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
     rounded: 'sm',
@@ -88,7 +88,7 @@ export const ShapeSmooth: Story = {
   name: 'Rounded: md',
   args: {
     href: '#',
-    color: 'default',
+    contrast: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
     rounded: 'md',
@@ -100,7 +100,7 @@ export const ShapeCurved: Story = {
   name: 'Rounded: lg',
   args: {
     href: '#',
-    color: 'default',
+    contrast: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
     rounded: 'lg',
@@ -114,7 +114,8 @@ export const SlotStartIcon: Story = {
   name: 'Start slot: icon',
   args: {
     href: '#',
-    color: 'default',
+    contrast: 'default',
+    color: 'dark',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
     rounded: 'sm',
@@ -147,7 +148,7 @@ export const SlotStartAvatar: Story = {
   name: 'Start slot: avatar',
   args: {
     href: '#',
-    color: 'default',
+    contrast: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
     rounded: 'sm',
@@ -167,7 +168,7 @@ export const SlotEndAction: Story = {
   name: 'End slot: action',
   args: {
     href: '#',
-    color: 'default',
+    contrast: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
     rounded: 'sm',
@@ -179,7 +180,7 @@ export const SlotEndAction: Story = {
     `,
     end: html`
       ${Button({
-        color: 'default',
+        contrast: 'default',
         size: 'sm',
         rounded: 'sm',
         children: html`

diff --git a/src/plugins/components/dropdown-item/dropdown-item.types.ts b/src/plugins/components/dropdown-item/dropdown-item.types.ts
@@ -6,7 +6,15 @@ export interface DropdownItemProps extends Record<string, unknown> {
   active?: boolean
   disabled?: boolean
   rounded?: 'none' | 'sm' | 'md' | 'lg'
-  color?: 'default' | 'contrast'
+  contrast?: 'default' | 'contrast'
+  color?:
+    | 'primary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'dark'
+    | 'black'
   rel?: string
   target?: string
   title?: string

diff --git a/src/plugins/components/dropdown-item/dropdown-item.variants.ts b/src/plugins/components/dropdown-item/dropdown-item.variants.ts
@@ -7,7 +7,17 @@ export const rounded = {
   lg: 'nui-item-rounded-lg',
 } as const satisfies DropdownItemVariant<'rounded'>
 
-export const color = {
+export const contrast = {
   default: 'nui-item-default',
   contrast: 'nui-item-contrast',
+} as const satisfies DropdownItemVariant<'contrast'>
+
+export const color = {
+  primary: 'nui-item-primary',
+  info: 'nui-item-info',
+  success: 'nui-item-success',
+  warning: 'nui-item-warning',
+  danger: 'nui-item-danger',
+  dark: 'nui-item-dark',
+  black: 'nui-item-black',
 } as const satisfies DropdownItemVariant<'color'>
diff --git a/src/plugins/components/dropdown-item/index.ts b/src/plugins/components/dropdown-item/index.ts
@@ -36,40 +36,70 @@ export default plugin(({ addComponents, theme }) => {
         [`@apply text-${config.font.color.inactive.light} dark:text-${config.font.color.inactive.dark}`]:
           {},
       },
-      //Color:default
+      //Contrast:default
       '&.nui-item-default': {
         //Background:hover
-        [`@apply hover:bg-${config.color.default.background.light} dark:hover:bg-${config.color.default.background.dark}`]:
-          {},
-        //Font:hover
-        [`@apply hover:text-${config.color.default.font.color.light} dark:hover:text-${config.color.default.font.color.dark}`]:
+        [`@apply hover:bg-${config.contrast.default.background.light} dark:hover:bg-${config.contrast.default.background.dark}`]:
           {},
         '&.nui-active': {
           //Background:hover
-          [`@apply bg-${config.color.default.background.light} dark:bg-${config.color.default.background.dark}`]:
-            {},
-          //Font:hover
-          [`@apply text-${config.color.default.font.color.light} dark:text-${config.color.default.font.color.dark}`]:
+          [`@apply bg-${config.contrast.default.background.light} dark:bg-${config.contrast.default.background.dark}`]:
             {},
         },
       },
-      //Color:contrast
+      //Contrast:contrast
       '&.nui-item-contrast': {
         //Background:hover
-        [`@apply hover:bg-${config.color.contrast.background.light} dark:hover:bg-${config.color.contrast.background.dark}`]:
-          {},
-        //Font:hover
-        [`@apply hover:text-${config.color.contrast.font.color.light} dark:hover:text-${config.color.contrast.font.color.dark}`]:
+        [`@apply hover:bg-${config.contrast.contrast.background.light} dark:hover:bg-${config.contrast.contrast.background.dark}`]:
           {},
         '&.nui-active': {
           //Background:hover
-          [`@apply bg-${config.color.contrast.background.light} dark:bg-${config.color.contrast.background.dark}`]:
-            {},
-          //Font:hover
-          [`@apply text-${config.color.contrast.font.color.light} dark:text-${config.color.contrast.font.color.dark}`]:
+          [`@apply bg-${config.contrast.contrast.background.light} dark:bg-${config.contrast.contrast.background.dark}`]:
             {},
         },
       },
+      //Color:primary
+      '&.nui-item-primary': {
+        //Font:hover
+        [`@apply hover:text-${config.color.primary.font.color.light} dark:hover:text-${config.color.primary.font.color.dark}`]:
+          {},
+      },
+      //Color:info
+      '&.nui-item-info': {
+        //Font:hover
+        [`@apply hover:text-${config.color.info.font.color.light} dark:hover:text-${config.color.info.font.color.dark}`]:
+          {},
+      },
+      //Color:success
+      '&.nui-item-success': {
+        //Font:hover
+        [`@apply hover:text-${config.color.success.font.color.light} dark:hover:text-${config.color.success.font.color.dark}`]:
+          {},
+      },
+      //Color:warning
+      '&.nui-item-warning': {
+        //Font:hover
+        [`@apply hover:text-${config.color.warning.font.color.light} dark:hover:text-${config.color.warning.font.color.dark}`]:
+          {},
+      },
+      //Color:danger
+      '&.nui-item-danger': {
+        //Font:hover
+        [`@apply hover:text-${config.color.danger.font.color.light} dark:hover:text-${config.color.danger.font.color.dark}`]:
+          {},
+      },
+      //Color:dark
+      '&.nui-item-dark': {
+        //Font:hover
+        [`@apply hover:text-${config.color.dark.font.color.light} dark:hover:text-${config.color.dark.font.color.dark}`]:
+          {},
+      },
+      //Color:black
+      '&.nui-item-black': {
+        //Font:hover
+        [`@apply hover:text-${config.color.black.font.color.light} dark:hover:text-${config.color.black.font.color.dark}`]:
+          {},
+      },
       //Rounded:sm
       '&.nui-item-rounded-sm': {
         [`@apply rounded-${config.rounded.sm}`]: {},