New component: Alert

[mrosvik]

Related information and insight

• https://aksel.nav.no/komponenter/core/alert
• https://designsystem.dk/komponenter/beskeder/
• https://design-system.service.gov.uk/components/notification-banner/
• https://carbondesignsystem.com/patterns/notification-pattern/

Alert specification

The Alert Component should be used to display important messages, notifications, or warnings to users. It is designed to grab users attention and provide them with relevant information that requires immediate action or acknowledgment.

• Should support different types of alerts and come in different status-colors: success, danger, warning, info. It should not be possible to customize the color and style.

• Should use status icons from Navs icon library: InformationSquare , CheckmarkCircle , X-markOctagon , ExclamationmarkTriangle. It should not provide an option to change the icons or add other images.

• Should come in one size.

• Should be able to display a title or heading for the alert message. If there is no title, the paragraph should appear next to the icon.

• Should (of course) follow accessibility standards, including proper semantic markup, correct use of ARIA attributes and keyboard accessibility. It should provide text alternatives for the icons.

  • We should follow this pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alert/ ( NB: Komponenten skal følge alert-mønsteret til Aria, men utvikler må sette role=alert selv, dette vil ikke bli lagt på komponenten som default, den skal kun brukes hvis den dukker opp dynamisk pga brukerinput eller andre faktorer som kan trigge en alert. Se: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role)

• Should support different languages.

• Should not support rich text.

• Figma design

For later:

• We could consider to support dismissible alerts later, allowing users to close or dismiss the alert if desired, but that is not included in the first version. (The X is removed from sketches until further)
• We could consider to have a brand-variant that provides theming for custom colors and icon. (Or use the info-variant for this)

Tasks

Preview Give feedback

1. Alert: Design component in Figma #505
   component 🎨 figma +2
   
2. Alert: Write guidelines for usage #506
   documentation/guidelines +1
3. Alert: Develop React component #507
   component react +2
   

   
4. Alert: WCAG-test #627
   ♿️ accessibility +1

[mrosvik]

The Alert component is ready for use: https://storybook.designsystemet.no/?path=/docs/felles-alert--docs