pdh-design-system/src/organisms/Modal/Modal.stories.js

PDH Design System React Components

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

export default {
  title: 'organisms/Modal',
  component: Modal,
  argTypes: {},
};

const Template = (args) => {
  const [show, setShow] = useState(args.show);
  const onClose = () => setShow(false);

  return (
    <>
      <Button onClick={() => setShow(true)}>Open modal</Button>

      <Modal {...args} show={show} onHide={onClose} onCancel={onClose} onSave={onClose} >
        <div style={{ height: 200 }}>
          Modal Body
        </div>
      </Modal>
    </>
  );
};

export const _Modal = Template.bind({});
_Modal.args = {
  show: true,
  title: 'Modal title',
  footer: ''
};