Alert

Alert is used to communicate success, a warning, a problem/error, or necessary information—prominent but not necessarily interruptive.

This pattern can be used as a replacement for ErrorBox.

React props
Name	Type	Default	Description
children	`ReactNode`	-	The content of the Alert
headingLevel Required	`123456`	-	The semantic level that will be applied to the heading. `1` will become `<h1>`, `2` will become `<h2>`, etc.
label Required	`string`	-	The title of the alert
severity	`errorinfosuccesswarning`	info	The level of severity for the Alert

Do the following when you are dynamically adding an Alert to your page (e.g., on form submission):

Wrap the Alert within a parent element using role="alert" or role="status". If the Alert severity is info, use role="status", otherwise role="alert".
Add role="none" to the Alert to prevent the Alert from being read out twice to screen readers.

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

render(
  <Alert severity="warning" label="Isaiah doesn’t have a personal email">
    <p>
      We suggest you <Link href="https://gusto.com">add a personal email</Link> so they can sign
      into Gusto.
    </p>
  </Alert>,
);

const alert = screen.getByLabelText('Isaiah doesn’t have a personal email');

// Role may also be queried for more specificity, but will need to use a regular
// expression or include the severity label:
//
// RegExp:
// screen.getByRole('alert', {
//   name: /Isaiah doesn’t have a personal email/,
// });
//
// Severity label included:
// screen.getByRole('alert', {
//   name: 'Warning: Isaiah doesn’t have a personal email',
// });

expect(alert).toHaveTextContent('We suggest you add a personal email so they can sign into Gusto.');