@dtdot/lego 2.0.0-6 → 2.0.0-7

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

@@ -33,7 +33,9 @@ const IconOuter = styled.span `
   justify-content: center;
 
   color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
-  background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).darker};
+  background-color: ${(props) => 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};
@@ -64,7 +66,9 @@ const StyledButton = styled.button `
     background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).hover};
 
     ${IconOuter} {
-      background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).darkerHover};
+      background-color: ${(props) => props.iconOnly
+    ? getThemeVariantColours(props.variant, props.theme).hover
+    : getThemeVariantColours(props.variant, props.theme).darkerHover};
     }
   }
 `;
@@ -105,10 +109,10 @@ 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' }, loading ? (React.createElement(SpinnerContainer, null,
-        React.createElement(ButtonSpinner, { "data-cy": 'button-loading-spinner', variant: variant, size: size }))) : (React.createElement(ButtonInner, null,
+    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,
+        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 },
+        icon && (React.createElement(IconOuter, { variant: variant, size: size, height: height, iconOnly: !children },
             React.createElement(FontAwesomeIcon, { icon: icon })))))));
 });
 export default Button;

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;
@@ -13,7 +14,8 @@ declare const Table: {
     Row: ({ children, "data-cy": dataCy }: 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;
+    Action: ({ text, variant, icon, onClick, "data-cy": dataCy }: TableActionProps) => JSX.Element;
     ActionMenu: ({ items, "data-cy": dataCy }: import("./_TableActionMenu").TableActionMenuProps) => JSX.Element;
+    HiddenAction: (props: TableActionProps) => JSX.Element;
 };
 export default Table;

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

@@ -9,6 +9,10 @@ import TableRow from './_TableRow.component';
 const StyledTable = styled.table `
   width: 100%;
 `;
+const TableHiddenActionSpan = styled.span `
+  visibility: none;
+  opacity: 0;
+`;
 const TableCell = styled.td `
   font-family: ${(props) => props.theme.fonts.default.family};
   font-size: ${(props) => props.theme.fonts.default.size};
@@ -18,7 +22,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 +43,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;
 }
-declare const TableAction: ({ text, onClick, "data-cy": dataCy }: TableActionProps) => JSX.Element;
+declare const TableAction: ({ text, variant, icon, onClick, "data-cy": dataCy }: 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-cy': dataCy }) => {
+    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)));
 };
 export default TableAction;

package/package.json

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