feat(component): add StatusMessage component

[davelinke]

trafficstars

What?

Adding the Status message component for empty states and error pages

Why?

This unifies the way in which we show empty states in features as well as full error pages

Screenshots/Screen Recordings

Testing/Proof

dev.tsx code

import { Box, Button, Flex, Grid, Panel, StatusMessage, StatusMessageProps } from '@bigcommerce/big-design';
import React, { FunctionComponent } from 'react';

const statusMessages: StatusMessageProps[] = [
  {
    heading: 'Page not found',
    message:
      'The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.',
    variant: '404',
    // actions: [{ text: 'Go back to main page', variant: 'subtle' }],
    actions: <Button variant="subtle">Go back to main page</Button>,
  },
  {
    heading: 'You have no products yet',
    message: 'Start adding products to your store to see them here.',
    variant: 'info',
    // actions: [{ text: 'Add product', variant: 'secondary' }],
    actions: <Button variant="secondary">Add product</Button>,
  },
  {
    heading: 'There was an error connecting to the server',
    message: 'Please check your internet connection and try again.',
    variant: 'error',
    // actions: [{ text: 'Retry', variant: 'secondary' }],
    actions: <Button variant="secondary">Retry</Button>,
  },
  {
    heading: 'No results for search "Woot"',
    message: 'Try adjusting your search or filter to find what you are looking for.',
    variant: 'search',
    // actions: [{ text: 'Clear search', variant: 'secondary' }],
    actions: <Button variant="secondary">Clear search</Button>,
  },
  {
    heading: 'Internal server error',
    message:
      'The server encountered an internal error and was unable to complete your request. Please try again later.',
    variant: 'server-error',
    // actions: [{ text: 'Retry', variant: 'secondary' }],
    actions: <Button variant="secondary">Retry</Button>,
  },
  {
    heading: 'Operation successful',
    message: 'Your operation was completed successfully.',
    variant: 'success',
    // actions: [{ text: 'View details', variant: 'subtle' }],
    actions: <Button variant="subtle">View details</Button>,
  },
  {
    heading: 'Unauthorized access',
    message: 'You do not have the necessary permissions to access this resource.',
    variant: 'unauthorized',
    // actions: [{ text: 'Request access', variant: 'secondary' }],
    actions: <Button variant="secondary">Request access</Button>,
  },
  {
    heading: 'Quota limit exceeded',
    message:
      'You have exceeded your quota limit for this resource. Please try again in 32 minutes.',
    variant: 'warning',
    // actions: [{ text: 'Try again', variant: 'subtle' }],
    actions: <Button variant="subtle">Try again</Button>,
  },
];

const PageIllustrations: FunctionComponent = () => {
  return (
    <Grid gridColumns={{ mobile: '1fr', tablet: '1fr 1fr' }} gridGap="2rem" padding="xxLarge">
      <Panel>
        <Flex
          alignItems="center"
          flexDirection="column"
          flexGap="2rem"
          justifyContent="center"
          paddingVertical="xxLarge"
        >
          {statusMessages.map((statusMessage, index) => (
            <Box borderBottom="box" key={index} style={{ width: '100%' }}>
              <StatusMessage
                actions={statusMessage.actions}
                heading={statusMessage.heading}
                message={statusMessage.message}
                size="panel"
                variant={statusMessage.variant}
              />
            </Box>
          ))}
        </Flex>
      </Panel>

      <Flex
        alignItems="center"
        flexDirection="column"
        flexGap="2rem"
        justifyContent="center"
        padding="xxLarge"
      >
        {statusMessages.map((statusMessage, index) => (
          <Box borderBottom="box" key={index} style={{ width: '100%' }}>
            <StatusMessage
              actions={statusMessage.actions}
              heading={statusMessage.heading}
              message={statusMessage.message}
              size="page"
              variant={statusMessage.variant}
            />
          </Box>
        ))}
      </Flex>
    </Grid>
  );
};

export default PageIllustrations;