Alert

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

Alerts occupy the entire width of their container.
Avoid right-aligning content; this causes a higher cognitive load to scan information and does not scale well on mobile.
Review the UX writing guidelines for Alert.

Severity	Color	Usage
Error	Red	To inform the user of an error or a problem; can be system or user-originated. Optionally, to block the user from proceeding until the user/system resolves the issue. Optionally, provide a link to take action.
Warning	Yellow	To warn or inform the user of something they need to pay attention to or do. Optionally, provide a link to take action or get more info.
Info	Gray	To provide necessary or helpful messages to the user. Optionally, provide a link to take action or get more info.
Success	Green	To confirm that a task that the user performed was successful. Optionally, provide a link to undo or take a subsequent action.

This pattern can be used as a replacement for ErrorBox.

React props
Name	Type	Default	Description
children	`ReactNode`		The content of the Alert
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.

Toast

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.');