@dtdot/lego 2.0.0-6 → 2.0.0-8

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

@@ -33,7 +33,9 @@ const IconOuter = styled.span `
   justify-content: center;
 
   color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
-  background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).darker};
+  background-color: ${(props) => 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};
@@ -64,7 +66,9 @@ const StyledButton = styled.button `
     background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).hover};
 
     ${IconOuter} {
-      background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).darkerHover};
+      background-color: ${(props) => props.iconOnly
+    ? getThemeVariantColours(props.variant, props.theme).hover
+    : getThemeVariantColours(props.variant, props.theme).darkerHover};
     }
   }
 `;
@@ -105,10 +109,10 @@ const ButtonSpinner = styled.div `
 const Button = React.forwardRef(function Button(props, ref) {
     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, 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,
+    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', 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, { variant: variant, size: size, height: height },
+        icon && (React.createElement(IconOuter, { variant: variant, size: size, height: height, iconOnly: !children },
             React.createElement(FontAwesomeIcon, { icon: icon })))))));
 });
 export default Button;

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(index + 1)).map((_, i) => value?.[i] || {});
+    const safeError = Array.from(Array(index + 1)).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/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/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/package.json

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