@sproutsocial/seeds-react-accordion 0.4.32 → 0.4.46

package/src/__tests__/accordion.test.tsx

@@ -1,536 +0,0 @@
-import React from "react";
-import {
-  render,
-  screen,
-  fireEvent,
-} from "@sproutsocial/seeds-react-testing-library";
-import { Accordion } from "../Accordion";
-import { AccordionItem } from "../AccordionItem";
-import { AccordionTrigger } from "../AccordionTrigger";
-import { AccordionContent } from "../AccordionContent";
-
-describe("Accordion", () => {
-  it("renders accordion with title", () => {
-    render(
-      <Accordion defaultValue={["item-1"]}>
-        <AccordionItem value="item-1">
-          <AccordionTrigger title="Test Title" />
-          <AccordionContent>Content</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-
-    expect(screen.getByText("Test Title")).toBeInTheDocument();
-  });
-
-  describe("relatedActions", () => {
-    it("renders action buttons with proper aria-labels", () => {
-      render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger
-              title="Test"
-              relatedActions={[
-                {
-                  iconName: "alarm-clock",
-                  onClick: jest.fn(),
-                  "aria-label": "Set alarm",
-                },
-                {
-                  iconName: "ellipsis-horizontal-outline",
-                  onClick: jest.fn(),
-                  "aria-label": "More options",
-                },
-              ]}
-            />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      expect(screen.getByLabelText("Set alarm")).toBeInTheDocument();
-      expect(screen.getByLabelText("More options")).toBeInTheDocument();
-    });
-
-    it("limits related actions to maximum of 2", () => {
-      render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger
-              title="Test"
-              relatedActions={[
-                {
-                  iconName: "alarm-clock",
-                  onClick: jest.fn(),
-                  "aria-label": "Action 1",
-                },
-                {
-                  iconName: "ellipsis-horizontal-outline",
-                  onClick: jest.fn(),
-                  "aria-label": "Action 2",
-                },
-                {
-                  iconName: "alarm-clock",
-                  onClick: jest.fn(),
-                  "aria-label": "Action 3",
-                },
-                {
-                  iconName: "ellipsis-horizontal-outline",
-                  onClick: jest.fn(),
-                  "aria-label": "Action 4",
-                },
-              ]}
-            />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      expect(screen.getByLabelText("Action 1")).toBeInTheDocument();
-      expect(screen.getByLabelText("Action 2")).toBeInTheDocument();
-      expect(screen.queryByLabelText("Action 3")).not.toBeInTheDocument();
-      expect(screen.queryByLabelText("Action 4")).not.toBeInTheDocument();
-    });
-
-    it("renders icons with aria-hidden for accessibility", () => {
-      render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger
-              title="Test"
-              relatedActions={[
-                {
-                  iconName: "alarm-clock",
-                  onClick: jest.fn(),
-                  "aria-label": "Set alarm",
-                },
-              ]}
-            />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const button = screen.getByLabelText("Set alarm");
-      const icon = button.querySelector('[aria-hidden="true"]');
-      expect(icon).toBeInTheDocument();
-    });
-
-    it("calls onClick handler when action button is clicked", () => {
-      const mockOnClick = jest.fn();
-      render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger
-              title="Test"
-              relatedActions={[
-                {
-                  iconName: "alarm-clock",
-                  onClick: mockOnClick,
-                  "aria-label": "Set alarm",
-                },
-              ]}
-            />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const actionButton = screen.getByLabelText("Set alarm");
-      fireEvent.click(actionButton);
-
-      expect(mockOnClick).toHaveBeenCalledTimes(1);
-    });
-
-    it("does not toggle accordion when clicking action button", () => {
-      const mockOnClick = jest.fn();
-      render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger
-              title="Test"
-              relatedActions={[
-                {
-                  iconName: "alarm-clock",
-                  onClick: mockOnClick,
-                  "aria-label": "Set alarm",
-                },
-              ]}
-            />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      // Verify accordion is open initially
-      expect(screen.getByText("Content")).toBeInTheDocument();
-
-      // Click the action button
-      const actionButton = screen.getByLabelText("Set alarm");
-      fireEvent.click(actionButton);
-
-      // Accordion should still be open
-      expect(screen.getByText("Content")).toBeInTheDocument();
-      expect(mockOnClick).toHaveBeenCalled();
-    });
-
-    it("handles multiple onClick handlers correctly", () => {
-      const mockOnClick1 = jest.fn();
-      const mockOnClick2 = jest.fn();
-      render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger
-              title="Test"
-              relatedActions={[
-                {
-                  iconName: "alarm-clock",
-                  onClick: mockOnClick1,
-                  "aria-label": "Action 1",
-                },
-                {
-                  iconName: "ellipsis-horizontal-outline",
-                  onClick: mockOnClick2,
-                  "aria-label": "Action 2",
-                },
-              ]}
-            />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      fireEvent.click(screen.getByLabelText("Action 1"));
-      expect(mockOnClick1).toHaveBeenCalledTimes(1);
-      expect(mockOnClick2).not.toHaveBeenCalled();
-
-      fireEvent.click(screen.getByLabelText("Action 2"));
-      expect(mockOnClick1).toHaveBeenCalledTimes(1);
-      expect(mockOnClick2).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("trigger icon", () => {
-    it("renders default chevron-down icon", () => {
-      const { container } = render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger title="Test Title" />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const icon = container.querySelector(".triggerIcon");
-      expect(icon).toBeInTheDocument();
-    });
-
-    it("renders custom trigger icon", () => {
-      const CustomIcon = () => <div data-testid="custom-icon">Custom Icon</div>;
-
-      render(
-        <Accordion defaultValue={["item-1"]} triggerIcon={<CustomIcon />}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger title="Test Title" />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      expect(screen.getByTestId("custom-icon")).toBeInTheDocument();
-    });
-
-    it("positions trigger icon on the right by default", () => {
-      const { container } = render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger title="Test Title" />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const icon = container.querySelector(".triggerIcon");
-      expect(icon).toBeInTheDocument();
-      // Icon should be rendered after title (right position)
-      const trigger = screen.getByText("Test Title").closest("button");
-      const iconParent = icon?.parentElement ?? null;
-      expect(trigger).toContainElement(iconParent);
-    });
-
-    it("positions trigger icon on the left when triggerPosition is 'left'", () => {
-      const { container } = render(
-        <Accordion defaultValue={["item-1"]} triggerPosition="left">
-          <AccordionItem value="item-1">
-            <AccordionTrigger title="Test Title" />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const icon = container.querySelector(".triggerIcon");
-      expect(icon).toBeInTheDocument();
-      const trigger = screen.getByText("Test Title").closest("button");
-      const iconParent = icon?.parentElement ?? null;
-      expect(trigger).toContainElement(iconParent);
-    });
-
-    it("positions trigger icon on the right when triggerPosition is 'right'", () => {
-      const { container } = render(
-        <Accordion defaultValue={["item-1"]} triggerPosition="right">
-          <AccordionItem value="item-1">
-            <AccordionTrigger title="Test Title" />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const icon = container.querySelector(".triggerIcon");
-      expect(icon).toBeInTheDocument();
-    });
-  });
-
-  describe("slots", () => {
-    it("renders leftSlot content", () => {
-      render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger
-              title="Test Title"
-              leftSlot={<div data-testid="left-content">Left Content</div>}
-            />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      expect(screen.getByTestId("left-content")).toBeInTheDocument();
-      expect(screen.getByText("Left Content")).toBeInTheDocument();
-    });
-
-    it("renders rightSlot content", () => {
-      render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger
-              title="Test Title"
-              rightSlot={<div data-testid="right-content">Right Content</div>}
-            />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      expect(screen.getByTestId("right-content")).toBeInTheDocument();
-      expect(screen.getByText("Right Content")).toBeInTheDocument();
-    });
-
-    it("renders both leftSlot and rightSlot together", () => {
-      render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger
-              title="Test Title"
-              leftSlot={<div data-testid="left-content">Left Content</div>}
-              rightSlot={<div data-testid="right-content">Right Content</div>}
-            />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      expect(screen.getByTestId("left-content")).toBeInTheDocument();
-      expect(screen.getByTestId("right-content")).toBeInTheDocument();
-      expect(screen.getByText("Test Title")).toBeInTheDocument();
-    });
-
-    it("renders slots with complex components", () => {
-      const LeftComponent = () => (
-        <div data-testid="left-complex">
-          <span>Icon</span>
-          <span>Badge</span>
-        </div>
-      );
-      const RightComponent = () => (
-        <div data-testid="right-complex">
-          <button>Action</button>
-        </div>
-      );
-
-      render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger
-              title="Test Title"
-              leftSlot={<LeftComponent />}
-              rightSlot={<RightComponent />}
-            />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      expect(screen.getByTestId("left-complex")).toBeInTheDocument();
-      expect(screen.getByTestId("right-complex")).toBeInTheDocument();
-      expect(screen.getByText("Icon")).toBeInTheDocument();
-      expect(screen.getByText("Badge")).toBeInTheDocument();
-      expect(screen.getByText("Action")).toBeInTheDocument();
-    });
-
-    it("positions leftSlot before title and rightSlot after title when triggerPosition is right", () => {
-      render(
-        <Accordion defaultValue={["item-1"]} triggerPosition="right">
-          <AccordionItem value="item-1">
-            <AccordionTrigger
-              title="Test Title"
-              leftSlot={<span data-testid="left">Left</span>}
-              rightSlot={<span data-testid="right">Right</span>}
-            />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const trigger = screen.getByText("Test Title").closest("button");
-      expect(trigger).toBeInTheDocument();
-      expect(screen.getByTestId("left")).toBeInTheDocument();
-      expect(screen.getByTestId("right")).toBeInTheDocument();
-    });
-
-    it("renders slots correctly when triggerPosition is left", () => {
-      render(
-        <Accordion defaultValue={["item-1"]} triggerPosition="left">
-          <AccordionItem value="item-1">
-            <AccordionTrigger
-              title="Test Title"
-              leftSlot={<span data-testid="left">Left</span>}
-              rightSlot={<span data-testid="right">Right</span>}
-            />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      expect(screen.getByTestId("left")).toBeInTheDocument();
-      expect(screen.getByTestId("right")).toBeInTheDocument();
-      expect(screen.getByText("Test Title")).toBeInTheDocument();
-    });
-  });
-
-  describe("fontSize customization", () => {
-    it("applies fontSize prop to AccordionTrigger", () => {
-      render(
-        <Accordion defaultValue={["item-1"]} styled={false}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger title="Custom Font Size" fontSize={400} />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const title = screen.getByText("Custom Font Size");
-      expect(title).toBeInTheDocument();
-      // Verify component renders without errors when fontSize prop is provided
-    });
-
-    it("applies typeScale prop to AccordionContent", () => {
-      render(
-        <Accordion defaultValue={["item-1"]} styled={false}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger title="Test" />
-            <AccordionContent typeScale={300}>Custom Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const content = screen.getByText("Custom Content");
-      expect(content).toBeInTheDocument();
-      // Verify component renders without errors when typeScale prop is provided
-    });
-  });
-
-  describe("headingLevel", () => {
-    it("renders h4 heading by default", () => {
-      const { container } = render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger title="Test Title" />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const heading = container.querySelector("h4");
-      expect(heading).toBeInTheDocument();
-      expect(heading).toHaveTextContent("Test Title");
-    });
-
-    it("renders h2 heading when headingLevel is h2", () => {
-      const { container } = render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger title="Test Title" headingLevel="h2" />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const heading = container.querySelector("h2");
-      expect(heading).toBeInTheDocument();
-      expect(heading).toHaveTextContent("Test Title");
-    });
-
-    it("renders h3 heading when headingLevel is h3", () => {
-      const { container } = render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger title="Test Title" headingLevel="h3" />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const heading = container.querySelector("h3");
-      expect(heading).toBeInTheDocument();
-      expect(heading).toHaveTextContent("Test Title");
-    });
-
-    it("renders h1 heading when headingLevel is h1", () => {
-      const { container } = render(
-        <Accordion defaultValue={["item-1"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger title="Test Title" headingLevel="h1" />
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const heading = container.querySelector("h1");
-      expect(heading).toBeInTheDocument();
-      expect(heading).toHaveTextContent("Test Title");
-    });
-
-    it("renders correct heading level for multiple accordion items", () => {
-      const { container } = render(
-        <Accordion defaultValue={["item-1", "item-2"]}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger title="First Item" headingLevel="h2" />
-            <AccordionContent>Content 1</AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="item-2">
-            <AccordionTrigger title="Second Item" headingLevel="h3" />
-            <AccordionContent>Content 2</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const h2Heading = container.querySelector("h2");
-      const h3Heading = container.querySelector("h3");
-
-      expect(h2Heading).toBeInTheDocument();
-      expect(h2Heading).toHaveTextContent("First Item");
-      expect(h3Heading).toBeInTheDocument();
-      expect(h3Heading).toHaveTextContent("Second Item");
-    });
-  });
-});

package/src/index.ts

@@ -1,7 +0,0 @@
-import { Accordion } from "./Accordion";
-import { AccordionItem } from "./AccordionItem";
-import { AccordionContent } from "./AccordionContent";
-import { AccordionTrigger } from "./AccordionTrigger";
-
-export { Accordion, AccordionItem, AccordionContent, AccordionTrigger };
-export * from "./AccordionTypes";

package/src/styled.d.ts

@@ -1,7 +0,0 @@
-import "styled-components";
-import { TypeTheme } from "@sproutsocial/seeds-react-theme";
-
-declare module "styled-components" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface DefaultTheme extends TypeTheme {}
-}