@dtdot/lego 2.0.0-9 → 2.1.0

package/build/components/FloatingActionButton/_FloatingActionButton.provider.js

@@ -0,0 +1,15 @@
+import React, { useMemo, useState } from 'react';
+import { AnimatePresence } from 'framer-motion';
+import FloatingActionButtonContext from './_FloatingActionButton.context';
+import FloatingActionButtonInternal from './_FloatingActionButton.internal';
+const FloatingActionButtonProvider = ({ children }) => {
+    const [fab, setFab] = useState();
+    const contextVal = useMemo(() => ({
+        contextExists: true,
+        setButton: setFab,
+    }), [setFab]);
+    return (React.createElement(FloatingActionButtonContext.Provider, { value: contextVal },
+        children,
+        React.createElement(AnimatePresence, null, fab?.icon && (React.createElement(FloatingActionButtonInternal, { key: fab.id, icon: fab.icon, onClick: fab.onClick, variant: fab.variant })))));
+};
+export default FloatingActionButtonProvider;

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

package/build/components/InlineCard/InlineCard.component.js

@@ -105,7 +105,7 @@ const SelectIconContainer = styled.div `
 
   color: ${(props) => props.theme.colours.statusInfo.contrast};
 `;
-const InlineCard = ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }) => {
+const InlineCard = ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, 'data-testid': dataTestId, }) => {
     const { value: selectedValues, onToggle } = useContext(InlineCardSelectionContext);
     const isSelectable = !!onToggle;
     const isSelected = selectedValues?.length && value && selectedValues.includes(value);
@@ -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": dataTestId || 'inline-card' }, children),
         isSelectable && isSelected ? (React.createElement(SelectChecked, null,
             React.createElement(SelectIconContainer, null,
                 React.createElement(FontAwesomeIcon, { icon: faCheck })))) : null));

package/build/components/InlineCard/_InlineCardContent.component.js

@@ -9,6 +9,8 @@ const ContentContainer = styled.div `
   font-size: ${(props) => props.theme.fonts.default.size};
   color: ${(props) => props.theme.colours.defaultFont};
 
+  min-width: 0;
+
   ${(props) => props.center &&
     `
       display: flex;

package/build/components/InlineCard/_InlineCardMeta.component.js

@@ -8,6 +8,7 @@ const ContentContainer = styled.div `
   display: flex;
   align-items: center;
   margin-left: auto;
+  flex-shrink: 0;
 `;
 const InlineCardMeta = ({ children }) => {
     return React.createElement(ContentContainer, null, children);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SelectOption } from '../common/Options.component';
 export interface IInputProps {
     'name'?: string;
     'label'?: string;
@@ -12,7 +13,10 @@ export interface IInputProps {
     'onChange'?: (value: any) => void;
     'onFocus'?: () => void;
     'onBlur'?: () => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
+    'suggestions'?: SelectOption[];
+    'loading'?: boolean;
+    'loadingVariant'?: 'default' | 'background';
 }
 declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

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

@@ -8,9 +8,11 @@ import ControlDescription from '../../shared/ControlDescription';
 import ControlLabel from '../../shared/ControlLabel';
 import { ControlStyles } from '../../shared/ControlStyles';
 import useFormNode, { getValue } from '../Form/useFormNode.hook';
+import { OptionsPopper } from '../common/Options.component';
+import Loader from '../Loader/Loader.component';
 const InputContainer = styled.div `
   position: relative;
-  margin: 2px 0;
+  border-radius: 2px;
 
   background-color: ${(props) => props.theme.colours.controlBackground};
 `;
@@ -51,6 +53,16 @@ const ErrorInner = styled.div `
   align-items: center;
   cursor: pointer;
 `;
+const LoadingContainer = styled.div `
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
 const errorVariants = {
     show: { opacity: 1, x: 10 },
 };
@@ -62,11 +74,22 @@ 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, } = props;
+    const { label, name, description, placeholder, disabled, type = 'text', autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-testid': dataTestId, suggestions, loading, loadingVariant, } = props;
+    const [isOpen, setIsOpen] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
+    const [referenceElement, setReferenceElement] = useState();
     const { value: contextValue, error: contextError, onChange: contextOnChange } = useFormNode(name);
     const error = contextError || propsError;
     const splitDescription = description ? description.split('\\n').map((str) => str.trim()) : undefined;
+    const handleSetSuggestion = (value) => {
+        setIsOpen(false);
+        if (onChange) {
+            onChange(value);
+        }
+        if (contextOnChange) {
+            contextOnChange(value);
+        }
+    };
     const handleChange = (e) => {
         if (onChange) {
             onChange(e.target.value);
@@ -87,17 +110,24 @@ const Input = React.forwardRef(function ForwardRefInput(props, ref) {
             onBlur();
         }
     };
+    const handleClick = () => {
+        setIsOpen(true);
+    };
     const animationVariant = error ? (isFocused ? 'errorFocus' : 'error') : undefined;
+    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 },
-            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, 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))),
-        splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(React.Fragment, null,
+            error && (React.createElement(ErrorMessage, { style: { opacity: 0, y: 0 }, animate: animationVariant, variants: messageVariants, transition: { type: 'spring', duration: 0.3 }, "data-testid": 'error-message' }, error)),
+            loading && (React.createElement(LoadingContainer, null,
+                React.createElement(Loader, { size: 'sm', variant: loadingVariant })))),
+        splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement("span", { key: index },
             index !== 0 && React.createElement("br", null),
-            line)))))));
+            line))))),
+        filteredOptions && isOpen && (React.createElement(OptionsPopper, { referenceElement: referenceElement, options: filteredOptions, onSelect: handleSetSuggestion, onClose: () => setIsOpen(false) }))));
 });
 export default Input;

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.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="react" />
+export interface BaseLoaderProps {
+    variant?: 'default' | 'background';
+    size: 'sm' | 'md';
+}
 export interface LoaderProps {
-    variant?: 'page-loader' | 'default';
+    variant?: 'page-loader' | 'default' | 'background';
+    size?: 'sm' | 'md';
 }
-declare const Loader: ({ variant }: LoaderProps) => JSX.Element;
+declare const Loader: ({ variant, size }: LoaderProps) => JSX.Element;
 export default Loader;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
 import colours from '../../colours/colours';
@@ -47,15 +47,35 @@ 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' },
-    React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
-    React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
-    React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition })));
-const Loader = ({ variant = 'default' }) => {
+const BaseLoader = ({ size, variant }) => {
+    const loadingCircleWithSize = useMemo(() => {
+        const sizePx = size === 'md' ? '10px' : '5px';
+        return {
+            ...loadingCircle,
+            width: sizePx,
+            height: sizePx,
+            backgroundColor: variant === 'default' ? colours.grey30 : colours.grey50,
+        };
+    }, [size, variant]);
+    const loadingContainerWithSize = useMemo(() => {
+        const widthPx = size === 'md' ? '40px' : '20px';
+        const heightPx = size === 'md' ? '26px' : '13px';
+        return {
+            ...loadingContainer,
+            width: widthPx,
+            height: heightPx,
+        };
+    }, [size]);
+    return (React.createElement(motion.div, { style: loadingContainerWithSize, variants: loadingContainerVariants, initial: 'start', animate: 'end', "data-testid": 'loader' },
+        React.createElement(motion.span, { style: loadingCircleWithSize, variants: loadingCircleVariants, transition: loadingCircleTransition }),
+        React.createElement(motion.span, { style: loadingCircleWithSize, variants: loadingCircleVariants, transition: loadingCircleTransition }),
+        React.createElement(motion.span, { style: loadingCircleWithSize, variants: loadingCircleVariants, transition: loadingCircleTransition })));
+};
+const Loader = ({ variant = 'default', size = 'md' }) => {
     if (variant === 'page-loader') {
         return (React.createElement(PageLoaderContainer, null,
-            React.createElement(BaseLoader, null)));
+            React.createElement(BaseLoader, { size: size })));
     }
-    return React.createElement(BaseLoader, null);
+    return React.createElement(BaseLoader, { size: size, variant: variant });
 };
 export default Loader;

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

@@ -4,8 +4,8 @@ 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;
+    Header: ({ hiddenMenu, text, rightContent, size }: import("./_MinimalMenuHeader.component").MinimalMenuHeaderProps) => JSX.Element;
+    Item: ({ icon, label, 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/MinimalMenu.context.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MinimalMenuContextProps {
+    menuExists: boolean;
+    isMobile: boolean;
+}
+declare const MinimalMenuContext: React.Context<MinimalMenuContextProps>;
+export default MinimalMenuContext;

package/build/components/MinimalMenu/MinimalMenu.context.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const MinimalMenuContext = React.createContext({
+    menuExists: false,
+    isMobile: false,
+});
+export default MinimalMenuContext;

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

@@ -6,10 +6,11 @@ export interface MinimalMenuHeaderProps {
     hiddenMenu?: boolean;
     text?: string;
     rightContent?: React.ReactNode;
+    size?: 'sm' | 'md';
 }
 /**
  * A header that is designed to be nested within the page content.
  * You can use a header per page or simply use a single header for your entire application.
  */
-declare const MinimalMenuHeader: ({ hiddenMenu, text, rightContent }: MinimalMenuHeaderProps) => JSX.Element;
+declare const MinimalMenuHeader: ({ hiddenMenu, text, rightContent, size }: MinimalMenuHeaderProps) => JSX.Element;
 export default MinimalMenuHeader;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 const MinimalMenuHeaderContainer = styled.div ``;
 const Header = styled.div `
-  height: 48px;
+  height: ${(props) => (props.size === 'sm' ? '48px' : '64px')};
   background-color: ${(props) => props.theme.colours.cardBackground};
 
   display: flex;
@@ -22,9 +22,9 @@ const TitleText = styled.div `
  * A header that is designed to be nested within the page content.
  * You can use a header per page or simply use a single header for your entire application.
  */
-const MinimalMenuHeader = ({ hiddenMenu, text, rightContent }) => {
+const MinimalMenuHeader = ({ hiddenMenu, text, rightContent, size = 'sm' }) => {
     return (React.createElement(MinimalMenuHeaderContainer, { hiddenMenu: !!hiddenMenu },
-        React.createElement(Header, null,
+        React.createElement(Header, { size: size },
             React.createElement(HeaderItem, null, text && React.createElement(TitleText, null, text)),
             React.createElement(HeaderItem, null, rightContent))));
 };

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

@@ -2,9 +2,10 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 export interface MinimalMenuItemProps {
     'icon'?: IconProp;
+    'label': string;
     '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, label, 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, label, 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, label: label, 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/_MinimalMenuPage.component.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
-import responsive from '../../responsive/responsive';
+import responsive, { useIsScreenSize } from '../../responsive/responsive';
+import MinimalMenuContext from './MinimalMenu.context';
 const MinimalMenuPageContainer = styled.div `
   ${responsive.useStylesFor('tablet').andLarger(`
     padding-left: 64px;
@@ -17,6 +18,12 @@ const MinimalMenuPageContainer = styled.div `
   `}
 `;
 const MinimalMenuPage = ({ children, hiddenMenu }) => {
-    return React.createElement(MinimalMenuPageContainer, { hiddenMenu: !!hiddenMenu }, children);
+    const isMobile = useIsScreenSize('mobile');
+    const contextState = useMemo(() => ({
+        menuExists: true,
+        isMobile,
+    }), [isMobile]);
+    return (React.createElement(MinimalMenuContext.Provider, { value: contextState },
+        React.createElement(MinimalMenuPageContainer, { hiddenMenu: !!hiddenMenu }, children)));
 };
 export default MinimalMenuPage;

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/_MobileMenu.constants.js

@@ -1 +1 @@
-export const mobileMenuDefaultTransition = { type: 'spring', duration: 0.2, bounce: 0 };
+export const mobileMenuDefaultTransition = { type: 'spring', duration: 0.1, bounce: 0 };

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

@@ -1,41 +1,21 @@
-import React, { useState } from 'react';
-import { motion } from 'framer-motion';
+import React from 'react';
 import styled from 'styled-components';
-import { mobileMenuDefaultTransition } from './_MobileMenu.constants';
-import MobileMenuBump from './_MobileMenuBump.component';
-import MobileMenuBumpContext from './_MobileMenuBump.context';
 const MobileMinimalMenuOuter = styled.div `
   position: fixed;
   bottom: 0;
   left: 0;
 
   width: 100%;
-  height: 48px;
+  height: 56px;
   z-index: 10;
 
   display: flex;
   justify-content: space-evenly;
+  align-items: center;
 
   background-color: ${(props) => props.theme.colours.cardBackground};
 `;
-const AnimatedMenuBumpContainer = styled(motion.div) `
-  position: fixed;
-  bottom: 46px;
-  left: 0;
-
-  width: 86px;
-  height: 24px;
-
-  svg {
-    fill: ${(props) => props.theme.colours.cardBackground};
-  }
-`;
 const MobileMinimalMenuContainer = ({ children }) => {
-    const [bumpX, setBumpX] = useState(0);
-    return (React.createElement(MobileMenuBumpContext.Provider, { value: { setBumpX } },
-        React.createElement(MobileMinimalMenuOuter, null,
-            React.createElement(AnimatedMenuBumpContainer, { animate: { opacity: bumpX ? 1 : 0, x: bumpX ? bumpX - 86 / 2 : undefined, y: bumpX ? 0 : 100 }, transition: mobileMenuDefaultTransition },
-                React.createElement(MobileMenuBump, null)),
-            children)));
+    return React.createElement(MobileMinimalMenuOuter, null, children);
 };
 export default MobileMinimalMenuContainer;