@dtdot/lego 1.8.1 → 2.0.0-3

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'))));
+                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,15 +1,50 @@
+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) => getThemeVariantColours(props.variant, props.theme).darker};
+
+  height: ${(props) => 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};
@@ -20,30 +55,44 @@ const StyledButton = styled.button `
   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};
+
+    ${IconOuter} {
+      background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).darkerHover};
+    }
   }
 `;
+const ButtonInner = styled.div `
+  display: flex;
+  align-items: 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 +103,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 { children, loading, variant = 'primary', size = 'md', type = 'button', icon, 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));
+    return (React.createElement(StyledButton, { ref: ref, width: width, height: height, alignSelf: alignSelf, marginTop: marginTop, variant: variant, size: size, type: type, onClick: onClick, "data-cy": dataCy || 'button' }, loading ? (React.createElement(SpinnerContainer, null,
+        React.createElement(ButtonSpinner, { "data-cy": 'button-loading-spinner', variant: variant, size: size }))) : (React.createElement(ButtonInner, null,
+        children && React.createElement(ButtonTextContainer, { size: size }, children),
+        icon && (React.createElement(IconOuter, { variant: variant, size: size },
+            React.createElement(FontAwesomeIcon, { icon: icon })))))));
 });
 export default Button;

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/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.1",
+  "version": "2.0.0-3",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -38,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",
@@ -69,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"
   }
 }