feat(Accordion):🎸 add animation in tailwind

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 .vscode
-storybook-static
+storybook-static
+.idea

src/Components/Accordion/Accordion.stories.tsx

@@ -52,8 +52,28 @@ const sections = [
       },
       {
         id: 199,
-        title: "unbearably",
+        title: "Explore Bear Mountain on a Segway",
         order: 6
+      },
+      {
+        id: 1991,
+        title: "Attend a bear-themed costume party",
+        order: 7
+      },
+      {
+        id: 1992,
+        title: "Try bear-shaped pancakes for breakfast",
+        order: 8
+      },
+      {
+        id: 1993,
+        title: "Write a story about a bear on an adventure",
+        order: 9
+      },
+      {
+        id: 1994,
+        title: "unbearably",
+        order: 10
       }
     ]
   },

src/Components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -40,7 +40,7 @@ exports[`Accordion component > renders correctly 1`] = `
       </h3>
       <ul
         aria-labelledby="1"
-        class="ml-[10px] leading-8"
+        class="ml-[10px] animate-height-animation leading-8"
         role="region"
       >
         <li

src/Components/Accordion/index.tsx

@@ -73,7 +73,7 @@ const Accordion: FC<IAccordionProps> = ({
           </h3>
           {expanded.includes(section.id) && (
             <ul
-              className='ml-[10px] leading-8'
+              className='ml-[10px] animate-height-animation leading-8'
               role='region'
               aria-labelledby={section.id.toString()}
             >

tailwind.config.js

@@ -9,6 +9,17 @@ module.exports = {
         primary: "var(--color-primary)",
         "primary-text-color": "var(--text-color)",
         "primary-background-color-40": "var(--color-bg-rgb)"
+      },
+      keyframes: {
+        "height-animation": {
+          "0%": { height: "0", overflow: "hidden" },
+          "50%": { height: "10rem" },
+          "100%": { height: "20rem" }
+        }
+      },
+      animation: {
+        "height-animation":
+          "height-animation 100ms cubic-bezier(0.3, 0.31, 0.59, 0.7)"
       }
     }
   }