Build new components landing page and simplify component docs templates

[thisisdano]

⚠️ HOLD UNTIL AFTER USWDS 2.10.2
Hold is no longer necessary. Changed base to 2.11.0 release branch.

Preview →
Paired with uswds/uswds#4056

Accessibility requirements

• Ensure scope attribute is used correctly on tables. USWDS - a11y: Ensure scope attribute is used correctly on tables. #1110
• Heading order. USWDS - a11y: Heading order. #1108
• Ensure component page landmarks are unique. Ensure component page landmarks are unique. #1109 NOT FIXED HERE

TODO

• Fix templates pages
• Assure template pages have proper redirect
• Add core compoents notes
• Spacing quirk in date input

Fixes #1091 [Adds variant information to data]
Fixes #1110 [Removes scope from td elements]
Fixes #1108 [Heading order]
Fixes #1088 [Banner/identifer core components notes]

---

This PR restructures and re-organizes both individual component pages and the components overview page.

• Splits single components overview page into multiple pages: Components and Packages
• Flattens organization structure, so all components are listed at the top level and there are no categories like Form controls
• Adds a filterable list of all components to the overview page
• Adds a _layouts/component.html template to power all component pages
• Removes custom markup from individual component pages. Pages are now powered by frontmatter YAML and [component]/guidance/... Markdown files

Component front matter

category

category: Components

component

component:
  name: accordion
  status: ready
  package: usa-accordion
  dependencies:

implementation

implementation:
  initProps:
    - property: "`required`"
      element: select
      description: The combo box component will be required in terms of native form validation.
  props:
    - property: "`data-filter`"
      element: .usa-combo-box
      description: The combo box will use this regular expression to filter the combo box options. 
  procedures:
    - procedure: "`disable`"
      parameters: .usa-combo-box
      description: The combo box component will be disabled / read-only.
  variants:
    - variant: "`.usa-accordion--bordered`"
      description: Display a border around accordion content

lead

lead: An accordion is a list of headers that hide or reveal additional content when selected.

permalink

permalink: /components/accordion/

redirect_from

redirect_from:
  - /accordions/
  - /components/accordions/

subnav

subnav:
- text: Preview
  href: '#accordion-preview'
- text: Code
  href: '#accordion-code'
- text: Guidance
  href: '#accordion-guidance'
- text: Package
  href: '#accordion-package'

title

title: Accordion

tags

tags:
  - form
  - forms
  - form controls
  - input
  - dropdown

title

title: Combo box

type

type: component

...

I gave up trying to document it all... :(

[mejiaj]

Code samples seem to be extending beyond bounds of accordion in some components.

You can see this on Prose for example.

[thisisdano]

OK, I think I've fixed all these issues!

[mejiaj]

Long settings tables are breaking out of bounds on IE11.

For example Step indicator

We could wrap the settings tables with the new usa-table-container--scrollable.

Otherwise LGTM