@veeqo/ui 0.0.1 → 0.0.3

package/src/components/LoginWithAmazonButton/LoginWithAmazonButton.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LoginWithAmazonButton } from '.';
+
+const meta = {
+  title: 'Components/Common/LogInWithAmazon',
+  component: LoginWithAmazonButton,
+  tags: ['autodocs'],
+} satisfies Meta<typeof LoginWithAmazonButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/LoginWithAmazonButton/LoginWithAmazonButton.test.tsx

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { LoginWithAmazonButton } from '.';
+import { buttonDescription } from './LoginWithAmazonButton';
+
+describe('LogInWithAmazon', () => {
+  beforeEach(() => {
+    render(<LoginWithAmazonButton />);
+  });
+
+  it('has a proper alt text', () => {
+    const button = screen.getByRole('button');
+    const img = screen.getByRole('img');
+
+    expect(button).toHaveAttribute('aria-label', buttonDescription);
+    expect(img).toHaveAttribute('alt', buttonDescription);
+  });
+});

package/src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { LoginButton } from './styled';
+
+const buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';
+const buttonPressedImg =
+  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';
+
+export const buttonDescription = 'Log in with Amazon';
+
+/**
+ * Image used in this button is to comply with official
+ * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).
+ */
+export const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (
+  props,
+) => {
+  const [image, setImage] = useState(buttonImg);
+
+  const handleMouseDown = () => {
+    setImage(buttonPressedImg);
+  };
+
+  const handleMouseUp = () => {
+    setImage(buttonImg);
+  };
+
+  return (
+    <LoginButton
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      aria-label={buttonDescription}
+      {...props}
+    >
+      {/* alt attr for better accessibility if image is failed to load */}
+      <img src={image} alt={buttonDescription} />
+    </LoginButton>
+  );
+};

package/src/components/LoginWithAmazonButton/index.tsx

@@ -0,0 +1 @@
+export { LoginWithAmazonButton } from './LoginWithAmazonButton';

package/src/components/LoginWithAmazonButton/styled.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const LoginButton = styled.button`
+  /* Remove default button style */
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+
+  img {
+    width: 156px;
+    height: 32px;
+  }
+`;

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

@@ -0,0 +1,455 @@
+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>
+  ),
+};