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

Chips represent filter terms and entities that exist in the medical field. Certain Chip "types" may make use of iconography to make them distinct.

Use labels to describe the entity that the chip represents:

<Chip label="Dr. Gina Jackson" />

Use meta labels to provide short additional information. Tooltips are mandatory to ensure context is provided to the information.

<Chip
  label="Dr. Gina Jackson"
  metaLabelProps={{
    label: "Email",
    tooltipContent: "This contact uses email",
  }}
/>

Use icons to provide a visual representation of the "type" of entity being represented by the chip. Common use cases are to show if a chip represents a patient, a practitioner or an account holder..

<Stack direction="horizontal">
  <Chip
    label="Dr. Gina Jackson"
    iconProps={{ icon: Practitioner, tooltipContent: "A Practitioner" }}
  />
  <Chip
    label="Dierdre Thompson"
    iconProps={{ icon: Patient, tooltipContent: "A Patient" }}
  />
</Stack>

Chips come in two sizes - a smaller variant (the default) and a larger one (lg). Large Chips should be used sparingly and only when the chips themselves are meant to be visually prominent.

<Stack direction="horizontal" align="center">
  <Chip label="Dr. Gina Jackson" />
  <Chip label="Dierdre Thompson" size="lg" />
</Stack>

Support the user to understand what a Chip's content means with the use of tooltips. You can add a tooltip to the chip itself, to its metaLabel and to the remove button. Adhere to Tooltip best practices when writing tooltips.

Utilise the tooltips to provide clarity on key attributes of a Chip. For instance, if a practitioner has an associated practice that would be useful for the user to see, provide it in a tooltip.

() => {
  const name = "Dr. Gina Jackson";
  return (
    <Chip
      label={name}
      tooltipContent={`${name} - Hope Medical Center`}
      size="lg"
      metaLabelProps={{
        label: "Email",
        tooltipContent: "This is an email contact",
      }}
      iconProps={{
        icon: Practitioner,
        tooltipContent: "This contact is a practitioner",
      }}
      removeButtonProps={{
        tooltipContent: "Remove this practitioner",
        onClick: () => alert("you removed me!"),
      }}
    />
  );
};

If a chip represents something that can be interacted with, you can allow the user to click on it in order to perform an action. Common actions include A Chip will show a hover and active state when it's able to be clicked on. Use these functions in conjunction with tooltips to help the user to understand what will happen when clicking.

<Chip
  label="Dr. Gina Jackson"
  onClick={() => console.log("You clicked me!")}
  tooltipContent="See More Details"
  size="lg"
/>

() => {
  const [chips, setChips] = React.useState([0, 1, 2]);

  if (chips.length === 0) {
    return <Button onClick={() => setChips([0, 1, 2])}>Restart</Button>;
  }

  return (
    <Stack direction="horizontal">
      {chips.map((index) => (
        <Chip
          key={index}
          size="lg"
          label="Dr. Gina Jackson"
          removeButtonProps={{
            tooltipContent: "Remove this practitioner",
            onClick: () => setChips(chips.filter((value) => value !== index)),
          }}
        />
      ))}
    </Stack>
  );
};

In advanced cases, the user may need to amend an attribute relating to the Chip. For example, sending an acknowledgement that a recipient has received a medical letter. This can be done via the chip's internal checkbox. A checkbox can have its label and tooltip customised, and the click handler, loading and checked states are managed by the user.

() => {
  const [isAck, setIsAck] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);

  const timer = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      setIsAck(!isAck);
    }, 3000);
  };

  return (
    <Chip
      label="Dr. Gina Jackson"
      chipCheckboxProps={{
        label: "Ack",
        tooltipContent: "Acknowledge that this letter has been recieved.",
        onClick: timer,
        isChecked: isAck,
        isLoading,
      }}
    />
  );
};

In cases where horizontal space is limited, the content within a chip may overflow. To manage this, the overflowBehavior prop offers two options: "truncate" and "wrap".

• "truncate": This option truncates the text at the end of the available space, appending an ellipsis (…) to indicate that content is cut off.
• "wrap": This option wraps the text to the next line, ensuring that all content is visible.

When using the "truncate" option, it's recommended to include a tooltip via the tooltipContent prop to display the full text when truncation occurs. This provides users with access to the complete content even in constrained spaces.

<Flex direction="horizontal" align="start" maxWidth="220px">
  <Box maxWidth="110px">
    truncate
    <Chip
      tooltipContent="Dr. Gina Jackson"
      overflowBehavior="truncate"
      label="Dr. Gina Jackson"
    />
  </Box>
  <Box maxWidth="110px">
    wrap (default)
    <Chip overflowBehavior="wrap" label="Dr. Gina Jackson" />
  </Box>
</Flex>

Chips should be disabled under these circumstances:

1. When their onClick action cannot be performed.
2. When their "remove" (removeButtonProps) action cannot be performed.
3. When their internal checkbox cannot be altered.

Add useful information in the Chip Checkbox's tooltip to help the user to understand why the action is not able to be performed.

Common scenarios are when a chip's existence cannot be changed or edited (locked filters or recipients).

Simply pass isDisabled to the Chip component.

<Chip
  label="Dr. Gina Jackson"
  isDisabled
  tooltipContent="You do not have permissions to edit this user."
  onClick={() => setChips(chips.filter((value) => value !== index))}
/>

Common scenarios are when a chip's existence cannot be changed or edited (locked filters or recipients).

Simply pass isDisabled to the Chip component and if it has removeButtonProps, the button will be disabled. Note that you can also choose to not pass removeButtonProps in the case that a Chip is disabled, which would hide the remove button itself.

<Chip
  label="Dr. Gina Jackson"
  isDisabled
  removeButtonProps={{
    tooltipContent: "This practitioner cannot be removed",
    onClick: () => setChips(chips.filter((value) => value !== index)),
  }}
/>

In some cases, a Chip's internal checkbox may need to be disabled to prevent further alteration to its underlying properties. Simply pass isDisabled to the chipCheckboxProps. To disable the entire Chip, you'll need to pass this prop to the main component's props also.

<Stack>
  <Chip
    label="Dr. Gina Jackson"
    chipCheckboxProps={{
      label: "Ack",
      tooltipContent: "Acknowledged by Healthlink on 27/04/2023 at 8:34am",
      isChecked: true,
      isDisabled: true,
    }}
  />
  <Chip
    label="Dr. Gina Jackson"
    chipCheckboxProps={{
      label: "+/-",
      tooltipContent:
        "This property cannot be changed as the procedure occurred in the past.",
      isChecked: false,
      isDisabled: true,
    }}
  />
</Stack>

Chips are used to represent "entities" within a system. We are progressively working on defining these, but below illustrates a few common entities.

<Stack>
  <Chip
    label="Referral template - 08/02/21"
    iconProps={{
      icon: Attachment,
      tooltipContent: "File uploaded on 24.03.2022",
    }}
  />
  <Chip
    label="Gold Coast Private Hospital"
    iconProps={{
      icon: Hospital,
      tooltipContent: "This is a hospital",
    }}
  />
  <Chip
    label="Generic"
    iconProps={{
      icon: Contact,
      tooltipContent: "This is a generic contact",
    }}
  />
  <Chip
    label="Vivian Globos"
    iconProps={{
      icon: AccountHolder,
      tooltipContent: "Joanna is an account holder",
    }}
  />
  <Chip
    label="Joanna Walsh"
    iconProps={{ icon: Patient, tooltipContent: "Joanna is a Patient" }}
  />
  <Chip
    label="Dr. Dianne McClusky"
    iconProps={{
      icon: Practitioner,
      tooltipContent: "Dianne is a Practitioner",
    }}
  />
</Stack>

Select

Chips can represent generic things like items selected from a list in a form or selecting filter terms. Not to be confused with StatusBadges, Chips generally represent a selection rather than a status.