From 689fa7597064ae956c4468ebb51b6aa07f8a2923 Mon Sep 17 00:00:00 2001 From: Driss Chelouati Date: Wed, 6 Dec 2023 23:43:49 +0100 Subject: [PATCH] feat(DropdownItem): config redesign and implementation --- .../dropdown-item/dropdown-item.component.ts | 6 +- .../dropdown-item/dropdown-item.config.ts | 62 +++++++++++++------ .../dropdown-item/dropdown-item.doc.mdx | 8 +-- .../dropdown-item/dropdown-item.stories.ts | 34 +++++----- .../dropdown-item/dropdown-item.types.ts | 2 +- .../dropdown-item/dropdown-item.variants.ts | 12 ++-- src/plugins/components/dropdown-item/index.ts | 38 +++++++++--- 7 files changed, 104 insertions(+), 58 deletions(-) diff --git a/src/plugins/components/dropdown-item/dropdown-item.component.ts b/src/plugins/components/dropdown-item/dropdown-item.component.ts index 9b314ab..e83b57b 100644 --- a/src/plugins/components/dropdown-item/dropdown-item.component.ts +++ b/src/plugins/components/dropdown-item/dropdown-item.component.ts @@ -12,7 +12,7 @@ export const DropdownItem = ({ target, rel, type, - shape = 'rounded', + rounded = 'sm', color = 'default', title, text, @@ -33,7 +33,7 @@ export const DropdownItem = ({ class=${[ 'nui-dropdown-item', active && 'nui-active', - shape && variants.shape[shape], + rounded && variants.rounded[rounded], color && variants.color[color], ] .filter(Boolean) @@ -67,7 +67,7 @@ export const DropdownItem = ({ class=${[ 'nui-dropdown-item', active && 'nui-active', - shape && variants.shape[shape], + rounded && variants.rounded[rounded], 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 index 239f2bc..416aa30 100644 --- a/src/plugins/components/dropdown-item/dropdown-item.config.ts +++ b/src/plugins/components/dropdown-item/dropdown-item.config.ts @@ -1,28 +1,52 @@ export const key = 'dropdownItem' as const export const defaultConfig = { - itemRounded: 'md', - textPosition: 'left', - textSize: 'sm', - duration: '300', - notActive: { - text: 'muted-500', + align: 'start', + font: { + family: 'sans', + size: 'sm', + color: { + inactive: { + light: 'muted-500', + dark: 'muted-500', + }, + }, }, - default: { - bg: 'muted-100', - bgDark: 'muted-700', - text: 'primary-500', + rounded: { + none: 'none', + sm: 'md', + md: 'lg', + lg: 'xl', }, - contrast: { - bg: 'muted-100', - bgDark: 'muted-900', - text: 'primary-500', + color: { + default: { + background: { + light: 'muted-100', + dark: 'muted-700', + }, + font: { + color: { + light: 'primary-500', + dark: 'primary-500', + }, + }, + }, + contrast: { + background: { + light: 'muted-100', + dark: 'muted-900', + }, + font: { + color: { + light: 'primary-500', + dark: 'primary-500', + }, + }, + }, }, - rounded: { - straight: 'none', - default: 'md', - smooth: 'lg', - curved: 'xl', + transition: { + property: 'colors', + duration: '300', }, } diff --git a/src/plugins/components/dropdown-item/dropdown-item.doc.mdx b/src/plugins/components/dropdown-item/dropdown-item.doc.mdx index 4480dff..78983b9 100644 --- a/src/plugins/components/dropdown-item/dropdown-item.doc.mdx +++ b/src/plugins/components/dropdown-item/dropdown-item.doc.mdx @@ -18,7 +18,7 @@ Dropdown items are an essential part of any application. Shuriken UI dropdown it
-### Shape: straight +### Rounded: none Dropdown item shapes allow you to change the border radiuses. Below is an example of a straight item. @@ -28,7 +28,7 @@ Dropdown item shapes allow you to change the border radiuses. Below is an exampl
-### Shape: rounded +### Rounded: sm Dropdown item shapes allow you to change the border radiuses. Below is an example of a rounded item. @@ -38,7 +38,7 @@ Dropdown item shapes allow you to change the border radiuses. Below is an exampl
-### Shape: smooth +### Rounded: md Dropdown item shapes allow you to change the border radiuses. Below is an example of a smooth item. @@ -48,7 +48,7 @@ Dropdown item shapes allow you to change the border radiuses. Below is an exampl
-### Shape: curved +### Rounded: lg Dropdown item shapes allow you to change the border radiuses. Below is an example of a curved item. diff --git a/src/plugins/components/dropdown-item/dropdown-item.stories.ts b/src/plugins/components/dropdown-item/dropdown-item.stories.ts index 5d59c7b..2f352fb 100644 --- a/src/plugins/components/dropdown-item/dropdown-item.stories.ts +++ b/src/plugins/components/dropdown-item/dropdown-item.stories.ts @@ -30,10 +30,10 @@ const meta = { options: ['default', 'contrast'], defaultValue: 'default', }, - shape: { + rounded: { control: { type: 'select' }, - options: ['straight', 'rounded', 'smooth', 'curved'], - defaultValue: 'straight', + options: ['none', 'sm', 'md', 'lg'], + defaultValue: 'none', }, onClick: { action: 'onClick' }, }, @@ -53,57 +53,57 @@ export const Main: Story = { color: 'default', title: 'Dropdown Item', text: 'Some nice item subtitle', - shape: 'rounded', + rounded: 'sm', style: 'max-width: 200px', }, } // #endregion -// #region Shapes +// #region Rounded export const ShapeStraight: Story = { - name: 'Shape: straight', + name: 'Rounded: none', args: { href: '#', color: 'default', title: 'Dropdown Item', text: 'Some nice item subtitle', - shape: 'straight', + rounded: 'none', style: 'min-width: 200px', }, } export const ShapeRounded: Story = { - name: 'Shape: rounded', + name: 'Rounded: sm', args: { href: '#', color: 'default', title: 'Dropdown Item', text: 'Some nice item subtitle', - shape: 'rounded', + rounded: 'sm', style: 'min-width: 200px', }, } export const ShapeSmooth: Story = { - name: 'Shape: smooth', + name: 'Rounded: md', args: { href: '#', color: 'default', title: 'Dropdown Item', text: 'Some nice item subtitle', - shape: 'smooth', + rounded: 'md', style: 'min-width: 200px', }, } export const ShapeCurved: Story = { - name: 'Shape: curved', + name: 'Rounded: lg', args: { href: '#', color: 'default', title: 'Dropdown Item', text: 'Some nice item subtitle', - shape: 'curved', + rounded: 'lg', style: 'min-width: 200px', }, } @@ -117,7 +117,7 @@ export const SlotStartIcon: Story = { color: 'default', title: 'Dropdown Item', text: 'Some nice item subtitle', - shape: 'rounded', + rounded: 'sm', start: html` Action `, diff --git a/src/plugins/components/dropdown-item/dropdown-item.types.ts b/src/plugins/components/dropdown-item/dropdown-item.types.ts index 258a783..2e0ab6a 100644 --- a/src/plugins/components/dropdown-item/dropdown-item.types.ts +++ b/src/plugins/components/dropdown-item/dropdown-item.types.ts @@ -5,7 +5,7 @@ export interface DropdownItemProps extends Record { href?: string active?: boolean disabled?: boolean - shape?: 'straight' | 'rounded' | 'smooth' | 'curved' + rounded?: 'none' | 'sm' | 'md' | 'lg' color?: 'default' | 'contrast' rel?: string target?: string diff --git a/src/plugins/components/dropdown-item/dropdown-item.variants.ts b/src/plugins/components/dropdown-item/dropdown-item.variants.ts index f81029c..f4258e0 100644 --- a/src/plugins/components/dropdown-item/dropdown-item.variants.ts +++ b/src/plugins/components/dropdown-item/dropdown-item.variants.ts @@ -1,11 +1,11 @@ import type { DropdownItemVariant } from './dropdown-item.types' -export const shape = { - straight: '', - rounded: 'nui-item-rounded', - smooth: 'nui-item-smooth', - curved: 'nui-item-curved', -} as const satisfies DropdownItemVariant<'shape'> +export const rounded = { + none: '', + sm: 'nui-item-rounded', + md: 'nui-item-smooth', + lg: 'nui-item-curved', +} as const satisfies DropdownItemVariant<'rounded'> export const color = { default: 'nui-item-default', diff --git a/src/plugins/components/dropdown-item/index.ts b/src/plugins/components/dropdown-item/index.ts index 559c807..ddf6bd1 100644 --- a/src/plugins/components/dropdown-item/index.ts +++ b/src/plugins/components/dropdown-item/index.ts @@ -19,36 +19,58 @@ export default plugin.withOptions( const config = theme(`shurikenUi.${key}`) satisfies DropdownItemConfig addComponents({ + //Wrapper [`.${prefix}dropdown-item`]: { - [`@apply ${prefix}focus flex w-full items-center justify-start gap-2 px-3 py-2 text-${config.textPosition} text-${config.textSize} cursor-pointer transition-colors duration-${config.duration}`]: + [`@apply ${prefix}focus flex w-full items-center justify-start gap-2 px-3 py-2 cursor-pointer`]: {}, - + //Font + [`@apply text-${config.align} font-${config.font.family} text-${config.font.size}`]: + {}, + //Transition + [`@apply transition-${config.transition.property} duration-${config.transition.duration}`]: + {}, + //Item:content [`.${prefix}item-content`]: { [`@apply grow`]: {}, }, + //Item:text [`&:not(.${prefix}active)`]: { - [`@apply text-${config.notActive.text}`]: {}, + [`@apply text-${config.font.color.inactive.light} dark:text-${config.font.color.inactive.dark}`]: + {}, }, + //Color:default [`&.${prefix}item-default`]: { [`&.${prefix}active, &:hover`]: { - [`@apply bg-${config.default.bg} dark:bg-${config.default.bgDark} text-${config.default.text}`]: + //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}`]: {}, }, }, + //Color:contrast [`&.${prefix}item-contrast`]: { [`&.${prefix}active, &:hover`]: { - [`@apply bg-${config.contrast.bg} dark:bg-${config.contrast.bgDark} text-${config.contrast.text}`]: + //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}`]: {}, }, }, + //Rounded:sm [`&.${prefix}item-rounded`]: { - [`@apply rounded-${config.rounded.default}`]: {}, + [`@apply rounded-${config.rounded.sm}`]: {}, }, + //Rounded:md [`&.${prefix}item-smooth`]: { - [`@apply rounded-${config.rounded.smooth}`]: {}, + [`@apply rounded-${config.rounded.md}`]: {}, }, + //Rounded:lg [`&.${prefix}item-curved`]: { - [`@apply rounded-${config.rounded.curved}`]: {}, + [`@apply rounded-${config.rounded.lg}`]: {}, }, }, })