@dtdot/lego 2.0.0-9 → 2.0.1

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

@@ -2,9 +2,10 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 export interface MobileMinimalMenuItemProps {
     'icon'?: IconProp;
+    'label': string;
     '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, label, active, onClick, "data-testid": dataTestId, }: MobileMinimalMenuItemProps) => JSX.Element;
 export default MobileMinimalMenuItem;

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

@@ -1,14 +1,12 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { useContext, useEffect, useRef } from 'react';
+import React from 'react';
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
-import useWindowDimensions from '../../../hooks/useWindowDimensions';
 import { mobileMenuDefaultTransition } from './_MobileMenu.constants';
-import MobileMenuBumpContext from './_MobileMenuBump.context';
+import darkTheme from '../../../theme/dark.theme';
 const ItemContainer = styled.div `
   position: relative;
 
-  color: ${(props) => props.theme.colours.defaultFont};
   cursor: pointer;
 
   width: 48px;
@@ -17,26 +15,26 @@ const ItemContainer = styled.div `
   justify-content: center;
   align-items: center;
 `;
+const MotionDivContainer = styled(motion.div) `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  padding-top: 3px;
+`;
+const TextDiv = styled.div `
+  font-size: 12px;
+  padding-top: 6px;
+`;
+const StyledIcon = styled(FontAwesomeIcon) `
+  font-size: 22px;
+`;
 const iconContainerVariants = {
-    active: { fontSize: '28px', y: -8 },
-};
-const MobileMinimalMenuItem = ({ icon, active, onClick, 'data-cy': dataCy }) => {
-    const { width } = useWindowDimensions();
-    const { setBumpX } = useContext(MobileMenuBumpContext);
-    const itemRef = useRef(null);
-    useEffect(() => {
-        if (active && width > 0) {
-            const left = itemRef.current?.offsetLeft;
-            const center = left ? left + 48 / 2 : undefined;
-            setBumpX(center);
-        }
-        return () => {
-            if (active) {
-                setBumpX(undefined);
-            }
-        };
-    }, [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 },
-        React.createElement(FontAwesomeIcon, { icon: icon })))));
+    base: { color: darkTheme.colours.defaultFont },
+    active: { color: darkTheme.colours.primary.hover },
 };
+const MobileMinimalMenuItem = ({ icon, label, active, onClick, 'data-testid': dataTestId, }) => (React.createElement(ItemContainer, { onClick: onClick, "data-testid": dataTestId || 'menu-item' }, icon && (React.createElement(MotionDivContainer, { animate: active ? 'active' : 'base', variants: iconContainerVariants, transition: mobileMenuDefaultTransition },
+    React.createElement(StyledIcon, { icon: icon }),
+    React.createElement(TextDiv, null, label)))));
 export default MobileMinimalMenuItem;

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

@@ -1,13 +1,14 @@
 import React from 'react';
 export type ModalSize = 'sm' | 'md' | 'lg';
 export interface ModalProps {
-    children: React.ReactNode;
-    size?: ModalSize;
-    loading?: boolean;
-    onClose: () => void;
+    'children': React.ReactNode;
+    'size'?: ModalSize;
+    'loading'?: boolean;
+    'onClose': () => void;
+    'data-testid'?: string;
 }
 declare const Modal: {
-    ({ children, size, loading, onClose }: ModalProps): React.ReactPortal;
+    ({ children, size, loading, onClose, "data-testid": dataTestId }: ModalProps): React.ReactPortal;
     Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
     Header: ({ header, subHeader }: import("./_ModalHeader.component").ModalHeaderProps) => JSX.Element;
 };

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

@@ -76,7 +76,7 @@ const SpinnerContainer = styled.div `
   justify-content: center;
   align-items: center;
 `;
-const Modal = ({ children, size, loading, onClose }) => {
+const Modal = ({ children, size, loading, onClose, 'data-testid': dataTestId }) => {
     const handleModalClick = (event) => {
         event.modalClicked = true;
     };
@@ -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": dataTestId || '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

@@ -1,8 +1,5 @@
 /// <reference types="react" />
-export type SelectOption = {
-    value: string;
-    label: string;
-};
+import { SelectOption } from '../common/Options.component';
 export interface ISelectProps {
     'name'?: string;
     'label'?: string;
@@ -10,8 +7,9 @@ export interface ISelectProps {
     'placeholder'?: string;
     'value'?: string;
     'onChange'?: (value: any) => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
     'options': SelectOption[];
+    'className'?: string;
 }
 declare const Select: (props: ISelectProps) => JSX.Element;
 export default Select;

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

@@ -1,13 +1,13 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import { motion } from 'framer-motion';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 import ControlDescription from '../../shared/ControlDescription';
 import ControlLabel from '../../shared/ControlLabel';
 import { ControlStyles } from '../../shared/ControlStyles';
 import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
 import useFormNode, { getValue } from '../Form/useFormNode.hook';
+import { OptionsPopper } from '../common/Options.component';
 const ControlOuter = styled.div `
   position: relative;
 `;
@@ -35,51 +35,34 @@ const PlaceholderText = styled.div `
 const ValueText = styled.div `
   color: ${(props) => getThemeControlColours(props.theme).font};
 `;
-const OptionsContainer = styled.div `
-  width: 100%;
-  position: absolute;
-  background-color: ${(props) => props.theme.colours.controlBackground};
-  z-index: 10000;
-
-  box-shadow: ${(props) => props.theme.shadows.small};
-`;
-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;
-`;
 const Select = (props) => {
-    const theme = useTheme();
     const [isOpen, setIsOpen] = useState(false);
-    const { label, name, description, placeholder, 'value': propsValue, 'data-cy': dataCy, options } = props;
+    const [referenceElement, setReferenceElement] = useState();
+    const { label, name, description, placeholder, 'value': propsValue, 'data-testid': dataTestId, options, className, } = props;
     const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
     const value = getValue(propsValue, contextValue);
     const splitDescription = description ? description.split('\\n').map((str) => str.trim()) : undefined;
-    const selectValue = (option) => {
+    const handleSelect = (value) => {
         setIsOpen(false);
         if (contextOnChange) {
-            contextOnChange(option.value);
+            contextOnChange(value);
         }
         if (props.onChange) {
-            props.onChange(option.value);
+            props.onChange(value);
         }
     };
     const valueLabel = value && options.find((o) => o.value === value)?.label;
-    return (React.createElement("div", null,
+    return (React.createElement("div", { className: className },
         label && React.createElement(ControlLabel, { htmlFor: name }, label),
-        React.createElement(ControlOuter, null,
-            React.createElement(SelectControl, { "data-cy": dataCy, onClick: () => setIsOpen(!isOpen) },
+        React.createElement(ControlOuter, { ref: setReferenceElement },
+            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)),
                 React.createElement(IconContainer, null,
                     React.createElement(FontAwesomeIcon, { icon: isOpen ? faChevronUp : faChevronDown }))),
-            isOpen && (React.createElement(OptionsContainer, null, options.map((option) => (React.createElement(Option, { whileHover: { backgroundColor: theme.colours.controlBorder }, transition: { type: 'spring', duration: 0.2 }, key: option.value, onClick: () => selectValue(option) }, option.label)))))),
-        splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(React.Fragment, null,
+            isOpen && (React.createElement(OptionsPopper, { referenceElement: referenceElement, options: options, onSelect: handleSelect, onClose: () => setIsOpen(false) }))),
+        splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(Fragment, { key: index },
             index !== 0 && React.createElement("br", null),
             line)))))));
 };

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, border }: 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/Table.component.js

@@ -8,6 +8,7 @@ import TableActionMenu from './_TableActionMenu';
 import TableRow from './_TableRow.component';
 const StyledTable = styled.table `
   width: 100%;
+  border-spacing: 0;
 `;
 const TableHiddenActionSpan = styled.span `
   visibility: none;

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

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

@@ -3,15 +3,21 @@ import { useContext } from 'react';
 import styled from 'styled-components';
 import TableContext from './_Table.context';
 const StyledRow = styled.tr `
-  box-shadow: 0px 1px 0px 0px
-    ${(props) => (props.variant === 'regular' ? props.theme.colours.defaultBorder : props.theme.colours.faintBorder)};
+  ${(props) => props.border &&
+    `
+      box-shadow: 0px 1px 0px 0px ${props.variant === 'regular' ? props.theme.colours.defaultBorder : props.theme.colours.faintBorder}
+  `}
 
   &:last-child {
     box-shadow: none;
   }
+
+  &:hover {
+    background-color: ${(props) => props.theme.colours.cardBackground};
+  }
 `;
-const TableRow = ({ children, 'data-cy': dataCy }) => {
+const TableRow = ({ children, 'data-testid': dataTestId, border = false }) => {
     const { variant } = useContext(TableContext);
-    return (React.createElement(StyledRow, { variant: variant, "data-cy": dataCy }, children));
+    return (React.createElement(StyledRow, { variant: variant, "data-testid": dataTestId, border: border }, children));
 };
 export default TableRow;

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

@@ -1,8 +1,10 @@
 import React from 'react';
 export type TextVariant = 'primary' | 'secondary';
 export interface TextProps {
-    children: React.ReactNode;
-    variant?: TextVariant;
+    'children': React.ReactNode;
+    'variant'?: TextVariant;
+    'noWrap'?: boolean;
+    'data-testid'?: string;
 }
-declare const Text: ({ children, variant }: TextProps) => JSX.Element;
+declare const Text: ({ children, variant, noWrap, "data-testid": dataTestId }: TextProps) => JSX.Element;
 export default Text;

package/build/components/Text/Text.component.js

@@ -6,6 +6,15 @@ const TextContainer = styled.span `
   font-weight: ${(props) => props.theme.fonts.default.weight};
 
   color: ${(props) => props.theme.colours.defaultFont};
+
+  ${(props) => props.noWrap &&
+    `
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    max-width: 100%;
+  `}
 `;
 const TextContainerSecondary = styled.span `
   font-family: ${(props) => props.theme.fonts.default.family};
@@ -13,14 +22,23 @@ const TextContainerSecondary = styled.span `
   font-weight: ${(props) => props.theme.fonts.default.weight};
 
   color: ${(props) => props.theme.colours.secondaryFont};
+
+  ${(props) => props.noWrap &&
+    `
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    max-width: 100%;
+  `}
 `;
-const Text = ({ children, variant = 'primary' }) => {
+const Text = ({ children, variant = 'primary', noWrap, 'data-testid': dataTestId }) => {
     switch (variant) {
         case 'secondary':
-            return React.createElement(TextContainerSecondary, null, children);
+            return (React.createElement(TextContainerSecondary, { noWrap: noWrap, "data-testid": dataTestId }, children));
         case 'primary':
         default:
-            return React.createElement(TextContainer, null, children);
+            return (React.createElement(TextContainer, { noWrap: noWrap, "data-testid": dataTestId }, children));
     }
 };
 export default Text;

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/Toggle/Toggle.component.js

@@ -30,7 +30,7 @@ const toggleDotVariants = {
     on: { transform: 'translateX(22px)' },
 };
 const Toggle = ({ value, onChange }) => {
-    return (React.createElement(ToggleOuter, { animate: value ? 'on' : 'off', variants: toggleOuterVariants, transition: { type: 'spring', duration: 0.3 }, onClick: () => onChange(!value) },
+    return (React.createElement(ToggleOuter, { animate: value ? 'on' : 'off', variants: toggleOuterVariants, transition: { type: 'spring', duration: 0.3 }, onClick: () => onChange(!value), "data-testid": 'toggle' },
         React.createElement(ToggleDot, { animate: value ? 'on' : 'off', variants: toggleDotVariants, transition: { type: 'spring', duration: 0.3 } })));
 };
 export default Toggle;

package/build/components/common/Options.component.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export declare const OptionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Option: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
+export type SelectOption = {
+    value: string;
+    label: string;
+};
+export interface SelectOptionsProps {
+    options: SelectOption[];
+    onSelect: (value: string) => void;
+}
+export declare const SelectOptions: ({ options, onSelect }: SelectOptionsProps) => JSX.Element;
+export interface SelectOptionsPopperProps {
+    referenceElement: any;
+    options: SelectOption[];
+    onSelect: (value: string) => void;
+    onClose: () => void;
+}
+export declare const OptionsPopper: ({ referenceElement, options, onSelect, onClose }: SelectOptionsPopperProps) => React.ReactPortal;

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

@@ -0,0 +1,50 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { usePopper } from 'react-popper';
+import { motion } from 'framer-motion';
+import styled, { useTheme } from 'styled-components';
+import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
+export const OptionsContainer = styled.div `
+  width: 100%;
+  background-color: ${(props) => props.theme.colours.controlBackground};
+  z-index: 10000;
+
+  box-shadow: ${(props) => props.theme.shadows.small};
+`;
+export const Option = styled(motion.div) `
+  color: ${(props) => getThemeControlColours(props.theme).font};
+  background-color: ${(props) => props.theme.colours.controlBackgroundDisabled};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  min-height: 36px;
+  padding: 6px 12px;
+`;
+export const SelectOptions = ({ options, onSelect }) => {
+    const theme = useTheme();
+    return (React.createElement(OptionsContainer, null, options.map((option) => (React.createElement(Option, { "data-testid": `option-${option.value}`, whileHover: { backgroundColor: theme.colours.controlBorder }, transition: { type: 'spring', duration: 0.2 }, key: option.value, onClick: () => onSelect(option.value) }, option.label)))));
+};
+export const OptionsPopper = ({ referenceElement, options, onSelect, onClose }) => {
+    const [popperElement, setPopperElement] = useState();
+    const { styles, attributes } = usePopper(referenceElement, popperElement, { placement: 'bottom-start' });
+    const handleGlobalClick = useCallback((event) => {
+        if (!popperElement?.contains(event.target)) {
+            onClose();
+        }
+    }, [onClose, popperElement]);
+    useEffect(() => {
+        document.addEventListener('mouseup', handleGlobalClick);
+        return () => {
+            document.removeEventListener('mouseup', handleGlobalClick);
+        };
+    }, [handleGlobalClick, popperElement]);
+    return ReactDOM.createPortal(React.createElement("div", { "data-testid": 'options-popper', ref: setPopperElement, style: {
+            ...styles.popper,
+            zIndex: 999,
+            width: referenceElement?.offsetWidth,
+            maxHeight: '270px',
+            overflowY: 'auto',
+        }, ...attributes.popper },
+        React.createElement(SelectOptions, { options: options, onSelect: onSelect })), document.querySelector('body'));
+};

package/build/constants/zIndex.constants.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    floatingActionButton: number;
     modalOverlay: number;
     modalContent: number;
     notifications: number;

package/build/constants/zIndex.constants.js

@@ -1,4 +1,5 @@
 export default {
+    floatingActionButton: 5,
     modalOverlay: 100,
     modalContent: 110,
     notifications: 120,

package/build/index.d.ts

@@ -12,7 +12,9 @@ export { default as Card } from './components/Card/Card.component';
 export { default as CardGroup } from './components/Card/CardGroup.component';
 export { default as Checklist } from './components/Checklist/Checklist.component';
 export { default as ControlGroup } from './components/ControlGroup/ControlGroup.component';
+export { default as ControlLine } from './components/ControlLine/ControlLine.component';
 export { default as FancyCheckbox } from './components/FancyCheckbox/FancyCheckbox.component';
+export { default as FloatingActionButton } from './components/FloatingActionButton/FloatingActionButton.component';
 export { default as Form } from './components/Form/Form.component';
 export { default as Notification } from './components/Notification/Notification.component';
 export { default as Notifications } from './components/Notifications/Notifications.component';

package/build/index.js

@@ -12,7 +12,9 @@ export { default as Card } from './components/Card/Card.component';
 export { default as CardGroup } from './components/Card/CardGroup.component';
 export { default as Checklist } from './components/Checklist/Checklist.component';
 export { default as ControlGroup } from './components/ControlGroup/ControlGroup.component';
+export { default as ControlLine } from './components/ControlLine/ControlLine.component';
 export { default as FancyCheckbox } from './components/FancyCheckbox/FancyCheckbox.component';
+export { default as FloatingActionButton } from './components/FloatingActionButton/FloatingActionButton.component';
 export { default as Form } from './components/Form/Form.component';
 export { default as Notification } from './components/Notification/Notification.component';
 export { default as Notifications } from './components/Notifications/Notifications.component';