LG-4226: Document current button offerings ("big", "outline")

[aduth]

This pull request...

• Updates Buttons page to include Big button examples.
• Small adjustments to Big button sizing per Figma design (padding, font size, line height).
• Renames "Secondary" button to "Outline" button
  • Note: In code, "Secondary" still exists, and is effectively aliased as the outline button. This is how it was implemented previously, and otherwise we'd inherit USWDS secondary button styling, which may not be desirable or at least not predictable in its usage.

Note: Between this and #191, whichever is merged first, the other should include and verify the behavior of the unstyled, big button. I tested this locally and it appeared to work reasonably well out of the box.

Screenshot:

Live Preview: https://federalist-2f194a10-945e-4413-be01-46ca6dae5358.app.cloud.gov/preview/18f/identity-style-guide/aduth-lg-4226-document-outline-big/components/buttons/

[aduth]

Note: The seemingly-unnecessary <div> wrapper exists to prevent the button previews from being wrapped in <p>, which in the context of the page .usa-prose causes premature line wrapping.

It might make sense to apply this to all of the examples.

[aduth]

Status: Currently working on reconciling this with unstyled button from #191. Will push an update shortly.

Edit: Now up-to-date.

[zachmargolis]

LGTM

[anniehirshman-gsa]

Looking great! Couple tiny adjustments:

• All big button styles (except Unstyled buttons of course) should have .5rem/8px border radius
• For both regular and big Outline buttons: hover and active state text color should match the border color (hover = primary-dark, active = primary-darker)

[aduth]

Thanks @anniehirshman-gsa ! All good catches.

• All big button styles (except Unstyled buttons of course) should have .5rem/8px border radius

This is fixed in 6f7e3e1.

• For both regular and big Outline buttons: hover and active state text color should match the border color (hover = primary-dark, active = primary-darker)

This is updated in 69a13a0. It appears that we were explicitly overriding this before. I just removed that, so the color should match the border. On closer inspection, there seemed to be quite a bit we were overriding from USWDS that was redundant, so as part of this, I was able to simplify the styles a decent amount.

[anniehirshman-gsa]

Sounds great! 👍