USWDS-Next - Alpha: Add usa-accordion web component

[amyleadem]

Summary

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

Related issue

Related to #19

Preview link

Accordion component (Storybook)

Sample implementation

<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>