Fix/311: accordion (#319)

* chore: remove unuseful comments * refactor: rename Docx to Docs * fix: move Accordion example inside the story * fix: add different sizes * docs: remove example and update headers * fix: update paddings based on the designer's feedbacks * fix: fix horizontal divider width --------- Co-authored-by: Andrea Forni <[email protected]>
nearform · Jan 22, 2024 · 035afe1 · 035afe1
1 parent 708710a
commit 035afe1
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 111 deletions.
diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
@@ -2,17 +2,37 @@
 
 import * as React from 'react'
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { BsChevronDown } from '@/assets'
+import { cva, type VariantProps } from 'class-variance-authority'
 
+import { BsChevronDown } from '@/assets'
 import { cn } from '@/lib/utils'
 
+const sizeVariants = cva('', {
+  variants: {
+    size: {
+      sm: ['text-sm'],
+      md: ['text-base'],
+      lg: ['text-lg']
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+})
+
+type AccordionProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Root
+> &
+  VariantProps<typeof sizeVariants>
+
 const Accordion = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
->(({ children, className, ...props }, ref) => (
+  AccordionProps
+>(({ children, className, size, ...props }, ref) => (
   <AccordionPrimitive.Root
     className={cn(
-      'dark:bg-grey-900 bg-white px-5 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5',
+      sizeVariants({ size }),
+      'dark:bg-grey-900 bg-white w-[206px] rounded-md shadow-[0_2px_10px] shadow-black/5',
       className
     )}
     {...props}
@@ -29,7 +49,7 @@ const AccordionItem = React.forwardRef<
 >(({ children, className, ...props }, ref) => (
   <AccordionPrimitive.Item
     className={cn(
-      'overflow-hidden first:mt-0 first:rounded-t last:rounded-b border-b border-grey-200 dark:border-grey-700 last:border-0',
+      'px-4 overflow-hidden first:mt-0 first:rounded-t last:rounded-b border-b border-grey-200 dark:border-grey-700 last:border-0',
       className
     )}
     {...props}
@@ -45,7 +65,7 @@ const AccordionHeader = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>
 >(({ children, className, ...props }, ref) => (
   <AccordionPrimitive.Header
-    className={cn('flex', className)}
+    className={cn('flex font-semibold py-4', className)}
     {...props}
     ref={ref}
   >
@@ -61,7 +81,7 @@ const AccordionTrigger = React.forwardRef<
   <AccordionHeader>
     <AccordionPrimitive.Trigger
       className={cn(
-        'dark:bg-grey-900 dark:text-white group flex h-[45px] flex-1 cursor-default items-center justify-between bg-white text-[15px] leading-none',
+        'dark:bg-grey-900 dark:text-white group flex flex-1 cursor-default items-center justify-between bg-white leading-none',
         className
       )}
       {...props}
@@ -83,13 +103,13 @@ const AccordionContent = React.forwardRef<
 >(({ children, className, ...props }, ref) => (
   <AccordionPrimitive.Content
     className={cn(
-      'dark:text-white data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px]',
+      'dark:text-white data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden',
       className
     )}
     {...props}
     ref={ref}
   >
-    <div className="py-[15px]">{children}</div>
+    <div className="pb-3">{children}</div>
   </AccordionPrimitive.Content>
 ))
 AccordionContent.displayName = AccordionPrimitive.Content.displayName

diff --git a/stories/Accordion/Accordion.example.tsx b/stories/Accordion/Accordion.example.tsx
diff --git a/stories/Accordion/Accordion.stories.tsx b/stories/Accordion/Accordion.stories.tsx
@@ -1,29 +1,74 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { AccordionDemo } from './Accordion.example'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent
+} from '@/components'
 
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
   title: 'Components/Accordion',
-  component: AccordionDemo,
+  component: Accordion,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'centered'
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
   argTypes: {
-    className: {
-      controle: 'text',
-      description: 'Alter the className to change the style'
+    type: {
+      options: ['single', 'multiple'],
+      control: 'radio'
+    },
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: 'radio'
     }
-  }
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-} satisfies Meta<typeof AccordionDemo>
+  },
+  render: props => (
+    <Accordion {...props}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Item 1</AccordionTrigger>
+        <AccordionContent>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          facilisis ac ligula ut luctus. Nulla sed tortor tempor, auctor mi at,
+          mollis nulla.
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Item 2</AccordionTrigger>
+        <AccordionContent>
+          <div className="px-6 text-foreground-muted bg-blue-50 dark:bg-blue-900 dark:text-foreground-inverse h-40 font-semibold items-center flex justify-center">
+            Replace this component with your content
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Item 3</AccordionTrigger>
+        <AccordionContent>
+          <div className="px-6 text-foreground-muted bg-blue-50 dark:bg-blue-900 dark:text-foreground-inverse h-40 font-semibold items-center flex justify-center">
+            Replace this component with your content
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+} satisfies Meta<typeof Accordion>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {}
+export const Single: Story = {
+  args: {
+    type: 'single',
+    collapsible: true,
+    size: 'md'
+  }
+}
+
+export const Multiple: Story = {
+  args: {
+    type: 'multiple',
+    size: 'md'
+  }
 }
diff --git a/stories/Accordion/Docx.mdx → stories/Accordion/Docs.mdx b/stories/Accordion/Docx.mdx → stories/Accordion/Docs.mdx
@@ -6,15 +6,19 @@ import * as AccordionStories from './Accordion.stories'
 
 # Accordion
 
-An Accordion is a vertically stacked set of interactive headings that each reveal an associated section of content.
+An accordion component is an interactive element with headers and collapsible content panels. 
+It's used to present information in a compact, organised way, typically for FAQs, menus, or content sections. 
+Users can click on headers to expand or collapse the associated content, improving space efficiency and user experience.
 
-## Default
 
-<Canvas of={AccordionStories.Default} />
+## Single
+<Canvas of={AccordionStories.Single} />
 
-## Attributes
+## Multiple
+<Canvas of={AccordionStories.Multiple} />
 
-#### Accordion
+## Attributes
+### Accordion
 
 Contains all the parts of an accordion
 
@@ -88,7 +92,7 @@ Contains all the parts of an accordion
   </tbody>
 </table>
 
-#### AccordionItem
+### AccordionItem
 
 Contains all the parts of a collapsible section
 
@@ -117,7 +121,7 @@ Contains all the parts of a collapsible section
   </tbody>
 </table>
 
-#### AccordionItem
+### AccordionItem
 
 Contains header & content of a item the Accordion
 
@@ -146,7 +150,7 @@ Contains header & content of a item the Accordion
   </tbody>
 </table>
 
-#### AccordionHeader
+### AccordionHeader
 
 Wraps an Accordion.Trigger. Use the asChild prop to update it to the appropriate heading level for your page.
 
@@ -165,7 +169,7 @@ Wraps an Accordion.Trigger. Use the asChild prop to update it to the appropriate
   </tbody>
 </table>
 
-#### AccordionTrigger
+### AccordionTrigger
 
 Toggles the collapsed state of its associated item. It should be nested inside of an Accordion.Header.
 
@@ -184,7 +188,7 @@ Toggles the collapsed state of its associated item. It should be nested inside o
   </tbody>
 </table>
 
-#### AccordionContent
+### AccordionContent
 
 Contains the collapsible content for an item.
 
@@ -207,44 +211,3 @@ Contains the collapsible content for an item.
     </tr>
   </tbody>
 </table>
-
-## Example
-
-```tsx
-import {
-    Accordion,
-    AccordionItem,
-    AccordionHeader,
-    AccordionTrigger,
-    AccordionContent
-} from '@/components/Accordion'
-
-export const AccordionDemo = () => (
-    <Accordion type="single" defaultValue="item-1" collapsible>
-        <AccordionItem value="item-1">
-            <AccordionTrigger>Item 1</AccordionTrigger>
-            <AccordionContent>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse facilisis ac ligula ut luctus. Nulla sed tortor tempor, auctor mi at, mollis nulla.
-            </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="item-2" className=''>
-            <AccordionTrigger>Item 2</AccordionTrigger>
-            <AccordionContent>
-                <div className="text-sm px-6 text-foreground-muted bg-blue-50 dark:bg-blue-900 dark:text-foreground-inverse h-40 text-lg font-semibold items-center flex justify-center">
-                    Replace this component with your content
-                </div>
-            </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="item-3">
-            <AccordionTrigger>Item 3</AccordionTrigger>
-            <AccordionContent>
-                <div className="bg-blue-50 dark:bg-blue-900 dark:text-foreground-inverse h-40 text-lg font-semibold items-center flex justify-center text-sm px-6 text-foreground-muted">
-                    Replace this component with your content
-                </div>
-            </AccordionContent>
-        </AccordionItem>
-    </Accordion>
-);
-```