@innovaccer/design-system 2.9.0 → 2.10.0

package/core/components/molecules/sidesheet/__stories__/variants/twoSteps.story.jsx

@@ -0,0 +1,215 @@
+import * as React from 'react';
+import { action } from '@/utils/action';
+import { Heading, Text, Paragraph, Sidesheet, ModalDescription, Button } from '@/index';
+
+export const twoSteps = () => {
+  const [page, setPage] = React.useState(2);
+  const [animate, setAnimate] = React.useState(true);
+  const [open, setOpen] = React.useState(true);
+  const seperator = false;
+  const stickFooter = false;
+  const backdropClose = false;
+  const dimension = 'regular';
+
+  React.useEffect(() => {
+    setAnimate(true);
+    return () => {
+      setAnimate(false);
+    };
+  }, [page]);
+
+  const onClose = () => {
+    setOpen(false);
+    action('on close triggered')();
+  };
+
+  const backIconCallback = () => {
+    action('back icon clicked')();
+    setPage(1);
+  };
+
+  const headerOptions = {
+    backIconCallback,
+    backIcon: page === 2,
+    heading: `Heading ${page}`,
+    subHeading: 'Subheading',
+  };
+
+  const options = {
+    onClose,
+    open,
+    dimension,
+    seperator,
+    headerOptions,
+    stickFooter,
+    backdropClose,
+    footer: (
+      <>
+        {page === 1 && (
+          <Button appearance="primary" className="mr-4" onClick={() => setPage(2)}>
+            Next
+          </Button>
+        )}
+        {page === 2 && (
+          <>
+            <Button appearance="primary" className="mr-4">
+              Submit
+            </Button>
+            <Button appearance="basic" onClick={() => setPage(1)}>
+              Back
+            </Button>
+          </>
+        )}
+      </>
+    ),
+  };
+
+  const modalDescriptionOptions = {
+    title: 'Description Title',
+    description: 'Adding a subheading clearly indicates the hierarchy of the information.',
+    removePadding: true,
+  };
+
+  const modalDescriptionOptionsWithoutTitle = {
+    description: 'Card Sections include supporting text like an article summary or a restaurant description.',
+    removePadding: true,
+  };
+
+  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>
+      <Sidesheet {...options}>
+        <div className={animate ? 'fade-in' : ''} onAnimationEnd={() => setAnimate(false)}>
+          <Heading size="s">{`Page ${page}`}</Heading>
+          <Text>Modal Body</Text>
+          <ModalDescription {...modalDescriptionOptions} />
+          <ModalDescription {...modalDescriptionOptionsWithoutTitle} />
+        </div>
+      </Sidesheet>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const [open, setOpen] = React.useState(true);
+  const [page, setPage] = React.useState(2);
+  const [animate, setAnimate] = React.useState(true);
+
+  const onClose = () => {
+    setOpen(!open);
+  };
+
+  React.useEffect(() => {
+    setAnimate(true);
+    return () => {
+      setAnimate(false);
+    }
+  }, [page])
+
+  const backIconCallback = (e) => {
+    console.log('back icon clicked');
+    setPage(1);
+  };
+
+  const headerOptions = {
+    backIconCallback,
+    backIcon: page === 2,
+    heading: \`Heading \${page}\`,
+    subHeading: 'Subheading',
+  };
+
+  const options = {
+    onClose,
+    open,
+    headerOptions,
+    stickFooter: true,
+    backdropClose: true,
+    footer: (
+      <>
+        {page === 1 && (
+          <Button
+            appearance="primary"
+            className="mr-4"
+            onClick={() => setPage(2)}
+          >
+            Next
+          </Button>
+        )}
+        {page === 2 && (
+          <>
+            <Button
+              appearance="primary"
+              onClick={() => console.log('Submit button click')}
+              className="mr-4"
+            >
+              Submit
+            </Button>
+            <Button
+              appearance="basic"
+              onClick={() => setPage(1)}
+            >
+              Back
+            </Button>
+          </>
+        )}
+      </>
+    )
+  };
+
+  const modalDescriptionOptions = {
+    title: 'Description Title',
+    description: 'Adding a subheading clearly indicates the hierarchy of the information.',
+    removePadding: true
+  };
+
+  const modalDescriptionOptionsWithoutTitle = {
+    description: 'Card Sections include supporting text like an article summary or a restaurant description.',
+    removePadding: true
+  };
+
+  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>
+      <Sidesheet {...options} >
+        <div 
+          className={ animate ? 'fade-in' : ''} 
+          onAnimationEnd={() => setAnimate(false)}
+        >
+          <Heading size="s">{\`Page \${page}\`}</Heading>
+          <Text>Modal Body</Text>
+          <ModalDescription {...modalDescriptionOptions} />
+          <ModalDescription {...modalDescriptionOptionsWithoutTitle} />
+        </div>
+      </Sidesheet>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Sidesheet/Two Steps',
+  component: Sidesheet,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Sidesheet',
+        noHtml: true,
+      },
+    },
+  },
+};

package/core/components/molecules/stepper/__stories__/SkippableStep.story.jsx

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { action } from '@/utils/action';
+import { Stepper, Button } from '@/index';
+
+const steps = [
+  {
+    label: 'Application details',
+    value: 'application_details',
+  },
+  {
+    label: 'Approval questions',
+    value: 'approval_questions',
+  },
+  {
+    label: 'Payer information',
+    value: 'payer_information',
+  },
+];
+
+export const skippableStep = () => {
+  const [active, setActive] = React.useState(0);
+  const [completed, setCompleted] = React.useState(active - 1);
+  const [skipIndexes, setSkip] = React.useState([]);
+
+  const onChange = (activeStep) => {
+    setActive(activeStep);
+    return action(`Active Index: ${activeStep}`)();
+  };
+
+  const onClickHandler = () => {
+    if (skipIndexes.includes(active)) {
+      const updatedSkip = [...skipIndexes];
+      const index = updatedSkip.findIndex((skippedIndex) => skippedIndex === active);
+      updatedSkip.splice(index, 1);
+      setSkip(updatedSkip);
+    }
+    const updatedActive = active > completed ? active + 1 : completed + 1;
+    if (active > completed) setCompleted(active);
+    setActive(updatedActive);
+    return action(`Active Index: ${updatedActive}`)();
+  };
+
+  const onSkipHandler = () => {
+    const updatedActive = active > completed ? active + 1 : completed + 1;
+    setActive(updatedActive);
+    if (!skipIndexes.includes(active)) {
+      setSkip([...skipIndexes, active, updatedActive]);
+    }
+    return action(`Active Index: ${updatedActive}`)();
+  };
+
+  return (
+    <div
+      className="d-flex flex-column justify-content-between align-items-end py-4 px-4 bg-secondary-lightest"
+      style={{ height: '200px' }}
+    >
+      <div className="d-flex justify-content-center py-5 bg-light w-100">
+        <Stepper steps={steps} active={active} completed={completed} onChange={onChange} skipIndexes={skipIndexes} />
+      </div>
+      <br />
+      <div className="w-25 d-flex justify-content-end">
+        <Button onClick={onSkipHandler} className="mr-4">
+          Skip
+        </Button>
+        <Button onClick={onClickHandler} appearance="primary">
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const steps = [
+    {
+      label: 'Application details',
+      value: 'application_details'
+    },
+    {
+      label: 'Approval questions',
+      value: 'approval_questions'
+    },
+    {
+      label: 'Payer information',
+      value: 'payer_information'
+    },
+  ];
+
+  const [active, setActive] = React.useState(0);
+  const [completed, setCompleted] = React.useState(active - 1);
+  const [skipIndexes, setSkip] = React.useState([]);
+  const requiredSteps = [0];
+
+  const onChange = (activeStep) => {
+    setActive(activeStep);
+  };
+
+  const onClickHandler = () => {
+    if (skipIndexes.includes(active)) {
+      const updatedSkip = [...skipIndexes];
+      const index = updatedSkip.findIndex(skippedIndex => skippedIndex === active);
+      updatedSkip.splice(index, 1);
+      setSkip(updatedSkip);
+    }
+    const updatedActive = active > completed ? active + 1 : completed + 1;
+    if (active > completed) setCompleted(active);
+    setActive(updatedActive);
+  };
+
+  const onSkipHandler = () => {
+    const updatedActive = active > completed ? active + 1 : completed + 1;
+    setActive(updatedActive);
+    if (!skipIndexes.includes(active)) {
+      setSkip([...skipIndexes, active, updatedActive]);
+    }
+  };
+
+  return (
+    <div
+      className="d-flex flex-column justify-content-between align-items-end py-4 px-4 bg-secondary-lightest"
+      style={{ height: '200px' }}
+    >
+      <div className="d-flex justify-content-center py-5 bg-light w-100">
+        <Stepper
+          steps={steps}
+          active={active}
+          completed={completed}
+          onChange={onChange}
+          skipIndexes={skipIndexes}
+        />
+      </div>
+      <br />
+      <div className="w-25 d-flex justify-content-end">
+        <Button onClick={onSkipHandler} disabled={requiredSteps.includes(active)} className="mr-4">Skip</Button>
+        <Button onClick={onClickHandler} appearance="primary">Next</Button>
+      </div>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Stepper/Skippable Step',
+  component: Stepper,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};

package/core/components/molecules/stepper/__stories__/StandaloneStepper.story.jsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import Stepper from '../Stepper';
+import { action } from '@/utils/action';
+
+const steps = [
+  {
+    label: 'Enter email',
+    value: 'enter_email',
+  },
+  {
+    label: 'Verify email',
+    value: 'verify_email',
+  },
+  {
+    label: 'Create profile',
+    value: 'create_profile',
+  },
+  {
+    label: 'Setup organization',
+    value: 'setup_organization',
+  },
+  {
+    label: 'Invite team',
+    value: 'invite_team',
+  },
+];
+
+export const standaloneStepper = () => {
+  const [active, setActive] = React.useState(0);
+
+  const onChange = (index) => {
+    setActive(index);
+    return action(`Active Index: ${index}`)();
+  };
+
+  return <Stepper steps={steps} active={active} completed={-1} onChange={onChange} />;
+};
+
+const customCode = `() => {
+  const [active, setActive] = React.useState(0);
+
+  const steps = [
+    {
+      label: 'Enter email',
+      value: 'enter_email'
+    },
+    {
+      label: 'Verify email',
+      value: 'verify_email'
+    },
+    {
+      label: 'Create profile',
+      value: 'create_profile'
+    },
+    {
+      label: 'Setup organization',
+      value: 'setup_organization'
+    },
+    {
+      label: 'Invite team',
+      value: 'invite_team'
+    }
+  ];
+
+  const onChange = (index) => {
+    setActive(index);
+  };
+
+  return (
+    <Stepper
+      steps={steps}
+      active={active}
+      completed={-1}
+      onChange={onChange}
+    />
+  );
+}`;
+
+export default {
+  title: 'Components/Stepper/Standalone Stepper',
+  component: Stepper,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};

package/core/components/molecules/stepper/__stories__/StepperInPageHeader.story.jsx

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import { Stepper, Button, Breadcrumbs, Badge, Text, MetaList, Avatar, PageHeader, Dropdown } from '@/index';
+import { action } from '@/utils/action';
+
+export const stepperInPageHeader = () => {
+  const stepperData = [
+    {
+      value: 'step_1',
+      label: 'Recipients',
+    },
+    {
+      value: 'step_2',
+      label: 'Message',
+    },
+    {
+      value: 'step_3',
+      label: 'Schedule',
+    },
+  ];
+
+  const options = [
+    {
+      label: 'Option 1',
+      value: 'Option 1',
+    },
+    {
+      label: 'Option 2',
+      value: 'Option 2',
+    },
+    {
+      label: 'Option 3',
+      value: 'Option 3',
+    },
+  ];
+
+  const [active, setActive] = React.useState(0);
+  const [completed, setCompleted] = React.useState(-1);
+
+  const onChangeHandler = (activeStep) => {
+    setActive(activeStep);
+  };
+
+  const onClickHandler = () => {
+    if (active > completed) setCompleted(active);
+    active > completed ? setActive(active + 1) : setActive(completed + 1);
+  };
+
+  const stepper = <Stepper steps={stepperData} onChange={onChangeHandler} active={active} completed={completed} />;
+
+  const actions = (
+    <div className="d-flex justify-content-end align-items-center">
+      <Text className="mr-4">few minutes ago</Text>
+      <Avatar className="mr-4" firstName="John" lastName="Doe" appearance="accent2" />
+      <div className="mr-4">
+        <Dropdown menu={true} icon="more_horiz" options={options} />
+      </div>
+      <Button className="mr-4">Finish Later</Button>
+      <Button className="mr-4" appearance="primary" onClick={onClickHandler}>
+        Next
+      </Button>
+    </div>
+  );
+
+  const breadcrumbs = (
+    <Breadcrumbs
+      list={[
+        {
+          label: 'Campaigns',
+          link: '/Campaigns',
+        },
+      ]}
+      onClick={(link) => action(`on-click: ${link}`)}
+    />
+  );
+
+  const badge = <Badge appearance="secondary">Message</Badge>;
+
+  const meta = <MetaList list={[{ label: 'Alert' }, { label: 'Draft' }]} seperator={true} />;
+
+  return (
+    <div className="w-100 p-6 bg-secondary-lightest">
+      <PageHeader
+        title="Annual Wellness Visit"
+        separator={true}
+        navigationPosition="center"
+        stepper={stepper}
+        actions={actions}
+        breadcrumbs={breadcrumbs}
+        badge={badge}
+        meta={meta}
+      />
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const stepperData = [
+    {
+      value: 'step_1',
+      label: 'Recipients',
+    },
+    {
+      value: 'step_2',
+      label: 'Message'
+    },
+    {
+      value: 'step_3',
+      label: 'Schedule',
+    }
+  ];
+
+  const options = [
+    {
+      label: 'Option 1',
+      value: 'Option 1',
+    },
+    {
+      label: 'Option 2',
+      value: 'Option 2',
+    },
+    {
+      label: 'Option 3',
+      value: 'Option 3',
+    }
+  ];
+
+  const [active, setActive] = React.useState(0);
+  const [completed, setCompleted] = React.useState(-1);
+
+  const onChangeHandler = (activeStep) => {
+    setActive(activeStep);
+  };
+
+  const onClickHandler = () => {
+    if (active > completed) setCompleted(active);
+    active > completed ? setActive(active + 1) : setActive(completed + 1);
+  };
+
+  const stepper = <Stepper steps={stepperData} onChange={onChangeHandler} active={active} completed={completed} />;
+
+  const actions = (
+    <div className="d-flex justify-content-end align-items-center">
+      <Text className="mr-4">few minutes ago</Text>
+      <Avatar className="mr-4" firstName="John" lastName="Doe" appearance="accent2"/>
+      <div className="mr-4">
+        <Dropdown
+          menu={true}
+          icon="more_horiz"
+          options={options}
+        />
+      </div>
+      <Button className="mr-4">Finish Later</Button>
+      <Button className="mr-4" appearance="primary" onClick={onClickHandler}>Next</Button>
+    </div>
+  );
+
+  const breadcrumbs = (
+    <Breadcrumbs
+      list={[{
+        label: 'Campaigns',
+        link: '/Campaigns'
+      }]}
+      onClick={link => console.log(\`on-click: \${link}\`)}
+    />
+  );
+
+  const badge = (
+    <Badge appearance="secondary">Message</Badge>
+  );
+
+  const meta = (
+    <MetaList
+      list={[{ label: 'Alert'}, { label: 'Draft' }]}
+      seperator={true}
+    />
+  );
+
+  return (
+    <div className="p-6 bg-secondary-lightest" style={{width:'1200px'}}>
+      <PageHeader
+        title="Annual Wellness Visit"
+        separator={true}
+        navigationPosition="center"
+        stepper={stepper}
+        actions={actions}
+        breadcrumbs={breadcrumbs}
+        badge={badge}
+        meta={meta}
+      />
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Stepper/Stepper In Page Header',
+  component: PageHeader,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};