pdh-design-system/src/atoms/Loading/Loading.stories.js

PDH Design System React Components

import React from 'react';
import Loading from '@atoms/Loading/Loading';
import Button from '@atoms/Button/Button';
import { useState } from 'storybook/preview-api';

export default {
  title: 'atoms/Loading',
  component: Loading,
  argTypes: {},
};

const Template = (args) => {
  const [loading, setLoading] = useState(false);

  const handleLoading = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }

  return (
    <div>
      <Loading {...args} open={args.open ? args.open : loading} />
      <Button onClick={handleLoading}>Show Loading</Button>
    </div>
  );
};

export const _Loading = Template.bind({});
_Loading.args = {
  open: undefined
};