import { EmptyState } from "@vitality-ds/components";

The EmptyState component can be used when there is nothing to display, or content does not yet exist for a screen, page, or panel. It can help to provide cues to the user of what could be displayed, and how to populate the area with that content. This could include directions to getting started with key tasks related to populating the EmptyState.

The EmptyState component can be made up of an image, title, description, and button. An image and title will be set by default.

<EmptyState
  image="padlock"
  title="No access"
  description="You do not have the correct permissions to view this information. Please contact support by clicking the link below."
  buttonProps={{
    label: "Contact support",
    onClick: () => {
      alert("Support has been contacted");
    },
  }}
/>

The EmptyState image is an important and mandatory element of this component. It provides a visual cue to users as to what is occurring. Appropriate usage are as follows:

• Folder: Use when no searchable information is displayed. This is the default image of empty states. Best practice is to explicitly state the image you wish to use. Can be used by passing image="folder"

• Padlock: Use when information is not displayed due to lack of permissions. Can be used by passing image="padlock"

• Speech Bubble: Use when some form of communication, such as email, chat, or conversation history is not present or available to the user. Can be used by passing image="speechBubble"

• Reference Screen: Use when expected information, such as references to particular screens or data are not showing. Can be used by passing image="referenceScreen"

() => {
  const [image, setImage] = React.useState("folder");

  const changeHandler = (newValue) => {
    setImage(newValue);
  };

  const options = [
    { label: "folder", id: "folder", value: "folder" },
    { label: "padlock", id: "padlock", value: "padlock" },
    { label: "speechBubble", id: "speechBubble", value: "speechBubble" },
    {
      label: "referenceScreen",
      id: "referenceScreen",
      value: "referenceScreen",
    },
  ];

  return (
    <Stack align="center" justify="center" spacing="xl">
      <RadioButtons
        onChange={changeHandler}
        value={image}
        name="image"
        options={options}
        direction="horizontal"
      />
      <EmptyState image={image} title="No data found" />
    </Stack>
  );
};

The title prop for an EmptyState defaults to "Nothing to display". If the use case requires specific wording, you can pass a string to the title prop. It should be short and provide a clear connection to the image and provide the user with a basic understanding of what is occurring.

<EmptyState image="speechBubble" title="No SMS message yet" />

Where required, an EmptyState can host a description which will provide supportive information to the users. This information can aid in describing why the EmptyState is displayed, and offer guidance to next steps in the user flow. This can be accessed by using the description prop.

<EmptyState description="We couldn't find what you are looking for. Please try different filter options." />

This component button is optional and can be used to direct the user take supportive action. Examples of this could be to create a new element, or change a filter.

<EmptyState
  buttonProps={{
    label: "Search again",
    onClick: () => {
      alert("Search continued");
    },
  }}
/>