@dtdot/lego 0.14.0

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Card, CardGroup, LiveInput, Badge } from '../..';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPen, faTrash } from '@fortawesome/free-solid-svg-icons';
+export const Standard = () => (React.createElement(CardGroup, null,
+    React.createElement(Card, { size: 'sm' },
+        React.createElement(Card.Content, null, "Some content"),
+        React.createElement(Card.Spacer, null),
+        React.createElement(Card.Content, null, "Some more content..."),
+        React.createElement(Card.Spacer, null),
+        React.createElement(Card.SubContent, null, "Some sub content...")),
+    React.createElement(Card, { 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' })),
+        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: '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' })),
+        React.createElement(Card.Content, null, "A small card!")),
+    React.createElement(Card, { size: 'md' },
+        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, "A medium card..")),
+    React.createElement(Card, { size: 'lg' },
+        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, "A large card."))));
+export const CardHeader = () => (React.createElement(CardGroup, null,
+    React.createElement(Card, { size: 'sm' },
+        React.createElement(Card.Header, { image: 'https://www.jotform.com/blog/wp-content/uploads/2012/07/mario-luigi-yoschi-figures-163036.jpeg', heading: 'Mario & Luigi', subHeading: 'mario@gmail.com', meta: React.createElement(Badge, { variant: 'success' }, "approved") }),
+        React.createElement(Card.Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
+        React.createElement(Card.Content, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")),
+    React.createElement(Card, { size: 'sm' },
+        React.createElement(Card.Header, { heading: 'Mario & Luigi', subHeading: 'mario@gmail.com', meta: React.createElement(Badge, { variant: 'success' }, "approved") }),
+        React.createElement(Card.Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
+        React.createElement(Card.Content, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."))));
+export const Clickable = () => (React.createElement(CardGroup, null,
+    React.createElement(Card, { size: 'sm', onClick: () => console.log('test') },
+        React.createElement(Card.Content, null, "Some content"),
+        React.createElement(Card.Spacer, null),
+        React.createElement(Card.Content, null, "Some more content..."),
+        React.createElement(Card.Spacer, null),
+        React.createElement(Card.SubContent, null, "Some sub content..."))));
+export const WithActions = () => (React.createElement(React.Fragment, null,
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(CardGroup, null,
+        React.createElement(Card, { size: 'sm', onClick: () => console.log('Card Clicked') },
+            React.createElement(Card.Actions, null,
+                React.createElement(Card.Action, { onClick: () => console.log('Edit Clicked') },
+                    React.createElement(FontAwesomeIcon, { icon: faPen })),
+                React.createElement(Card.Action, { onClick: () => console.log('Delete Clicked') },
+                    React.createElement(FontAwesomeIcon, { icon: faTrash }))),
+            React.createElement(Card.Content, null, "Some content"),
+            React.createElement(Card.Spacer, null),
+            React.createElement(Card.Content, null, "Some more content..."),
+            React.createElement(Card.Spacer, null),
+            React.createElement(Card.SubContent, null, "Some sub content...")))));
+export default {
+    title: 'Components/Card',
+    component: Card,
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface CardGroupProps {
+    children: React.ReactNode;
+}
+declare const CardGroup: {
+    ({ children }: CardGroupProps): JSX.Element;
+    Small: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+};
+export default CardGroup;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+const GroupSmall = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  & > * {
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+const Group = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  & > * {
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+const CardGroup = ({ children }) => React.createElement(Group, null, children);
+CardGroup.Small = GroupSmall;
+export default CardGroup;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface CardActionsProps {
+    children: React.ReactNode;
+}
+export declare const CardActions: ({ children }: CardActionsProps) => React.ReactPortal | null;
+export interface CardActionProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+export declare const CardAction: ({ children, onClick }: CardActionProps) => JSX.Element;

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

@@ -0,0 +1,48 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useContext } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+import CardContext from './Card.context';
+const actionsHeight = 32;
+const ActionsContainer = styled(motion.div) `
+  display: flex;
+  padding: 0 8px;
+
+  cursor: default;
+`;
+const ActionContainer = styled.div `
+  height: ${actionsHeight}px;
+  width: 48px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: ${(props) => props.theme.colours.defaultFont};
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  padding: 4px;
+  border-radius: 4px 4px 0 0;
+
+  margin-right: 8px;
+  cursor: pointer;
+`;
+export const CardActions = ({ children }) => {
+    const { actionsRef, showActions } = useContext(CardContext);
+    if (!showActions) {
+        return null;
+    }
+    if (!actionsRef) {
+        return null;
+    }
+    return createPortal(React.createElement(AnimatePresence, null,
+        React.createElement(ActionsContainer, { key: 'modal', initial: { y: actionsHeight }, animate: { y: 0 }, exit: { y: actionsHeight }, transition: { type: 'spring', bounce: 0, duration: 0.6 } }, children)), actionsRef);
+};
+export const CardAction = ({ children, onClick }) => {
+    const handleClick = (e) => {
+        e.isActionClick = true;
+        if (onClick) {
+            onClick();
+        }
+    };
+    return (React.createElement(ActionContainer, { onClick: handleClick }, children));
+};

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

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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+const ContentInner = styled.div `
+  padding: 0 16px;
+  margin-bottom: 4px;
+
+  &:first-child {
+    padding-top: 16px;
+  }
+
+  &:last-child {
+    padding-bottom: 16px;
+    margin-bottom: 0;
+  }
+
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  color: ${(props) => props.theme.colours.defaultFont};
+`;
+const CardContent = ({ children }) => {
+    return React.createElement(ContentInner, null, children);
+};
+export default CardContent;

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

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

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '../..';
+const HeaderRow = styled.div `
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 16px;
+  margin-bottom: 8px;
+
+  border-bottom: thin solid ${(props) => props.theme.colours.defaultBorder};
+`;
+const LeftContainer = styled.div `
+  display: flex;
+`;
+const ImageContainer = styled.div `
+  width: 36px;
+  height: 36px;
+  margin-right: 8px;
+`;
+const Image = styled.img `
+  width: 36px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: 50%;
+`;
+const TextContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+`;
+const MetaContainer = styled.div `
+  margin-left: 8px;
+  display: flex;
+  align-items: center;
+`;
+const CardHeader = ({ image, heading, subHeading, meta }) => {
+    return (React.createElement(HeaderRow, null,
+        React.createElement(LeftContainer, null,
+            image && (React.createElement(ImageContainer, null,
+                React.createElement(Image, { src: image }))),
+            React.createElement(TextContainer, null,
+                React.createElement("div", null,
+                    React.createElement(Text, null, heading)),
+                React.createElement("div", null,
+                    React.createElement(Text, { variant: 'secondary' }, subHeading)))),
+        meta && React.createElement(MetaContainer, null, meta)));
+};
+export default CardHeader;

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

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

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

@@ -0,0 +1,48 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import responsive from '../../responsive/responsive';
+import CardContext from './Card.context';
+const MediaContainer = styled.div `
+  ${(props) => {
+    switch (props.size) {
+        case 'sm':
+            return `
+          height: 160px;
+        `;
+        case 'md':
+            return `
+          height: 260px;
+
+          ${responsive.useStylesFor('mobile').andSmaller(`
+            height: 160px;
+          `)}
+        `;
+        case 'lg':
+        default:
+            return `
+          height: 400px;
+
+          ${responsive.useStylesFor('tablet').andSmaller(`
+            height: 260px;
+          `)}
+
+          ${responsive.useStylesFor('mobile').andSmaller(`
+            height: 160px;
+          `)}
+        `;
+    }
+}}
+
+  margin-bottom: 16px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+const CardMedia = ({ children }) => {
+    const { size } = useContext(CardContext);
+    return React.createElement(MediaContainer, { size: size }, children);
+};
+export default CardMedia;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CardSpacer: () => JSX.Element;
+export default CardSpacer;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Spacer } from '../..';
+const CardSpacer = () => React.createElement(Spacer, { size: '1x' });
+export default CardSpacer;

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

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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+const ContentInner = styled.div `
+  padding: 0 16px;
+  margin-bottom: 4px;
+
+  &:first-child {
+    padding-top: 16px;
+  }
+
+  &:last-child {
+    padding-bottom: 16px;
+    margin-bottom: 0;
+  }
+
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  color: ${(props) => props.theme.colours.secondaryFont};
+`;
+const CardSubContent = ({ children }) => {
+    return React.createElement(ContentInner, null, children);
+};
+export default CardSubContent;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare type ControlGroupVariation = 'focus' | 'submission' | 'comfortable';
+export interface ControlGroupProps {
+    children: React.ReactNode;
+    variation?: ControlGroupVariation;
+}
+declare const ControlGroup: {
+    ({ children, variation }: ControlGroupProps): JSX.Element | null;
+    Spacer: () => JSX.Element;
+};
+export default ControlGroup;

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+import ButtonContext from '../Button/Button.context';
+import SubHeading from '../SubHeading/SubHeading.component';
+import ControlGroupSpacer from './_ControlGroupSpacer.component';
+const ComfortableContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  ${SubHeading} {
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+
+  & > * {
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+`;
+const SubmissionContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  & > * {
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+const FocusContainer = styled.div `
+  & > * {
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+const ControlGroup = ({ children, variation = 'focus' }) => {
+    if (variation === 'focus') {
+        const buttonContextValue = {
+            width: '100%',
+        };
+        return (React.createElement(ButtonContext.Provider, { value: buttonContextValue },
+            React.createElement(FocusContainer, null, children)));
+    }
+    if (variation === 'submission') {
+        const buttonContextValue = {
+            alignSelf: 'flex-end',
+            marginTop: '24px',
+        };
+        return (React.createElement(ButtonContext.Provider, { value: buttonContextValue },
+            React.createElement(SubmissionContainer, null, children)));
+    }
+    if (variation === 'comfortable') {
+        const buttonContextValue = {
+            alignSelf: 'flex-end',
+            marginTop: '24px',
+        };
+        return (React.createElement(ButtonContext.Provider, { value: buttonContextValue },
+            React.createElement(ComfortableContainer, null, children)));
+    }
+    return null;
+};
+ControlGroup.Spacer = ControlGroupSpacer;
+export default ControlGroup;

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

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

package/build/components/ControlGroup/ControlGroup.stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ControlGroup, Input, Button } from '../..';
+/* eslint-disable @typescript-eslint/no-empty-function */
+export const Focus = () => (React.createElement(React.Fragment, null,
+    React.createElement(ControlGroup, null,
+        React.createElement(Input, { placeholder: 'username', name: 'username' }),
+        React.createElement(Input, { placeholder: 'password', name: 'password' }),
+        React.createElement(ControlGroup.Spacer, null),
+        React.createElement(Button, null, "Submit"))));
+export const Submission = () => (React.createElement(React.Fragment, null,
+    React.createElement(ControlGroup, { variation: 'submission' },
+        React.createElement(Input, { placeholder: 'username', name: 'username' }),
+        React.createElement(Input, { placeholder: 'password', name: 'password' }),
+        React.createElement(ControlGroup.Spacer, null),
+        React.createElement(Button, null, "Submit"))));
+export const Spaced = () => (React.createElement(React.Fragment, null,
+    React.createElement(ControlGroup, { variation: 'comfortable' },
+        React.createElement(Input, { label: 'username', placeholder: 'username', name: 'username' }),
+        React.createElement(Input, { label: 'password', placeholder: 'password', name: 'password' }),
+        React.createElement(Button, null, "Submit"))));
+export default {
+    title: 'Components/ControlGroup',
+    component: ControlGroup,
+};

package/build/components/ControlGroup/_ControlGroupSpacer.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ControlGroupSpacer: () => JSX.Element;
+export default ControlGroupSpacer;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Spacer } from '../..';
+const ControlGroupSpacer = () => React.createElement(Spacer, { size: '1x' });
+export default ControlGroupSpacer;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface Option {
+    value: string | number;
+    label: string;
+}
+export interface FancyCheckboxProps {
+    name: string;
+    label?: string;
+    options: Option[];
+    value?: string;
+    onChange?: (value: any) => void;
+}
+declare const FancyCheckbox: ({ name, label, options, value, onChange }: FancyCheckboxProps) => JSX.Element;
+export default FancyCheckbox;

package/build/components/FancyCheckbox/FancyCheckbox.component.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
+import ButtonGroup from '../ButtonGroup/ButtonGroup.component';
+import useFormNode from '../Form/useFormNode.hook';
+const FancyCheckboxLabel = styled.label `
+  display: block;
+  padding-bottom: 8px;
+
+  color: ${(props) => getThemeControlColours(props.theme).font};
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+`;
+const StyledButton = styled.button `
+  height: 128px;
+  width: 128px;
+
+  outline: none;
+  box-shadow: none;
+  border: none;
+
+  cursor: pointer;
+
+  padding: 0 24px;
+
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font: ${(props) => props.theme.fonts.default.family};
+
+  color: ${(props) => props.selected ? props.theme.colours.primary.contrastText : props.theme.colours.tertiary.contrastText};
+  background-color: ${(props) => props.selected ? props.theme.colours.primary.main : props.theme.colours.tertiary.main};
+
+  border-radius: 2px;
+
+  &:hover {
+    background-color: ${(props) => props.selected ? props.theme.colours.primary.main : props.theme.colours.tertiary.hover};
+  }
+`;
+const FancyCheckbox = ({ name, label, options, value, onChange }) => {
+    const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    const handleChange = (_value) => {
+        if (onChange) {
+            onChange(_value);
+        }
+        if (contextOnChange) {
+            contextOnChange(_value);
+        }
+    };
+    const selectedValue = value || contextValue;
+    return (React.createElement("div", null,
+        label && React.createElement(FancyCheckboxLabel, { htmlFor: name }, label),
+        React.createElement(ButtonGroup, null, options.map((option) => (React.createElement(StyledButton, { selected: option.value === selectedValue, key: option.value, onClick: () => handleChange(option.value) }, option.label))))));
+};
+export default FancyCheckbox;

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

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { FancyCheckbox, Form } from '../..';
+const options = [
+    {
+        value: 'fireball',
+        label: 'Chinese Fireball',
+    },
+    {
+        value: 'longhorn',
+        label: 'Romanian Longhorn',
+    },
+    {
+        value: 'ridgeback',
+        label: 'Norwegian Ridgeback',
+    },
+    {
+        value: 'horntail',
+        label: 'Hungarian Horntail',
+    },
+];
+export const Standard = () => {
+    const [value, setValue] = useState({ dragon: '' });
+    return (React.createElement(Form, { value: value, onChange: setValue },
+        React.createElement(FancyCheckbox, { name: 'dragon', options: options })));
+};
+export default {
+    title: 'Components/FancyCheckbox',
+    component: FancyCheckbox,
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface FormProps {
+    value: any;
+    onChange: (value: any) => void;
+    onSubmit?: () => void;
+    children: React.ReactNode;
+}
+declare const Form: ({ value, onChange, onSubmit, children }: FormProps) => JSX.Element;
+export default Form;

package/build/components/Form/Form.component.js

@@ -0,0 +1,24 @@
+// eslint-disable-next-line @typescript-eslint/no-use-before-define
+import React from 'react';
+import FormStateContext from './FormState.context';
+const Form = ({ value, onChange, onSubmit, children }) => {
+    const onChangeFn = (key, fieldValue) => {
+        onChange({
+            ...value,
+            [key]: fieldValue,
+        });
+    };
+    const onSubmitFn = (event) => {
+        event.preventDefault();
+        if (onSubmit) {
+            onSubmit();
+        }
+    };
+    const contextValue = {
+        value,
+        onChange: onChangeFn,
+    };
+    return (React.createElement(FormStateContext.Provider, { value: contextValue },
+        React.createElement("form", { onSubmit: onSubmitFn }, children)));
+};
+export default Form;

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

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