@thecb/components 7.7.8-beta.9 → 7.8.0

package/package.json

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

package/src/components/atoms/image-box/ImageBox.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Box } from "../layouts";
+import { Image } from "./ImageBox.styled";
+
+const ImageBox = ({
+  image,
+  minHeight,
+  minWidth,
+  maxWidth,
+  borderRadius,
+  imgWidth,
+  imgHeight,
+  objectFit,
+  objectPosition
+}) => {
+  const boxMaxWidth = maxWidth || minWidth;
+  const { url = "", altText = "" } = image;
+
+  return (
+    <Box
+      padding="0"
+      minWidth={minWidth}
+      minHeight={minHeight}
+      maxWidth={boxMaxWidth}
+      borderRadius={borderRadius}
+      extraStyles={`height: ${minHeight};`}
+    >
+      <Image
+        width={imgWidth}
+        height={imgHeight}
+        objectFit={objectFit}
+        objectPosition={objectPosition}
+        src={url}
+        alt={altText}
+      />
+    </Box>
+  );
+};
+
+export default ImageBox;

package/src/components/atoms/image-box/ImageBox.styled.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const Image = styled.img`
+  width: ${({ width = "100%" }) => width};
+  height: ${({ height = "100%" }) => height};
+  object-fit: ${({ objectFit = "cover" }) => objectFit};
+  object-position: ${({ objectPosition = "center" }) => objectPosition};
+`;

package/src/components/atoms/image-box/index.js

@@ -0,0 +1,3 @@
+import ImageBox from "./ImageBox";
+
+export default ImageBox;

package/src/components/atoms/index.js

@@ -21,6 +21,7 @@ export { default as FormattedCreditCard } from "./formatted-credit-card";
 export { default as HamburgerButton } from "./hamburger-button";
 export { default as Heading } from "./heading";
 export * from "./icons";
+export { default as ImageBox } from "./image-box";
 export { default as Jumbo } from "./jumbo";
 export { default as LabeledAmount } from "./labeled-amount";
 export * from "./layouts";

package/src/components/molecules/highlight-tab-row/HighlightTabRow.js

@@ -67,7 +67,6 @@ const HighlightTabRow = ({
                 color={themeValues.textColor}
                 weight={FONT_WEIGHT_SEMIBOLD}
                 extraStyles="display: block; white-space: nowrap;"
-                id={`${t?.toLowerCase()?.replace(/\s/g, "-")}-tab-text`}
               >
                 {t}
               </Text>

package/src/components/molecules/module/Module.js

@@ -1,8 +1,9 @@
 import React, { Fragment, memo } from "react";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./Module.theme";
+import Heading from "../../atoms/heading";
 import Title from "../../atoms/title";
-import { Box, Cluster } from "../../atoms/layouts";
+import { Box } from "../../atoms/layouts";
 
 /*
   New (01/22) - updated <Module /> to use <Title /> atom
@@ -24,8 +25,6 @@ const Module = ({
   variant = "default",
   fontSize,
   as,
-  titleID = "",
-  rightTitleContent,
   children
 }) => {
   const themedFontSize =
@@ -38,28 +37,20 @@ const Module = ({
   const themedElemType =
     variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
   const computedElemType = as || themedElemType;
-  const headingText = (
-    <Title
-      weight={themeValues.fontWeight}
-      color={themeValues.fontColor}
-      margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
-      textAlign={themeValues.textAlign}
-      as={computedElemType}
-      extraStyles={`font-size: ${computedFontSize};`}
-      id={titleID}
-    >
-      {heading}
-    </Title>
-  );
 
   return (
     <Fragment>
-      {heading && !rightTitleContent && headingText}
-      {heading && rightTitleContent && (
-        <Cluster justify="center" align="space-between">
-          {headingText}
-          {rightTitleContent}
-        </Cluster>
+      {heading && (
+        <Title
+          weight={themeValues.fontWeight}
+          color={themeValues.fontColor}
+          margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
+          textAlign={themeValues.textAlign}
+          as={computedElemType}
+          extraStyles={`font-size: ${computedFontSize};`}
+        >
+          {heading}
+        </Title>
       )}
       <Box padding={`0 0 ${spacingBottom}`}>
         <Box

package/src/util/index.js

@@ -3,13 +3,5 @@ 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,
-  useCheckElementsInViewport
-};
+export { formats, general, theme, useFocusInvalidInput, useOutsideClick };

package/src/util/useCheckElementsInViewport.js

@@ -1,78 +0,0 @@
-import { useEffect, useLayoutEffect, 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 as an item in the array, e.g.:
-  ".alert-info, .alert-warning, .alert-error". This will return the first element that matches *any* of the provided selectors.
-
-  If the element is present in the DOM (domEL !== null), the function examines the element's bounding box
-  to determine if the element is within the viewport. If any portion of the element is outside of
-  the viewport, the function returns false.
-
-  If all elements that exist are within the viewport, the function returns true.
-*/
-
-const useCheckElementsInViewport = (elements = []) => {
-  let elementsVisible = true;
-  let timeoutID = false;
-  let delay = 250;
-  const [viewportWidth, setViewportWidth] = useState(
-    window.innerWidth || document.documentElement.clientWidth
-  );
-  const [viewportHeight, setViewportHeight] = useState(
-    window.innerHeight || document.documentElement.clientHeight
-  );
-  const updateViewportValues = () => {
-    clearTimeout(timeoutID);
-
-    timeoutID = setTimeout(() => {
-      setViewportWidth(
-        window.innerWidth || document.documentElement.clientWidth
-      );
-      setViewportHeight(
-        window.innerHeight || document.documentElement.clientHeight
-      );
-    }, delay);
-  };
-
-  useEffect(() => {
-    window.addEventListener("resize", updateViewportValues);
-
-    return () => {
-      clearTimeout(timeoutID);
-    };
-  }, []);
-
-  useLayoutEffect(() => {
-    elements.forEach(element => {
-      const domEl = document.querySelector(element);
-      const boundingBox = domEl?.getBoundingClientRect();
-
-      // Skip any elements not in the DOM
-      if (domEl !== null) {
-        if (
-          boundingBox.top < 0 ||
-          boundingBox.left < 0 ||
-          boundingBox.right > viewportWidth ||
-          boundingBox.bottom > viewportHeight
-        ) {
-          elementsVisible = false;
-        }
-      }
-    });
-  }, [elements, viewportWidth, viewportHeight]);
-
-  return elementsVisible;
-};
-
-export default useCheckElementsInViewport;