Add multi accordion component (#468)

* Add Multi Accordion * Add background color to demo * Fix import * Add token changes * Add accordion changes * Add multi accordion to root * Add multi accordion changes * Add border radius changes
ClickHouse · Sep 4, 2024 · 2e674d3 · 2e674d3
1 parent 0b8db2e
commit 2e674d3
Show file tree

Hide file tree

Showing 13 changed files with 500 additions and 13 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -48,7 +48,13 @@ import { Dialog } from "@/components/Dialog/Dialog";
 import { ConfirmationDialog } from "@/components/ConfirmationDialog/ConfirmationDialog";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar";
 import GridExample from "./examples/GridExample";
+import MultiAccordionDemo from "./components/MultiAccordion/MultiAccordionDemo";
+import styled from "styled-components";
 
+const BackgroundWrapper = styled.div`
+  background: ${({ theme }) => theme.global.color.background.default};
+  padding: 6rem;
+`;
 const headers: Array<TableHeaderType> = [
   { label: "Company", isSortable: true, sortDir: "asc" },
   { label: "Contact", isSortable: true, sortDir: "desc", sortPosition: "start" },
@@ -98,11 +104,11 @@ const App = () => {
     });
   };
   return (
-    <div style={{ padding: "6rem" }}>
-      <ClickUIProvider
-        theme={currentTheme}
-        config={{ tooltip: { delayDuration: 0 } }}
-      >
+    <ClickUIProvider
+      theme={currentTheme}
+      config={{ tooltip: { delayDuration: 0 } }}
+    >
+      <BackgroundWrapper>
         <ProgressBar
           progress={100}
           dismissable
@@ -744,8 +750,10 @@ const App = () => {
         </GridContainer>
         <Spacer />
         <GridExample />
-      </ClickUIProvider>
-    </div>
+        <Spacer />
+        <MultiAccordionDemo />
+      </BackgroundWrapper>
+    </ClickUIProvider>
   );
 };
 

diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
@@ -6,7 +6,7 @@ import { Title } from "../Typography/Title/Title";
 
 export default {
   component: Accordion,
-  title: "Display/Accordion",
+  title: "Accordion/Accordion",
   tags: ["accordion", "autodocs"],
   argTypes: {
     size: {

diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
@@ -9,7 +9,7 @@ import {
 import { Orientation } from "@/components";
 
 type AlignItemsOptions = "start" | "center" | "end" | "stretch";
-type GapOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type GapOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 type GrowShrinkOptions = "0" | "1" | "2" | "3" | "4" | "5" | "6";
 type JustifyContentOptions =
   | "center"
@@ -20,7 +20,7 @@ type JustifyContentOptions =
   | "end"
   | "left"
   | "right";
-type PaddingOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type PaddingOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 type WrapOptions = "nowrap" | "wrap" | "wrap-reverse";
 
 export interface ContainerProps<T extends ElementType = "div"> {

diff --git a/src/components/MultiAccordion/MultiAccordion.stories.tsx b/src/components/MultiAccordion/MultiAccordion.stories.tsx
@@ -0,0 +1,49 @@
+import { MultiAccordion } from "./MultiAccordion";
+
+export default {
+  component: MultiAccordion,
+  title: "Accordion/MultiAccordion",
+  tags: ["multi-accordion", "autodocs"],
+  argTypes: {
+    gap: {
+      control: "select",
+      options: ["none", "xxs", "xs", "sm", "md", "lg", "xl", "xxl"],
+    },
+    size: {
+      control: "radio",
+      options: ["none", "sm", "md", "lg"],
+    },
+    fillWidth: { control: "boolean" },
+    showBorder: { control: "boolean" },
+    showCheck: { control: "boolean" },
+    type: { control: "radio", options: ["single", "multiple"] },
+    collapsible: { control: "boolean", if: { arg: "type", eq: "single" } },
+  },
+};
+
+export const Playground = {
+  args: {
+    type: "single",
+    collapsible: true,
+    showBorder: true,
+    showCheck: true,
+    children: (
+      <>
+        <MultiAccordion.Item
+          value="content0"
+          icon="user"
+          title="Option 1"
+          isCompleted
+        >
+          Content0
+        </MultiAccordion.Item>
+        <MultiAccordion.Item
+          value="content1"
+          title="Option 2"
+        >
+          Content1 long text content
+        </MultiAccordion.Item>
+      </>
+    ),
+  },
+};
diff --git a/src/components/MultiAccordion/MultiAccordion.test.tsx b/src/components/MultiAccordion/MultiAccordion.test.tsx
@@ -0,0 +1,102 @@
+import { fireEvent } from "@testing-library/react";
+import { MultiAccordion, MultiAccordionProps } from "./MultiAccordion";
+import { renderCUI } from "@/utils/test-utils";
+const children = (
+  <>
+    <MultiAccordion.Item
+      value="content0"
+      icon="user"
+      title="Option 1"
+      isCompleted
+    >
+      Content0
+    </MultiAccordion.Item>
+    <MultiAccordion.Item
+      value="content1"
+      title="Option 2"
+    >
+      Content1 long text content
+    </MultiAccordion.Item>
+  </>
+);
+describe("MultiAccordion", () => {
+  const renderAccordion = (props: MultiAccordionProps) =>
+    renderCUI(<MultiAccordion {...props} />);
+
+  it("should render the multi accordion type single", () => {
+    const { getByText, queryByText } = renderAccordion({ type: "single", children });
+    const trigger1 = getByText("Option 1");
+    const trigger2 = getByText("Option 2");
+    expect(trigger1).toBeTruthy();
+    fireEvent.click(trigger1);
+    expect(getByText("Content0")).toBeTruthy();
+    expect(queryByText("Content1 long text content")).toBeNull();
+    fireEvent.click(trigger2);
+    expect(getByText("Content1 long text content")).toBeTruthy();
+    expect(queryByText("Content0")).toBeNull();
+    fireEvent.click(trigger2);
+    expect(getByText("Content1 long text content")).toBeTruthy();
+  });
+
+  it("should render the multi accordion type single collapsible", () => {
+    const { getByText, queryAllByTestId, queryByText } = renderAccordion({
+      type: "single",
+      collapsible: true,
+      children,
+    });
+    const trigger1 = getByText("Option 1");
+    const trigger2 = getByText("Option 2");
+    expect(trigger1).toBeTruthy();
+    fireEvent.click(trigger1);
+    expect(getByText("Content0")).toBeTruthy();
+    expect(queryByText("Content1 long text content")).toBeNull();
+    fireEvent.click(trigger2);
+    expect(getByText("Content1 long text content")).toBeTruthy();
+    expect(queryByText("Content0")).toBeNull();
+    fireEvent.click(trigger2);
+    expect(queryByText("Content1 long text content")).toBeNull();
+    expect(queryAllByTestId("accordion-status-icon")).toHaveLength(0);
+  });
+
+  it("should render the multi accordion type multiple", () => {
+    const { getByText, queryByText } = renderAccordion({ type: "multiple", children });
+    const trigger1 = getByText("Option 1");
+    const trigger2 = getByText("Option 2");
+    expect(trigger1).toBeTruthy();
+    fireEvent.click(trigger1);
+    expect(getByText("Content0")).toBeTruthy();
+    expect(queryByText("Content1 long text content")).toBeNull();
+    fireEvent.click(trigger2);
+    expect(getByText("Content1 long text content")).toBeTruthy();
+    expect(getByText("Content0")).toBeTruthy();
+    fireEvent.click(trigger2);
+    expect(queryByText("Content1 long text content")).toBeNull();
+  });
+
+  it("should show check", () => {
+    const { getAllByTestId, getByText } = renderAccordion({
+      type: "single",
+      showCheck: true,
+      children,
+    });
+    expect(getByText("Option 1")).toBeTruthy();
+    expect(getByText("Option 2")).toBeTruthy();
+    expect(getAllByTestId("accordion-status-icon")).toHaveLength(2);
+  });
+
+  it("should trigger markAsCompleted onClicking check", () => {
+    const markAsCompleted = vi.fn();
+    const { getAllByTestId, getByText } = renderAccordion({
+      type: "single",
+      showCheck: true,
+      markAsCompleted,
+      children,
+    });
+    expect(getByText("Option 1")).toBeTruthy();
+    expect(getByText("Option 2")).toBeTruthy();
+    const statusIcons = getAllByTestId("accordion-status-icon");
+    expect(statusIcons).toHaveLength(2);
+    fireEvent.click(statusIcons[0]);
+    expect(markAsCompleted).toHaveBeenCalledOnce();
+  });
+});