@dtdot/lego 2.0.0-10 → 2.0.0-12

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

@@ -36,7 +36,7 @@ const ActionMenu = ({ children, variant, size, icon, text, 'data-cy': dataCy })
     return (React.createElement(React.Fragment, null,
         React.createElement(Button, { variant: variant, size: size, icon: icon || faEllipsisV, "data-cy": dataCy || 'action-menu-button', ref: setReferenceElement, onClick: () => setShown(true) }, text),
         shown &&
-            ReactDOM.createPortal(React.createElement("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper },
+            ReactDOM.createPortal(React.createElement("div", { ref: setPopperElement, style: { ...styles.popper, zIndex: 999 }, ...attributes.popper },
                 React.createElement(ActionMenuContext.Provider, { value: { closeActionMenu: () => setShown(false) } },
                     React.createElement(ActionMenuPanel, null, children))), document.querySelector('body'))));
 };

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

@@ -33,9 +33,11 @@ const IconOuter = styled.span `
   justify-content: center;
 
   color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
-  background-color: ${(props) => props.iconOnly
-    ? getThemeVariantColours(props.variant, props.theme).main
-    : getThemeVariantColours(props.variant, props.theme).darker};
+  background-color: ${(props) => props.noBackground
+    ? 'transparent'
+    : props.iconOnly
+        ? getThemeVariantColours(props.variant, props.theme).main
+        : getThemeVariantColours(props.variant, props.theme).darker};
 
   height: ${(props) => props.height || getIconContainerSizePx(props.size).height};
   width: ${(props) => getIconContainerSizePx(props.size).width};
@@ -51,8 +53,8 @@ const StyledButton = styled.button `
   font-size: ${(props) => props.theme.fonts.default.size};
   font-family: ${(props) => props.theme.fonts.default.family};
 
-  color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
-  background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).main};
+  color: ${(props) => getThemeVariantColours(props.noBackground ? 'secondary' : props.variant, props.theme).contrastText};
+  background-color: ${(props) => props.noBackground ? 'transparent' : getThemeVariantColours(props.variant, props.theme).main};
 
   border-radius: 2px;
 
@@ -63,7 +65,7 @@ const StyledButton = styled.button `
   margin-top: ${(props) => props.marginTop};
 
   &:hover {
-    background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).hover};
+    background-color: ${(props) => props.noBackground ? 'transparent' : getThemeVariantColours(props.variant, props.theme).hover};
 
     ${IconOuter} {
       background-color: ${(props) => props.iconOnly
@@ -109,11 +111,11 @@ const ButtonSpinner = styled.div `
 `;
 const Button = React.forwardRef(function Button(props, ref) {
     const { children, loading, variant = 'primary', size = 'md', type = 'button', icon, onClick, 'data-cy': dataCy, } = props;
-    const { width, height, alignSelf, marginTop } = useContext(ButtonContext);
-    return (React.createElement(StyledButton, { ref: ref, width: width, height: height, alignSelf: alignSelf, marginTop: marginTop, variant: variant, size: size, type: type, onClick: onClick, "data-cy": dataCy || 'button', iconOnly: !children }, loading ? (React.createElement(SpinnerContainer, null,
+    const { width, height, alignSelf, marginTop, noBackground } = useContext(ButtonContext);
+    return (React.createElement(StyledButton, { ref: ref, width: width, height: height, alignSelf: alignSelf, marginTop: marginTop, noBackground: noBackground, variant: variant, size: size, type: type, onClick: onClick, "data-cy": dataCy || 'button', iconOnly: !children }, loading ? (React.createElement(SpinnerContainer, null,
         React.createElement(ButtonSpinner, { "data-cy": 'button-loading-spinner', variant: variant, size: size, iconOnly: !children }))) : (React.createElement(ButtonInner, null,
         children && React.createElement(ButtonTextContainer, { size: size }, children),
-        icon && (React.createElement(IconOuter, { variant: variant, size: size, height: height, iconOnly: !children },
+        icon && (React.createElement(IconOuter, { noBackground: noBackground, variant: variant, size: size, height: height, iconOnly: !children },
             React.createElement(FontAwesomeIcon, { icon: icon })))))));
 });
 export default Button;

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

@@ -4,6 +4,7 @@ export interface ButtonContextProps {
     height?: string;
     alignSelf?: string;
     marginTop?: string;
+    noBackground?: boolean;
 }
 declare const ButtonContext: import("react").Context<ButtonContextProps>;
 export default ButtonContext;

package/build/components/Button/Button.context.js

@@ -4,5 +4,6 @@ const ButtonContext = createContext({
     height: undefined,
     alignSelf: undefined,
     marginTop: undefined,
+    noBackground: undefined,
 });
 export default ButtonContext;

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Text } from '../..';
+import ButtonContext from '../Button/Button.context';
 const HeaderRow = styled.div `
   display: flex;
   justify-content: space-between;
   padding: 8px 16px;
   margin-bottom: 8px;
 
-  border-bottom: thin solid ${(props) => props.theme.colours.defaultBorder};
+  background-color: ${(props) => props.theme.colours.cardBackgroundSecondary};
 `;
 const LeftContainer = styled.div `
   display: flex;
@@ -43,6 +44,7 @@ const CardHeader = ({ image, heading, subHeading, meta }) => {
                     React.createElement(Text, null, heading)),
                 React.createElement("div", null,
                     React.createElement(Text, { variant: 'secondary' }, subHeading)))),
-        meta && React.createElement(MetaContainer, null, meta)));
+        meta && (React.createElement(MetaContainer, null,
+            React.createElement(ButtonContext.Provider, { value: { height: '24px', width: '24px', noBackground: true } }, meta)))));
 };
 export default CardHeader;

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

@@ -1,5 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { usePopper } from 'react-popper';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
@@ -37,7 +39,7 @@ const ValueText = styled.div `
 `;
 const OptionsContainer = styled.div `
   width: 100%;
-  position: absolute;
+  /* position: absolute; */
   background-color: ${(props) => props.theme.colours.controlBackground};
   z-index: 10000;
 
@@ -55,8 +57,11 @@ const Option = styled(motion.div) `
 const Select = (props) => {
     const theme = useTheme();
     const [isOpen, setIsOpen] = useState(false);
+    const [referenceElement, setReferenceElement] = useState();
+    const [popperElement, setPopperElement] = useState();
     const { label, name, description, placeholder, 'value': propsValue, 'data-cy': dataCy, options } = props;
     const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    const { styles, attributes } = usePopper(referenceElement, popperElement, { placement: 'bottom-start' });
     const value = getValue(propsValue, contextValue);
     const splitDescription = description ? description.split('\\n').map((str) => str.trim()) : undefined;
     const selectValue = (option) => {
@@ -69,16 +74,29 @@ const Select = (props) => {
         }
     };
     const valueLabel = value && options.find((o) => o.value === value)?.label;
+    const handleGlobalClick = useCallback((event) => {
+        if (!popperElement?.contains(event.target)) {
+            setIsOpen(false);
+        }
+    }, [setIsOpen, popperElement]);
+    useEffect(() => {
+        document.addEventListener('mouseup', handleGlobalClick);
+        return () => {
+            document.removeEventListener('mouseup', handleGlobalClick);
+        };
+    }, [handleGlobalClick, popperElement]);
     return (React.createElement("div", null,
         label && React.createElement(ControlLabel, { htmlFor: name }, label),
-        React.createElement(ControlOuter, null,
+        React.createElement(ControlOuter, { ref: setReferenceElement },
             React.createElement(SelectControl, { "data-cy": dataCy, 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)))))),
+            isOpen &&
+                ReactDOM.createPortal(React.createElement("div", { ref: setPopperElement, style: { ...styles.popper, zIndex: 999, width: referenceElement?.offsetWidth }, ...attributes.popper },
+                    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))))), document.querySelector('body'))),
         splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(React.Fragment, null,
             index !== 0 && React.createElement("br", null),
             line)))))));

package/package.json

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