@thecb/components 12.1.0-beta.1 → 12.1.0-beta.3

package/dist/index.esm.js

@@ -22230,45 +22230,43 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
       func();
     }
   };
-  var titleId = title ? "checkboxlabel-".concat(name) : undefined;
-  var ariaLabelledById = labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
-  var ariaLabel = ariaLabelledById ? undefined : name;
+  var normalizedName = name ? name.replace(/\s+/g, "-") : name;
+  var checkboxId = "checkbox-".concat(normalizedName);
+  var titleId = title ? "checkboxlabel-".concat(normalizedName) : undefined;
+  // aria-label fallback when no visible title or external labelledById is provided
+  var ariaLabel = !labelledById && !title ? name : undefined;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     ref: ref,
     padding: "0",
-    tabIndex: "0",
-    role: "checkbox",
-    "aria-checked": checked,
-    "aria-required": isRequired || undefined,
-    "aria-invalid": error,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledById,
-    "aria-describedby": error ? "".concat(name, "-error-message") : undefined,
-    onFocus: function onFocus() {
-      return setFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setFocused(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return handleClick(e, onChange);
-    },
     hiddenStyles: hidden,
     background: themeValues.backgroundColor,
-    extraStyles: "\n          :focus {\n            outline: 0;\n          }\n          ".concat(extraStyles, "; \n          margin: ").concat(checkboxMargin, ";\n        ")
+    extraStyles: "\n          ".concat(extraStyles, "; \n          margin: ").concat(checkboxMargin, ";\n        ")
   }, rest), /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, {
+    htmlFor: checkboxId,
     "data-qa": dataQa
   }, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React__default.createElement(HiddenCheckbox, {
-    id: "checkbox-".concat(name),
+    id: checkboxId,
     disabled: disabled,
     name: name,
     checked: checked,
     onChange: onChange,
-    tabIndex: "-1",
+    tabIndex: "0",
     required: isRequired,
-    "aria-hidden": "true"
+    "aria-invalid": error,
+    "aria-label": ariaLabel,
+    "aria-labelledby": labelledById,
+    "aria-describedby": error ? "".concat(name, "-error-message") : undefined,
+    onKeyDown: function onKeyDown(e) {
+      return handleClick(e, onChange);
+    },
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    }
   }), /*#__PURE__*/React__default.createElement(StyledCheckbox, {
     "aria-hidden": "true",
     error: error,
@@ -47162,7 +47160,7 @@ var PartialAmountField = function PartialAmountField(_ref) {
       extraStyles: "display: block;",
       variant: themeValues.detailVariant,
       weight: "400"
-    }, lineItem.subDescription, " payment amount"))),
+    }, lineItem.subDescription))),
     key: lineItem.id,
     field: field,
     fieldActions: fieldActions,
@@ -47174,7 +47172,6 @@ var PartialAmountField = function PartialAmountField(_ref) {
     placeholder: "$0.00",
     formatter: moneyFormat,
     isNum: true,
-    isRequired: true,
     decorator: /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p"
     }, "Amount owed:", "  ", /*#__PURE__*/React__default.createElement(Text$1, {
@@ -48217,7 +48214,9 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     _ref$initialFocusSele = _ref.initialFocusSelector,
     initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
     _ref$isRequired = _ref.isRequired,
-    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$textExtraStyles = _ref.textExtraStyles,
+    textExtraStyles = _ref$textExtraStyles === void 0 ? "" : _ref$textExtraStyles;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showTerms = _useState2[0],
@@ -48259,7 +48258,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     justify: "flex-start",
     align: "center",
     nowrap: true,
-    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };",
+    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; }; ".concat(textExtraStyles),
     id: TermsAndConditionsTitleDivId
   }, description && /*#__PURE__*/React__default.createElement(Text$1, {
     color: CHARADE_GREY
@@ -48323,7 +48322,17 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     showAccount = _useState4[0],
     toggleShowAccount = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showTermsModal = _useState6[0],
+    setShowTermsModal = _useState6[1];
   var showTerms = !!termsContent;
+  var toggleTermsModal = function toggleTermsModal(open) {
+    setShowTermsModal(open);
+    if (open) {
+      useScrollTo("terms-body-text", 0, 0, "smooth", 100);
+    }
+  };
   var nameErrors = _defineProperty({}, required.error, "Name is required");
   var routingNumberErrors = _defineProperty(_defineProperty(_defineProperty({}, required.error, "Routing number is required"), hasLength.error, "Routing number must be 9 digits"), isRoutingNumber.error, "Invalid routing number");
   var confirmRoutingNumberErrors = _defineProperty(_defineProperty({}, required.error, "Confirm routing number is required"), matchesField.error, "Confirm routing number field must match routing number");
@@ -48441,24 +48450,29 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
-  }), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
-    childGap: "4px",
-    align: "center"
-  }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "bank checkbox",
     dataQa: "Save checking account to wallet",
-    title: "Save checking account to wallet.",
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Save checking account to wallet (optional).", " ", showTerms && /*#__PURE__*/React__default.createElement("span", {
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, "View", " ", /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
+      link: "Terms and Conditions",
+      terms: termsContent,
+      isOpen: showTermsModal,
+      toggleOpen: toggleTermsModal,
+      initialFocusSelector: ".modal-close-button"
+    }))),
     checked: walletCheckboxMarked,
     onChange: saveToWallet
-  }), showTerms && /*#__PURE__*/React__default.createElement(Cover, {
-    singleChild: true
-  }, /*#__PURE__*/React__default.createElement(TermsAndConditions, {
+  }), !showWalletCheckbox && showTerms && /*#__PURE__*/React__default.createElement(TermsAndConditions, {
     version: "v2",
     showCheckbox: false,
     description: "View",
     terms: termsContent,
     initialFocusSelector: ".modal-close-button"
-  })))));
+  })));
 };
 
 var formConfig$6 = {
@@ -48513,7 +48527,17 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     termsContent = _ref.termsContent;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showTermsModal = _useState2[0],
+    setShowTermsModal = _useState2[1];
   var showTerms = !!termsContent;
+  var toggleTermsModal = function toggleTermsModal(open) {
+    setShowTermsModal(open);
+    if (open) {
+      useScrollTo("terms-body-text", 0, 0, "smooth", 100);
+    }
+  };
   useEffect$1(function () {
     if (deniedCards) {
       deniedCards.map(function (card) {
@@ -48630,24 +48654,29 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     autocompleteValue: "billing postal-code",
     isRequired: true
-  })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
-    childGap: "4px",
-    align: "center"
-  }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  })), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "credit card checkbox",
     dataQa: "Save credit card to wallet",
-    title: "Save credit card to wallet.",
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Save credit card to wallet (optional).", " ", showTerms && /*#__PURE__*/React__default.createElement("span", {
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, "View", " ", /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
+      link: "Terms and Conditions",
+      terms: termsContent,
+      isOpen: showTermsModal,
+      toggleOpen: toggleTermsModal,
+      initialFocusSelector: ".modal-close-button"
+    }))),
     checked: walletCheckboxMarked,
     onChange: saveToWallet
-  }), showTerms && /*#__PURE__*/React__default.createElement(Cover, {
-    singleChild: true
-  }, /*#__PURE__*/React__default.createElement(TermsAndConditions, {
+  }), !showWalletCheckbox && showTerms && /*#__PURE__*/React__default.createElement(TermsAndConditions, {
     version: "v2",
     showCheckbox: false,
     description: "View",
     terms: termsContent,
     initialFocusSelector: ".modal-close-button"
-  })))));
+  })));
 };
 var PaymentFormCard$1 = withWindowSize(PaymentFormCard);