@dtdot/lego 0.14.0 → 0.14.7

package/build/components/ActionMessage/ActionMessage.component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Button, Spacer, SubHeading, Text } from '../..';
+import { Button, Heading, Spacer, Text } from '../..';
 const ActionMessageContainer = styled.div `
   width: 100%;
   padding: 64px 0;
@@ -16,7 +16,7 @@ const ActionMessageContainer = styled.div `
 const ActionMessage = ({ header, info, action, onAction }) => {
     return (React.createElement(ActionMessageContainer, null,
         React.createElement("div", null,
-            React.createElement(SubHeading, null, header)),
+            React.createElement(Heading.SubHeading, null, header)),
         info && (React.createElement(React.Fragment, null,
             React.createElement(Spacer, { size: '1x' }),
             React.createElement(Text, null, info))),

package/build/components/Card/Card.component.js

@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion';
 import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import responsive from '../../responsive/responsive';
 import CardContext from './Card.context';
 import { CardActions, CardAction } from './_CardActions.component';
@@ -10,13 +10,8 @@ import CardMedia from './_CardMedia.component';
 import CardSpacer from './_CardSpacer.component';
 import CardSubContent from './_CardSubContent.component';
 const CardActionsContainer = styled.div `
-  /* width: 100%; */
-  /* height: 32px; */
-
   position: absolute;
-  /* top: -32px; */
   top: -32px;
-  /* z-index: 0; */
 `;
 const CardInner = styled.div `
   position: relative;
@@ -35,7 +30,7 @@ const CardOuter = styled(motion.div) `
         `;
         case 'xs':
             return `
-          width: 240px;
+          width: 360px;
           ${responsive.useStylesFor('mobile').andSmaller(`
             width: 100%;
           `)}
@@ -65,6 +60,10 @@ const CardOuter = styled(motion.div) `
     }
 }}
 
+  &:hover {
+    z-index: 1;
+  }
+
   position: relative;
   cursor: ${(props) => (props.usePointer ? 'pointer' : 'default')};
   padding: ${(props) => (props.padded ? '16px' : 0)};
@@ -73,6 +72,8 @@ const Card = ({ children, padded, size = 'sm', onClick }) => {
     const actionsRef = useRef(null);
     const [htmlActionsRef, setHtmlActionsRef] = useState();
     const [showActions, setShowActions] = useState(false);
+    const [hasActions, setHasActions] = useState(false);
+    const theme = useTheme();
     useEffect(() => {
         if (actionsRef.current) {
             setHtmlActionsRef(actionsRef.current);
@@ -86,8 +87,13 @@ const Card = ({ children, padded, size = 'sm', onClick }) => {
             onClick();
         }
     };
-    return (React.createElement(CardContext.Provider, { value: { size, actionsRef: htmlActionsRef, showActions } },
-        React.createElement(CardOuter, { onHoverStart: () => setShowActions(true), onHoverEnd: () => setShowActions(false), size: size, padded: padded, onClick: handleClick, usePointer: !!onClick },
+    return (React.createElement(CardContext.Provider, { value: { size, actionsRef: htmlActionsRef, showActions, setHasActions } },
+        React.createElement(CardOuter, { onHoverStart: () => setShowActions(true), onHoverEnd: () => setShowActions(false), key: 'actions-container', transition: { type: 'spring', bounce: 0, duration: 0.6 }, whileHover: hasActions
+                ? {
+                    scale: 1.005,
+                    boxShadow: theme.shadows.xlarge,
+                }
+                : {}, size: size, padded: padded, onClick: handleClick, usePointer: !!onClick },
             React.createElement(CardActionsContainer, { ref: actionsRef }),
             React.createElement(CardInner, null, children))));
 };

package/build/components/Card/Card.context.d.ts

@@ -4,6 +4,7 @@ interface CardContextProps {
     size: CardSize;
     actionsRef?: HTMLDivElement;
     showActions: boolean;
+    setHasActions: (hasActions: boolean) => void;
 }
 declare const CardContext: import("react").Context<CardContextProps>;
 export default CardContext;

package/build/components/Card/Card.context.js

@@ -3,5 +3,7 @@ const CardContext = createContext({
     size: 'lg',
     actionsRef: undefined,
     showActions: false,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setHasActions: () => { },
 });
 export default CardContext;

package/build/components/Card/Card.stories.js

@@ -15,6 +15,10 @@ export const Standard = () => (React.createElement(CardGroup, null,
         React.createElement(Card.Content, null,
             React.createElement(LiveInput, { name: 'test', placeholder: 'Name of characters' })))));
 export const Sizes = () => (React.createElement(CardGroup, null,
+    React.createElement(Card, { size: 'xs' },
+        React.createElement(Card.Media, null,
+            React.createElement("img", { src: 'https://www.jotform.com/blog/wp-content/uploads/2012/07/mario-luigi-yoschi-figures-163036.jpeg' })),
+        React.createElement(Card.Content, null, "An extra small card!")),
     React.createElement(Card, { size: 'sm' },
         React.createElement(Card.Media, null,
             React.createElement("img", { src: 'https://www.jotform.com/blog/wp-content/uploads/2012/07/mario-luigi-yoschi-figures-163036.jpeg' })),
@@ -53,11 +57,27 @@ export const WithActions = () => (React.createElement(React.Fragment, null,
                     React.createElement(FontAwesomeIcon, { icon: faPen })),
                 React.createElement(Card.Action, { onClick: () => console.log('Delete Clicked') },
                     React.createElement(FontAwesomeIcon, { icon: faTrash }))),
-            React.createElement(Card.Content, null, "Some content"),
-            React.createElement(Card.Spacer, null),
-            React.createElement(Card.Content, null, "Some more content..."),
-            React.createElement(Card.Spacer, null),
-            React.createElement(Card.SubContent, null, "Some sub content...")))));
+            React.createElement(Card.Header, { heading: 'Mario & Luigi', subHeading: 'mario@gmail.com', meta: React.createElement(Badge, { variant: 'success' }, "approved") }),
+            React.createElement(Card.Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
+            React.createElement(Card.Content, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")),
+        React.createElement(Card, { size: 'sm', onClick: () => console.log('Card Clicked') },
+            React.createElement(Card.Actions, null,
+                React.createElement(Card.Action, { onClick: () => console.log('Edit Clicked') },
+                    React.createElement(FontAwesomeIcon, { icon: faPen })),
+                React.createElement(Card.Action, { onClick: () => console.log('Delete Clicked') },
+                    React.createElement(FontAwesomeIcon, { icon: faTrash }))),
+            React.createElement(Card.Header, { heading: 'Mario & Luigi', subHeading: 'mario@gmail.com', meta: React.createElement(Badge, { variant: 'success' }, "approved") }),
+            React.createElement(Card.Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
+            React.createElement(Card.Content, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")),
+        React.createElement(Card, { size: 'sm', onClick: () => console.log('Card Clicked') },
+            React.createElement(Card.Actions, null,
+                React.createElement(Card.Action, { onClick: () => console.log('Edit Clicked') },
+                    React.createElement(FontAwesomeIcon, { icon: faPen })),
+                React.createElement(Card.Action, { onClick: () => console.log('Delete Clicked') },
+                    React.createElement(FontAwesomeIcon, { icon: faTrash }))),
+            React.createElement(Card.Header, { heading: 'Mario & Luigi', subHeading: 'mario@gmail.com', meta: React.createElement(Badge, { variant: 'success' }, "approved") }),
+            React.createElement(Card.Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
+            React.createElement(Card.Content, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")))));
 export default {
     title: 'Components/Card',
     component: Card,

package/build/components/Card/_CardActions.component.js

@@ -1,5 +1,5 @@
 import { AnimatePresence, motion } from 'framer-motion';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import CardContext from './Card.context';
@@ -23,11 +23,19 @@ const ActionContainer = styled.div `
   padding: 4px;
   border-radius: 4px 4px 0 0;
 
+  box-shadow: ${(props) => props.theme.shadows.xlarge};
+
   margin-right: 8px;
   cursor: pointer;
 `;
 export const CardActions = ({ children }) => {
-    const { actionsRef, showActions } = useContext(CardContext);
+    const { actionsRef, showActions, setHasActions } = useContext(CardContext);
+    useEffect(() => {
+        setHasActions(true);
+        return () => {
+            setHasActions(false);
+        };
+    }, [setHasActions]);
     if (!showActions) {
         return null;
     }
@@ -35,7 +43,7 @@ export const CardActions = ({ children }) => {
         return null;
     }
     return createPortal(React.createElement(AnimatePresence, null,
-        React.createElement(ActionsContainer, { key: 'modal', initial: { y: actionsHeight }, animate: { y: 0 }, exit: { y: actionsHeight }, transition: { type: 'spring', bounce: 0, duration: 0.6 } }, children)), actionsRef);
+        React.createElement(ActionsContainer, { key: 'actions-container', initial: { y: actionsHeight }, animate: { y: 0 }, exit: { y: actionsHeight }, transition: { type: 'spring', bounce: 0, duration: 0.6 } }, children)), actionsRef);
 };
 export const CardAction = ({ children, onClick }) => {
     const handleClick = (e) => {
@@ -44,5 +52,5 @@ export const CardAction = ({ children, onClick }) => {
             onClick();
         }
     };
-    return (React.createElement(ActionContainer, { onClick: handleClick }, children));
+    return React.createElement(ActionContainer, { onClick: handleClick }, children);
 };

package/build/components/Card/_CardHeader.component.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export interface CardHeaderProps {
     image?: string;
     heading: string;
-    subHeading: string;
+    subHeading?: string;
     meta?: React.ReactNode;
 }
 declare const CardHeader: ({ image, heading, subHeading, meta }: CardHeaderProps) => JSX.Element;

package/build/components/ControlGroup/ControlGroup.component.js

@@ -1,17 +1,21 @@
 import React from 'react';
 import styled from 'styled-components';
 import ButtonContext from '../Button/Button.context';
-import SubHeading from '../SubHeading/SubHeading.component';
+import Heading from '../Heading/Heading.component';
 import ControlGroupSpacer from './_ControlGroupSpacer.component';
 const ComfortableContainer = styled.div `
   display: flex;
   flex-direction: column;
 
-  ${SubHeading} {
+  ${Heading.SubHeading} {
     margin-top: 16px;
     margin-bottom: 16px;
   }
 
+  ${Heading.FormHeading} {
+    margin-top: 32px;
+  }
+
   & > * {
     margin-bottom: 16px;
 

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

@@ -2,5 +2,9 @@ import React from 'react';
 export interface HeadingProps {
     children: React.ReactNode;
 }
-declare const Heading: ({ children }: HeadingProps) => JSX.Element;
+declare const Heading: {
+    ({ children }: HeadingProps): JSX.Element;
+    SubHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+    FormHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+};
 export default Heading;

package/build/components/Heading/Heading.component.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
+import FormHeading from './_FormHeading.component';
+import SubHeading from './_SubHeading.component';
 const HeadingContainer = styled.h2 `
   font-family: ${(props) => props.theme.fonts.heading.family};
   font-size: ${(props) => props.theme.fonts.heading.size};
@@ -10,4 +12,6 @@ const HeadingContainer = styled.h2 `
   margin: 0;
 `;
 const Heading = ({ children }) => React.createElement(HeadingContainer, null, children);
+Heading.SubHeading = SubHeading;
+Heading.FormHeading = FormHeading;
 export default Heading;

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

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

package/build/components/Heading/Heading.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Heading } from '../..';
 export const Standard = () => React.createElement(Heading, null, "A Standard Heading");
+export const SubHeading = () => React.createElement(Heading.SubHeading, null, "A Standard Sub Heading");
+export const FormHeading = () => React.createElement(Heading.FormHeading, null, "A Standard Sub Heading");
 export default {
     title: 'Components/Heading',
     component: Heading,

package/build/components/Heading/_FormHeading.component.d.ts

@@ -0,0 +1,2 @@
+declare const FormHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+export default FormHeading;

package/build/components/Heading/_FormHeading.component.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
+const FormHeading = styled.h3 `
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+
+  color: ${(props) => props.theme.colours.defaultFont};
+
+  margin: 0;
+
+  border-left: 4px solid ${(props) => getThemeControlColours(props.theme).background};
+  line-height: 48px;
+  padding-left: 16px;
+`;
+export default FormHeading;

package/build/components/{SubHeading/SubHeading.component.d.ts → Heading/_SubHeading.component.d.ts}

@@ -1,2 +1,2 @@
-declare const SubHeading: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
+declare const SubHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
 export default SubHeading;

package/build/components/{SubHeading/SubHeading.component.js → Heading/_SubHeading.component.js}

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-const SubHeading = styled.h2 `
+const SubHeading = styled.h3 `
   font-family: ${(props) => props.theme.fonts.subHeading.family};
   font-size: ${(props) => props.theme.fonts.subHeading.size};
   font-weight: ${(props) => props.theme.fonts.subHeading.weight};

package/build/components/ImageUpload/ImageUpload.component.js

@@ -9,6 +9,7 @@ const UploadContainer = styled.div `
   position: relative;
   min-height: 144px;
   background-color: ${(props) => props.theme.colours.uploadBackground};
+  border: 1px solid #565656;
 
   height: 100%;
   width: 100%;

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

@@ -1,10 +1,13 @@
 import React from 'react';
+export declare type InlineCardSize = 'xs' | 'sm' | 'md' | 'lg';
 export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    size?: InlineCardSize;
 }
 declare const InlineCard: {
-    ({ children, onClick }: InlineCardProps): JSX.Element;
+    ({ children, size, onClick }: InlineCardProps): JSX.Element;
     Media: ({ children }: import("./_InlineCardMedia.component").InlineCardMediaProps) => JSX.Element;
-    Content: ({ children }: import("./_InlineCardContent.component").InlineCardContentProps) => JSX.Element;
+    Content: ({ children, center }: import("./_InlineCardContent.component").InlineCardContentProps) => JSX.Element;
+    Meta: ({ children }: import("./_InlineCardMeta.component").InlineCardMetaProps) => JSX.Element;
 };
 export default InlineCard;

package/build/components/InlineCard/InlineCard.component.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
+import { responsive } from '../..';
 import InlineCardContent from './_InlineCardContent.component';
 import InlineCardMedia from './_InlineCardMedia.component';
+import InlineCardMeta from './_InlineCardMeta.component';
 const CardOuter = styled.div `
   height: 64px;
   width: 100%;
@@ -11,10 +13,45 @@ const CardOuter = styled.div `
 
   background-color: ${(props) => props.theme.colours.cardBackground};
   box-shadow: ${(props) => props.theme.shadows.small};
+
+  ${(props) => {
+    switch (props.size) {
+        case 'xs':
+            return `
+          width: 360px;
+          ${responsive.useStylesFor('mobile').andSmaller(`
+            width: 100%;
+          `)}
+        `;
+        case 'sm':
+            return `
+          width: ${responsive.getWidthFor('mobile')};
+          ${responsive.useStylesFor('mobile').andSmaller(`
+            width: 100%;
+          `)}
+        `;
+        case 'md':
+            return `
+          width: ${responsive.getWidthFor('tablet')};
+          ${responsive.useStylesFor('tablet').andSmaller(`
+            width: 100%;
+          `)}
+        `;
+        case 'lg':
+        default:
+            return `
+          width: ${responsive.getWidthFor('desktop')};
+          ${responsive.useStylesFor('desktop').andSmaller(`
+            width: 100%;
+          `)}
+        `;
+    }
+}}
 `;
-const InlineCard = ({ children, onClick }) => {
-    return (React.createElement(CardOuter, { usePointer: !!onClick, onClick: onClick }, children));
+const InlineCard = ({ children, size, onClick }) => {
+    return (React.createElement(CardOuter, { size: size, usePointer: !!onClick, onClick: onClick }, children));
 };
 InlineCard.Media = InlineCardMedia;
 InlineCard.Content = InlineCardContent;
+InlineCard.Meta = InlineCardMeta;
 export default InlineCard;

package/build/components/InlineCard/InlineCard.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineCard, InlineCardGroup } from '../..';
+import { Badge, InlineCard, InlineCardGroup } from '../..';
 export const Standard = () => (React.createElement(InlineCardGroup, null,
     React.createElement(InlineCard, null,
         React.createElement(InlineCard.Content, null, "Some content")),
@@ -10,7 +10,9 @@ export const Standard = () => (React.createElement(InlineCardGroup, null,
     React.createElement(InlineCard, { onClick: () => {
             console.log('Clicked');
         } },
-        React.createElement(InlineCard.Content, null, "Clickable card"))));
+        React.createElement(InlineCard.Content, null, "Clickable card"),
+        React.createElement(InlineCard.Meta, null,
+            React.createElement(Badge, { variant: 'info' }, "Clickable")))));
 export default {
     title: 'Components/InlineCard',
     component: InlineCard,

package/build/components/InlineCard/_InlineCardContent.component.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface InlineCardContentProps {
     children: React.ReactNode;
+    center?: boolean;
 }
-declare const InlineCardContent: ({ children }: InlineCardContentProps) => JSX.Element;
+declare const InlineCardContent: ({ children, center }: InlineCardContentProps) => JSX.Element;
 export default InlineCardContent;

package/build/components/InlineCard/_InlineCardContent.component.js

@@ -8,8 +8,15 @@ const ContentContainer = styled.div `
   font-weight: ${(props) => props.theme.fonts.default.weight};
   font-size: ${(props) => props.theme.fonts.default.size};
   color: ${(props) => props.theme.colours.defaultFont};
+
+  ${(props) => props.center &&
+    `
+      display: flex;
+      align-items: center;
+
+  `}
 `;
-const InlineCardContent = ({ children }) => {
-    return React.createElement(ContentContainer, null, children);
+const InlineCardContent = ({ children, center }) => {
+    return React.createElement(ContentContainer, { center: center }, children);
 };
 export default InlineCardContent;

package/build/components/InlineCard/_InlineCardMeta.component.d.ts

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

package/build/components/InlineCard/_InlineCardMeta.component.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+const ContentContainer = styled.div `
+  height: 100%;
+  padding: 8px;
+  margin-left: 32px;
+
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+`;
+const InlineCardMeta = ({ children }) => {
+    return React.createElement(ContentContainer, null, children);
+};
+export default InlineCardMeta;

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ControlGroup, Heading, Menu, Spacer, Text, FocusLayout, PaddedLayout, Input, Button, menuHelpers, ContentLayout, SubHeading, } from '../..';
+import { ControlGroup, Heading, Menu, Spacer, Text, FocusLayout, PaddedLayout, Input, Button, menuHelpers, ContentLayout, } from '../..';
 import { faCalendarAlt, faCogs, faHamburger } from '@fortawesome/free-solid-svg-icons';
 export const Standard = () => {
     const [route, setRoute] = useState('/eat');
@@ -33,9 +33,9 @@ export const WithPanel = () => {
             React.createElement(Menu.Panel, null,
                 React.createElement(PaddedLayout, null,
                     React.createElement(ControlGroup, { variation: 'comfortable' },
-                        React.createElement(SubHeading, null, "You"),
+                        React.createElement(Heading.SubHeading, null, "You"),
                         React.createElement(Input, { label: 'Income', name: 'name', placeholder: '30,000' }),
-                        React.createElement(SubHeading, null, "Loan"),
+                        React.createElement(Heading.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,

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface PageHeaderProps {
+    heading: string;
+}
+declare const PageHeader: ({ heading }: PageHeaderProps) => JSX.Element;
+export default PageHeader;

package/build/components/PageHeader/PageHeader.component.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Heading } from '../..';
+const HeaderOuter = styled.div `
+  width: 100%;
+  padding: 32px;
+`;
+const PageHeader = ({ heading }) => {
+    return (React.createElement(HeaderOuter, null,
+        React.createElement(Heading, null, heading)));
+};
+export default PageHeader;

package/build/components/PageHeader/PageHeader.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PageHeader } from '../../';
+export const Standard = () => {
+    return React.createElement(PageHeader, { heading: 'Frank the Drummer' });
+};
+export default {
+    title: 'Components/PageHeader',
+    component: PageHeader,
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface SwimlaneProps {
+    label: string;
+    children: React.ReactNode;
+}
+declare const Swimlane: ({ label, children }: SwimlaneProps) => JSX.Element;
+export default Swimlane;

package/build/components/Swimlane/Swimlane.component.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Heading } from '../..';
+const SwimlaneOuter = styled.div `
+  padding: 8px;
+  margin: 0 16px;
+  border-top: thin solid ${(props) => props.theme.colours.controlBorder};
+
+  display: flex;
+  align-items: center;
+
+  :last-child {
+    border-bottom: thin solid ${(props) => props.theme.colours.controlBorder};
+  }
+`;
+const SwimlaneLabel = styled.div `
+  padding-right: 32px;
+  width: 240px;
+  min-width: 240px;
+`;
+const SwimlaneContent = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+`;
+const Swimlane = ({ label, children }) => {
+    return (React.createElement(SwimlaneOuter, null,
+        React.createElement(SwimlaneLabel, null,
+            React.createElement(Heading.FormHeading, null, label)),
+        React.createElement(SwimlaneContent, null, children)));
+};
+export default Swimlane;

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

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

package/build/components/Swimlane/Swimlane.stories.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+import { InlineCard, Badge, Swimlane, CenteredLayout } from '../../';
+const CardWrapper = styled.div `
+  margin: 8px;
+`;
+export const Standard = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Swimlane, { label: 'Jobs' },
+            React.createElement(CardWrapper, null,
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null,
+                            "Jim",
+                            `'`,
+                            "s Mowing")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'success' }, "Full Time"))))),
+        React.createElement(Swimlane, { label: 'Properties' },
+            React.createElement(CardWrapper, null,
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "33 Oak Street")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'success' }, "Primary")))),
+            React.createElement(CardWrapper, null,
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "402 Main Street")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'info' }, "Investment")))),
+            React.createElement(CardWrapper, null,
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "12 Heart Avenue")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'info' }, "Investment"))))),
+        React.createElement(Swimlane, { label: 'Investments' },
+            React.createElement(CardWrapper, null,
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "ASX 200")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'info' }, "Index Fund")))),
+            React.createElement(CardWrapper, null,
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "AMP Super")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'info' }, "Super Fund")))))));
+};
+export default {
+    title: 'Components/Swimlane',
+    component: Swimlane,
+};

package/build/examples/Form.stories.d.ts

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

package/build/examples/Form.stories.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { ControlGroup, FocusLayout, Form, Heading, Input, ImageUpload } from '../';
+/* eslint-disable @typescript-eslint/no-empty-function */
+export const Standard = () => {
+    const [value, setValue] = useState({ dragon: '' });
+    return (React.createElement(FocusLayout, null,
+        React.createElement(Form, { value: value, onChange: setValue },
+            React.createElement(ControlGroup, { variation: 'comfortable' },
+                React.createElement(ImageUpload, { name: 'image' }),
+                React.createElement(Input, { name: 'name', placeholder: 'Something tasty..' }),
+                React.createElement(Heading.FormHeading, null, "Components"),
+                React.createElement(Input, { name: 'one', placeholder: 'Ingredient #1' }),
+                React.createElement(Input, { name: 'two', placeholder: 'Ingredient #2' }),
+                React.createElement(Input, { name: 'three', placeholder: 'Ingredient #3' })))));
+};
+export default {
+    title: 'Examples/Forms',
+    component: Form,
+};

package/build/index.d.ts

@@ -20,11 +20,12 @@ export { default as LiveInput } from './components/LiveInput/LiveInput.component
 export { default as Loader } from './components/Loader/Loader.component';
 export { default as Menu } from './components/Menu/Menu.component';
 export { default as Modal } from './components/Modal/Modal.component';
+export { default as PageHeader } from './components/PageHeader/PageHeader.component';
 export { default as ProfileImage } from './components/ProfileImage/ProfileImage.component';
 export { default as QrCode } from './components/QrCode/QrCode.component';
-export { default as SubHeading } from './components/SubHeading/SubHeading.component';
 export { default as Spacer } from './components/Spacer/Spacer.component';
 export { default as SquareButton } from './components/SquareButton/SquareButton.component';
+export { default as Swimlane } from './components/Swimlane/Swimlane.component';
 export { default as Table } from './components/Table/Table.component';
 export { default as Text } from './components/Text/Text.component';
 export { default as LoginScreen } from './screens/Login/Login.screen';

package/build/index.js

@@ -20,11 +20,12 @@ export { default as LiveInput } from './components/LiveInput/LiveInput.component
 export { default as Loader } from './components/Loader/Loader.component';
 export { default as Menu } from './components/Menu/Menu.component';
 export { default as Modal } from './components/Modal/Modal.component';
+export { default as PageHeader } from './components/PageHeader/PageHeader.component';
 export { default as ProfileImage } from './components/ProfileImage/ProfileImage.component';
 export { default as QrCode } from './components/QrCode/QrCode.component';
-export { default as SubHeading } from './components/SubHeading/SubHeading.component';
 export { default as Spacer } from './components/Spacer/Spacer.component';
 export { default as SquareButton } from './components/SquareButton/SquareButton.component';
+export { default as Swimlane } from './components/Swimlane/Swimlane.component';
 export { default as Table } from './components/Table/Table.component';
 export { default as Text } from './components/Text/Text.component';
 export { default as LoginScreen } from './screens/Login/Login.screen';

package/build/theme/dark.theme.js

@@ -4,7 +4,7 @@ const darkTheme = {
         background: '#424448',
         overlayBackground: '#a4caf9',
         primary: {
-            main: '#61a4f5',
+            main: '#94b8e3',
             hover: '#83b7f7',
             contrastText: '#191919',
         },
@@ -56,7 +56,7 @@ const darkTheme = {
         },
         heading: {
             family: `'Roboto', sans-serif`,
-            size: '36px',
+            size: '28px',
             weight: '500',
         },
         subHeading: {
@@ -68,6 +68,8 @@ const darkTheme = {
     shadows: {
         small: '0px 0px 2px rgba(0, 0, 0, 0.15)',
         medium: '0px 0px 4px rgba(0, 0, 0, 0.15)',
+        large: '0px 0px 8px rgba(0, 0, 0, 0.15)',
+        xlarge: '0px 0px 16px rgba(0, 0, 0, 0.25)',
     },
 };
 export default darkTheme;

package/build/theme/default.theme.js

@@ -69,6 +69,8 @@ const defaultTheme = {
     shadows: {
         small: '0px 0px 2px rgba(0, 0, 0, 0.15)',
         medium: '0px 0px 4px rgba(0, 0, 0, 0.15)',
+        large: '0px 0px 8px rgba(0, 0, 0, 0.15)',
+        xlarge: '0px 0px 16px rgba(0, 0, 0, 0.25)',
     },
 };
 export default defaultTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.14.0",
+  "version": "0.14.7",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {

package/build/components/SubHeading/SubHeading.stories.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import { SubHeading } from '../..';
-export const Standard = () => React.createElement(SubHeading, null, "A Standard Subheading");
-export default {
-    title: 'Components/SubHeading',
-    component: SubHeading,
-};