feat: added support for icons inside accordion

components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css

@@ -22,9 +22,8 @@
 .summary {
   position: relative;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x1);
   cursor: pointer;
   color: var(--Base-Text-High-contrast);
   font-family: var(--typography-Body-Bold-fontFamily);
@@ -33,6 +32,10 @@
   transition: background-color 0.3s;
 }
 
+.title {
+  flex-grow: 1;
+}
+
 .summary:hover,
 .summary:focus {
   background-color: var(--Base-Surface-Primary-light-Hover);

components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts

@@ -2,8 +2,11 @@ import { VariantProps } from "class-variance-authority"
 
 import { accordionItemVariants } from "./variants"
 
+import { IconName } from "@/types/components/icon"
+
 export interface AccordionItemProps
   extends React.HtmlHTMLAttributes<HTMLDetailsElement>,
     VariantProps<typeof accordionItemVariants> {
   title: string
+  icon?: IconName
 }

components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -3,6 +3,7 @@
 import { useRef } from "react"
 
 import { ChevronDownIcon } from "@/components/Icons"
+import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 
 import { AccordionItemProps } from "./accordionItem"
 import { accordionItemVariants } from "./variants"
@@ -11,12 +12,15 @@ import styles from "./accordionItem.module.css"
 
 export default function AccordionItem({
   children,
+  icon,
   title,
   variant,
 }: AccordionItemProps) {
   const contentRef = useRef<HTMLDivElement>(null)
   const detailsRef = useRef<HTMLDetailsElement>(null)
 
+  const IconComp = getIconByIconName(icon)
+
   function toggleAccordion() {
     const details = detailsRef.current
     const content = contentRef.current
@@ -41,7 +45,8 @@ export default function AccordionItem({
     <li className={accordionItemVariants({ variant })}>
       <details ref={detailsRef} onToggle={toggleAccordion}>
         <summary className={styles.summary}>
-          <span>{title}</span>
+          {IconComp && <IconComp className={styles.icon} color="burgundy" />}
+          <span className={styles.title}>{title}</span>
           <ChevronDownIcon className={styles.chevron} color="burgundy" />
         </summary>
         <div ref={contentRef} className={styles.content}>

components/TempDesignSystem/Accordion/accordion.module.css

@@ -5,6 +5,7 @@
 .card {
   border-radius: var(--Corner-radius-Medium);
   background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: white;
 }
 .faq {
   background-color: var(--Base-Background-Primary-Normal);

components/TempDesignSystem/Accordion/index.tsx

@@ -14,9 +14,10 @@ export default function Accordion({
       {Children.map(children, (child) => {
         if (isValidElement<AccordionItemProps>(child)) {
           return cloneElement(child, { variant })
+        } else {
+          return child
         }
       })}
-      {/* {children} */}
     </ul>
   )
 }

components/TempDesignSystem/Accordion/variants.ts

@@ -10,6 +10,6 @@ export const accordionVariants = cva(styles.accordion, {
     },
   },
   defaultVariants: {
-    variant: "card",
+    variant: "faq",
   },
 })