@thecb/components 6.1.1 → 6.1.4-beta.1

package/README.md

@@ -65,23 +65,30 @@ Please include new component stories as this library will also be a sandbox.
 
 ## Version bumping and publishing
 
-### Version bumping
+### Version bumping and Publishing to NPM
 
-- The version of the package is automatically bumped via GitHub Action after a pull request is merged to the master branch.
+- Authors of PRs are responsible for bumping the version of the package prior to merging an approved PR to master. Once your pending PR has been approved, before merging to master, run `yarn build && yarn publish` in the main directory to create and publish a new build to NPM. This step should happen immediately before you merge your PR to master, to minimize conflicts between built versions.
 
-- The auto version bump action analyzes commit messages in the PR to determine what value to increment the package by. Including the keyword `major` in a commit message will result in a major version bump (i.e., `2.3.0` -> `3.0.0`). Including the keyword `minor` will result in a minor version bump (i.e., `2.3.0` -> `2.4.0`). PRs that are merged with neither the `major` or `minor` keywords present in commit messages will result in a patch version bump (i.e., `2.3.0` -> `2.3.1`).
+- CB Components follows semantic versioning practices, which divides version upgrades into three categories: "Patch" (e.g., `6.0.1` -> `6.0.2`), "Minor" (e.g., `6.0.2` -> `6.1.0`), and "Major" (e.g., `6.1.0` -> `7.0.0`)
 
 - Patch versions should consist of small, non-breaking changes to components, component stories, and development tooling or documentation; or bug fixes
 
+  - Fixing a non-breaking bug, such as the border color of an input; adding an example to a component's storybook story; adding a new HTML attribute to an existing
+    component are all examples of patch changes
+
 - Minor versions consist of moderate, non-breaking changes and additions: alterations to existing component structure or theme files; addition of new components, stories, or dependencies; significant changes to development tooling or introduction of tests
 
-- Major version relases should be reserved for breaking library changes: removal of in-use components; breaking changes to component layout or theme properties; addition or removal of crticial dependencies. These version increases should be rare.
+  - Adding to, removing, or significantly changing a component's base-theme or themeable properties; adding a new version of a component triggered by an optional
+    prop; adding a new dependency to the library; changing the Rollup build files or plugins; or adding new unit tests to one or more components are all examples of
+    minor verison changes
 
-### Publishing new versions to NPM
+- Major version relases should be reserved for breaking library changes: removal of in-use components; breaking changes to component layout or theme properties; addition or removal of crticial dependencies. These version increases should be rare.
 
-- While GitHub will handle bumping the version of the library with every PR merge to master, publishing an update version of the library to NPM requires creating a release using the `release` script. This script triggers an action in the repo to create a release tagged with a publication date. After a new release is created, manually run `yarn build && yarn publish` in your repo directory to publish a new version to NPM. When yarn asks you what version to publish, enter the same number that it gives you, as this number will already reflect the increase in version from the auto version bump action.
+  - Removing currently used components entirely, or removing versions of a component; significantly changing the structure, function, or API (props) of an existing
+    component; removing existing library dependencies; adding a new peer dependency or moving a current library dependency to be a peer dep (such that the library
+    breaks if a consuming application fails to provide the proper verison of that dependency) are all examples of major verison changes
 
-- Once a new version of the library is published to NPM, you may either manually update your application's `package.json` to request that new version, or wait until the following morning when dependabot will pick up the change and create an update PR for you.
+- Because of the potential for disruption of applications running in PROD, any changes that will result in a Major version increase require notifying other frontend engineers at CB who own applications such as Navigate Frontend (NFE), Revenue Management Dashboard (RMD), or Point of Sale Frontend (POS-Frontend), or any future applications which consume CB Components in advance of the change being merged to master and a new version being released
 
 ## Consuming in your application
 

package/dist/index.cjs.js

@@ -22550,7 +22550,7 @@ var fallbackValues$i = {
 };
 
 var _excluded$p = ["showErrors", "themeValues"],
-    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "extraStyles"];
+    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -22632,6 +22632,7 @@ var FormInput = function FormInput(_ref15) {
       themeValues = _ref15.themeValues,
       background = _ref15.background,
       customHeight = _ref15.customHeight,
+      autocomplete = _ref15.autocomplete,
       extraStyles = _ref15.extraStyles,
       props = _objectWithoutProperties(_ref15, _excluded2);
 
@@ -22709,7 +22710,8 @@ var FormInput = function FormInput(_ref15) {
     "data-qa": labelTextWhenNoError,
     themeValues: themeValues,
     $customHeight: customHeight,
-    $extraStyles: extraStyles
+    $extraStyles: extraStyles,
+    autocomplete: autocomplete
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
@@ -22727,7 +22729,8 @@ var FormInput = function FormInput(_ref15) {
     themeValues: themeValues,
     background: background,
     $customHeight: customHeight,
-    $extraStyles: extraStyles
+    $extraStyles: extraStyles,
+    autocomplete: autocomplete
   }, props))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -34411,7 +34414,8 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
       field = _ref.field,
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
-      countryCode = _ref.countryCode;
+      countryCode = _ref.countryCode,
+      autocomplete = _ref.autocomplete;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React__default.createElement(FormSelect$1, {
@@ -34421,7 +34425,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    autocompleteValue: "address-level1"
+    autocompleteValue: autocomplete
   });
 };
 
@@ -34726,6 +34730,24 @@ const ONLY_NATURALS_ERROR = "error/ONLY_NATURALS";
 const onlyNaturals = createValidator(ONLY_NATURALS, ONLY_NATURALS_ERROR);
 validatorFns[ONLY_NATURALS] = (value, args, form) => /^(\d+)?$/.test(value);
 
+/* 
+07/22: experimental expiration date constraint
+should allow entry of expiration date using "/" character
+to accommodate browser autofill
+
+not tested as validation function
+to validate exp date instead use combo of:
+required(), hasLength(), isValidMonth(), dateAfterToday()
+*/
+const ONLY_EXPIRATION_DATE = "validator/ONLY_EXPIRATION_DATE";
+const ONLY_EXPIRATION_DATE_ERROR = "error/ONLY_EXPIRATION_DATE";
+const onlyExpirationDate = createValidator(
+  ONLY_EXPIRATION_DATE,
+  ONLY_EXPIRATION_DATE_ERROR
+);
+validatorFns[ONLY_EXPIRATION_DATE] = (value, args, form) =>
+  /^(\d?\d?\/?\d?\d?)?$/.test(value);
+
 const NUMBER_LESS_THAN = "validator/NUMBER_LESS_THAN";
 const NUMBER_LESS_THAN_ERROR = "error/NUMBER_LESS_THAN";
 const numberLessThan = createValidator(
@@ -36477,7 +36499,8 @@ var AddressForm = function AddressForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "address-line1"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -36485,7 +36508,8 @@ var AddressForm = function AddressForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "address-line2"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     errorMessages: cityErrorMessages,
@@ -36494,7 +36518,8 @@ var AddressForm = function AddressForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "address-level2"
   }), /*#__PURE__*/React__default.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
@@ -36504,7 +36529,8 @@ var AddressForm = function AddressForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "address-level1"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -36515,7 +36541,8 @@ var AddressForm = function AddressForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "postal-code"
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
@@ -36619,7 +36646,8 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "current-password"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "New password",
     errorMessages: newPasswordErrorMessages,
@@ -36629,7 +36657,8 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "new-password"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm password",
     errorMessages: confirmNewPasswordErrorMessages,
@@ -36639,7 +36668,8 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "new-password"
   })), /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "1rem 0 0" : "1.5rem 0 0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -36853,7 +36883,8 @@ var EditNameForm = function EditNameForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "given-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Last Name",
     errorMessages: lastNameErrorMessages,
@@ -36862,7 +36893,8 @@ var EditNameForm = function EditNameForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "family-name"
   })));
 };
 
@@ -36929,7 +36961,8 @@ var EditableList = function EditableList(_ref) {
       autoPayMethods = _ref.autoPayMethods,
       _ref$as = _ref.as,
       as = _ref$as === void 0 ? "p" : _ref$as,
-      qaPrefix = _ref.qaPrefix;
+      qaPrefix = _ref.qaPrefix,
+      ariaLabel = _ref.ariaLabel;
   var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0rem 0rem 1.5rem 0rem",
@@ -36989,7 +37022,7 @@ var EditableList = function EditableList(_ref) {
         return removeItem(item.id);
       },
       extraStyles: "min-width: 0;",
-      "aria-label": "Remove ".concat(itemName)
+      "aria-label": "Remove ".concat(ariaLabel || itemName)
     })), canEdit && /*#__PURE__*/React__default.createElement(Box, {
       padding: "0 0.5rem",
       border: "2px solid transparent",
@@ -37003,7 +37036,7 @@ var EditableList = function EditableList(_ref) {
         return editItem(item.id);
       },
       extraStyles: "min-width: 0;",
-      "aria-label": "Edit ".concat(itemName)
+      "aria-label": "Edit ".concat(ariaLabel || itemName)
     }))));
   })), canAdd && (!maxItems || items.length < maxItems) && /*#__PURE__*/React__default.createElement(Box, {
     padding: items.length === 0 ? "0" : "1rem 0 0"
@@ -37196,7 +37229,8 @@ var EmailForm = function EmailForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isEmail: true
+    isEmail: true,
+    autocomplete: "email"
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
@@ -37248,7 +37282,8 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isEmail: true
+    isEmail: true,
+    autocomplete: "email"
   });
 };
 
@@ -38910,7 +38945,8 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    disabled: namesDisabled
+    disabled: namesDisabled,
+    autocomplete: "given-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Last Name",
     errorMessages: lastNameErrorMessages,
@@ -38920,7 +38956,8 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    disabled: namesDisabled
+    disabled: namesDisabled,
+    autocomplete: "family-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email",
     errorMessages: emailErrorMessages,
@@ -38930,7 +38967,8 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    disabled: emailDisabled
+    disabled: emailDisabled,
+    autocomplete: "email"
   }), formType === PROFILE && /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: {},
@@ -39074,7 +39112,8 @@ var LoginForm = function LoginForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isEmail: true
+    isEmail: true,
+    autocomplete: "email"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: passwordErrorMessages,
@@ -39084,7 +39123,8 @@ var LoginForm = function LoginForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "current-password"
   }));
 };
 
@@ -41999,7 +42039,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
     errorMessages: routingNumberErrors,
@@ -42196,7 +42237,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "cc-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
     errorMessages: creditCardNumberErrors,
@@ -42207,7 +42249,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true
+    isNum: true,
+    autocomplete: "cc-number"
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
     childGap: isMobile ? "0rem" : "1rem"
@@ -42221,7 +42264,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true
+    isNum: true,
+    autocomplete: "cc-exp"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
     errorMessages: cvvErrors,
@@ -42232,7 +42276,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     background: checkCardBrand(fields.creditCardNumber.rawValue) == "AMEX" ? "/AmexCVVHint.svg" : "/CVVHint.svg",
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "cc-csc"
   })), !hideZipCode && /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -42246,7 +42291,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "billing postal-code"
   })), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "credit card checkbox",
     title: "Save credit card to wallet",
@@ -42271,7 +42317,7 @@ var formConfig$8 = {
   },
   expirationDate: {
     validators: [required(), hasLength(4, 4), isValidMonth(0), dateAfterToday("MMYY", "month", true)],
-    constraints: [onlyIntegers(), hasLength(0, 4)]
+    constraints: [onlyExpirationDate(), hasLength(0, 4)]
   },
   cvv: {
     validators: [required(), hasLength(3, 4)],
@@ -42330,7 +42376,8 @@ var PhoneForm = function PhoneForm(_ref) {
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true
+    isNum: true,
+    autocomplete: "tel"
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
@@ -42620,7 +42667,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "given-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Last name",
     errorMessages: lastNameErrorMessages,
@@ -42629,7 +42677,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "family-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email address",
     errorMessages: emailErrorMessages,
@@ -42640,7 +42689,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     type: "email",
-    isEmail: true
+    isEmail: true,
+    autocomplete: "email"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: passwordErrorMessages,
@@ -42650,7 +42700,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "new-password"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm password",
     errorMessages: confirmPasswordErrorMessages,
@@ -42660,7 +42711,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "new-password"
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0" : "0.5rem 0 0"
   }, /*#__PURE__*/React__default.createElement(PasswordRequirements, {
@@ -42780,7 +42832,8 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "new-password"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm password",
     errorMessages: confirmPasswordErrorMessages,
@@ -42790,7 +42843,8 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "new-password"
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(PasswordRequirements, {
@@ -43319,12 +43373,14 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
   };
   React.useEffect(function () {
     time.timer = setTimeout(function () {
-      periscopeDataRequestFailure();
+      if (!periscopeDataSuccess) {
+        periscopeDataRequestFailure();
+      }
     }, 10000);
     return function () {
       return clearTimeout(time.timer);
     };
-  }, []);
+  }, [periscopeDataSuccess]);
 
   var Dashboard = function Dashboard(height) {
     return function (url) {