Add 4-scale `ImpactBadge` Component

[scurker]

ImpactBadge is an extension of the Badge component with more defined requirements.

Design Specs

ImpactBadge is a primitive component to display various impact levels with an associated icon/background color:

• Critical
  • Icon: chevron-double-up
  • Background Color: #fea7a6 (new global variable --accent-error-active, mapped from --issue-critical)
  • Border Color: #db6379 (currently --accent-error-disabled)
• Serious
  • Icon: chevron-up
  • Background Color: --accent-caution (mapped from --issue-serious)
  • Border Color: --accent-warning
• Moderate
  • Icon: chevron-down
  • Background Color: #f0c4f8 (mapped from --issue-moderate)
  • Border Color: #eb94ff (doesn't exist in Cauldron, use as one-off)
• Minor
  • Icon: chevron-double-down
  • Background Color: --gray-20 (mapped from --issue-minor)
  • Border Color: --gray-30

The badge itself should have a minimum height of 24px using --target-size-minimum for the small size. The icon should have roughly 1px spacing on the horizontal axis, with the text having a right spacing of --space-smaller.

The default size should match the height of buttons, which is currently 36px.

The text color of the labels should always be set to --gray-90.

Interface

interface ImpactBadge extends Badge {
  type: 'critical' | 'serious' | 'moderate' | 'minor'
  label?: ContentNode
}

[!NOTE] Cauldron should have a default label for each impact type in order to provide an accessible name by default, but still allow content authors to provide an alternative label for translation purposes.

Example:

<ImpactBadge type="critical" />

If you need access to the designs, please reach out to a member of the Cauldron team.

[scurker]

Investigate different sizing (e.g. smaller icons potentially) as an alternate variant.

[shawnsharpDQ]

4 sizes (XL, L, M, S). Labels are not required. Can be paired with a label, link, or left standalone.

UXPin

[anastasialanz]

@shawnsharpDQ @scurker and I chatted about setting this icon size to 13x13 and letting users set a larger icon size with CSS if necessary. Down the road, if we decide that we should support multiple sizes of this icon, we can add the prop to handle sizing.

[anastasialanz]

What does "Size: 10" mean?

[scurker]

What does "Size: 10" mean?

The icon size in Figma is 10px, where Cauldron's viewbox for icons is a bit larger - I tried to translate that as best I could from the Figma design to the implementation and the following graphic should be a good visual representation of the structure:

[anastasialanz]

Would this be a new page in the docs?

[scurker]

Yes, this should have a new docs page documenting the component