@dtdot/lego 0.14.6 → 0.14.7

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

@@ -30,7 +30,7 @@ const CardOuter = styled(motion.div) `
         `;
         case 'xs':
             return `
-          width: 240px;
+          width: 360px;
           ${responsive.useStylesFor('mobile').andSmaller(`
             width: 100%;
           `)}

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' })),

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/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/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.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/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/index.d.ts

@@ -20,10 +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 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,10 +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 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

@@ -56,7 +56,7 @@ const darkTheme = {
         },
         heading: {
             family: `'Roboto', sans-serif`,
-            size: '36px',
+            size: '28px',
             weight: '500',
         },
         subHeading: {

package/package.json

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