USWDS - Alerts: Add alert list examples and update styles.

[mejiaj]

Preview 👁

Description

Attemps to resolve #3389.

• Moved margin-bottom: 0 to the last item
• Removed left padding from 1st level lists
• Removed margin-top from alert lists

Additional information

Need confirmation on :

• Should this behave like other lists or does it need special styling?
• Do we expect users to use .usa-list in their alert lists?

---

This also might be a good opportunity to update alerts.

We're adding the border via a pseudoelement here.

Icon and alert body are aligned via table-cell.

There's no real example of how usa-alert--validation should look like in docs.

Do we need custom alerts?

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

[mejiaj]

Do we still need this long list example or should I simplify @thisisdano

[thisisdano]

These long lists can and should be in some testing example, but not in the main alerts that we'd see on the website. Those should appear as they did before.