USWDS-Tutorial: Extending USWDS

[mejiaj]

For March 2024 Monthly Call.

How to customize and extend USWDS. Teach how to build new components that look and feel consistent with existing components.

Requirements

• Work with design system settings
• Apply tokens consistently with Sass functions and mixins
• Avoid style conflicts when overriding defaults
• Use tools for ensuring proper color contrast in every context

Original in event brief

Tasks

The full exercise (Pt. 1 completed) will be on a separate branch. The steps to follow will later be added to main so users can follow both parts.

Setup

• [x] Update NVMRC to latest LTS
• [x] Complete tutorial steps
• [x] Update link to step two instructions (updated from/build to /extend. Might not be needed for the monthly call) Fixed in uswds/uswds-tutorial#33
• [x] Add getting started instructions from clean setup
• [ ] uswds/uswds-site#2541
• [ ] #35 [Follow up work]
• [x] Remove unnecessary files/code for demo

Exercises

• [x] Identify and create two exercises to show how users can build with USWDS
• [x] Create a new page for exercises
• [x] Create a new layout for exercises
• [x] Add initial exercise code
• [x] Change permalink to extending. Done in 938aee0.

Intro

• [x] Update hero text & buttons fixed in uswds/uswds-tutorial#33.

Exercise 1

• [x] Ensure public sans is default sans font at this point (should have came from part one of the tutorial) - Confirmed
• [x] Update segue - fixed in #36
• [x] Update button color in theme settings

Exercise 2

• [x] Add instruction about custom class to the top @mahoneycm
• [x] Add instructions to add /components/ scss dir - fixed in #36
• [x] Move note about completing part one before moving to the extending tutorial - fixed in #36
• [x] Replace filler instructions (step 4) - fixed in #36
• [x] Create segue fixed in #36
• [x] Finalize theme settings

Exercise 3

• [x] Create section for instructions - added in #36
  • [x] Add new testimonial include under ut-card include
• [x] Demo testimonial component #32
  • [x] Use usa-card as a reference for people who want to build a similar component

[mahoneycm]

Reverting setup steps

Because users are expected to complete the setup steps (besides the NVMRC update) during the first part of the exercise, we should revert these changes as to not mess up the first part of the tutorial.

I created a branch and draft PR with the entire first part of the tutorial complete that we can use as a testing branch for where this tutorial should pick up.

[mejiaj]

Closing as done with #25 and #40.