Skip to content

Commit

Permalink
Testing react docs
Browse files Browse the repository at this point in the history
  • Loading branch information
dgtlntv committed Apr 29, 2024
1 parent 1b3c54a commit 7682d2c
Showing 1 changed file with 40 additions and 1 deletion.
41 changes: 40 additions & 1 deletion vanilla/templates/docs/components/accordion/react/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,43 @@ context:
title: Accordion | React
---

# 🚧 WIP 🚧
The sidebar accordion, used in listing pages or as navigation, can hold multiple navigation items or to be used as a filter for content.

# Props

| name | DESCRIPTION | DEFAULT |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| className | Optional classes applied to the parent element. `string` | |
| expanded | An optional value to set the expanded section. The value must match a section key. This value will only set the expanded section on first render if externallyControlled is not set to true. `string` | |
| externallyControlled | Whether the expanded section will be controlled via external state. `boolean` | |
| onExpandedChange | Optional function that is called when the expanded section is changed. The function is provided the section title or null. `(id: string, title: string) => void` | |
| sections\* | An array of sections and content. `Section[]` | |
| titleElement | Optional string describing heading element that should be used for the section titles. `"h2"` `"h3"` `"h4"` `"h5"` `"h6"` | |

## Default

<iframe
src="https://canonical.github.io/react-components/iframe.html?args=&id=accordion--default-story&viewMode=story"
width="800"
height="260"
></iframe>
## External state

The expanded accordion section can be controlled by external state.

<iframe
src="https://canonical.github.io/react-components/iframe.html?args=&id=accordion--external-state&viewMode=story"
width="800"
height="260"
></iframe>
## Headings

`titleElement` prop can be used to define heading element for section titles.

<iframe
src="https://canonical.github.io/react-components/iframe.html?args=&id=accordion--headings&viewMode=story"
width="800"
height="260"
></iframe>

0 comments on commit 7682d2c

Please sign in to comment.