@sproutsocial/seeds-react-accordion 0.1.0

package/src/AccordionTrigger.tsx

@@ -0,0 +1,188 @@
+import { StyledRadixAccordionTrigger, TitleStyles } from "./styles";
+import {
+  type TypeAccordionSystemProps,
+  type TypeRelatedAction,
+  type TypeOverflowMenuConfig,
+} from "./AccordionTypes";
+import { FlexCenter, StyledAccordionArea, TriggerContainer } from "./styles";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import {
+  ActionMenu,
+  MenuContent,
+  MenuItem,
+  MenuGroup,
+  MenuToggleButton,
+} from "@sproutsocial/seeds-react-menu";
+import { useContext } from "react";
+import { AccordionContext } from "./Accordion";
+
+const MAX_RELATED_ACTIONS = 2;
+
+interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {
+  title: string;
+  leftSlot?: React.ReactNode;
+  relatedActions?: TypeRelatedAction[];
+  overflowMenu?: TypeOverflowMenuConfig;
+  rightSlot?: React.ReactNode;
+}
+
+export const AccordionTrigger = ({
+  children,
+  leftSlot,
+  relatedActions,
+  overflowMenu,
+  rightSlot,
+  title,
+  ...rest
+}: TypeAccordionTriggerProps) => {
+  const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);
+
+  // Validate and limit related actions
+  const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);
+
+  // Extract system props to distribute to appropriate container
+  const {
+    color,
+    padding,
+    paddingBottom,
+    paddingTop,
+    paddingX,
+    paddingY,
+    paddingLeft,
+    paddingRight,
+    p,
+    pb,
+    pt,
+    pr,
+    pl,
+    px,
+    py,
+    fontFamily,
+    fontStyle,
+    fontWeight,
+    lineHeight,
+    textAlign,
+    ...triggerProps
+  } = rest;
+
+  const spacingProps = {
+    padding,
+    paddingBottom,
+    paddingTop,
+    paddingX,
+    paddingY,
+    paddingLeft,
+    paddingRight,
+    p,
+    pb,
+    pt,
+    pr,
+    pl,
+    px,
+    py,
+  };
+
+  // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.
+
+  const typographyProps = Object.fromEntries(
+    Object.entries({
+      color,
+      fontFamily,
+      fontStyle,
+      fontWeight,
+      lineHeight,
+      textAlign,
+    }).filter(([_, value]) => value != null)
+  );
+
+  // Render overflow menu from config
+  const renderedOverflowMenu = overflowMenu && (
+    <ActionMenu
+      menuToggleElement={
+        <MenuToggleButton
+          aria-label={overflowMenu["aria-label"]}
+          appearance="unstyled"
+        >
+          <Icon name="ellipsis-horizontal-outline" aria-hidden="true" />
+        </MenuToggleButton>
+      }
+    >
+      <MenuContent>
+        <MenuGroup id="overflow-actions">
+          {overflowMenu.items.map((item, index) => {
+            const { iconName, id, onClick, children, ...menuItemProps } = item;
+            return (
+              <MenuItem
+                key={id || `overflow-item-${index}`}
+                id={id || `overflow-item-${index}`}
+                onClick={onClick}
+                {...menuItemProps}
+              >
+                {iconName ? (
+                  <Box display="flex" alignItems="center" gap="300">
+                    <Icon name={iconName} />
+                    {children}
+                  </Box>
+                ) : (
+                  children
+                )}
+              </MenuItem>
+            );
+          })}
+        </MenuGroup>
+      </MenuContent>
+    </ActionMenu>
+  );
+
+  // Render related actions from config
+  const renderedRelatedActions = validatedActions &&
+    validatedActions.length > 0 && (
+      <Box display="flex">
+        {validatedActions.map((action, index) => (
+          <Button
+            key={`${action.iconName}-${index}`}
+            onClick={action.onClick}
+            aria-label={action["aria-label"]}
+          >
+            <Icon name={action.iconName} aria-hidden="true" />
+          </Button>
+        ))}
+      </Box>
+    );
+
+  return (
+    <TriggerContainer data-styled={styled} {...triggerProps}>
+      <StyledRadixAccordionTrigger data-styled={styled} {...spacingProps}>
+        {triggerPosition === "right" ? (
+          <StyledAccordionArea>
+            <FlexCenter>
+              {leftSlot}
+              <TitleStyles data-styled={styled} {...typographyProps}>
+                {title}
+              </TitleStyles>
+              {rightSlot}
+            </FlexCenter>
+            {triggerIcon}
+          </StyledAccordionArea>
+        ) : (
+          <StyledAccordionArea>
+            <FlexCenter>
+              <Box mr={300}>{triggerIcon}</Box>
+              {leftSlot}
+              <TitleStyles data-styled={styled} {...typographyProps}>
+                {title}
+              </TitleStyles>
+            </FlexCenter>
+            {rightSlot}
+          </StyledAccordionArea>
+        )}
+      </StyledRadixAccordionTrigger>
+      <Box mr={300} display="flex">
+        {renderedOverflowMenu}
+        {renderedRelatedActions}
+      </Box>
+    </TriggerContainer>
+  );
+};

package/src/AccordionTypes.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+import {
+  type TypeSystemCommonProps,
+  type TypeBorderSystemProps,
+  type TypeFlexboxSystemProps,
+  type TypeLayoutSystemProps,
+  type TypeStyledComponentsCommonProps,
+  type TypeTypographySystemProps,
+} from "@sproutsocial/seeds-react-system-props";
+import { type TypeIconName } from "@sproutsocial/seeds-react-icon";
+import { type TypeMenuItemProps } from "@sproutsocial/seeds-react-menu";
+
+export interface TypeAccordionSystemProps
+  extends Omit<React.ComponentPropsWithoutRef<"div">, "color">,
+    TypeStyledComponentsCommonProps,
+    TypeSystemCommonProps,
+    TypeBorderSystemProps,
+    TypeFlexboxSystemProps,
+    TypeLayoutSystemProps,
+    TypeTypographySystemProps {}
+
+export interface TypeAccordionProps {
+  children?: React.ReactNode;
+  collapsible?: boolean;
+  defaultValue: string | [string];
+  triggerIcon?: React.ReactNode;
+  triggerPosition?: "left" | "right";
+  type?: "single" | "multiple";
+  styled?: boolean;
+}
+
+export interface TypeRelatedAction {
+  iconName: TypeIconName;
+  onClick: () => void;
+  "aria-label": string;
+}
+
+export interface TypeOverflowMenuItem extends TypeMenuItemProps {
+  iconName?: TypeIconName;
+}
+
+export interface TypeOverflowMenuConfig {
+  /** Menu items to be rendered in the overflow menu */
+  items: TypeOverflowMenuItem[];
+  /** Aria label for the overflow menu trigger button. Defaults to "More actions" */
+  "aria-label"?: string;
+}
+
+export interface TypeAccordionItemProps {
+  children: React.ReactNode;
+  relatedActions?: TypeRelatedAction[];
+  overflowMenu?: TypeOverflowMenuConfig;
+  value: string;
+}

package/src/__tests__/accordion.test.tsx

@@ -0,0 +1,419 @@
+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 3", () => {
+      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.getByLabelText("Action 3")).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();
+    });
+  });
+});

package/src/index.ts

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

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+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 {}
+}