@dtdot/lego 0.17.19 → 0.17.22

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

@@ -1,5 +1,9 @@
 import React from 'react';
 import { Status } from '../../theme/theme.types';
+interface BadgeSpanProps {
+    variant: BadgeVariant;
+}
+export declare const BadgeSpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, BadgeSpanProps, never>;
 export declare type BadgeVariant = Status;
 export interface BadgeProps {
     children: React.ReactNode;

package/build/components/Badge/Badge.component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
-const BadgeSpan = styled.span `
+export const BadgeSpan = styled.span `
   padding: 4px 8px;
   border-radius: 2px;
 

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { BadgeVariant } from '../Badge/Badge.component';
+export interface BadgeSelectorOption {
+    value: string;
+    name: string;
+    variant: BadgeVariant;
+}
+export interface BadgeSelectorProps {
+    options: BadgeSelectorOption[];
+    value: string[];
+    onChange: (val: string[]) => void;
+}
+declare const BadgeSelector: ({ options, value, onChange }: BadgeSelectorProps) => JSX.Element;
+export default BadgeSelector;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
+import { BadgeSpan } from '../Badge/Badge.component';
+const InteractiveBadge = styled(BadgeSpan) `
+  cursor: pointer;
+
+  ${(props) => props.inactive &&
+    `
+    background-color: ${getThemeVariantColours('tertiary', props.theme).main};
+    color: ${getThemeVariantColours('tertiary', props.theme).contrastText};
+  `}
+`;
+const BadgeSelectorOuter = styled.div `
+  ${InteractiveBadge} {
+    margin-right: 8px;
+  }
+`;
+const BadgeSelector = ({ options, value, onChange }) => {
+    const handleClick = (_value) => {
+        onChange([_value]);
+    };
+    return (React.createElement(BadgeSelectorOuter, null, options.map((option) => (React.createElement(InteractiveBadge, { key: option.value, variant: option.variant, inactive: !value.includes(option.value), onClick: () => handleClick(option.value) }, option.name)))));
+};
+export default BadgeSelector;

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

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

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { BadgeSelector } from '../..';
+/* eslint-disable @typescript-eslint/no-empty-function */
+const options = [
+    {
+        value: 'pending',
+        name: 'Pending',
+        variant: 'info',
+    },
+    {
+        value: 'accepted',
+        name: 'Accepted',
+        variant: 'success',
+    },
+    {
+        value: 'expired',
+        name: 'Expired',
+        variant: 'warn',
+    },
+    {
+        value: 'rejected',
+        name: 'Rejected',
+        variant: 'danger',
+    },
+];
+export const Standard = () => {
+    const [value, setValue] = useState(['pending']);
+    return React.createElement(BadgeSelector, { options: options, 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

@@ -2,6 +2,7 @@ export { default as BodyStyle } from './global/BodyStyle.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';
+export { default as BadgeSelector } from './components/BadgeSelector/BadgeSelector.component';
 export { default as Button } from './components/Button/Button.component';
 export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.component';
 export { default as Card } from './components/Card/Card.component';

package/build/index.js

@@ -2,6 +2,7 @@ export { default as BodyStyle } from './global/BodyStyle.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';
+export { default as BadgeSelector } from './components/BadgeSelector/BadgeSelector.component';
 export { default as Button } from './components/Button/Button.component';
 export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.component';
 export { default as Card } from './components/Card/Card.component';

package/package.json

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