@dtdot/lego 2.0.0-14 → 2.0.0-16

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,7 +34,7 @@ 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, zIndex: 999 }, ...attributes.popper },
                 React.createElement(ActionMenuContext.Provider, { value: { closeActionMenu: () => setShown(false) } },

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

@@ -110,10 +110,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 { 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-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,
+    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, { noBackground: noBackground, variant: variant, size: size, height: height, iconOnly: !children },
             React.createElement(FontAwesomeIcon, { icon: icon })))))));

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

@@ -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": 'card' },
             React.createElement(CardActionsContainer, { ref: actionsRef }),
             React.createElement(CardInner, 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/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/_NestedFormArray.js

@@ -7,12 +7,10 @@ const NestedFormArray = ({ name, index, children }) => {
     const safeError = Array.from(Array(Math.max(index + 1, value?.length || 0))).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 = {

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.js

@@ -136,7 +136,7 @@ const InlineCard = ({ children, size, value, onClick, gestureLeftIcon, gestureLe
     };
     return (React.createElement(CardWrapper, { size: size },
         React.createElement(CardActionBackground, { style: { opacity, backgroundColor: gestureLeftTheme.main } }, gestureLeftIcon && (React.createElement(FontAwesomeIcon, { style: { fontSize: '20px', color: gestureLeftTheme.contrast }, icon: gestureLeftIcon }))),
-        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, ref: ref, style: { x }, animate: { x: gestureLeftActivated ? -bounds.width : undefined, opacity: gestureLeftActivated ? 0 : undefined }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick || isSelectable, onClick: handleClick, "data-cy": 'inline-card' }, children),
+        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, ref: ref, style: { x }, animate: { x: gestureLeftActivated ? -bounds.width : undefined, opacity: gestureLeftActivated ? 0 : undefined }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick || isSelectable, onClick: handleClick, "data-testid": 'inline-card' }, children),
         isSelectable && isSelected ? (React.createElement(SelectChecked, null,
             React.createElement(SelectIconContainer, null,
                 React.createElement(FontAwesomeIcon, { icon: faCheck })))) : null));

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

@@ -13,7 +13,7 @@ export interface IInputProps {
     'onChange'?: (value: any) => void;
     'onFocus'?: () => void;
     'onBlur'?: () => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
     'suggestions'?: SelectOption[];
 }
 declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<HTMLInputElement>>;

package/build/components/Input/Input.component.js

@@ -63,7 +63,7 @@ const messageVariants = {
     errorFocus: { opacity: 1, y: -4 },
 };
 const Input = React.forwardRef(function ForwardRefInput(props, ref) {
-    const { label, name, description, placeholder, disabled, type = 'text', autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-cy': dataCy, suggestions, } = props;
+    const { label, name, description, placeholder, disabled, type = 'text', autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-testid': dataTestId, suggestions, } = props;
     const [isOpen, setIsOpen] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
     const [referenceElement, setReferenceElement] = useState();
@@ -106,12 +106,12 @@ const Input = React.forwardRef(function ForwardRefInput(props, ref) {
     const filteredOptions = suggestions?.filter((option) => !value || option.label.toLowerCase().includes(value.toLowerCase()));
     return (React.createElement("div", null,
         label && React.createElement(ControlLabel, { htmlFor: name }, label),
-        React.createElement(InputContainer, { "data-cy": dataCy, ref: setReferenceElement },
-            React.createElement(StyledInput, { ref: ref, animate: animationVariant, variants: inputVariants, transition: { type: 'spring', duration: 0.3 }, type: type, name: name, placeholder: placeholder, disabled: disabled, value: getValue(value, contextValue), onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, autoFocus: autoFocus, "data-cy": 'input' }),
-            React.createElement(ErrorContainer, { animate: error ? 'show' : undefined, style: { opacity: 0 }, variants: errorVariants, transition: { type: 'spring', duration: 0.3 }, "data-cy": 'error-indicator' },
+        React.createElement(InputContainer, { "data-testid": dataTestId, ref: setReferenceElement },
+            React.createElement(StyledInput, { ref: ref, animate: animationVariant, variants: inputVariants, transition: { type: 'spring', duration: 0.3 }, type: type, name: name, placeholder: placeholder, disabled: disabled, value: getValue(value, contextValue), onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, autoFocus: autoFocus, "data-testid": 'input' }),
+            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 }))),
-            error && (React.createElement(ErrorMessage, { style: { opacity: 0, y: 0 }, animate: animationVariant, variants: messageVariants, transition: { type: 'spring', duration: 0.3 }, "data-cy": 'error-message' }, error))),
+            error && (React.createElement(ErrorMessage, { style: { opacity: 0, y: 0 }, animate: animationVariant, variants: messageVariants, transition: { type: 'spring', duration: 0.3 }, "data-testid": 'error-message' }, error))),
         splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(React.Fragment, null,
             index !== 0 && React.createElement("br", null),
             line))))),

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

@@ -5,7 +5,7 @@ interface LiveInputProps {
     'type'?: string;
     'value'?: string;
     'onChange'?: (value: string) => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
-declare const LiveInput: ({ name, type, placeholder, value, onChange, "data-cy": dataCy }: LiveInputProps) => JSX.Element;
+declare const LiveInput: ({ name, type, placeholder, value, onChange, "data-testid": dataTestId, }: LiveInputProps) => JSX.Element;
 export default LiveInput;

package/build/components/LiveInput/LiveInput.component.js

@@ -14,7 +14,7 @@ const StyledInput = styled.input `
     color: ${(props) => props.theme.colours.controlPlaceholder};
   }
 `;
-const LiveInput = ({ name, type = 'text', placeholder, value, onChange, 'data-cy': dataCy }) => {
+const LiveInput = ({ name, type = 'text', placeholder, value, onChange, 'data-testid': dataTestId, }) => {
     const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
     const handleChange = (e) => {
         if (onChange) {
@@ -25,6 +25,6 @@ const LiveInput = ({ name, type = 'text', placeholder, value, onChange, 'data-cy
         }
     };
     return (React.createElement("div", null,
-        React.createElement(StyledInput, { name: name, type: type, value: value || contextValue, placeholder: placeholder, onChange: handleChange, "data-cy": dataCy || 'live-input' })));
+        React.createElement(StyledInput, { name: name, type: type, value: value || contextValue, placeholder: placeholder, onChange: handleChange, "data-testid": dataTestId || 'live-input' })));
 };
 export default LiveInput;

package/build/components/LiveList/LiveList.component.js

@@ -100,10 +100,10 @@ const LiveList = ({ value: inputValue, name, onChange: propsOnChange }) => {
     if (!value?.length) {
         return null;
     }
-    return (React.createElement("div", { "data-cy": 'live-list' },
+    return (React.createElement("div", { "data-testid": 'live-list' },
         value.map((val) => (React.createElement(LiveListRow, { key: val.id, id: val.id, value: val.value, error: contextError ? contextError[val.id] : undefined, onChange: (newVal) => handleRowChange(val.id, newVal), onRemove: () => handleRowRemove(val.id) }))),
         React.createElement(AddRow, null,
-            React.createElement(AddRowInner, { style: { scale: 1 }, whileHover: 'hover', variants: addVariants, onClick: handleRowAdd, "data-cy": 'button-add-list-item' },
+            React.createElement(AddRowInner, { style: { scale: 1 }, whileHover: 'hover', variants: addVariants, onClick: handleRowAdd, "data-testid": 'button-add-list-item' },
                 React.createElement(IconContainer, null,
                     React.createElement(FontAwesomeIcon, { icon: faPlusCircle })),
                 "add"))));

package/build/components/LiveList/_LiveListRow.js

@@ -59,10 +59,10 @@ const LiveListRow = ({ id, value, error, onChange, onRemove }) => {
         setIsFocused(false);
         onBlur(id);
     };
-    return (React.createElement(InputContainer, { whileHover: 'hover', "data-cy": 'live-list-row' },
-        React.createElement(Input, { onFocus: handleFocus, onBlur: handleBlur, ref: inputRef, value: value || '', error: error, onChange: handleChange, "data-cy": 'live-list-input' }),
+    return (React.createElement(InputContainer, { whileHover: 'hover', "data-testid": 'live-list-row' },
+        React.createElement(Input, { onFocus: handleFocus, onBlur: handleBlur, ref: inputRef, value: value || '', error: error, onChange: handleChange, "data-testid": 'live-list-input' }),
         React.createElement(RemoveContainer, { animate: isFocused ? 'focus' : undefined, style: { opacity: 0 }, variants: removeVariants, transition: { type: 'spring', duration: 0.3 } },
-            React.createElement(RemoveInner, { onClick: onRemove, "data-cy": 'live-list-remove' },
+            React.createElement(RemoveInner, { onClick: onRemove, "data-testid": 'live-list-remove' },
                 React.createElement(FontAwesomeIcon, { icon: faTimes })))));
 };
 export default LiveListRow;

package/build/components/Loader/Loader.component.js

@@ -47,7 +47,7 @@ const loadingCircleTransition = {
     repeatType: 'reverse',
     ease: 'easeInOut',
 }; // Framer motion isn't accepting 'repeatType' but animation breaks without it
-const BaseLoader = () => (React.createElement(motion.div, { style: loadingContainer, variants: loadingContainerVariants, initial: 'start', animate: 'end', "data-cy": 'loader' },
+const BaseLoader = () => (React.createElement(motion.div, { style: loadingContainer, variants: loadingContainerVariants, initial: 'start', animate: 'end', "data-testid": '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 })));

package/build/components/Menu/_MenuHeading.component.js

@@ -38,8 +38,8 @@ const MenuToggle = styled.div `
 `;
 const MenuHeading = ({ children, onOpen, onClose, isOpen }) => (React.createElement(MenuHeadingDiv, null,
     React.createElement(MenuHeadingInner, null,
-        isOpen ? (React.createElement(MenuToggle, { onClick: onClose, "data-cy": 'button-menu-close' },
-            React.createElement(FontAwesomeIcon, { icon: faBars }))) : (React.createElement(MenuToggle, { onClick: onOpen, "data-cy": 'button-menu-open' },
+        isOpen ? (React.createElement(MenuToggle, { onClick: onClose, "data-testid": 'button-menu-close' },
+            React.createElement(FontAwesomeIcon, { icon: faBars }))) : (React.createElement(MenuToggle, { onClick: onOpen, "data-testid": 'button-menu-open' },
             React.createElement(FontAwesomeIcon, { icon: faBars }))),
         children)));
 export default MenuHeading;

package/build/components/Menu/_MenuItem.component.js

@@ -41,7 +41,7 @@ const MenuActivePlaceholder = styled.div `
   height: 100%;
   width: 4px;
 `;
-const MenuItem = ({ children, icon, active, onClick }) => (React.createElement(MenuItemOuter, { onClick: onClick, "data-cy": 'menu-item' },
+const MenuItem = ({ children, icon, active, onClick }) => (React.createElement(MenuItemOuter, { onClick: onClick, "data-testid": 'menu-item' },
     active ? React.createElement(MenuActiveBar, null) : React.createElement(MenuActivePlaceholder, null),
     React.createElement(MenuItemDiv, { active: active },
         icon && (React.createElement(MenuIconContainer, null,

package/build/components/Menu/_MenuPanel.component.js

@@ -55,6 +55,6 @@ ${(props) => responsive.useStylesFor('desktop').andLarger(props.scrollable
     : ``)}
 `;
 const MenuPanel = ({ children, scrollable, panelSize = 'sm' }) => {
-    return (React.createElement(MenuPanelDiv, { panelSize: panelSize, scrollable: scrollable, "data-cy": 'menu-panel' }, children));
+    return (React.createElement(MenuPanelDiv, { panelSize: panelSize, scrollable: scrollable, "data-testid": 'menu-panel' }, children));
 };
 export default MenuPanel;

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

@@ -5,7 +5,7 @@ export interface MinimalMenuProps {
 declare const MinimalMenu: {
     ({ children }: MinimalMenuProps): JSX.Element;
     Header: ({ hiddenMenu, text, rightContent }: import("./_MinimalMenuHeader.component").MinimalMenuHeaderProps) => JSX.Element;
-    Item: ({ icon, active, onClick, "data-cy": dataCy }: import("./_MinimalMenuItem.component").MinimalMenuItemProps) => JSX.Element;
+    Item: ({ icon, active, onClick, "data-testid": dataTestId }: import("./_MinimalMenuItem.component").MinimalMenuItemProps) => JSX.Element;
     Page: ({ children, hiddenMenu }: import("./_MinimalMenuPage.component").MinimalMenuPageProps) => JSX.Element;
 };
 export default MinimalMenu;

package/build/components/MinimalMenu/_MinimalMenuItem.component.d.ts

@@ -4,7 +4,7 @@ export interface MinimalMenuItemProps {
     'icon'?: IconProp;
     'active'?: boolean;
     'onClick'?: () => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
-declare const MinimalMenuItem: ({ icon, active, onClick, "data-cy": dataCy }: MinimalMenuItemProps) => JSX.Element;
+declare const MinimalMenuItem: ({ icon, active, onClick, "data-testid": dataTestId }: MinimalMenuItemProps) => JSX.Element;
 export default MinimalMenuItem;

package/build/components/MinimalMenu/_MinimalMenuItem.component.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { useIsScreenSize } from '../../responsive/responsive';
 import DesktopMinimalMenuItem from './desktop/_DesktopMinimalMenuItem.component';
 import MobileMinimalMenuItem from './mobile/_MobileMinimalMenuItem.component';
-const MinimalMenuItem = ({ icon, active, onClick, 'data-cy': dataCy }) => {
+const MinimalMenuItem = ({ icon, active, onClick, 'data-testid': dataTestId }) => {
     const isMobile = useIsScreenSize('mobile');
     if (isMobile) {
-        return React.createElement(MobileMinimalMenuItem, { icon: icon, active: active, onClick: onClick, "data-cy": dataCy });
+        return React.createElement(MobileMinimalMenuItem, { icon: icon, active: active, onClick: onClick, "data-testid": dataTestId });
     }
-    return React.createElement(DesktopMinimalMenuItem, { icon: icon, active: active, onClick: onClick, "data-cy": dataCy });
+    return React.createElement(DesktopMinimalMenuItem, { icon: icon, active: active, onClick: onClick, "data-testid": dataTestId });
 };
 export default MinimalMenuItem;

package/build/components/MinimalMenu/desktop/_DesktopMinimalMenuItem.component.d.ts

@@ -4,7 +4,7 @@ export interface DesktopMinimalMenuItemProps {
     'icon'?: IconProp;
     'active'?: boolean;
     'onClick'?: () => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
-declare const DesktopMinimalMenuItem: ({ icon, active, onClick, "data-cy": dataCy }: DesktopMinimalMenuItemProps) => JSX.Element;
+declare const DesktopMinimalMenuItem: ({ icon, active, onClick, "data-testid": dataTestId }: DesktopMinimalMenuItemProps) => JSX.Element;
 export default DesktopMinimalMenuItem;

package/build/components/MinimalMenu/desktop/_DesktopMinimalMenuItem.component.js

@@ -27,14 +27,14 @@ const iconContainerVariants = {
     active: { x: 2 },
     hoverActive: { x: 2 },
 };
-const DesktopMinimalMenuItem = ({ icon, active, onClick, 'data-cy': dataCy }) => {
+const DesktopMinimalMenuItem = ({ icon, active, onClick, 'data-testid': dataTestId }) => {
     const theme = useTheme();
     const barVariants = useMemo(() => ({
         hover: { opacity: 1, backgroundColor: theme.colours.defaultBorder, width: 4 },
         active: { opacity: 1, backgroundColor: theme.colours.primary.main, width: 4 },
         hoverActive: { opacity: 1, backgroundColor: theme.colours.primary.main, width: 4 },
     }), [theme]);
-    return (React.createElement(ItemContainer, { whileHover: active ? 'hoverActive' : 'hover', animate: active ? 'active' : undefined, onClick: onClick, "data-cy": dataCy || 'menu-item' },
+    return (React.createElement(ItemContainer, { whileHover: active ? 'hoverActive' : 'hover', animate: active ? 'active' : undefined, onClick: onClick, "data-testid": dataTestId || 'menu-item' },
         React.createElement(MenuIconBar, { style: { backgroundColor: theme.colours.cardBackground, opacity: 0 }, variants: barVariants, transition: { type: 'spring', duration: 0.3 } }),
         icon && (React.createElement(motion.div, { variants: iconContainerVariants },
             React.createElement(FontAwesomeIcon, { icon: icon })))));

package/build/components/MinimalMenu/mobile/_MobileMinimalMenuItem.component.d.ts

@@ -4,7 +4,7 @@ export interface MobileMinimalMenuItemProps {
     'icon'?: IconProp;
     'active'?: boolean;
     'onClick'?: () => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
-declare const MobileMinimalMenuItem: ({ icon, active, onClick, "data-cy": dataCy }: MobileMinimalMenuItemProps) => JSX.Element;
+declare const MobileMinimalMenuItem: ({ icon, active, onClick, "data-testid": dataTestId }: MobileMinimalMenuItemProps) => JSX.Element;
 export default MobileMinimalMenuItem;

package/build/components/MinimalMenu/mobile/_MobileMinimalMenuItem.component.js

@@ -20,7 +20,7 @@ const ItemContainer = styled.div `
 const iconContainerVariants = {
     active: { fontSize: '28px', y: -8 },
 };
-const MobileMinimalMenuItem = ({ icon, active, onClick, 'data-cy': dataCy }) => {
+const MobileMinimalMenuItem = ({ icon, active, onClick, 'data-testid': dataTestId }) => {
     const { width } = useWindowDimensions();
     const { setBumpX } = useContext(MobileMenuBumpContext);
     const itemRef = useRef(null);
@@ -36,7 +36,7 @@ const MobileMinimalMenuItem = ({ icon, active, onClick, 'data-cy': dataCy }) =>
             }
         };
     }, [active, setBumpX, width]);
-    return (React.createElement(ItemContainer, { onClick: onClick, ref: itemRef, "data-cy": dataCy || 'menu-item' }, icon && (React.createElement(motion.div, { animate: active ? 'active' : undefined, style: { fontSize: '20px' }, variants: iconContainerVariants, transition: mobileMenuDefaultTransition },
+    return (React.createElement(ItemContainer, { onClick: onClick, ref: itemRef, "data-testid": dataTestId || 'menu-item' }, icon && (React.createElement(motion.div, { animate: active ? 'active' : undefined, style: { fontSize: '20px' }, variants: iconContainerVariants, transition: mobileMenuDefaultTransition },
         React.createElement(FontAwesomeIcon, { icon: icon })))));
 };
 export default MobileMinimalMenuItem;

package/build/components/Modal/Modal.component.js

@@ -90,7 +90,7 @@ const Modal = ({ children, size, loading, onClose }) => {
             React.createElement(ScrollContainer, null,
                 React.createElement(ModalContext.Provider, { value: { onClose } },
                     React.createElement(ModalWrapper, { size: size || 'md' },
-                        React.createElement(ModalOuter, { transition: { type: 'spring', bounce: 0, duration: 0.6 }, initial: { height: loading ? loadingHeight : 'auto' }, animate: { height: loading ? loadingHeight : 'auto' }, size: size || 'md', onClick: handleModalClick, "data-cy": 'modal' },
+                        React.createElement(ModalOuter, { transition: { type: 'spring', bounce: 0, duration: 0.6 }, initial: { height: loading ? loadingHeight : 'auto' }, animate: { height: loading ? loadingHeight : 'auto' }, size: size || 'md', onClick: handleModalClick, "data-testid": 'modal' },
                             !loading && children,
                             loading && (React.createElement(SpinnerContainer, null,
                                 React.createElement(Loader, null))))))))), document.body);

package/build/components/Modal/_ModalHeader.component.js

@@ -43,12 +43,12 @@ const IconClickableArea = styled.div `
 `;
 const ModalHeader = ({ header, subHeader }) => {
     const { onClose } = useContext(ModalContext);
-    return (React.createElement(HeaderContainer, { "data-cy": 'modal-header' },
+    return (React.createElement(HeaderContainer, { "data-testid": 'modal-header' },
         React.createElement(TextContainer, null,
             React.createElement(HeaderText, null, header),
             SubHeaderText && React.createElement(SubHeaderText, null, subHeader)),
         React.createElement(IconContainer, null,
-            React.createElement(IconClickableArea, { onClick: onClose, "data-cy": 'button-modal-close' },
+            React.createElement(IconClickableArea, { onClick: onClose, "data-testid": 'button-modal-close' },
                 React.createElement(FontAwesomeIcon, { icon: faTimes })))));
 };
 export default ModalHeader;

package/build/components/Notification/Notification.component.js

@@ -10,6 +10,6 @@ const NotificationContainer = styled.div `
   `)}
   }
 `;
-const Notification = (props) => (React.createElement(NotificationContainer, { "data-cy": 'notification' },
+const Notification = (props) => (React.createElement(NotificationContainer, { "data-testid": 'notification' },
     React.createElement(Alert, { ...props })));
 export default Notification;

package/build/components/ProfileImage/ProfileImage.component.js

@@ -44,10 +44,10 @@ const Identicon = ({ value }) => {
 };
 const ProfileImage = ({ name, image }) => {
     if (image) {
-        return (React.createElement(ImageContainer, { "data-cy": 'profile-image' },
+        return (React.createElement(ImageContainer, { "data-testid": 'profile-image' },
             React.createElement(Image, { src: image })));
     }
-    return (React.createElement(ImageContainer, { "data-cy": 'profile-image' },
+    return (React.createElement(ImageContainer, { "data-testid": 'profile-image' },
         React.createElement(Identicon, { value: name })));
 };
 export default ProfileImage;

package/build/components/QrCode/QrCode.component.js

@@ -61,11 +61,11 @@ const QrCode = ({ value }) => {
             });
         }
     }, [value]);
-    return (React.createElement(Container, { onClick: () => showHint(), "data-cy": 'qrcode' },
+    return (React.createElement(Container, { onClick: () => showHint(), "data-testid": 'qrcode' },
         copiedHint && (React.createElement(ToastContainer, null,
             React.createElement(Toast, null,
                 React.createElement(StyledText, null, "Copied!")))),
-        React.createElement(CopyInput, { readOnly: true, ref: inputRef, value: value, "data-cy": 'input-qrcode-hidden' }),
+        React.createElement(CopyInput, { readOnly: true, ref: inputRef, value: value, "data-testid": 'input-qrcode-hidden' }),
         React.createElement(StyledCanvas, { ref: ref })));
 };
 export default QrCode;

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

@@ -7,7 +7,7 @@ export interface ISelectProps {
     'placeholder'?: string;
     'value'?: string;
     'onChange'?: (value: any) => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
     'options': SelectOption[];
 }
 declare const Select: (props: ISelectProps) => JSX.Element;

package/build/components/Select/Select.component.js

@@ -38,7 +38,7 @@ const ValueText = styled.div `
 const Select = (props) => {
     const [isOpen, setIsOpen] = useState(false);
     const [referenceElement, setReferenceElement] = useState();
-    const { label, name, description, placeholder, 'value': propsValue, 'data-cy': dataCy, options } = props;
+    const { label, name, description, placeholder, 'value': propsValue, 'data-testid': dataTestId, options } = props;
     const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
     const value = getValue(propsValue, contextValue);
     const splitDescription = description ? description.split('\\n').map((str) => str.trim()) : undefined;
@@ -55,7 +55,7 @@ const Select = (props) => {
     return (React.createElement("div", null,
         label && React.createElement(ControlLabel, { htmlFor: name }, label),
         React.createElement(ControlOuter, { ref: setReferenceElement },
-            React.createElement(SelectControl, { "data-cy": dataCy, onClick: () => setIsOpen(!isOpen) },
+            React.createElement(SelectControl, { "data-testid": dataTestId, onClick: () => setIsOpen(!isOpen) },
                 React.createElement(TextContainer, null,
                     !value && placeholder && React.createElement(PlaceholderText, null, placeholder),
                     value && React.createElement(ValueText, null, valueLabel)),

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

@@ -4,7 +4,7 @@ export interface SquareButtonProps {
     'children': React.ReactChild;
     'variant'?: ColourVariant;
     'onClick'?: () => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
-declare const SquareButton: ({ children, variant, onClick, "data-cy": dataCy }: SquareButtonProps) => JSX.Element;
+declare const SquareButton: ({ children, variant, onClick, "data-testid": dataTestId }: SquareButtonProps) => JSX.Element;
 export default SquareButton;

package/build/components/SquareButton/SquareButton.component.js

@@ -25,7 +25,7 @@ const StyledButton = styled.button `
     background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).hover};
   }
 `;
-const SquareButton = ({ children, variant = 'primary', onClick, 'data-cy': dataCy }) => {
-    return (React.createElement(StyledButton, { variant: variant, onClick: onClick, "data-cy": dataCy || 'button' }, children));
+const SquareButton = ({ children, variant = 'primary', onClick, 'data-testid': dataTestId }) => {
+    return (React.createElement(StyledButton, { variant: variant, onClick: onClick, "data-testid": dataTestId || 'button' }, children));
 };
 export default SquareButton;

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

@@ -11,11 +11,11 @@ export interface TableCellProps {
 }
 declare const Table: {
     ({ children, variant }: TableProps): JSX.Element;
-    Row: ({ children, "data-cy": dataCy }: import("./_TableRow.component").TableRowProps) => JSX.Element;
+    Row: ({ children, "data-testid": dataTestId }: 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, variant, icon, onClick, "data-cy": dataCy }: TableActionProps) => JSX.Element;
-    ActionMenu: ({ items, "data-cy": dataCy }: import("./_TableActionMenu").TableActionMenuProps) => JSX.Element;
+    Action: ({ text, variant, icon, onClick, "data-testid": dataTestId }: TableActionProps) => JSX.Element;
+    ActionMenu: ({ items, "data-testid": dataTestId }: import("./_TableActionMenu").TableActionMenuProps) => JSX.Element;
     HiddenAction: (props: TableActionProps) => JSX.Element;
 };
 export default Table;

package/build/components/Table/_TableAction.d.ts

@@ -6,7 +6,7 @@ export interface TableActionProps {
     'variant'?: ColourVariant;
     'icon'?: IconProp;
     'onClick': () => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
-declare const TableAction: ({ text, variant, icon, onClick, "data-cy": dataCy }: TableActionProps) => JSX.Element;
+declare const TableAction: ({ text, variant, icon, onClick, "data-testid": dataTestId }: TableActionProps) => JSX.Element;
 export default TableAction;

package/build/components/Table/_TableAction.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import Button from '../Button/Button.component';
 import ButtonContext from '../Button/Button.context';
-const TableAction = ({ text, variant, icon, onClick, 'data-cy': dataCy }) => {
+const TableAction = ({ text, variant, icon, onClick, 'data-testid': dataTestId }) => {
     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)));
+        React.createElement(Button, { variant: variant || 'tertiary', icon: icon, onClick: onClick, "data-testid": dataTestId || 'button-table-action' }, text)));
 };
 export default TableAction;

package/build/components/Table/_TableActionMenu.d.ts

@@ -2,7 +2,7 @@
 import { IActionMenuItem } from '../ActionMenu/_ActionMenu.types';
 export interface TableActionMenuProps {
     'items': IActionMenuItem[];
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
-declare const TableActionMenu: ({ items, "data-cy": dataCy }: TableActionMenuProps) => JSX.Element;
+declare const TableActionMenu: ({ items, "data-testid": dataTestId }: TableActionMenuProps) => JSX.Element;
 export default TableActionMenu;

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', "data-cy": dataCy }, items.map((item) => (React.createElement(ActionMenu.Item, { key: item.label, onClick: item.onClick }, item.label)))));
+const TableActionMenu = ({ items, 'data-testid': dataTestId }) => {
+    return (React.createElement(ActionMenu, { variant: 'tertiary', "data-testid": dataTestId }, items.map((item) => (React.createElement(ActionMenu.Item, { key: item.label, onClick: item.onClick }, item.label)))));
 };
 export default TableActionMenu;

package/build/components/Table/_TableRow.component.d.ts

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

package/build/components/Table/_TableRow.component.js

@@ -10,8 +10,8 @@ const StyledRow = styled.tr `
     box-shadow: none;
   }
 `;
-const TableRow = ({ children, 'data-cy': dataCy }) => {
+const TableRow = ({ children, 'data-testid': dataTestId }) => {
     const { variant } = useContext(TableContext);
-    return (React.createElement(StyledRow, { variant: variant, "data-cy": dataCy }, children));
+    return (React.createElement(StyledRow, { variant: variant, "data-testid": dataTestId }, children));
 };
 export default TableRow;

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

@@ -9,7 +9,7 @@ export interface ITextAreaProps {
     'onChange'?: (value: any) => void;
     'onFocus'?: () => void;
     'onBlur'?: () => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
 declare const TextArea: React.ForwardRefExoticComponent<ITextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package/build/components/TextArea/TextArea.component.js

@@ -70,7 +70,7 @@ const messageVariants = {
     errorFocus: { opacity: 1, y: -4 },
 };
 const TextArea = React.forwardRef(function ForwardRefTextArea(props, ref) {
-    const { label, name, placeholder, autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-cy': dataCy, } = props;
+    const { label, name, placeholder, autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-testid': dataTestId, } = props;
     const [isFocused, setIsFocused] = useState(false);
     const { value: contextValue, error: contextError, onChange: contextOnChange } = useFormNode(name);
     const error = contextError || propsError;
@@ -97,11 +97,11 @@ const TextArea = React.forwardRef(function ForwardRefTextArea(props, ref) {
     const animationVariant = error ? (isFocused ? 'errorFocus' : 'error') : undefined;
     return (React.createElement("div", null,
         label && React.createElement(TextAreaLabel, { htmlFor: name }, label),
-        React.createElement(TextAreaContainer, { "data-cy": dataCy },
-            React.createElement(StyledTextArea, { ref: ref, animate: animationVariant, variants: textAreaVariants, transition: { type: 'spring', duration: 0.3 }, name: name, placeholder: placeholder, value: getValue(value, contextValue), onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, autoFocus: autoFocus, "data-cy": 'text-area' }),
-            React.createElement(ErrorContainer, { animate: error ? 'show' : undefined, style: { opacity: 0 }, variants: errorVariants, transition: { type: 'spring', duration: 0.3 }, "data-cy": 'error-indicator' },
+        React.createElement(TextAreaContainer, { "data-testid": dataTestId },
+            React.createElement(StyledTextArea, { ref: ref, animate: animationVariant, variants: textAreaVariants, transition: { type: 'spring', duration: 0.3 }, name: name, placeholder: placeholder, value: getValue(value, contextValue), onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, autoFocus: autoFocus, "data-testid": 'text-area' }),
+            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 }))),
-            error && (React.createElement(ErrorMessage, { style: { opacity: 0, y: 0 }, animate: animationVariant, variants: messageVariants, transition: { type: 'spring', duration: 0.3 }, "data-cy": 'error-message' }, error)))));
+            error && (React.createElement(ErrorMessage, { style: { opacity: 0, y: 0 }, animate: animationVariant, variants: messageVariants, transition: { type: 'spring', duration: 0.3 }, "data-testid": 'error-message' }, error)))));
 });
 export default TextArea;

package/build/components/common/Options.component.js

@@ -14,11 +14,12 @@ export const OptionsContainer = styled.div `
 export const Option = styled(motion.div) `
   color: ${(props) => getThemeControlColours(props.theme).font};
   background-color: ${(props) => props.theme.colours.controlBackgroundDisabled};
-  height: 36px;
   display: flex;
   align-items: center;
-  padding: 0 12px;
   cursor: pointer;
+
+  min-height: 36px;
+  padding: 6px 12px;
 `;
 export const SelectOptions = ({ options, onSelect }) => {
     const theme = useTheme();

package/build/screens/Login/Login.screen.js

@@ -47,14 +47,14 @@ const LoginScreen = ({ loading, error, handleLogin, onRegisterClicked }) => {
         React.createElement(Form, { value: value, onChange: setValue, onSubmit: () => handleLogin(value) },
             React.createElement(ControlGroup, null,
                 React.createElement(ErrorText, null, error),
-                React.createElement(Input, { name: 'email', placeholder: 'Email', type: 'text', "data-cy": 'input-email' }),
-                React.createElement(Input, { name: 'password', placeholder: 'Password', type: 'password', "data-cy": 'input-password' }),
+                React.createElement(Input, { name: 'email', placeholder: 'Email', type: 'text', "data-testid": 'input-email' }),
+                React.createElement(Input, { name: 'password', placeholder: 'Password', type: 'password', "data-testid": 'input-password' }),
                 React.createElement(ControlGroup.Spacer, null),
-                React.createElement(Button, { type: 'submit', loading: loading, "data-cy": 'button-login' }, "Login"))),
+                React.createElement(Button, { type: 'submit', loading: loading, "data-testid": 'button-login' }, "Login"))),
         React.createElement(Spacer, { size: '6x' }),
         React.createElement(CreateAccountMessage, null,
             `Don't have an account?`,
             ' ',
-            React.createElement(CreateAccountButton, { onClick: onRegisterClicked, "data-cy": 'button-register' }, "sign up now"))));
+            React.createElement(CreateAccountButton, { onClick: onRegisterClicked, "data-testid": 'button-register' }, "sign up now"))));
 };
 export default LoginScreen;

package/build/screens/Register/Register.screen.js

@@ -24,9 +24,9 @@ const RegisterScreen = ({ loading, error, handleRegister }) => {
         React.createElement(Form, { value: value, onChange: setValue, onSubmit: () => handleRegister(value) },
             React.createElement(ControlGroup, null,
                 React.createElement(ErrorText, null, error),
-                React.createElement(Input, { name: 'email', placeholder: 'Email', type: 'text', "data-cy": 'input-email' }),
-                React.createElement(Input, { name: 'password', placeholder: 'Password', type: 'password', "data-cy": 'input-password' }),
+                React.createElement(Input, { name: 'email', placeholder: 'Email', type: 'text', "data-testid": 'input-email' }),
+                React.createElement(Input, { name: 'password', placeholder: 'Password', type: 'password', "data-testid": 'input-password' }),
                 React.createElement(ControlGroup.Spacer, null),
-                React.createElement(Button, { type: 'submit', loading: loading, "data-cy": 'button-register' }, "Create Account")))));
+                React.createElement(Button, { type: 'submit', loading: loading, "data-testid": 'button-register' }, "Create Account")))));
 };
 export default RegisterScreen;

package/build/screens/Verification/Verification.screen.js

@@ -32,8 +32,8 @@ const VerificationScreen = ({ message, loading, error, handleVerification }) =>
         React.createElement(Form, { value: value, onChange: setValue, onSubmit: () => handleVerification(value) },
             React.createElement(ControlGroup, null,
                 React.createElement(ErrorText, null, error),
-                React.createElement(Input, { name: 'code', placeholder: 'code', type: 'text', "data-cy": 'input-verification-code' }),
+                React.createElement(Input, { name: 'code', placeholder: 'code', type: 'text', "data-testid": 'input-verification-code' }),
                 React.createElement(ControlGroup.Spacer, null),
-                React.createElement(Button, { type: 'submit', loading: loading, "data-cy": 'button-verify' }, "Verify")))));
+                React.createElement(Button, { type: 'submit', loading: loading, "data-testid": 'button-verify' }, "Verify")))));
 };
 export default VerificationScreen;

package/package.json

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