Accordion

The accordion component is composed of four parts: Root, Item, Trigger, and Content. This component expands the Radix Accordion component.

import {
  Accordion,
  ACCORDION_DENSITY,
  ACCORDION_TYPE,
} from "@washingtonpost/wpds-ui-kit";

const Component = () => {
  const myLoader = ({ src }) => {
    return `${src}`;
  };

  return (
    <Accordion.Root type={ACCORDION_TYPE.single} defaultValue="item-1">
      <Accordion.Item value="item-1">
        <Accordion.Trigger
          density={ACCORDION_DENSITY.compact}
          ref={myHeaderRef}
        >
          This is a header
        </Accordion.Trigger>
        <Accordion.Content ref={myContentRef}>
          This the text that can either be expanded or hidden.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2">
        <Accordion.Trigger
          density={ACCORDION_DENSITY.compact}
          ref={myHeaderRef}
        >
          This is another header. This item has an image.
        </Accordion.Trigger>
        <Accordion.Content {...args} ref={myContentRef}>
          <Image
            loader={myLoader}
            src="https://i.pravatar.cc/300/300"
            width="100"
            height="100"
            layout="fixed"
            alt="You can have anything as a child, including an image!"
          />
        </Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
};

Accordion.Root

This is the main wrapper for the accordion component. This is where most of the props get passed. The different types can be found inside the ACCORDION_TYPE enum.

export enum ACCORDION_TYPE {
  single = "single",
  multiple = "multiple",
}

Props:

| Name | Description | Type | Required | | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -------- | | type | Dictates whether you can have multiple accordion items open at the same time or not. This also affects the TS types of some of other props. | enum | true | | disabled | Whether the accordion is disabled or not | bool | false | | defaultValue | Item(s) that should be expanded from the start. Should match the values assigned to each Accordion.Item . | string | string[] | false |

Accordion.Item

Each Accordion.Item should contain an Accordion.Trigger and an Accordion.Content. Each item should also have a value which will function as a key that you can use to set the defaultValue.

Props:

| Name | Description | Type | Required | | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | | value | A unique value for the item. | string | true | | disabled | Whether the accordion is disabled or not | bool | false | | asChild | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. | bool | false |

Accordion.Trigger

Toggles the collapsed state of its associated item. There are different density options that affect the padding inside the ACCORDION_DENSITY enum.

export enum ACCORDION_DENSITY {
  compact = "compact",
  loose = "loose",
  default = "default",
}

Props:

| Name | Description | Type | Required | | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | -------- | | density | Applies a certain amount of padding to the accordion trigger/header | enum | false | | ref | A standard React ref | ref | false | | asChild | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. | bool | false |

Accordion.Content

Contains the collapsible content for an item. The Accordion.Content can hold anything, from text to images to other components.

Props:

| Name | Description | Type | Required | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | -------- | | ref | A standard React reference | ref | false | | asChild | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. | bool | false | | forceMount | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | bool | false |