From 035afe13409a9ee724ccc32a764ed60b3c6b32bb Mon Sep 17 00:00:00 2001
From: Andrea Forni <1233582+andreaforni@users.noreply.github.com>
Date: Mon, 22 Jan 2024 16:30:20 +0100
Subject: [PATCH] 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 <andrea.forni@everstream.ai>
---
 src/components/Accordion/index.tsx       | 38 +++++++++---
 stories/Accordion/Accordion.example.tsx  | 37 ------------
 stories/Accordion/Accordion.stories.tsx  | 73 +++++++++++++++++++-----
 stories/Accordion/{Docx.mdx => Docs.mdx} | 65 +++++----------------
 4 files changed, 102 insertions(+), 111 deletions(-)
 delete mode 100644 stories/Accordion/Accordion.example.tsx
 rename stories/Accordion/{Docx.mdx => Docs.mdx} (63%)

diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
index b25b59e6..680ce004 100644
--- 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
deleted file mode 100644
index d8df2c6c..00000000
--- a/stories/Accordion/Accordion.example.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-  Accordion,
-  AccordionItem,
-  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 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 font-semibold items-center flex justify-center text-sm px-6 text-foreground-muted">
-          Replace this component with your content
-        </div>
-      </AccordionContent>
-    </AccordionItem>
-  </Accordion>
-)
diff --git a/stories/Accordion/Accordion.stories.tsx b/stories/Accordion/Accordion.stories.tsx
index fdfdf4e5..ecca8f7a 100644
--- 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 b/stories/Accordion/Docs.mdx
similarity index 63%
rename from stories/Accordion/Docx.mdx
rename to stories/Accordion/Docs.mdx
index e697dbfb..97922fc2 100644
--- a/stories/Accordion/Docx.mdx
+++ b/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>
-);
-```
\ No newline at end of file