@mzc-fe/design-system 0.0.1-rc.0

package/src/components/accordion.stories.tsx

@@ -0,0 +1,258 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "./accordion";
+
+const meta = {
+  title: "Components/Accordion",
+  component: Accordion,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["single", "multiple"],
+      description:
+        "The type of accordion. 'single' allows only one item open at a time, 'multiple' allows multiple items open.",
+      table: {
+        type: { summary: '"single" | "multiple"' },
+        defaultValue: { summary: '"single"' },
+      },
+    },
+    collapsible: {
+      control: "boolean",
+      description:
+        "When type is 'single', allows closing the opened item by clicking it again.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    defaultValue: {
+      control: "text",
+      description:
+        "The default value(s) of the accordion item(s) that should be open.",
+      table: {
+        type: { summary: "string | string[]" },
+      },
+    },
+    value: {
+      control: "text",
+      description:
+        "The controlled value(s) of the accordion item(s) that should be open.",
+      table: {
+        type: { summary: "string | string[]" },
+      },
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disables all accordion items.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS classes to apply to the accordion.",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    type: "single",
+    collapsible: true,
+    className: "w-full",
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern and is fully
+          accessible.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that match the other components'
+          aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  args: {
+    type: "multiple",
+    className: "w-full",
+  },
+  argTypes: {
+    type: {
+      table: {
+        disable: true,
+      },
+    },
+    collapsible: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
+        <AccordionContent>
+          Yes! With the "multiple" type, you can have multiple items open at the
+          same time.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>How does it work?</AccordionTrigger>
+        <AccordionContent>
+          Each accordion item can be independently opened or closed, allowing
+          users to view multiple sections simultaneously.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>What are the use cases?</AccordionTrigger>
+        <AccordionContent>
+          This is useful for FAQ sections, settings panels, or any content where
+          users might want to compare information across different sections.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const SingleItem: Story = {
+  args: {
+    type: "single",
+    collapsible: true,
+    className: "w-full",
+  },
+  argTypes: {
+    type: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>What is this component?</AccordionTrigger>
+        <AccordionContent>
+          This is an accordion component built with Radix UI. It provides a
+          collapsible content area that can be toggled open and closed.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const LongContent: Story = {
+  args: {
+    type: "single",
+    collapsible: true,
+    className: "w-full",
+  },
+  argTypes: {
+    type: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Item with long content</AccordionTrigger>
+        <AccordionContent>
+          <div className="space-y-2">
+            <p>
+              This accordion item contains longer content to demonstrate how the
+              component handles text that spans multiple lines or paragraphs.
+            </p>
+            <p>
+              The content area will expand to accommodate the full text, and the
+              animation will smoothly transition between the collapsed and
+              expanded states.
+            </p>
+            <p>
+              This is useful for displaying detailed information, descriptions,
+              or any content that requires more space than a simple one-liner.
+            </p>
+            <ul className="list-disc list-inside space-y-1 ml-4">
+              <li>First bullet point</li>
+              <li>Second bullet point</li>
+              <li>Third bullet point</li>
+            </ul>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Another item</AccordionTrigger>
+        <AccordionContent>
+          This is a shorter content example to show the contrast between items
+          with different content lengths.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const WithCustomStyling: Story = {
+  args: {
+    type: "single",
+    collapsible: true,
+    className: "w-full max-w-2xl",
+  },
+  argTypes: {
+    type: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1" className="border-2 border-primary/20">
+        <AccordionTrigger className="text-lg font-semibold">
+          Custom styled item
+        </AccordionTrigger>
+        <AccordionContent className="text-base">
+          This accordion item has custom styling applied to demonstrate how you
+          can customize the appearance of individual items.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Default styled item</AccordionTrigger>
+        <AccordionContent>
+          This item uses the default styling for comparison.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};

package/src/components/accordion.test.tsx

@@ -0,0 +1,390 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "./accordion";
+
+describe("Accordion", () => {
+  describe("Default (Single type with collapsible)", () => {
+    it("should render accordion with multiple items", () => {
+      const { getByText } = render(
+        <Accordion type="single" collapsible className="w-full">
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It adheres to the WAI-ARIA design pattern and is fully
+              accessible.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-2">
+            <AccordionTrigger>Is it styled?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It comes with default styles that match the other components'
+              aesthetic.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-3">
+            <AccordionTrigger>Is it animated?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It's animated by default, but you can disable it if you
+              prefer.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      expect(getByText("Is it accessible?")).toBeInTheDocument();
+      expect(getByText("Is it styled?")).toBeInTheDocument();
+      expect(getByText("Is it animated?")).toBeInTheDocument();
+    });
+
+    it("should show content when trigger is clicked", async () => {
+      const user = userEvent.setup();
+      const { getByText } = render(
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It adheres to the WAI-ARIA design pattern and is fully
+              accessible.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      const trigger = getByText("Is it accessible?");
+      await user.click(trigger);
+
+      expect(
+        getByText(
+          "Yes. It adheres to the WAI-ARIA design pattern and is fully accessible."
+        )
+      ).toBeInTheDocument();
+    });
+
+    it("should close content when trigger is clicked again (collapsible)", async () => {
+      const user = userEvent.setup();
+      const { getByText, queryByText } = render(
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It adheres to the WAI-ARIA design pattern and is fully
+              accessible.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      const trigger = getByText("Is it accessible?");
+
+      // Open
+      await user.click(trigger);
+      expect(
+        getByText(
+          "Yes. It adheres to the WAI-ARIA design pattern and is fully accessible."
+        )
+      ).toBeInTheDocument();
+
+      // Close
+      await user.click(trigger);
+      expect(
+        queryByText(
+          "Yes. It adheres to the WAI-ARIA design pattern and is fully accessible."
+        )
+      ).not.toBeInTheDocument();
+    });
+
+    it("should only allow one item open at a time in single mode", async () => {
+      const user = userEvent.setup();
+      const { getByText, queryByText } = render(
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Item 1</AccordionTrigger>
+            <AccordionContent>Content 1</AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-2">
+            <AccordionTrigger>Item 2</AccordionTrigger>
+            <AccordionContent>Content 2</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      const trigger1 = getByText("Item 1");
+      const trigger2 = getByText("Item 2");
+
+      // Open first item
+      await user.click(trigger1);
+      expect(getByText("Content 1")).toBeInTheDocument();
+      expect(queryByText("Content 2")).not.toBeInTheDocument();
+
+      // Open second item (should close first)
+      await user.click(trigger2);
+      expect(queryByText("Content 1")).not.toBeInTheDocument();
+      expect(getByText("Content 2")).toBeInTheDocument();
+    });
+  });
+
+  describe("Multiple type", () => {
+    it("should allow multiple items to be open simultaneously", async () => {
+      const user = userEvent.setup();
+      const { getByText } = render(
+        <Accordion type="multiple">
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
+            <AccordionContent>
+              Yes! With the "multiple" type, you can have multiple items open at
+              the same time.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-2">
+            <AccordionTrigger>How does it work?</AccordionTrigger>
+            <AccordionContent>
+              Each accordion item can be independently opened or closed,
+              allowing users to view multiple sections simultaneously.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-3">
+            <AccordionTrigger>What are the use cases?</AccordionTrigger>
+            <AccordionContent>
+              This is useful for FAQ sections, settings panels, or any content
+              where users might want to compare information across different
+              sections.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      const trigger1 = getByText("Can I open multiple items?");
+      const trigger2 = getByText("How does it work?");
+
+      // Open first item
+      await user.click(trigger1);
+      expect(
+        getByText(
+          'Yes! With the "multiple" type, you can have multiple items open at the same time.'
+        )
+      ).toBeInTheDocument();
+
+      // Open second item (first should still be open)
+      await user.click(trigger2);
+      expect(
+        getByText(
+          'Yes! With the "multiple" type, you can have multiple items open at the same time.'
+        )
+      ).toBeInTheDocument();
+      expect(
+        getByText(
+          "Each accordion item can be independently opened or closed, allowing users to view multiple sections simultaneously."
+        )
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("SingleItem", () => {
+    it("should render single accordion item", () => {
+      const { getByText } = render(
+        <Accordion type="single" collapsible className="w-full">
+          <AccordionItem value="item-1">
+            <AccordionTrigger>What is this component?</AccordionTrigger>
+            <AccordionContent>
+              This is an accordion component built with Radix UI. It provides a
+              collapsible content area that can be toggled open and closed.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      expect(getByText("What is this component?")).toBeInTheDocument();
+    });
+  });
+
+  describe("LongContent", () => {
+    it("should render accordion with long content", async () => {
+      const user = userEvent.setup();
+      const { getByText } = render(
+        <Accordion type="single" collapsible className="w-full">
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Item with long content</AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-2">
+                <p>
+                  This accordion item contains longer content to demonstrate how
+                  the component handles text that spans multiple lines or
+                  paragraphs.
+                </p>
+                <p>
+                  The content area will expand to accommodate the full text, and
+                  the animation will smoothly transition between the collapsed
+                  and expanded states.
+                </p>
+                <ul className="list-disc list-inside space-y-1 ml-4">
+                  <li>First bullet point</li>
+                  <li>Second bullet point</li>
+                  <li>Third bullet point</li>
+                </ul>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      const trigger = getByText("Item with long content");
+      await user.click(trigger);
+
+      expect(
+        getByText(
+          "This accordion item contains longer content to demonstrate how the component handles text that spans multiple lines or paragraphs."
+        )
+      ).toBeInTheDocument();
+      expect(getByText("First bullet point")).toBeInTheDocument();
+      expect(getByText("Second bullet point")).toBeInTheDocument();
+      expect(getByText("Third bullet point")).toBeInTheDocument();
+    });
+  });
+
+  describe("WithCustomStyling", () => {
+    it("should apply custom className to accordion", () => {
+      const { container } = render(
+        <Accordion type="single" collapsible className="w-full max-w-2xl">
+          <AccordionItem value="item-1" className="border-2 border-primary/20">
+            <AccordionTrigger className="text-lg font-semibold">
+              Custom styled item
+            </AccordionTrigger>
+            <AccordionContent className="text-base">
+              This accordion item has custom styling applied to demonstrate how
+              you can customize the appearance of individual items.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      const accordion = container.querySelector('[data-slot="accordion"]');
+      expect(accordion).toHaveClass("w-full", "max-w-2xl");
+    });
+
+    it("should apply custom className to accordion item", () => {
+      const { container } = render(
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1" className="border-2 border-primary/20">
+            <AccordionTrigger>Custom styled item</AccordionTrigger>
+            <AccordionContent>Content</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      const item = container.querySelector('[data-slot="accordion-item"]');
+      expect(item).toHaveClass("border-2", "border-primary/20");
+    });
+
+    it("should apply custom className to accordion trigger", () => {
+      const { container } = render(
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1">
+            <AccordionTrigger className="text-lg font-semibold">
+              Custom styled item
+            </AccordionTrigger>
+            <AccordionContent>Content</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      const trigger = container.querySelector(
+        '[data-slot="accordion-trigger"]'
+      );
+      expect(trigger).toHaveClass("text-lg", "font-semibold");
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("should have proper ARIA attributes", () => {
+      const { getByText } = render(
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It adheres to the WAI-ARIA design pattern and is fully
+              accessible.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      const trigger = getByText("Is it accessible?");
+      expect(trigger).toHaveAttribute("aria-expanded");
+    });
+
+    it("should update aria-expanded when opened", async () => {
+      const user = userEvent.setup();
+      const { getByText } = render(
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It adheres to the WAI-ARIA design pattern and is fully
+              accessible.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      const trigger = getByText("Is it accessible?");
+
+      // Initially closed
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+      // Open
+      await user.click(trigger);
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+    });
+  });
+
+  describe("Controlled mode", () => {
+    it("should work in controlled mode with value prop", async () => {
+      const user = userEvent.setup();
+      const onValueChange = vi.fn();
+
+      const { getByText } = render(
+        <Accordion type="single" value="item-1" onValueChange={onValueChange}>
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Item 1</AccordionTrigger>
+            <AccordionContent>Content 1</AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-2">
+            <AccordionTrigger>Item 2</AccordionTrigger>
+            <AccordionContent>Content 2</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      const trigger2 = getByText("Item 2");
+      await user.click(trigger2);
+
+      expect(onValueChange).toHaveBeenCalledWith("item-2");
+    });
+  });
+
+  describe("Default value", () => {
+    it("should open item with defaultValue", () => {
+      const { getByText, queryByText } = render(
+        <Accordion type="single" defaultValue="item-2">
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Item 1</AccordionTrigger>
+            <AccordionContent>Content 1</AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-2">
+            <AccordionTrigger>Item 2</AccordionTrigger>
+            <AccordionContent>Content 2</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+      expect(getByText("Content 2")).toBeInTheDocument();
+      expect(queryByText("Content 1")).not.toBeInTheDocument();
+    });
+  });
+});