feat(Snack/ButtonClose): add xs size to snack, add size prop to butto…

…n close
shuriken-ui · Dec 10, 2023 · 11172f4 · 11172f4
1 parent 7911dc8
commit 11172f4
Show file tree

Hide file tree

Showing 14 changed files with 433 additions and 24 deletions.
diff --git a/src/plugins/components/button-close/button-close.component.ts b/src/plugins/components/button-close/button-close.component.ts
@@ -10,6 +10,7 @@ import * as variants from './button-close.variants'
 export const ButtonClose = ({
   rounded,
   color = 'default',
+  size = 'sm',
   classes,
   onClick,
   ...attrs
@@ -19,6 +20,7 @@ export const ButtonClose = ({
       class=${[
         'nui-button-close',
         variants.color[color],
+        variants.size[size],
         rounded && variants.rounded[rounded],
         classes?.wrapper,
       ]

diff --git a/src/plugins/components/button-close/button-close.config.ts b/src/plugins/components/button-close/button-close.config.ts
@@ -1,7 +1,24 @@
 export const key = 'buttonClose' as const
 
 export const defaultConfig = {
-  size: '9',
+  size: {
+    xs: {
+      outer: '6',
+      inner: '3',
+    },
+    sm: {
+      outer: '8',
+      inner: '4',
+    },
+    md: {
+      outer: '10',
+      inner: '4',
+    },
+    lg: {
+      outer: '12',
+      inner: '5',
+    },
+  },
   rounded: {
     none: 'rounded-none',
     sm: 'rounded',
@@ -137,9 +154,6 @@ export const defaultConfig = {
       },
     },
   },
-  icon: {
-    size: '4',
-  },
   transition: {
     property: 'colors',
     duration: '300',

diff --git a/src/plugins/components/button-close/button-close.doc.mdx b/src/plugins/components/button-close/button-close.doc.mdx
@@ -18,6 +18,19 @@ In any application, you need a button that serves as a trigger to close or dismi
 
 <br />
 
+### Sizes
+
+Close buttons can have different sizes. Below is an example of the available sizes.
+
+<div className="flex items-end gap-3 border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
+  <Story of={ButtonCloseStories.SizeXs} />
+  <Story of={ButtonCloseStories.SizeSm} />
+  <Story of={ButtonCloseStories.SizeMd} />
+  <Story of={ButtonCloseStories.SizeLg} />
+</div>
+
+<br />
+
 ### Color: default
 
 Close buttons can have different colors. Below is an example of the default color.

diff --git a/src/plugins/components/button-close/button-close.stories.ts b/src/plugins/components/button-close/button-close.stories.ts
@@ -10,6 +10,11 @@ const meta = {
   // tags: ['autodocs'],
   render: (args) => ButtonClose(args),
   argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md', 'lg'],
+      defaultValue: 'md',
+    },
     color: {
       control: { type: 'select' },
       options: [
@@ -49,6 +54,44 @@ export const Main: Story = {
 }
 // #endregion
 
+// #region Sizes
+export const SizeXs: Story = {
+  name: 'Size: xs',
+  args: {
+    color: 'muted',
+    size: 'xs',
+    rounded: 'md',
+  },
+}
+
+export const SizeSm: Story = {
+  name: 'Size: sm',
+  args: {
+    color: 'muted',
+    size: 'sm',
+    rounded: 'md',
+  },
+}
+
+export const SizeMd: Story = {
+  name: 'Size: md',
+  args: {
+    color: 'muted',
+    size: 'md',
+    rounded: 'md',
+  },
+}
+
+export const SizeLg: Story = {
+  name: 'Size: lg',
+  args: {
+    color: 'muted',
+    size: 'lg',
+    rounded: 'md',
+  },
+}
+// #endregion
+
 // #region Color: default
 export const DefaultStraight: Story = {
   name: 'Default: none',

diff --git a/src/plugins/components/button-close/button-close.types.ts b/src/plugins/components/button-close/button-close.types.ts
@@ -2,6 +2,7 @@ import type { PropertyVariant } from '~/types/utils'
 
 export interface ButtonCloseProps extends Record<string, unknown> {
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
   color?:
     | 'default'
     | 'muted'

diff --git a/src/plugins/components/button-close/button-close.variants.ts b/src/plugins/components/button-close/button-close.variants.ts
@@ -8,6 +8,13 @@ export const rounded = {
   full: 'nui-button-full',
 } as const satisfies ButtonCloseVariant<'rounded'>
 
+export const size = {
+  xs: 'nui-button-xs',
+  sm: 'nui-button-sm',
+  md: 'nui-button-md',
+  lg: 'nui-button-lg',
+} as const satisfies ButtonCloseVariant<'size'>
+
 export const color = {
   default: 'nui-button-default',
   muted: 'nui-button-muted',

diff --git a/src/plugins/components/button-close/index.ts b/src/plugins/components/button-close/index.ts
@@ -22,15 +22,44 @@ export default plugin.withOptions(
         [`.${prefix}button-close`]: {
           [`@apply ${prefix}focus flex items-center justify-center disabled:opacity-30 cursor-pointer`]:
             {},
-          //Size
-          [`@apply h-${config.size} w-${config.size}`]: {},
           //Transition
           [`@apply transition-${config.transition.property} duration-${config.transition.duration}`]:
             {},
-          //Icon
-          [`.${prefix}button-icon`]: {
-            [`@apply h-${config.icon.size} w-${config.icon.size} fill-current`]:
-              {},
+          //Size:xs
+          [`&.${prefix}button-xs`]: {
+            [`@apply h-${config.size.xs.outer} w-${config.size.xs.outer}`]: {},
+            //Icon
+            [`.${prefix}button-icon`]: {
+              [`@apply h-${config.size.xs.inner} w-${config.size.xs.inner} fill-current`]:
+                {},
+            },
+          },
+          //Size:sm
+          [`&.${prefix}button-sm`]: {
+            [`@apply h-${config.size.sm.outer} w-${config.size.sm.outer}`]: {},
+            //Icon
+            [`.${prefix}button-icon`]: {
+              [`@apply h-${config.size.sm.inner} w-${config.size.sm.inner} fill-current`]:
+                {},
+            },
+          },
+          //Size:md
+          [`&.${prefix}button-md`]: {
+            [`@apply h-${config.size.md.outer} w-${config.size.md.outer}`]: {},
+            //Icon
+            [`.${prefix}button-icon`]: {
+              [`@apply h-${config.size.md.inner} w-${config.size.md.inner} fill-current`]:
+                {},
+            },
+          },
+          //Size:lg
+          [`&.${prefix}button-lg`]: {
+            [`@apply h-${config.size.lg.outer} w-${config.size.lg.outer}`]: {},
+            //Icon
+            [`.${prefix}button-icon`]: {
+              [`@apply h-${config.size.lg.inner} w-${config.size.lg.inner} fill-current`]:
+                {},
+            },
           },
           //Rounded:sm
           [`&.${prefix}button-rounded`]: {

diff --git a/src/plugins/components/snack/index.ts b/src/plugins/components/snack/index.ts
@@ -43,7 +43,7 @@ export default plugin.withOptions(
           //Snack:text
           [`.${prefix}snack-text`]: {
             //Font
-            [`@apply font-${config.font.family} text-${config.font.size}`]: {},
+            [`@apply font-${config.font.family}`]: {},
             //Color
             [`@apply text-${config.font.color.light} dark:text-${config.font.color.dark}`]:
               {},
@@ -52,8 +52,46 @@ export default plugin.withOptions(
           [`.${prefix}snack-button`]: {
             [`@apply hover:!bg-transparent`]: {},
           },
+          //Size:xs
+          [`&.${prefix}snack-xs`]: {
+            //Snack:media:xs
+            [`&:not(.${prefix}has-media)`]: {
+              [`@apply !ps-2`]: {},
+            },
+            //Snack:text
+            [`.${prefix}snack-text`]: {
+              //Font
+              [`@apply text-${config.size.xs.font.size}`]: {},
+            },
+            //Size
+            [`@apply h-${config.size.xs.size}`]: {},
+            //Snack:icon
+            [`.${prefix}snack-icon`]: {
+              [`@apply w-${config.size.xs.icon.outer.size} h-${config.size.xs.icon.outer.size}`]:
+                {},
+            },
+            //Icon:inner
+            [`.${prefix}snack-icon-inner`]: {
+              [`@apply h-${config.size.xs.icon.inner.size} w-${config.size.xs.icon.inner.size}`]:
+                {},
+            },
+            //Snack:image
+            [`.${prefix}snack-image, .${prefix}snack-image-inner`]: {
+              [`@apply w-${config.size.xs.image.outer.size} h-${config.size.xs.image.outer.size}`]:
+                {},
+            },
+          },
           //Size:sm
           [`&.${prefix}snack-sm`]: {
+            //Snack:media:sm
+            [`&:not(.${prefix}has-media)`]: {
+              [`@apply !ps-3`]: {},
+            },
+            //Snack:text
+            [`.${prefix}snack-text`]: {
+              //Font
+              [`@apply text-${config.size.sm.font.size}`]: {},
+            },
             //Size
             [`@apply h-${config.size.sm.size}`]: {},
             //Snack:icon
@@ -74,6 +112,15 @@ export default plugin.withOptions(
           },
           //Size:md
           [`&.${prefix}snack-md`]: {
+            //Snack:media:md
+            [`&:not(.${prefix}has-media)`]: {
+              [`@apply !ps-4`]: {},
+            },
+            //Snack:text
+            [`.${prefix}snack-text`]: {
+              //Font
+              [`@apply text-${config.size.md.font.size}`]: {},
+            },
             //Size
             [`@apply h-${config.size.md.size}`]: {},
             //Snack:icon
@@ -106,10 +153,6 @@ export default plugin.withOptions(
             [`@apply bg-${config.color.muted.background.light} dark:bg-${config.color.muted.background.dark}`]:
               {},
           },
-          //Snack:media
-          [`&:not(.${prefix}has-media)`]: {
-            [`@apply ps-4`]: {},
-          },
         },
       })
     }

diff --git a/src/plugins/components/snack/snack.component.ts b/src/plugins/components/snack/snack.component.ts
@@ -49,12 +49,39 @@ export const Snack = ({
       <span class="nui-snack-text">
         <slot>${label}</slot>
       </span>
-      ${ButtonClose({
-        shape: 'full',
-        classes: {
-          wrapper: 'nui-snack-button scale-75',
-        },
-      })}
+      ${size === 'xs'
+        ? html`
+            ${ButtonClose({
+              rounded: 'full',
+              size: 'xs',
+              classes: {
+                wrapper: 'nui-snack-button scale-75',
+              },
+            })}
+          `
+        : ''}
+      ${size === 'sm'
+        ? html`
+            ${ButtonClose({
+              rounded: 'full',
+              size: 'sm',
+              classes: {
+                wrapper: 'nui-snack-button scale-75',
+              },
+            })}
+          `
+        : ''}
+      ${size === 'md'
+        ? html`
+            ${ButtonClose({
+              rounded: 'full',
+              size: 'md',
+              classes: {
+                wrapper: 'nui-snack-button scale-75',
+              },
+            })}
+          `
+        : ''}
     </div>
   `
 }
diff --git a/src/plugins/components/snack/snack.config.ts b/src/plugins/components/snack/snack.config.ts
@@ -24,15 +24,39 @@ export const defaultConfig = {
   },
   font: {
     family: 'sans',
-    size: 'sm',
     color: {
       light: 'muted-600',
       dark: 'muted-300',
     },
   },
   size: {
+    xs: {
+      size: '6',
+      font: {
+        size: 'xs',
+      },
+      icon: {
+        outer: {
+          size: '6',
+        },
+        inner: {
+          size: '3',
+        },
+      },
+      image: {
+        outer: {
+          size: '6',
+        },
+        inner: {
+          size: '6',
+        },
+      },
+    },
     sm: {
       size: '8',
+      font: {
+        size: 'sm',
+      },
       icon: {
         outer: {
           size: '8',
@@ -52,6 +76,9 @@ export const defaultConfig = {
     },
     md: {
       size: '10',
+      font: {
+        size: 'sm',
+      },
       icon: {
         outer: {
           size: '10',