@dtdot/lego 0.14.0

package/build/colours/colours.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    white: string;
+    grey10: string;
+    grey20: string;
+    grey30: string;
+    grey35: string;
+    grey40: string;
+    grey50: string;
+    grey70: string;
+    grey90: string;
+    yellow: string;
+    green: string;
+    red: string;
+    blue: string;
+};
+export default _default;

package/build/colours/colours.js

@@ -0,0 +1,15 @@
+export default {
+    white: '#FFFFFF',
+    grey10: '#F6F7F9',
+    grey20: '#cbd5df',
+    grey30: '#d0d0d0',
+    grey35: '#c1c1c1',
+    grey40: '#a7a7a7',
+    grey50: '#889aac',
+    grey70: '#60758a',
+    grey90: '#2e3842',
+    yellow: '#ffcb77',
+    green: '#8ACB88',
+    red: '#FE6D73',
+    blue: '#90BEDE',
+};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface ActionMessageProps {
+    header: string;
+    info?: string;
+    action?: string;
+    onAction?: () => void;
+}
+declare const ActionMessage: ({ header, info, action, onAction }: ActionMessageProps) => JSX.Element;
+export default ActionMessage;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button, Spacer, SubHeading, Text } from '../..';
+const ActionMessageContainer = styled.div `
+  width: 100%;
+  padding: 64px 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  span {
+    text-align: center;
+  }
+`;
+const ActionMessage = ({ header, info, action, onAction }) => {
+    return (React.createElement(ActionMessageContainer, null,
+        React.createElement("div", null,
+            React.createElement(SubHeading, null, header)),
+        info && (React.createElement(React.Fragment, null,
+            React.createElement(Spacer, { size: '1x' }),
+            React.createElement(Text, null, info))),
+        action && (React.createElement(React.Fragment, null,
+            React.createElement(Spacer, { size: '4x' }),
+            React.createElement(Button, { onClick: onAction }, action)))));
+};
+export default ActionMessage;

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ActionMessage, Menu } from '../..';
+/* eslint-disable no-console */
+export const Standard = () => (React.createElement(React.Fragment, null,
+    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');
+        } })));
+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(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');
+                } })),
+        React.createElement(Menu.Page, null, "some content..."))));
+export default {
+    title: 'Components/ActionMessage',
+    component: ActionMessage,
+};

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { Status } from '../../theme/theme.types';
+export declare type AlertVariant = Status;
+export interface AlertProps {
+    variant: AlertVariant;
+    message: string;
+    count?: number;
+    action?: string;
+    onAction?: () => void;
+}
+interface AlertContainerProps {
+    colour: string;
+}
+export declare const AlertContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, AlertContainerProps, never>;
+declare const Alert: ({ variant, message, count, action, onAction }: AlertProps) => JSX.Element;
+export default Alert;

package/build/components/Alert/Alert.component.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
+export const AlertContainer = styled.div `
+  position: relative;
+  padding: 12px;
+  background-color: ${(props) => props.theme.colours.cardBackground};
+
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+
+  border-left: solid 3px ${(props) => props.colour};
+  box-shadow: 1px 1px 2px #0000000f;
+`;
+const MessageContainer = styled.div `
+  color: ${(props) => props.theme.colours.defaultFont};
+`;
+const ActionContainer = styled.div `
+  text-align: right;
+  font-style: italic;
+  color: ${(props) => props.theme.colours.secondaryFont};
+
+  cursor: pointer;
+  padding-top: 8px;
+`;
+const CountContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: absolute;
+  top: 0px;
+  right: -8px;
+
+  font-size: 12px;
+  color: ${(props) => props.theme.colours.defaultFont};
+  font-family: ${(props) => props.theme.fonts.default.family};
+
+  height: 24px;
+  width: 24px;
+  border: 2px solid ${(props) => props.colour};
+  border-radius: 50%;
+  background-color: ${(props) => props.theme.colours.cardBackground};
+`;
+const Alert = ({ variant, message, count, action, onAction }) => {
+    const theme = useTheme();
+    const colour = getThemeStatusColour(variant, theme).main;
+    return (React.createElement(AlertContainer, { colour: colour },
+        React.createElement(MessageContainer, null, message),
+        action && React.createElement(ActionContainer, { onClick: onAction }, action),
+        count && count > 1 && React.createElement(CountContainer, { colour: colour }, count)));
+};
+export default Alert;

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

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

package/build/components/Alert/Alert.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Alert } from '../..';
+/* eslint-disable no-alert */
+export const Standard = () => (React.createElement(React.Fragment, null,
+    React.createElement(Alert, { variant: 'info', message: 'This is a base alert' }),
+    React.createElement("br", null),
+    React.createElement(Alert, { variant: 'info', message: 'This is a base alert with quite a bit of content. It may wrap around to the next line...' })));
+export const Variants = () => (React.createElement(React.Fragment, null,
+    React.createElement(Alert, { variant: 'info', message: 'This is an info alert' }),
+    React.createElement("br", null),
+    React.createElement(Alert, { variant: 'success', message: 'This is a success alert' }),
+    React.createElement("br", null),
+    React.createElement(Alert, { variant: 'warn', message: 'This is a warn alert' }),
+    React.createElement("br", null),
+    React.createElement(Alert, { variant: 'danger', message: 'This is a danger alert' })));
+export const WithCount = () => React.createElement(Alert, { variant: 'info', count: 5, message: 'This is a alert with a count' });
+export const WithAction = () => (React.createElement(Alert, { variant: 'info', message: 'This is a alert with an action', action: 'Undo', onAction: () => alert('Undoing...') }));
+export default {
+    title: 'Components/Alert',
+    component: Alert,
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Status } from '../../theme/theme.types';
+export declare type BadgeVariant = Status;
+export interface BadgeProps {
+    children: React.ReactNode;
+    variant: BadgeVariant;
+}
+declare const Badge: ({ children, variant }: BadgeProps) => JSX.Element;
+export default Badge;

package/build/components/Badge/Badge.component.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
+const BadgeSpan = styled.span `
+  padding: 4px 8px;
+  border-radius: 2px;
+
+  background-color: ${(props) => getThemeStatusColour(props.variant, props.theme).main};
+  color: ${(props) => getThemeStatusColour(props.variant, props.theme).contrast};
+
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+
+  text-transform: lowercase;
+`;
+const Badge = ({ children, variant }) => {
+    return React.createElement(BadgeSpan, { variant: variant }, children);
+};
+export default Badge;

package/build/components/Badge/Badge.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/Badge/Badge.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Badge } from '../..';
+/* eslint-disable @typescript-eslint/no-empty-function */
+export const Standard = () => (React.createElement(React.Fragment, null,
+    React.createElement(Badge, { variant: 'info' }, "Pending"),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(Badge, { variant: 'success' }, "Accepted"),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(Badge, { variant: 'warn' }, "Expired"),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(Badge, { variant: 'danger' }, "Rejected")));
+export default {
+    title: 'Components/Badge',
+    component: Badge,
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ColourVariant } from '../../theme/theme.types';
+export interface ButtonProps {
+    children: React.ReactChild;
+    loading?: boolean;
+    variant?: ColourVariant;
+    type?: 'submit';
+    onClick?: () => void;
+}
+declare const Button: ({ children, loading, variant, type, onClick }: ButtonProps) => JSX.Element;
+export default Button;

package/build/components/Button/Button.component.js

@@ -0,0 +1,60 @@
+import React, { useContext } from 'react';
+import styled, { keyframes } from 'styled-components';
+import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
+import ButtonContext from './Button.context';
+const StyledButton = styled.button `
+  height: 48px;
+  outline: none;
+  box-shadow: none;
+  border: none;
+
+  cursor: pointer;
+
+  padding: 0 24px;
+
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-family: ${(props) => props.theme.fonts.default.family};
+
+  color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
+  background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).main};
+
+  border-radius: 2px;
+
+  // Props defined by the context
+  width: ${(props) => props.width};
+  align-self: ${(props) => props.alignSelf};
+  margin-top: ${(props) => props.marginTop};
+
+  &:hover {
+    background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).hover};
+  }
+`;
+const spinAnimation = keyframes `
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+`;
+const ButtonSpinner = styled.div `
+  display: inline-block;
+  width: 48px;
+  height: 48px;
+
+  &:after {
+    content: ' ';
+    display: block;
+    width: 24px;
+    height: 24px;
+    margin: 10px;
+    border-radius: 50%;
+    border: 2px solid ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
+    border-color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText} transparent
+      ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText} transparent;
+    animation-name: ${spinAnimation};
+    animation-duration: 1.2s;
+    animation-iteration-count: infinite;
+  }
+`;
+const Button = ({ children, loading, variant = 'primary', type, onClick }) => {
+    const { width, alignSelf, marginTop } = useContext(ButtonContext);
+    return (React.createElement(StyledButton, { width: width, alignSelf: alignSelf, marginTop: marginTop, variant: variant, type: type, onClick: onClick }, loading ? React.createElement(ButtonSpinner, { variant: variant }) : children));
+};
+export default Button;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface ButtonContextProps {
+    width?: string;
+    alignSelf?: string;
+    marginTop?: string;
+}
+declare const ButtonContext: import("react").Context<ButtonContextProps>;
+export default ButtonContext;

package/build/components/Button/Button.context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+const ButtonContext = createContext({
+    width: undefined,
+    alignSelf: undefined,
+    marginTop: undefined,
+});
+export default ButtonContext;

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

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

package/build/components/Button/Button.stories.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Button } from '../..';
+export const Standard = () => (React.createElement(React.Fragment, null,
+    React.createElement(Button, null, "Here is a primary button!"),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(Button, { variant: 'secondary' }, "Here is a secondary button!"),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(Button, { variant: 'tertiary' }, "Here is a tertiary button!")));
+export const Loading = () => (React.createElement(React.Fragment, null,
+    React.createElement(Button, { loading: true }, "Here is a primary button!"),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(Button, { variant: 'secondary', loading: true }, "Here is a secondary button!")));
+export const InteractiveLoading = () => {
+    const [loading, setLoading] = useState(false);
+    const handleLoad = () => {
+        setLoading(true);
+        setTimeout(() => setLoading(false), 1000);
+    };
+    return (React.createElement(Button, { loading: loading, onClick: handleLoad }, "Click me to load!"));
+};
+export default {
+    title: 'Components/Button',
+    component: Button,
+};

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

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

package/build/components/ButtonGroup/ButtonGroup.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+const ButtonGroupDiv = styled.div `
+  display: flex;
+
+  & > * {
+    margin-right: 8px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+`;
+const ButtonGroup = ({ children }) => {
+    return React.createElement(ButtonGroupDiv, null, children);
+};
+export default ButtonGroup;

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

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

package/build/components/ButtonGroup/ButtonGroup.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ButtonGroup, Button, SquareButton } from '../..';
+/* eslint-disable no-console */
+export const Standard = () => (React.createElement(ButtonGroup, null,
+    React.createElement(Button, { variant: 'secondary' }, "Cancel"),
+    React.createElement(Button, null, "Create")));
+export const TwoPrimary = () => (React.createElement(ButtonGroup, null,
+    React.createElement(Button, null, "No"),
+    React.createElement(Button, null, "Yes")));
+export const SquareButtons = () => (React.createElement(ButtonGroup, null,
+    React.createElement(SquareButton, null, "The first button in the group"),
+    React.createElement(SquareButton, null, "Middle one"),
+    React.createElement(SquareButton, null, "Last..")));
+export default {
+    title: 'Components/ButtonGroup',
+    component: ButtonGroup,
+};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CardSize } from './Card.context';
+export interface CardProps {
+    children: React.ReactNode;
+    size?: CardSize;
+    padded?: boolean;
+    onClick?: () => void;
+}
+declare const Card: {
+    ({ children, padded, size, onClick }: CardProps): JSX.Element;
+    Actions: ({ children }: import("./_CardActions.component").CardActionsProps) => React.ReactPortal | null;
+    Action: ({ children, onClick }: import("./_CardActions.component").CardActionProps) => JSX.Element;
+    Content: ({ children }: import("./_CardContent.component").CardContentProps) => JSX.Element;
+    SubContent: ({ children }: import("./_CardSubContent.component").CardSubContentProps) => JSX.Element;
+    Media: ({ children }: import("./_CardMedia.component").CardMediaProps) => JSX.Element;
+    Spacer: () => JSX.Element;
+    Header: ({ image, heading, subHeading, meta }: import("./_CardHeader.component").CardHeaderProps) => JSX.Element;
+};
+export default Card;

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

@@ -0,0 +1,101 @@
+import { motion } from 'framer-motion';
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import responsive from '../../responsive/responsive';
+import CardContext from './Card.context';
+import { CardActions, CardAction } from './_CardActions.component';
+import CardContent from './_CardContent.component';
+import CardHeader from './_CardHeader.component';
+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;
+  z-index: 1;
+  width: 100%;
+
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  box-shadow: ${(props) => props.theme.shadows.small};
+`;
+const CardOuter = styled(motion.div) `
+  ${(props) => {
+    switch (props.size) {
+        case 'fill':
+            return `
+          width: 100%;
+        `;
+        case 'xs':
+            return `
+          width: 240px;
+          ${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%;
+          `)}
+        `;
+    }
+}}
+
+  position: relative;
+  cursor: ${(props) => (props.usePointer ? 'pointer' : 'default')};
+  padding: ${(props) => (props.padded ? '16px' : 0)};
+`;
+const Card = ({ children, padded, size = 'sm', onClick }) => {
+    const actionsRef = useRef(null);
+    const [htmlActionsRef, setHtmlActionsRef] = useState();
+    const [showActions, setShowActions] = useState(false);
+    useEffect(() => {
+        if (actionsRef.current) {
+            setHtmlActionsRef(actionsRef.current);
+        }
+    }, [actionsRef]);
+    const handleClick = (e) => {
+        if (e.isActionClick) {
+            return;
+        }
+        if (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 },
+            React.createElement(CardActionsContainer, { ref: actionsRef }),
+            React.createElement(CardInner, null, children))));
+};
+Card.Actions = CardActions;
+Card.Action = CardAction;
+Card.Content = CardContent;
+Card.SubContent = CardSubContent;
+Card.Media = CardMedia;
+Card.Spacer = CardSpacer;
+Card.Header = CardHeader;
+export default Card;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+interface CardContextProps {
+    size: CardSize;
+    actionsRef?: HTMLDivElement;
+    showActions: boolean;
+}
+declare const CardContext: import("react").Context<CardContextProps>;
+export default CardContext;

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

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+const CardContext = createContext({
+    size: 'lg',
+    actionsRef: undefined,
+    showActions: false,
+});
+export default CardContext;

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

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