@commercetools/nimbus 0.0.1

package/src/components/accordion/accordion.mdx

@@ -0,0 +1,172 @@
+---
+id: Components-Accordion
+title: Accordion
+description:
+  A component used for organizing contents. This allows users to toggle
+  visibility of the content sections in their individual panels when the
+  panel's header is clicked.
+documentState: InitialDraft
+order: 999
+menu:
+  - Components
+  - Accordion
+tags:
+  - component
+---
+
+# Accordion
+
+A component used for organizing contents. This allows users to toggle visibility
+of the content sections in their individual panels when the panel's header is
+clicked.
+
+## Basic Usage
+
+```jsx-live
+const App = () => (
+  <Accordion>
+    <Accordion.Header>Test Accordion</Accordion.Header>
+    <Accordion.Content>Test Accordion Content</Accordion.Content>
+  </Accordion>
+)
+```
+
+### Sizes
+
+Accordion come in different sizes, sizing an accordion is done by setting the
+`size` prop.
+
+```jsx-live
+const App = () => {
+
+  const accordionSizes = ["sm", "md"];;
+
+  return (
+   <>
+    {accordionSizes.map((size, index) => (
+        <Accordion key={index} size={size}>
+          <Accordion.Header>{<>{size} size</>}</Accordion.Header>
+          <Accordion.Content>
+            <>{size} size text</>
+          </Accordion.Content>
+        </Accordion>
+      ))}
+    </>
+  )
+}
+```
+
+### With Additional Contents On The Accordion Trigger
+
+The accordion can take in more properties at the trigger button level to allow
+you add more features or actions on the trigger interface. You can add any
+component or additional text of choice; Texts, buttons, toggle botton etc. Do
+this by setting the `additionalTriggerComponent` prop.
+
+```jsx-live
+const App = () => {
+  const items = [
+    { value: "a", title: "First Item", text: "Some value 1..." },
+    { value: "b", title: "Second Item", text: "Some value 2..." },
+    {
+      value: "c",
+      title: "Third Item",
+      text: "Some value 3",
+    },
+  ]
+
+  return (
+    <>
+      {items.map((item, index) => (
+        <Accordion key={index} size={"md"}>
+          <Accordion.Header
+            additionalTriggerComponent={
+              <div style={{ padding: "10px" }}>
+                <Button marginRight="100" tone="primary">
+                  Click me
+                </Button>
+                <Button marginRight="100" tone="neutral">
+                  Click me
+                </Button>
+                <Button marginRight="100" tone="critical">
+                  Click me
+                </Button>
+              </div>
+            }
+          >
+            {item.title}
+          </Accordion.Header>
+          <Accordion.Content>
+            <Flex
+              justifyContent="space-between"
+              alignItems={"center"}
+              borderColor="neutral.4"
+            >
+              <div style={{ marginRight: "100" }}>{item.text}</div>
+            </Flex>
+          </Accordion.Content>
+        </Accordion>
+      ))}
+    </>
+  );
+}
+```
+
+### With A Custom Component In The Accordion Content
+
+To render any component of choice, pass in the custom component as the child of
+the accordion.
+
+```jsx-live
+const App = () => {
+  const items = [
+    { value: "a", title: "First Item", text: "Some value 1..." },
+    { value: "b", title: "Second Item", text: "Some value 2..." },
+    {
+      value: "c",
+      title: "Third Item",
+      text: "Some value 3",
+    },
+  ]
+
+  const AccordionContent = () => {
+  const avatarImg = "https://thispersondoesnotexist.com/ ";
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", padding: "10px" }}>
+      <Avatar src={avatarImg} firstName="Michael" lastName="Douglas" />
+      <Checkbox>Yes?</Checkbox>
+      <Checkbox>No?</Checkbox>
+    </div>
+  );
+};
+
+  return (
+    <>
+      {items.map((item, index) => (
+        <Accordion key={index} size={"md"}>
+          <Accordion.Header
+          >
+            {item.title}
+          </Accordion.Header>
+          <Accordion.Content>
+            <Flex
+              justifyContent="space-between"
+              alignItems={"center"}
+              borderColor="neutral.4"
+            >
+              <div style={{ marginRight: "100" }}>{item.text}</div>
+              <AccordionContent />
+            </Flex>
+          </Accordion.Content>
+        </Accordion>
+      ))}
+    </>
+  );
+}
+
+```
+
+## Props
+
+<PropTable id="Accordion" />

package/src/components/accordion/accordion.recipe.tsx

@@ -0,0 +1,98 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
+/**
+ * Recipe configuration for the Accordion component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+export const accordionSlotRecipe = defineSlotRecipe({
+  slots: [
+    "root",
+    "disclosure",
+    "trigger",
+    "panel",
+    "accordionTitle",
+    "headerContentRight",
+  ],
+  // Unique class name prefix for the component
+  className: "nimbus-accordion",
+
+  base: {
+    root: {
+      width: "100%",
+    },
+    disclosure: {
+      width: "100%",
+    },
+    trigger: {
+      fontSize: "var(--font-size)",
+      focusVisibleRing: "outside",
+      minHeight: "1200",
+      bg: "none",
+      flexGrow: 1,
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      width: "auto",
+      "& svg": {
+        width: "var(--width)",
+        height: "var(--height)",
+        rotate: "0deg",
+        transition: "rotate 200ms",
+      },
+      '&[aria-expanded="true"] svg': {
+        rotate: "90deg",
+      },
+      "&[disabled]": {
+        layerStyle: "disabled",
+      },
+    },
+    panel: {
+      paddingTop: "var(--padding-top)",
+      paddingBottom: "var(--padding-bottom)",
+      paddingLeft: "var(--padding-left)",
+      '&[aria-hidden="true"]': {
+        display: "none",
+      },
+    },
+    accordionTitle: {
+      fontWeight: "700",
+    },
+  },
+
+  variants: {
+    size: {
+      md: {
+        trigger: {
+          "--font-size": "fontSizes.500",
+          "& svg": {
+            "--width": "sizes.600",
+            "--height": "sizes.600",
+          },
+        },
+        panel: {
+          "--padding-top": "spacing.600",
+          "--padding-bottom": "spacing.800",
+          "--padding-left": "spacing.800",
+        },
+      },
+      sm: {
+        trigger: {
+          "--font-size": "fontSizes.400",
+          "& svg": {
+            "--width": "sizes.500",
+            "--height": "sizes.500",
+          },
+        },
+        panel: {
+          "--padding-top": "spacing.400",
+          "--padding-bottom": "spacing.600",
+          "--padding-left": "spacing.700",
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/components/accordion/accordion.slots.tsx

@@ -0,0 +1,39 @@
+import {
+  createSlotRecipeContext,
+  type HTMLChakraProps,
+} from "@chakra-ui/react";
+import type { AccordionRootProps } from "./accordion.types";
+
+const { withProvider, withContext } = createSlotRecipeContext({
+  key: "accordion",
+});
+
+export const AccordionRoot = withProvider<HTMLDivElement, AccordionRootProps>(
+  "div",
+  "root"
+);
+
+export const AccordionDisclosure = withContext<
+  HTMLDivElement,
+  HTMLChakraProps<"div">
+>("div", "disclosure");
+
+export const AccordionTrigger = withContext<
+  HTMLButtonElement,
+  HTMLChakraProps<"button">
+>("button", "trigger");
+
+export const AccordionPanel = withContext<
+  HTMLDivElement,
+  HTMLChakraProps<"div">
+>("div", "panel");
+
+export const AccordionTitle = withContext<
+  HTMLButtonElement,
+  HTMLChakraProps<"div">
+>("div", "accordionTitle");
+
+export const HeaderRightContent = withContext<
+  HTMLDivElement,
+  HTMLChakraProps<"div">
+>("div", "headerContentRight");

package/src/components/accordion/accordion.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Accordion from "./accordion";
+import type { AccordionProps } from "./accordion.types";
+import { Avatar, Button, Checkbox, Flex } from "@/components";
+import { expect, userEvent, waitFor } from "@storybook/test";
+
+const meta: Meta<typeof Accordion.Root> = {
+  title: "components/Accordion",
+  component: Accordion.Root,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion.Root>;
+
+const items = [
+  { value: "a", title: "First Item", text: "Some value 1..." },
+  { value: "b", title: "Second Item", text: "Some value 2..." },
+  { value: "c", title: "Third Item", text: "Some value 3..." },
+];
+
+const sizes: AccordionProps["size"][] = ["sm", "md"];
+
+export const Basic: Story = {
+  render: () => (
+    <Accordion.Root>
+      <Accordion.Item>
+        <Accordion.Header>First Item</Accordion.Header>
+        <Accordion.Content>First item content</Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const accordion = canvasElement.querySelector(
+      '[data-slot="root"]'
+    ) as HTMLElement;
+
+    const trigger = accordion.querySelector(
+      '[data-slot="trigger"]'
+    ) as HTMLButtonElement;
+
+    const panel = accordion.querySelector(
+      '[data-slot="panel"]'
+    ) as HTMLDivElement;
+
+    await step("Can be focused with keyboard", async () => {
+      await userEvent.tab();
+      await waitFor(() => expect(trigger).toHaveFocus());
+    });
+
+    await step("Panel is initially hidden", async () => {
+      await expect(panel).not.toBeVisible();
+    });
+
+    await step("Can be triggered with Enter key", async () => {
+      await userEvent.keyboard("{Enter}");
+      await expect(panel).toBeVisible();
+    });
+
+    await step("Can be triggered with Space key", async () => {
+      await userEvent.keyboard(" ");
+      await expect(panel).not.toBeVisible();
+    });
+  },
+};
+
+export const WithHeaderItemsToRight: Story = {
+  render: () => (
+    <Accordion.Root>
+      <Accordion.Item value="a">
+        <Accordion.Header>First Item</Accordion.Header>
+        <Accordion.Content>First item content</Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="b">
+        <Accordion.Header>
+          Second Item
+          <Accordion.HeaderRightContent>
+            <Button tone="critical" m="100">
+              First action
+            </Button>
+            <Button tone="neutral" m="100">
+              Second Action
+            </Button>
+          </Accordion.HeaderRightContent>
+        </Accordion.Header>
+        <Accordion.Content>Second item content</Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const accordion = canvasElement.querySelector(
+      '[data-slot="root"]'
+    ) as HTMLElement;
+    const additionalButtons = accordion.querySelectorAll("button");
+    const trigger = accordion.querySelector(
+      '[data-slot="trigger"]'
+    ) as HTMLButtonElement;
+
+    await step("Additional buttons don't trigger accordion", async () => {
+      const panel = accordion.querySelector(
+        '[data-slot="panel"]'
+      ) as HTMLDivElement;
+      await expect(panel).not.toBeVisible();
+
+      // Click additional buttons
+      for (const button of Array.from(additionalButtons)) {
+        if (button !== trigger) {
+          await userEvent.click(button);
+          await expect(panel).not.toBeVisible();
+        }
+      }
+    });
+
+    await step("Main trigger still works", async () => {
+      const panel = accordion.querySelector(
+        '[data-slot="panel"]'
+      ) as HTMLDivElement;
+      await userEvent.click(trigger);
+      await expect(panel).toBeVisible();
+    });
+
+    await step("Main trigger still works", async () => {
+      await userEvent.click(trigger);
+    });
+  },
+};
+
+const AccordionContent = () => {
+  const avatarImg = "https://thispersondoesnotexist.com/ ";
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", padding: "10px" }}>
+      <Avatar src={avatarImg} firstName="Michael" lastName="Douglas" />
+      <Checkbox marginLeft="100">Yes?</Checkbox>
+      <Checkbox marginLeft="100">No?</Checkbox>
+    </div>
+  );
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <>
+      {sizes.map((size, index) => (
+        <Accordion.Root key={index} size={size}>
+          <Accordion.Item value={size}>
+            <Accordion.Header>{size} size</Accordion.Header>
+            <Accordion.Content>
+              <Flex
+                justifyContent="space-between"
+                alignItems={"center"}
+                borderColor="neutral.4"
+              >
+                <div style={{ marginRight: "100" }}>{size} size</div>
+                <AccordionContent />
+              </Flex>
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion.Root>
+      ))}
+    </>
+  ),
+};
+
+export const AllowMultiple: Story = {
+  render: () => (
+    <Accordion.Root allowsMultipleExpanded>
+      {items.map((item, index) => (
+        <Accordion.Item key={index} value={item.value}>
+          <Accordion.Header>{item.title}</Accordion.Header>
+          <Accordion.Content>{item.text}</Accordion.Content>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Accordion.Root isDisabled>
+      {items.map((item, index) => (
+        <Accordion.Item key={index} value={item.value}>
+          <Accordion.Header>{item.title}</Accordion.Header>
+          <Accordion.Content>{item.text}</Accordion.Content>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  ),
+};

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,16 @@
+import { HeaderRightContent } from "./accordion.slots";
+import { AccordionGroup } from "./components/accordion-group";
+import { AccordionHeader } from "./components/accordion-header";
+import { AccordionContent } from "./components/accordion-content";
+import { AccordionItem } from "./components/accordion-item";
+
+// Create the Accordion namespace object as an object literal
+const Accordion = {
+  Root: AccordionGroup,
+  Item: AccordionItem,
+  Header: AccordionHeader,
+  Content: AccordionContent,
+  HeaderRightContent,
+};
+
+export default Accordion;

package/src/components/accordion/accordion.types.tsx

@@ -0,0 +1,54 @@
+import type { RecipeVariantProps, HTMLChakraProps } from "@chakra-ui/react";
+import { accordionSlotRecipe } from "./accordion.recipe";
+import { type DisclosureProps } from "react-aria-components";
+import type { ReactNode, RefObject, RefAttributes } from "react";
+import { useButton, useDisclosure } from "react-aria";
+import type { useDisclosureState } from "react-stately";
+
+export type AccordionRootProps = HTMLChakraProps<
+  "div",
+  RecipeVariantProps<typeof accordionSlotRecipe>
+>;
+
+export type AccordionComposition = {
+  state: ReturnType<typeof useDisclosureState>;
+  buttonProps: ReturnType<typeof useButton>["buttonProps"];
+  panelProps: ReturnType<typeof useDisclosure>["panelProps"];
+  triggerRef: RefObject<HTMLButtonElement>;
+  panelRef: RefObject<HTMLDivElement>;
+  isFocusVisible: boolean;
+};
+export interface AccordionProps
+  extends Omit<DisclosureProps, "children" | "id"> {
+  additionalTriggerComponent?: ReactNode;
+  children: ReactNode;
+  recipe?: string;
+  size?: "sm" | "md";
+}
+
+export type AccordionItemProps = {
+  isDisabled?: boolean;
+  isExpanded?: boolean;
+  onExpandedChange?: (isExpanded: boolean) => void;
+  id?: string;
+  children: ReactNode;
+  title?: string;
+};
+
+export type DisclosureGroupProps = AccordionProps & {
+  children: ReactNode;
+  ref?: RefAttributes<HTMLButtonElement>;
+  allowsMultipleExpanded?: boolean;
+  onExpandedChange?: (isExpanded: boolean) => void;
+  isDisabled?: boolean;
+  isExpanded?: boolean;
+};
+
+export type DisclosureItemProps = AccordionItemProps & {
+  children: ReactNode;
+  id?: string;
+  value?: string;
+  isDisabled?: boolean;
+  isExpanded?: boolean;
+  onExpandedChange?: (isExpanded: boolean) => void;
+};

package/src/components/accordion/components/accordion-content.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef, useContext } from "react";
+import { AccordionPanel } from "../accordion.slots";
+import { useObjectRef } from "react-aria";
+import { mergeProps, mergeRefs } from "@chakra-ui/react";
+import type { DisclosureGroupProps } from "../accordion.types";
+import { ItemContext } from "../accordion-context";
+
+// Create Content component
+export const AccordionContent = forwardRef<
+  HTMLDivElement,
+  DisclosureGroupProps
+>((props, forwardedRef) => {
+  const context = useContext(ItemContext);
+  const ref = useObjectRef<HTMLDivElement>(
+    mergeRefs(context?.panelRef, forwardedRef)
+  );
+
+  return (
+    // @ts-expect-error TODO - fix prop types merging conflict
+    <AccordionPanel
+      ref={ref}
+      {...mergeProps({ ...context?.panelProps, ...props })}
+      data-slot="panel"
+    >
+      {props.children}
+    </AccordionPanel>
+  );
+});

package/src/components/accordion/components/accordion-group.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef, type Key } from "react";
+import { AccordionRoot as AccordionRootSlot } from "../accordion.slots";
+import { useDisclosureGroupState } from "react-stately";
+import { useSlotRecipe } from "@chakra-ui/react";
+import type { DisclosureGroupProps } from "../accordion.types";
+import { DisclosureGroupStateContext } from "../accordion-context";
+
+export const AccordionGroup = forwardRef<HTMLDivElement, DisclosureGroupProps>(
+  ({ children, onExpandedChange, ...props }, forwardedRef) => {
+    const state = useDisclosureGroupState({
+      ...props,
+      onExpandedChange: (keys: Set<Key>) => {
+        onExpandedChange?.(keys.size > 0);
+      },
+    });
+    const recipe = useSlotRecipe({ key: "accordion" });
+    const [recipeProps] = recipe.splitVariantProps(props);
+
+    return (
+      <DisclosureGroupStateContext.Provider value={state}>
+        <AccordionRootSlot data-slot="root" ref={forwardedRef} {...recipeProps}>
+          {children}
+        </AccordionRootSlot>
+      </DisclosureGroupStateContext.Provider>
+    );
+  }
+);

package/src/components/accordion/components/accordion-header.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef, useContext } from "react";
+import {
+  AccordionTrigger,
+  AccordionTitle,
+  HeaderRightContent,
+} from "../accordion.slots";
+import { mergeRefs } from "@chakra-ui/react";
+import { Flex } from "@/components";
+import { KeyboardArrowRight } from "@commercetools/nimbus-icons";
+import type { DisclosureGroupProps } from "../accordion.types";
+import { ItemContext } from "../accordion-context";
+
+export const AccordionHeader = forwardRef<
+  HTMLButtonElement,
+  DisclosureGroupProps
+>(({ children }, ref) => {
+  const context = useContext(ItemContext);
+  if (!context) {
+    throw new Error("Accordion.Header must be used within Accordion.Item");
+  }
+
+  // Extract HeaderRightContent if present
+  const headerContent = React.Children.toArray(children).reduce<{
+    main: React.ReactNode[];
+    rightContent: React.ReactNode[];
+  }>(
+    (acc, child) => {
+      if (React.isValidElement(child) && child.type === HeaderRightContent) {
+        acc.rightContent.push(child);
+      } else {
+        acc.main.push(child);
+      }
+      return acc;
+    },
+    { main: [], rightContent: [] }
+  );
+
+  return (
+    <Flex
+      justifyContent="space-between"
+      alignItems="center"
+      borderBottom="solid-25"
+      borderColor="neutral.4"
+    >
+      <AccordionTrigger
+        ref={mergeRefs(context.triggerRef, ref)}
+        {...context.buttonProps}
+        data-slot="trigger"
+        outline={context.isFocusVisible ? undefined : "none"}
+      >
+        <KeyboardArrowRight />
+        <AccordionTitle data-slot="accordionTitle">
+          {headerContent.main}
+        </AccordionTitle>
+      </AccordionTrigger>
+      {headerContent.rightContent.length > 0 && (
+        <HeaderRightContent data-slot="headerContentRight">
+          {headerContent.rightContent}
+        </HeaderRightContent>
+      )}
+    </Flex>
+  );
+});