@dtdot/lego 1.2.0 → 1.4.0

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

@@ -2,8 +2,9 @@
 import { ColourVariant } from '../../theme/theme.types';
 import { IActionMenuItem } from './_ActionMenu.types';
 export interface ActionMenuProps {
-    items: IActionMenuItem[];
-    variant?: ColourVariant;
+    'items': IActionMenuItem[];
+    'variant'?: ColourVariant;
+    'data-cy'?: string;
 }
-declare const ActionMenu: ({ items, variant }: ActionMenuProps) => JSX.Element;
+declare const ActionMenu: ({ items, variant, "data-cy": dataCy }: ActionMenuProps) => JSX.Element;
 export default ActionMenu;

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

@@ -10,7 +10,7 @@ const StyledIcon = styled(FontAwesomeIcon) `
   font-size: 18px;
 `;
 const offsetFn = () => [70, 4];
-const ActionMenu = ({ items, variant }) => {
+const ActionMenu = ({ items, variant, 'data-cy': dataCy }) => {
     const [shown, setShown] = useState(false);
     const [referenceElement, setReferenceElement] = useState();
     const [popperElement, setPopperElement] = useState();
@@ -43,7 +43,7 @@ const ActionMenu = ({ items, variant }) => {
         },
     }));
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { variant: variant, "data-cy": 'action-menu-button', ref: setReferenceElement, onClick: () => setShown(true) },
+        React.createElement(Button, { variant: variant, "data-cy": dataCy || 'action-menu-button', ref: setReferenceElement, onClick: () => setShown(true) },
             React.createElement(StyledIcon, { icon: faEllipsisV })),
         shown &&
             ReactDOM.createPortal(React.createElement("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper },

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

@@ -5,6 +5,7 @@ export interface IInputProps {
     'name'?: string;
     'label'?: string;
     'placeholder'?: string;
+    'disabled'?: boolean;
     'type'?: string;
     'autoFocus'?: boolean;
     'value'?: string;

package/build/components/Input/Input.component.js

@@ -50,6 +50,14 @@ export const InputStyles = css `
   &::placeholder {
     color: ${(props) => getThemeControlColours(props.theme).placeholder};
   }
+
+  &:disabled {
+    color: ${(props) => getThemeControlColours(props.theme).font};
+    opacity: 1;
+    -webkit-text-fill-color: ${(props) => getThemeControlColours(props.theme).font};
+    background-color: ${(props) => props.theme.colours.controlBackgroundDisabled};
+    border: none;
+  }
 `;
 const StyledInput = styled(motion.input) `
   ${InputStyles}
@@ -99,7 +107,7 @@ const messageVariants = {
     errorFocus: { opacity: 1, y: -4 },
 };
 const Input = React.forwardRef(function ForwardRefInput(props, ref) {
-    const { label, name, placeholder, type = 'text', autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-cy': dataCy, } = props;
+    const { label, name, placeholder, disabled, type = 'text', autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-cy': dataCy, } = props;
     const [isFocused, setIsFocused] = useState(false);
     const { value: contextValue, error: contextError, onChange: contextOnChange } = useFormNode(name);
     const error = contextError || propsError;
@@ -127,7 +135,7 @@ const Input = React.forwardRef(function ForwardRefInput(props, ref) {
     return (React.createElement("div", null,
         label && React.createElement(InputLabel, { htmlFor: name }, label),
         React.createElement(InputContainer, { "data-cy": dataCy },
-            React.createElement(StyledInput, { ref: ref, animate: animationVariant, variants: inputVariants, transition: { type: 'spring', duration: 0.3 }, type: type, name: name, placeholder: placeholder, value: getValue(value, contextValue), onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, autoFocus: autoFocus, "data-cy": 'input' }),
+            React.createElement(StyledInput, { ref: ref, animate: animationVariant, variants: inputVariants, transition: { type: 'spring', duration: 0.3 }, type: type, name: name, placeholder: placeholder, disabled: disabled, value: getValue(value, contextValue), onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, autoFocus: autoFocus, "data-cy": 'input' }),
             React.createElement(ErrorContainer, { animate: error ? 'show' : undefined, style: { opacity: 0 }, variants: errorVariants, transition: { type: 'spring', duration: 0.3 }, "data-cy": 'error-indicator' },
                 React.createElement(ErrorInner, null,
                     React.createElement(FontAwesomeIcon, { icon: faExclamationCircle }))),

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

@@ -12,6 +12,8 @@ declare const Table: {
     ({ children, variant }: TableProps): JSX.Element;
     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;
+    ActionMenu: ({ items, "data-cy": dataCy }: import("./_TableActionMenu").TableActionMenuProps) => JSX.Element;
 };
 export default Table;

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

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import ButtonContext from '../Button/Button.context';
 import TableContext from './_Table.context';
 import TableAction from './_TableAction';
+import TableActionContainer from './_TableActionContainer';
+import TableActionMenu from './_TableActionMenu';
 import TableRow from './_TableRow.component';
 const StyledTable = styled.table `
   width: 100%;
@@ -25,5 +27,7 @@ const Table = ({ children, variant = 'regular' }) => {
 };
 Table.Row = TableRow;
 Table.Cell = TableCell;
+Table.ActionContainer = TableActionContainer;
 Table.Action = TableAction;
+Table.ActionMenu = TableActionMenu;
 export default Table;

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

@@ -0,0 +1,2 @@
+declare const TableActionContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export default TableActionContainer;

package/build/components/Table/_TableActionContainer.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+const TableActionContainer = styled.div `
+  display: flex;
+`;
+export default TableActionContainer;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IActionMenuItem } from '../ActionMenu/_ActionMenu.types';
+export interface TableActionMenuProps {
+    'items': IActionMenuItem[];
+    'data-cy'?: string;
+}
+declare const TableActionMenu: ({ items, "data-cy": dataCy }: TableActionMenuProps) => JSX.Element;
+export default TableActionMenu;

package/build/components/Table/_TableActionMenu.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ActionMenu from '../ActionMenu/ActionMenu.component';
+const TableActionMenu = ({ items, 'data-cy': dataCy }) => {
+    return React.createElement(ActionMenu, { variant: 'tertiary', items: items, "data-cy": dataCy });
+};
+export default TableActionMenu;

package/build/theme/dark.theme.js

@@ -24,6 +24,7 @@ const darkTheme = {
         defaultBorder: '#989898',
         faintBorder: '#cccccc1f',
         controlBackground: '#5e6167',
+        controlBackgroundDisabled: '#47494d',
         controlBorder: '#565656',
         controlBorderFocus: '#4289de',
         controlBorderHover: '#4a4949',

package/build/theme/default.theme.js

@@ -25,6 +25,7 @@ const defaultTheme = {
         defaultBorder: colours.grey20,
         faintBorder: colours.grey20,
         controlBackground: colours.white,
+        controlBackgroundDisabled: colours.grey20,
         controlBorder: colours.grey20,
         controlBorderFocus: colours.grey50,
         controlBorderHover: colours.grey30,

package/build/theme/theme.types.d.ts

@@ -28,6 +28,7 @@ export interface LegoTheme {
         defaultBorder: string;
         faintBorder: string;
         controlBackground: string;
+        controlBackgroundDisabled: string;
         controlBorder: string;
         controlBorderFocus: string;
         controlBorderHover: string;

package/package.json

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