@thecb/components 7.7.6 → 7.7.8-beta.0

package/dist/index.esm.js

@@ -12549,6 +12549,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"
 };
@@ -12562,6 +12563,7 @@ var color$1 = {
   ghost: "#15749D",
   tertiary: "#15749D",
   danger: "#FFFFFF",
+  dangerSecondary: "#D11053",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
 };
@@ -12575,6 +12577,7 @@ var fontSizeVariant = {
   ghost: "pL",
   tertiary: "pS",
   danger: "pS",
+  dangerSecondary: "pS",
   whiteSecondary: "pS",
   whitePrimary: "pS"
 };
@@ -12588,6 +12591,7 @@ var fontWeight = {
   ghost: "600",
   tertiary: "600",
   danger: "600",
+  dangerSecondary: "600",
   whiteSecondary: "600",
   whitePrimary: "600"
 };
@@ -12601,6 +12605,7 @@ var height = {
   ghost: "3rem",
   tertiary: "3rem",
   danger: "3rem",
+  dangerSecondary: "3rem",
   whiteSecondary: "3rem",
   whitePrimary: "auto"
 };
@@ -12614,6 +12619,7 @@ var minWidth = {
   ghost: "130px",
   tertiary: "130px",
   danger: "130px",
+  dangerSecondary: "157px",
   whiteSecondary: "160px",
   whitePrimary: "130px"
 };
@@ -12627,6 +12633,7 @@ var backgroundColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#ED125F",
+  dangerSecondary: "transparent",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
 };
@@ -12640,6 +12647,7 @@ var border = {
   ghost: "none",
   tertiary: "none",
   danger: "2px solid #ED125F",
+  dangerSecondary: "2px solid #D11053",
   whiteSecondary: "2px solid white",
   whitePrimary: "2px solid transparent"
 };
@@ -12653,6 +12661,7 @@ var hoverBackgroundColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#BA002C",
+  dangerSecondary: "transparent",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
 };
@@ -12666,6 +12675,7 @@ var hoverBorderColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#BA002C",
+  dangerSecondary: "#B10541",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
 };
@@ -12679,6 +12689,7 @@ var hoverColor = {
   ghost: "#116285",
   tertiary: "#116285",
   danger: "#FFFFFF",
+  dangerSecondary: "#B10541",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
 };
@@ -12692,6 +12703,7 @@ var activeBackgroundColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#870000",
+  dangerSecondary: "transparent",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
 };
@@ -12705,6 +12717,7 @@ var activeBorderColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#870000",
+  dangerSecondary: "#910029",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
 };
@@ -12718,6 +12731,7 @@ var activeColor = {
   ghost: "#0E506D",
   tertiary: "#0E506D",
   danger: "#FFFFFF",
+  dangerSecondary: "#910029",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
 };
@@ -12803,7 +12817,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"
@@ -12829,11 +12843,13 @@ var SpinnerIconWrapper$1 = styled(rotate$1).withConfig({
 })([""]);
 
 var Spinner = function Spinner(_ref) {
-  var isMobile = _ref.isMobile;
+  var color = _ref.color,
+      isMobile = _ref.isMobile;
   return /*#__PURE__*/React.createElement(SpinnerContainer$1, null, /*#__PURE__*/React.createElement(SpinnerIconWrapper$1, {
     initialPose: "fixed",
     pose: "rotate"
   }, /*#__PURE__*/React.createElement(SpinnerIcon, {
+    color: color,
     isMobile: isMobile
   })));
 };
@@ -12864,6 +12880,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,
@@ -12902,6 +12920,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
   }, rest), contentOverride ? children : /*#__PURE__*/React.createElement(Center, {
     intrinsic: true
   }, isLoading ? /*#__PURE__*/React.createElement(Spinner, {
+    color: loadingColor,
     isMobile: isMobile
   }) : /*#__PURE__*/React.createElement(Text$1, {
     weight: themeValues.fontWeight,
@@ -24435,6 +24454,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 = 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;
+  useEffect$1(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({
@@ -24443,7 +24505,8 @@ var index$4 = /*#__PURE__*/Object.freeze({
   general: general,
   theme: themeUtils,
   useFocusInvalidInput: useFocusInvalidInput,
-  useOutsideClick: useOutsideClickHook
+  useOutsideClick: useOutsideClickHook,
+  useCheckElementsInViewport: useCheckElementsInViewport
 });
 
 var hoverColor$4 = "#116285";