@wedgekit/indicators
v2.0.0
Published
Provides design system indicators for DMSi web apps
Downloads
16
Maintainers
Keywords
Readme
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 />);
Props
All indicators have the same props
color
Type: ColorTag
required: ❌
Icon color. All ColorTag
options can be found here.
size
Type: number
required: ❌
The height and width of the indicator, in pixels