@paprika/progress-accordion

Description

The ProgressAccordion component is a progress bar in a collapsible accordion format.

Installation

yarn add @paprika/progress-accordion

or with npm:

npm install @paprika/progress-accordion

Props

ProgressAccordion

| Prop | Type | required | default | Description | | ------------ | ------ | -------- | ------- | ------------------------------------------------------------------ | | a11yText | string | false | null | A11y text for assistive technologies to descibe the semantic list. | | activeIndex | number | false | 0 | | | activeStatus | node | false | null | Optional status text to be displayed with the active list item. | | children | node | false | null | List items (must be of type <ProgressAccordion.Item>. |

Usage

import ProgressAccordion from "@paprika/progress-accordion";

<ProgressAccordion activeIndex={1} activeStatus="5 days idle" a11yText="Responses">
  <ProgressAccordion.Item label="Zero">
    <ProgressAccordion.Responses>
      <ProgressAccordion.Responses.Item heading="Who is on first?">
        <p>Yes.</p>
      </ProgressAccordion.Responses.Item>
      <ProgressAccordion.Responses.Item heading="What?">
        <p>Is on second.</p>
      </ProgressAccordion.Responses.Item>
    </ProgressAccordion.Responses>
  </ProgressAccordion.Item>
  <ProgressAccordion.Item label="One" />
  <ProgressAccordion.Item label="Two" />
</ProgressAccordion>;

Item

• label
• children

More detail about these props

Responses

• children

More detail about this prop

Responses.Item

• heading
• children

More detail about this prop

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG