@thecb/components 12.1.0-beta.15 → 12.1.0-beta.16

package/README.md

@@ -2,6 +2,8 @@
 
 This library contains CityBase React components for use across all current and future CB applications (NFE, RMD, POS).
 
+> See [CONTRIBUTING.md](./CONTRIBUTING.md) for PR guidelines, dev tasks checklist, integration testing, and deployment/versioning.
+
 <!-- TOC -->
 
 - [Development setup](#development-setup)

package/dist/index.cjs.js

@@ -19826,13 +19826,7 @@ var Alert = function Alert(_ref) {
     _ref$ariaAtomic = _ref.ariaAtomic,
     ariaAtomic = _ref$ariaAtomic === void 0 ? true : _ref$ariaAtomic,
     _ref$ariaLive = _ref.ariaLive,
-    ariaLive = _ref$ariaLive === void 0 ? "polite" : _ref$ariaLive,
-    _ref$ariaLabelledBy = _ref.ariaLabelledBy,
-    ariaLabelledBy = _ref$ariaLabelledBy === void 0 ? null : _ref$ariaLabelledBy,
-    _ref$headingAs = _ref.headingAs,
-    headingAs = _ref$headingAs === void 0 ? null : _ref$headingAs,
-    _ref$headingId = _ref.headingId,
-    headingId = _ref$headingId === void 0 ? null : _ref$headingId;
+    ariaLive = _ref$ariaLive === void 0 ? "polite" : _ref$ariaLive;
   var Icon = AlertIcons[variant];
   var contentPadding = maxContentWidth ? "".concat(padding, " 1rem") : innerContentPadding;
   var content = /*#__PURE__*/React__default.createElement(Sidebar, {
@@ -19863,15 +19857,11 @@ var Alert = function Alert(_ref) {
   }, textOverride ? textOverride : /*#__PURE__*/React__default.createElement(Stack, {
     fullHeight: true,
     childGap: "0"
-  }, /*#__PURE__*/React__default.createElement(Text$1, _extends({
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: enableSmallText ? "pS" : "p",
     color: themeValues.text,
     weight: "600"
-  }, headingAs ? {
-    as: headingAs
-  } : {}, headingId ? {
-    id: headingId
-  } : {}), heading), /*#__PURE__*/React__default.createElement(Text$1, {
+  }, heading), /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     color: themeValues.text
   }, text), children))), /*#__PURE__*/React__default.createElement(Cluster, {
@@ -19905,8 +19895,6 @@ var Alert = function Alert(_ref) {
     "aria-atomic": ariaAtomic
   } : {}, ariaRole !== null ? {
     role: ariaRole
-  } : {}, ariaLabelledBy !== null ? {
-    "aria-labelledby": ariaLabelledBy
   } : {}), maxContentWidth ? /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: maxContentWidth
   }, content) : content);
@@ -22167,8 +22155,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__default.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -22240,19 +22229,24 @@ var Checkbox = /*#__PURE__*/React.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 = React.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",
@@ -22263,7 +22257,7 @@ var Checkbox = /*#__PURE__*/React.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);
     },
@@ -22281,7 +22275,7 @@ var Checkbox = /*#__PURE__*/React.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,
@@ -48207,6 +48201,10 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
 };
 
 var TermsAndConditionsTitleDivId = "terms-and-conditions-title";
+var InlineTermsWrapper = styled__default.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,
@@ -48248,6 +48246,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%",
@@ -48460,24 +48473,33 @@ 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.",
+    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 = {
@@ -48649,24 +48671,33 @@ 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.",
+    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);