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

package/dist/index.d.ts

@@ -598,6 +598,12 @@ interface AlertProps {
   innerContentPadding?: string;
   iconPadding?: string;
   contentFullHeight?: boolean;
+  ariaRole?: string;
+  ariaAtomic?: boolean;
+  ariaLive?: string;
+  ariaLabelledBy?: string;
+  headingAs?: string;
+  headingId?: string;
 }
 
 declare const Alert: React.FC<Expand<AlertProps> &

package/dist/index.esm.js

@@ -19818,7 +19818,13 @@ 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;
+    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;
   var Icon = AlertIcons[variant];
   var contentPadding = maxContentWidth ? "".concat(padding, " 1rem") : innerContentPadding;
   var content = /*#__PURE__*/React__default.createElement(Sidebar, {
@@ -19849,11 +19855,15 @@ var Alert = function Alert(_ref) {
   }, textOverride ? textOverride : /*#__PURE__*/React__default.createElement(Stack, {
     fullHeight: true,
     childGap: "0"
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
+  }, /*#__PURE__*/React__default.createElement(Text$1, _extends({
     variant: enableSmallText ? "pS" : "p",
     color: themeValues.text,
     weight: "600"
-  }, heading), /*#__PURE__*/React__default.createElement(Text$1, {
+  }, headingAs ? {
+    as: headingAs
+  } : {}, headingId ? {
+    id: headingId
+  } : {}), heading), /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     color: themeValues.text
   }, text), children))), /*#__PURE__*/React__default.createElement(Cluster, {
@@ -19887,6 +19897,8 @@ 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);
@@ -22148,7 +22160,7 @@ var ENTER = 13;
 var ESCAPE = 27;
 var SPACEBAR = 32;
 
-var _excluded$x = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "isRequired", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon", "customAriaLabel"];
+var _excluded$x = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "isRequired", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
 var CheckboxContainer = styled.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -22220,7 +22232,6 @@ 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),
@@ -22231,12 +22242,9 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
       func();
     }
   };
-  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;
+  var titleId = title ? "checkboxlabel-".concat(name) : undefined;
+  var ariaLabelledById = labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
+  var ariaLabel = ariaLabelledById ? undefined : name;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     ref: ref,
     padding: "0",
@@ -22247,7 +22255,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     "aria-invalid": error,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledById,
-    "aria-describedby": errorMessageNormalized,
+    "aria-describedby": error ? "".concat(name, "-error-message") : undefined,
     onFocus: function onFocus() {
       return setFocused(true);
     },
@@ -22265,7 +22273,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
   }, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React__default.createElement(HiddenCheckbox, {
-    id: checkboxId,
+    id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
     checked: checked,
@@ -48191,10 +48199,6 @@ 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,
@@ -48236,21 +48240,6 @@ 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%",
@@ -48463,33 +48452,24 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
-  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
+    childGap: "4px",
+    align: "center"
+  }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "bank checkbox",
     dataQa: "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"
-    }))),
+    title: "Save checking account to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
-  }), !showWalletCheckbox && showTerms && /*#__PURE__*/React__default.createElement(TermsAndConditions, {
+  }), showTerms && /*#__PURE__*/React__default.createElement(Cover, {
+    singleChild: true
+  }, /*#__PURE__*/React__default.createElement(TermsAndConditions, {
     version: "v2",
     showCheckbox: false,
-    description: "View ",
+    description: "View",
     terms: termsContent,
     initialFocusSelector: ".modal-close-button"
-  })));
+  })))));
 };
 
 var formConfig$6 = {
@@ -48661,33 +48641,24 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     autocompleteValue: "billing postal-code",
     isRequired: true
-  })), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
+    childGap: "4px",
+    align: "center"
+  }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "credit card checkbox",
     dataQa: "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"
-    }))),
+    title: "Save credit card to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
-  }), !showWalletCheckbox && showTerms && /*#__PURE__*/React__default.createElement(TermsAndConditions, {
+  }), showTerms && /*#__PURE__*/React__default.createElement(Cover, {
+    singleChild: true
+  }, /*#__PURE__*/React__default.createElement(TermsAndConditions, {
     version: "v2",
     showCheckbox: false,
-    description: "View ",
+    description: "View",
     terms: termsContent,
     initialFocusSelector: ".modal-close-button"
-  })));
+  })))));
 };
 var PaymentFormCard$1 = withWindowSize(PaymentFormCard);