Add Pennant V4

[bendansby]

🔧 Modifying a component

Context

Makes the pennant icons flush with their bounding boxes so they don't have to be eyeballed. I'm not deprecating V3 since they shouldn't be upgraded without a designer's eye.

🖼️ What does this change look like?

Component completion checklist

• I've gone through the relevant sections of the Development Accessibility guide with the changes I made to this component in mind
• Changes are clearly documented
  • Component docs include a changelog
  • Any new exposed functions or properties have docs
• Changes extend to the Component Catalog
  • The Component Catalog is updated to use the newest version, if appropriate
  • The Component Catalog example version number is updated, if appropriate
  • Any new customizations are available from the Component Catalog
  • The component example still has:
    • an accurate preview
    • valid sample code
    • correct keyboard behavior
    • correct and comprehensive guidance around how to use the component
• Changes to the component are tested/the new version of the component is tested
• Component API follows standard patterns in noredink-ui
  • e.g., as a dev, I can conveniently add an nriDescription
  • and adding a new feature to the component will not require major API changes to the component
• If this is a new major version of the component, our team has stories created to upgrade all instances of the old component. Here are links to the stories:
  • add your story links here OR just write this is not a new major version
• Please assign the following reviewers:
  • Someone from your team who can review your PR in full and review requirements from your team's perspective.
  • Component library owner - Someone from this group will review your PR for accessibility and adherence to component library foundations.
  • If there are user-facing changes, a designer. (You may want to direct your designer to the deploy preview for easy review):
    • For writing-related component changes, add Stacey (staceyadams)
    • For quiz engine-related components, add Ravi (ravi-morbia)
    • For a11y-related changes to general components, add Ben (bendansby)
    • For general component-related changes or if you’re not sure about something, add the Design group (NoRedInk/design)

[bendansby]

@asterite I added you since this would be good to upgrade when we add the wand

[asterite]

I think CI is failing because both these lines need to be here (so both are exposed and we can use them)

[bendansby]

Why, right. Fixed!

[asterite]

Next error is:

Command line: elm-forbid-import check
Exit code: 1
Stderr and Stdout:
src/Nri/Ui/PremiumCheckbox/V8.elm:68:7:forbidden import Nri.Ui.Pennant.V3 (upgrade to V4)
src/Nri/Ui/RadioButton/V4.elm:74:7:forbidden import Nri.Ui.Pennant.V3 (upgrade to V4)
src/Nri/Ui/SideNav/V5.elm:84:7:forbidden import Nri.Ui.Pennant.V3 (upgrade to V4)
component-catalog/src/Examples/PremiumCheckbox.elm:25:7:forbidden import Nri.Ui.Pennant.V3 (upgrade to V4)

If these are too much to handle right now (or you intended to import a forbidden
module), please run me with the `update` command!

I guess we don't want to upgrade to V3 right away in these components? In that case maybe running elm-forbid-import update then committing that change would make it work (also let me know if you'd like me to do that)

[bendansby]

If you could, that'd be appreciated!

[asterite]

Hm, I tried doing that but it gives no error locally 🤷

I think someone more familiar with noredink-ui should take a look at this.

[bendansby]

I don't know that anyone is an expert on noredink-ui, but I'll ask in Slack.

[bendansby]

Thanks @bcardiff! cc @asterite

[asterite]