From e104b7a54e8c35d398cf68c1a9003a26c828107a Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Mon, 4 Dec 2023 22:24:11 +0100
Subject: [PATCH] feat(Button): rename shape to rounded and flavor to variant

---
 .../components/button/button.component.ts     |   8 +-
 src/plugins/components/button/button.docs.mdx |  12 +-
 .../components/button/button.stories.ts       | 242 +++++++++---------
 src/plugins/components/button/button.types.ts |   4 +-
 .../components/button/button.variants.ts      |  16 +-
 5 files changed, 141 insertions(+), 141 deletions(-)

diff --git a/src/plugins/components/button/button.component.ts b/src/plugins/components/button/button.component.ts
index a13f16b..47a66c6 100644
--- a/src/plugins/components/button/button.component.ts
+++ b/src/plugins/components/button/button.component.ts
@@ -11,9 +11,9 @@ export const Button = ({
   label,
   loading,
   shadow,
-  shape,
+  rounded,
   children,
-  flavor = 'solid',
+  variant = 'solid',
   size = 'md',
   color = 'default',
   classes,
@@ -25,10 +25,10 @@ export const Button = ({
       class=${[
         'nui-button',
         variants.size[size],
-        variants.flavor[flavor],
+        variants.variant[variant],
         variants.color[color],
         loading && 'nui-button-loading',
-        shape && variants.shape[shape],
+        rounded && variants.rounded[rounded],
         shadow && variants.shadow[shadow],
         classes?.wrapper,
       ]
diff --git a/src/plugins/components/button/button.docs.mdx b/src/plugins/components/button/button.docs.mdx
index ae7db4a..5dc26fa 100644
--- a/src/plugins/components/button/button.docs.mdx
+++ b/src/plugins/components/button/button.docs.mdx
@@ -44,9 +44,9 @@ Size allows you to change the size of the button.
 
 <br />
 
-### Flavor: solid
+### Variants: solid
 
-Flavors represent the visual styles applied to a button. Below are examples of the solid flavor.
+Variantss represent the visual styles applied to a button. Below are examples of the solid flavor.
 
 <div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.SolidDefault} />
@@ -60,9 +60,9 @@ Flavors represent the visual styles applied to a button. Below are examples of t
 
 <br />
 
-### Flavor: pastel
+### Variants: pastel
 
-Flavors represent the visual styles applied to a button. Below are examples of the pastel flavor.
+Variantss represent the visual styles applied to a button. Below are examples of the pastel flavor.
 
 <div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.PastelPrimary} />
@@ -74,9 +74,9 @@ Flavors represent the visual styles applied to a button. Below are examples of t
 
 <br />
 
-### Flavor: outline
+### Variants: outline
 
-Flavors represent the visual styles applied to a button. Below are examples of the outline flavor.
+Variantss represent the visual styles applied to a button. Below are examples of the outline flavor.
 
 <div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.OutlinePrimary} />
diff --git a/src/plugins/components/button/button.stories.ts b/src/plugins/components/button/button.stories.ts
index 4fc024b..bb6040f 100644
--- a/src/plugins/components/button/button.stories.ts
+++ b/src/plugins/components/button/button.stories.ts
@@ -39,12 +39,12 @@ const meta = {
       options: ['sm', 'md', 'lg', 'xl'],
       defaultValue: 'md',
     },
-    shape: {
+    rounded: {
       control: { type: 'select' },
       options: ['straight', 'rounded', 'smooth', 'curved', 'full'],
       defaultValue: 'straight',
     },
-    flavor: {
+    variant: {
       control: { type: 'select' },
       options: ['solid', 'pastel', 'outline'],
       defaultValue: 'solid',
@@ -69,9 +69,9 @@ export const Solid: Story = {
     color: 'default',
     label: 'Button',
     // set default values used for UI preview
-    flavor: 'solid',
+    variant: 'solid',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -79,36 +79,36 @@ export const Solid: Story = {
 
 // #region Shapes
 export const Straight: Story = {
-  name: 'Shape: straight',
+  name: 'Rounded: straight',
   args: {
     label: 'Button',
   },
 }
 export const Rounded: Story = {
-  name: 'Shape: rounded',
+  name: 'Rounded: rounded',
   args: {
-    shape: 'rounded',
+    rounded: 'sm',
     label: 'Button',
   },
 }
 export const Smooth: Story = {
-  name: 'Shape: smooth',
+  name: 'Rounded: smooth',
   args: {
-    shape: 'smooth',
+    rounded: 'md',
     label: 'Button',
   },
 }
 export const Curved: Story = {
-  name: 'Shape: curved',
+  name: 'Rounded: curved',
   args: {
-    shape: 'curved',
+    rounded: 'lg',
     label: 'Button',
   },
 }
 export const Full: Story = {
-  name: 'Shape: full',
+  name: 'Rounded: full',
   args: {
-    shape: 'full',
+    rounded: 'full',
     label: 'Button',
   },
 }
@@ -120,7 +120,7 @@ export const Sm: Story = {
   args: {
     size: 'sm',
     label: 'Button',
-    shape: 'rounded',
+    rounded: 'sm',
   },
 }
 export const Md: Story = {
@@ -128,7 +128,7 @@ export const Md: Story = {
   args: {
     size: 'md',
     label: 'Button',
-    shape: 'rounded',
+    rounded: 'sm',
   },
 }
 export const Lg: Story = {
@@ -136,7 +136,7 @@ export const Lg: Story = {
   args: {
     size: 'lg',
     label: 'Button',
-    shape: 'rounded',
+    rounded: 'sm',
   },
 }
 // #endregion
@@ -147,9 +147,9 @@ export const SolidDefault: Story = {
   args: {
     color: 'default',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -159,9 +159,9 @@ export const SolidMuted: Story = {
   args: {
     color: 'muted',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -171,9 +171,9 @@ export const SolidPrimary: Story = {
   args: {
     color: 'primary',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -183,9 +183,9 @@ export const SolidInfo: Story = {
   args: {
     color: 'info',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -195,9 +195,9 @@ export const SolidSuccess: Story = {
   args: {
     color: 'success',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -207,9 +207,9 @@ export const SolidWarning: Story = {
   args: {
     color: 'warning',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -219,9 +219,9 @@ export const SolidDanger: Story = {
   args: {
     color: 'danger',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -233,9 +233,9 @@ export const PastelPrimary: Story = {
   args: {
     color: 'primary',
     label: 'Button',
-    flavor: 'pastel',
+    variant: 'pastel',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -245,9 +245,9 @@ export const PastelInfo: Story = {
   args: {
     color: 'info',
     label: 'Button',
-    flavor: 'pastel',
+    variant: 'pastel',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -257,9 +257,9 @@ export const PastelSuccess: Story = {
   args: {
     color: 'success',
     label: 'Button',
-    flavor: 'pastel',
+    variant: 'pastel',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -269,9 +269,9 @@ export const PastelWarning: Story = {
   args: {
     color: 'warning',
     label: 'Button',
-    flavor: 'pastel',
+    variant: 'pastel',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -281,9 +281,9 @@ export const PastelDanger: Story = {
   args: {
     color: 'danger',
     label: 'Button',
-    flavor: 'pastel',
+    variant: 'pastel',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -295,9 +295,9 @@ export const OutlinePrimary: Story = {
   args: {
     color: 'primary',
     label: 'Button',
-    flavor: 'outline',
+    variant: 'outline',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -307,9 +307,9 @@ export const OutlineInfo: Story = {
   args: {
     color: 'info',
     label: 'Button',
-    flavor: 'outline',
+    variant: 'outline',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -319,9 +319,9 @@ export const OutlineSuccess: Story = {
   args: {
     color: 'success',
     label: 'Button',
-    flavor: 'outline',
+    variant: 'outline',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -331,9 +331,9 @@ export const OutlineWarning: Story = {
   args: {
     color: 'warning',
     label: 'Button',
-    flavor: 'outline',
+    variant: 'outline',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -343,9 +343,9 @@ export const OutlineDanger: Story = {
   args: {
     color: 'danger',
     label: 'Button',
-    flavor: 'outline',
+    variant: 'outline',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -357,8 +357,8 @@ export const IconDefault: Story = {
   args: {
     color: 'default',
     label: 'Button',
-    flavor: 'solid',
-    shape: 'rounded',
+    variant: 'solid',
+    rounded: 'sm',
     size: 'md',
     children: html`
       <svg
@@ -387,8 +387,8 @@ export const IconMuted: Story = {
   args: {
     color: 'muted',
     label: 'Button',
-    flavor: 'solid',
-    shape: 'rounded',
+    variant: 'solid',
+    rounded: 'sm',
     size: 'md',
     children: html`
       <span>Button</span>
@@ -417,8 +417,8 @@ export const IconPrimary: Story = {
   args: {
     color: 'primary',
     label: 'Button',
-    flavor: 'solid',
-    shape: 'rounded',
+    variant: 'solid',
+    rounded: 'sm',
     size: 'md',
     children: html`
       <svg
@@ -451,8 +451,8 @@ export const IconInfo: Story = {
   args: {
     color: 'info',
     label: 'Button',
-    flavor: 'solid',
-    shape: 'rounded',
+    variant: 'solid',
+    rounded: 'sm',
     size: 'md',
     children: html`
       <svg
@@ -477,8 +477,8 @@ export const IconSuccess: Story = {
   args: {
     color: 'success',
     label: 'Button',
-    flavor: 'solid',
-    shape: 'rounded',
+    variant: 'solid',
+    rounded: 'sm',
     size: 'md',
     children: html`
       <svg
@@ -503,8 +503,8 @@ export const IconWarning: Story = {
   args: {
     color: 'warning',
     label: 'Button',
-    flavor: 'solid',
-    shape: 'rounded',
+    variant: 'solid',
+    rounded: 'sm',
     size: 'md',
     children: html`
       <svg
@@ -533,9 +533,9 @@ export const IconDanger: Story = {
   args: {
     color: 'danger',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
     children: html`
       <svg
@@ -562,9 +562,9 @@ export const ShadowFlatDefault: Story = {
   args: {
     color: 'default',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'flat',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -574,9 +574,9 @@ export const ShadowFlatMuted: Story = {
   args: {
     color: 'muted',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'flat',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -586,9 +586,9 @@ export const ShadowFlatPrimary: Story = {
   args: {
     color: 'primary',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'flat',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -598,9 +598,9 @@ export const ShadowFlatInfo: Story = {
   args: {
     color: 'info',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'flat',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -610,9 +610,9 @@ export const ShadowFlatSuccess: Story = {
   args: {
     color: 'success',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'flat',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -622,9 +622,9 @@ export const ShadowFlatWarning: Story = {
   args: {
     color: 'warning',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'flat',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -634,9 +634,9 @@ export const ShadowFlatDanger: Story = {
   args: {
     color: 'danger',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'flat',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -648,9 +648,9 @@ export const ShadowHoverDefault: Story = {
   args: {
     color: 'default',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'hover',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -660,9 +660,9 @@ export const ShadowHoverMuted: Story = {
   args: {
     color: 'muted',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'hover',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -672,9 +672,9 @@ export const ShadowHoverPrimary: Story = {
   args: {
     color: 'primary',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'hover',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -684,9 +684,9 @@ export const ShadowHoverInfo: Story = {
   args: {
     color: 'info',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'hover',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -696,9 +696,9 @@ export const ShadowHoverSuccess: Story = {
   args: {
     color: 'success',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'hover',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -708,9 +708,9 @@ export const ShadowHoverWarning: Story = {
   args: {
     color: 'warning',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'hover',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -720,9 +720,9 @@ export const ShadowHoverDanger: Story = {
   args: {
     color: 'danger',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     shadow: 'hover',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -734,9 +734,9 @@ export const LoadingDefault: Story = {
   args: {
     color: 'default',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -746,9 +746,9 @@ export const LoadingMuted: Story = {
   args: {
     color: 'muted',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -758,9 +758,9 @@ export const LoadingPrimary: Story = {
   args: {
     color: 'primary',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -770,9 +770,9 @@ export const LoadingInfo: Story = {
   args: {
     color: 'info',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -782,9 +782,9 @@ export const LoadingSuccess: Story = {
   args: {
     color: 'success',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -794,9 +794,9 @@ export const LoadingWarning: Story = {
   args: {
     color: 'warning',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -806,9 +806,9 @@ export const LoadingDanger: Story = {
   args: {
     color: 'danger',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     loading: true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -820,9 +820,9 @@ export const DisabledDefault: Story = {
   args: {
     color: 'default',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     '?disabled': true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -832,9 +832,9 @@ export const DisabledMuted: Story = {
   args: {
     color: 'muted',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     '?disabled': true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -844,9 +844,9 @@ export const DisabledPrimary: Story = {
   args: {
     color: 'primary',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     '?disabled': true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -856,9 +856,9 @@ export const DisabledInfo: Story = {
   args: {
     color: 'info',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     '?disabled': true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -868,9 +868,9 @@ export const DisabledSuccess: Story = {
   args: {
     color: 'success',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     '?disabled': true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -880,9 +880,9 @@ export const DisabledWarning: Story = {
   args: {
     color: 'warning',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     '?disabled': true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -892,9 +892,9 @@ export const DisabledDanger: Story = {
   args: {
     color: 'danger',
     label: 'Button',
-    flavor: 'solid',
+    variant: 'solid',
     '?disabled': true,
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'md',
   },
 }
@@ -904,7 +904,7 @@ export const DisabledDanger: Story = {
 export const LabelSlot: Story = {
   name: 'Slots: default slot',
   args: {
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <span>Using the slot</span>
     `,
diff --git a/src/plugins/components/button/button.types.ts b/src/plugins/components/button/button.types.ts
index 8992ce8..8ca70a9 100644
--- a/src/plugins/components/button/button.types.ts
+++ b/src/plugins/components/button/button.types.ts
@@ -4,8 +4,8 @@ export interface ButtonProps extends Record<string, unknown> {
   label?: string
   loading?: boolean
   size?: 'sm' | 'md' | 'lg' | 'xl'
-  shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
-  flavor?: 'solid' | 'pastel' | 'outline'
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
+  variant?: 'solid' | 'pastel' | 'outline'
   color?:
     | 'default'
     | 'light'
diff --git a/src/plugins/components/button/button.variants.ts b/src/plugins/components/button/button.variants.ts
index a0678ec..985fcaa 100644
--- a/src/plugins/components/button/button.variants.ts
+++ b/src/plugins/components/button/button.variants.ts
@@ -7,19 +7,19 @@ export const size = {
   xl: 'nui-button-big',
 } as const satisfies ButtonVariant<'size'>
 
-export const shape = {
-  straight: '',
-  rounded: 'nui-button-rounded',
-  curved: 'nui-button-curved',
-  smooth: 'nui-button-smooth',
+export const rounded = {
+  none: '',
+  sm: 'nui-button-rounded',
+  md: 'nui-button-curved',
+  lg: 'nui-button-smooth',
   full: 'nui-button-full',
-} as const satisfies ButtonVariant<'shape'>
+} as const satisfies ButtonVariant<'rounded'>
 
-export const flavor = {
+export const variant = {
   solid: 'nui-button-solid',
   pastel: 'nui-button-pastel',
   outline: 'nui-button-outline',
-} as const satisfies ButtonVariant<'flavor'>
+} as const satisfies ButtonVariant<'variant'>
 
 export const color = {
   none: '',