@dtdot/lego 0.14.7 → 0.14.11

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

@@ -8,8 +8,8 @@ export const Standard = () => (React.createElement(React.Fragment, null,
 export const InPanel = () => (React.createElement(React.Fragment, null,
     React.createElement(Menu, null,
         React.createElement(Menu.Heading, null, "Action Message")),
-    React.createElement(Menu.Content, { panelSize: 'sm' },
-        React.createElement(Menu.Panel, null,
+    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: () => {
                     console.log('testing');
                 } })),

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type InlineCardSize = 'xs' | 'sm' | 'md' | 'lg';
+export declare type InlineCardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
 export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     size?: InlineCardSize;

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

@@ -16,6 +16,10 @@ const CardOuter = styled.div `
 
   ${(props) => {
     switch (props.size) {
+        case 'fill':
+            return `
+          width: 100%;
+        `;
         case 'xs':
             return `
           width: 360px;

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

@@ -4,10 +4,10 @@ export interface MenuProps {
 }
 declare const Menu: {
     ({ children }: MenuProps): JSX.Element;
-    Page: ({ children }: import("./_MenuPage.component").MenuPageProps) => 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: ({ panelSize, independentScroll, children }: import("./_MenuContent.component").MenuContentProps) => JSX.Element;
-    Panel: ({ children }: import("./_MenuPanel.component").MenuPanelProps) => JSX.Element;
+    Content: ({ children }: import("./_MenuContent.component").MenuContentProps) => JSX.Element;
+    Panel: ({ children, scrollable, panelSize }: import("./_MenuPanel.component").MenuPanelProps) => JSX.Element;
 };
 export default Menu;

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

@@ -29,8 +29,8 @@ export const WithPanel = () => {
             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(Menu.Content, null,
+            React.createElement(Menu.Panel, { panelSize: 'md' },
                 React.createElement(PaddedLayout, null,
                     React.createElement(ControlGroup, { variation: 'comfortable' },
                         React.createElement(Heading.SubHeading, null, "You"),
@@ -57,8 +57,8 @@ export const IndependentScrolling = () => {
             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(Menu.Content, null,
+            React.createElement(Menu.Panel, { panelSize: 'sm', scrollable: true },
                 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.",
@@ -68,7 +68,7 @@ export const IndependentScrolling = () => {
                         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(Menu.Page, { scrollable: true },
                 React.createElement(ContentLayout, null,
                     React.createElement(ContentLayout.Content, { size: 'sm' },
                         React.createElement(Text, null,

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

@@ -1,10 +1,6 @@
 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;
+declare const MenuContent: ({ children }: MenuContentProps) => JSX.Element;
 export default MenuContent;

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

@@ -1,16 +1,6 @@
 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;
 
@@ -20,12 +10,11 @@ const MenuContentOuter = styled.div `
   min-height: 100vh;
   padding: 8px;
 
-  ${(props) => responsive.useStylesFor(getMaxSize(props.panelSize)).andSmaller(`
+  ${responsive.useStylesFor('tablet').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)));
+const MenuContent = ({ children }) => {
+    return React.createElement(MenuContentOuter, null, children);
 };
 export default MenuContent;

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

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

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

@@ -1,20 +1,18 @@
-import React, { useContext } from 'react';
+import React 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(`
+  ${responsive.useStylesFor('tablet').andSmaller(`
     min-height: unset;
   `)}
 
-  ${(props) => props.independentScroll &&
-    `
+  ${(props) => responsive.useStylesFor('desktop').andLarger(props.scrollable
+    ? `
     max-height: calc(100vh - 16px);
     overflow-y: auto;
 
@@ -30,10 +28,10 @@ const MenuPageInner = styled.div `
     &::-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));
+const MenuPage = ({ children, scrollable }) => {
+    return React.createElement(MenuPageInner, { scrollable: scrollable }, children);
 };
 export default MenuPage;

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

@@ -1,6 +1,9 @@
 import React from 'react';
+export declare type PanelSize = 'sm' | 'md';
 export interface MenuPanelProps {
     children: React.ReactNode;
+    scrollable?: boolean;
+    panelSize: PanelSize;
 }
-declare const MenuPanel: ({ children }: MenuPanelProps) => JSX.Element;
+declare const MenuPanel: ({ children, scrollable, panelSize }: MenuPanelProps) => JSX.Element;
 export default MenuPanel;

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

@@ -1,8 +1,6 @@
-import React, { useContext } from 'react';
+import React 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;
@@ -27,7 +25,7 @@ const MenuPanelDiv = styled.div `
     }
 }}
 
-  ${(props) => responsive.useStylesFor(getMaxSize(props.panelSize)).andSmaller(`
+  ${responsive.useStylesFor('tablet').andSmaller(`
     max-width: unset;
     min-width: unset;
     min-height: unset;
@@ -36,9 +34,9 @@ const MenuPanelDiv = styled.div `
     margin-bottom: 8px;
   `)}
 
-  ${(props) => props.independentScroll &&
-    `
-    max-height: calc(100vh - 16px);
+${(props) => responsive.useStylesFor('desktop').andLarger(props.scrollable
+    ? `
+        max-height: calc(100vh - 16px);
     overflow-y: auto;
 
     &::-webkit-scrollbar {
@@ -53,10 +51,10 @@ const MenuPanelDiv = styled.div `
     &::-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));
+const MenuPanel = ({ children, scrollable, panelSize = 'sm' }) => {
+    return (React.createElement(MenuPanelDiv, { panelSize: panelSize, scrollable: scrollable }, children));
 };
 export default MenuPanel;

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.7",
+  "version": "0.14.11",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {

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

@@ -1,7 +0,0 @@
-/// <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

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