USWDS-Next - Alpha: Create `usa-details` web component

[amyleadem]

Summary

Created an alpha version of a usa-details web component

Related issue

Closes #19

Preview link

Details component (Storybook)

Sample implementation

<usa-details name="example-group-name">
  <details open="true">
    <summary>First Amendment</summary>
    <div slot="details-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="details-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="details-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-details>

Reference

Details element (MDN)

Requirements notes (WIP)

Common component names

Details, Accordion, Collapse

Variants

Type	Name	Description
Border	Borderless (default)	No border
	Bordered	Border around panel and button
Group	Multi select (default)	Allow multiple panels in a group to be open at one time
	Single select	Open only one panel in a group at a time

Settings and CSS Variables

Description	Related USWDS setting	New CSS variable
Border width	$theme-accordion-border-width	--theme-details-border-width
Border color	$theme-accordion-border-color	--theme-details-border-color
Button background color	$theme-accordion-button-background-color	--theme-details-summary-background-color
Panel background color	$theme-accordion-background-color	--theme-details-background-color
Component font family	$theme-accordion-font-family	--theme-details-font-family

Possibilities for additional customization:

• Summary/content font weight
• Summary/content padding
• Summary/content text color
• Summary/content font size
• Open/close icons
• Icon placement (left/right)

Accessibility

See related accessibility tests

Attributes & Props

Attribute	Element	Description
open="true"	<details>	If the open attribute is present on the <details> element, the content inside its details-content slot should be visible on load.
name="[group name]"	<details>	If a defined name attribute is present on the <details> element, the <details> elements with the same name value will be treated as a single-select group and toggle each other.

Slots

Slot name	Expected Element	Example code	Count
details-body	<div>	<div slot="details-body">[Accordion panel content]</div>	1

Expected interactions:

• All:
  • You can show and hide content panels with enter, spacebar, mouse click, or voice command
  • You can insert rich text and other components inside the content region
• Single select: When you open a panel in the group, the other panels in the group close
• Multi select: When you open a panel in the group, the other panels stay in their current open/closed state

Test cases

• Be able to change background colors, text colors, border colors, change icons, update icon placement
• Add new style property and customize it

[amyleadem]

Converting to draft while experiment with theming and adding usa-accordion component.