@thecb/components 12.1.0-beta.2 → 12.1.0-beta.4

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

@@ -48330,7 +48330,17 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     showAccount = _useState4[0],
     toggleShowAccount = _useState4[1];
+  var _useState5 = React.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");
@@ -48448,26 +48458,29 @@ 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 (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();
+      }
+    }, "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",
-    textExtraStyles: "vertical-align: middle; margin-left: 40px;" /* determined w 24px checkbox width + 16px margin */
-  })))));
+    initialFocusSelector: ".modal-close-button"
+  })));
 };
 
 var formConfig$6 = {
@@ -48522,7 +48535,17 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     termsContent = _ref.termsContent;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
+  var _useState = React.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);
+    }
+  };
   React.useEffect(function () {
     if (deniedCards) {
       deniedCards.map(function (card) {
@@ -48639,26 +48662,29 @@ 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 (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();
+      }
+    }, "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",
-    textExtraStyles: "vertical-align: middle; margin-left: 40px;" /* determined w 24px checkbox width + 16px margin */
-  })))));
+    initialFocusSelector: ".modal-close-button"
+  })));
 };
 var PaymentFormCard$1 = withWindowSize(PaymentFormCard);