Feat/127 accordion

package.json

@@ -72,6 +72,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",

src/animations/index.ts

@@ -0,0 +1,16 @@
+export default {
+    keyframes: {
+        slideDown: {
+            from: { height: '0' },
+            to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        slideUp: {
+            from: { height: 'var(--radix-accordion-content-height)' },
+            to: { height: '0' }
+        }
+    },
+    animation: {
+        slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+        slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)'
+    }
+}

src/components/Accordion/index.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { AngleDownIcon } from '@/assets'
+
+import { cn } from '@/lib/utils'
+
+const Accordion = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
+>(({ children, className, ...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', className)}
+    {...props}
+    ref={ref}
+  >{children}
+  </AccordionPrimitive.Root>
+));
+Accordion.displayName = AccordionPrimitive.Root.displayName
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ 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', className)}
+    {...props}
+    ref={ref}
+  >{children}
+  </AccordionPrimitive.Item>
+));
+AccordionItem.displayName = AccordionPrimitive.Item.displayName
+
+const AccordionHeader = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Header>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>
+>(({ children, className, ...props }, ref) => (
+  <AccordionPrimitive.Header
+    className={cn('flex', className)}
+    {...props}
+    ref={ref}
+  >{children}
+  </AccordionPrimitive.Header>
+));
+AccordionHeader.displayName = AccordionPrimitive.Header.displayName
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ children, className, ...props }, ref) => (
+  <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', className)}
+      {...props}
+      ref={ref}
+    >
+      {children}
+      <AngleDownIcon className="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180 w-3 h-3 text-gray-800" aria-hidden />
+    </AccordionPrimitive.Trigger>
+  </AccordionHeader>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ 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]', className)}
+    {...props}
+    ref={ref}
+  >
+    <div className='py-[15px]'>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionContent
+}

src/components/index.ts

@@ -13,3 +13,4 @@ export * from './WebsiteFooter'
 export * from './Select'
 export * from './Popover'
 export * from './Calendar'
+export * from './Accordion'

stories/Accordion/Accordion.example.tsx

@@ -0,0 +1,36 @@
+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>
+);

stories/Accordion/Accordion.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { AccordionDemo } from './Accordion.example'
+
+// 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,
+  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'
+    }
+  }
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+} satisfies Meta<typeof AccordionDemo>
+
+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: {}
+}