Web components: Alert alpha component

[caseywatts]

Summary

Experimental version of the alert component.

Related issue

Closes #94

Preview link

Screenshot:

Problem statement

If the USWDS team isn't available to review this PR right away, I totally understand -- but I did want to make sure this work was visible and easily accessible to the USWDS team 🙏 This is a follow-up from the gist I shared in August. I've updated that to reflect the current patterns in the USWDS repo.

We want to be able to iterate on the development of more components, such as this alert component. By getting in an experimental/early version of this component, we'll be set up to iterate on it together.

In Maryland, we are developing web components such as this one for use in Maryland's Web Design System. We want to make sure our work is aligned with USWDS, and contributed back to USWDS, as much as possible.

Solution

This experimental version of the alert component is maybe 70% done.

The approach taken for this component is aligned with USWDS Elements standards / ADRs as much as possible, including: using TypeScript, using JSDoc, organization of files (separate .css file, etc).

Issues for follow-up

These are some remaining issues I didn't get to in this spike.
These could be done in follow-up pull requests (this PR is already very big!).

• CSS Variables
  • Not pulling in shared css variables (from Style Dictionary)
    • Idea: we may want to use :root, :host {} on these to use them in both page and component environments?
  • Several variables (labeled "TODO") are hard-coded, and are not pulling in css variables yet
  • Component variables aren't all identified or listed in JSDoc yet
• SVG is inline, not pulled in from an external file (I saw some recent updates to banner, but I didn't replicate that pattern here yet)
• Visuals
  • "Slim with no icon" has incorrect spacing
  • Link color isn't set up yet (see set-link-from-bg)
  • I didn't set up the Emergency variant yet (I think that will be easier after link color)
• Storybook
  • Some code block examples on Storybook have an extra line of whitespace. On MD we run prettier on these to address this issue.
• No tests written yet

Testing and review

1. npm run storybook and see the alert component in action.
2. (optional) Use the Storybook controls to change the inputs to the alerts.