@dtdot/lego 0.14.9 → 0.16.0

package/build/components/ActionMessage/ActionMessage.stories.js

@@ -6,8 +6,7 @@ export const Standard = () => (React.createElement(React.Fragment, null,
             console.log('testing');
         } })));
 export const InPanel = () => (React.createElement(React.Fragment, null,
-    React.createElement(Menu, null,
-        React.createElement(Menu.Heading, null, "Action Message")),
+    React.createElement(Menu, { heading: 'Action Message' }),
     React.createElement(Menu.Content, null,
         React.createElement(Menu.Panel, { panelSize: 'sm' },
             React.createElement(ActionMessage, { header: 'Create an asset', info: "It looks like you don't have any assets, create one to get started", action: 'Create', onAction: () => {

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

@@ -1,11 +1,17 @@
 import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { Status } from '../../theme/theme.types';
 export declare type InlineCardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+export declare type DragVariant = Status;
 export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     size?: InlineCardSize;
+    gestureLeftIcon?: IconProp;
+    gestureLeftVariant?: DragVariant;
+    onGestureLeft?: () => void;
 }
 declare const InlineCard: {
-    ({ children, size, onClick }: InlineCardProps): JSX.Element;
+    ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }: InlineCardProps): JSX.Element;
     Media: ({ children }: import("./_InlineCardMedia.component").InlineCardMediaProps) => JSX.Element;
     Content: ({ children, center }: import("./_InlineCardContent.component").InlineCardContentProps) => JSX.Element;
     Meta: ({ children }: import("./_InlineCardMeta.component").InlineCardMetaProps) => JSX.Element;

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

@@ -1,18 +1,15 @@
+import { motion, useMotionValue, useTransform } from 'framer-motion';
 import React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { responsive } from '../..';
+import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
 import InlineCardContent from './_InlineCardContent.component';
 import InlineCardMedia from './_InlineCardMedia.component';
 import InlineCardMeta from './_InlineCardMeta.component';
-const CardOuter = styled.div `
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+const CardWrapper = styled.div `
+  position: relative;
   height: 64px;
-  width: 100%;
-  display: flex;
-
-  cursor: ${(props) => (props.usePointer ? 'pointer' : '')};
-
-  background-color: ${(props) => props.theme.colours.cardBackground};
-  box-shadow: ${(props) => props.theme.shadows.small};
 
   ${(props) => {
     switch (props.size) {
@@ -52,8 +49,46 @@ const CardOuter = styled.div `
     }
 }}
 `;
-const InlineCard = ({ children, size, onClick }) => {
-    return (React.createElement(CardOuter, { size: size, usePointer: !!onClick, onClick: onClick }, children));
+const CardOuter = styled(motion.div) `
+  height: 64px;
+  width: 100%;
+  display: flex;
+
+  cursor: ${(props) => (props.usePointer ? 'pointer' : '')};
+
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  box-shadow: ${(props) => props.theme.shadows.small};
+`;
+const CardActionBackground = styled(motion.div) `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 8px;
+  padding-right: 16px;
+
+  top: 0;
+  left: 0;
+  pointer-events: none;
+`;
+const InlineCard = ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }) => {
+    const theme = useTheme();
+    const x = useMotionValue(0);
+    const xInput = [-70, 0];
+    const gestureLeftTheme = getThemeStatusColour(gestureLeftVariant || 'info', theme);
+    const opacity = useTransform(x, xInput, ['1', '0']);
+    const handleDragEnd = (e, panInfo) => {
+        // approx xInputMin * 3
+        if (panInfo.offset.x < -180 && onGestureLeft) {
+            onGestureLeft();
+        }
+    };
+    return (React.createElement(CardWrapper, { size: size },
+        React.createElement(CardActionBackground, { style: { opacity, backgroundColor: gestureLeftTheme.main } }, gestureLeftIcon && (React.createElement(FontAwesomeIcon, { style: { fontSize: '20px', color: gestureLeftTheme.contrast }, icon: gestureLeftIcon }))),
+        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, style: { x }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick, onClick: onClick }, children)));
 };
 InlineCard.Media = InlineCardMedia;
 InlineCard.Content = InlineCardContent;

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

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

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { faCheckCircle, faExclamationTriangle, faInfoCircle, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { Badge, InlineCard, InlineCardGroup } from '../..';
 export const Standard = () => (React.createElement(InlineCardGroup, null,
     React.createElement(InlineCard, null,
@@ -13,6 +14,16 @@ export const Standard = () => (React.createElement(InlineCardGroup, null,
         React.createElement(InlineCard.Content, null, "Clickable card"),
         React.createElement(InlineCard.Meta, null,
             React.createElement(Badge, { variant: 'info' }, "Clickable")))));
+export const WithDrag = () => (React.createElement("div", { style: { maxWidth: '400px' } },
+    React.createElement(InlineCardGroup, null,
+        React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faCheckCircle, gestureLeftVariant: 'success' },
+            React.createElement(InlineCard.Content, null, "A success gesture")),
+        React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faInfoCircle, gestureLeftVariant: 'info' },
+            React.createElement(InlineCard.Content, null, "A info gesture")),
+        React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faExclamationTriangle, gestureLeftVariant: 'warn' },
+            React.createElement(InlineCard.Content, null, "A warning gesture")),
+        React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faTimes, gestureLeftVariant: 'danger' },
+            React.createElement(InlineCard.Content, null, "A danger gesture")))));
 export default {
     title: 'Components/InlineCard',
     component: InlineCard,

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

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

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

@@ -13,5 +13,24 @@ const InlineGroup = styled.div `
     }
   }
 `;
-const InlineCardGroup = ({ children }) => React.createElement(InlineGroup, null, children);
+const WrappedInlineGroup = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+
+  & > * {
+    margin-bottom: 4px;
+    margin-top: 4px;
+    margin-right: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+const InlineCardGroup = ({ children, wrap }) => {
+    if (wrap) {
+        return React.createElement(WrappedInlineGroup, null, children);
+    }
+    return React.createElement(InlineGroup, null, children);
+};
 export default InlineCardGroup;

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

@@ -1,11 +1,11 @@
 import React from 'react';
 export interface MenuProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    heading: string;
 }
 declare const Menu: {
-    ({ children }: MenuProps): JSX.Element;
+    ({ children, heading }: MenuProps): JSX.Element;
     Page: ({ children, scrollable }: import("./_MenuPage.component").MenuPageProps) => JSX.Element;
-    Heading: ({ children }: import("./_MenuHeading.component").MenuHeadingProps) => JSX.Element;
     Item: ({ children, icon, active, onClick }: import("./_MenuItem.component").MenuItemProps) => JSX.Element;
     Content: ({ children }: import("./_MenuContent.component").MenuContentProps) => JSX.Element;
     Panel: ({ children, scrollable, panelSize }: import("./_MenuPanel.component").MenuPanelProps) => JSX.Element;

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

@@ -1,11 +1,13 @@
-import React from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useState } from 'react';
 import styled from 'styled-components';
+import responsive from '../../responsive/responsive';
 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 `
+const MenuDesktop = styled.div `
   position: fixed;
   top: 0;
   left: 0;
@@ -14,12 +16,68 @@ const MenuOuter = styled.div `
   width: 250px;
   background-color: ${(props) => props.theme.colours.cardBackground};
   padding: 8px 0;
+
+  ${responsive.useStylesFor('tablet').andSmaller(`
+    display: none;
+  `)}
+`;
+const MenuMobile = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  height: 64px;
+  width: 100%;
+  padding: 8px 0;
+
+  ${responsive.useStylesFor('desktop').andLarger(`
+    display: none;
+  `)}
+`;
+const MobileMenuNavContainer = styled(motion.div) `
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  height: 100vh;
+  width: 250px;
+
+  padding: 8px 0;
+
+  cursor: default;
+  background-color: ${(props) => props.theme.colours.cardBackground};
 `;
-const Menu = ({ children }) => {
-    return React.createElement(MenuOuter, null, children);
+const MenuShadow = styled(motion.div) `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 999;
+  opacity: 0.7;
+
+  background-color: ${(props) => props.theme.colours.cardBackground};
+`;
+const AnimatedMenuShadow = ({ onClick }) => (React.createElement(MenuShadow, { onClick: onClick, key: 'mobile-menu-shadow', initial: { opacity: 0 }, animate: { opacity: 0.7 }, exit: { opacity: 0 }, transition: { type: 'spring', bounce: 0, duration: 0.6 } }));
+const MobileMenuNav = ({ children }) => {
+    return (React.createElement(MobileMenuNavContainer, { key: 'mobile-menu-nav', initial: { x: -300 }, animate: { x: 0 }, exit: { x: -300 }, transition: { type: 'spring', bounce: 0, duration: 0.6 } }, children));
+};
+const Menu = ({ children, heading }) => {
+    const [open, setOpen] = useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MenuDesktop, null,
+            React.createElement(MenuHeading, null, heading),
+            children),
+        React.createElement(MenuMobile, null,
+            React.createElement(MenuHeading, { onOpen: () => setOpen(true) }, heading)),
+        React.createElement(AnimatePresence, null, open && (React.createElement(React.Fragment, null,
+            React.createElement(MobileMenuNav, null,
+                React.createElement(MenuHeading, { isOpen: open, onClose: () => setOpen(false) }, heading),
+                children),
+            React.createElement(AnimatedMenuShadow, { onClick: () => setOpen(false) }))))));
 };
 Menu.Page = MenuPage;
-Menu.Heading = MenuHeading;
+// Menu.Heading = MenuHeading;
 Menu.Item = MenuItem;
 Menu.Content = MenuContent;
 Menu.Panel = MenuPanel;

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

@@ -4,8 +4,7 @@ import { faCalendarAlt, faCogs, faHamburger } from '@fortawesome/free-solid-svg-
 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, { heading: '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")),
@@ -24,8 +23,7 @@ export const Standard = () => {
 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, { heading: '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")),
@@ -52,8 +50,7 @@ export const WithPanel = () => {
 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, { heading: '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")),

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

@@ -12,9 +12,20 @@ const MenuContentOuter = styled.div `
 
   ${responsive.useStylesFor('tablet').andSmaller(`
     flex-direction: column;
+    margin-left: 0;
+  `)}
+`;
+const TopFiller = styled.div `
+  height: 64px;
+  background-color: ${(props) => props.theme.colours.cardBackground};
+
+  ${responsive.useStylesFor('desktop').andLarger(`
+    display: none;
   `)}
 `;
 const MenuContent = ({ children }) => {
-    return React.createElement(MenuContentOuter, null, children);
+    return (React.createElement(MenuContentOuter, null,
+        React.createElement(TopFiller, null),
+        children));
 };
 export default MenuContent;

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

@@ -1,6 +1,9 @@
 import React from 'react';
 export interface MenuHeadingProps {
     children: React.ReactNode;
+    onOpen?: () => void;
+    onClose?: () => void;
+    isOpen?: boolean;
 }
-declare const MenuHeading: ({ children }: MenuHeadingProps) => JSX.Element;
+declare const MenuHeading: ({ children, onOpen, onClose, isOpen }: MenuHeadingProps) => JSX.Element;
 export default MenuHeading;

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

@@ -1,11 +1,15 @@
+import { faBars } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import styled from 'styled-components';
+import responsive from '../../responsive/responsive';
 const MenuHeadingDiv = styled.div `
   padding-right: 32px;
   margin-bottom: 16px;
 
   width: 100%;
   text-align: center;
+  max-width: 450px;
 `;
 const MenuHeadingInner = styled.div `
   background-color: ${(props) => props.theme.colours.primary.main};
@@ -22,6 +26,20 @@ const MenuHeadingInner = styled.div `
   color: ${(props) => props.theme.colours.primary.contrastText};
   font-size: 20px;
 `;
-const MenuHeading = ({ children }) => (React.createElement(MenuHeadingDiv, null,
-    React.createElement(MenuHeadingInner, null, children)));
+const MenuToggle = styled.div `
+  margin-right: 16px;
+  cursor: pointer;
+  color: ${(props) => props.theme.colours.primary.contrastText};
+  fill: ${(props) => props.theme.colours.primary.contrastText};
+
+  ${responsive.useStylesFor('desktop').andLarger(`
+    display: none;
+    `)}
+`;
+const MenuHeading = ({ children, onOpen, onClose, isOpen }) => (React.createElement(MenuHeadingDiv, null,
+    React.createElement(MenuHeadingInner, null,
+        isOpen ? (React.createElement(MenuToggle, { onClick: onClose },
+            React.createElement(FontAwesomeIcon, { icon: faBars }))) : (React.createElement(MenuToggle, { onClick: onOpen },
+            React.createElement(FontAwesomeIcon, { icon: faBars }))),
+        children)));
 export default MenuHeading;

package/build/components/Notifications/Notifications.stories.js

@@ -16,8 +16,7 @@ export const Standard = () => {
     ];
     return (React.createElement(React.Fragment, null,
         React.createElement(Notifications, { notifications: notifications }),
-        React.createElement(Menu, null,
-            React.createElement(Menu.Heading, null, "Something Tasty")),
+        React.createElement(Menu, { heading: 'Something Tasty' }),
         React.createElement(Menu.Page, null,
             React.createElement(FocusLayout, null,
                 React.createElement(Text, null, "Content...")))));
@@ -52,8 +51,7 @@ export const Interactive = () => {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Notifications, { notifications: notifications }),
-        React.createElement(Menu, null,
-            React.createElement(Menu.Heading, null, "Something Tasty")),
+        React.createElement(Menu, { heading: 'Something Tasty' }),
         React.createElement(Menu.Page, null,
             React.createElement(FocusLayout, null,
                 React.createElement(Button, { onClick: () => addNotification(successNotification) }, "Save user"),
@@ -79,8 +77,7 @@ export const OverModal = () => {
     ];
     return (React.createElement(React.Fragment, null,
         React.createElement(Notifications, { notifications: notifications }),
-        React.createElement(Menu, null,
-            React.createElement(Menu.Heading, null, "Something Tasty")),
+        React.createElement(Menu, { heading: 'Something Tasty' }),
         React.createElement(Menu.Page, null,
             React.createElement(Modal, { onClose: () => {
                     console.log('close..');

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

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 export interface PageHeaderProps {
     heading: string;
+    actions?: React.ReactNode;
 }
-declare const PageHeader: ({ heading }: PageHeaderProps) => JSX.Element;
+declare const PageHeader: ({ heading, actions }: PageHeaderProps) => JSX.Element;
 export default PageHeader;

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

@@ -2,11 +2,17 @@ import React from 'react';
 import styled from 'styled-components';
 import { Heading } from '../..';
 const HeaderOuter = styled.div `
-  width: 100%;
-  padding: 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: calc(100% - 64px);
+  margin: 32px;
+  min-height: 48px;
 `;
-const PageHeader = ({ heading }) => {
+const PageHeader = ({ heading, actions }) => {
     return (React.createElement(HeaderOuter, null,
-        React.createElement(Heading, null, heading)));
+        React.createElement(Heading, null, heading),
+        React.createElement("div", null, actions)));
 };
 export default PageHeader;

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

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

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

@@ -1,8 +1,12 @@
 import React from 'react';
-import { PageHeader } from '../../';
+import { Button, ButtonGroup, PageHeader } from '../../';
 export const Standard = () => {
     return React.createElement(PageHeader, { heading: 'Frank the Drummer' });
 };
+export const WithActions = () => {
+    return (React.createElement(PageHeader, { heading: 'Frank the Drummer', actions: React.createElement(ButtonGroup, null,
+            React.createElement(Button, { variant: 'tertiary' }, "Add")) }));
+};
 export default {
     title: 'Components/PageHeader',
     component: PageHeader,

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

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

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

@@ -1,13 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
 import { InlineCard, Badge, Swimlane, CenteredLayout } from '../../';
-const CardWrapper = styled.div `
-  margin: 8px;
-`;
+import InlineCardGroup from '../InlineCard/InlineCardGroup.component';
 export const Standard = () => {
     return (React.createElement(React.Fragment, null,
         React.createElement(Swimlane, { label: 'Jobs' },
-            React.createElement(CardWrapper, null,
+            React.createElement(InlineCardGroup, { wrap: true },
                 React.createElement(InlineCard, { size: 'xs' },
                     React.createElement(InlineCard.Content, { center: true },
                         React.createElement(CenteredLayout, null,
@@ -17,38 +14,88 @@ export const Standard = () => {
                     React.createElement(InlineCard.Meta, null,
                         React.createElement(Badge, { variant: 'success' }, "Full Time"))))),
         React.createElement(Swimlane, { label: 'Properties' },
-            React.createElement(CardWrapper, null,
+            React.createElement(InlineCardGroup, { wrap: true },
                 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(Badge, { variant: 'success' }, "Primary"))),
                 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(Badge, { variant: 'info' }, "Investment"))),
                 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(InlineCardGroup, { wrap: true },
                 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(Badge, { variant: 'info' }, "Index Fund"))),
                 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 const LotsOfCards = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Swimlane, { label: 'An Example' },
+            React.createElement(InlineCardGroup, { wrap: true },
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "Card")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'success' }, "#1"))),
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "Card")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'success' }, "#2"))),
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "Card")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'success' }, "#3"))),
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "Card")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'success' }, "#4"))),
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "Card")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'success' }, "#5"))),
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "Card")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'success' }, "#6"))),
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "Card")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'success' }, "#7"))),
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "Card")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'success' }, "#8"))),
+                React.createElement(InlineCard, { size: 'xs' },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "Card")),
+                    React.createElement(InlineCard.Meta, null,
+                        React.createElement(Badge, { variant: 'success' }, "#9"))),
+                React.createElement(InlineCard, { size: 'xs', onClick: () => console.log('add') },
+                    React.createElement(InlineCard.Content, { center: true },
+                        React.createElement(CenteredLayout, null, "Add")))))));
+};
 export default {
     title: 'Components/Swimlane',
     component: Swimlane,

package/package.json

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