feat(Accordion): rename shape prop to rounded, update stories

shuriken-ui · Dec 5, 2023 · 0e49c08 · 0e49c08
1 parent 062aef0
commit 0e49c08
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 83 deletions.
diff --git a/src/plugins/components/accordion/accordion.component.ts b/src/plugins/components/accordion/accordion.component.ts
@@ -12,7 +12,7 @@ import { Paragraph } from '../paragraph/paragraph.component'
 export const Accordion = ({
   items,
   openItems,
-  shape,
+  rounded,
   exclusive,
   action = 'dot',
   classes,
@@ -25,7 +25,7 @@ export const Accordion = ({
           class=${[
             'nui-accordion',
             action && variants.action[action],
-            shape && variants.shape[shape],
+            rounded && variants.rounded[rounded],
             classes?.wrapper,
           ]
             .filter(Boolean)

diff --git a/src/plugins/components/accordion/accordion.config.ts b/src/plugins/components/accordion/accordion.config.ts
@@ -93,62 +93,6 @@ export const defaultConfig = {
   },
 }
 
-// export const defaultConfig = {
-//   size: 'full',
-//   border: 'muted-200',
-//   borderDark: 'muted-700',
-//   bg: 'white',
-//   bgDark: 'muted-800',
-//   detail: {
-//     border: 'muted-200',
-//     borderDark: 'muted-700',
-//   },
-//   detailAndDot: {
-//     bg: 'muted-200',
-//     bgDark: 'muted-700',
-//   },
-//   detailOpenAndDot: {
-//     bg: 'primary-500',
-//   },
-//   headerInner: {
-//     text: 'muted-800',
-//     textDark: 'white',
-//   },
-//   dot: {
-//     size: '3',
-//     rounded: 'full',
-//     duration: '300',
-//   },
-//   outer: {
-//     border: 'muted-200',
-//     borderDark: 'muted-700',
-//     bg: 'white',
-//     bgDark: 'muted-700/60',
-//     size: '8',
-//     rounded: 'full',
-//     duration: '300',
-//   },
-//   chevronIcon: {
-//     size: '4',
-//     duration: '300',
-//   },
-//   plusIcon: {
-//     size: '4',
-//     duration: '300',
-//   },
-//   content: {
-//     space: '5',
-//     font: 'sans',
-//     text: 'muted-500',
-//     textDark: 'muted-400',
-//   },
-//   rounded: {
-//     default: 'md',
-//     smooth: 'lg',
-//     curved: 'xl',
-//   },
-// }
-
 export type AccordionConfig = typeof defaultConfig
 export interface AccordionPluginConfig {
   [key]: AccordionConfig

diff --git a/src/plugins/components/accordion/accordion.doc.mdx b/src/plugins/components/accordion/accordion.doc.mdx
@@ -18,7 +18,7 @@ Accordions are togglable areas that you can use to hide some pieces of content.
 
 <br />
 
-### Shape: straight
+### Rounded: none
 
 Accordions can have different shapes. Below is an example of the straight shape.
 
@@ -28,7 +28,7 @@ Accordions can have different shapes. Below is an example of the straight shape.
 
 <br />
 
-### Shape: rounded
+### Rounded: sm
 
 Accordions can have different shapes. Below is an example of the rounded shape.
 
@@ -38,7 +38,7 @@ Accordions can have different shapes. Below is an example of the rounded shape.
 
 <br />
 
-### Shape: smooth
+### Rounded: md
 
 Accordions can have different shapes. Below is an example of the smooth shape.
 
@@ -48,7 +48,7 @@ Accordions can have different shapes. Below is an example of the smooth shape.
 
 <br />
 
-### Shape: curved
+### Rounded: lg
 
 Accordions can have different shapes. Below is an example of the curved shape.
 

diff --git a/src/plugins/components/accordion/accordion.stories.ts b/src/plugins/components/accordion/accordion.stories.ts
@@ -20,7 +20,7 @@ const meta = {
       options: ['dot', 'chevron', 'plus'],
       defaultValue: 'dot',
     },
-    shape: {
+    rounded: {
       control: { type: 'select' },
       options: ['straight', 'rounded', 'smooth', 'curved'],
       defaultValue: 'rounded',
@@ -57,52 +57,52 @@ export const Solid: Story = {
     // set default values used for UI preview
     items: data,
     action: 'dot',
-    shape: 'rounded',
+    rounded: 'sm',
     style: 'max-width: 540px;',
   },
 }
 // #endregion
 
-// #region Shapes
+// #region Rounded
 export const Straight: Story = {
-  name: 'Shape: straight',
+  name: 'Rounded: none',
   args: {
     items: data,
     action: 'dot',
-    shape: 'straight',
+    rounded: 'none',
     exclusive: true,
     style: 'min-width: 540px; max-width: 540px;',
   },
 }
 
 export const Rounded: Story = {
-  name: 'Shape: rounded',
+  name: 'Rounded: sm',
   args: {
     items: data,
     action: 'dot',
-    shape: 'rounded',
+    rounded: 'sm',
     exclusive: true,
     style: 'min-width: 540px; max-width: 540px;',
   },
 }
 
 export const Smooth: Story = {
-  name: 'Shape: smooth',
+  name: 'Rounded: md',
   args: {
     items: data,
     action: 'dot',
-    shape: 'smooth',
+    rounded: 'md',
     exclusive: true,
     style: 'min-width: 540px; max-width: 540px;',
   },
 }
 
 export const Curved: Story = {
-  name: 'Shape: curved',
+  name: 'Rounded: lg',
   args: {
     items: data,
     action: 'dot',
-    shape: 'curved',
+    rounded: 'lg',
     exclusive: true,
     style: 'min-width: 540px; max-width: 540px;',
   },
@@ -115,7 +115,7 @@ export const Dot: Story = {
   args: {
     items: data,
     action: 'dot',
-    shape: 'rounded',
+    rounded: 'sm',
     exclusive: true,
     style: 'min-width: 540px; max-width: 540px;',
   },
@@ -128,7 +128,7 @@ export const Chevron: Story = {
   args: {
     items: data,
     action: 'chevron',
-    shape: 'rounded',
+    rounded: 'sm',
     exclusive: true,
     style: 'min-width: 540px; max-width: 540px;',
   },
@@ -141,7 +141,7 @@ export const Plus: Story = {
   args: {
     items: data,
     action: 'plus',
-    shape: 'rounded',
+    rounded: 'sm',
     exclusive: true,
     style: 'min-width: 540px; max-width: 540px;',
   },

diff --git a/src/plugins/components/accordion/accordion.types.ts b/src/plugins/components/accordion/accordion.types.ts
@@ -7,7 +7,7 @@ export interface AccordionProps extends Record<string, unknown> {
   }[]
   openItems?: number[]
   exclusive?: boolean
-  shape?: 'straight' | 'rounded' | 'smooth' | 'curved'
+  rounded?: 'none' | 'sm' | 'md' | 'lg'
   action?: 'dot' | 'chevron' | 'plus'
   classes?: {
     wrapper?: string | string[]

diff --git a/src/plugins/components/accordion/accordion.variants.ts b/src/plugins/components/accordion/accordion.variants.ts
@@ -1,11 +1,11 @@
 import type { AccordionVariant } from './accordion.types'
 
-export const shape = {
-  straight: '',
-  rounded: 'nui-accordion-rounded',
-  smooth: 'nui-accordion-smooth',
-  curved: 'nui-accordion-curved',
-} as const satisfies AccordionVariant<'shape'>
+export const rounded = {
+  none: '',
+  sm: 'nui-accordion-rounded',
+  md: 'nui-accordion-smooth',
+  lg: 'nui-accordion-curved',
+} as const satisfies AccordionVariant<'rounded'>
 
 export const action = {
   dot: 'nui-accordion-dot',