@dtdot/lego 1.8.0 → 2.0.0-2

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

@@ -1,10 +1,15 @@
-/// <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';
 export interface ActionMenuProps {
-    'items': IActionMenuItem[];
+    'children': React.ReactNode;
     'variant'?: ColourVariant;
+    'icon'?: IconProp;
     'data-cy'?: string;
 }
-declare const ActionMenu: ({ items, variant, "data-cy": dataCy }: ActionMenuProps) => JSX.Element;
+declare const ActionMenu: {
+    ({ children, variant, icon, "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

@@ -5,12 +5,22 @@ 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 IconWrapper = styled.div `
+  width: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
 const StyledIcon = styled(FontAwesomeIcon) `
   font-size: 18px;
 `;
 const offsetFn = () => [70, 4];
-const ActionMenu = ({ items, variant, 'data-cy': dataCy }) => {
+const ActionMenu = ({ children, variant, icon, 'data-cy': dataCy }) => {
     const [shown, setShown] = useState(false);
     const [referenceElement, setReferenceElement] = useState();
     const [popperElement, setPopperElement] = useState();
@@ -35,18 +45,15 @@ 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(IconWrapper, null,
+                React.createElement(StyledIcon, { icon: icon || faEllipsisV }))),
         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/Badge/Badge.component.d.ts

@@ -1,13 +1,17 @@
 import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Status } from '../../theme/theme.types';
 interface BadgeSpanProps {
     variant: BadgeVariant;
+    useHover: boolean;
 }
 export declare const BadgeSpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, BadgeSpanProps, never>;
 export type BadgeVariant = Status;
 export interface BadgeProps {
     children: React.ReactNode;
     variant: BadgeVariant;
+    actionIcon?: IconProp;
+    onAction?: () => void;
 }
-declare const Badge: ({ children, variant }: BadgeProps) => JSX.Element;
+declare const Badge: ({ children, variant, actionIcon, onAction }: BadgeProps) => JSX.Element;
 export default Badge;

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

@@ -1,3 +1,4 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import styled from 'styled-components';
 import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
@@ -11,10 +12,27 @@ export const BadgeSpan = styled.span `
   font-family: ${(props) => props.theme.fonts.default.family};
   font-size: ${(props) => props.theme.fonts.default.size};
   font-weight: ${(props) => props.theme.fonts.default.weight};
+  line-height: ${(props) => props.theme.fonts.default.size};
 
   text-transform: lowercase;
+
+  &:hover {
+    background-color: ${(props) => props.useHover && getThemeStatusColour(props.variant, props.theme).hover};
+  }
+`;
+const ActionSpan = styled.span `
+  vertical-align: middle;
+  padding: 3px 7px;
+  margin: -3px -7px -3px 0;
+  cursor: pointer;
+  user-select: none;
+
+  font-size: ${(props) => props.theme.fonts.default.size};
 `;
-const Badge = ({ children, variant }) => {
-    return (React.createElement(BadgeSpan, { variant: variant, "data-cy": 'badge' }, children));
+const Badge = ({ children, variant, actionIcon, onAction }) => {
+    return (React.createElement(BadgeSpan, { variant: variant, useHover: !!actionIcon, "data-cy": 'badge' },
+        children,
+        actionIcon && (React.createElement(ActionSpan, { onClick: onAction },
+            React.createElement(FontAwesomeIcon, { icon: actionIcon })))));
 };
 export default Badge;

package/build/components/BadgeSelector/BadgeSelector.component.js

@@ -24,6 +24,6 @@ const BadgeSelector = ({ options, value, onChange }) => {
     const handleClick = (_value) => {
         onChange([_value]);
     };
-    return (React.createElement(BadgeSelectorOuter, { "data-cy": 'badge-selector' }, options.map((option) => (React.createElement(InteractiveBadge, { key: option.value, variant: option.variant, inactive: !value.includes(option.value), onClick: () => handleClick(option.value), "data-cy": value.includes(option.value) ? 'badge-selected' : 'badge' }, option.name)))));
+    return (React.createElement(BadgeSelectorOuter, { "data-cy": 'badge-selector' }, options.map((option) => (React.createElement(InteractiveBadge, { useHover: false, key: option.value, variant: option.variant, inactive: !value.includes(option.value), onClick: () => handleClick(option.value), "data-cy": value.includes(option.value) ? 'badge-selected' : 'badge' }, option.name)))));
 };
 export default BadgeSelector;

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/Select/Select.component.js

@@ -1,4 +1,6 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useState } from 'react';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 import ControlDescription from '../../shared/ControlDescription';
@@ -18,6 +20,15 @@ const TextContainer = styled.div `
   align-items: center;
   height: 100%;
 `;
+const IconContainer = styled.div `
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 48px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+`;
 const PlaceholderText = styled.div `
   color: ${(props) => getThemeControlColours(props.theme).placeholder};
 `;
@@ -29,10 +40,12 @@ const OptionsContainer = styled.div `
   position: absolute;
   background-color: ${(props) => props.theme.colours.controlBackground};
   z-index: 10000;
+
+  box-shadow: ${(props) => props.theme.shadows.small};
 `;
 const Option = styled(motion.div) `
   color: ${(props) => getThemeControlColours(props.theme).font};
-  background-color: ${(props) => props.theme.colours.controlBackground};
+  background-color: ${(props) => props.theme.colours.controlBackgroundDisabled};
   height: 36px;
   display: flex;
   align-items: center;
@@ -62,7 +75,9 @@ const Select = (props) => {
             React.createElement(SelectControl, { "data-cy": dataCy, onClick: () => setIsOpen(!isOpen) },
                 React.createElement(TextContainer, null,
                     !value && placeholder && React.createElement(PlaceholderText, null, placeholder),
-                    value && React.createElement(ValueText, null, valueLabel))),
+                    value && React.createElement(ValueText, null, valueLabel)),
+                React.createElement(IconContainer, null,
+                    React.createElement(FontAwesomeIcon, { icon: isOpen ? faChevronUp : faChevronDown }))),
             isOpen && (React.createElement(OptionsContainer, null, options.map((option) => (React.createElement(Option, { whileHover: { backgroundColor: theme.colours.controlBorder }, transition: { type: 'spring', duration: 0.2 }, key: option.value, onClick: () => selectValue(option) }, option.label)))))),
         splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(React.Fragment, null,
             index !== 0 && React.createElement("br", null),

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

@@ -38,21 +38,25 @@ const darkTheme = {
             main: '#83bfff',
             contrast: '#191919',
             dull: '#0070e8',
+            hover: '#8fc5ff',
         },
         statusSuccess: {
             main: '#8ddaa9',
             contrast: '#191919',
             dull: '#35a35d',
+            hover: '#98deb2',
         },
         statusWarn: {
             main: '#f1a374',
             contrast: '#191919',
             dull: '#c35514',
+            hover: '#f2ac82',
         },
         statusDanger: {
             main: '#e87a7a',
             contrast: '#191919',
             dull: '#b51f1f',
+            hover: '#ea8787',
         },
     },
     fonts: {

package/build/theme/default.theme.js

@@ -39,21 +39,25 @@ const defaultTheme = {
             main: colours.blue,
             contrast: colours.blue,
             dull: colours.blue,
+            hover: colours.blue,
         },
         statusSuccess: {
             main: colours.green,
             contrast: colours.green,
             dull: colours.green,
+            hover: colours.green,
         },
         statusWarn: {
             main: colours.yellow,
             contrast: colours.yellow,
             dull: colours.yellow,
+            hover: colours.yellow,
         },
         statusDanger: {
             main: colours.red,
             contrast: colours.red,
             dull: colours.red,
+            hover: colours.red,
         },
     },
     fonts: {

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

@@ -9,6 +9,7 @@ export interface IStatus {
     main: string;
     contrast: string;
     dull: string;
+    hover: string;
 }
 export interface IFont {
     family: string;

package/package.json

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