@dtdot/lego 2.0.0-3 → 2.0.0-32

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

@@ -8,11 +8,11 @@ export interface ActionMenuProps {
     'size'?: ButtonSize;
     'icon'?: IconProp;
     'text'?: string;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
 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;
+    ({ children, variant, size, icon, text, "data-testid": dataTestId }: ActionMenuProps): JSX.Element;
+    Item: ({ children, onClick, "data-testid": dataTestId }: import("./_ActionMenuItem.component").ActionMenuItemProps) => JSX.Element;
+    Checkbox: ({ children, checked, onClick, "data-testid": dataTestId }: import("./_ActionMenuCheckbox.component").ActionMenuCheckboxProps) => JSX.Element;
 };
 export default ActionMenu;

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

@@ -8,7 +8,7 @@ import ActionMenuCheckbox from './_ActionMenuCheckbox.component';
 import ActionMenuItem from './_ActionMenuItem.component';
 import ActionMenuPanel from './_ActionMenuPanel.component';
 const offsetFn = () => [70, 4];
-const ActionMenu = ({ children, variant, size, icon, text, 'data-cy': dataCy }) => {
+const ActionMenu = ({ children, variant, size, icon, text, 'data-testid': dataTestId }) => {
     const [shown, setShown] = useState(false);
     const [referenceElement, setReferenceElement] = useState();
     const [popperElement, setPopperElement] = useState();
@@ -34,9 +34,9 @@ const ActionMenu = ({ children, variant, size, icon, text, 'data-cy': dataCy })
         };
     }, [handleGlobalClick, popperElement]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { variant: variant, size: size, icon: icon || faEllipsisV, "data-cy": dataCy || 'action-menu-button', ref: setReferenceElement, onClick: () => setShown(true) }, text),
+        React.createElement(Button, { variant: variant, size: size, icon: icon || faEllipsisV, "data-testid": dataTestId || 'action-menu-button', ref: setReferenceElement, onClick: () => setShown(true) }, text),
         shown &&
-            ReactDOM.createPortal(React.createElement("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper },
+            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'))));
 };

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

@@ -3,7 +3,7 @@ export interface ActionMenuCheckboxProps {
     'children': React.ReactNode;
     'checked': boolean;
     'onClick': () => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
-declare const ActionMenuCheckbox: ({ children, checked, onClick, "data-cy": dataCy }: ActionMenuCheckboxProps) => JSX.Element;
+declare const ActionMenuCheckbox: ({ children, checked, onClick, "data-testid": dataTestId }: ActionMenuCheckboxProps) => JSX.Element;
 export default ActionMenuCheckbox;

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

@@ -19,10 +19,10 @@ const ActionMenuCheckboxOuter = styled(motion.div) `
 const Spacer = styled.div `
   width: 16px;
 `;
-const ActionMenuCheckbox = ({ children, checked, onClick, 'data-cy': dataCy }) => {
+const ActionMenuCheckbox = ({ children, checked, onClick, 'data-testid': dataTestId }) => {
     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' },
+        React.createElement(ActionMenuCheckboxOuter, { style: { backgroundColor: theme.colours.tertiary.main }, whileHover: { backgroundColor: theme.colours.tertiary.hover }, onClick: onClick, "data-testid": dataTestId || 'action-menu-checkbox' },
             children,
             React.createElement(Spacer, null),
             React.createElement(Checkmark, { checked: checked, large: false }))));

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

@@ -2,7 +2,7 @@ import React from 'react';
 export interface ActionMenuItemProps {
     'children': React.ReactNode;
     'onClick': () => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
-declare const ActionMenuItem: ({ children, onClick, "data-cy": dataCy }: ActionMenuItemProps) => JSX.Element;
+declare const ActionMenuItem: ({ children, onClick, "data-testid": dataTestId }: ActionMenuItemProps) => JSX.Element;
 export default ActionMenuItem;

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

@@ -15,7 +15,7 @@ const ActionMenuItemOuter = styled(motion.div) `
   font-size: ${(props) => props.theme.fonts.default.size};
   font-weight: ${(props) => props.theme.fonts.default.weight};
 `;
-const ActionMenuItem = ({ children, onClick, 'data-cy': dataCy }) => {
+const ActionMenuItem = ({ children, onClick, 'data-testid': dataTestId }) => {
     const theme = useTheme();
     const { closeActionMenu } = useContext(ActionMenuContext);
     const handleClick = () => {
@@ -23,6 +23,6 @@ const ActionMenuItem = ({ children, onClick, 'data-cy': dataCy }) => {
         closeActionMenu();
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(ActionMenuItemOuter, { style: { backgroundColor: theme.colours.tertiary.main }, whileHover: { backgroundColor: theme.colours.tertiary.hover }, onClick: handleClick, "data-cy": dataCy || 'action-menu-item' }, children)));
+        React.createElement(ActionMenuItemOuter, { style: { backgroundColor: theme.colours.tertiary.main }, whileHover: { backgroundColor: theme.colours.tertiary.hover }, onClick: handleClick, "data-testid": dataTestId || 'action-menu-item' }, children)));
 };
 export default ActionMenuItem;

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

@@ -4,5 +4,5 @@ const ActionMenuPanelOuter = styled.div `
   background-color: ${(props) => props.theme.colours.tertiary.main};
   min-width: 160px;
 `;
-const ActionMenuPanel = ({ children }) => (React.createElement(ActionMenuPanelOuter, { "data-cy": 'action-menu-popover' }, children));
+const ActionMenuPanel = ({ children }) => (React.createElement(ActionMenuPanelOuter, { "data-testid": 'action-menu-popover' }, children));
 export default ActionMenuPanel;

package/build/components/ActionMessage/ActionMessage.component.js

@@ -14,7 +14,7 @@ const ActionMessageContainer = styled.div `
   }
 `;
 const ActionMessage = ({ header, info, action, onAction }) => {
-    return (React.createElement(ActionMessageContainer, { "data-cy": 'action-message' },
+    return (React.createElement(ActionMessageContainer, { "data-testid": 'action-message' },
         React.createElement("div", null,
             React.createElement(Heading.SubHeading, null, header)),
         info && (React.createElement(React.Fragment, null,

package/build/components/Alert/Alert.component.js

@@ -46,9 +46,9 @@ const CountContainer = styled.div `
 const Alert = ({ variant, message, count, action, onAction }) => {
     const theme = useTheme();
     const colour = getThemeStatusColour(variant, theme).main;
-    return (React.createElement(AlertContainer, { colour: colour, "data-cy": 'alert' },
-        React.createElement(MessageContainer, { "data-cy": 'alert-message' }, message),
-        action && (React.createElement(ActionContainer, { onClick: onAction, "data-cy": 'alert-action' }, action)),
+    return (React.createElement(AlertContainer, { colour: colour, "data-testid": 'alert' },
+        React.createElement(MessageContainer, { "data-testid": 'alert-message' }, message),
+        action && (React.createElement(ActionContainer, { onClick: onAction, "data-testid": 'alert-action' }, action)),
         count && count > 1 && React.createElement(CountContainer, { colour: colour }, count)));
 };
 export default Alert;

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

@@ -30,7 +30,7 @@ const ActionSpan = styled.span `
   font-size: ${(props) => props.theme.fonts.default.size};
 `;
 const Badge = ({ children, variant, actionIcon, onAction }) => {
-    return (React.createElement(BadgeSpan, { variant: variant, useHover: !!actionIcon, "data-cy": 'badge' },
+    return (React.createElement(BadgeSpan, { variant: variant, useHover: !!actionIcon, "data-testid": 'badge' },
         children,
         actionIcon && (React.createElement(ActionSpan, { onClick: onAction },
             React.createElement(FontAwesomeIcon, { icon: actionIcon })))));

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, { 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)))));
+    return (React.createElement(BadgeSelectorOuter, { "data-testid": '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-testid": value.includes(option.value) ? 'badge-selected' : 'badge' }, option.name)))));
 };
 export default BadgeSelector;

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

@@ -10,7 +10,7 @@ export interface ButtonProps {
     'type'?: 'submit' | 'button';
     'icon'?: IconProp;
     'onClick'?: () => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<unknown>>;
 export default Button;

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

@@ -33,9 +33,13 @@ 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.noBackground
+    ? 'transparent'
+    : props.iconOnly
+        ? getThemeVariantColours(props.variant, props.theme).main
+        : getThemeVariantColours(props.variant, props.theme).darker};
 
-  height: ${(props) => getIconContainerSizePx(props.size).height};
+  height: ${(props) => props.height || getIconContainerSizePx(props.size).height};
   width: ${(props) => getIconContainerSizePx(props.size).width};
 `;
 const StyledButton = styled.button `
@@ -45,12 +49,13 @@ const StyledButton = styled.button `
 
   cursor: pointer;
   padding: 0;
+  margin: 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;
 
@@ -61,16 +66,19 @@ const StyledButton = styled.button `
   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) => getThemeVariantColours(props.variant, props.theme).darkerHover};
+      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)};
@@ -103,12 +111,12 @@ 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,
+    const { children, loading, variant = 'primary', size = 'md', type = 'button', icon, onClick, 'data-testid': dataTestId, } = 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-testid": dataTestId || 'button', iconOnly: !children }, loading ? (React.createElement(SpinnerContainer, null,
+        React.createElement(ButtonSpinner, { "data-testid": '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 },
+        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/Card.component.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
 import { CardSize } from './Card.context';
 export interface CardProps {
-    children: React.ReactNode;
-    size?: CardSize;
-    padded?: boolean;
-    onClick?: () => void;
+    'children': React.ReactNode;
+    'size'?: CardSize;
+    'padded'?: boolean;
+    'onClick'?: () => void;
+    'data-testid'?: string;
 }
 declare const Card: {
-    ({ children, padded, size, onClick }: CardProps): JSX.Element;
-    ToggleSection: ({ heading, enabled, setEnabled, children }: import("./_CardToggleSection.component").CardToggleSectionProps) => JSX.Element;
+    ({ children, padded, size, onClick, "data-testid": dataTestId }: CardProps): JSX.Element;
+    ToggleSection: ({ heading, enabled, setEnabled, children, "data-testid": dataTestId, }: import("./_CardToggleSection.component").CardToggleSectionProps) => JSX.Element;
     Actions: ({ children }: import("./_CardActions.component").CardActionsProps) => React.ReactPortal | null;
     Action: ({ children, onClick }: import("./_CardActions.component").CardActionProps) => JSX.Element;
     Content: ({ children }: import("./_CardContent.component").CardContentProps) => JSX.Element;

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

@@ -69,7 +69,7 @@ const CardOuter = styled(motion.div) `
   cursor: ${(props) => (props.usePointer ? 'pointer' : 'default')};
   padding: ${(props) => (props.padded ? '16px' : 0)};
 `;
-const Card = ({ children, padded, size = 'sm', onClick }) => {
+const Card = ({ children, padded, size = 'sm', onClick, 'data-testid': dataTestId }) => {
     const actionsRef = useRef(null);
     const [htmlActionsRef, setHtmlActionsRef] = useState();
     const [showActions, setShowActions] = useState(false);
@@ -94,7 +94,7 @@ const Card = ({ children, padded, size = 'sm', onClick }) => {
                     scale: 1.005,
                     boxShadow: theme.shadows.xlarge,
                 }
-                : {}, size: size, padded: padded, onClick: handleClick, usePointer: !!onClick, "data-cy": 'card' },
+                : {}, size: size, padded: padded, onClick: handleClick, usePointer: !!onClick, "data-testid": dataTestId || 'card' },
             React.createElement(CardActionsContainer, { ref: actionsRef }),
             React.createElement(CardInner, null, children))));
 };

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/Card/_CardToggleSection.component.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 export interface CardToggleSectionProps {
-    children: React.ReactNode;
-    heading: string;
-    enabled: boolean;
-    setEnabled: (enabled: boolean) => void;
+    'children': React.ReactNode;
+    'heading': string;
+    'enabled': boolean;
+    'setEnabled': (enabled: boolean) => void;
+    'data-testid'?: string;
 }
-declare const CardToggleSection: ({ heading, enabled, setEnabled, children }: CardToggleSectionProps) => JSX.Element;
+declare const CardToggleSection: ({ heading, enabled, setEnabled, children, "data-testid": dataTestId, }: CardToggleSectionProps) => JSX.Element;
 export default CardToggleSection;

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

@@ -14,9 +14,9 @@ const ToggleHeaderContainer = styled.div `
 
   background-color: ${(props) => props.theme.colours.cardBackgroundSecondary};
 `;
-const CardToggleSection = ({ heading, enabled, setEnabled, children }) => {
+const CardToggleSection = ({ heading, enabled, setEnabled, children, 'data-testid': dataTestId, }) => {
     return (React.createElement(React.Fragment, null,
-        React.createElement(ToggleHeaderContainer, { onClick: () => setEnabled(!enabled) },
+        React.createElement(ToggleHeaderContainer, { onClick: () => setEnabled(!enabled), "data-testid": dataTestId || 'card-toggle-header' },
             React.createElement(Text, null, heading),
             React.createElement(Toggle, { value: enabled, onChange: setEnabled })),
         enabled && React.createElement("div", null, children)));

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

@@ -35,7 +35,7 @@ const Checklist = ({ items, value, onChange, noSplitGap, large }) => {
         .filter((item) => value.includes(item.id))
         .sort((a, b) => checkedOrder.indexOf(a.id) - checkedOrder.indexOf(b.id));
     const unCheckedItems = items.filter((item) => !value.includes(item.id));
-    return (React.createElement(LayoutGroup, { "data-cy": 'checklist' },
+    return (React.createElement(LayoutGroup, { "data-testid": 'checklist' },
         unCheckedItems.map((item) => (React.createElement(motion.div, { layoutId: item.id, key: item.id },
             React.createElement(ChecklistItem, { label: item.label, value: value.includes(item.id), onChange: (checked) => handleChange(item.id, checked), large: !!large })))),
         checkedItems.length && !noSplitGap ? React.createElement(ListDivider, null) : null,

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

@@ -50,7 +50,7 @@ const ChecklistItem = ({ label, value, onChange, large }) => {
             onChange(false);
         }
     };
-    return (React.createElement(Outerlabel, { checked: value, whileHover: { backgroundColor: theme.colours.cardBackground }, "data-cy": value ? 'checklist-item-checked' : 'checklist-item' },
+    return (React.createElement(Outerlabel, { checked: value, whileHover: { backgroundColor: theme.colours.cardBackground }, "data-testid": value ? 'checklist-item-checked' : 'checklist-item' },
         React.createElement(Checkmark, { checked: value, large: large }),
         React.createElement(Spacer, null),
         label,

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ControlLineProps {
+    children: React.ReactNode;
+    variant?: 'action' | 'spaced';
+}
+declare const ControlLine: ({ children, variant }: ControlLineProps) => JSX.Element | null;
+export default ControlLine;

package/build/components/ControlLine/ControlLine.component.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+const ActionContainer = styled.div `
+  display: flex;
+  width: 100%;
+
+  > :first-child {
+    flex-grow: 1;
+    margin-right: 3px;
+  }
+`;
+const SpacedContainer = styled.div `
+  display: flex;
+
+  > * {
+    flex-grow: 1;
+    margin-right: 3px;
+  }
+
+  > *:last-child {
+    margin-right: 0;
+  }
+`;
+const ControlLine = ({ children, variant = 'action' }) => {
+    if (variant === 'action') {
+        return React.createElement(ActionContainer, null, children);
+    }
+    if (variant === 'spaced') {
+        return React.createElement(SpacedContainer, null, children);
+    }
+    return null;
+};
+export default ControlLine;

package/build/components/FancyCheckbox/FancyCheckbox.component.js

@@ -48,6 +48,6 @@ const FancyCheckbox = ({ name, label, options, value, onChange }) => {
     const selectedValue = value || contextValue;
     return (React.createElement("div", null,
         label && React.createElement(FancyCheckboxLabel, { htmlFor: name }, label),
-        React.createElement(ButtonGroup, { "data-cy": 'checkbox-group' }, options.map((option) => (React.createElement(StyledButton, { selected: option.value === selectedValue, key: option.value, onClick: () => handleChange(option.value), "data-cy": option.value === selectedValue ? 'checkbox-selected' : 'checkbox' }, option.label))))));
+        React.createElement(ButtonGroup, { "data-testid": 'checkbox-group' }, options.map((option) => (React.createElement(StyledButton, { selected: option.value === selectedValue, key: option.value, onClick: () => handleChange(option.value), "data-testid": option.value === selectedValue ? 'checkbox-selected' : 'checkbox' }, option.label))))));
 };
 export default FancyCheckbox;

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,23 @@
+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];
+    const onChangeFn = (key, fieldValue) => {
+        const newValue = [
+            ...safeValue.map((item, i) => (i === index ? { ...item, [key]: fieldValue } : item)),
+        ];
+        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/ImageUpload/ImageUpload.component.d.ts

@@ -8,7 +8,7 @@ interface ImageUploadProps {
     'onChange'?: (value: string) => void;
     'onSearch'?: () => void;
     'uploadFn'?: (file: File) => Promise<string>;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
-declare const ImageUpload: ({ name, value, "error": propsError, "uploading": uploadingProp, onChange, onSearch, "data-cy": dataCy, }: ImageUploadProps) => JSX.Element;
+declare const ImageUpload: ({ name, value, "error": propsError, "uploading": uploadingProp, onChange, onSearch, "data-testid": dataTestId, }: ImageUploadProps) => JSX.Element;
 export default ImageUpload;

package/build/components/ImageUpload/ImageUpload.component.js

@@ -94,7 +94,7 @@ const ErrorInner = styled.div `
 const errorVariants = {
     show: { opacity: 1 },
 };
-const ImageUpload = ({ name, value, 'error': propsError, 'uploading': uploadingProp, onChange, onSearch, 'data-cy': dataCy, }) => {
+const ImageUpload = ({ name, value, 'error': propsError, 'uploading': uploadingProp, onChange, onSearch, 'data-testid': dataTestId, }) => {
     const { upload, getUrl } = useContext(FileContext);
     const [uploading, setUploading] = useState(false);
     const { value: contextValue, error: contextError, onChange: contextOnChange } = useFormNode(name);
@@ -125,26 +125,26 @@ const ImageUpload = ({ name, value, 'error': propsError, 'uploading': uploadingP
     };
     const internalValue = value ? value : contextValue;
     if (uploading || uploadingProp) {
-        return (React.createElement(UploadContainer, { "data-cy": dataCy },
+        return (React.createElement(UploadContainer, { "data-testid": dataTestId },
             React.createElement(LoaderContainer, null,
                 React.createElement(Loader, null))));
     }
     if (!internalValue) {
-        return (React.createElement(UploadContainer, { "data-cy": dataCy },
+        return (React.createElement(UploadContainer, { "data-testid": dataTestId },
             React.createElement(UploadInnerContainer, null,
-                React.createElement(IconContainer, { whileHover: { scale: 1.05 }, onClick: handleUploadClicked, "data-cy": 'button-image-upload' },
+                React.createElement(IconContainer, { whileHover: { scale: 1.05 }, onClick: handleUploadClicked, "data-testid": 'button-image-upload' },
                     React.createElement(FontAwesomeIcon, { icon: faCloudUploadAlt })),
                 onSearch && (React.createElement(React.Fragment, null,
                     React.createElement(UploadVerticalDivider, null),
-                    React.createElement(IconContainer, { whileHover: { scale: 1.05 }, onClick: onSearch, "data-cy": 'button-image-search' },
+                    React.createElement(IconContainer, { whileHover: { scale: 1.05 }, onClick: onSearch, "data-testid": 'button-image-search' },
                         React.createElement(FontAwesomeIcon, { icon: faSearch }))))),
-            React.createElement(HiddenInput, { value: '', ref: inputRef, type: 'file', onChange: handleUpload, "data-cy": 'input-image-hidden' }),
-            error && (React.createElement(ErrorContainer, { animate: error ? 'show' : undefined, style: { opacity: 0 }, variants: errorVariants, transition: { type: 'spring', duration: 0.3 }, "data-cy": 'error-indicator' },
+            React.createElement(HiddenInput, { value: '', ref: inputRef, type: 'file', onChange: handleUpload, "data-testid": 'input-image-hidden' }),
+            error && (React.createElement(ErrorContainer, { animate: error ? 'show' : undefined, style: { opacity: 0 }, variants: errorVariants, transition: { type: 'spring', duration: 0.3 }, "data-testid": 'error-indicator' },
                 React.createElement(ErrorInner, null,
                     React.createElement(FontAwesomeIcon, { icon: faExclamationCircle })),
-                React.createElement(ErrorMessage, { "data-cy": 'error-message' }, error)))));
+                React.createElement(ErrorMessage, { "data-testid": 'error-message' }, error)))));
     }
-    return (React.createElement("div", { "data-cy": dataCy },
-        React.createElement(Image, { "data-cy": 'uploaded-image', src: getUrl(internalValue) })));
+    return (React.createElement("div", { "data-testid": dataTestId },
+        React.createElement(Image, { "data-testid": 'uploaded-image', src: getUrl(internalValue) })));
 };
 export default ImageUpload;

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

@@ -4,15 +4,16 @@ import { Status } from '../../theme/theme.types';
 export type InlineCardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
 export type DragVariant = Status;
 export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    size?: InlineCardSize;
-    value?: string;
-    gestureLeftIcon?: IconProp;
-    gestureLeftVariant?: DragVariant;
-    onGestureLeft?: () => void;
+    'children': React.ReactNode;
+    'size'?: InlineCardSize;
+    'value'?: string;
+    'gestureLeftIcon'?: IconProp;
+    'gestureLeftVariant'?: DragVariant;
+    'onGestureLeft'?: () => void;
+    'data-testid'?: string;
 }
 declare const InlineCard: {
-    ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }: InlineCardProps): JSX.Element;
+    ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, "data-testid": dataTestId, }: InlineCardProps): JSX.Element;
     Media: ({ children, variant }: import("./_InlineCardMedia.component").InlineCardMediaProps) => JSX.Element;
     Content: ({ children, center }: import("./_InlineCardContent.component").InlineCardContentProps) => JSX.Element;
     Meta: ({ children }: import("./_InlineCardMeta.component").InlineCardMetaProps) => JSX.Element;