@dtdot/lego 0.14.0

package/build/components/Menu/Menu.component.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import MenuContent from './_MenuContent.component';
+import MenuHeading from './_MenuHeading.component';
+import MenuItem from './_MenuItem.component';
+import MenuPage from './_MenuPage.component';
+import MenuPanel from './_MenuPanel.component';
+const MenuOuter = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  height: 100vh;
+  width: 250px;
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  padding: 8px 0;
+`;
+const Menu = ({ children }) => {
+    return React.createElement(MenuOuter, null, children);
+};
+Menu.Page = MenuPage;
+Menu.Heading = MenuHeading;
+Menu.Item = MenuItem;
+Menu.Content = MenuContent;
+Menu.Panel = MenuPanel;
+export default Menu;

package/build/components/Menu/Menu.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+export declare const WithPanel: () => JSX.Element;
+export declare const IndependentScrolling: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/components/Menu/Menu.stories.js

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { ControlGroup, Heading, Menu, Spacer, Text, FocusLayout, PaddedLayout, Input, Button, menuHelpers, ContentLayout, SubHeading, } from '../..';
+import { faCalendarAlt, faCogs, faHamburger } from '@fortawesome/free-solid-svg-icons';
+export const Standard = () => {
+    const [route, setRoute] = useState('/eat');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Menu, null,
+            React.createElement(Menu.Heading, null, "Something Tasty"),
+            React.createElement(Menu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }, "Eat"),
+            React.createElement(Menu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }, "Plan"),
+            React.createElement(Menu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') }, "Manage")),
+        React.createElement(Menu.Content, null,
+            React.createElement(Menu.Page, null,
+                React.createElement(FocusLayout, null,
+                    React.createElement(Heading, null, "Configuration"),
+                    React.createElement(Spacer, { size: '4x' }),
+                    React.createElement(ControlGroup, { variation: 'submission' },
+                        React.createElement(Text, null, "Enter your name here. This will be used to identify you when connecting with friends."),
+                        React.createElement(ControlGroup.Spacer, null),
+                        React.createElement(Input, { name: 'name', placeholder: 'name' }),
+                        React.createElement(ControlGroup.Spacer, null),
+                        React.createElement(Button, null, "Next")))))));
+};
+export const WithPanel = () => {
+    const [route, setRoute] = useState('/eat');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Menu, null,
+            React.createElement(Menu.Heading, null, "Something Tasty"),
+            React.createElement(Menu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }, "Eat"),
+            React.createElement(Menu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }, "Plan"),
+            React.createElement(Menu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') }, "Manage")),
+        React.createElement(Menu.Content, { panelSize: 'md' },
+            React.createElement(Menu.Panel, null,
+                React.createElement(PaddedLayout, null,
+                    React.createElement(ControlGroup, { variation: 'comfortable' },
+                        React.createElement(SubHeading, null, "You"),
+                        React.createElement(Input, { label: 'Income', name: 'name', placeholder: '30,000' }),
+                        React.createElement(SubHeading, null, "Loan"),
+                        React.createElement(Input, { label: 'Deposit', name: 'name', placeholder: '10,000' }),
+                        React.createElement(Input, { label: 'Interest Rate', name: 'name', placeholder: '4%' })))),
+            React.createElement(Menu.Page, null,
+                React.createElement(FocusLayout, null,
+                    React.createElement(Heading, null, "Configuration"),
+                    React.createElement(Spacer, { size: '4x' }),
+                    React.createElement(ControlGroup, { variation: 'submission' },
+                        React.createElement(Text, null, "Enter your name here. This will be used to identify you when connecting with friends."),
+                        React.createElement(ControlGroup.Spacer, null),
+                        React.createElement(Input, { name: 'name', placeholder: 'name' }),
+                        React.createElement(ControlGroup.Spacer, null),
+                        React.createElement(Button, null, "Next")))))));
+};
+export const IndependentScrolling = () => {
+    const [route, setRoute] = useState('/eat');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Menu, null,
+            React.createElement(Menu.Heading, null, "Something Tasty"),
+            React.createElement(Menu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }, "Eat"),
+            React.createElement(Menu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }, "Plan"),
+            React.createElement(Menu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') }, "Manage")),
+        React.createElement(Menu.Content, { panelSize: 'sm', independentScroll: true },
+            React.createElement(Menu.Panel, null,
+                React.createElement(PaddedLayout, null,
+                    React.createElement(Text, null,
+                        "Suspendisse sit amet pellentesque nisi. Quisque eget velit sit amet mauris tincidunt dictum id et ex. Integer pulvinar tellus id viverra finibus. Cras dapibus diam a ante eleifend, ac ultrices ligula vestibulum. Nulla gravida ante nec mi tristique, vel elementum arcu volutpat. Nunc in lorem id ligula sodales tincidunt non ut ipsum. Fusce risus eros, dapibus sed lacus et, faucibus auctor purus. Nulla sed rhoncus ligula, at porttitor tellus. Aliquam vitae gravida quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque quis tempus risus.",
+                        React.createElement("br", null),
+                        React.createElement("br", null),
+                        "Nullam tincidunt mauris ut lectus auctor aliquam. Aenean ornare mi et sollicitudin suscipit. Integer eu nulla at turpis molestie malesuada. Maecenas non consectetur massa. Nunc dui magna, imperdiet placerat bibendum ac, accumsan non lorem. Proin vulputate magna nisl, vel convallis elit iaculis quis. Proin maximus ante non ante vehicula sodales. Aliquam dui nisi, posuere vitae urna in, porta aliquet tellus. Curabitur commodo diam nec erat luctus, quis pharetra diam ultricies. Fusce sagittis libero lorem, convallis tristique mi egestas fermentum. Sed eu erat ut eros porttitor sollicitudin. Vivamus facilisis felis odio, ac tristique enim blandit a. Aliquam tincidunt iaculis sapien, sed vulputate mauris luctus ac. Donec aliquet ullamcorper orci quis tempor. Curabitur ac felis nulla.",
+                        React.createElement("br", null),
+                        React.createElement("br", null),
+                        "Aenean vestibulum aliquam purus ut fringilla. Maecenas aliquet a nunc eget scelerisque. Mauris varius dignissim velit, vitae faucibus massa posuere sit amet. Nulla rutrum enim tellus, eget interdum massa ultricies sed. Proin pulvinar odio non lectus scelerisque, et varius nisl blandit. Donec nisl ante, ultricies eu volutpat ut, dapibus sed ex. Aliquam risus ex, porttitor vel commodo in, convallis laoreet dolor. Proin pretium neque pretium, laoreet dolor ultrices, vulputate sapien. Aenean rutrum lorem non mauris egestas accumsan."))),
+            React.createElement(Menu.Page, null,
+                React.createElement(ContentLayout, null,
+                    React.createElement(ContentLayout.Content, { size: 'sm' },
+                        React.createElement(Text, null,
+                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh lorem, mattis sed dolor ac, malesuada maximus lorem. Proin hendrerit maximus ipsum, eu laoreet erat congue a. Duis pellentesque leo sed nisi mattis, a sollicitudin sapien ornare. Mauris efficitur nulla metus. Etiam felis velit, mollis eget fringilla nec, venenatis non libero. Suspendisse at arcu rhoncus, tristique ex nec, blandit enim. Vivamus rutrum, felis faucibus vulputate vulputate, lacus quam sollicitudin eros, non consequat velit neque in lorem. Ut hendrerit lectus vel quam placerat tincidunt. Ut auctor tortor elit, ac aliquam orci pellentesque efficitur. Morbi eget sollicitudin est. Donec ullamcorper velit ipsum, non dapibus nisi vulputate ac. Proin dapibus, mi ac scelerisque sollicitudin, turpis augue hendrerit metus, eget dignissim justo lectus id urna. Vivamus massa ipsum, posuere eu risus non, ultrices convallis tellus. Mauris et egestas erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec sagittis porttitor nisi a gravida.",
+                            React.createElement("br", null),
+                            React.createElement("br", null),
+                            "Donec mollis nisl quis scelerisque suscipit. Suspendisse eget risus ornare lorem convallis gravida sit amet id nisi. Duis venenatis tortor vitae facilisis auctor. Nulla in pretium odio, et aliquet dui. Sed non venenatis ex. Praesent felis sem, tincidunt et ligula sit amet, vulputate tincidunt tellus. Nam quis eros quis justo aliquet tempus. Nulla imperdiet bibendum velit, eu elementum felis cursus ut. Curabitur eget dui et urna vehicula porttitor sit amet vitae risus. Nulla vitae lacus id quam gravida volutpat at eu elit. Quisque efficitur hendrerit purus, sed viverra elit cursus non. Nunc at scelerisque eros, ut posuere erat. Suspendisse egestas volutpat orci, id ornare nisi aliquet vel.",
+                            React.createElement("br", null),
+                            React.createElement("br", null),
+                            "Donec ultrices lectus lectus, eget mollis nisi venenatis vitae. Morbi cursus quis sapien ut ultrices. Quisque placerat, massa ut accumsan tempor, purus leo sollicitudin leo, eu auctor mauris quam nec nisl. Donec eu dignissim erat. Aenean bibendum blandit leo, sed posuere risus euismod eu. Ut dignissim nisl ex, eget condimentum turpis auctor in. Fusce tristique neque accumsan diam suscipit, vel blandit lorem sodales. Etiam ut tincidunt nisi, ut aliquet felis. Suspendisse vestibulum, velit imperdiet tempor varius, lectus massa consectetur lacus, sagittis scelerisque ante enim non metus. Donec nunc nisl, fermentum scelerisque ornare nec, congue id velit. Praesent vehicula dolor nisl, vel sollicitudin nisl ullamcorper sit amet. Maecenas nec ante eu dui interdum mollis. Maecenas urna enim, maximus et ligula at, aliquet varius arcu. Ut justo arcu, commodo iaculis est ut, ornare posuere arcu.",
+                            React.createElement("br", null),
+                            React.createElement("br", null),
+                            "Curabitur at nunc et erat placerat laoreet aliquet in eros. Proin sagittis dolor libero, ut ultrices elit euismod vitae. Phasellus non tellus tellus. Morbi sit amet auctor lacus. Maecenas commodo sagittis ex nec eleifend. Mauris sit amet augue a sapien vulputate rhoncus. Donec dignissim finibus erat, sit amet suscipit arcu blandit non. Sed pulvinar tincidunt volutpat. Proin pretium leo non enim pretium, vitae porttitor felis pellentesque. Nam tincidunt euismod arcu quis aliquam. Maecenas in lorem et tortor sagittis efficitur. Vestibulum est odio, tristique eget massa vitae, porta tincidunt magna. Curabitur tempus velit ut auctor auctor. Integer ultricies lorem vitae nibh convallis, ac placerat tellus rutrum.",
+                            React.createElement("br", null),
+                            React.createElement("br", null),
+                            "Curabitur ac lorem vitae lorem convallis tincidunt. Aenean luctus, dolor et blandit consectetur, odio risus lacinia ante, non auctor libero turpis accumsan metus. Donec accumsan vitae lacus a varius. Aliquam ac ultricies massa. Praesent vel lacus tempus, interdum nisi eget, varius justo. Pellentesque nec mauris ac dolor fringilla pulvinar. Sed sollicitudin nec lectus nec condimentum. Maecenas molestie blandit ipsum ut finibus. Cras eu nibh congue, porta metus vel, pellentesque tellus.",
+                            React.createElement("br", null),
+                            React.createElement("br", null),
+                            "Morbi feugiat, arcu vel ultricies ultrices, justo odio faucibus purus, vel pharetra augue metus nec purus. Suspendisse sit amet leo ipsum. Vivamus ut velit ut ante consectetur vehicula ut at mi. Nam et ex at nisl ullamcorper maximus nec vel est. Fusce ut est neque. Vivamus dictum, ipsum porta varius tempus, arcu diam sollicitudin risus, in vulputate est orci sit amet ligula. Donec a est vel lacus consectetur dictum.")))))));
+};
+export default {
+    title: 'Components/Menu',
+    component: Menu,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};

package/build/components/Menu/_MenuContent.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare type PanelSize = 'sm' | 'md';
+export declare const getMaxSize: (size: PanelSize) => "tablet" | "desktop";
+export interface MenuContentProps {
+    children: React.ReactNode;
+    panelSize?: PanelSize;
+    independentScroll?: boolean;
+}
+declare const MenuContent: ({ panelSize, independentScroll, children }: MenuContentProps) => JSX.Element;
+export default MenuContent;

package/build/components/Menu/_MenuContent.component.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import responsive from '../../responsive/responsive';
+import MenuContentContext from './_MenuContent.context';
+export const getMaxSize = (size) => {
+    switch (size) {
+        case 'sm':
+            return 'tablet';
+        case 'md':
+        default:
+            return 'desktop';
+    }
+};
+const MenuContentOuter = styled.div `
+  display: flex;
+
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  margin-left: 250px;
+
+  min-height: 100vh;
+  padding: 8px;
+
+  ${(props) => responsive.useStylesFor(getMaxSize(props.panelSize)).andSmaller(`
+    flex-direction: column;
+  `)}
+`;
+const MenuContent = ({ panelSize = 'md', independentScroll = false, children }) => {
+    return (React.createElement(MenuContentContext.Provider, { value: { panelSize, independentScroll } },
+        React.createElement(MenuContentOuter, { panelSize: panelSize }, children)));
+};
+export default MenuContent;

package/build/components/Menu/_MenuContent.context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface MenuContentContextProps {
+    panelSize: 'sm' | 'md';
+    independentScroll: boolean;
+}
+declare const MenuContentContext: import("react").Context<MenuContentContextProps>;
+export default MenuContentContext;

package/build/components/Menu/_MenuContent.context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const MenuContentContext = createContext({
+    panelSize: 'md',
+    independentScroll: false,
+});
+export default MenuContentContext;

package/build/components/Menu/_MenuHeading.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface MenuHeadingProps {
+    children: React.ReactNode;
+}
+declare const MenuHeading: ({ children }: MenuHeadingProps) => JSX.Element;
+export default MenuHeading;

package/build/components/Menu/_MenuHeading.component.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+const MenuHeadingDiv = styled.div `
+  padding-right: 32px;
+  margin-bottom: 16px;
+
+  width: 100%;
+  text-align: center;
+`;
+const MenuHeadingInner = styled.div `
+  background-color: ${(props) => props.theme.colours.primary.main};
+  box-shadow: ${(props) => props.theme.shadows.medium};
+  border-radius: 0 2px 2px 0;
+  height: 40px;
+
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+
+  font-family: ${(props) => props.theme.fonts.heading.family};
+  font-weight: ${(props) => props.theme.fonts.heading.weight};
+  color: ${(props) => props.theme.colours.primary.contrastText};
+  font-size: 20px;
+`;
+const MenuHeading = ({ children }) => (React.createElement(MenuHeadingDiv, null,
+    React.createElement(MenuHeadingInner, null, children)));
+export default MenuHeading;

package/build/components/Menu/_MenuItem.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+export interface MenuItemProps {
+    children: React.ReactNode;
+    icon?: IconProp;
+    active?: boolean;
+    onClick?: () => void;
+}
+declare const MenuItem: ({ children, icon, active, onClick }: MenuItemProps) => JSX.Element;
+export default MenuItem;

package/build/components/Menu/_MenuItem.component.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+const MenuItemOuter = styled.div `
+  display: flex;
+`;
+const MenuItemDiv = styled.div `
+  margin: 2px;
+  padding: 8px 8px 8px 16px;
+  flex-grow: 1;
+
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  color: ${(props) => props.theme.colours.secondaryFont};
+
+  cursor: pointer;
+  border-radius: 0 2px 2px 0;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colours.background};
+  }
+
+  ${(props) => props.active &&
+    `
+    color: ${props.theme.colours.defaultFont};
+  `}
+`;
+const MenuIconContainer = styled.div `
+  display: inline-block;
+  margin-right: 16px;
+  width: 24px;
+  text-align: center;
+`;
+const MenuActiveBar = styled.div `
+  height: 38px;
+  width: 4px;
+  background-color: ${(props) => props.theme.colours.defaultFont};
+`;
+const MenuActivePlaceholder = styled.div `
+  height: 100%;
+  width: 4px;
+`;
+const MenuItem = ({ children, icon, active, onClick }) => (React.createElement(MenuItemOuter, { onClick: onClick },
+    active ? React.createElement(MenuActiveBar, null) : React.createElement(MenuActivePlaceholder, null),
+    React.createElement(MenuItemDiv, { active: active },
+        icon && (React.createElement(MenuIconContainer, null,
+            React.createElement(FontAwesomeIcon, { icon: icon }))),
+        children)));
+export default MenuItem;

package/build/components/Menu/_MenuPage.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface MenuPageProps {
+    children: React.ReactNode;
+}
+declare const MenuPage: ({ children }: MenuPageProps) => JSX.Element;
+export default MenuPage;

package/build/components/Menu/_MenuPage.component.js

@@ -0,0 +1,39 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import responsive from '../../responsive/responsive';
+import { getMaxSize } from './_MenuContent.component';
+import MenuContentContext from './_MenuContent.context';
+const MenuPageInner = styled.div `
+  background-color: ${(props) => props.theme.colours.background};
+  border-radius: 2px;
+  min-height: calc(100vh - 16px);
+  flex-grow: 1;
+
+  ${(props) => responsive.useStylesFor(getMaxSize(props.panelSize)).andSmaller(`
+    min-height: unset;
+  `)}
+
+  ${(props) => props.independentScroll &&
+    `
+    max-height: calc(100vh - 16px);
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: ${props.theme.colours.secondaryFont};
+      outline: 1px solid slategrey;
+    }
+
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    }
+  `}
+`;
+const MenuPage = ({ children }) => {
+    const { panelSize, independentScroll } = useContext(MenuContentContext);
+    return (React.createElement(MenuPageInner, { panelSize: panelSize, independentScroll: independentScroll }, children));
+};
+export default MenuPage;

package/build/components/Menu/_MenuPanel.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface MenuPanelProps {
+    children: React.ReactNode;
+}
+declare const MenuPanel: ({ children }: MenuPanelProps) => JSX.Element;
+export default MenuPanel;

package/build/components/Menu/_MenuPanel.component.js

@@ -0,0 +1,62 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import responsive from '../../responsive/responsive';
+import { getMaxSize } from './_MenuContent.component';
+import MenuContentContext from './_MenuContent.context';
+const MenuPanelDiv = styled.div `
+  background-color: ${(props) => props.theme.colours.background};
+  border-radius: 2px;
+  min-height: calc(100vh - 16px);
+  margin-right: 8px;
+
+  ${(props) => {
+    switch (props.panelSize) {
+        case 'sm':
+            return `
+          // max-width: 550px;
+          // min-width: 240px;
+          width: 380px;
+        `;
+        case 'md':
+        default:
+            return `
+          // max-width: 700px;
+          // min-width: 450px;
+          width: 560px;
+        `;
+    }
+}}
+
+  ${(props) => responsive.useStylesFor(getMaxSize(props.panelSize)).andSmaller(`
+    max-width: unset;
+    min-width: unset;
+    min-height: unset;
+    width: 100%;
+    margin-right: 0;
+    margin-bottom: 8px;
+  `)}
+
+  ${(props) => props.independentScroll &&
+    `
+    max-height: calc(100vh - 16px);
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: ${props.theme.colours.secondaryFont};
+      outline: 1px solid slategrey;
+    }
+
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    }
+  `}
+`;
+const MenuPanel = ({ children }) => {
+    const { panelSize, independentScroll } = useContext(MenuContentContext);
+    return (React.createElement(MenuPanelDiv, { panelSize: panelSize, independentScroll: independentScroll }, children));
+};
+export default MenuPanel;

package/build/components/Menu/menu.helpers.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    isActiveItem: (itemRoutes: RegExp[], activeRoute: string) => boolean;
+};
+export default _default;

package/build/components/Menu/menu.helpers.js

@@ -0,0 +1,10 @@
+export default {
+    isActiveItem: (itemRoutes, activeRoute) => {
+        for (let i = 0; i < itemRoutes.length; i++) {
+            if (itemRoutes[i].test(activeRoute)) {
+                return true;
+            }
+        }
+        return false;
+    },
+};

package/build/components/Modal/Modal.component.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare type ModalSize = 'sm' | 'md' | 'lg';
+export interface ModalProps {
+    children: React.ReactNode;
+    size?: ModalSize;
+    loading?: boolean;
+    onClose: () => void;
+}
+declare const Modal: {
+    ({ children, size, loading, onClose }: ModalProps): React.ReactPortal;
+    Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+    Header: ({ header, subHeader }: import("./_ModalHeader.component").ModalHeaderProps) => JSX.Element;
+};
+export default Modal;

package/build/components/Modal/Modal.component.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Loader } from '../..';
+import responsive from '../../responsive/responsive';
+import ModalContext from './_Modal.context';
+import ModalBody from './_ModalBody.component';
+import ModalHeader from './_ModalHeader.component';
+import zIndexConstants from '../../constants/zIndex.constants';
+const getResponsiveSize = (size) => {
+    switch (size) {
+        case 'sm':
+            return 'mobile';
+        case 'lg':
+            return 'desktop';
+        case 'md':
+        default:
+            return 'tablet';
+    }
+};
+const animationDistance = 30;
+const bottomPadding = 50;
+const loadingHeight = 64;
+const Overlay = styled(motion.div) `
+  position: fixed;
+  top: -${animationDistance}px;
+  left: 0;
+  width: 100%;
+  height: calc(100% + ${animationDistance}px + ${bottomPadding}px);
+
+  padding-top: ${animationDistance}px;
+  padding-bottom: ${bottomPadding}px;
+
+  background-color: #00000050;
+  z-index: ${zIndexConstants.modalOverlay};
+`;
+const ScrollContainer = styled.div `
+  overflow: auto;
+  height: 100%;
+`;
+const ModalWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+
+  z-index: ${zIndexConstants.modalContent};
+
+  ${(props) => responsive.useStylesFor(getResponsiveSize(props.size)).andSmaller(`
+    align-items: flex-end;
+    min-height: 100%;
+  `)}
+`;
+const ModalOuter = styled(motion.div) `
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  border-radius: 4px;
+  margin: 16px 0 128px 0;
+
+  color: ${(props) => props.theme.colours.defaultFont};
+
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+
+  width: ${(props) => responsive.getWidthFor(getResponsiveSize(props.size))};
+  overflow: hidden;
+
+  ${(props) => responsive.useStylesFor(getResponsiveSize(props.size)).andSmaller(`
+    width: 100%;
+    margin-bottom: 0;
+  `)}
+`;
+const SpinnerContainer = styled.div `
+  display: flex;
+  height: ${loadingHeight}px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+const Modal = ({ children, size, loading, onClose }) => {
+    const handleModalClick = (event) => {
+        event.modalClicked = true;
+    };
+    const handleOverlayClick = (event) => {
+        if (!event.modalClicked) {
+            onClose();
+        }
+    };
+    return ReactDOM.createPortal(React.createElement(AnimatePresence, null,
+        React.createElement(Overlay, { key: 'modal', initial: { opacity: 0, y: animationDistance }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: animationDistance }, transition: { type: 'spring', bounce: 0, duration: 0.6 }, onClick: handleOverlayClick },
+            React.createElement(ScrollContainer, null,
+                React.createElement(ModalContext.Provider, { value: { onClose } },
+                    React.createElement(ModalWrapper, { size: size || 'md' },
+                        React.createElement(ModalOuter, { transition: { type: 'spring', bounce: 0, duration: 0.6 }, initial: { height: loading ? loadingHeight : 'auto' }, animate: { height: loading ? loadingHeight : 'auto' }, size: size || 'md', onClick: handleModalClick },
+                            !loading && children,
+                            loading && (React.createElement(SpinnerContainer, null,
+                                React.createElement(Loader, null))))))))), document.body);
+};
+Modal.Body = ModalBody;
+Modal.Header = ModalHeader;
+export default Modal;

package/build/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+export declare const LotsOfContent: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/components/Modal/Modal.stories.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Modal, Button } from '../..';
+export const Standard = () => {
+    const [open, setOpen] = useState(true);
+    const [loading, setLoading] = useState(false);
+    const handleOpen = () => {
+        setOpen(true);
+        setLoading(true);
+        setTimeout(() => setLoading(false), 2000);
+    };
+    const handleClose = () => {
+        setOpen(false);
+        setLoading(false);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: handleOpen }, "Open"),
+        open && (React.createElement(Modal, { size: 'sm', onClose: handleClose, loading: loading },
+            React.createElement(Modal.Header, { header: 'Small modal', subHeader: "This one shouldn't scroll" }),
+            React.createElement(Modal.Body, null,
+                React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget efficitur libero. In eu gravida turpis. Nunc dictum pretium felis a vulputate. Aliquam bibendum ex sed sapien rutrum accumsan. Curabitur sed mi arcu."),
+                React.createElement("br", null))))));
+};
+export const LotsOfContent = () => {
+    const [open, setOpen] = useState(true);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setOpen(true) }, "Open"),
+        open && (React.createElement(Modal, { onClose: () => setOpen(false) },
+            React.createElement(Modal.Header, { header: 'Larger modal', subHeader: 'This one should scroll' }),
+            React.createElement(Modal.Body, null,
+                React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget efficitur libero. In eu gravida turpis. Nunc dictum pretium felis a vulputate. Aliquam bibendum ex sed sapien rutrum accumsan. Curabitur sed mi arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut cursus urna. Morbi vestibulum tortor porta tortor efficitur, et semper tortor viverra. Suspendisse ac cursus lacus. Vivamus blandit, elit eu pretium rutrum, tellus orci tristique ante, vel condimentum quam nisl eget quam. Donec convallis aliquet dictum. Aliquam in sapien quis quam consequat interdum sed quis est. Phasellus dictum posuere mauris in tempor. Nulla scelerisque, risus ut dignissim gravida, ex urna vestibulum turpis, vel interdum velit nibh nec quam. Nulla non commodo odio. Proin eu justo risus."),
+                React.createElement("br", null),
+                React.createElement("p", null, "In volutpat nulla eros, sed vulputate urna suscipit vestibulum. Suspendisse posuere, mauris ut pellentesque aliquam, sapien leo molestie arcu, eu dapibus felis eros varius lacus. Quisque nec convallis neque. Mauris dignissim ultricies nunc, vel interdum ante elementum nec. Integer faucibus laoreet nisi. Etiam tincidunt eleifend velit, nec tempor tortor rhoncus vel. Aliquam interdum, eros euismod tincidunt tristique, lacus tellus sagittis mi, a ultricies ligula tortor quis est. Nam volutpat nisl vitae vulputate tristique. Proin consequat lacus facilisis, pretium turpis quis, faucibus nisl. Vivamus eu mauris pellentesque, pretium eros nec, blandit mauris. Nulla maximus risus a velit dapibus, quis laoreet nisl dapibus. Nullam a varius nulla."),
+                React.createElement("br", null),
+                React.createElement("p", null, "Aliquam vitae sollicitudin sapien, at commodo est. In hac habitasse platea dictumst. Etiam erat metus, gravida ut posuere ac, mollis quis nisi. Curabitur arcu lorem, convallis nec facilisis non, ultricies vel lectus. Suspendisse accumsan metus eu lorem dictum vestibulum sed sed lorem. Sed facilisis ultricies enim consectetur sagittis. Phasellus blandit urna vitae varius tempus. Ut molestie porta nisl id egestas. Ut bibendum ante vitae quam viverra, ut dapibus felis convallis. Fusce quam nisl, pellentesque ac turpis sed, scelerisque congue velit. Morbi vehicula ac neque et rutrum. Vivamus leo velit, accumsan at tristique a, ultricies vitae tortor. Pellentesque gravida pharetra urna. Maecenas aliquet elementum justo, id tincidunt velit."),
+                React.createElement("br", null),
+                React.createElement("p", null, "Proin vitae nulla porta, ullamcorper nisi at, convallis ante. Maecenas facilisis augue vel ultricies laoreet. Vivamus blandit enim ac felis consectetur, quis malesuada sem laoreet. Praesent vehicula felis tellus, at luctus ipsum suscipit at. Sed lorem felis, euismod sit amet cursus et, porttitor et mauris. Proin cursus arcu lacus, non condimentum mi consectetur eu. Suspendisse quis venenatis felis, eu facilisis dolor. Morbi laoreet egestas arcu, vel tempor nisi vehicula at. Nullam ut ligula posuere, vestibulum mi at, mollis felis. Nunc ut massa elit. Suspendisse id nunc at ipsum eleifend finibus imperdiet et lectus. Curabitur elementum, nulla sit amet interdum mollis, metus elit vulputate neque, mattis lacinia lorem purus ut odio. Morbi interdum neque sed libero molestie consequat. Sed condimentum orci facilisis tortor mollis ultrices."),
+                React.createElement("br", null),
+                React.createElement("p", null, "Nulla diam lorem, placerat non dui et, viverra ultrices augue. Phasellus tristique porta odio at scelerisque. Proin facilisis elit ut est faucibus rhoncus. Nunc ac auctor ante. Suspendisse consequat nulla sit amet interdum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vel dapibus sem. Quisque feugiat libero id maximus blandit. Duis nec urna aliquet, dapibus nibh at, scelerisque enim. Donec venenatis est dui, sit amet sollicitudin mi tempus ac. Aenean quis nunc a risus congue malesuada at vulputate metus. Integer sed efficitur libero. Aenean sit amet consequat arcu. Aliquam rhoncus porttitor vestibulum."),
+                React.createElement("br", null),
+                React.createElement("p", null, "Aliquam vitae sollicitudin sapien, at commodo est. In hac habitasse platea dictumst. Etiam erat metus, gravida ut posuere ac, mollis quis nisi. Curabitur arcu lorem, convallis nec facilisis non, ultricies vel lectus. Suspendisse accumsan metus eu lorem dictum vestibulum sed sed lorem. Sed facilisis ultricies enim consectetur sagittis. Phasellus blandit urna vitae varius tempus. Ut molestie porta nisl id egestas. Ut bibendum ante vitae quam viverra, ut dapibus felis convallis. Fusce quam nisl, pellentesque ac turpis sed, scelerisque congue velit. Morbi vehicula ac neque et rutrum. Vivamus leo velit, accumsan at tristique a, ultricies vitae tortor. Pellentesque gravida pharetra urna. Maecenas aliquet elementum justo, id tincidunt velit."),
+                React.createElement("br", null),
+                React.createElement("p", null, "Proin vitae nulla porta, ullamcorper nisi at, convallis ante. Maecenas facilisis augue vel ultricies laoreet. Vivamus blandit enim ac felis consectetur, quis malesuada sem laoreet. Praesent vehicula felis tellus, at luctus ipsum suscipit at. Sed lorem felis, euismod sit amet cursus et, porttitor et mauris. Proin cursus arcu lacus, non condimentum mi consectetur eu. Suspendisse quis venenatis felis, eu facilisis dolor. Morbi laoreet egestas arcu, vel tempor nisi vehicula at. Nullam ut ligula posuere, vestibulum mi at, mollis felis. Nunc ut massa elit. Suspendisse id nunc at ipsum eleifend finibus imperdiet et lectus. Curabitur elementum, nulla sit amet interdum mollis, metus elit vulputate neque, mattis lacinia lorem purus ut odio. Morbi interdum neque sed libero molestie consequat. Sed condimentum orci facilisis tortor mollis ultrices."),
+                React.createElement("br", null),
+                React.createElement("p", null, "Nulla diam lorem, placerat non dui et, viverra ultrices augue. Phasellus tristique porta odio at scelerisque. Proin facilisis elit ut est faucibus rhoncus. Nunc ac auctor ante. Suspendisse consequat nulla sit amet interdum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vel dapibus sem. Quisque feugiat libero id maximus blandit. Duis nec urna aliquet, dapibus nibh at, scelerisque enim. Donec venenatis est dui, sit amet sollicitudin mi tempus ac. Aenean quis nunc a risus congue malesuada at vulputate metus. Integer sed efficitur libero. Aenean sit amet consequat arcu. Aliquam rhoncus porttitor vestibulum."),
+                React.createElement("br", null),
+                React.createElement("p", null, "Aliquam vitae sollicitudin sapien, at commodo est. In hac habitasse platea dictumst. Etiam erat metus, gravida ut posuere ac, mollis quis nisi. Curabitur arcu lorem, convallis nec facilisis non, ultricies vel lectus. Suspendisse accumsan metus eu lorem dictum vestibulum sed sed lorem. Sed facilisis ultricies enim consectetur sagittis. Phasellus blandit urna vitae varius tempus. Ut molestie porta nisl id egestas. Ut bibendum ante vitae quam viverra, ut dapibus felis convallis. Fusce quam nisl, pellentesque ac turpis sed, scelerisque congue velit. Morbi vehicula ac neque et rutrum. Vivamus leo velit, accumsan at tristique a, ultricies vitae tortor. Pellentesque gravida pharetra urna. Maecenas aliquet elementum justo, id tincidunt velit."),
+                React.createElement("br", null),
+                React.createElement("p", null, "Proin vitae nulla porta, ullamcorper nisi at, convallis ante. Maecenas facilisis augue vel ultricies laoreet. Vivamus blandit enim ac felis consectetur, quis malesuada sem laoreet. Praesent vehicula felis tellus, at luctus ipsum suscipit at. Sed lorem felis, euismod sit amet cursus et, porttitor et mauris. Proin cursus arcu lacus, non condimentum mi consectetur eu. Suspendisse quis venenatis felis, eu facilisis dolor. Morbi laoreet egestas arcu, vel tempor nisi vehicula at. Nullam ut ligula posuere, vestibulum mi at, mollis felis. Nunc ut massa elit. Suspendisse id nunc at ipsum eleifend finibus imperdiet et lectus. Curabitur elementum, nulla sit amet interdum mollis, metus elit vulputate neque, mattis lacinia lorem purus ut odio. Morbi interdum neque sed libero molestie consequat. Sed condimentum orci facilisis tortor mollis ultrices."),
+                React.createElement("br", null),
+                React.createElement("p", null, "Nulla diam lorem, placerat non dui et, viverra ultrices augue. Phasellus tristique porta odio at scelerisque. Proin facilisis elit ut est faucibus rhoncus. Nunc ac auctor ante. Suspendisse consequat nulla sit amet interdum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vel dapibus sem. Quisque feugiat libero id maximus blandit. Duis nec urna aliquet, dapibus nibh at, scelerisque enim. Donec venenatis est dui, sit amet sollicitudin mi tempus ac. Aenean quis nunc a risus congue malesuada at vulputate metus. Integer sed efficitur libero. Aenean sit amet consequat arcu. Aliquam rhoncus porttitor vestibulum."))))));
+};
+export default {
+    title: 'Components/Modal',
+    component: Modal,
+};

package/build/components/Modal/_Modal.context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface ModalContextProps {
+    onClose: () => void;
+}
+declare const ModalContext: import("react").Context<ModalContextProps>;
+export default ModalContext;

package/build/components/Modal/_Modal.context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const ModalContext = createContext({
+    // eslint-disable-next-line
+    onClose: () => { },
+});
+export default ModalContext;