✨(react) add Modal

Here it is! Our really wanted Modal component, based on Figma sketches.

packages/react/src/components/Modal/index.stories.tsx

@@ -0,0 +1,170 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React, { useEffect } from "react";
+import { faker } from "@faker-js/faker";
+import { Modal, ModalSize, useModal } from ":/components/Modal/index";
+import { Button } from ":/components/Button";
+import { CunninghamProvider } from ":/components/Provider";
+
+const meta: Meta<typeof Modal> = {
+  title: "Components/Modal",
+  component: Modal,
+  args: {
+    children: "Description",
+    title: "Title",
+  },
+  decorators: [
+    (Story, context) => {
+      const modal = useModal();
+
+      useEffect(() => {
+        modal.open();
+      }, []);
+
+      return (
+        <CunninghamProvider>
+          <Button onClick={() => modal.open()}>Open Modal</Button>
+          <Story args={{ ...context.args, ...modal }} />
+        </CunninghamProvider>
+      );
+    },
+  ],
+  parameters: {
+    docs: {
+      story: {
+        height: "250px",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+export const Small: Story = {
+  args: {
+    size: ModalSize.SMALL,
+  },
+};
+export const Medium: Story = {
+  args: {
+    size: ModalSize.MEDIUM,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: ModalSize.LARGE,
+  },
+};
+export const Full: Story = {
+  args: {
+    size: ModalSize.FULL,
+  },
+};
+
+export const HideCloseButton: Story = {
+  args: {
+    size: ModalSize.MEDIUM,
+    hideCloseButton: true,
+  },
+};
+export const CloseOnClickOutside: Story = {
+  args: {
+    size: ModalSize.MEDIUM,
+    hideCloseButton: true,
+    closeOnClickOutside: true,
+  },
+};
+export const PreventClose: Story = {
+  args: {
+    size: ModalSize.MEDIUM,
+    preventClose: true,
+  },
+};
+
+export const PrimaryButton: Story = {
+  args: {
+    size: ModalSize.MEDIUM,
+    rightActions: <Button color="primary">Primary</Button>,
+  },
+};
+
+export const SecondaryButton: Story = {
+  args: {
+    size: ModalSize.MEDIUM,
+    rightActions: <Button color="secondary">Secondary</Button>,
+  },
+};
+
+export const TwoButtons: Story = {
+  args: {
+    size: ModalSize.MEDIUM,
+    leftActions: <Button color="secondary">Secondary</Button>,
+    rightActions: <Button color="primary">Primary</Button>,
+  },
+};
+
+export const ThreeButtons: Story = {
+  args: {
+    size: ModalSize.MEDIUM,
+    leftActions: <Button color="tertiary">Tertiary</Button>,
+    rightActions: (
+      <>
+        <Button color="secondary">Secondary</Button>
+        <Button color="primary">Primary</Button>
+      </>
+    ),
+  },
+};
+
+export const CenterButtons: Story = {
+  args: {
+    size: ModalSize.MEDIUM,
+    actions: (
+      <>
+        <Button color="secondary">Secondary</Button>
+        <Button color="primary">Primary</Button>
+      </>
+    ),
+  },
+};
+
+export const ExampleApplication: Story = {
+  args: {
+    size: ModalSize.LARGE,
+    title: "Application successful",
+    titleIcon: <span className="material-icons clr-success-600">done</span>,
+    children: (
+      <>
+        Thank you for submitting your application! Your information has been
+        received successfully. <br />
+        <br />
+        You will receive a confirmation email shortly with the details of your
+        submission. If there are any further steps required our team will be in
+        touch.
+      </>
+    ),
+    rightActions: <Button color="primary">I understand</Button>,
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: "500px",
+      },
+    },
+  },
+};
+
+export const FullWithContent: Story = {
+  args: {
+    size: ModalSize.FULL,
+    leftActions: <Button color="tertiary">Tertiary</Button>,
+    rightActions: (
+      <>
+        <Button color="secondary">Secondary</Button>
+        <Button color="primary">Primary</Button>
+      </>
+    ),
+    children: faker.lorem.lines(400),
+  },
+};