@dtdot/lego 1.8.3 → 2.0.0-11

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

@@ -1,10 +1,18 @@
-/// <reference types="react" />
+import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { ColourVariant } from '../../theme/theme.types';
-import { IActionMenuItem } from './_ActionMenu.types';
+import { ButtonSize } from '../Button/Button.component';
 export interface ActionMenuProps {
-    'items': IActionMenuItem[];
+    'children': React.ReactNode;
     'variant'?: ColourVariant;
+    'size'?: ButtonSize;
+    'icon'?: IconProp;
+    'text'?: string;
     'data-cy'?: string;
 }
-declare const ActionMenu: ({ items, variant, "data-cy": dataCy }: ActionMenuProps) => JSX.Element;
+declare const ActionMenu: {
+    ({ children, variant, size, icon, text, "data-cy": dataCy }: ActionMenuProps): JSX.Element;
+    Item: ({ children, onClick, "data-cy": dataCy }: import("./_ActionMenuItem.component").ActionMenuItemProps) => JSX.Element;
+    Checkbox: ({ children, checked, onClick, "data-cy": dataCy }: import("./_ActionMenuCheckbox.component").ActionMenuCheckboxProps) => JSX.Element;
+};
 export default ActionMenu;

package/build/components/ActionMenu/ActionMenu.component.js

@@ -1,16 +1,14 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
-import styled from 'styled-components';
 import Button from '../Button/Button.component';
+import ActionMenuContext from './ActionMenu.context';
+import ActionMenuCheckbox from './_ActionMenuCheckbox.component';
+import ActionMenuItem from './_ActionMenuItem.component';
 import ActionMenuPanel from './_ActionMenuPanel.component';
-const StyledIcon = styled(FontAwesomeIcon) `
-  font-size: 18px;
-`;
 const offsetFn = () => [70, 4];
-const ActionMenu = ({ items, variant, 'data-cy': dataCy }) => {
+const ActionMenu = ({ children, variant, size, icon, text, 'data-cy': dataCy }) => {
     const [shown, setShown] = useState(false);
     const [referenceElement, setReferenceElement] = useState();
     const [popperElement, setPopperElement] = useState();
@@ -35,18 +33,13 @@ const ActionMenu = ({ items, variant, 'data-cy': dataCy }) => {
             document.removeEventListener('mouseup', handleGlobalClick);
         };
     }, [handleGlobalClick, popperElement]);
-    const augmentedItems = items.map((item) => ({
-        ...item,
-        onClick: () => {
-            setShown(false);
-            item.onClick();
-        },
-    }));
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { variant: variant, "data-cy": dataCy || 'action-menu-button', ref: setReferenceElement, onClick: () => setShown(true) },
-            React.createElement(StyledIcon, { icon: faEllipsisV })),
+        React.createElement(Button, { variant: variant, size: size, icon: icon || faEllipsisV, "data-cy": dataCy || 'action-menu-button', ref: setReferenceElement, onClick: () => setShown(true) }, text),
         shown &&
-            ReactDOM.createPortal(React.createElement("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper },
-                React.createElement(ActionMenuPanel, { items: augmentedItems })), document.querySelector('body'))));
+            ReactDOM.createPortal(React.createElement("div", { ref: setPopperElement, style: { ...styles.popper, zIndex: 999 }, ...attributes.popper },
+                React.createElement(ActionMenuContext.Provider, { value: { closeActionMenu: () => setShown(false) } },
+                    React.createElement(ActionMenuPanel, null, children))), document.querySelector('body'))));
 };
+ActionMenu.Item = ActionMenuItem;
+ActionMenu.Checkbox = ActionMenuCheckbox;
 export default ActionMenu;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface ActionMenuContextProps {
+    closeActionMenu: () => void;
+}
+declare const ActionMenuContext: import("react").Context<ActionMenuContextProps>;
+export default ActionMenuContext;

package/build/components/ActionMenu/ActionMenu.context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const ActionMenuContext = createContext({
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    closeActionMenu: () => { },
+});
+export default ActionMenuContext;

package/build/components/ActionMenu/_ActionMenuCheckbox.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ActionMenuCheckboxProps {
+    'children': React.ReactNode;
+    'checked': boolean;
+    'onClick': () => void;
+    'data-cy'?: string;
+}
+declare const ActionMenuCheckbox: ({ children, checked, onClick, "data-cy": dataCy }: ActionMenuCheckboxProps) => JSX.Element;
+export default ActionMenuCheckbox;

package/build/components/ActionMenu/_ActionMenuCheckbox.component.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import styled, { useTheme } from 'styled-components';
+import { Checkmark } from '../common/Checkmark.component';
+const ActionMenuCheckboxOuter = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 42px;
+
+  padding: 0px 16px;
+  cursor: pointer;
+
+  color: ${(props) => props.theme.colours.defaultFont};
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+`;
+const Spacer = styled.div `
+  width: 16px;
+`;
+const ActionMenuCheckbox = ({ children, checked, onClick, 'data-cy': dataCy }) => {
+    const theme = useTheme();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ActionMenuCheckboxOuter, { style: { backgroundColor: theme.colours.tertiary.main }, whileHover: { backgroundColor: theme.colours.tertiary.hover }, onClick: onClick, "data-cy": dataCy || 'action-menu-checkbox' },
+            children,
+            React.createElement(Spacer, null),
+            React.createElement(Checkmark, { checked: checked, large: false }))));
+};
+export default ActionMenuCheckbox;

package/build/components/ActionMenu/_ActionMenuItem.component.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 export interface ActionMenuItemProps {
-    label: string;
-    onClick: () => void;
+    'children': React.ReactNode;
+    'onClick': () => void;
+    'data-cy'?: string;
 }
-declare const ActionMenuItem: ({ label, onClick }: ActionMenuItemProps) => JSX.Element;
+declare const ActionMenuItem: ({ children, onClick, "data-cy": dataCy }: ActionMenuItemProps) => JSX.Element;
 export default ActionMenuItem;

package/build/components/ActionMenu/_ActionMenuItem.component.js

@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
+import ActionMenuContext from './ActionMenu.context';
 const ActionMenuItemOuter = styled(motion.div) `
-  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  height: 42px;
+
+  padding: 0px 16px;
   cursor: pointer;
 
   color: ${(props) => props.theme.colours.defaultFont};
@@ -10,9 +15,14 @@ const ActionMenuItemOuter = styled(motion.div) `
   font-size: ${(props) => props.theme.fonts.default.size};
   font-weight: ${(props) => props.theme.fonts.default.weight};
 `;
-const ActionMenuItem = ({ label, onClick }) => {
+const ActionMenuItem = ({ children, onClick, 'data-cy': dataCy }) => {
     const theme = useTheme();
+    const { closeActionMenu } = useContext(ActionMenuContext);
+    const handleClick = () => {
+        onClick();
+        closeActionMenu();
+    };
     return (React.createElement(React.Fragment, null,
-        React.createElement(ActionMenuItemOuter, { style: { backgroundColor: theme.colours.tertiary.main }, whileHover: { backgroundColor: theme.colours.tertiary.hover }, onClick: onClick, "data-cy": 'action-menu-item' }, label)));
+        React.createElement(ActionMenuItemOuter, { style: { backgroundColor: theme.colours.tertiary.main }, whileHover: { backgroundColor: theme.colours.tertiary.hover }, onClick: handleClick, "data-cy": dataCy || 'action-menu-item' }, children)));
 };
 export default ActionMenuItem;

package/build/components/ActionMenu/_ActionMenuPanel.component.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { IActionMenuItem } from './_ActionMenu.types';
+import React from 'react';
 export interface ActionMenuPanelProps {
-    items: IActionMenuItem[];
+    children: React.ReactNode;
 }
-declare const ActionMenuPanel: ({ items }: ActionMenuPanelProps) => JSX.Element;
+declare const ActionMenuPanel: ({ children }: ActionMenuPanelProps) => JSX.Element;
 export default ActionMenuPanel;

package/build/components/ActionMenu/_ActionMenuPanel.component.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import ActionMenuItem from './_ActionMenuItem.component';
 const ActionMenuPanelOuter = styled.div `
   background-color: ${(props) => props.theme.colours.tertiary.main};
   min-width: 160px;
 `;
-const ActionMenuPanel = ({ items }) => (React.createElement(ActionMenuPanelOuter, { "data-cy": 'action-menu-popover' }, items.map((item) => (React.createElement(ActionMenuItem, { key: item.label, label: item.label, onClick: item.onClick })))));
+const ActionMenuPanel = ({ children }) => (React.createElement(ActionMenuPanelOuter, { "data-cy": 'action-menu-popover' }, children));
 export default ActionMenuPanel;

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

@@ -1,10 +1,14 @@
 import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { ColourVariant } from '../../theme/theme.types';
+export type ButtonSize = 'sm' | 'md';
 export interface ButtonProps {
-    'children': React.ReactChild;
+    'children'?: React.ReactNode;
     'loading'?: boolean;
     'variant'?: ColourVariant;
+    'size'?: ButtonSize;
     'type'?: 'submit' | 'button';
+    'icon'?: IconProp;
     'onClick'?: () => void;
     'data-cy'?: string;
 }

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

@@ -1,49 +1,105 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useContext } from 'react';
 import styled, { keyframes } from 'styled-components';
 import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
 import ButtonContext from './Button.context';
+const getButtonHeightPx = (size) => {
+    switch (size) {
+        case 'sm':
+            return '32px';
+        case 'md':
+            return '48px';
+    }
+};
+const getButtonPaddingPx = (size) => {
+    switch (size) {
+        case 'sm':
+            return '0 12px';
+        case 'md':
+            return '0 24px';
+    }
+};
+const getIconContainerSizePx = (size) => {
+    switch (size) {
+        case 'sm':
+            return { width: '32px', height: '32px' };
+        case 'md':
+            return { width: '48px', height: '48px' };
+    }
+};
+const IconOuter = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
+  background-color: ${(props) => props.noBackground
+    ? 'transparent'
+    : props.iconOnly
+        ? getThemeVariantColours(props.variant, props.theme).main
+        : getThemeVariantColours(props.variant, props.theme).darker};
+
+  height: ${(props) => props.height || getIconContainerSizePx(props.size).height};
+  width: ${(props) => getIconContainerSizePx(props.size).width};
+`;
 const StyledButton = styled.button `
   outline: none;
   box-shadow: none;
   border: none;
 
   cursor: pointer;
-
-  padding: 0 24px;
+  padding: 0;
 
   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};
+  color: ${(props) => getThemeVariantColours(props.noBackground ? 'secondary' : props.variant, props.theme).contrastText};
+  background-color: ${(props) => props.noBackground ? 'transparent' : getThemeVariantColours(props.variant, props.theme).main};
 
   border-radius: 2px;
 
   // Props defined by the context
-  height: ${(props) => props.height || '48px'};
+  height: ${(props) => props.height || getButtonHeightPx(props.size)};
   width: ${(props) => props.width};
   align-self: ${(props) => props.alignSelf};
   margin-top: ${(props) => props.marginTop};
 
   &:hover {
-    background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).hover};
+    background-color: ${(props) => props.noBackground ? 'transparent' : getThemeVariantColours(props.variant, props.theme).hover};
+
+    ${IconOuter} {
+      background-color: ${(props) => props.iconOnly
+    ? getThemeVariantColours(props.variant, props.theme).hover
+    : getThemeVariantColours(props.variant, props.theme).darkerHover};
+    }
   }
 `;
+const ButtonInner = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ButtonTextContainer = styled.span `
+  padding: ${(props) => getButtonPaddingPx(props.size)};
+`;
 const spinAnimation = keyframes `
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
 `;
+const SpinnerContainer = styled.span `
+  padding: 0 24px;
+`;
 const ButtonSpinner = styled.div `
   display: inline-block;
-  width: 48px;
-  height: 48px;
+  width: ${(props) => getButtonHeightPx(props.size)};
+  height: ${(props) => getButtonHeightPx(props.size)};
 
   &:after {
     content: ' ';
     display: block;
-    width: 24px;
-    height: 24px;
-    margin: 10px;
+    width: ${(props) => (props.size === 'md' ? '24px' : '16px')};
+    height: ${(props) => (props.size === 'md' ? '24px' : '16px')};
+    margin: ${(props) => (props.size === 'md' ? '10px' : '6px')};
     border-radius: 50%;
     border: 2px solid ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
     border-color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText} transparent
@@ -54,8 +110,12 @@ const ButtonSpinner = styled.div `
   }
 `;
 const Button = React.forwardRef(function Button(props, ref) {
-    const { children, loading, variant = 'primary', type = 'button', onClick, 'data-cy': dataCy } = props;
-    const { width, height, alignSelf, marginTop } = useContext(ButtonContext);
-    return (React.createElement(StyledButton, { ref: ref, width: width, height: height, alignSelf: alignSelf, marginTop: marginTop, variant: variant, type: type, onClick: onClick, "data-cy": dataCy || 'button' }, loading ? React.createElement(ButtonSpinner, { "data-cy": 'button-loading-spinner', variant: variant }) : children));
+    const { children, loading, variant = 'primary', size = 'md', type = 'button', icon, onClick, 'data-cy': dataCy, } = props;
+    const { width, height, alignSelf, marginTop, noBackground } = useContext(ButtonContext);
+    return (React.createElement(StyledButton, { ref: ref, width: width, height: height, alignSelf: alignSelf, marginTop: marginTop, noBackground: noBackground, variant: variant, size: size, type: type, onClick: onClick, "data-cy": dataCy || 'button', iconOnly: !children }, loading ? (React.createElement(SpinnerContainer, null,
+        React.createElement(ButtonSpinner, { "data-cy": 'button-loading-spinner', variant: variant, size: size, iconOnly: !children }))) : (React.createElement(ButtonInner, null,
+        children && React.createElement(ButtonTextContainer, { size: size }, children),
+        icon && (React.createElement(IconOuter, { noBackground: noBackground, variant: variant, size: size, height: height, iconOnly: !children },
+            React.createElement(FontAwesomeIcon, { icon: icon })))))));
 });
 export default Button;

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

@@ -4,6 +4,7 @@ export interface ButtonContextProps {
     height?: string;
     alignSelf?: string;
     marginTop?: string;
+    noBackground?: boolean;
 }
 declare const ButtonContext: import("react").Context<ButtonContextProps>;
 export default ButtonContext;

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

@@ -4,5 +4,6 @@ const ButtonContext = createContext({
     height: undefined,
     alignSelf: undefined,
     marginTop: undefined,
+    noBackground: undefined,
 });
 export default ButtonContext;

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Text } from '../..';
+import ButtonContext from '../Button/Button.context';
 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};
+  background-color: ${(props) => props.theme.colours.cardBackgroundSecondary};
 `;
 const LeftContainer = styled.div `
   display: flex;
@@ -43,6 +44,7 @@ const CardHeader = ({ image, heading, subHeading, meta }) => {
                     React.createElement(Text, null, heading)),
                 React.createElement("div", null,
                     React.createElement(Text, { variant: 'secondary' }, subHeading)))),
-        meta && React.createElement(MetaContainer, null, meta)));
+        meta && (React.createElement(MetaContainer, null,
+            React.createElement(ButtonContext.Provider, { value: { height: '24px', width: '24px', noBackground: true } }, meta)))));
 };
 export default CardHeader;

package/build/components/Checklist/_ChecklistItem.component.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
+import { Checkmark } from '../common/Checkmark.component';
 const Outerlabel = styled(motion.label) `
   position: relative;
   margin-bottom: 4px;
@@ -26,28 +27,8 @@ const HiddenCheckbox = styled.input `
   height: 0;
   width: 0;
 `;
-const Checkmark = styled.div `
-  position: relative;
-  height: ${(props) => (props.large ? '36px' : '24px')};
-  width: ${(props) => (props.large ? '36px' : '24px')};
-  margin-right: 8px;
-  background-color: ${(props) => props.theme.colours.cardBackground};
-
-  &:after {
-    content: '';
-    position: absolute;
-    display: ${(props) => (props.checked ? 'block' : 'none')};
-
-    left: ${(props) => (props.large ? '14px' : '9px')};
-    top: ${(props) => (props.large ? '7px' : '5px')};
-    width: ${(props) => (props.large ? '7px' : '5px')};
-    height: ${(props) => (props.large ? '16px' : '10px')};
-    border: solid ${(props) => props.theme.colours.defaultFont};
-    border-width: 0 3px 3px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-  }
+const Spacer = styled.div `
+  width: 8px;
 `;
 const Strikethrough = styled.div `
   position: absolute;
@@ -71,6 +52,7 @@ const ChecklistItem = ({ label, value, onChange, large }) => {
     };
     return (React.createElement(Outerlabel, { checked: value, whileHover: { backgroundColor: theme.colours.cardBackground }, "data-cy": value ? 'checklist-item-checked' : 'checklist-item' },
         React.createElement(Checkmark, { checked: value, large: large }),
+        React.createElement(Spacer, null),
         label,
         React.createElement(HiddenCheckbox, { type: 'checkbox', checked: value, onChange: handleChange }),
         value && React.createElement(Strikethrough, { large: large }, label)));

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

@@ -6,5 +6,8 @@ interface FormProps {
     onSubmit?: () => void;
     children: React.ReactNode;
 }
-declare const Form: ({ value, errors, onChange, onSubmit, children }: FormProps) => JSX.Element;
+declare const Form: {
+    ({ value, errors, onChange, onSubmit, children }: FormProps): JSX.Element;
+    NestedFormArray: ({ name, index, children }: import("./_NestedFormArray").NestedFormArrayProps) => JSX.Element;
+};
 export default Form;

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

@@ -1,6 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 import React from 'react';
 import FormStateContext from './FormState.context';
+import NestedFormArray from './_NestedFormArray';
 const Form = ({ value, errors = {}, onChange, onSubmit, children }) => {
     const onChangeFn = (key, fieldValue) => {
         onChange({
@@ -22,4 +23,5 @@ const Form = ({ value, errors = {}, onChange, onSubmit, children }) => {
     return (React.createElement(FormStateContext.Provider, { value: contextValue },
         React.createElement("form", { onSubmit: onSubmitFn }, children)));
 };
+Form.NestedFormArray = NestedFormArray;
 export default Form;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface NestedFormArrayProps {
+    name: string;
+    index: number;
+    children: React.ReactNode;
+}
+declare const NestedFormArray: ({ name, index, children }: NestedFormArrayProps) => JSX.Element;
+export default NestedFormArray;

package/build/components/Form/_NestedFormArray.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormStateContext from './FormState.context';
+import useFormNode from './useFormNode.hook';
+const NestedFormArray = ({ name, index, children }) => {
+    const { value, error, onChange } = useFormNode(name);
+    const safeValue = Array.from(Array(Math.max(index + 1, value?.length || 0))).map((_, i) => value?.[i] || {});
+    const safeError = Array.from(Array(Math.max(index + 1, value?.length || 0))).map((_, i) => error?.[i] || {});
+    const nestedValue = safeValue[index];
+    const nestedErrors = safeError[index];
+    console.log('safe', safeValue);
+    const onChangeFn = (key, fieldValue) => {
+        const newValue = [
+            ...safeValue.map((item, i) => (i === index ? { ...item, [key]: fieldValue } : item)),
+        ];
+        console.log(newValue);
+        onChange && onChange(newValue);
+    };
+    const contextValue = {
+        value: nestedValue,
+        errors: nestedErrors,
+        onChange: onChangeFn,
+    };
+    return React.createElement(FormStateContext.Provider, { value: contextValue }, children);
+};
+export default NestedFormArray;

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

@@ -6,5 +6,6 @@ declare const Heading: {
     ({ children }: HeadingProps): JSX.Element;
     SubHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
     FormHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+    DividerHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
 };
 export default Heading;

package/build/components/Heading/Heading.component.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import DividerHeading from './_DividerHeading.component';
 import FormHeading from './_FormHeading.component';
 import SubHeading from './_SubHeading.component';
 const HeadingContainer = styled.h2 `
@@ -14,4 +15,5 @@ const HeadingContainer = styled.h2 `
 const Heading = ({ children }) => React.createElement(HeadingContainer, null, children);
 Heading.SubHeading = SubHeading;
 Heading.FormHeading = FormHeading;
+Heading.DividerHeading = DividerHeading;
 export default Heading;

package/build/components/Heading/_DividerHeading.component.d.ts

@@ -0,0 +1,2 @@
+declare const DividerHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+export default DividerHeading;

package/build/components/Heading/_DividerHeading.component.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+const DividerHeading = styled.h3 `
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+
+  color: ${(props) => props.theme.colours.defaultFont};
+
+  width: 100%;
+  padding: 8px;
+
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  box-shadow: ${(props) => props.theme.shadows.small};
+`;
+export default DividerHeading;

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

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-declare const Loader: () => JSX.Element;
+export interface LoaderProps {
+    variant?: 'page-loader' | 'default';
+}
+declare const Loader: ({ variant }: LoaderProps) => JSX.Element;
 export default Loader;

package/build/components/Loader/Loader.component.js

@@ -1,6 +1,13 @@
 import React from 'react';
 import { motion } from 'framer-motion';
+import styled from 'styled-components';
 import colours from '../../colours/colours';
+const PageLoaderContainer = styled.div `
+  display: flex;
+  height: 300px;
+  justify-content: center;
+  align-items: center;
+`;
 const loadingContainer = {
     width: '40px',
     height: '26px',
@@ -40,10 +47,15 @@ const loadingCircleTransition = {
     repeatType: 'reverse',
     ease: 'easeInOut',
 }; // Framer motion isn't accepting 'repeatType' but animation breaks without it
-const Loader = () => {
-    return (React.createElement(motion.div, { style: loadingContainer, variants: loadingContainerVariants, initial: 'start', animate: 'end', "data-cy": 'loader' },
-        React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
-        React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
-        React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition })));
+const BaseLoader = () => (React.createElement(motion.div, { style: loadingContainer, variants: loadingContainerVariants, initial: 'start', animate: 'end', "data-cy": 'loader' },
+    React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
+    React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
+    React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition })));
+const Loader = ({ variant = 'default' }) => {
+    if (variant === 'page-loader') {
+        return (React.createElement(PageLoaderContainer, null,
+            React.createElement(BaseLoader, null)));
+    }
+    return React.createElement(BaseLoader, null);
 };
 export default Loader;

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

@@ -4,6 +4,7 @@ export interface MinimalMenuProps {
 }
 declare const MinimalMenu: {
     ({ children }: MinimalMenuProps): JSX.Element;
+    Header: ({ hiddenMenu, text, rightContent }: import("./_MinimalMenuHeader.component").MinimalMenuHeaderProps) => JSX.Element;
     Item: ({ icon, active, onClick, "data-cy": dataCy }: import("./_MinimalMenuItem.component").MinimalMenuItemProps) => JSX.Element;
     Page: ({ children, hiddenMenu }: import("./_MinimalMenuPage.component").MinimalMenuPageProps) => JSX.Element;
 };

package/build/components/MinimalMenu/MinimalMenu.component.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useIsScreenSize } from '../../responsive/responsive';
+import MinimalMenuHeader from './_MinimalMenuHeader.component';
 import MinimalMenuItem from './_MinimalMenuItem.component';
 import MinimalMenuPage from './_MinimalMenuPage.component';
 import DesktopMinimalMenuContainer from './desktop/_DesktopMinimalMenuContainer.component';
@@ -11,6 +12,7 @@ const MinimalMenu = ({ children }) => {
     }
     return React.createElement(DesktopMinimalMenuContainer, null, children);
 };
+MinimalMenu.Header = MinimalMenuHeader;
 MinimalMenu.Item = MinimalMenuItem;
 MinimalMenu.Page = MinimalMenuPage;
 export default MinimalMenu;

package/build/components/MinimalMenu/_MinimalMenuHeader.component.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface MinimalMenuHeaderProps {
+    /** Set the page to be in hidden menu mode.
+     * This is useful for rendering your app and preventing re-renders between a un-authenticated no-menu mode and the regular authenticated mode
+     **/
+    hiddenMenu?: boolean;
+    text?: string;
+    rightContent?: React.ReactNode;
+}
+/**
+ * A header that is designed to be nested within the page content.
+ * You can use a header per page or simply use a single header for your entire application.
+ */
+declare const MinimalMenuHeader: ({ hiddenMenu, text, rightContent }: MinimalMenuHeaderProps) => JSX.Element;
+export default MinimalMenuHeader;

package/build/components/MinimalMenu/_MinimalMenuHeader.component.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+const MinimalMenuHeaderContainer = styled.div ``;
+const Header = styled.div `
+  height: 48px;
+  background-color: ${(props) => props.theme.colours.cardBackground};
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const HeaderItem = styled.div `
+  padding: 0 16px;
+`;
+const TitleText = styled.div `
+  font-family: ${(props) => props.theme.fonts.subHeading.family};
+  font-size: ${(props) => props.theme.fonts.subHeading.size};
+  font-weight: ${(props) => props.theme.fonts.subHeading.weight};
+  color: ${(props) => props.theme.colours.defaultFont};
+`;
+/**
+ * A header that is designed to be nested within the page content.
+ * You can use a header per page or simply use a single header for your entire application.
+ */
+const MinimalMenuHeader = ({ hiddenMenu, text, rightContent }) => {
+    return (React.createElement(MinimalMenuHeaderContainer, { hiddenMenu: !!hiddenMenu },
+        React.createElement(Header, null,
+            React.createElement(HeaderItem, null, text && React.createElement(TitleText, null, text)),
+            React.createElement(HeaderItem, null, rightContent))));
+};
+export default MinimalMenuHeader;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type SpacerSize = '0.5x' | '1x' | '2x' | '4x' | '6x';
+export type SpacerSize = '0.5x' | '1x' | '2x' | '4x' | '6x' | '8x';
 export interface SpacerProps {
     size: SpacerSize;
 }

package/build/components/Spacer/Spacer.component.js

@@ -12,6 +12,8 @@ const getSpacing = (size) => {
             return '32px';
         case '6x':
             return '48px';
+        case '8x':
+            return '64px';
         default:
             return 0;
     }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TableVariant } from './_Table.context';
+import { TableActionProps } from './_TableAction';
 export type TableCellVariant = 'tight';
 export interface TableProps {
     children: React.ReactNode;
@@ -13,7 +14,8 @@ declare const Table: {
     Row: ({ children, "data-cy": dataCy }: import("./_TableRow.component").TableRowProps) => JSX.Element;
     Cell: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, TableCellProps, never>;
     ActionContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-    Action: ({ text, onClick, "data-cy": dataCy }: import("./_TableAction").TableActionProps) => JSX.Element;
+    Action: ({ text, variant, icon, onClick, "data-cy": dataCy }: TableActionProps) => JSX.Element;
     ActionMenu: ({ items, "data-cy": dataCy }: import("./_TableActionMenu").TableActionMenuProps) => JSX.Element;
+    HiddenAction: (props: TableActionProps) => JSX.Element;
 };
 export default Table;

package/build/components/Table/Table.component.js

@@ -9,6 +9,10 @@ import TableRow from './_TableRow.component';
 const StyledTable = styled.table `
   width: 100%;
 `;
+const TableHiddenActionSpan = styled.span `
+  visibility: none;
+  opacity: 0;
+`;
 const TableCell = styled.td `
   font-family: ${(props) => props.theme.fonts.default.family};
   font-size: ${(props) => props.theme.fonts.default.size};
@@ -18,7 +22,16 @@ const TableCell = styled.td `
 
   padding: ${(props) => (props.variant === 'tight' ? '0' : '0 16px')};
   height: 36px;
+
+  &:hover {
+    ${TableHiddenActionSpan} {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 `;
+const TableHiddenAction = (props) => (React.createElement(TableHiddenActionSpan, null,
+    React.createElement(TableAction, { ...props })));
 const Table = ({ children, variant = 'regular' }) => {
     return (React.createElement(TableContext.Provider, { value: { variant } },
         React.createElement(ButtonContext.Provider, { value: { height: '24px' } },
@@ -30,4 +43,5 @@ Table.Cell = TableCell;
 Table.ActionContainer = TableActionContainer;
 Table.Action = TableAction;
 Table.ActionMenu = TableActionMenu;
+Table.HiddenAction = TableHiddenAction;
 export default Table;

package/build/components/Table/_TableAction.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ColourVariant } from '../../theme/theme.types';
 export interface TableActionProps {
-    'text': string;
+    'text'?: string;
+    'variant'?: ColourVariant;
+    'icon'?: IconProp;
     'onClick': () => void;
     'data-cy'?: string;
 }
-declare const TableAction: ({ text, onClick, "data-cy": dataCy }: TableActionProps) => JSX.Element;
+declare const TableAction: ({ text, variant, icon, onClick, "data-cy": dataCy }: TableActionProps) => JSX.Element;
 export default TableAction;

package/build/components/Table/_TableAction.js

@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Button from '../Button/Button.component';
-const TableAction = ({ text, onClick, 'data-cy': dataCy }) => {
-    return (React.createElement(Button, { variant: 'tertiary', onClick: onClick, "data-cy": dataCy || 'button-table-action' }, text));
+import ButtonContext from '../Button/Button.context';
+const TableAction = ({ text, variant, icon, onClick, 'data-cy': dataCy }) => {
+    const buttonContextVal = useContext(ButtonContext);
+    return (React.createElement(ButtonContext.Provider, { value: { ...buttonContextVal, ...(!text && icon && { width: '32px' }) } },
+        React.createElement(Button, { variant: variant || 'tertiary', icon: icon, onClick: onClick, "data-cy": dataCy || 'button-table-action' }, text)));
 };
 export default TableAction;

package/build/components/Table/_TableActionMenu.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ActionMenu from '../ActionMenu/ActionMenu.component';
 const TableActionMenu = ({ items, 'data-cy': dataCy }) => {
-    return React.createElement(ActionMenu, { variant: 'tertiary', items: items, "data-cy": dataCy });
+    return (React.createElement(ActionMenu, { variant: 'tertiary', "data-cy": dataCy }, items.map((item) => (React.createElement(ActionMenu.Item, { key: item.label, onClick: item.onClick }, item.label)))));
 };
 export default TableActionMenu;

package/build/components/common/Checkmark.component.d.ts

@@ -0,0 +1,6 @@
+interface CheckmarkProps {
+    checked: boolean;
+    large: boolean;
+}
+export declare const Checkmark: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CheckmarkProps, never>;
+export {};

package/build/components/common/Checkmark.component.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+export const Checkmark = styled.div `
+  position: relative;
+  height: ${(props) => (props.large ? '36px' : '24px')};
+  width: ${(props) => (props.large ? '36px' : '24px')};
+  background-color: ${(props) => props.theme.colours.controlBackground};
+
+  &:after {
+    content: '';
+    position: absolute;
+    display: ${(props) => (props.checked ? 'block' : 'none')};
+
+    left: ${(props) => (props.large ? '14px' : '9px')};
+    top: ${(props) => (props.large ? '7px' : '5px')};
+    width: ${(props) => (props.large ? '7px' : '5px')};
+    height: ${(props) => (props.large ? '16px' : '10px')};
+    border: solid ${(props) => props.theme.colours.defaultFont};
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+`;

package/build/theme/dark.theme.js

@@ -1,21 +1,31 @@
+import tinycolour from 'tinycolor2';
+const primaryBase = '#94b8e3';
+const secondaryBase = '#424448';
+const tertiaryBase = '#5c5f67';
 const darkTheme = {
     name: 'dark',
     colours: {
         background: '#424448',
         overlayBackground: '#a4caf9',
         primary: {
-            main: '#94b8e3',
-            hover: '#83b7f7',
+            main: primaryBase,
+            hover: tinycolour(primaryBase).lighten(2).toString(),
+            darker: tinycolour(primaryBase).darken(10).toString(),
+            darkerHover: tinycolour(primaryBase).darken(10).lighten(2).toString(),
             contrastText: '#191919',
         },
         secondary: {
-            main: '#424448',
-            hover: '#4b4e54',
+            main: secondaryBase,
+            hover: tinycolour(secondaryBase).lighten(5).toString(),
+            darker: secondaryBase,
+            darkerHover: tinycolour(secondaryBase).lighten(5).toString(),
             contrastText: '#e2e2e2',
         },
         tertiary: {
-            main: '#4b4e54',
-            hover: '#575b63',
+            main: tertiaryBase,
+            hover: tinycolour(tertiaryBase).lighten(5).toString(),
+            darker: tinycolour(tertiaryBase).darken(5).toString(),
+            darkerHover: tinycolour(tertiaryBase).darken(5).lighten(5).toString(),
             contrastText: '#e2e2e2',
         },
         defaultFont: '#e2e2e2',

package/build/theme/default.theme.js

@@ -7,16 +7,22 @@ const defaultTheme = {
         primary: {
             main: colours.grey70,
             hover: 'red',
+            darker: colours.grey70,
+            darkerHover: colours.grey70,
             contrastText: colours.grey10,
         },
         secondary: {
             main: colours.yellow,
             hover: 'red',
+            darker: colours.yellow,
+            darkerHover: colours.yellow,
             contrastText: colours.grey90,
         },
         tertiary: {
             main: colours.yellow,
             hover: 'red',
+            darker: colours.yellow,
+            darkerHover: colours.yellow,
             contrastText: colours.grey90,
         },
         defaultFont: colours.grey90,

package/build/theme/helpers/getThemeVariantColours.d.ts

@@ -1,8 +1,4 @@
 import { DefaultTheme } from 'styled-components';
 import { ColourVariant } from '../theme.types';
-declare const _default: (variant: ColourVariant, theme: DefaultTheme) => {
-    main: string;
-    hover: string;
-    contrastText: string;
-};
+declare const _default: (variant: ColourVariant, theme: DefaultTheme) => import("../theme.types").IPalette;
 export default _default;

package/build/theme/helpers/getThemeVariantColours.js

@@ -1,23 +1,11 @@
 export default (variant, theme) => {
     switch (variant) {
         case 'tertiary':
-            return {
-                main: theme.colours.tertiary.main,
-                hover: theme.colours.tertiary.hover,
-                contrastText: theme.colours.tertiary.contrastText,
-            };
+            return theme.colours.tertiary;
         case 'secondary':
-            return {
-                main: theme.colours.secondary.main,
-                hover: theme.colours.secondary.hover,
-                contrastText: theme.colours.secondary.contrastText,
-            };
+            return theme.colours.secondary;
         case 'primary':
         default:
-            return {
-                main: theme.colours.primary.main,
-                hover: theme.colours.primary.hover,
-                contrastText: theme.colours.primary.contrastText,
-            };
+            return theme.colours.primary;
     }
 };

package/build/theme/theme.types.d.ts

@@ -3,6 +3,8 @@ export type Status = 'info' | 'success' | 'warn' | 'danger';
 export interface IPalette {
     main: string;
     hover: string;
+    darker: string;
+    darkerHover: string;
     contrastText: string;
 }
 export interface IStatus {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "1.8.3",
+  "version": "2.0.0-11",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -15,15 +15,8 @@
   "author": "Simon Pratt <19920260+simonpratt@users.noreply.github.com>",
   "license": "ISC",
   "files": [
-    "build",
-    "README.md",
-    "LICENSE"
+    "build"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/simonpratt/lego.git"
-  },
-  "homepage": "https://dtdot-lego.pages.dev/",
   "devDependencies": {
     "@babel/cli": "^7.20.7",
     "@babel/core": "^7.20.7",
@@ -45,6 +38,7 @@
     "@types/react-dom": "^18.0.9",
     "@types/spark-md5": "^3.0.2",
     "@types/styled-components": "^5.1.26",
+    "@types/tinycolor2": "^1.4.3",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
@@ -63,7 +57,7 @@
   "peerDependencies": {
     "react": "16 - 18",
     "react-dom": "16 - 18",
-    "styled-components": ">= 5"
+    "styled-components": "5.x"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
@@ -76,6 +70,7 @@
     "react-popper": "^2.3.0",
     "react-use-measure": "^2.1.1",
     "spark-md5": "^3.0.2",
+    "tinycolor2": "^1.6.0",
     "uuid": "^9.0.0"
   }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Simon Pratt
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,51 +0,0 @@
-# Usage
-
-### Preview
-
-Storybook preview is available at https://dtdot-lego.pages.dev
-
-### Installation
-
-- Install peer dependencies
-  `npm i -S styled-components@^5.2.1` (and `npm i -D @types/styled-components` if using typescript)
-- Install package
-  `npm i -S @dtdot/lego`
-
-### Theme Context
-
-Lego requires a `styled-components` theme context to function, this instructs lego whether to render in dark or default themes. It's recommended to place this near the root of your application.
-
-```jsx
-import { ThemeProvider } from 'styled-components';
-import { Themes } from '@dtdot/lego';
-
-export default function MyApp() {
-  return (
-    <ThemeProvider theme={Themes.default}>
-      <AppImplementation />
-    </ThemeProvider>
-  );
-}
-```
-
-### Components
-
-After the above steps have been completed you're ready to start building. Here's a small example of importing and using a component, but see [Documentation](#documentation) for more complete examples.
-
-```jsx
-import { Alert } from '@dtdot/lego';
-
-export default function Example() {
-  return <Alert variant='success' message="Great! I'm rendering my first lego component..." />;
-}
-```
-
-### Documentation
-
-Lego uses storybook for documentation. This documentation is hosted at https://dtdot-lego.pages.dev
-
-# Contributing
-
-## Storybook
-
-Storybook is used both for testing as you develop and as living documentation. After cloning the repository you can run `npm start` at the root directory to host the documentation locally on port `6006`. Changes to the source will hot reload the documentation as you develop.