@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

package/src/components/atoms/form-layouts/FormInput.js

@@ -5,6 +5,7 @@ import { fallbackValues } from "./FormLayouts.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
 import { createIdFromString } from "../../../util/general.js";
 import Text from "../text";
+import ButtonWithAction from "../button-with-action";
 import { Box, Cluster, Stack } from "../layouts";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { ERROR_COLOR, ROYAL_BLUE } from "../../../constants/colors";
@@ -98,7 +99,9 @@ const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => (
 `;
 
 const FormInput = ({
+  ariaLabelledBy = undefined,
   type = "text",
+  labelDisplayOverride = null,
   labelTextWhenNoError = "",
   errorMessages,
   isNum = false,
@@ -117,10 +120,16 @@ const FormInput = ({
   removeFromValue, // regex of characters to remove before setting value
   dataQa = null,
   isRequired = false,
+  errorFieldExtraStyles,
+  showFieldErrorRow = true,
+  labelTextVariant = "pS",
+  errorTextVariant = "pXS",
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const { isMobile } = useContext(ThemeContext);
+
   const setValue = value => {
     if (removeFromValue !== undefined) {
       return fieldActions.set(value.replace(removeFromValue, ""));
@@ -128,62 +137,70 @@ const FormInput = ({
     return fieldActions.set(value);
   };
 
+  const handleOnBlur = value => {
+    // Sets the empty value to trigger a validation error if it's required.
+    if (isRequired && value === "") {
+      setValue("");
+    }
+    setIsFocused(false);
+  };
+
   return (
     <Stack childGap="0.25rem">
       <Box padding="0">
         {helperModal ? (
-          <Cluster justify="space-between" align="center">
-            <Text
-              as="label"
-              color={themeValues.labelColor}
-              variant="pS"
-              weight={themeValues.fontWeight}
-              extraStyles={`word-break: break-word;
+          <Cluster justify="space-between" align="center" overflow>
+            {labelDisplayOverride ? (
+              labelDisplayOverride
+            ) : (
+              <Text
+                as="label"
+                color={themeValues.labelColor}
+                variant={labelTextVariant}
+                weight={themeValues.fontWeight}
+                extraStyles={`word-break: break-word;
                   font-family: Public Sans;
                   &::first-letter {
                     text-transform: uppercase;
                   }`}
-              id={createIdFromString(labelTextWhenNoError)}
-            >
-              {labelTextWhenNoError}
-            </Text>
+                id={createIdFromString(labelTextWhenNoError)}
+              >
+                {labelTextWhenNoError}
+              </Text>
+            )}
             {helperModal()}
           </Cluster>
         ) : (
           <Box padding="0" minWidth="100%">
-            <Cluster justify="space-between" align="center">
-              <Text
-                as="label"
-                color={themeValues.labelColor}
-                variant="pS"
-                fontWeight={themeValues.fontWeight}
-                extraStyles={`word-break: break-word;
+            <Cluster justify="space-between" align="center" overflow>
+              {labelDisplayOverride ? (
+                labelDisplayOverride
+              ) : (
+                <Text
+                  as="label"
+                  color={themeValues.labelColor}
+                  variant={labelTextVariant}
+                  fontWeight={themeValues.fontWeight}
+                  extraStyles={`word-break: break-word;
                     font-family: Public Sans;
                     &::first-letter {
                       text-transform: uppercase;
                     }`}
-                id={createIdFromString(labelTextWhenNoError)}
-              >
-                {labelTextWhenNoError}
-              </Text>
-              {type === "password" && (
-                <Text
-                  variant="pS"
-                  color={themeValues.linkColor}
-                  weight={themeValues.fontWeight}
-                  hoverStyles={themeValues.hoverFocusStyles}
-                  extraStyles={`text-decoration: underline; cursor: pointer; &:focus { outline-offset: -2px; }`}
-                  onClick={() => setShowPassword(!showPassword)}
-                  tabIndex="0"
-                  aria-label={showPassword ? "Hide Password" : "Show password"}
-                  aria-live="polite"
-                  onKeyPress={e =>
-                    e.key === "Enter" && setShowPassword(!showPassword)
-                  }
+                  id={createIdFromString(labelTextWhenNoError)}
                 >
-                  {showPassword ? "Hide" : "Show"}
+                  {labelTextWhenNoError}
                 </Text>
               )}
+              {type === "password" && (
+                <ButtonWithAction
+                  variant="smallGhost"
+                  text={showPassword ? "Hide" : "Show"}
+                  action={() => setShowPassword(!showPassword)}
+                  aria-label={showPassword ? "Hide Password" : "Show password"}
+                  extraStyles={`margin: 0; min-width: auto;`}
+                  textExtraStyles={`color: ${themeValues.linkColor};`}
+                />
+              )}
               {isMobile && decorator && (
                 <Box padding="0 0 0 auto">{decorator}</Box>
               )}
@@ -194,7 +211,11 @@ const FormInput = ({
       <Box padding="0">
         {formatter ? (
           <FormattedInputField
-            aria-labelledby={createIdFromString(labelTextWhenNoError)}
+            aria-labelledby={
+              ariaLabelledBy === undefined
+                ? createIdFromString(labelTextWhenNoError)
+                : ariaLabelledBy
+            }
             aria-describedby={createIdFromString(
               labelTextWhenNoError,
               "error message"
@@ -204,6 +225,7 @@ const FormInput = ({
               (field.hasErrors && showErrors)
             }
             onChange={value => setValue(value)}
+            onBlur={e => handleOnBlur(e.target.value)}
             type={type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}
@@ -217,11 +239,24 @@ const FormInput = ({
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
             required={isRequired}
+            // Additional handler to detect autofilled values
+            {...(autocompleteValue && {
+              onFocus: e => {
+                if (!isFocused) {
+                  setValue(e.target?.value);
+                  setIsFocused(true);
+                }
+              }
+            })}
             {...props}
           />
         ) : (
           <InputField
-            aria-labelledby={createIdFromString(labelTextWhenNoError)}
+            aria-labelledby={
+              ariaLabelledBy === undefined
+                ? createIdFromString(labelTextWhenNoError)
+                : ariaLabelledBy
+            }
             aria-describedby={createIdFromString(
               labelTextWhenNoError,
               "error message"
@@ -231,6 +266,7 @@ const FormInput = ({
               (field.hasErrors && showErrors)
             }
             onChange={e => setValue(e.target.value)}
+            onBlur={e => handleOnBlur(e.target.value)}
             type={type === "password" && showPassword ? "text" : type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}
@@ -248,31 +284,39 @@ const FormInput = ({
           />
         )}
       </Box>
-      <Stack
-        direction="row"
-        justify="space-between"
-        aria-live="polite"
-        aria-atomic={true}
-      >
-        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
-          <Text
-            color={ERROR_COLOR}
-            variant="pXS"
-            weight={themeValues.fontWeight}
-            extraStyles={`word-break: break-word;
+      {showFieldErrorRow && (
+        <Stack
+          direction="row"
+          justify="space-between"
+          aria-live="polite"
+          aria-atomic={true}
+        >
+          {(field.hasErrors && field.dirty) ||
+          (field.hasErrors && showErrors) ? (
+            <Text
+              color={ERROR_COLOR}
+              variant={errorTextVariant}
+              weight={themeValues.fontWeight}
+              extraStyles={`word-break: break-word;
               font-family: Public Sans;
               &::first-letter {
                 text-transform: uppercase;
-              }`}
-            id={createIdFromString(labelTextWhenNoError, "error message")}
-          >
-            {errorMessages[field.errors[0]]}
-          </Text>
-        ) : (
-          <Text extraStyles={`height: ${themeValues.lineHeight};`} />
-        )}
-        {!isMobile && decorator && <Box padding="0 0 0 auto">{decorator}</Box>}
-      </Stack>
+              }
+              ${errorFieldExtraStyles};`}
+              id={createIdFromString(labelTextWhenNoError, "error message")}
+            >
+              {errorMessages[field.errors[0]]}
+            </Text>
+          ) : (
+            <Text
+              extraStyles={`height: ${themeValues.lineHeight}; ${errorFieldExtraStyles};`}
+            />
+          )}
+          {!isMobile && decorator && (
+            <Box padding="0 0 0 auto">{decorator}</Box>
+          )}
+        </Stack>
+      )}
     </Stack>
   );
 };

package/src/components/atoms/form-layouts/FormInput.mdx

@@ -0,0 +1,38 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as FormInputStories from './FormInput.stories.js';
+
+<Meta of={FormInputStories} />
+
+<Title />
+
+FormInput is a wrapper for `<input/>` elements that adds extra functionality. It is meant to be used in forms. The underlying component is an `input` element, unless the formatter prop is set, then it will be a [formatted-input](https://www.npmjs.com/package/formatted-input) component. Additional props are passed down to the underlying element.
+
+## Form Integration
+
+FormInput requires a `field` and `fieldActions` prop. Both are objects that _can_ be generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform). Below are example values for each prop with the minimum properties needed for a FormInput component.
+
+### field
+
+```
+{
+  "dirty": false,
+  "rawValue": "",
+  "errors": [
+    "error/REQUIRED"
+  ],
+  "hasErrors": true
+}
+```
+
+### fieldActions
+
+```
+{
+  set: (value) => {...}
+}
+```
+
+`fieldActions.set()` is called when an option is selected in the underlying Dropdown component, unless a function is defined for the `onChange` prop.
+
+<Controls />

package/src/components/atoms/form-layouts/FormInput.stories.js

@@ -0,0 +1,219 @@
+import React, { useState } from "react";
+import FormInput from "./FormInput";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import { createFormState, required } from "redux-freeform";
+import Modal from "../../molecules/modal";
+import { moneyFormat } from "../../../util/formats";
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
+  example: {
+    validators: [required()]
+  }
+});
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const errorMessages = {
+  [required.error]: "This is required!"
+};
+
+const FormWrapper = props => (
+  <FormInput
+    {...props}
+    field={props.fields.example}
+    fieldActions={props.actions.fields.example}
+  />
+);
+
+const ConnectedFormInput = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Atoms/form-layouts/FormInput",
+  component: ConnectedFormInput,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    type: "text",
+    labelTextWhenNoError: "",
+    errorMessages: errorMessages,
+    isNum: false,
+    isEmail: false,
+    helperModal: undefined,
+    showErrors: undefined,
+    formatter: null,
+    decorator: undefined,
+    themeValues: {},
+    background: undefined,
+    customHeight: undefined,
+    autocompleteValue: "",
+    extraStyles: undefined,
+    removeFromValue: undefined,
+    dataQa: "form-input-qa",
+    isRequired: false
+  },
+  argTypes: {
+    extraStyles: { type: "string" },
+    fieldActions: { type: "object" },
+    field: { type: "object" },
+    background: {
+      description:
+        "sets the value for `background: url(${background})` _only_ if the `formatter` prop is _not_ set",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    isNum: {
+      description: "sets the input's inputMode attribute to `numeric`",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    isEmail: {
+      description: "sets the input's inputMode attribute to `email`",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    isRequired: {
+      description: "adds the `required` attribute to the input element",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    customHeight: {
+      description: "sets a height to the input",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "48px" }
+      }
+    },
+    helperModal: {
+      description: "a function that returns a modal",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    removeFromValue: {
+      description:
+        "regex pattern for characters to in the user inputted value before passing it to `fieldActions.set()`",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    extraStyles: {
+      description: "styles applied to the underlying input element",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedFormInput {...args} />;
+
+export const WithDecorator = {
+  args: {
+    decorator: "Decorator!"
+  },
+  render: args => <ConnectedFormInput {...args} />
+};
+
+export const IsEmail = {
+  args: {
+    isEmail: true
+  },
+  render: args => <ConnectedFormInput {...args} />
+};
+
+export const IsNum = {
+  args: {
+    isNum: true
+  },
+  render: args => <ConnectedFormInput {...args} />
+};
+
+export const WithLabel = {
+  args: {
+    labelTextWhenNoError: "Label"
+  },
+  render: args => <ConnectedFormInput {...args} />
+};
+
+export const WithCustomHeight = {
+  args: {
+    customHeight: "100px"
+  },
+  render: args => <ConnectedFormInput {...args} />
+};
+
+export const Required = {
+  args: {
+    isRequired: true
+  },
+  render: args => <ConnectedFormInput {...args} />
+};
+
+export const WithFormatter = {
+  args: {
+    labelTextWhenNoError: "Price",
+    formatter: moneyFormat
+  },
+  render: args => <ConnectedFormInput {...args} />
+};
+
+const InputWithModal = props => {
+  const [isOpen, toggleOpen] = useState(false);
+
+  return (
+    <ConnectedFormInput
+      {...props}
+      helperModal={() => (
+        <Modal
+          modalOpen={isOpen}
+          hideModal={() => toggleOpen(false)}
+          showModal={() => toggleOpen(true)}
+          modalHeaderText="Modal title!"
+          modalBodyText="Modal text!"
+          defaultWrapper={false}
+          onlyCloseButton={true}
+          initialFocusSelector=""
+        >
+          <div onClick={() => toggleOpen(true)} role="button">
+            Help!
+          </div>
+        </Modal>
+      )}
+    />
+  );
+};
+
+export const WithHelperModal = {
+  argTypes: {
+    helperModal: { type: "function" }
+  },
+  render: args => <InputWithModal {...args} />
+};