fix(components/accordion): allow opened panel to be closed #684 - add accordion tests (#705)

* fix(accordion.tsx): fixed bug where Accordion.Content would not close after being opened

Accordion content can now be closed and opened leaving all items collapsed.

#618

* style(accordion.tsx): update spacing after adding toggleOpen function

* test(accordion.spec.tsx): add tests for accordion click to toggle

#684

* style(accordion.spec): prettier

* style(accordion.tsx): change conditional to ternary for toggleOpen

* style(accordion.tsx): prettier update for cloneElement format

---------

Co-authored-by: Adrian Apodaca <[email protected]>

Author: mufasubhai

src/lib/components/Accordion/Accordion.spec.tsx

@@ -58,6 +58,20 @@ describe('Components / Accordion', () => {
       expect(content()[1]).toBeVisible();
     });
 
+    it('it should open and close self when `Space is pressed on the same`Accordion.Panel`', async () => {
+      const user = userEvent.setup();
+      render(<TestAccordion />);
+
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      for (const _ of titles()) {
+        await user.tab();
+      }
+      await user.keyboard('[Space]');
+      await user.keyboard('[Space]');
+
+      expect(content()[0]).not.toBeVisible();
+      expect(content()[1]).not.toBeVisible();
+    });
     it('should open focused panel without closing others on an `Accordion.Panel` with `alwaysOpen={true}`', async () => {
       const user = userEvent.setup();
       render(<TestAccordion alwaysOpen />);
@@ -237,6 +251,20 @@ describe('Components / Accordion', () => {
       });
     });
   });
+  describe('Click to toggle open', () => {
+    beforeEach(() => {
+      render(<TestAccordion />);
+    });
+
+    it('should open and close the accordion when title is clicked', async () => {
+      const titleElements = titles();
+
+      await userEvent.click(titleElements[1]); // open second panel
+      await userEvent.click(titleElements[1]); // close second panel
+      expect(content()[0]).not.toBeVisible(); // content should not be visible
+      expect(content()[1]).not.toBeVisible(); // content should not be visible
+    });
+  });
 });
 
 const TestAccordion: FC<Omit<AccordionProps, 'children'>> = (props) => (

src/lib/components/Accordion/Accordion.tsx

@@ -44,10 +44,17 @@ const AccordionComponent: FC<AccordionProps> = ({
   ...props
 }) => {
   const [isOpen, setOpen] = useState(collapseAll ? -1 : 0);
+
   const panels = useMemo(
     () =>
       Children.map(children, (child, i) =>
-        cloneElement(child, { alwaysOpen, arrowIcon, flush, isOpen: isOpen === i, setOpen: () => setOpen(i) }),
+        cloneElement(child, {
+          alwaysOpen,
+          arrowIcon,
+          flush,
+          isOpen: isOpen === i,
+          setOpen: () => setOpen(isOpen === i ? -1 : i),
+        }),
       ),
     [alwaysOpen, arrowIcon, children, flush, isOpen],
   );