V2 accordion

jest.config.js

@@ -1,6 +1,6 @@
 /** @type {import("jest").Config} */
 module.exports = {
-  roots: ["./ui"],
+  roots: ["./ui", "./packages"],
   preset: "ts-jest",
   testEnvironment: "./custom-env.ts",
   cacheDirectory: ".jest-cache",

packages/kit/package.json

@@ -32,6 +32,7 @@
     "url": "https://github.com/washingtonpost/wpds-ui-kit/issues"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
     "@stitches/react": "^1.2.8",
     "@washingtonpost/wpds-assets": "^1.18.0"
   },

packages/kit/src/accordion/Accordion.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { AccordionRoot } from "./Accordion";
+
+describe("AccordionRoot", () => {
+  test("renders visibly into the document", () => {
+    render(<AccordionRoot type="single">Test</AccordionRoot>);
+
+    expect(screen.getByText("Test")).toBeVisible();
+  });
+});

packages/kit/src/accordion/Accordion.tsx

@@ -0,0 +1,65 @@
+import { forwardRef } from "react";
+import { theme, styled } from "../theme";
+import type * as WPDS from "../theme";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { AccordionTrigger, AccordionHeader } from "./AccordionTrigger";
+import { AccordionItem } from "./AccordionItem";
+import { AccordionContent } from "./AccordionContent";
+import {
+  AccordionSingleProps as RadixAccordionSingleProps,
+  AccordionMultipleProps as RadixAccordionMultipleProps,
+} from "@radix-ui/react-accordion";
+
+export enum ACCORDION_TYPE {
+  single = "single",
+  multiple = "multiple",
+}
+
+export enum ACCORDION_DENSITY {
+  compact = "compact",
+  loose = "loose",
+  default = "default",
+}
+
+const StyledAccordion = styled(AccordionPrimitive.Root, {
+  width: "100%",
+  variants: {
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        [`${AccordionHeader}`]: {
+          pointerEvents: "none",
+          color: theme.colors.accessible,
+        },
+      },
+    },
+  },
+});
+
+type AccordionRootVariants = WPDS.VariantProps<typeof StyledAccordion>;
+
+export type AccordionRootCombined = (
+  | RadixAccordionSingleProps
+  | RadixAccordionMultipleProps
+) &
+  AccordionRootVariants;
+
+export const AccordionRoot = forwardRef<HTMLDivElement, AccordionRootCombined>(
+  ({ ...props }: AccordionRootCombined, ref) => (
+    <StyledAccordion {...props} ref={ref} />
+  )
+);
+
+AccordionRoot.displayName = "AccordionRoot";
+
+const Root = AccordionRoot;
+const Item = AccordionItem;
+const Content = AccordionContent;
+const Trigger = AccordionTrigger;
+
+export const Accordion = {
+  Root,
+  Item,
+  Content,
+  Trigger,
+};

packages/kit/src/accordion/AccordionContent.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+import { AccordionRoot } from "./Accordion";
+import { AccordionItem } from "./AccordionItem";
+import { AccordionContent } from "./AccordionContent";
+
+const customRender = (ui, contextProps = {}) => {
+  return render(
+    <AccordionRoot type="single" defaultValue="test" {...contextProps}>
+      <AccordionItem value="test">{ui}</AccordionItem>
+    </AccordionRoot>
+  );
+};
+
+describe("AccordionContent", () => {
+  test("renders visibly into the document", () => {
+    customRender(<AccordionContent />);
+
+    expect(screen.getByRole("region")).toBeVisible();
+  });
+
+  test("applies padding to inner content", () => {
+    customRender(
+      <AccordionContent css={{ padding: "1rem" }}>Test</AccordionContent>
+    );
+
+    // eslint-disable-next-line jest-dom/prefer-to-have-class
+    expect(screen.getByText("Test").classList.length).toBe(2);
+  });
+});

packages/kit/src/accordion/AccordionContent.tsx

@@ -0,0 +1,75 @@
+import { forwardRef } from "react";
+import { theme, styled, keyframes } from "../theme";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import type * as WPDS from "../theme";
+import { AccordionContentProps as RadixAccordionContentProps } from "@radix-ui/react-accordion";
+
+const slideDown = keyframes({
+  from: { height: 0 },
+  to: { height: "var(--radix-accordion-content-height)" },
+});
+
+const slideUp = keyframes({
+  from: { height: "var(--radix-accordion-content-height)" },
+  to: { height: 0 },
+});
+
+const easeInOutExpo = `cubic-bezier(0.87, 0, 0.13, 1)`;
+
+const AnimatedContent = styled(AccordionPrimitive.Content, {
+  overflow: "hidden",
+  color: theme.colors.primary,
+  '&[data-state="open"]': {
+    animation: `${slideDown} ${theme.transitions.normal} ${easeInOutExpo}`,
+    "@reducedMotion": {
+      animation: "none",
+    },
+  },
+  '&[data-state="closed"]': {
+    animation: `${slideUp} ${theme.transitions.normal} ${easeInOutExpo}`,
+    "@reducedMotion": {
+      animation: "none",
+    },
+  },
+});
+
+const ContentContainer = styled("div", {
+  paddingBottom: theme.space[150],
+  paddingRight: theme.space[150],
+  fontSize: theme.fontSizes[100],
+});
+
+type AccordionContentVariants = WPDS.VariantProps<typeof AnimatedContent>;
+type CombinedProps = RadixAccordionContentProps & AccordionContentVariants;
+
+export interface AccordionContentInterface extends CombinedProps {
+  css?: WPDS.CSS;
+}
+
+export const AccordionContent = forwardRef<
+  HTMLDivElement,
+  AccordionContentInterface
+>(({ children, ...props }: AccordionContentInterface, ref) => {
+  const {
+    padding = "",
+    paddingTop = "",
+    paddingBottom = "",
+    paddingLeft = "",
+    paddingRight = "",
+    ...restOfCss
+  } = props.css ? props.css : {};
+
+  const otherProps = { ...props, css: { ...restOfCss } };
+
+  return (
+    <AnimatedContent {...otherProps} ref={ref}>
+      <ContentContainer
+        css={{ padding, paddingTop, paddingBottom, paddingLeft, paddingRight }}
+      >
+        {children}
+      </ContentContainer>
+    </AnimatedContent>
+  );
+});
+
+AccordionContent.displayName = "AccordionContent";

packages/kit/src/accordion/AccordionItem.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { AccordionRoot } from "./Accordion";
+import { AccordionItem } from "./AccordionItem";
+
+const customRender = (ui, contextProps = {}) => {
+  return render(
+    <AccordionRoot type="single" defaultValue="test" {...contextProps}>
+      {ui}
+    </AccordionRoot>
+  );
+};
+
+describe("AccordionItem", () => {
+  test("renders visibly into the document", () => {
+    customRender(<AccordionItem value="test" data-testid="test" />);
+
+    expect(screen.getByTestId("test")).toBeVisible();
+  });
+});

packages/kit/src/accordion/AccordionItem.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import { theme, styled } from "../theme";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import type * as WPDS from "../theme";
+import { AccordionItemProps as RadixAccordionItemProps } from "@radix-ui/react-accordion";
+
+const StyledAccordionItem = styled(AccordionPrimitive.Item, {
+  borderBottom: `1px solid ${theme.colors.subtle}`,
+});
+
+type AccordionItemProps = WPDS.VariantProps<typeof StyledAccordionItem> &
+  RadixAccordionItemProps;
+
+export interface AccordionItemInterface extends AccordionItemProps {
+  css?: WPDS.CSS;
+}
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemInterface>(
+  ({ children, ...props }: AccordionItemInterface, ref) => (
+    <StyledAccordionItem {...props} ref={ref}>
+      {children}
+    </StyledAccordionItem>
+  )
+);
+
+AccordionItem.displayName = "AccordionItem";

packages/kit/src/accordion/AccordionTrigger.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import { AccordionRoot } from "./Accordion";
+import { AccordionItem } from "./AccordionItem";
+import { AccordionTrigger } from "./AccordionTrigger";
+
+const customRender = (ui, contextProps = {}) => {
+  return render(
+    <AccordionRoot type="single" defaultValue="test" {...contextProps}>
+      <AccordionItem value="test">{ui}</AccordionItem>
+    </AccordionRoot>
+  );
+};
+
+describe("AccordionContent", () => {
+  test("renders visibly into the document", () => {
+    customRender(<AccordionTrigger>Test</AccordionTrigger>);
+
+    expect(screen.getByRole("button")).toBeVisible();
+  });
+});