@thecb/components 12.1.0-beta.0 → 12.1.0-beta.10

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

@@ -22238,43 +22238,45 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
       func();
     }
   };
-  var normalizedName = name ? name.replace(/\s+/g, "-") : name;
-  var checkboxId = "checkbox-".concat(normalizedName);
-  var titleId = title ? "checkboxlabel-".concat(normalizedName) : undefined;
-  // aria-label fallback when no visible title or external labelledById is provided
-  var ariaLabel = !labelledById && !title ? name : 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",
+    tabIndex: "0",
+    role: "checkbox",
+    "aria-checked": checked,
+    "aria-required": isRequired || undefined,
+    "aria-invalid": error,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledById,
+    "aria-describedby": error ? "".concat(name, "-error-message") : undefined,
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return handleClick(e, onChange);
+    },
     hiddenStyles: hidden,
     background: themeValues.backgroundColor,
-    extraStyles: "\n          ".concat(extraStyles, "; \n          margin: ").concat(checkboxMargin, ";\n        ")
+    extraStyles: "\n          :focus {\n            outline: 0;\n          }\n          ".concat(extraStyles, "; \n          margin: ").concat(checkboxMargin, ";\n        ")
   }, rest), /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, {
-    htmlFor: checkboxId,
     "data-qa": dataQa
   }, /*#__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,
     onChange: onChange,
-    tabIndex: "0",
+    tabIndex: "-1",
     required: isRequired,
-    "aria-invalid": error,
-    "aria-label": ariaLabel,
-    "aria-labelledby": labelledById,
-    "aria-describedby": error ? "".concat(name, "-error-message") : undefined,
-    onKeyDown: function onKeyDown(e) {
-      return handleClick(e, onChange);
-    },
-    onFocus: function onFocus() {
-      return setFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setFocused(false);
-    }
+    "aria-hidden": "true"
   }), /*#__PURE__*/React__default.createElement(StyledCheckbox, {
     "aria-hidden": "true",
     error: error,
@@ -27027,7 +27029,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, {
@@ -48247,7 +48249,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, html), /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center",
-    nowrap: true
+    nowrap: true,
+    overflow: true
   }, showCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: id,
     error: hasError,
@@ -48452,7 +48455,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
   }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "bank checkbox",
     dataQa: "Save checking account to wallet",
-    title: "Save checking account to wallet (optional).",
+    title: "Save checking account to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
   }), showTerms && /*#__PURE__*/React__default.createElement(Cover, {
@@ -48641,7 +48644,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
   }, 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: "Save credit card to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
   }), showTerms && /*#__PURE__*/React__default.createElement(Cover, {