@thecb/components 6.1.0-beta.0 → 6.1.0-beta.4

package/dist/index.cjs.js

@@ -4871,7 +4871,8 @@ var BOSTON_BLUE = "#357fb8";
 var INFO_BLUE = "#E4F4FD";
 var HOVER_LIGHT_BLUE = "#EFFAFF";
 var MATISSE_BLUE = "#15749D";
-var ROYAL_BLUE = "#3181E3"; // GREEN
+var ROYAL_BLUE = "#3181E3";
+var ASTRAL_BLUE = "#3176AA"; // GREEN
 
 var FOREST_GREEN = "#19b03F";
 var MEADOW_GREEN = "#16C98D";
@@ -4893,7 +4894,7 @@ var APRICOT_ORANGE = "#FFE8D8"; // RED
 var RED = "#FF0000";
 var CRIMSON_RED = "#ED1C24";
 var THUNDERBIRD_RED = "#C3191F";
-var RAZZMATAZZ_RED = "#ED125F";
+var RAZZMATAZZ_RED = "#D11053";
 var FANTASY_RED = "#FCF4F4";
 var COSMOS_RED = "#FFD0D3";
 var BLUSH_RED = "#FFF0F5"; // Second level color constants
@@ -4977,6 +4978,7 @@ var colors = /*#__PURE__*/Object.freeze({
   HOVER_LIGHT_BLUE: HOVER_LIGHT_BLUE,
   MATISSE_BLUE: MATISSE_BLUE,
   ROYAL_BLUE: ROYAL_BLUE,
+  ASTRAL_BLUE: ASTRAL_BLUE,
   FOREST_GREEN: FOREST_GREEN,
   MEADOW_GREEN: MEADOW_GREEN,
   POLAR_GREEN: POLAR_GREEN,
@@ -6072,6 +6074,18 @@ var createUniqueId = function createUniqueId() {
   return "_" + Math.random().toString(36).substr(2, 9);
 };
 
+var createIdFromString = function createIdFromString(text, postscript) {
+  var unique = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+  if (text === undefined) {
+    return createUniqueId();
+  } else {
+    // "first name", undefined, false -> "first-name"
+    // "email address", "error message", false -> "email-address-error-message"
+    // "shopping cart", "order item", true -> "shopping-cart-order-item_2ahtlz608"
+    return "".concat(text === null || text === void 0 ? void 0 : text.replace(/\s+/g, "-")).concat(postscript ? "-".concat(postscript === null || postscript === void 0 ? void 0 : postscript.replace(/\s+/g, "-")) : "").concat(unique ? createUniqueId() : "");
+  }
+};
 var safeChildren = function safeChildren(children) {
   var replacement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var unsafeValues = [false, undefined, NaN, null];
@@ -6086,9 +6100,16 @@ var safeChildren = function safeChildren(children) {
 
   return unsafeValues.includes(children) ? replacement : children;
 };
-var generateClickHandler = function generateClickHandler(form, handleErrors, submitForm) {
+var generateClickHandler = function generateClickHandler(form, handleErrors, submitForm, resetErrors) {
   return function (e) {
     e.preventDefault();
+
+    if (resetErrors) {
+      // if provided, will reset error state tracker
+      // allows hooks that depend on error state to re-run
+      resetErrors();
+    }
+
     var formHasError = Object.values(form.fields).reduce(function (acc, curr) {
       return acc || curr.hasErrors;
     }, false);
@@ -6145,6 +6166,8 @@ var checkDeniedCards = function checkDeniedCards(name) {
 */
 
 var screenReaderOnlyStyle = "\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n";
+var inputPlaceholderTextStyle = "\n  ::-webkit-input-placeholder {\n    color: ".concat(CHARADE_GREY, ";\n  }\n  ::-moz-placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n  ::-ms-placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n  ::placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n");
+var inputDisabledStyle = "\n  color: #6e727e;\n  background-color: #f7f7f7;\n  pointer-events: none;\n";
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6152,12 +6175,15 @@ var general = /*#__PURE__*/Object.freeze({
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   formatPercent: formatPercent,
+  createIdFromString: createIdFromString,
   safeChildren: safeChildren,
   generateClickHandler: generateClickHandler,
   checkCardBrand: checkCardBrand,
   displayCardBrand: displayCardBrand,
   checkDeniedCards: checkDeniedCards,
-  screenReaderOnlyStyle: screenReaderOnlyStyle
+  screenReaderOnlyStyle: screenReaderOnlyStyle,
+  inputPlaceholderTextStyle: inputPlaceholderTextStyle,
+  inputDisabledStyle: inputDisabledStyle
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"];
@@ -19032,13 +19058,13 @@ var disabledCheckedStyles = {
   "default": "\n  background: #6d717e;\n  border: 1px solid #6d717e;\n"
 };
 var disabledStyles = {
-  "default": "\n  background: ".concat(SEASHELL_WHITE, ";\n  border: 1px solid ").concat(GHOST_GREY, ";\n")
+  "default": "\n  background: ".concat(SEASHELL_WHITE, ";\n  border: 1px solid ").concat(STORM_GREY, ";\n")
 };
 var checkedStyles = {
   "default": "\n  background: ".concat(MATISSE_BLUE, ";    \n  border: 1px solid ").concat(MATISSE_BLUE, ";\n")
 };
 var defaultStyles = {
-  "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(GHOST_GREY, ";\n")
+  "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(STORM_GREY, ";\n")
 };
 var fallbackValues$c = {
   backgroundColor: backgroundColor$2,
@@ -20714,6 +20740,7 @@ var Dropdown = function Dropdown(_ref8) {
       _ref8$autoEraseTypeAh = _ref8.autoEraseTypeAhead,
       autoEraseTypeAhead = _ref8$autoEraseTypeAh === void 0 ? true : _ref8$autoEraseTypeAh,
       ariaLabelledby = _ref8.ariaLabelledby,
+      ariaDescribedby = _ref8.ariaDescribedby,
       _ref8$autocompleteVal = _ref8.autocompleteValue,
       autocompleteValue = _ref8$autocompleteVal === void 0 ? "" : _ref8$autocompleteVal,
       _ref8$smoothScroll = _ref8.smoothScroll,
@@ -20963,13 +20990,14 @@ var Dropdown = function Dropdown(_ref8) {
     "aria-owns": "".concat(ariaLabelledby, "_listbox"),
     "aria-haspopup": "listbox",
     "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
     "aria-expanded": isOpen,
     autocomplete: autocompleteValue,
     background: isOpen ? themeValues.hoverColor : WHITE,
     borderRadius: "2px",
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
-    extraStyles: disabled && "color: #6e727e;\n            background-color: #f7f7f7;\n            pointer-events: none;",
+    extraStyles: disabled ? "".concat(inputPlaceholderTextStyle).concat(inputDisabledStyle) : inputPlaceholderTextStyle,
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     isOpen: isOpen,
     minHeight: "48px",
@@ -21179,9 +21207,10 @@ var FormSelect = function FormSelect(_ref) {
     color: themeValues.labelColor,
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
-    id: labelTextWhenNoError.replace(/\s+/g, "-")
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    ariaLabelledby: labelTextWhenNoError.replace(/\s+/g, "-"),
+    ariaLabelledby: createIdFromString(labelTextWhenNoError),
+    ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
@@ -21208,7 +21237,8 @@ var FormSelect = function FormSelect(_ref) {
     color: ERROR_COLOR,
     variant: "pXS",
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n                font-family: Public Sans;\n                &::first-letter {\n                  text-transform: uppercase;\n                }"
+    extraStyles: "word-break: break-word;\n                font-family: Public Sans;\n                &::first-letter {\n                  text-transform: uppercase;\n                }",
+    id: createIdFromString(labelTextWhenNoError, "error message")
   }, errorMessages[field.errors[0]]) : /*#__PURE__*/React__default.createElement(Text$1, {
     extraStyles: "height: ".concat(themeValues.lineHeight, ";")
   })));
@@ -22483,8 +22513,8 @@ var labelColor$1 = {
   disabled: "".concat(CHARADE_GREY)
 };
 var borderColor$1 = {
-  "default": "".concat(GREY_CHATEAU),
-  disabled: "".concat(GREY_CHATEAU)
+  "default": "".concat(STORM_GREY),
+  disabled: "".concat(STORM_GREY)
 };
 var lineHeight$2 = {
   "default": "1rem",
@@ -22631,7 +22661,7 @@ var FormInput = function FormInput(_ref15) {
     variant: "pS",
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }",
-    id: labelTextWhenNoError.replace(/\s+/g, "-")
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError), /*#__PURE__*/React__default.createElement(Text$1, {
     color: themeValues.linkColor,
     variant: "pS",
@@ -22648,7 +22678,7 @@ var FormInput = function FormInput(_ref15) {
     variant: "pS",
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
-    id: labelTextWhenNoError.replace(/\s+/g, "-")
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     color: themeValues.linkColor,
@@ -22668,7 +22698,9 @@ var FormInput = function FormInput(_ref15) {
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, formatter ? /*#__PURE__*/React__default.createElement(FormattedInputField, _extends({
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
+    "aria-labelledby": createIdFromString(labelTextWhenNoError),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
+    "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(e) {
       return fieldActions.set(e);
     },
@@ -22684,7 +22716,9 @@ var FormInput = function FormInput(_ref15) {
     $customHeight: customHeight,
     $extraStyles: extraStyles
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
+    "aria-labelledby": createIdFromString(labelTextWhenNoError),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
+    "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(e) {
       return fieldActions.set(e.target.value);
     },
@@ -22706,7 +22740,8 @@ var FormInput = function FormInput(_ref15) {
     color: ERROR_COLOR,
     variant: "pXS",
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }"
+    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
+    id: createIdFromString(labelTextWhenNoError, "error message")
   }, errorMessages[field.errors[0]]) : /*#__PURE__*/React__default.createElement(Text$1, {
     extraStyles: "height: ".concat(themeValues.lineHeight, ";")
   }), !isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
@@ -40242,6 +40277,8 @@ var getApplicationNode = function getApplicationNode() {
 var Modal$1 = function Modal(_ref) {
   var hideModal = _ref.hideModal,
       continueAction = _ref.continueAction,
+      _ref$isContinueAction = _ref.isContinueActionDisabled,
+      isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
       cancelAction = _ref.cancelAction,
       modalOpen = _ref.modalOpen,
       modalHeaderText = _ref.modalHeaderText,
@@ -40260,6 +40297,8 @@ var Modal$1 = function Modal(_ref) {
       defaultWrapper = _ref$defaultWrapper === void 0 ? true : _ref$defaultWrapper,
       _ref$onlyCloseButton = _ref.onlyCloseButton,
       onlyCloseButton = _ref$onlyCloseButton === void 0 ? false : _ref$onlyCloseButton,
+      _ref$noButtons = _ref.noButtons,
+      noButtons = _ref$noButtons === void 0 ? false : _ref$noButtons,
       maxHeight = _ref.maxHeight,
       _ref$underlayClickExi = _ref.underlayClickExits,
       underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
@@ -40320,7 +40359,7 @@ var Modal$1 = function Modal(_ref) {
     justify: "flex-end",
     align: "center",
     childGap: "0rem"
-  }, !onlyCloseButton ? /*#__PURE__*/React__default.createElement(React.Fragment, null, isMobile ? /*#__PURE__*/React__default.createElement(Stack, {
+  }, !noButtons && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !onlyCloseButton ? /*#__PURE__*/React__default.createElement(React.Fragment, null, isMobile ? /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "1rem",
     direction: "row"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -40342,6 +40381,7 @@ var Modal$1 = function Modal(_ref) {
     text: continueButtonText,
     dataQa: continueButtonText,
     isLoading: isLoading,
+    disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
     className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Stack, {
@@ -40361,6 +40401,7 @@ var Modal$1 = function Modal(_ref) {
     text: continueButtonText,
     dataQa: continueButtonText,
     isLoading: isLoading,
+    disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
     className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Box, {
@@ -40372,7 +40413,7 @@ var Modal$1 = function Modal(_ref) {
     dataQa: "Close",
     extraStyles: buttonExtraStyles,
     className: "modal-cancel-button"
-  })))))))), children);
+  }))))))))), children);
 };
 
 var fontSize$9 = {
@@ -40645,7 +40686,7 @@ var TitleModule = function TitleModule(_ref) {
 var color$a = "#15749D";
 var hoverColor$4 = "#116285";
 var activeColor$5 = "#0E506D";
-var linkColor$3 = "#357fb8";
+var linkColor$3 = "#3176AA";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
 var fallbackValues$z = {
@@ -41826,7 +41867,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
 var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$A, "default");
 
 var linkColor$4 = {
-  "default": "#357fb8"
+  "default": "#3176AA"
 };
 var fontSize$a = {
   "default": "1rem"
@@ -42980,7 +43021,7 @@ var backgroundColor$9 = {
   footer: "#ffffff"
 };
 var linkColor$5 = {
-  "default": "#357fb8",
+  "default": "#3176AA",
   footer: "#ffffff"
 };
 var border$3 = {
@@ -43040,7 +43081,8 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       borderRadius: "3px",
       extraStyles: "overflow: scroll; max-height: 20rem;"
     }, /*#__PURE__*/React__default.createElement(Text$1, {
-      variant: "p"
+      variant: "p",
+      extraStyles: "& a { text-decoration: underline; }"
     }, terms)),
     defaultWrapper: false,
     onlyCloseButton: !acceptText,
@@ -43284,6 +43326,9 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
     time.timer = setTimeout(function () {
       periscopeDataRequestFailure();
     }, 10000);
+    return function () {
+      return clearTimeout(time.timer);
+    };
   }, []);
 
   var Dashboard = function Dashboard(height) {
@@ -43304,8 +43349,11 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
   var validatePeriscope = function validatePeriscope(message) {
     if (isValidMessage(message)) {
       setHeight(message.data.dashboard_height + 100);
-      clearTimeout(time.timer);
-      periscopeDataRequestSuccess();
+
+      if (!periscopeDataSuccess) {
+        clearTimeout(time.timer);
+        periscopeDataRequestSuccess();
+      }
     }
   };
 
@@ -43614,13 +43662,33 @@ var index$4 = /*#__PURE__*/Object.freeze({
   fontWeights: style_constants
 });
 
+var useFocusInvalidInput = function useFocusInvalidInput() {
+  var showErrors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  console.log("hey show errors", showErrors); // Only move focus when "showErrors" is true
+  // "showErrors" is managed by container page of form
+  // typically set to "true" on attempted form submission, if errors exist
+
+  React.useEffect(function () {
+    console.log("inside use effect show errors", showErrors);
+
+    if (showErrors) {
+      var _inputsWithErrors$;
+
+      var inputsWithErrors = document.querySelectorAll("input[aria-invalid=true]");
+      console.log("inputs with errors is", inputsWithErrors);
+      inputsWithErrors === null || inputsWithErrors === void 0 ? void 0 : (_inputsWithErrors$ = inputsWithErrors[0]) === null || _inputsWithErrors$ === void 0 ? void 0 : _inputsWithErrors$.focus();
+    }
+  }, [showErrors]);
+};
+
 
 
 var index$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   formats: formats,
   general: general,
-  theme: themeUtils
+  theme: themeUtils,
+  useFocusInvalidInput: useFocusInvalidInput
 });
 
 exports.AccountNumberImage = AccountNumberImage;