Status Menu

yarn add @twilio-paste/Status - or - yarn add @twilio-paste/core

import {
  StatusMenu,
  StatusMenuBadge,
  StatusMenuItem,
  StatusMenuItemChild,
  useStatusMenuState,
  StatusMenuItemRadio,
  StatusMenuItemCheckbox,
} from '@twilio-paste/core/status';

const ProcessStatusMenu = () => {
  const [process, setProcess] = React.useState(ProcessObject.Success);
  const menu = useStatusMenuState();
  const onClick = (status) => {
    setProcess(ProcessObject[status]);
    menu.hide();
  };
  return (
    <>
      <StatusMenuBadge {...menu} i18nButtonLabel="Change account" variant={process.variant}>
        {process.children}
      </StatusMenuBadge>
      <StatusMenu {...menu} aria-label="Preferences">
        <StatusMenuItem {...menu} onClick={() => onClick('Success')} variant="default">
          <StatusMenuItemChild variant="ProcessSuccess">Complete</StatusMenuItemChild>
        </StatusMenuItem>
        <StatusMenuItem {...menu} onClick={() => onClick('Neutral')} variant="default">
          <StatusMenuItemChild variant="ProcessNeutral">In review</StatusMenuItemChild>
        </StatusMenuItem>
        <StatusMenuItem {...menu} onClick={() => onClick('Warning')} variant="default">
          <StatusMenuItemChild variant="ProcessWarning">Needs attention</StatusMenuItemChild>
        </StatusMenuItem>
        <StatusMenuItem {...menu} onClick={() => onClick('Error')} variant="default">
          <StatusMenuItemChild variant="ProcessError">Rejected</StatusMenuItemChild>
        </StatusMenuItem>
        <StatusMenuItem {...menu} onClick={() => onClick('InProgress')} variant="default">
          <StatusMenuItemChild variant="ProcessInProgress">In-progress</StatusMenuItemChild>
        </StatusMenuItem>
        <StatusMenuItem {...menu} onClick={() => onClick('Disabled')} variant="default">
          <StatusMenuItemChild variant="ProcessDisabled">Paused</StatusMenuItemChild>
        </StatusMenuItem>
        <StatusMenuItem {...menu} onClick={() => onClick('Draft')} variant="default">
          <StatusMenuItemChild variant="ProcessDraft">Draft</StatusMenuItemChild>
        </StatusMenuItem>
      </Menu>
    </>
  );
};