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

package/README.md

@@ -140,32 +140,13 @@ Publishing to NPM is automated. When a PR is merged to master, the package will
 - Run `yarn add @thecb/components`.
 - To verify it installed successfully, make sure it is in the applicaton's `package.json` file.
 
-### Local import and development
+### Testing changes locally
 
-If you are developing locally, you can add or make changes to components in the `@thecb/components` package and see those changes in the application running locally by linking the `@thecb/components` package to your application.
-Open the `@thecb/components`, and in the command line
+See **[TESTING.md](./TESTING.md)** for a complete guide to testing your changes. In short, you have three options:
 
-- Run `yarn build`
-- Run `yarn link`
-
-You should see a success message, and directions on how to link this package into an application. In the application you’d like the components, navigate to that application and in the command line
-
-- Run `yarn link @thecb/components`
-
-Now the package is linked locally and you can make changes to the `@thecb/components` and you’ll see the changes in the application running `@thecb/components`. To unlink the package, in the application running `@thecb/components` and in the command line
-
-- Run `yarn unlink @thecb/components`
-- Run `yarn install` ` --``force `
-
-Next go to the `@thecb/components` and in the command line
-
-- Run `yarn unlink`
-
-Now the package is unlinked, and you’re using the version on NPM.
-
-### Yalc
-
-If you encounter issues using `yarn link`, a nice alternative is `yalc`. See [https://github.com/wclr/yalc](https://github.com/wclr/yalc) for usage instructions.
+1. **Storybook** (`yarn storybook`) — fastest, for self-contained component changes
+2. **Live Sync** (`yarn sync <path-to-project>`) — test inside a real running app without publishing
+3. **Beta Publish** (`yarn publish-beta`) — publish to npm for CI/CD, QA, or sharing with teammates
 
 ### Importing and using components
 

package/dist/index.cjs.js

@@ -22156,7 +22156,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"];
+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"
@@ -22228,6 +22228,7 @@ 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),
@@ -22238,9 +22239,12 @@ var Checkbox = /*#__PURE__*/React.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 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",
@@ -22251,7 +22255,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);
     },
@@ -22269,7 +22273,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,
@@ -27029,7 +27033,7 @@ var NavFooter = function NavFooter(_ref) {
     background: backgroundColor,
     minHeight: footerMinHeight,
     minWidth: "100%",
-    extraStyles: isMobile ? "overflow: hidden;" : "height: ".concat(footerMinHeight, "; > * { height: 100%; };")
+    extraStyles: isMobile ? "" : "min-height: ".concat(footerMinHeight, "; > * { min-height: 100%; };")
   }, rest), /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: footerWidth || "76.5rem"
   }, /*#__PURE__*/React__default.createElement(Cover, {
@@ -47170,7 +47174,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,
@@ -47182,7 +47186,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, {
@@ -48196,6 +48199,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,
@@ -48237,6 +48244,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%",
@@ -48449,24 +48471,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 = {
@@ -48638,24 +48669,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, {
-    name: "credit card checkbox",
+  })), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+    name: "bank 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);