@dtdot/lego 2.0.0-2 → 2.0.0-3

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

@@ -1,14 +1,17 @@
 import React from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { ColourVariant } from '../../theme/theme.types';
+import { ButtonSize } from '../Button/Button.component';
 export interface ActionMenuProps {
     'children': React.ReactNode;
     'variant'?: ColourVariant;
+    'size'?: ButtonSize;
     'icon'?: IconProp;
+    'text'?: string;
     'data-cy'?: string;
 }
 declare const ActionMenu: {
-    ({ children, variant, icon, "data-cy": dataCy }: ActionMenuProps): JSX.Element;
+    ({ 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;
 };

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

@@ -1,26 +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 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 = ({ children, variant, icon, '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();
@@ -46,9 +34,7 @@ const ActionMenu = ({ children, variant, icon, 'data-cy': dataCy }) => {
         };
     }, [handleGlobalClick, popperElement]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { variant: variant, "data-cy": dataCy || 'action-menu-button', ref: setReferenceElement, onClick: () => setShown(true) },
-            React.createElement(IconWrapper, null,
-                React.createElement(StyledIcon, { icon: 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(ActionMenuContext.Provider, { value: { closeActionMenu: () => setShown(false) } },

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/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": "2.0.0-2",
+  "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"
   }
 }