@wedgekit/indicators NPM

wedgekit/indicators

Purpose

Design system indicators for events such as loading or form submission.

Components

Submit

Can be used to indicate a form submission is still pending.

Example

import { Submit } from '@wedgekit/indicators';
import Icon, { IconWidth } from '@wedgekit/icon';

const Example = () => {
  const [status, setStatus] = React.useState('not-submitted');
  // type status = 'not-submitted' | 'submitting' | 'success' | 'error'

  const onSubmit = () => {
    setStatus('submitting');
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('success');
        // or
        // reject('error');
      }, 1000);
    })
      .then((result) => {
        setStatus(result);
      })
      .catch((result) => {
        setStatus(result);
      });
  };

  return (
    <>
      Submission Status:
      {status === 'submitting' && <Submit color="B500" size={20} />}
      {status === 'success' && (
        <IconWidth iconWidth={20}>
          <Icon color="G400">check</Icon>
        </IconWidth>
      )}
      {status === 'error' && (
        <IconWidth iconWidth={20}>
          <Icon color="R400">close</Icon>
        </IconWidth>
      )}
      <Button disabled={status === 'submitting'} onClick={onSubmit}>
        Submit
      </Button>
    </>
  );
};

render(<Example />);

Loading

Can be used to indicate that data is still loading on a page.

Example

import { Loading } from '@wedgekit/indicators';

const Example = () => {
  const [loading, setLoading] = React.useState(true);
  const [data, setData] = React.useState();

  // getData()
  //   .then((data) => {
  //     setData(data);
  //   })
  //   .catch((err) => {
  //     console.error(err);
  //   })
  //   .finally(() => {
  //     setLoading(false);
  //   });

  return loading ? <Loading color="N500" size={40} /> : <Table data={data} />;
};

render(<Example />);