npm - @veeqo/ui - Versions diffs - 0.0.3 → 0.0.6 - Mend

@veeqo/ui 0.0.3 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1085) hide show

package/src/components/Modal/Modal.stories.tsx DELETED Viewed

@@ -1,455 +0,0 @@
-import React, { useState } from 'react';
-import { Modal } from './Modal';
-export default {
-  title: 'Components/UI/Modal',
-  component: Modal,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## Description
-This modal component is designed to be used to confirm, or perform (basic) actions without removing the user from their current context.
-## Usage
-This component uses conditional rendering under the hood so your contents should not be mounted until "shouldShow" is true.
-~~~tsx
-...
-  <Modal
-    shouldShow={isOpen}
-    onClose={closeModal}
-    leftActions={leftActions}
-    rightActions={rightActions}
-  >
-    <Contents />
-  </Modal>
-...
-~~~
-## Accessiblity
-This component is designed to be fully accessible when using the default header and footer options, but if using the slots your own considerations must be made to ensure accessiblity is not degraded.
-## Example + Props
-`,
-      },
-    },
-  },
-};
-export const Default = ({ shouldShow: incomingShouldShow, ...props }: any) => {
-  const [isOpen, setIsOpen] = useState(incomingShouldShow);
-  const toggleModal = () => {
-    setIsOpen(!isOpen);
-  };
-  const closeModal = () => {
-    setIsOpen(false);
-  };
-  const leftActionsForDemo = props.variant === 'xs' ? [] : props.leftActions;
-  return (
-    <div>
-      <button type="button" onClick={toggleModal}>
-        Open Modal
-      </button>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere eu erat ac efficitur.
-        Aliquam cursus, nunc et pellentesque tincidunt, augue ligula pulvinar sapien, eget mattis
-        velit dui eu ipsum. Integer ut tellus tristique, interdum nisi at, elementum arcu. In urna
-        turpis, finibus et sem et, pulvinar lacinia dolor. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. Maecenas in mollis ex, tincidunt
-        auctor felis. Sed nec massa volutpat, egestas nisi nec, luctus lacus. Curabitur porta
-        laoreet maximus. Fusce rhoncus pellentesque efficitur. Maecenas porta cursus orci, ac
-        molestie mi lacinia at. Suspendisse malesuada, dolor id gravida fermentum, nulla nisi
-        fringilla purus, a iaculis metus turpis ac nulla. Sed maximus placerat enim sit amet
-        placerat. Curabitur faucibus tortor porttitor sapien blandit, sed suscipit arcu sodales.
-        Nunc arcu tortor, fermentum in lectus id, ultricies lacinia ipsum. Quisque quis velit
-        libero. Maecenas tempus tincidunt justo eu pulvinar.
-      </p>
-      <Modal onClose={closeModal} shouldShow={isOpen} {...props} leftActions={leftActionsForDemo}>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus
-          pharetra porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsum. Lorem
-          ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus pharetra
-          porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsumm.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus
-          pharetra porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsum. Lorem
-          ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus pharetra
-          porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsumm.
-        </p>
-        <button type="button">Button 1</button>
-        <button type="button" style={{ margin: '0.5rem' }}>
-          Button 2
-        </button>
-        <button type="button">Button 3</button>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus
-          pharetra porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsum. Lorem
-          ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus pharetra
-          porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsumm.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus
-          pharetra porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsum. Lorem
-          ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus pharetra
-          porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsumm.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus
-          pharetra porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsum. Lorem
-          ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus pharetra
-          porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsumm.
-        </p>
-      </Modal>
-    </div>
-  );
-};
-Default.args = {
-  variant: 'base',
-  fullBleed: false,
-  shouldShow: false,
-  showHeaderCloseButton: true,
-  headerTitle: 'Modal Title',
-  // headerSubtitle: 'Something',
-  rightActions: [
-    { label: 'Cancel', onClick: () => {}, variant: 'default' },
-    { label: 'Delete', onClick: () => {}, variant: 'primaryDestructive' },
-  ],
-  leftActions: [{ label: 'Tertiary', onClick: () => {}, variant: 'default' }],
-};
-export const HeaderSlotExample = ({ shouldShow: incomingShouldShow, ...props }: any) => {
-  const [isOpen, setIsOpen] = useState(incomingShouldShow);
-  const toggleModal = () => {
-    setIsOpen(!isOpen);
-  };
-  const closeModal = () => {
-    setIsOpen(false);
-  };
-  return (
-    <div>
-      <button type="button" onClick={toggleModal}>
-        Open Modal
-      </button>
-      <Modal onClose={closeModal} shouldShow={isOpen} {...props}>
-        <p style={{ margin: 0 }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus
-          pharetra porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsum. Lorem
-          ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus pharetra
-          porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsum.
-        </p>
-      </Modal>
-    </div>
-  );
-};
-HeaderSlotExample.args = {
-  variant: 'base',
-  fullBleed: false,
-  shouldShow: false,
-  showHeaderCloseButton: true,
-  headerSlot: (
-    <div>
-      <h1>Custom Header</h1>
-    </div>
-  ),
-  rightActions: [
-    { label: 'Cancel', onClick: () => {}, variant: 'default' },
-    { label: 'Delete', onClick: () => {}, variant: 'primaryDestructive' },
-  ],
-  leftActions: [{ label: 'Tertiary', onClick: () => {}, variant: 'default' }],
-};
-export const FooterSlotExample = ({ shouldShow: incomingShouldShow, ...props }: any) => {
-  const [isOpen, setIsOpen] = useState(incomingShouldShow);
-  const toggleModal = () => {
-    setIsOpen(!isOpen);
-  };
-  const closeModal = () => {
-    setIsOpen(false);
-  };
-  return (
-    <div>
-      <button type="button" onClick={toggleModal}>
-        Open Modal
-      </button>
-      <Modal onClose={closeModal} shouldShow={isOpen} {...props}>
-        <p style={{ margin: 0 }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus
-          pharetra porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsum. Lorem
-          ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus pharetra
-          porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsum.
-        </p>
-      </Modal>
-    </div>
-  );
-};
-FooterSlotExample.args = {
-  variant: 'base',
-  fullBleed: false,
-  shouldShow: false,
-  showHeaderCloseButton: true,
-  title: 'Modal Title',
-  footerSlot: (
-    <div>
-      <h1>Custom Footer Slot</h1>
-    </div>
-  ),
-};
-export const FooterAndHeaderSlotsExample = ({ shouldShow: incomingShouldShow, ...props }: any) => {
-  const [isOpen, setIsOpen] = useState(incomingShouldShow);
-  const toggleModal = () => {
-    setIsOpen(!isOpen);
-  };
-  const closeModal = () => {
-    setIsOpen(false);
-  };
-  return (
-    <div>
-      <button type="button" onClick={toggleModal}>
-        Open Modal
-      </button>
-      <Modal onClose={closeModal} shouldShow={isOpen} {...props}>
-        <p style={{ margin: 0 }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus
-          pharetra porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsum. Lorem
-          ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie, nibh faucibus pharetra
-          porttitor, purus eros pharetra ex, at hendrerit libero libero eget ipsum.
-        </p>
-      </Modal>
-    </div>
-  );
-};
-FooterAndHeaderSlotsExample.args = {
-  variant: 'base',
-  fullBleed: false,
-  shouldShow: false,
-  showHeaderCloseButton: true,
-  headerSlot: (
-    <div>
-      <h1>Custom Header</h1>
-    </div>
-  ),
-  footerSlot: (
-    <div>
-      <h1>Custom Footer Slot</h1>
-    </div>
-  ),
-};

package/src/components/Modal/Modal.test.tsx DELETED Viewed

@@ -1,211 +0,0 @@
-import React from 'react';
-import { render, screen, within } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import userEvent from '@testing-library/user-event';
-import { ButtonVariant } from '../Button/types';
-import { Modal } from '.';
-// Jest does not currently mock the HTML Dialog Element.
-HTMLDialogElement.prototype.show = jest.fn(function mock(this: HTMLDialogElement) {
-  this.open = true;
-});
-HTMLDialogElement.prototype.showModal = jest.fn(function mock(this: HTMLDialogElement) {
-  this.open = true;
-});
-HTMLDialogElement.prototype.close = jest.fn(function mock(this: HTMLDialogElement) {
-  this.open = false;
-});
-const HEADER_TITLE = 'TEST TITLE';
-const HEADER_SUBTITLE = 'TEST SUBTITLE';
-const LEFT_ACTIONS = [
-  { label: 'Cancel', variant: 'primaryDestructive' as ButtonVariant, onClick: () => {} },
-];
-const RIGHT_ACTIONS = [
-  { label: 'Save', variant: 'primary' as ButtonVariant, onClick: () => {} },
-  {
-    label: 'Cancel',
-    variant: 'default' as ButtonVariant,
-    onClick: () => {},
-    disabled: true,
-    iconName: 'close',
-  },
-];
-const headerSlot = () => <div data-testid="header-slot" />;
-const footerSlot = () => <div data-testid="footer-slot" />;
-describe('Modal', () => {
-  it('looks as expected without slots', () => {
-    const { asFragment } = render(
-      <Modal
-        shouldShow
-        onClose={() => {}}
-        headerTitle={HEADER_TITLE}
-        headerSubtitle={HEADER_SUBTITLE}
-        leftActions={LEFT_ACTIONS}
-        rightActions={RIGHT_ACTIONS}
-      >
-        <div data-testid="main-content" />
-      </Modal>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-    expect(screen.getByText(HEADER_TITLE)).toBeInTheDocument();
-    expect(screen.getByText(HEADER_SUBTITLE)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
-    expect(screen.getByTestId('main-content')).toBeInTheDocument();
-    const leftActions = screen.getByTestId('left-actions-container');
-    expect(within(leftActions).getByText('Cancel')).toBeInTheDocument();
-    const rightActions = screen.getByTestId('right-actions-container');
-    expect(within(rightActions).getByText('Save')).toBeInTheDocument();
-    expect(within(rightActions).getByRole('button', { name: 'Cancel' })).toBeDisabled();
-  });
-  it('looks as expected with a header slot provided', () => {
-    const { asFragment } = render(
-      <Modal
-        shouldShow
-        onClose={() => {}}
-        headerSlot={headerSlot()}
-        leftActions={LEFT_ACTIONS}
-        rightActions={RIGHT_ACTIONS}
-      >
-        <div data-testid="main-content" />
-      </Modal>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-    expect(screen.getByTestId('header-slot')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument();
-    expect(screen.getByTestId('main-content')).toBeInTheDocument();
-    const leftActions = screen.getByTestId('left-actions-container');
-    expect(within(leftActions).getByText('Cancel')).toBeInTheDocument();
-    const rightActions = screen.getByTestId('right-actions-container');
-    expect(within(rightActions).getByText('Save')).toBeInTheDocument();
-  });
-  it('looks as expected with a footer slot provided', () => {
-    const { asFragment } = render(
-      <Modal
-        shouldShow
-        onClose={() => {}}
-        headerTitle={HEADER_TITLE}
-        headerSubtitle={HEADER_SUBTITLE}
-        footerSlot={footerSlot()}
-      >
-        <div data-testid="main-content" />
-      </Modal>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-    expect(screen.getByText(HEADER_TITLE)).toBeInTheDocument();
-    expect(screen.getByText(HEADER_SUBTITLE)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
-    expect(screen.getByTestId('main-content')).toBeInTheDocument();
-    expect(screen.getByTestId('footer-slot')).toBeInTheDocument();
-  });
-  it('displays header and footer slots when provided', () => {
-    const { asFragment } = render(
-      <Modal shouldShow onClose={() => {}} headerSlot={headerSlot()} footerSlot={footerSlot()}>
-        <div data-testid="main-content" />
-      </Modal>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-    expect(screen.getByTestId('header-slot')).toBeInTheDocument();
-    expect(screen.getByTestId('main-content')).toBeInTheDocument();
-    expect(screen.getByTestId('footer-slot')).toBeInTheDocument();
-  });
-  it('displays header slot instead of title and subtitle if also provided', () => {
-    const { asFragment } = render(
-      <Modal
-        shouldShow
-        onClose={() => {}}
-        headerSlot={headerSlot()}
-        headerTitle={HEADER_TITLE}
-        headerSubtitle={HEADER_SUBTITLE}
-      >
-        <div data-testid="main-content" />
-      </Modal>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-    expect(screen.getByTestId('header-slot')).toBeInTheDocument();
-    expect(screen.queryByText(HEADER_TITLE)).not.toBeInTheDocument();
-    expect(screen.queryByText(HEADER_SUBTITLE)).not.toBeInTheDocument();
-    expect(screen.getByTestId('main-content')).toBeInTheDocument();
-  });
-  it('displays footer slot instead of if actions if provided', () => {
-    const { asFragment } = render(
-      <Modal
-        shouldShow
-        onClose={() => {}}
-        headerTitle={HEADER_TITLE}
-        headerSubtitle={HEADER_SUBTITLE}
-        footerSlot={footerSlot()}
-        leftActions={LEFT_ACTIONS}
-        rightActions={RIGHT_ACTIONS}
-      >
-        <div data-testid="main-content" />
-      </Modal>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-    expect(screen.getByTestId('main-content')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Save' })).not.toBeInTheDocument();
-    expect(screen.getByTestId('footer-slot')).toBeInTheDocument();
-  });
-  test('clicking on the close button calls the onClose prop', () => {
-    const mockOnClose = jest.fn();
-    render(
-      <Modal
-        shouldShow
-        onClose={mockOnClose}
-        headerTitle={HEADER_TITLE}
-        headerSubtitle={HEADER_SUBTITLE}
-        leftActions={LEFT_ACTIONS}
-        rightActions={RIGHT_ACTIONS}
-      >
-        <div data-testid="main-content" />
-      </Modal>,
-    );
-    userEvent.click(screen.getByRole('button', { name: 'Close' }));
-    expect(mockOnClose).toHaveBeenCalled();
-  });
-  // Conditional rendering check.
-  test('the modal does not show when shouldShow is false', () => {
-    render(
-      <Modal
-        shouldShow={false}
-        onClose={() => {}}
-        headerTitle={HEADER_TITLE}
-        headerSubtitle={HEADER_SUBTITLE}
-      >
-        <div data-testid="main-content" />
-      </Modal>,
-    );
-    expect(screen.queryByTestId('main-content')).not.toBeInTheDocument();
-  });
-});