@thecb/components 9.0.3 → 9.0.4-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.0.3",
+  "version": "9.0.4-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -64,6 +64,15 @@ const PaymentFormACH = ({
     [required.error]: "Account type is required"
   };
 
+  useEffect(() => {
+    const firstFocusableField = document.getElementById(
+      `first-focusable-ach-input`
+    );
+    if (firstFocusableField) {
+      firstFocusableField.focus();
+    }
+  }, []);
+
   return (
     <FormContainer variant={variant} role="form" aria-label="ACH Payment">
       <FormInputColumn>
@@ -76,6 +85,7 @@ const PaymentFormACH = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="name"
+          id="first-focusable-ach-input"
         />
         <FormInput
           labelTextWhenNoError="Routing number"

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -71,7 +71,7 @@ const PaymentFormCard = ({
     [hasLength.error]: "Credit card number is invalid",
     [matchesRegex.error]: `${displayCardBrand(
       fields.creditCardNumber.rawValue
-    )} is not accepted`
+    )} is not accepted.`
   };
   const expirationDateErrors = {
     [required.error]: "Expiration date is required",
@@ -91,6 +91,15 @@ const PaymentFormCard = ({
     [required.error]: "Country is required"
   };
 
+  useEffect(() => {
+    const firstFocusableField = document.getElementById(
+      `first-focusable-card-input`
+    );
+    if (firstFocusableField) {
+      firstFocusableField.focus();
+    }
+  }, []);
+
   const isUS = fields.country.rawValue === "US";
   return (
     <FormContainer variant={variant} role="form" aria-label="Card payment">
@@ -121,6 +130,7 @@ const PaymentFormCard = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="cc-name"
+          id="first-focusable-card-input"
         />
         <FormInput
           labelTextWhenNoError="Credit card number"

package/src/components/molecules/radio-section/RadioSection.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from "react";
+import React, { Fragment, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./RadioSection.theme";
@@ -98,6 +98,19 @@ const RadioSection = ({
 
   const [focused, setFocused] = useState(null);
 
+  // useEffect(() => {
+  //   if (toggledContentRef && toggledContentRef?.current) {
+  //     const inputEl = toggledContentRef.current?.querySelector(
+  //       `[tabindex="0"]`
+  //     );
+  //     if (inputEl) {
+  //       inputEl?.focus();
+  //     } else {
+  //       toggledContentRef.current.focus();
+  //     }
+  //   }
+  // }, [toggledContentRef.current]);
+
   return (
     <Box
       padding="1px"
@@ -188,6 +201,11 @@ const RadioSection = ({
                           as="label"
                           htmlFor={`radio-input-${idString(section)}`}
                           color={CHARADE_GREY}
+                          {...{
+                            ...(section?.titleLabel
+                              ? { "aria-label": section.titleLabel }
+                              : {})
+                          }}
                         >
                           {section.title}
                         </Text>

package/src/components/molecules/radio-section/RadioSection.stories.js

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
-import { text, boolean } from "@storybook/addon-knobs";
-
-import RadioSection from "./RadioSection";
+import { boolean } from "@storybook/addon-knobs";
 import page from "../../../../.storybook/page";
+import RadioSection from "./RadioSection";
+import PaymentFormACH from "../payment-form-ach/PaymentFormACH";
+import PaymentFormCard from "../payment-form-card";
 
 const story = page({
   title: "Components|Molecules/RadioSection",
@@ -36,6 +37,416 @@ const cardIcons = [
     name: "AMEX"
   }
 ];
+const paymentFormCardProps = {
+  showErrors: false,
+  fields: {
+    country: {
+      dirty: false,
+      rawValue: "US",
+      validators: [
+        {
+          type: "validator/REQUIRED",
+          args: [],
+          error: "error/REQUIRED"
+        }
+      ],
+      constraints: [],
+      errors: [],
+      hasErrors: false
+    },
+    nameOnCard: {
+      dirty: false,
+      rawValue: "",
+      validators: [
+        {
+          type: "validator/REQUIRED",
+          args: [],
+          error: "error/REQUIRED"
+        }
+      ],
+      constraints: [],
+      errors: ["error/REQUIRED"],
+      hasErrors: true
+    },
+    creditCardNumber: {
+      dirty: false,
+      rawValue: "",
+      validators: [
+        {
+          type: "validator/REQUIRED",
+          args: [],
+          error: "error/REQUIRED"
+        },
+        {
+          type: "validator/HAS_LENGTH",
+          args: [15, 16],
+          error: "error/HAS_LENGTH"
+        }
+      ],
+      constraints: [
+        {
+          type: "validator/ONLY_INTEGERS",
+          args: [],
+          error: "error/ONLY_INTEGERS"
+        },
+        {
+          type: "validator/HAS_LENGTH",
+          args: [0, 16],
+          error: "error/HAS_LENGTH"
+        }
+      ],
+      errors: ["error/REQUIRED"],
+      hasErrors: true
+    },
+    expirationDate: {
+      dirty: false,
+      rawValue: "",
+      validators: [
+        {
+          type: "validator/REQUIRED",
+          args: [],
+          error: "error/REQUIRED"
+        },
+        {
+          type: "validator/HAS_LENGTH",
+          args: [4, 4],
+          error: "error/HAS_LENGTH"
+        },
+        {
+          type: "validator/IS_VALID_MONTH",
+          args: [0],
+          error: "error/IS_VALID_MONTH"
+        },
+        {
+          type: "validator/DATE_AFTER_TODAY",
+          args: ["MMYY", "month", true],
+          error: "error/DATE_AFTER_TODAY"
+        }
+      ],
+      constraints: [
+        {
+          type: "validator/ONLY_EXPIRATION_DATE",
+          args: [],
+          error: "error/ONLY_EXPIRATION_DATE"
+        },
+        {
+          type: "validator/HAS_LENGTH",
+          args: [0, 4],
+          error: "error/HAS_LENGTH"
+        }
+      ],
+      errors: ["error/REQUIRED"],
+      hasErrors: true
+    },
+    cvv: {
+      dirty: false,
+      rawValue: "",
+      validators: [
+        {
+          type: "validator/REQUIRED",
+          args: [],
+          error: "error/REQUIRED"
+        },
+        {
+          type: "validator/HAS_LENGTH",
+          args: [3, 4],
+          error: "error/HAS_LENGTH"
+        }
+      ],
+      constraints: [
+        {
+          type: "validator/ONLY_INTEGERS",
+          args: [],
+          error: "error/ONLY_INTEGERS"
+        },
+        {
+          type: "validator/HAS_LENGTH",
+          args: [0, 4],
+          error: "error/HAS_LENGTH"
+        }
+      ],
+      errors: ["error/REQUIRED"],
+      hasErrors: true
+    },
+    zipCode: {
+      dirty: false,
+      rawValue: "",
+      validators: [
+        {
+          type: "validator/REQUIRED",
+          args: [],
+          error: "error/REQUIRED"
+        },
+        {
+          type: "validator/VALIDATE_WHEN",
+          args: [
+            {
+              type: "validator/VALIDATE_WHEN",
+              args: [
+                {
+                  type: "validator/HAS_LENGTH",
+                  args: [5, 5],
+                  error: "error/HAS_LENGTH"
+                },
+                {
+                  type: "validator/HAS_LENGTH",
+                  args: [0, 5],
+                  error: "error/HAS_LENGTH"
+                },
+                null
+              ],
+              error: "error/HAS_LENGTH"
+            },
+            {
+              type: "validator/MATCHES_REGEX",
+              args: ["US"],
+              error: "error/MATCHES_REGEX"
+            },
+            "country"
+          ],
+          error: "error/HAS_LENGTH"
+        },
+        {
+          type: "validator/VALIDATE_WHEN",
+          args: [
+            {
+              type: "validator/VALIDATE_WHEN",
+              args: [
+                {
+                  type: "validator/HAS_LENGTH",
+                  args: [9, 9],
+                  error: "error/HAS_LENGTH"
+                },
+                {
+                  type: "validator/HAS_LENGTH",
+                  args: [6, 9],
+                  error: "error/HAS_LENGTH"
+                },
+                null
+              ],
+              error: "error/HAS_LENGTH"
+            },
+            {
+              type: "validator/MATCHES_REGEX",
+              args: ["US"],
+              error: "error/MATCHES_REGEX"
+            },
+            "country"
+          ],
+          error: "error/HAS_LENGTH"
+        }
+      ],
+      constraints: [
+        {
+          type: "validator/VALIDATE_WHEN",
+          args: [
+            {
+              type: "validator/ONLY_INTEGERS",
+              args: [],
+              error: "error/ONLY_INTEGERS"
+            },
+            {
+              type: "validator/MATCHES_REGEX",
+              args: ["US"],
+              error: "error/MATCHES_REGEX"
+            },
+            "country"
+          ],
+          error: "error/ONLY_INTEGERS"
+        },
+        {
+          type: "validator/VALIDATE_WHEN",
+          args: [
+            {
+              type: "validator/HAS_LENGTH",
+              args: [0, 9],
+              error: "error/HAS_LENGTH"
+            },
+            {
+              type: "validator/MATCHES_REGEX",
+              args: ["US"],
+              error: "error/MATCHES_REGEX"
+            },
+            "country"
+          ],
+          error: "error/HAS_LENGTH"
+        }
+      ],
+      errors: ["error/REQUIRED"],
+      hasErrors: true
+    }
+  },
+  actions: {
+    fields: {
+      country: {},
+      nameOnCard: {},
+      creditCardNumber: {},
+      expirationDate: {},
+      cvv: {},
+      zipCode: {}
+    },
+    form: {}
+  }
+};
+const paymentFormACHProps = {
+  showErrors: false,
+  fields: {
+    name: {
+      dirty: false,
+      rawValue: "",
+      validators: [
+        {
+          type: "validator/REQUIRED",
+          args: [],
+          error: "error/REQUIRED"
+        }
+      ],
+      constraints: [],
+      errors: ["error/REQUIRED"],
+      hasErrors: true
+    },
+    routingNumber: {
+      dirty: false,
+      rawValue: "",
+      validators: [
+        {
+          type: "validator/REQUIRED",
+          args: [],
+          error: "error/REQUIRED"
+        },
+        {
+          type: "validator/HAS_LENGTH",
+          args: [9, 9],
+          error: "error/HAS_LENGTH"
+        },
+        {
+          type: "validator/IS_ROUTING_NUMBER",
+          args: [],
+          error: "error/IS_ROUTING_NUMBER"
+        }
+      ],
+      constraints: [
+        {
+          type: "validator/ONLY_INTEGERS",
+          args: [],
+          error: "error/ONLY_INTEGERS"
+        },
+        {
+          type: "validator/HAS_LENGTH",
+          args: [0, 9],
+          error: "error/HAS_LENGTH"
+        }
+      ],
+      errors: ["error/REQUIRED"],
+      hasErrors: true
+    },
+    confirmRoutingNumber: {
+      dirty: false,
+      rawValue: "",
+      validators: [
+        {
+          type: "validator/MATCHES_FIELD",
+          args: ["routingNumber"],
+          error: "error/MATCHES_FIELD"
+        }
+      ],
+      constraints: [
+        {
+          type: "validator/ONLY_INTEGERS",
+          args: [],
+          error: "error/ONLY_INTEGERS"
+        },
+        {
+          type: "validator/HAS_LENGTH",
+          args: [0, 9],
+          error: "error/HAS_LENGTH"
+        }
+      ],
+      errors: [],
+      hasErrors: false
+    },
+    accountNumber: {
+      dirty: false,
+      rawValue: "",
+      validators: [
+        {
+          type: "validator/REQUIRED",
+          args: [],
+          error: "error/REQUIRED"
+        },
+        {
+          type: "validator/HAS_LENGTH",
+          args: [5, 17],
+          error: "error/HAS_LENGTH"
+        }
+      ],
+      constraints: [
+        {
+          type: "validator/ONLY_INTEGERS",
+          args: [],
+          error: "error/ONLY_INTEGERS"
+        },
+        {
+          type: "validator/HAS_LENGTH",
+          args: [0, 17],
+          error: "error/HAS_LENGTH"
+        }
+      ],
+      errors: ["error/REQUIRED"],
+      hasErrors: true
+    },
+    confirmAccountNumber: {
+      dirty: false,
+      rawValue: "",
+      validators: [
+        {
+          type: "validator/MATCHES_FIELD",
+          args: ["accountNumber"],
+          error: "error/MATCHES_FIELD"
+        }
+      ],
+      constraints: [
+        {
+          type: "validator/ONLY_INTEGERS",
+          args: [],
+          error: "error/ONLY_INTEGERS"
+        },
+        {
+          type: "validator/HAS_LENGTH",
+          args: [0, 17],
+          error: "error/HAS_LENGTH"
+        }
+      ],
+      errors: [],
+      hasErrors: false
+    },
+    accountType: {
+      dirty: false,
+      rawValue: "CHECKING",
+      validators: [
+        {
+          type: "validator/REQUIRED",
+          args: [],
+          error: "error/REQUIRED"
+        }
+      ],
+      constraints: [],
+      errors: [],
+      hasErrors: false
+    }
+  },
+  actions: {
+    fields: {
+      name: {},
+      routingNumber: {},
+      confirmRoutingNumber: {},
+      accountNumber: {},
+      confirmAccountNumber: {},
+      accountType: {}
+    },
+    form: {}
+  }
+};
 const cardIconsLabel = `Accepting ${cardIcons
   .filter(ci => ci.enabled)
   ?.map((cardIcon, index) =>
@@ -47,14 +458,17 @@ const sections = [
   {
     id: "new-card-section",
     title: "New Card",
-    content: <p>The form to add a credit card would go here.</p>,
+    content: <PaymentFormCard {...paymentFormCardProps} />,
     rightIconsLabel: cardIconsLabel,
     rightIcons: cardIcons
   },
-  { id: "bar", title: "Bar", content: <div>Content 1</div> },
+  {
+    id: "new-bank-account-section",
+    title: "New bank account",
+    content: <PaymentFormACH {...paymentFormACHProps} />
+  },
   { id: "baz", title: "Baz", content: <div>Content 2</div> }
 ];
-
 export const radioSection = () => {
   const [openSection, setOpenSection] = useState("");
   return (