@thecb/components 12.1.0-beta.12 → 12.1.0-beta.14

package/dist/index.esm.js

@@ -22147,8 +22147,9 @@ var ARROW_DOWN = 40;
 var ENTER = 13;
 var ESCAPE = 27;
 var SPACEBAR = 32;
+var SPACE_KEY = " ";
 
-var _excluded$x = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "isRequired", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
+var _excluded$x = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "isRequired", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon", "customAriaLabel"];
 var CheckboxContainer = styled.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -22220,19 +22221,24 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     _ref5$hasIconOverride = _ref5.hasIconOverride,
     hasIconOverride = _ref5$hasIconOverride === void 0 ? false : _ref5$hasIconOverride,
     Icon = _ref5.icon,
+    customAriaLabel = _ref5.customAriaLabel,
     rest = _objectWithoutProperties(_ref5, _excluded$x);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
     setFocused = _useState2[1];
   var handleClick = function handleClick(e, func) {
-    if (e.keyCode === ENTER) {
+    if (e.key === SPACE_KEY) {
+      e.preventDefault();
       func();
     }
   };
-  var titleId = title ? "checkboxlabel-".concat(name) : undefined;
-  var ariaLabelledById = labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
-  var ariaLabel = ariaLabelledById ? undefined : name;
+  var normalizeName = name ? name.replace(/\s+/g, "-") : "";
+  var checkboxId = "checkbox-".concat(normalizeName);
+  var titleId = title ? "checkboxlabel-".concat(normalizeName) : undefined;
+  var ariaLabelledById = customAriaLabel ? undefined : labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
+  var ariaLabel = ariaLabelledById ? undefined : customAriaLabel !== null && customAriaLabel !== void 0 ? customAriaLabel : name;
+  var errorMessageNormalized = error ? "".concat(normalizeName, "-error-message") : undefined;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     ref: ref,
     padding: "0",
@@ -22243,7 +22249,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     "aria-invalid": error,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledById,
-    "aria-describedby": error ? "".concat(name, "-error-message") : undefined,
+    "aria-describedby": errorMessageNormalized,
     onFocus: function onFocus() {
       return setFocused(true);
     },
@@ -22261,7 +22267,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
   }, /*#__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,
@@ -48187,6 +48193,10 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
 };
 
 var TermsAndConditionsTitleDivId = "terms-and-conditions-title";
+var InlineTermsWrapper = styled.span.withConfig({
+  displayName: "TermsAndConditionsControlV2__InlineTermsWrapper",
+  componentId: "sc-16np073-0"
+})(["display:inline;> div{display:inline;}.modal-trigger{display:inline !important;}"]);
 var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   var _ref$showCheckbox = _ref.showCheckbox,
     showCheckbox = _ref$showCheckbox === void 0 ? true : _ref$showCheckbox,
@@ -48228,6 +48238,21 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       useScrollTo("terms-body-text", 0, 0, "smooth", 100);
     }
   };
+  if (!showCheckbox && displayInline) {
+    return /*#__PURE__*/React__default.createElement(InlineTermsWrapper, {
+      id: TermsAndConditionsTitleDivId
+    }, description && /*#__PURE__*/React__default.createElement(Text$1, {
+      color: CHARADE_GREY
+    }, description), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
+      link: linkText,
+      terms: terms,
+      isOpen: showTerms,
+      toggleOpen: toggleTerms,
+      linkVariant: modalVariant,
+      title: modalTitle,
+      initialFocusSelector: initialFocusSelector
+    }));
+  }
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: displayInline ? "0" : "1.5rem",
     minWidth: displayInline ? "0" : "100%",
@@ -48440,25 +48465,33 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
-  }), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
-    childGap: "4px",
-    align: "center",
-    overflow: true
-  }, 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.",
+    customAriaLabel: "Save checking account to wallet (optional).",
+    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();
+      },
+      style: {
+        display: "inline"
+      }
+    }, /*#__PURE__*/React__default.createElement(TermsAndConditions, {
+      version: "v2",
+      showCheckbox: false,
+      description: "View ",
+      terms: termsContent,
+      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",
+    description: "View ",
     terms: termsContent,
     initialFocusSelector: ".modal-close-button"
-  })))));
+  })));
 };
 
 var formConfig$6 = {
@@ -48630,25 +48663,33 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     autocompleteValue: "billing postal-code",
     isRequired: true
-  })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
-    childGap: "4px",
-    align: "center",
-    overflow: true
-  }, 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.",
+    customAriaLabel: "Save credit card to wallet (optional).",
+    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();
+      },
+      style: {
+        display: "inline"
+      }
+    }, /*#__PURE__*/React__default.createElement(TermsAndConditions, {
+      version: "v2",
+      showCheckbox: false,
+      description: "View ",
+      terms: termsContent,
+      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",
+    description: "View ",
     terms: termsContent,
     initialFocusSelector: ".modal-close-button"
-  })))));
+  })));
 };
 var PaymentFormCard$1 = withWindowSize(PaymentFormCard);