Improve Accordion

Author: agjs

src/Components/Accordion/Accordion.stories.tsx

@@ -182,14 +182,23 @@ const sections = [
 ];
 
 export const Primary = () => {
-  const [expandedSections, setExpandedSections] = useState<number[]>([]);
+  const [expandedSections, setExpandedSections] = useState<number[]>([
+    sections[0].id
+  ]);
 
   return (
     <Accordion
       className='w-[500px]'
       sections={sections}
-      expandedSections={expandedSections}
-      setExpandedSections={setExpandedSections}
+      expanded={expandedSections}
+      setExpanded={(expanded: number[]) => {
+        console.log(
+          "🚀 ─── file: Accordion.stories.tsx:196 ─── Primary ─── expanded:",
+          expanded
+        );
+
+        setExpandedSections(expanded);
+      }}
       onSectionItemClick={sectionItem => {
         action("onSectionItemClick")(sectionItem);
       }}

src/Components/Accordion/Accordion.test.tsx

@@ -28,21 +28,21 @@ describe("Accordion component", () => {
     const { asFragment } = render(
       <Accordion
         sections={mockSections}
-        setExpandedSections={() => null}
-        expandedSections={[1]}
+        setExpanded={() => null}
+        expanded={[1]}
         onSectionItemClick={vi.fn()}
       />
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test("renders all sections and items correctly", () => {
-    const setExpandedSections = vi.fn();
+    const setExpanded = vi.fn();
     render(
       <Accordion
         sections={mockSections}
-        setExpandedSections={setExpandedSections}
-        expandedSections={[1]}
+        setExpanded={setExpanded}
+        expanded={[1]}
         onSectionItemClick={vi.fn()}
       />
     );
@@ -54,32 +54,29 @@ describe("Accordion component", () => {
   });
 
   test("expands and collapses sections on click", () => {
-    const setExpandedSections = vi.fn();
+    const setExpanded = vi.fn();
 
     render(
       <Accordion
         sections={mockSections}
-        setExpandedSections={setExpandedSections}
-        expandedSections={[1]}
+        setExpanded={setExpanded}
+        expanded={[mockSections[0].id]}
         onSectionItemClick={vi.fn()}
       />
     );
 
     fireEvent.click(screen.getByText("Section 1"));
-    expect(setExpandedSections).toHaveBeenCalledWith([1]);
-
-    fireEvent.click(screen.getByText("Section 1"));
-    expect(setExpandedSections).toHaveBeenCalledWith([1]);
+    expect(setExpanded).toHaveBeenCalledWith([]);
   });
 
   test("handles section item click events", () => {
     const onSectionItemClick = vi.fn();
     render(
       <Accordion
         sections={mockSections}
-        setExpandedSections={vi.fn()}
+        setExpanded={vi.fn()}
         onSectionItemClick={onSectionItemClick}
-        expandedSections={[1]}
+        expanded={[1]}
       />
     );
 
@@ -93,8 +90,8 @@ describe("Accordion component", () => {
         sections={mockSections}
         className='custom-class'
         sectionTitleClassName='custom-title-class'
-        setExpandedSections={vi.fn()}
-        expandedSections={[]}
+        setExpanded={vi.fn()}
+        expanded={[]}
         onSectionItemClick={vi.fn()}
       />
     );

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

@@ -6,7 +6,7 @@ exports[`Accordion component > renders correctly 1`] = `
     class=""
   >
     <div
-      class="border border-primary-text-color p-2  mb-0 border-b-0"
+      class="border border-primary-text-color p-2 mb-0 border-b-0"
       role="presentation"
     >
       <h3
@@ -78,7 +78,7 @@ exports[`Accordion component > renders correctly 1`] = `
       </ul>
     </div>
     <div
-      class="border border-primary-text-color p-2 "
+      class="border border-primary-text-color p-2"
       role="presentation"
     >
       <h3

src/Components/Accordion/index.tsx

@@ -12,14 +12,14 @@ const Accordion: FC<IAccordionProps> = ({
   itemsLabelText,
   onSectionItemClick,
   selectedItemId = null,
-  expandedSections,
-  setExpandedSections
+  expanded,
+  setExpanded
 }) => {
-  const toggleExpandSection = (sectionId: number) => {
-    if (expandedSections.includes(sectionId)) {
-      setExpandedSections(expandedSections.filter(id => id !== sectionId));
+  const toggleExpand = (sectionId: number) => {
+    if (expanded.includes(sectionId)) {
+      setExpanded(expanded.filter(id => id !== sectionId));
     } else {
-      setExpandedSections([...expandedSections, sectionId]);
+      setExpanded([...expanded, sectionId]);
     }
   };
 
@@ -31,7 +31,7 @@ const Accordion: FC<IAccordionProps> = ({
       {sections.map((section, idx) => (
         <div
           key={section.id}
-          className={classNames("border border-primary-text-color p-2 ", {
+          className={classNames("border border-primary-text-color p-2", {
             "mb-0 border-b-0": idx !== sections.length - 1
           })}
           role='presentation'
@@ -42,21 +42,21 @@ const Accordion: FC<IAccordionProps> = ({
               sectionTitleClassName,
               {
                 "mb-2 border-b border-primary-text-color pb-2":
-                  expandedSections.includes(section.id)
+                  expanded.includes(section.id)
               }
             )}
-            onClick={() => toggleExpandSection(section.id)}
+            onClick={() => toggleExpand(section.id)}
             onKeyDown={e => {
               if (e.key === "Enter" || e.key === " ") {
-                toggleExpandSection(section.id);
+                toggleExpand(section.id);
               }
             }}
             tabIndex={0}
             role='button'
-            aria-expanded={expandedSections.includes(section.id)}
+            aria-expanded={expanded.includes(section.id)}
           >
             <div className='flex items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap text-base'>
-              {expandedSections.includes(section.id) ? (
+              {expanded.includes(section.id) ? (
                 <IconExpandLess className='w-8 cursor-pointer fill-primary-text-color hover:fill-primary' />
               ) : (
                 <IconExpandMore className='w-8 cursor-pointer fill-primary-text-color hover:fill-primary' />
@@ -71,7 +71,7 @@ const Accordion: FC<IAccordionProps> = ({
               </div>
             )}
           </h3>
-          {expandedSections.indexOf(section.id) >= 0 && (
+          {expanded.includes(section.id) && (
             <ul
               className='ml-[10px] leading-8'
               role='region'

src/Components/Accordion/types.ts

@@ -18,7 +18,7 @@ export interface IAccordionProps {
   sectionTitleClassName?: string;
   itemsLabelText?: string;
   onSectionItemClick: (item: ISectionItem) => void;
-  selectedItemId?: number;
-  expandedSections: number[];
-  setExpandedSections: (sections: number[]) => void;
+  selectedItemId?: number | null;
+  expanded: number[];
+  setExpanded: (sections: number[]) => void;
 }