14.2 Create `<Disclosure>` component

[mxmason]

Summary

A disclosure allows users to expand and collapse sections of content. Most notably, we'll use it to show and hide a user's lists.

Wireframe

Acceptance criteria

Conceptually, a disclosure is comprised of two parts: a trigger, which users interact with to control the state of the component, and content, which contains the content that is expanded and collapsed by the trigger.

Trigger requirements

• [x] #36
• [x] Shows two distinct icons to correspond with its expanded and collapsed states
• [x] Has an aria-expanded attribute which is 'true' when the disclosure is expanded and 'false' when the disclosure is collapsed
• [x] Has an aria-controls property whose value is the id of the content element

Content requirements

• [x] When closed, users cannot see its children
• [x] When closed, users cannot use the Tab key to navigate to its focusable children (links, buttons, checkboxes)
• [x] Has an id attribute

Example markup

<div class="Disclosure" id="disclosure-1">
  <button
    class="Disclosure-button"
    id="disclosure-1-button" 
    aria-controls="disclosure-1-content"
    aria-expanded="false"
  >
    <!-- Icon here -->
    <span>
      <!-- Button text here -->
    </span>
  </button>
  <div class="Disclosure-content" id="disclosure-1-content">
    <!-- Content here -->
  </div>
</div>

Notes

• As much as possible, try to focus on just creating this component. The wireframe shows a complete redesign of one of our pages, but that isn't necessary to get this component working.
• What props does this component need to work? Now's a good time to take advantage of React's special children prop – you can use it to render any JSX that gets passed between the opening and closing <Disclosure> tags.