Created an alpha version of a usa-accordion web component.
[!Note]
I am developing both a usa-details and a usa-accordion web component. These components will have some overlap in use case, but the key distinction is that this usa-accordion will match the visual styling, interaction, and defaults that currently exist in the usa-accordion component found in USWDS 3.
One notable distinction between the two is that usa-accordion is single-select by default. Any details element added inside a given <usa-accordion> will be grouped by default and will allow only one panel to be open at a time. This can be turned off by adding the multiselect prop to the custom element. I can imagine we might want to
<usa-accordion>
<details open="true">
<summary>First Amendment</summary>
<div slot="accordion-body">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</div>
</details>
<details>
<summary>Second Amendment</summary>
<div slot="accordion-body">A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</div>
</details>
<details>
<summary>Third Amendment</summary>
<div slot="accordion-body">No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.</div>
</details>
</usa-accordion>
Summary
Created an alpha version of a
usa-accordionweb component.Related issue
Related to #19
Preview link
Accordion component (Storybook)
Sample implementation