@innovaccer/design-system 2.9.0 → 2.10.0

package/core/components/molecules/modal/__stories__/Dialog.story.jsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { action } from '@/utils/action';
+import { Modal, Button, Text, Paragraph, Message, List } from '@/index';
+
+export const dialogs = () => {
+  const [open, setOpen] = React.useState(true);
+  const backdropClose = true;
+  const dimension = 'medium';
+  const onClose = () => {
+    setOpen(!open);
+    action('on close triggered')();
+  };
+
+  const data = [
+    { Name: 'ER Education' },
+    { Name: 'HbA1c Test Due' },
+    { Name: 'Flu Vaccination' },
+    { Name: 'Well-Child Visit' },
+    { Name: 'Cervical Screening' },
+    { Name: 'HbA1c Test Due' },
+    { Name: 'Flu Vaccination' },
+    { Name: 'Well-Child Visit' },
+    { Name: 'Cervical Screening' },
+    { Name: 'HbA1c Test Due' },
+    { Name: 'Flu Vaccination' },
+    { Name: 'Well-Child Visit' },
+  ];
+
+  const schema = [
+    {
+      name: 'data',
+      displayName: 'data',
+      cellRenderer: (props) => {
+        return <Text className=" ml-4">{`${props.data.Name}`}</Text>;
+      },
+    },
+  ];
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+        <br />
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        <br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        <br />
+      </Paragraph>
+      <Modal
+        open={open}
+        dimension={dimension}
+        backdropClose={backdropClose}
+        onClose={onClose}
+        headerOptions={{
+          heading: 'Cannot delete Leona Lucas',
+        }}
+        footer={
+          <>
+            <Button className="ml-4" onClick={action('Close button click')}>
+              Close
+            </Button>
+          </>
+        }
+      >
+        <div>
+          <Message
+            appearance="warning"
+            description="Following 11 outreaches are currently scheduled using this sender's details."
+          />
+        </div>
+        <div style={{ border: 'var(--border)', height: '185px' }} className="my-5 overflow-auto">
+          <List data={data} schema={schema} size="compressed" />
+        </div>
+        <Text weight="strong" className="mt-2">
+          What to do next?
+        </Text>
+        <br />
+        <Text>You cannot delete this sender until the scheduled outreaches have been completed or cancelled.</Text>
+      </Modal>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const [open, setOpen] = React.useState(true);
+  const backdropClose = true;
+  const dimension = 'medium';
+  const onClose = () => {
+    setOpen(!open);
+    console.log('on close triggered')();
+  };
+
+  const data = [{ Name:'ER Education' }, { Name:'HbA1c Test Due' } , { Name:'Flu Vaccination' }  , { Name:'Well-Child Visit' }, { Name:'Cervical Screening' }, { Name:'HbA1c Test Due' } , { Name:'Flu Vaccination' }  , { Name:'Well-Child Visit' }, { Name:'Cervical Screening' }, { Name:'HbA1c Test Due' } , { Name:'Flu Vaccination' }  , { Name:'Well-Child Visit' }];
+
+  const schema = [
+    {
+      name: 'info',
+      displayName: 'Info',
+      cellRenderer: (props) => {
+        return (
+          <Text className=" ml-4">{\`\${props.data.Name}\`}</Text>
+        );
+      }
+    },
+  ];
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
+        Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident,
+        sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
+      </Paragraph>
+      <Button appearance="primary" onClick={() => setOpen(true)}>Open</Button>
+      <Modal
+        open={open}
+        dimension={dimension}
+        backdropClose={backdropClose}
+        onClose={onClose}
+        headerOptions={{
+          heading: 'Cannot delete Leona Lucas',
+        }}
+        footer={(
+          <>
+            <Button className="ml-4" onClick={console.log('Close button click')}>Close</Button>
+          </>
+        )}
+      >
+        <div>
+          <Message
+            appearance="warning"
+            description="Following 11 outreaches are currently scheduled using this sender's details."
+          />
+        </div>
+        <div style={{ border: 'var(--border)', height:'185px' }} className="my-5 overflow-auto">
+          <List
+            data={data}
+            schema={schema}
+            size="compressed"
+          />
+        </div>
+        <Text weight="strong" className="mt-2">What to do next?</Text><br/>
+        <Text>
+          You cannot delete this sender until the scheduled outreaches have been completed or cancelled.
+        </Text>
+      </Modal>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Modal/Dialogs',
+  component: Modal,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Modal',
+        noHtml: true,
+      },
+    },
+  },
+};

package/core/components/molecules/modal/__stories__/Input.story.jsx

@@ -0,0 +1,256 @@
+import * as React from 'react';
+import { action } from '@/utils/action';
+import { Modal, Button, Paragraph, Navigation, Heading, Label, Dropdown } from '@/index';
+
+export const inputModals = () => {
+  const [open, setOpen] = React.useState(true);
+  const backdropClose = false;
+
+  const onClose = () => {
+    setOpen(!open);
+  };
+
+  const options = [
+    {
+      label: 'Option1',
+      value: 'Option1',
+    },
+    {
+      label: 'Option2',
+      value: 'Option2',
+    },
+  ];
+
+  const data = [
+    {
+      label: 'Medicine',
+      name: 'Tab1',
+    },
+    {
+      label: 'Period',
+      name: 'Tab2',
+    },
+    {
+      label: 'Alias',
+      name: 'Tab3',
+    },
+    {
+      label: 'Priority',
+      name: 'Tab4',
+    },
+  ];
+
+  const [active, setActive] = React.useState({
+    name: 'Tab1',
+  });
+
+  const onClickHandler = (menu) => {
+    setActive(menu);
+  };
+
+  const subHeading = (
+    <Navigation align="left" menus={data} active={active} onClick={onClickHandler} className="ml-5 mt-4" />
+  );
+
+  const header = (
+    <div>
+      <Heading className="ml-7 mb-3">Medication</Heading>
+      {subHeading}
+    </div>
+  );
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+        <br />
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        <br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        <br />
+      </Paragraph>
+      <Modal
+        open={open}
+        dimension="large"
+        backdropClose={backdropClose}
+        onClose={onClose}
+        header={header}
+        footer={
+          <>
+            <Button appearance="basic" onClick={action('Cancel button click')}>
+              Discard
+            </Button>
+            <Button appearance="primary" className="ml-4" onClick={action('Discard button click')}>
+              Create operand
+            </Button>
+          </>
+        }
+        seperator={true}
+      >
+        <div className="my-5">
+          <Label withInput={true} required={true}>
+            Type
+          </Label>
+          <Dropdown options={options} className="w-50" />
+          <Label withInput={true} className="mt-5">
+            Active Date
+          </Label>
+          <Dropdown options={options} className="w-50" />
+          <div className="d-flex pb-4">
+            <div className="d-block w-75">
+              <Label withInput={true} required={true} className="mt-5">
+                Diagnosis Diseases
+              </Label>
+              <Dropdown options={options} />
+            </div>
+            <div className="ml-5 d-block w-25">
+              <Label withInput={true} required={true} className="mt-5">
+                Version
+              </Label>
+              <Dropdown options={options} />
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const [open, setOpen] = React.useState(true);
+  const backdropClose =false;
+
+  const onClose = () => {
+    setOpen(!open);
+    console.log('on close triggered')();
+  };
+
+  const options = [
+    {
+      label: 'Option1',
+      value: 'Option1',
+    },
+    {
+      label: 'Option2',
+      value: 'Option2',
+    }
+  ];
+
+  const data = [
+    {
+      label: 'Medicine',
+      name: 'Tab1'
+    },
+    {
+      label: 'Period',
+      name: 'Tab2'
+    },
+    {
+      label: 'Alias',
+      name: 'Tab3'
+    },
+    {
+      label: 'Priority',
+      name: 'Tab4'
+    }
+  ];
+
+  const [active, setActive] = React.useState({
+    name: 'Tab1'
+  });
+
+  const onClickHandler = (menu) => {
+    setActive(menu);
+  };
+
+  const subHeading = (
+    <Navigation
+      align="left"
+      menus={data}
+      active={active}
+      onClick={onClickHandler}
+      className="ml-5 mt-4"
+    />
+  );
+
+  const header = (
+    <div>
+      <Heading className="ml-7 mb-3">Medication</Heading>
+      {subHeading}
+    </div>
+  );
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
+        Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident,
+        sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
+        <Button appearance="primary" onClick={() => setOpen(true)}>Open</Button>
+      </Paragraph>
+      <Modal
+        open={open}
+        dimension="large"
+        backdropClose={backdropClose}
+        onClose={onClose}
+        header={header}
+        footer={(
+          <>
+            <Button appearance="basic" onClick={console.log('Cancel button click')}>Discard</Button>
+            <Button appearance="primary" className="ml-4" onClick={console.log('Discard button click')}>
+                Create operand
+            </Button>
+          </>
+        )}
+        seperator={true}
+      >
+        <div className="my-5">
+          <Label withInput={true} required={true}>Type</Label>
+          <Dropdown
+              options={options}
+              className="w-50"
+          />
+          <Label withInput={true} className="mt-5">Active Date</Label>
+          <Dropdown
+              options={options}
+              className="w-50"
+          />
+          <div className="d-flex pb-4">
+            <div className="d-block w-75">
+              <Label withInput={true} required={true} className="mt-5">Diagnosis Diseases</Label>
+              <Dropdown
+                  options={options}
+              />
+            </div>
+            <div className="ml-5 d-block w-25">
+              <Label withInput={true} required={true} className="mt-5">Version</Label>
+              <Dropdown
+                  options={options}
+              />
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Modal/Input Modals',
+  component: Modal,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Modal',
+        noHtml: true,
+      },
+    },
+  },
+};

package/core/components/molecules/modal/__stories__/Layering.story.jsx

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import { action } from '@/utils/action';
+import { Modal, ModalDescription, ModalHeader, ModalBody, ModalFooter, Button, Text, Paragraph } from '@/index';
+
+export const layering = () => {
+  const [open, setOpen] = React.useState(true);
+  const [openSecondOverlay, setOpenSecondOverlay] = React.useState(false);
+  const backdropClose = false;
+  const dimension = 'medium';
+
+  const onClose = () => {
+    setOpen(false);
+    action('on close triggered')();
+  };
+
+  const onCloseSecondOverlay = () => {
+    setOpenSecondOverlay(false);
+    action('on close triggered')();
+  };
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+        <br />
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        <br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        <br />
+      </Paragraph>
+      <Modal
+        closeOnEscape={true}
+        open={open}
+        dimension={dimension}
+        backdropClose={backdropClose}
+        onClose={onClose}
+        headerOptions={{
+          heading: 'Heading',
+          subHeading: 'Subheading',
+        }}
+        footer={
+          <>
+            <Button appearance="basic" onClick={action('Basic button click')}>
+              Basic
+            </Button>
+            <Button appearance="primary" className="ml-4" onClick={() => setOpenSecondOverlay(true)}>
+              Open
+            </Button>
+          </>
+        }
+      >
+        <Text>Modal Body</Text>
+        <ModalDescription
+          title="Description Title"
+          description="Adding a subheading clearly indicates the hierarchy of the information."
+        />
+        <ModalDescription description="Card Sections include supporting text like an article summary or a restaurant description." />
+      </Modal>
+
+      <Modal
+        closeOnEscape={true}
+        open={openSecondOverlay}
+        dimension={dimension}
+        backdropClose={backdropClose}
+        onClose={onCloseSecondOverlay}
+        headerOptions={{
+          heading: 'Heading Part Two',
+          subHeading: 'Subheading Part Two',
+        }}
+        footer={
+          <>
+            <Button appearance="primary" className="ml-4" onClick={action('Primary button Two click')}>
+              Primary
+            </Button>
+          </>
+        }
+      >
+        <Text>Modal Part Two Body</Text>
+        <ModalDescription description="Card Sections include supporting text like an article summary or a restaurant description." />
+      </Modal>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const [open, setOpen] = React.useState(true);
+  const [openSecondOverlay, setOpenSecondOverlay] = React.useState(false);
+  const dimension = 'medium';
+  const backdropClose = false;
+
+  const onClose = () => {
+    setOpen(!open);
+  };
+
+  const onCloseSecondOverlay = () => {
+    setOpenSecondOverlay(!openSecondOverlay);
+  }
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
+        Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident,
+        sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
+        <Button appearance="primary" onClick={() => setOpen(true)}>Open</Button>
+      </Paragraph>
+      <Modal
+        closeOnEscape={true}
+        open={open}
+        dimension={dimension}
+        backdropClose={backdropClose}
+        onClose={onClose}
+        headerOptions={{
+          heading: 'Heading',
+          subHeading: 'Subheading'
+        }}
+        footer={(
+          <>
+            <Button appearance="basic" onClick={()=>console.log('Basic button click')}>Basic</Button>
+            <Button appearance="primary" className="ml-4" onClick={()=> setOpenSecondOverlay(true)}>Open</Button>
+          </>
+        )}
+      >
+        <Text>Modal Body</Text>
+        <ModalDescription
+          title="Description Title"
+          description="Adding a subheading clearly indicates the hierarchy of the information."
+        />
+        <ModalDescription
+          description="Card Sections include supporting text like an article summary or a restaurant description."
+        />
+      </Modal>
+
+      <Modal
+        closeOnEscape={true}
+        open={openSecondOverlay}
+        dimension={dimension}
+        backdropClose={backdropClose}
+        onClose={onCloseSecondOverlay}
+        headerOptions={{
+          heading: 'Heading Part Two',
+          subHeading: 'Subheading Part Two',
+        }}
+        footer={
+          <>
+            <Button appearance="primary" className="ml-4" onClick={() => console.log('Primary button click')}>
+              Primary
+            </Button>
+          </>
+        }
+      >
+        <Text>Modal Part Two Body</Text>
+        <ModalDescription description="Card Sections include supporting text like an article summary or a restaurant description." />
+      </Modal>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Modal/Layering',
+  component: Modal,
+  subcomponents: { ModalHeader, ModalBody, ModalDescription, ModalFooter },
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Modal',
+        noHtml: true,
+      },
+    },
+  },
+};

package/core/components/molecules/modal/__stories__/NoFooter.story.jsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { action } from '@/utils/action';
+import { Modal, ModalDescription, ModalHeader, ModalBody, ModalFooter, Text, Paragraph } from '@/index';
+
+export const noFooter = () => {
+  const [open, setOpen] = React.useState(true);
+  const backdropClose = false;
+  const dimension = 'medium';
+
+  const onClose = () => {
+    setOpen(false);
+    action('on close triggered')();
+  };
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+        <br />
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        <br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        <br />
+      </Paragraph>
+      <Modal
+        open={open}
+        dimension={dimension}
+        backdropClose={backdropClose}
+        onClose={onClose}
+        headerOptions={{
+          heading: 'Heading',
+          subHeading: 'Subheading',
+        }}
+      >
+        <Text>Modal Body</Text>
+        <ModalDescription
+          title="Description Title"
+          description="Adding a subheading clearly indicates the hierarchy of the information."
+        />
+        <ModalDescription description="Card Sections include supporting text like an article summary or a restaurant description." />
+      </Modal>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const [open, setOpen] = React.useState(true);
+  const dimension = 'medium';
+  const backdropClose = true;
+
+  const onClose = () => {
+    setOpen(!open);
+  };
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
+        Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident,
+        sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
+        <Button appearance="primary" onClick={() => setOpen(true)}>Open</Button>
+      </Paragraph>
+      <Modal
+        open={open}
+        dimension={dimension}
+        backdropClose={backdropClose}
+        onClose={onClose}
+        headerOptions={{
+          heading: 'Heading',
+          subHeading: 'Subheading'
+        }}
+      >
+        <Text>Modal Body</Text>
+        <ModalDescription
+          title="Description Title"
+          description="Adding a subheading clearly indicates the hierarchy of the information."
+        />
+        <ModalDescription
+          description="Card Sections include supporting text like an article summary or a restaurant description."
+        />
+      </Modal>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Modal/No Footer',
+  component: Modal,
+  subcomponents: { ModalHeader, ModalBody, ModalDescription, ModalFooter },
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Modal',
+        noHtml: true,
+      },
+    },
+  },
+};