@thecb/components 9.0.4-beta.1 → 9.0.4-beta.2

package/package.json

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

package/src/components/atoms/alert/Alert.js

@@ -24,7 +24,10 @@ const Alert = ({
   enableSmallText = false,
   innerContentPadding = "1rem",
   iconPadding = "0 0 0 1rem",
-  contentFullHeight = false
+  contentFullHeight = false,
+  ariaRole = "group",
+  ariaAtomic = true,
+  ariaLive = "polite"
 }) => {
   const Icon = AlertIcons[variant];
   let contentPadding = maxContentWidth
@@ -92,8 +95,9 @@ const Alert = ({
       borderSize={noBorder ? "0px" : "1px"}
       boxShadow={enableBoxShadow ? generateShadows()?.inset?.base : ""}
       extraStyles={extraStyles}
-      role="alert"
-      aria-atomic={true}
+      role={ariaRole}
+      aria-atomic={ariaAtomic}
+      aria-live={ariaLive}
     >
       {maxContentWidth ? (
         <Center maxWidth={maxContentWidth}>{content}</Center>

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

@@ -221,6 +221,7 @@ const FormInput = ({
             $extraStyles={extraStyles}
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
+            aria-busy={true}
             {...props}
           />
         ) : (
@@ -247,35 +248,36 @@ const FormInput = ({
             $extraStyles={extraStyles}
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
+            aria-busy={true}
             {...props}
           />
         )}
       </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;
-              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>
+      <div role="status" aria-atomic={true}>
+        <Stack direction="row" justify="space-between">
+          {(field.hasErrors && field.dirty) ||
+          (field.hasErrors && showErrors) ? (
+            <Text
+              color={ERROR_COLOR}
+              variant="pXS"
+              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>
+      </div>
     </Stack>
   );
 };

package/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -83,6 +83,7 @@ const PartialAmountForm = ({
                 }
               </Text>
             }
+            aria-busy={true}
           />
         ))}
       </FormInputColumn>

package/src/components/molecules/partial-amount-form/PartialAmountForm.stories.js

@@ -0,0 +1,146 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+import { createFormState, required } from "redux-freeform";
+import PartialAmountForm from "./PartialAmountForm";
+import page from "../../../../.storybook/page";
+import * as PartialAmountFormState from "./PartialAmountForm.state";
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
+  thing: {
+    validators: [required()]
+  }
+});
+const errorMessages = {
+  [required.error]: "thing is required"
+};
+const partialAmountFormFields = {
+  "3cd98097-1c95-43c6-848a-d44f95d312ec": {
+    dirty: false,
+    rawValue: "5000",
+    validators: [
+      {
+        type: "validator/REQUIRED",
+        args: [],
+        error: "error/REQUIRED"
+      },
+      {
+        type: "validator/VALIDATE_SUM",
+        args: [
+          {
+            type: "validator/NUMBER_GREATER_THAN_OR_EQUAL_TO",
+            args: [1],
+            error: "error/NUMBER_GREATER_THAN_OR_EQUAL_TO"
+          },
+          [
+            "ff4b6d84-7f6a-4692-8d50-05eab56a6351",
+            "4396e95d-e0eb-44e6-8691-f94d72c2f7e7"
+          ]
+        ],
+        error: "error/NUMBER_GREATER_THAN_OR_EQUAL_TO"
+      },
+      {
+        type: "validator/VALIDATE_SUM",
+        args: [
+          {
+            type: "validator/NUMBER_LESS_THAN_OR_EQUAL_TO",
+            args: [50000],
+            error: "error/NUMBER_LESS_THAN_OR_EQUAL_TO"
+          },
+          [
+            "ff4b6d84-7f6a-4692-8d50-05eab56a6351",
+            "4396e95d-e0eb-44e6-8691-f94d72c2f7e7"
+          ]
+        ],
+        error: "error/NUMBER_LESS_THAN_OR_EQUAL_TO"
+      }
+    ],
+    constraints: [
+      {
+        type: "validator/ONLY_NATURALS",
+        args: [],
+        error: "error/ONLY_NATURALS"
+      }
+    ],
+    errors: ["error/NUMBER_LESS_THAN_OR_EQUAL_TO"],
+    hasErrors: true,
+    id: "3cd98097-1c95-43c6-848a-d44f95d312ec"
+  },
+  "ff4b6d84-7f6a-4692-8d50-05eab56a6351": {
+    dirty: false,
+    rawValue: "25000",
+    id: "ff4b6d84-7f6a-4692-8d50-05eab56a6351",
+    validators: [
+      {
+        type: "validator/REQUIRED",
+        args: [],
+        error: "error/REQUIRED"
+      },
+      {
+        type: "validator/VALIDATE_SUM",
+        args: [
+          {
+            type: "validator/NUMBER_GREATER_THAN_OR_EQUAL_TO",
+            args: [1],
+            error: "error/NUMBER_GREATER_THAN_OR_EQUAL_TO"
+          },
+          [
+            "3cd98097-1c95-43c6-848a-d44f95d312ec",
+            "4396e95d-e0eb-44e6-8691-f94d72c2f7e7"
+          ]
+        ],
+        error: "error/NUMBER_GREATER_THAN_OR_EQUAL_TO"
+      },
+      {
+        type: "validator/VALIDATE_SUM",
+        args: [
+          {
+            type: "validator/NUMBER_LESS_THAN_OR_EQUAL_TO",
+            args: [50000],
+            error: "error/NUMBER_LESS_THAN_OR_EQUAL_TO"
+          },
+          [
+            "3cd98097-1c95-43c6-848a-d44f95d312ec",
+            "4396e95d-e0eb-44e6-8691-f94d72c2f7e7"
+          ]
+        ],
+        error: "error/NUMBER_LESS_THAN_OR_EQUAL_TO"
+      }
+    ],
+    constraints: [
+      {
+        type: "validator/ONLY_NATURALS",
+        args: [],
+        error: "error/ONLY_NATURALS"
+      }
+    ],
+    errors: ["error/NUMBER_LESS_THAN_OR_EQUAL_TO"],
+    hasErrors: true
+  }
+};
+const options = [
+  { value: "", text: "choose name" },
+  { value: "foo", text: "foo" },
+  { value: "bar", text: "bar" },
+  { value: "baz", text: "baz" },
+  { value: "disabled", text: "disabled" }
+];
+const story = page({
+  title: "Components|Molecules/PartialAmountForm",
+  Component: PartialAmountForm,
+  reducer: PartialAmountFormState.reducer,
+  mapStateToProps: PartialAmountFormState.mapStateToProps,
+  mapDispatchToProps: PartialAmountFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedPartialAmountForm = connect(
+  PartialAmountFormState.mapStateToProps,
+  PartialAmountFormState.mapDispatchToProps
+)(PartialAmountForm);
+export const partialAmountForm = () => (
+  <ConnectedPartialAmountForm
+    showErrors={boolean("showErrors", false, "props")}
+    lineItems={options}
+  />
+);

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

@@ -64,15 +64,6 @@ 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>
@@ -85,7 +76,6 @@ 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,15 +91,6 @@ 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">
@@ -130,7 +121,6 @@ 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, useEffect, useRef, useState } from "react";
+import React, { Fragment, useState } from "react";
 import styled from "styled-components";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./RadioSection.theme";
@@ -98,19 +98,6 @@ 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"
@@ -201,11 +188,6 @@ const RadioSection = ({
                           as="label"
                           htmlFor={`radio-input-${idString(section)}`}
                           color={CHARADE_GREY}
-                          {...{
-                            ...(section?.titleLabel
-                              ? { "aria-label": section.titleLabel }
-                              : {})
-                          }}
                         >
                           {section.title}
                         </Text>