@dtdot/lego 2.0.0-3 → 2.0.0-32

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,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

@@ -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 } = 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,
         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/Spacer/Spacer.component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type SpacerSize = '0.5x' | '1x' | '2x' | '4x' | '6x';
+export type SpacerSize = '0.5x' | '1x' | '2x' | '4x' | '6x' | '8x';
 export interface SpacerProps {
     size: SpacerSize;
 }

package/build/components/Spacer/Spacer.component.js

@@ -12,6 +12,8 @@ const getSpacing = (size) => {
             return '32px';
         case '6x':
             return '48px';
+        case '8x':
+            return '64px';
         default:
             return 0;
     }

package/build/components/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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TableVariant } from './_Table.context';
+import { TableActionProps } from './_TableAction';
 export type TableCellVariant = 'tight';
 export interface TableProps {
     children: React.ReactNode;
@@ -10,10 +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, onClick, "data-cy": dataCy }: import("./_TableAction").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,11 @@ import TableActionMenu from './_TableActionMenu';
 import TableRow from './_TableRow.component';
 const StyledTable = styled.table `
   width: 100%;
+  border-spacing: 0;
+`;
+const TableHiddenActionSpan = styled.span `
+  visibility: none;
+  opacity: 0;
 `;
 const TableCell = styled.td `
   font-family: ${(props) => props.theme.fonts.default.family};
@@ -18,7 +23,16 @@ const TableCell = styled.td `
 
   padding: ${(props) => (props.variant === 'tight' ? '0' : '0 16px')};
   height: 36px;
+
+  &:hover {
+    ${TableHiddenActionSpan} {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 `;
+const TableHiddenAction = (props) => (React.createElement(TableHiddenActionSpan, null,
+    React.createElement(TableAction, { ...props })));
 const Table = ({ children, variant = 'regular' }) => {
     return (React.createElement(TableContext.Provider, { value: { variant } },
         React.createElement(ButtonContext.Provider, { value: { height: '24px' } },
@@ -30,4 +44,5 @@ Table.Cell = TableCell;
 Table.ActionContainer = TableActionContainer;
 Table.Action = TableAction;
 Table.ActionMenu = TableActionMenu;
+Table.HiddenAction = TableHiddenAction;
 export default Table;

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

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ColourVariant } from '../../theme/theme.types';
 export interface TableActionProps {
-    'text': string;
+    'text'?: string;
+    'variant'?: ColourVariant;
+    'icon'?: IconProp;
     'onClick': () => void;
-    'data-cy'?: string;
+    'data-testid'?: string;
 }
-declare const TableAction: ({ text, 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,6 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Button from '../Button/Button.component';
-const TableAction = ({ text, onClick, 'data-cy': dataCy }) => {
-    return (React.createElement(Button, { variant: 'tertiary', onClick: onClick, "data-cy": dataCy || 'button-table-action' }, text));
+import ButtonContext from '../Button/Button.context';
+const TableAction = ({ text, variant, icon, onClick, 'data-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-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/index.d.ts

@@ -12,6 +12,7 @@ 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 Form } from './components/Form/Form.component';
 export { default as Notification } from './components/Notification/Notification.component';

package/build/index.js

@@ -12,6 +12,7 @@ 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 Form } from './components/Form/Form.component';
 export { default as Notification } from './components/Notification/Notification.component';

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/build/shared/ControlStyles.js

@@ -16,7 +16,7 @@ export const ControlStyles = css `
   color: ${(props) => getThemeControlColours(props.theme).font};
   background-color: ${(props) => getThemeControlColours(props.theme).background};
 
-  border: 1px solid ${(props) => getThemeControlColours(props.theme).border};
+  border: 1px solid ${(props) => getThemeControlColours(props.theme).background};
   border-radius: 2px;
 
   &:hover {

package/build/theme/dark.theme.js

@@ -35,9 +35,11 @@ const darkTheme = {
         faintBorder: '#cccccc1f',
         controlBackground: '#5e6167',
         controlBackgroundDisabled: '#47494d',
-        controlBorder: '#565656',
+        controlBorder: '#595b5e',
+        // controlBorder: '#565656',
         controlBorderFocus: '#4289de',
-        controlBorderHover: '#4a4949',
+        controlBorderHover: '#686c74',
+        // controlBorderHover: '#4a4949',
         controlPlaceholder: '#949494',
         controlDescriptionColour: '#cbcbcb',
         uploadBackground: '#5e6167',