@dtdot/lego 0.17.20 → 0.17.23

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ColourVariant } from '../../theme/theme.types';
+export interface ActionMenuProps {
+    variant?: ColourVariant;
+}
+declare const ActionMenu: ({ variant }: ActionMenuProps) => JSX.Element;
+export default ActionMenu;

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

@@ -0,0 +1,13 @@
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+import styled from 'styled-components';
+import Button from '../Button/Button.component';
+const StyledIcon = styled(FontAwesomeIcon) `
+  font-size: 18px;
+`;
+const ActionMenu = ({ variant }) => {
+    return (React.createElement(Button, { variant: variant },
+        React.createElement(StyledIcon, { icon: faEllipsisV })));
+};
+export default ActionMenu;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+export declare const Variants: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/components/ActionMenu/ActionMenu.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ActionMenu } from '../..';
+/* eslint-disable @typescript-eslint/no-empty-function */
+export const Standard = () => React.createElement(ActionMenu, null);
+export const Variants = () => (React.createElement(React.Fragment, null,
+    React.createElement(ActionMenu, { variant: 'primary' }),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(ActionMenu, { variant: 'secondary' }),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(ActionMenu, { variant: 'tertiary' })));
+export default {
+    title: 'Components/ActionMenu',
+    component: ActionMenu,
+};

package/build/components/BadgeSelector/BadgeSelector.component.js

@@ -4,6 +4,7 @@ import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
 import { BadgeSpan } from '../Badge/Badge.component';
 const InteractiveBadge = styled(BadgeSpan) `
   cursor: pointer;
+  margin-bottom: 8px;
 
   ${(props) => props.inactive &&
     `
@@ -12,6 +13,9 @@ const InteractiveBadge = styled(BadgeSpan) `
   `}
 `;
 const BadgeSelectorOuter = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+
   ${InteractiveBadge} {
     margin-right: 8px;
   }

package/build/components/BadgeSelector/BadgeSelector.stories.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Meta } from '@storybook/react/types-6-0';
 export declare const Standard: () => JSX.Element;
+export declare const LotsOfBadges: () => JSX.Element;
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;

package/build/components/BadgeSelector/BadgeSelector.stories.js

@@ -27,6 +27,67 @@ export const Standard = () => {
     const [value, setValue] = useState(['pending']);
     return React.createElement(BadgeSelector, { options: options, value: value, onChange: setValue });
 };
+const options2 = [
+    {
+        value: 'one',
+        name: 'one',
+        variant: 'info',
+    },
+    {
+        value: 'two',
+        name: 'two',
+        variant: 'info',
+    },
+    {
+        value: 'three',
+        name: 'three',
+        variant: 'info',
+    },
+    {
+        value: 'four',
+        name: 'four',
+        variant: 'info',
+    },
+    {
+        value: 'five',
+        name: 'five',
+        variant: 'info',
+    },
+    {
+        value: 'six',
+        name: 'six',
+        variant: 'info',
+    },
+    {
+        value: 'seven',
+        name: 'seven',
+        variant: 'info',
+    },
+    {
+        value: 'eight',
+        name: 'eight',
+        variant: 'info',
+    },
+    {
+        value: 'nine',
+        name: 'nine',
+        variant: 'info',
+    },
+    {
+        value: 'ten',
+        name: 'ten',
+        variant: 'info',
+    },
+    {
+        value: 'eleven',
+        name: 'eleven',
+        variant: 'info',
+    },
+];
+export const LotsOfBadges = () => {
+    const [value, setValue] = useState(['one']);
+    return React.createElement(BadgeSelector, { options: options2, value: value, onChange: setValue });
+};
 export default {
     title: 'Components/BadgeSelector',
     component: BadgeSelector,

package/build/components/Form/useFormNode.hook.d.ts

@@ -1,3 +1,4 @@
+export declare const getValue: <T = string>(value: T, contextValue: T) => T;
 declare function useFormNode<T = string, K = string>(key?: string): {
     value: undefined;
     error: undefined;

package/build/components/Form/useFormNode.hook.js

@@ -1,5 +1,11 @@
 import { useContext } from 'react';
 import FormStateContext from './FormState.context';
+export const getValue = (value, contextValue) => {
+    if (value !== null && value !== undefined) {
+        return value;
+    }
+    return contextValue;
+};
 function useFormNode(key) {
     const { value, errors, onChange } = useContext(FormStateContext);
     if (!key) {

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

@@ -6,6 +6,7 @@ export interface IInputProps {
     label?: string;
     placeholder?: string;
     type?: string;
+    autoFocus?: boolean;
     value?: string;
     error?: string;
     onChange?: (value: any) => void;

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

@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
 import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
-import useFormNode from '../Form/useFormNode.hook';
+import useFormNode, { getValue } from '../Form/useFormNode.hook';
 export const INPUT_HEIGHT = 48;
 const InputContainer = styled(motion.div) `
   position: relative;
@@ -93,7 +93,7 @@ const messageVariants = {
     errorFocus: { opacity: 1, y: -4 },
 };
 const Input = React.forwardRef(function ForwardRefInput(props, ref) {
-    const { label, name, placeholder, type = 'text', value, error: propsError, onChange, onFocus, onBlur } = props;
+    const { label, name, placeholder, type = 'text', autoFocus, value, error: propsError, onChange, onFocus, onBlur, } = props;
     const [isFocused, setIsFocused] = useState(false);
     const { value: contextValue, error: contextError, onChange: contextOnChange } = useFormNode(name);
     const error = contextError || propsError;
@@ -120,7 +120,7 @@ const Input = React.forwardRef(function ForwardRefInput(props, ref) {
     return (React.createElement("div", null,
         label && React.createElement(InputLabel, { htmlFor: name }, label),
         React.createElement(InputContainer, { animate: error ? (isFocused ? 'errorFocus' : 'error') : undefined },
-            React.createElement(StyledInput, { ref: ref, variants: inputVariants, transition: { type: 'spring', duration: 0.3 }, type: type, name: name, placeholder: placeholder, value: value || contextValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }),
+            React.createElement(StyledInput, { ref: ref, 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 }),
             React.createElement(ErrorContainer, { animate: error ? 'show' : undefined, style: { opacity: 0 }, variants: errorVariants, transition: { type: 'spring', duration: 0.3 } },
                 React.createElement(ErrorInner, null,
                     React.createElement(FontAwesomeIcon, { icon: faExclamationCircle }))),

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

@@ -20,7 +20,8 @@ const TableCell = styled.td `
 const Table = ({ children, variant = 'regular' }) => {
     return (React.createElement(TableContext.Provider, { value: { variant } },
         React.createElement(ButtonContext.Provider, { value: { height: '24px' } },
-            React.createElement(StyledTable, null, children))));
+            React.createElement(StyledTable, null,
+                React.createElement("tbody", null, children)))));
 };
 Table.Row = TableRow;
 Table.Cell = TableCell;

package/build/index.d.ts

@@ -1,4 +1,5 @@
 export { default as BodyStyle } from './global/BodyStyle.component';
+export { default as ActionMenu } from './components/ActionMenu/ActionMenu.component';
 export { default as ActionMessage } from './components/ActionMessage/ActionMessage.component';
 export { default as Alert } from './components/Alert/Alert.component';
 export { default as Badge } from './components/Badge/Badge.component';

package/build/index.js

@@ -1,4 +1,5 @@
 export { default as BodyStyle } from './global/BodyStyle.component';
+export { default as ActionMenu } from './components/ActionMenu/ActionMenu.component';
 export { default as ActionMessage } from './components/ActionMessage/ActionMessage.component';
 export { default as Alert } from './components/Alert/Alert.component';
 export { default as Badge } from './components/Badge/Badge.component';

package/package.json

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