@thecb/components 7.7.6 → 7.7.8-beta.0

package/dist/index.cjs.js

@@ -12557,6 +12557,7 @@ var padding = {
   tertiary: "0.75rem 1.5rem",
   ghost: "0.65rem 0",
   danger: "0.75rem 1.5rem",
+  dangerSecondary: "0.75rem 1.5rem",
   whiteSecondary: "0.75rem 2rem",
   whitePrimary: "1.125rem 0.75rem"
 };
@@ -12570,6 +12571,7 @@ var color$1 = {
   ghost: "#15749D",
   tertiary: "#15749D",
   danger: "#FFFFFF",
+  dangerSecondary: "#D11053",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
 };
@@ -12583,6 +12585,7 @@ var fontSizeVariant = {
   ghost: "pL",
   tertiary: "pS",
   danger: "pS",
+  dangerSecondary: "pS",
   whiteSecondary: "pS",
   whitePrimary: "pS"
 };
@@ -12596,6 +12599,7 @@ var fontWeight = {
   ghost: "600",
   tertiary: "600",
   danger: "600",
+  dangerSecondary: "600",
   whiteSecondary: "600",
   whitePrimary: "600"
 };
@@ -12609,6 +12613,7 @@ var height = {
   ghost: "3rem",
   tertiary: "3rem",
   danger: "3rem",
+  dangerSecondary: "3rem",
   whiteSecondary: "3rem",
   whitePrimary: "auto"
 };
@@ -12622,6 +12627,7 @@ var minWidth = {
   ghost: "130px",
   tertiary: "130px",
   danger: "130px",
+  dangerSecondary: "157px",
   whiteSecondary: "160px",
   whitePrimary: "130px"
 };
@@ -12635,6 +12641,7 @@ var backgroundColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#ED125F",
+  dangerSecondary: "transparent",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
 };
@@ -12648,6 +12655,7 @@ var border = {
   ghost: "none",
   tertiary: "none",
   danger: "2px solid #ED125F",
+  dangerSecondary: "2px solid #D11053",
   whiteSecondary: "2px solid white",
   whitePrimary: "2px solid transparent"
 };
@@ -12661,6 +12669,7 @@ var hoverBackgroundColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#BA002C",
+  dangerSecondary: "transparent",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
 };
@@ -12674,6 +12683,7 @@ var hoverBorderColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#BA002C",
+  dangerSecondary: "#B10541",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
 };
@@ -12687,6 +12697,7 @@ var hoverColor = {
   ghost: "#116285",
   tertiary: "#116285",
   danger: "#FFFFFF",
+  dangerSecondary: "#B10541",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
 };
@@ -12700,6 +12711,7 @@ var activeBackgroundColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#870000",
+  dangerSecondary: "transparent",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
 };
@@ -12713,6 +12725,7 @@ var activeBorderColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#870000",
+  dangerSecondary: "#910029",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
 };
@@ -12726,6 +12739,7 @@ var activeColor = {
   ghost: "#0E506D",
   tertiary: "#0E506D",
   danger: "#FFFFFF",
+  dangerSecondary: "#910029",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
 };
@@ -12811,7 +12825,7 @@ var SpinnerIcon = function SpinnerIcon(_ref3) {
   }))))));
 };
 
-var _excluded$h = ["action", "variant", "text", "textWrap", "isLoading", "dataQa", "textExtraStyles", "contentOverride", "extraStyles", "tabIndex", "children", "extraDisabledStyles"];
+var _excluded$h = ["action", "variant", "text", "textWrap", "isLoading", "loadingColor", "dataQa", "textExtraStyles", "contentOverride", "extraStyles", "tabIndex", "children", "extraDisabledStyles"];
 var rotate$1 = posed.div({
   fixed: {
     rotate: "0deg"
@@ -12837,11 +12851,13 @@ var SpinnerIconWrapper$1 = styled__default(rotate$1).withConfig({
 })([""]);
 
 var Spinner = function Spinner(_ref) {
-  var isMobile = _ref.isMobile;
+  var color = _ref.color,
+      isMobile = _ref.isMobile;
   return /*#__PURE__*/React__default.createElement(SpinnerContainer$1, null, /*#__PURE__*/React__default.createElement(SpinnerIconWrapper$1, {
     initialPose: "fixed",
     pose: "rotate"
   }, /*#__PURE__*/React__default.createElement(SpinnerIcon, {
+    color: color,
     isMobile: isMobile
   })));
 };
@@ -12872,6 +12888,8 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
       textWrap = _ref2$textWrap === void 0 ? false : _ref2$textWrap,
       _ref2$isLoading = _ref2.isLoading,
       isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
+      _ref2$loadingColor = _ref2.loadingColor,
+      loadingColor = _ref2$loadingColor === void 0 ? "white" : _ref2$loadingColor,
       _ref2$dataQa = _ref2.dataQa,
       dataQa = _ref2$dataQa === void 0 ? null : _ref2$dataQa,
       textExtraStyles = _ref2.textExtraStyles,
@@ -12910,6 +12928,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
   }, rest), contentOverride ? children : /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
+    color: loadingColor,
     isMobile: isMobile
   }) : /*#__PURE__*/React__default.createElement(Text$1, {
     weight: themeValues.fontWeight,
@@ -24443,6 +24462,49 @@ var useOutsideClickHook = function useOutsideClickHook(handler) {
   return ref;
 };
 
+/*
+  Hook that determines whether every element in an array of DOM selectors is fully present
+  within the user's current viewport.
+
+  (elements: Array<String>) => Boolean;
+
+  Takes an array of strings that correspond to DOM selectors. Examples:
+  "#submit-button", ".module-small", "h2.alert-title"
+
+  The document query function will return the *first* element in the document that matches
+  the string given.
+
+  A combination string of multiple selectors can also be provided, e.g.:
+  ".alert-info, .alert-warning, .alert-error"
+
+  This will return the first element that matches *any* of the provided selectors
+
+  If every element in the array is fully within the viewport, function returns true
+*/
+
+var useCheckElementsInViewport = function useCheckElementsInViewport() {
+  var elements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      elementsVisible = _useState2[0],
+      setElementsVisible = _useState2[1];
+
+  var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+  React.useEffect(function () {
+    elements.forEach(function (element) {
+      var domEl = document.querySelector(element);
+      var boundingBox = domEl.getBoundingClientRect();
+
+      if (boundingBox.top >= 0 && boundingBox.left >= 0 && boundingBox.right <= viewportWidth && boundingBox.bottom <= viewportHeight) {
+        setElementsVisible(true);
+      }
+    });
+  }, [elements]);
+  return elementsVisible;
+};
+
 
 
 var index$4 = /*#__PURE__*/Object.freeze({
@@ -24451,7 +24513,8 @@ var index$4 = /*#__PURE__*/Object.freeze({
   general: general,
   theme: themeUtils,
   useFocusInvalidInput: useFocusInvalidInput,
-  useOutsideClick: useOutsideClickHook
+  useOutsideClick: useOutsideClickHook,
+  useCheckElementsInViewport: useCheckElementsInViewport
 });
 
 var hoverColor$4 = "#116285";