feat: multi open accordion (#963)

* feat: 744 multi open accordion but not using pixelated icon anymore

* fix: fix size of the icon and color

* fix: remove styled stitches

* fix: remove styled stitches

libs/ui-toolkit/src/components/accordion/accordion.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import ChevronDownIcon from './chevron-down';
 import classNames from 'classnames';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
 
 export interface AccordionItemProps {
   title: React.ReactNode;
@@ -13,21 +13,20 @@ export interface AccordionProps {
 }
 
 export const Accordion = ({ panels }: AccordionProps) => {
-  const [value, setValue] = useState<string>('');
+  const [values, setValues] = useState<string[]>([]);
   const triggerClassNames = classNames(
     'w-full py-2 box-border',
     'appearance-none cursor-pointer focus:outline-none',
     'flex items-center justify-between border-b border-muted',
-    'text-left'
+    'text-left text-black dark:text-white'
   );
 
   return (
     <AccordionPrimitive.Root
-      type="single"
+      type="multiple"
       className="flex flex-col"
-      value={value}
+      value={values}
-      onValueChange={setValue}
+      onValueChange={setValues}
-      collapsible
     >
       {panels.map(({ title, content }, i) => (
         <AccordionPrimitive.Item value={`item-${i + 1}`} key={`item-${i + 1}`}>
@@ -37,12 +36,15 @@ export const Accordion = ({ panels }: AccordionProps) => {
               className={triggerClassNames}
             >
               <p
-                className="inline-block text-footnote font-medium text-h6 text-black dark:text-white pt-5"
+                className="inline-block text-footnote font-medium text-h6  pt-5"
                 data-testid="accordion-title"
               >
                 {title}
               </p>
-              <ChevronDownIcon active={value === `item-${i + 1}`} aria-hidden />
+              <AccordionChevron
+                active={values.includes(`item-${i + 1}`)}
+                aria-hidden
+              />
             </AccordionPrimitive.Trigger>
           </AccordionPrimitive.Header>
           <AccordionPrimitive.Content
@@ -58,3 +60,14 @@ export const Accordion = ({ panels }: AccordionProps) => {
     </AccordionPrimitive.Root>
   );
 };
+
+export const AccordionChevron = ({ active }: { active: boolean }) => {
+  return (
+    <ChevronDownIcon
+      className={classNames('w-20 h-20 transition ease-in-out duration-300', {
+        'transform rotate-180': active,
+      })}
+      aria-hidden
+    />
+  );
+};

libs/ui-toolkit/src/components/accordion/chevron-down.tsx

@@ -1,31 +0,0 @@
-export const ChevronDownIcon = ({ active }: ChevronDownIconProps) => {
-  const rotate = active
-    ? 'transform duration-300 ease rotate-180'
-    : 'transform duration-300 ease';
-  return (
-    <svg
-      width="14"
-      height="8"
-      aria-label="chevron icon"
-      data-testid="accordion-chevron-icon"
-      viewBox="0 0 14 8"
-      fill="fillCurrent"
-      xmlns="http://www.w3.org/2000/svg"
-      className={`${rotate} inline-block fill-black dark:fill-white mx-4`}
-    >
-      <rect x="12" y="0" width="2" height="2" />
-      <rect x="10" y="2" width="2" height="2" />
-      <rect x="8" y="4" width="2" height="2" />
-      <rect x="6" y="6" width="2" height="2" />
-      <rect x="4" y="4" width="2" height="2" />
-      <rect x="2" y="2" width="2" height="2" />
-      <rect x="0" y="0" width="2" height="2" />
-    </svg>
-  );
-};
-
-export interface ChevronDownIconProps {
-  active: boolean;
-}
-
-export default ChevronDownIcon;