@dtdot/lego 1.6.0 → 1.7.1

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

@@ -4,6 +4,7 @@ export declare const InputStyles: import("styled-components").FlattenInterpolati
 export interface IInputProps {
     'name'?: string;
     'label'?: string;
+    'description'?: string;
     'placeholder'?: string;
     'disabled'?: boolean;
     'type'?: string;

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

@@ -21,6 +21,17 @@ const InputLabel = styled.label `
   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;
@@ -107,10 +118,11 @@ const messageVariants = {
     errorFocus: { opacity: 1, y: -4 },
 };
 const Input = React.forwardRef(function ForwardRefInput(props, ref) {
-    const { label, name, placeholder, disabled, type = 'text', autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-cy': dataCy, } = props;
+    const { label, name, description, 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;
+    const splitDescription = description ? description.split('\\n').map((str) => str.trim()) : undefined;
     const handleChange = (e) => {
         if (onChange) {
             onChange(e.target.value);
@@ -139,6 +151,9 @@ const Input = React.forwardRef(function ForwardRefInput(props, ref) {
             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)))));
+            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,
+            index !== 0 && React.createElement("br", null),
+            line)))))));
 });
 export default Input;

package/build/theme/dark.theme.js

@@ -29,6 +29,7 @@ const darkTheme = {
         controlBorderFocus: '#4289de',
         controlBorderHover: '#4a4949',
         controlPlaceholder: '#949494',
+        controlDescriptionColour: '#cbcbcb',
         uploadBackground: '#5e6167',
         uploadIcon: '#e2e2e2',
         cardBackground: '#494b50',
@@ -55,6 +56,11 @@ const darkTheme = {
         },
     },
     fonts: {
+        emphasis: {
+            family: `'Roboto', sans-serif`,
+            size: '14px',
+            weight: '400',
+        },
         default: {
             family: `'Roboto', sans-serif`,
             size: '16px',

package/build/theme/default.theme.js

@@ -30,6 +30,7 @@ const defaultTheme = {
         controlBorderFocus: colours.grey50,
         controlBorderHover: colours.grey30,
         controlPlaceholder: colours.grey30,
+        controlDescriptionColour: colours.grey90,
         uploadBackground: colours.grey20,
         uploadIcon: colours.grey10,
         cardBackground: colours.white,
@@ -56,6 +57,11 @@ const defaultTheme = {
         },
     },
     fonts: {
+        emphasis: {
+            family: `'Roboto', sans-serif`,
+            size: '14px',
+            weight: '400',
+        },
         default: {
             family: `'Roboto', sans-serif`,
             size: '16px',

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

@@ -34,6 +34,7 @@ export interface LegoTheme {
         controlBorderFocus: string;
         controlBorderHover: string;
         controlPlaceholder: string;
+        controlDescriptionColour: string;
         uploadBackground: string;
         uploadIcon: string;
         cardBackground: string;
@@ -44,6 +45,7 @@ export interface LegoTheme {
         statusDanger: IStatus;
     };
     fonts: {
+        emphasis: IFont;
         default: IFont;
         heading: IFont;
         subHeading: IFont;

package/package.json

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