@dtdot/lego 1.7.1 → 1.8.1

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

@@ -1,13 +1,17 @@
 import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Status } from '../../theme/theme.types';
 interface BadgeSpanProps {
     variant: BadgeVariant;
+    useHover: boolean;
 }
 export declare const BadgeSpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, BadgeSpanProps, never>;
 export type BadgeVariant = Status;
 export interface BadgeProps {
     children: React.ReactNode;
     variant: BadgeVariant;
+    actionIcon?: IconProp;
+    onAction?: () => void;
 }
-declare const Badge: ({ children, variant }: BadgeProps) => JSX.Element;
+declare const Badge: ({ children, variant, actionIcon, onAction }: BadgeProps) => JSX.Element;
 export default Badge;

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

@@ -1,3 +1,4 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import styled from 'styled-components';
 import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
@@ -11,10 +12,27 @@ export const BadgeSpan = styled.span `
   font-family: ${(props) => props.theme.fonts.default.family};
   font-size: ${(props) => props.theme.fonts.default.size};
   font-weight: ${(props) => props.theme.fonts.default.weight};
+  line-height: ${(props) => props.theme.fonts.default.size};
 
   text-transform: lowercase;
+
+  &:hover {
+    background-color: ${(props) => props.useHover && getThemeStatusColour(props.variant, props.theme).hover};
+  }
+`;
+const ActionSpan = styled.span `
+  vertical-align: middle;
+  padding: 3px 7px;
+  margin: -3px -7px -3px 0;
+  cursor: pointer;
+  user-select: none;
+
+  font-size: ${(props) => props.theme.fonts.default.size};
 `;
-const Badge = ({ children, variant }) => {
-    return (React.createElement(BadgeSpan, { variant: variant, "data-cy": 'badge' }, children));
+const Badge = ({ children, variant, actionIcon, onAction }) => {
+    return (React.createElement(BadgeSpan, { variant: variant, useHover: !!actionIcon, "data-cy": 'badge' },
+        children,
+        actionIcon && (React.createElement(ActionSpan, { onClick: onAction },
+            React.createElement(FontAwesomeIcon, { icon: actionIcon })))));
 };
 export default Badge;

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

@@ -24,6 +24,6 @@ const BadgeSelector = ({ options, value, onChange }) => {
     const handleClick = (_value) => {
         onChange([_value]);
     };
-    return (React.createElement(BadgeSelectorOuter, { "data-cy": 'badge-selector' }, options.map((option) => (React.createElement(InteractiveBadge, { key: option.value, variant: option.variant, inactive: !value.includes(option.value), onClick: () => handleClick(option.value), "data-cy": value.includes(option.value) ? 'badge-selected' : 'badge' }, option.name)))));
+    return (React.createElement(BadgeSelectorOuter, { "data-cy": 'badge-selector' }, options.map((option) => (React.createElement(InteractiveBadge, { useHover: false, key: option.value, variant: option.variant, inactive: !value.includes(option.value), onClick: () => handleClick(option.value), "data-cy": value.includes(option.value) ? 'badge-selected' : 'badge' }, option.name)))));
 };
 export default BadgeSelector;

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

@@ -1,6 +1,4 @@
 import React from 'react';
-export declare const INPUT_HEIGHT = 48;
-export declare const InputStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export interface IInputProps {
     'name'?: string;
     'label'?: string;

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

@@ -3,75 +3,19 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useState } from 'react';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { motion } from 'framer-motion';
-import styled, { css } from 'styled-components';
-import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
+import styled from 'styled-components';
+import ControlDescription from '../../shared/ControlDescription';
+import ControlLabel from '../../shared/ControlLabel';
+import { ControlStyles } from '../../shared/ControlStyles';
 import useFormNode, { getValue } from '../Form/useFormNode.hook';
-export const INPUT_HEIGHT = 48;
 const InputContainer = styled.div `
   position: relative;
   margin: 2px 0;
 
   background-color: ${(props) => props.theme.colours.controlBackground};
 `;
-const InputLabel = styled.label `
-  display: block;
-  padding-bottom: 8px;
-
-  color: ${(props) => getThemeControlColours(props.theme).font};
-  font-family: ${(props) => props.theme.fonts.default.family};
-  font-size: ${(props) => props.theme.fonts.default.size};
-`;
-const InputDescription = styled.div `
-  color: ${(props) => props.theme.colours.controlDescriptionColour};
-  font-family: ${(props) => props.theme.fonts.emphasis.family};
-  font-size: ${(props) => props.theme.fonts.emphasis.size};
-  font-weight: ${(props) => props.theme.fonts.emphasis.weight};
-  line-height: 18px;
-
-  padding-top: 4px;
-  padding-bottom: 6px;
-  font-style: italic;
-`;
-export const InputStyles = css `
-  outline: none;
-  box-shadow: none;
-
-  width: 100%;
-  height: ${INPUT_HEIGHT}px;
-  padding: 0 12px;
-  scroll-margin-bottom: 100px;
-
-  font-family: ${(props) => props.theme.fonts.default.family};
-  font-size: ${(props) => props.theme.fonts.default.size};
-
-  color: ${(props) => getThemeControlColours(props.theme).font};
-  background-color: ${(props) => getThemeControlColours(props.theme).background};
-
-  border: 1px solid ${(props) => getThemeControlColours(props.theme).border};
-  border-radius: 2px;
-
-  &:hover {
-    border: 1px solid ${(props) => getThemeControlColours(props.theme).borderHover};
-  }
-
-  &:focus {
-    border: 1px solid ${(props) => getThemeControlColours(props.theme).borderFocus};
-  }
-
-  &::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}
+  ${ControlStyles}
 `;
 const ErrorMessage = styled(motion.div) `
   position: absolute;
@@ -145,14 +89,14 @@ const Input = React.forwardRef(function ForwardRefInput(props, ref) {
     };
     const animationVariant = error ? (isFocused ? 'errorFocus' : 'error') : undefined;
     return (React.createElement("div", null,
-        label && React.createElement(InputLabel, { htmlFor: name }, label),
+        label && React.createElement(ControlLabel, { 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, 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 }))),
             error && (React.createElement(ErrorMessage, { style: { opacity: 0, y: 0 }, animate: animationVariant, variants: messageVariants, transition: { type: 'spring', duration: 0.3 }, "data-cy": 'error-message' }, error))),
-        splitDescription && (React.createElement(InputDescription, null, splitDescription.map((line, index) => (React.createElement(React.Fragment, null,
+        splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(React.Fragment, null,
             index !== 0 && React.createElement("br", null),
             line)))))));
 });

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export type SelectOption = {
+    value: string;
+    label: string;
+};
+export interface ISelectProps {
+    'name'?: string;
+    'label'?: string;
+    'description'?: string;
+    'placeholder'?: string;
+    'value'?: string;
+    'onChange'?: (value: any) => void;
+    'data-cy'?: string;
+    'options': SelectOption[];
+}
+declare const Select: (props: ISelectProps) => JSX.Element;
+export default Select;

package/build/components/Select/Select.component.js

@@ -0,0 +1,86 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useState } from 'react';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { motion } from 'framer-motion';
+import styled, { useTheme } from 'styled-components';
+import ControlDescription from '../../shared/ControlDescription';
+import ControlLabel from '../../shared/ControlLabel';
+import { ControlStyles } from '../../shared/ControlStyles';
+import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
+import useFormNode, { getValue } from '../Form/useFormNode.hook';
+const ControlOuter = styled.div `
+  position: relative;
+`;
+const SelectControl = styled.div `
+  ${ControlStyles}
+  cursor: pointer;
+`;
+const TextContainer = styled.div `
+  display: flex;
+  align-items: center;
+  height: 100%;
+`;
+const IconContainer = styled.div `
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 48px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+`;
+const PlaceholderText = styled.div `
+  color: ${(props) => getThemeControlColours(props.theme).placeholder};
+`;
+const ValueText = styled.div `
+  color: ${(props) => getThemeControlColours(props.theme).font};
+`;
+const OptionsContainer = styled.div `
+  width: 100%;
+  position: absolute;
+  background-color: ${(props) => props.theme.colours.controlBackground};
+  z-index: 10000;
+
+  box-shadow: ${(props) => props.theme.shadows.small};
+`;
+const Option = styled(motion.div) `
+  color: ${(props) => getThemeControlColours(props.theme).font};
+  background-color: ${(props) => props.theme.colours.controlBackgroundDisabled};
+  height: 36px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  cursor: pointer;
+`;
+const Select = (props) => {
+    const theme = useTheme();
+    const [isOpen, setIsOpen] = useState(false);
+    const { label, name, description, placeholder, 'value': propsValue, 'data-cy': dataCy, options } = props;
+    const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    const value = getValue(propsValue, contextValue);
+    const splitDescription = description ? description.split('\\n').map((str) => str.trim()) : undefined;
+    const selectValue = (option) => {
+        setIsOpen(false);
+        if (contextOnChange) {
+            contextOnChange(option.value);
+        }
+        if (props.onChange) {
+            props.onChange(option.value);
+        }
+    };
+    const valueLabel = value && options.find((o) => o.value === value)?.label;
+    return (React.createElement("div", null,
+        label && React.createElement(ControlLabel, { htmlFor: name }, label),
+        React.createElement(ControlOuter, null,
+            React.createElement(SelectControl, { "data-cy": dataCy, onClick: () => setIsOpen(!isOpen) },
+                React.createElement(TextContainer, null,
+                    !value && placeholder && React.createElement(PlaceholderText, null, placeholder),
+                    value && React.createElement(ValueText, null, valueLabel)),
+                React.createElement(IconContainer, null,
+                    React.createElement(FontAwesomeIcon, { icon: isOpen ? faChevronUp : faChevronDown }))),
+            isOpen && (React.createElement(OptionsContainer, null, options.map((option) => (React.createElement(Option, { whileHover: { backgroundColor: theme.colours.controlBorder }, transition: { type: 'spring', duration: 0.2 }, key: option.value, onClick: () => selectValue(option) }, option.label)))))),
+        splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(React.Fragment, null,
+            index !== 0 && React.createElement("br", null),
+            line)))))));
+};
+export default Select;

package/build/components/TextArea/TextArea.component.js

@@ -4,9 +4,9 @@ import React, { useState } from 'react';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
+import { ControlStyles } from '../../shared/ControlStyles';
 import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
 import useFormNode, { getValue } from '../Form/useFormNode.hook';
-import { InputStyles } from '../Input/Input.component';
 const TextAreaContainer = styled.div `
   position: relative;
 `;
@@ -19,7 +19,7 @@ const TextAreaLabel = styled.label `
   font-size: ${(props) => props.theme.fonts.default.size};
 `;
 const StyledTextArea = styled(motion.textarea) `
-  ${InputStyles}
+  ${ControlStyles}
   height: initial;
   width: 100% !important;
   min-height: 144px;

package/build/index.d.ts

@@ -31,6 +31,7 @@ export { default as Modal } from './components/Modal/Modal.component';
 export { default as PageHeader } from './components/PageHeader/PageHeader.component';
 export { default as ProfileImage } from './components/ProfileImage/ProfileImage.component';
 export { default as QrCode } from './components/QrCode/QrCode.component';
+export { default as Select } from './components/Select/Select.component';
 export { default as Spacer } from './components/Spacer/Spacer.component';
 export { default as SquareButton } from './components/SquareButton/SquareButton.component';
 export { default as Swimlane } from './components/Swimlane/Swimlane.component';

package/build/index.js

@@ -31,6 +31,7 @@ export { default as Modal } from './components/Modal/Modal.component';
 export { default as PageHeader } from './components/PageHeader/PageHeader.component';
 export { default as ProfileImage } from './components/ProfileImage/ProfileImage.component';
 export { default as QrCode } from './components/QrCode/QrCode.component';
+export { default as Select } from './components/Select/Select.component';
 export { default as Spacer } from './components/Spacer/Spacer.component';
 export { default as SquareButton } from './components/SquareButton/SquareButton.component';
 export { default as Swimlane } from './components/Swimlane/Swimlane.component';

package/build/shared/ControlDescription.d.ts

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

package/build/shared/ControlDescription.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+const ControlDescription = styled.div `
+  color: ${(props) => props.theme.colours.controlDescriptionColour};
+  font-family: ${(props) => props.theme.fonts.emphasis.family};
+  font-size: ${(props) => props.theme.fonts.emphasis.size};
+  font-weight: ${(props) => props.theme.fonts.emphasis.weight};
+  line-height: 18px;
+
+  padding-top: 4px;
+  padding-bottom: 6px;
+  font-style: italic;
+`;
+export default ControlDescription;

package/build/shared/ControlLabel.d.ts

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

package/build/shared/ControlLabel.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import getThemeControlColours from '../theme/helpers/getThemeControlColours';
+const ControlLabel = styled.label `
+  display: block;
+  padding-bottom: 8px;
+
+  color: ${(props) => getThemeControlColours(props.theme).font};
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+`;
+export default ControlLabel;

package/build/shared/ControlStyles.d.ts

@@ -0,0 +1,2 @@
+export declare const CONTROL_HEIGHT = 48;
+export declare const ControlStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;

package/build/shared/ControlStyles.js

@@ -0,0 +1,41 @@
+import { css } from 'styled-components';
+import getThemeControlColours from '../theme/helpers/getThemeControlColours';
+export const CONTROL_HEIGHT = 48;
+export const ControlStyles = css `
+  outline: none;
+  box-shadow: none;
+
+  width: 100%;
+  height: ${CONTROL_HEIGHT}px;
+  padding: 0 12px;
+  scroll-margin-bottom: 100px;
+
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+
+  color: ${(props) => getThemeControlColours(props.theme).font};
+  background-color: ${(props) => getThemeControlColours(props.theme).background};
+
+  border: 1px solid ${(props) => getThemeControlColours(props.theme).border};
+  border-radius: 2px;
+
+  &:hover {
+    border: 1px solid ${(props) => getThemeControlColours(props.theme).borderHover};
+  }
+
+  &:focus {
+    border: 1px solid ${(props) => getThemeControlColours(props.theme).borderFocus};
+  }
+
+  &::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;
+  }
+`;

package/build/theme/dark.theme.js

@@ -38,21 +38,25 @@ const darkTheme = {
             main: '#83bfff',
             contrast: '#191919',
             dull: '#0070e8',
+            hover: '#8fc5ff',
         },
         statusSuccess: {
             main: '#8ddaa9',
             contrast: '#191919',
             dull: '#35a35d',
+            hover: '#98deb2',
         },
         statusWarn: {
             main: '#f1a374',
             contrast: '#191919',
             dull: '#c35514',
+            hover: '#f2ac82',
         },
         statusDanger: {
             main: '#e87a7a',
             contrast: '#191919',
             dull: '#b51f1f',
+            hover: '#ea8787',
         },
     },
     fonts: {

package/build/theme/default.theme.js

@@ -39,21 +39,25 @@ const defaultTheme = {
             main: colours.blue,
             contrast: colours.blue,
             dull: colours.blue,
+            hover: colours.blue,
         },
         statusSuccess: {
             main: colours.green,
             contrast: colours.green,
             dull: colours.green,
+            hover: colours.green,
         },
         statusWarn: {
             main: colours.yellow,
             contrast: colours.yellow,
             dull: colours.yellow,
+            hover: colours.yellow,
         },
         statusDanger: {
             main: colours.red,
             contrast: colours.red,
             dull: colours.red,
+            hover: colours.red,
         },
     },
     fonts: {

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

@@ -9,6 +9,7 @@ export interface IStatus {
     main: string;
     contrast: string;
     dull: string;
+    hover: string;
 }
 export interface IFont {
     family: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -62,11 +62,11 @@
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@popperjs/core": "^2.11.6",
+    "@popperjs/core": "^2.11.7",
     "framer-motion": "^8.0.2",
     "identicon.js": "^2.3.3",
     "qrcode": "^1.5.1",
-    "react-popper": "^2.2.5",
+    "react-popper": "^2.3.0",
     "react-use-measure": "^2.1.1",
     "spark-md5": "^3.0.2",
     "uuid": "^9.0.0"