@thecb/components 7.7.6 → 7.7.8-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.7.6",
+  "version": "7.7.8-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -36,10 +36,10 @@ const SpinnerContainer = styled.div`
 
 const SpinnerIconWrapper = styled(rotate)``;
 
-const Spinner = ({ isMobile }) => (
+const Spinner = ({ color, isMobile }) => (
   <SpinnerContainer>
     <SpinnerIconWrapper initialPose="fixed" pose="rotate">
-      <SpinnerIcon isMobile={isMobile} />
+      <SpinnerIcon color={color} isMobile={isMobile} />
     </SpinnerIconWrapper>
   </SpinnerContainer>
 );
@@ -66,6 +66,7 @@ const ButtonWithAction = ({
   text,
   textWrap = false,
   isLoading = false,
+  loadingColor = "white",
   dataQa = null,
   textExtraStyles,
   contentOverride = false,
@@ -140,7 +141,7 @@ const ButtonWithAction = ({
       ) : (
         <Center intrinsic>
           {isLoading ? (
-            <Spinner isMobile={isMobile} />
+            <Spinner color={loadingColor} isMobile={isMobile} />
           ) : (
             <Text
               weight={themeValues.fontWeight}

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -13,6 +13,7 @@ const 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"
 };
@@ -27,6 +28,7 @@ const color = {
   ghost: "#15749D",
   tertiary: "#15749D",
   danger: "#FFFFFF",
+  dangerSecondary: "#D11053",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
 };
@@ -41,6 +43,7 @@ const fontSizeVariant = {
   ghost: "pL",
   tertiary: "pS",
   danger: "pS",
+  dangerSecondary: "pS",
   whiteSecondary: "pS",
   whitePrimary: "pS"
 };
@@ -55,6 +58,7 @@ const fontWeight = {
   ghost: "600",
   tertiary: "600",
   danger: "600",
+  dangerSecondary: "600",
   whiteSecondary: "600",
   whitePrimary: "600"
 };
@@ -69,6 +73,7 @@ const height = {
   ghost: "3rem",
   tertiary: "3rem",
   danger: "3rem",
+  dangerSecondary: "3rem",
   whiteSecondary: "3rem",
   whitePrimary: "auto"
 };
@@ -83,6 +88,7 @@ const minWidth = {
   ghost: "130px",
   tertiary: "130px",
   danger: "130px",
+  dangerSecondary: "157px",
   whiteSecondary: "160px",
   whitePrimary: "130px"
 };
@@ -97,6 +103,7 @@ const backgroundColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#ED125F",
+  dangerSecondary: "transparent",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
 };
@@ -111,6 +118,7 @@ const border = {
   ghost: "none",
   tertiary: "none",
   danger: "2px solid #ED125F",
+  dangerSecondary: "2px solid #D11053",
   whiteSecondary: "2px solid white",
   whitePrimary: "2px solid transparent"
 };
@@ -125,6 +133,7 @@ const hoverBackgroundColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#BA002C",
+  dangerSecondary: "transparent",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
 };
@@ -139,6 +148,7 @@ const hoverBorderColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#BA002C",
+  dangerSecondary: "#B10541",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
 };
@@ -153,6 +163,7 @@ const hoverColor = {
   ghost: "#116285",
   tertiary: "#116285",
   danger: "#FFFFFF",
+  dangerSecondary: "#B10541",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
 };
@@ -167,6 +178,7 @@ const activeBackgroundColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#870000",
+  dangerSecondary: "transparent",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
 };
@@ -181,6 +193,7 @@ const activeBorderColor = {
   ghost: "transparent",
   tertiary: "transparent",
   danger: "#870000",
+  dangerSecondary: "#910029",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
 };
@@ -195,6 +208,7 @@ const activeColor = {
   ghost: "#0E506D",
   tertiary: "#0E506D",
   danger: "#FFFFFF",
+  dangerSecondary: "#910029",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
 };

package/src/util/index.js

@@ -3,5 +3,13 @@ import * as general from "./general";
 import * as theme from "./themeUtils";
 import useFocusInvalidInput from "./focusFirstInvalidInputHook";
 import useOutsideClick from "./useOutsideClick";
+import useCheckElementsInViewport from "./useCheckElementsInViewport";
 
-export { formats, general, theme, useFocusInvalidInput, useOutsideClick };
+export {
+  formats,
+  general,
+  theme,
+  useFocusInvalidInput,
+  useOutsideClick,
+  useCheckElementsInViewport
+};

package/src/util/useCheckElementsInViewport.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+
+/*
+  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
+*/
+
+const useCheckElementsInViewport = (elements = []) => {
+  const [elementsVisible, setElementsVisible] = useState(false);
+  const viewportWidth =
+    window.innerWidth || document.documentElement.clientWidth;
+  const viewportHeight =
+    window.innerHeight || document.documentElement.clientHeight;
+
+  useEffect(() => {
+    elements.forEach(element => {
+      const domEl = document.querySelector(element);
+      const boundingBox = domEl.getBoundingClientRect();
+
+      if (
+        boundingBox.top >= 0 &&
+        boundingBox.left >= 0 &&
+        boundingBox.right <= viewportWidth &&
+        boundingBox.bottom <= viewportHeight
+      ) {
+        setElementsVisible(true);
+      }
+    });
+  }, [elements]);
+
+  return elementsVisible;
+};
+
+export default useCheckElementsInViewport;