@paprika/progress-accordion

@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