feat(Accordion): add expandOnTileClick for mobile-first interaction

Co-Authored-By: Jozef Képesi <[email protected]>
kiwicom · Dec 17, 2024 · 9019919 · 9019919
1 parent b78d7c5
commit 9019919
Show file tree

Hide file tree

Showing 6 changed files with 216 additions and 31 deletions.
diff --git a/packages/orbit-components/src/Accordion/Accordion.stories.tsx b/packages/orbit-components/src/Accordion/Accordion.stories.tsx
@@ -264,3 +264,58 @@ export const LoadingAccordion: Story = {
     </Accordion>
   ),
 };
+
+export const MobileFirstInteraction: Story = {
+  render: function Render() {
+    const [expandedSection, setExpandedSection] = React.useState("");
+
+    return (
+      <Stack>
+        <Text>Traditional button-based expansion:</Text>
+        <Accordion
+          expandedSection={expandedSection}
+          onExpand={id => setExpandedSection(String(id))}
+        >
+          <AccordionSection
+            id="traditional"
+            header={
+              <Stack spacing="300">
+                <Text type="primary">Click the button to expand</Text>
+                <Text size="small">Uses traditional button-based expansion</Text>
+              </Stack>
+            }
+          >
+            <Text type="primary">This section uses the traditional button-based expansion.</Text>
+          </AccordionSection>
+        </Accordion>
+
+        <Text spaceAfter="large">Mobile-first tile click expansion:</Text>
+        <Accordion
+          expandedSection={expandedSection}
+          onExpand={id => setExpandedSection(String(id))}
+        >
+          <AccordionSection
+            id="mobile"
+            expandOnTileClick
+            header={
+              <Stack spacing="300">
+                <Text type="primary">Click anywhere on the header to expand</Text>
+                <Text size="small">Uses mobile-first tile click interaction</Text>
+              </Stack>
+            }
+          >
+            <Text type="primary">
+              This section uses the mobile-first expandOnTileClick interaction.
+            </Text>
+            <Text type="primary">
+              The entire header area is clickable for better mobile usability.
+            </Text>
+            <Text type="primary">
+              Keyboard users can still use Enter or Space to expand/collapse.
+            </Text>
+          </AccordionSection>
+        </Accordion>
+      </Stack>
+    );
+  },
+};
diff --git a/packages/orbit-components/src/Accordion/AccordionSection/components/SectionHeader.tsx b/packages/orbit-components/src/Accordion/AccordionSection/components/SectionHeader.tsx
@@ -8,6 +8,7 @@ interface Props extends Common.Globals {
   readonly children: React.ReactNode;
   readonly expanded: boolean;
   readonly expandable: boolean;
+  readonly expandOnTileClick?: boolean;
   readonly onExpand?: Common.Callback;
   readonly actions?: React.ReactNode;
 }
@@ -16,25 +17,73 @@ const AccordionSectionHeader = ({
   children,
   actions,
   expanded,
+  expandOnTileClick,
   onExpand,
   expandable,
   dataTest,
-}: Props) => (
-  <div
-    className={cx("p-600 flex items-center", expanded ? "min-h-[19px]" : "min-h-form-box-normal")}
-    data-test={dataTest && `${dataTest}Header`}
-  >
-    <div className="flex grow items-center">{children}</div>
-    {!expanded && expandable && (
-      <div className="ms-600 flex">
-        {actions || (
-          <Button onClick={onExpand} type="secondary">
-            Open
-          </Button>
-        )}
-      </div>
-    )}
-  </div>
-);
+}: Props) => {
+  const isInteractive = expandOnTileClick && !expanded && expandable;
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      onExpand?.();
+    },
+    [onExpand],
+  );
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onExpand?.();
+      }
+    },
+    [onExpand],
+  );
+
+  const handleButtonClick = React.useCallback(
+    (e: React.SyntheticEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+      e.stopPropagation();
+      onExpand?.();
+    },
+    [onExpand],
+  );
+
+  const content = (
+    <>
+      <div className="flex grow items-center">{children}</div>
+      {!expanded && expandable && (
+        <div className="ms-600 flex">
+          {actions || (
+            <Button onClick={handleButtonClick} type="secondary">
+              Open
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  );
+
+  return (
+    <div
+      className={cx(
+        "p-600 flex w-full items-center",
+        expanded ? "min-h-[19px]" : "min-h-form-box-normal",
+        isInteractive && "hover:bg-cloud-light cursor-pointer border-0 bg-transparent text-left",
+      )}
+      data-test={dataTest && `${dataTest}Header`}
+      aria-expanded={expanded}
+      {...(isInteractive && {
+        role: "button",
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+      })}
+    >
+      {content}
+    </div>
+  );
+};
 
 export default AccordionSectionHeader;
diff --git a/packages/orbit-components/src/Accordion/AccordionSection/index.tsx b/packages/orbit-components/src/Accordion/AccordionSection/index.tsx
@@ -19,6 +19,7 @@ const AccordionSection = ({
   actions,
   dataTest,
   expandable = true,
+  expandOnTileClick = false,
 }: Props) => {
   const { expanded, onExpand, loading } = useAccordion();
 
@@ -40,6 +41,7 @@ const AccordionSection = ({
             expanded={Boolean(isExpanded)}
             onExpand={onExpand}
             expandable={expandable}
+            expandOnTileClick={expandOnTileClick}
             dataTest={dataTest}
           >
             {header}

diff --git a/packages/orbit-components/src/Accordion/AccordionSection/types.d.ts b/packages/orbit-components/src/Accordion/AccordionSection/types.d.ts
@@ -10,6 +10,7 @@ export interface Props extends Common.Globals {
   readonly actions?: React.ReactNode;
   readonly expanded?: boolean;
   readonly expandable?: boolean;
+  readonly expandOnTileClick?: boolean; // Mobile-first interaction
   readonly onExpand?: Common.Callback;
   readonly header?: React.ReactNode;
   readonly footer?: React.ReactNode;

diff --git a/packages/orbit-components/src/Accordion/README.md b/packages/orbit-components/src/Accordion/README.md
@@ -30,17 +30,18 @@ After adding import into your project you can use it simply like:
 
 ## Props
 
-| Name       | Type               | Required | Default | Description |
-| ---------- | ------------------ | -------- | ------- | ----------- |
-| id         | `string \| number` |          |         |             |
-| children   | `React.ReactNode`  |          |         |             |
-| actions    | `React.ReactNode`  |          |         |             |
-| expanded   | `boolean`          |          |         |             |
-| expandable | `boolean`          |          |         |             |
-| onExpand   | `Common.Callback`  |          |         |             |
-| header     | `React.ReactNode`  |          |         |             |
-| footer     | `React.ReactNode`  |          |         |             |
-| dataTest   | `string`           |          |         |             |
+| Name              | Type               | Required | Default | Description                                                                                             |
+| ----------------- | ------------------ | -------- | ------- | ------------------------------------------------------------------------------------------------------- |
+| id                | `string \| number` |          |         |                                                                                                         |
+| children          | `React.ReactNode`  |          |         |                                                                                                         |
+| actions           | `React.ReactNode`  |          |         |                                                                                                         |
+| expanded          | `boolean`          |          |         |                                                                                                         |
+| expandable        | `boolean`          |          |         |                                                                                                         |
+| expandOnTileClick | `boolean`          |          | `false` | If true, enables mobile-first interaction where the entire header area becomes clickable for expansion. |
+| onExpand          | `Common.Callback`  |          |         |                                                                                                         |
+| header            | `React.ReactNode`  |          |         |                                                                                                         |
+| footer            | `React.ReactNode`  |          |         |                                                                                                         |
+| dataTest          | `string`           |          |         |                                                                                                         |
 
 ### Callback
 

diff --git a/packages/orbit-components/src/Accordion/__tests__/index.test.tsx b/packages/orbit-components/src/Accordion/__tests__/index.test.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
-import { render, screen } from "../../test-utils";
+import { render, screen, fireEvent, waitFor } from "../../test-utils";
 import Accordion, { AccordionSection } from "..";
 
-describe(`Accordion`, () => {
+describe("Accordion", () => {
   const expandedSection = "0X1";
   const dataTest = "Accordion";
   const id = "accordionId";
@@ -35,7 +35,7 @@ describe(`Accordion`, () => {
     expect(screen.getByTestId(`${sectionDataTest}Loading`)).toBeInTheDocument();
   });
 
-  describe(`AccordionSection`, () => {
+  describe("AccordionSection", () => {
     it("should render passed components", () => {
       render(
         <AccordionSection
@@ -53,5 +53,82 @@ describe(`Accordion`, () => {
       expect(screen.getByTestId(`${sectionDataTest}Content`)).toBeInTheDocument();
       expect(screen.getByTestId(`${sectionDataTest}Footer`)).toBeInTheDocument();
     });
+
+    describe("expandOnTileClick functionality", () => {
+      const sectionId = "test";
+
+      beforeEach(() => {
+        onExpand.mockClear();
+      });
+
+      it("should expand when header is clicked and expandOnTileClick is true", async () => {
+        const clickTestId = `${sectionDataTest}-click`;
+        const expandHandler = onExpand;
+        render(
+          <Accordion onExpand={expandHandler} expandedSection={undefined}>
+            <AccordionSection
+              id={sectionId}
+              header="Clickable Header"
+              expandOnTileClick
+              dataTest={clickTestId}
+            />
+          </Accordion>,
+        );
+
+        const header = screen.getByTestId(`${clickTestId}Header`);
+        expect(header).toHaveClass("cursor-pointer");
+
+        await waitFor(() => {
+          fireEvent.click(header);
+        });
+
+        expect(expandHandler).toHaveBeenCalledWith(sectionId);
+      });
+
+      it("should not expand when header is clicked and expandOnTileClick is false", async () => {
+        const noClickTestId = `${sectionDataTest}-no-click`;
+        const expandHandler = onExpand;
+        render(
+          <Accordion onExpand={expandHandler} expandedSection={undefined}>
+            <AccordionSection
+              id={sectionId}
+              header="Non-Clickable Header"
+              dataTest={noClickTestId}
+            />
+          </Accordion>,
+        );
+
+        const header = screen.getByTestId(`${noClickTestId}Header`);
+
+        await waitFor(() => {
+          fireEvent.click(header);
+        });
+
+        expect(expandHandler).not.toHaveBeenCalled();
+      });
+
+      it("should maintain button click functionality with expandOnTileClick", async () => {
+        const buttonTestId = `${sectionDataTest}-button`;
+        const expandHandler = onExpand;
+        render(
+          <Accordion onExpand={expandHandler} expandedSection={undefined}>
+            <AccordionSection
+              id={sectionId}
+              header="Header with Both"
+              expandOnTileClick
+              dataTest={buttonTestId}
+            />
+          </Accordion>,
+        );
+
+        const button = screen.getByRole("button", { name: "Open" });
+
+        await waitFor(() => {
+          fireEvent.click(button);
+        });
+
+        expect(expandHandler).toHaveBeenCalledWith(sectionId);
+      });
+    });
   });
 });