feat: New Component: Step indicator

[brandonlenz]

Summary

Adds new Step Indicator Component.

Related Issues or PRs

closes: #487

Notes

• Localization/Internationalization: I do not currently have localizations pushed for the screenreader text or the of in "3 of 5", for example. There are several different ways I can think of to handle this:
• Edit: Looks like uswds is considering options Use localized data for interactive components uswds/uswds#3445
• We could pass in a map of localizations as an optional prop to any components that could accept custom verbiage:

interface StepIndicatorLocalizations {
  STEP: string
  OF: string
  
}

interface StepIndicatorProps {
  {...}
  localizations?: StepIndicatorLocalizations
}

---

interface StepIndicatorStepLocalizations {
  COMPLETED: string
  NOT_COMPLETED: string
}

interface StepIndicatorStepProps {
  {...}
  localizations?: StepIndicatorStepLocalizations
}

• We could also work with a more "react-y" solution using useContext for localizations at the App level.
• This may deserve a larger discussion and github issue (I'll file one if one does not already exist) to decide on the right solution.

How To Test

Checkout bl-step-indicator-487 and run storybook to inspect the component variations further

Screenshots (optional)

Default

---

No Labels

---

Centered Labels

---

Counters

---

Small Counters

[brandonlenz]

If you noticed this   being present here but not in the uswds source code, I can add some context:

In the uswds examples, there are spaces as shown in the image below:

The spaces after the circled step number and after the total number of steps come from implicit spacing added between html inline elements (so long as the html elements are separated by newlines)

Since rendered react html is minified, the implicit spacing is not rendered, so I had to explicitly add spaces here.

I may raise an issue with uswds. While this is not a quirky bug with a single browser, they may want to know about an inconsistency in display of one of their components when code is minified vs non-minified, similar to uswds/uswds#3997.

[haworku]

This may deserve a larger discussion and github issue (I'll file one if one does not already exist) to decide on the right solution.

Let's definitely make an issue. I like the idea of starting a pattern for localizations 🌟 . And also things like "step X of X" are usually complicated (you don't want to translate a sentence or phrase word by word for i1n because that assumes certain grammar structure). We might want to throw around more ideas with that or decide its out of scope.

[haworku]

Ready to approve this just would like to get your 👀 on the counters type again