@dtdot/lego 2.0.0-10 → 2.0.0-11

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/package.json

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