search

bcgov / design-system

The B.C. Design System helps public sector design and development teams build consistent, accessible products
https://gov.bc.ca/designsystem
Apache License 2.0
57 stars 38 forks source link

Add alert banner component #497

Open mkernohanbc opened 1 week ago

mkernohanbc commented 1 week ago

This PR adds a new Alert Banner component and docs/examples on Storybook. Alert banners provide a system-level status message. They are intended to be placed at the top of an interface (above the header), and span the full width of the viewport:

Screenshot 2024-11-12 at 10 29 37

Alert Banner renders a <div> with the ARIA status role. The user can define a different ARIA role via the role prop.

Banner content is populated via the children slot.

The component includes 6 visual themes, set via the variant prop. Each theme applies a different colourway and sets a default icon. The theme icon can be overridden by passing an icon to the customIcon slot, or hidden entirely using isIconHidden.

By default, an alert banner is dismissable, and displays a close button on the right-hand side. The user can pass a callback function using the onClose prop to configure close behaviour. Alternatively, a banner can be made uncloseable by setting isCloseable to false.

The beta theme (intended for use when a product is under development) also renders an additional text label next to the theme icon. This label can be changed via the betaLabel prop:

Screenshot 2024-11-12 at 10 35 26
mkernohanbc commented 10 hours ago

Note on 542538b: I've removed the 'beta' theme from this PR for now. That was WIP that's not ready for production. I've preserved that work on another branch to circle back on later, once I've talked it through with the designers a bit more.