Crash

Crash is used to contain an error due to a network or load failure so users can continue interacting with the rest of the app.

A pointing to the illustration within Crash; B pointing to the heading; C pointing to the 'Try again' button; — Crash and its sub-components

Anatomy of the Crash component
Item	Name	Description
A	`<Warning />`	Decorative element
B	`<Heading />`	Title of the Crash
C	`<Button />`	Action the user needs to take to resolve the error

The large size is recommended for most use cases where parent container height is >300px

Breakdown of Crash styles (padding, height, widths, etc.) when the default variant is used — The large size is recommended for most use cases where parent container height is >300px

The medium size is used for errors where parent container height is <300px

Breakdown of Crash styles (padding, height, widths, etc.) when the compact variant is used — The medium size is used for errors where parent container height is <300px

An error occurred

We can't load this page

Show code

import { Crash } from '@gusto/workbench';

import React from 'react';

function onRetry() {}

export const Basic = () => {
  return (
    <Crash
      headingText="We can't load this page"
      retryAriaLabel="Reload this page"
      onRetry={onRetry}
    />
  );
};

An error occurred

We can't load this section

Show code

import { Crash } from '@gusto/workbench';

import React from 'react';

function onRetry() {}

export const Compact = () => {
  return (
    <Crash
      headingText="We can't load this section"
      retryAriaLabel="Reload this section"
      onRetry={onRetry}
      size="medium"
    />
  );
};

React props
Name	Type	Default	Description
size	`mediumlarge`	large	Size of Crash.
headingLevel	`number`	3	Semantic heading level that will be applied to the headingText.
headingText Required	`string`	-	Title of the Crash.
onRetry	`function`	-	Callback when the user clicks the "Try again" button.
retryAriaLabel Required	`string`	-	Label that replaces the visible label on the “Try again” button for users who use assistive technology.

Use the right heading level based on the Crash’s placement on the page. For example, if Crash is the only heading on the page, use h1. If it appears after an h1 title, use h2.^{For more information, see footnote 1,}

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

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Crash } from '@gusto/workbench';

it('tests for basic render and functionality', () => {
  const mock = jest.fn();
  render(
    <Crash
      headingText="We can't load this page"
      retryAriaLabel="Reload this page"
      onRetry={mock}
    />,
  );

  expect(screen.getByRole('heading', { name: "We can't load this page" })).toBeInTheDocument();
  screen.getByRole('button', { name: 'Reload this page' }).click();
  expect(mock).toHaveBeenCalledTimes(1);
});