@thecb/components 7.10.2 → 7.10.4-beta.0

package/package.json

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

package/src/components/molecules/editable-list/EditableList.js

@@ -13,6 +13,7 @@ import {
   BOSTON_BLUE,
   CHARADE_GREY
 } from "../../../constants/colors";
+import { createIdFromString } from "../../../util/general";
 
 const ACTIVE = "ACTIVE";
 const EXPIRED = "EXPIRED";
@@ -36,6 +37,7 @@ const EditableList = ({
   modalProps,
   autoPayMethods,
   as = "p",
+  listPadding = "0rem 0rem 1.5rem 0rem",
   qaPrefix,
   ariaLabel
 }) => {
@@ -43,7 +45,20 @@ const EditableList = ({
     itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
   } ${itemName}`;
   return (
-    <Box padding="0rem 0rem 1.5rem 0rem" as="section" aria-labelledby={`li`}>
+    <Box
+      padding={listPadding}
+      as="section"
+      aria-labelledby={
+        typeof title === "string"
+          ? `editable-list-${createIdFromString(title)}`
+          : ""
+      }
+      aria-label={
+        !title && typeof itemName === "string"
+          ? `editable-list-${createIdFromString(itemName)}`
+          : ""
+      }
+    >
       <Stack childGap="0rem">
         {title !== "" && (
           <Box padding="0rem 0rem 0.5rem 0rem">
@@ -52,6 +67,11 @@ const EditableList = ({
               weight={titleWeight}
               color={CHARADE_GREY}
               extraStyles="letter-spacing: 0.29px; font-size: 1.125rem;"
+              id={
+                typeof title === "string"
+                  ? `editable-list-${createIdFromString(title)}`
+                  : ""
+              }
             >
               {title}
             </Title>

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

@@ -15,8 +15,7 @@ import {
 import AccountAndRoutingModal from "../account-and-routing-modal";
 import { noop } from "../../../util/general";
 import { Cluster, Cover } from "../../atoms/layouts";
-import TermsAndConditionsModal from "../terms-and-conditions-modal/TermsAndConditionsModal";
-import Text from "../../atoms/text";
+import TermsAndConditions from "../terms-and-conditions";
 
 const PaymentFormACH = ({
   variant = "default",
@@ -32,17 +31,14 @@ const PaymentFormACH = ({
   showWalletCheckbox,
   saveToWallet,
   walletCheckboxMarked,
-  termsContent,
-  termsTitle = "Terms & Conditions"
+  termsContent
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
   const [showRouting, toggleShowRouting] = useState(false);
   const [showAccount, toggleShowAccount] = useState(false);
-  const [termsModalOpen, setTermsModalOpen] = useState(false);
   const showTerms = !!termsContent;
-  const showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
 
   const nameErrors = {
     [required.error]: "Name is required"
@@ -173,17 +169,12 @@ const PaymentFormACH = ({
             )}
             {showTerms && (
               <Cover singleChild>
-                <Cluster childGap={0}>
-                  <Text variant={showTermsLinkVariant}>View&nbsp;</Text>
-                  <TermsAndConditionsModal
-                    link={termsTitle}
-                    linkVariant={showTermsLinkVariant}
-                    terms={termsContent}
-                    title={termsTitle}
-                    isOpen={termsModalOpen}
-                    toggleOpen={setTermsModalOpen}
-                  />
-                </Cluster>
+                <TermsAndConditions
+                  version="v2"
+                  showCheckbox={false}
+                  description="View"
+                  terms={termsContent}
+                />
               </Cover>
             )}
           </Cluster>

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

@@ -28,8 +28,7 @@ import {
 } from "../../atoms/form-layouts";
 import { Box, Cluster, Cover } from "../../atoms/layouts";
 import withWindowSize from "../../withWindowSize";
-import TermsAndConditionsModal from "../terms-and-conditions-modal/TermsAndConditionsModal";
-import Text from "../../atoms/text";
+import TermsAndConditions from "../terms-and-conditions";
 
 const PaymentFormCard = ({
   variant = "default",
@@ -43,13 +42,10 @@ const PaymentFormCard = ({
   saveToWallet,
   walletCheckboxMarked,
   deniedCards,
-  termsContent,
-  termsTitle = "Terms & Conditions"
+  termsContent
 }) => {
   const { isMobile } = useContext(ThemeContext);
-  const [termsModalOpen, setTermsModalOpen] = useState(false);
   const showTerms = !!termsContent;
-  const showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
 
   useEffect(() => {
     if (deniedCards) {
@@ -197,17 +193,12 @@ const PaymentFormCard = ({
             )}
             {showTerms && (
               <Cover singleChild>
-                <Cluster childGap={0}>
-                  <Text variant={showTermsLinkVariant}>View&nbsp;</Text>
-                  <TermsAndConditionsModal
-                    link={termsTitle}
-                    linkVariant={showTermsLinkVariant}
-                    terms={termsContent}
-                    title={termsTitle}
-                    isOpen={termsModalOpen}
-                    toggleOpen={setTermsModalOpen}
-                  />
-                </Cluster>
+                <TermsAndConditions
+                  version="v2"
+                  showCheckbox={false}
+                  description="View"
+                  terms={termsContent}
+                />
               </Cover>
             )}
           </Cluster>