@thecb/components 11.2.6-beta.3 → 11.2.6-beta.5

package/package.json

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

package/src/components/atoms/title/Title.theme.js

@@ -1,7 +1,7 @@
 // Comments assume desktop base font size of 16px, mobile base font size of 14px
 
 const fontSize = {
-  hero: "3rem", // 48px
+  hero: "3.5rem", // 56px
   large: "1.5rem", // 24px (at base font size of 16px)
   small: "1.25rem" // 20px
 };
@@ -13,7 +13,7 @@ const fontFamily = {
 };
 
 const mobileFontSize = {
-  hero: "2.5rem", // 40px
+  hero: "3rem", // 48px
   large: "1.5rem", // 21px (at base font size of 14px)
   small: "1.2142rem" // 17px
 };

package/src/components/molecules/hero-image/HeroImage.js

@@ -5,51 +5,52 @@ import { themeComponent } from "../../../util/themeUtils";
 import Paragraph from "../../atoms/paragraph";
 import Title from "../../atoms/title";
 import { fallbackValues } from "./HeroImage.theme";
+import withWindowSize from "../../withWindowSize";
 import {
   FONT_WEIGHT_BOLD,
   FONT_WEIGHT_SEMIBOLD
 } from "../../../constants/style_constants";
 import * as Styled from "./HeroImage.styled";
-import { getNextHeading } from "../../../util/general";
 
 const HeroImage = ({
+  variant = "v1",
   themeValues,
   heading,
-  headingVariant = "h2",
   subheading,
   description,
   imageUrl,
-  variant = "v1",
   minWidth = "100%",
   minHeight = "auto",
+  contentMaxWidth = "76.5rem",
   contentSpacing = "0.5rem",
-  paddingOverride
+  headingVariant = "h1",
+  secondaryHeadingVariant = "h2",
+  extraStyles
 }) => {
   const { isMobile } = useContext(ThemeContext);
-  const secondaryHeadingVariant = getNextHeading(headingVariant);
+  const heroImageVariantStyles = Styled.getHeroImageVariantStyles({
+    variant,
+    imageUrl,
+    isMobile,
+    heroPrimaryColor: themeValues.heroPrimaryColor
+  });
 
   return (
     <>
       <Styled.HeroImageContainer
         minWidth={minWidth}
         minHeight={minHeight}
-        padding={paddingOverride ?? (isMobile ? "2rem" : "3rem 2rem")}
-        extraStyles={Styled.getHeroImageVariantStyles({
-          imageUrl,
-          isMobile,
-          variant,
-          heroPrimaryColor: themeValues.heroPrimaryColor,
-          heroSecondaryColor: themeValues.heroSecondaryColor
-        })}
+        padding={isMobile ? "2rem" : "3rem 2rem"}
+        extraStyles={`${heroImageVariantStyles} ${extraStyles}`}
       >
         <Center
-          maxWidth={"78.5rem"}
+          maxWidth={contentMaxWidth}
           width={"100%"}
           intrinsic
           extraStyles={`
             flex-flow: unset;
             justify-content: flex-start;
-            flex-wrap: nowrap;"
+            flex-wrap: nowrap;
           `}
         >
           <Stack
@@ -57,36 +58,42 @@ const HeroImage = ({
             extraStyles={`max-width: ${isMobile ? "100%" : "50%"};`}
           >
             <Stack childGap="0">
-              <Title
-                variant="hero"
-                as={headingVariant}
-                weight={FONT_WEIGHT_BOLD}
-                color={themeValues.heroTextColor}
-                extraStyles={`line-height: ${isMobile ? "125%" : "115%"};`}
-              >
-                {heading}
-              </Title>
-              <Title
-                variant={"large"}
-                as={secondaryHeadingVariant}
-                weight={FONT_WEIGHT_SEMIBOLD}
-                fontSize={isMobile ? "1.5rem" : "2rem"}
-                color={themeValues.heroTextColor}
-                extraStyles={`line-height: ${isMobile ? "150%" : "115%"};`}
-              >
-                {subheading}
-              </Title>
+              {heading && (
+                <Title
+                  variant="hero"
+                  as={headingVariant}
+                  weight={FONT_WEIGHT_BOLD}
+                  color={themeValues.heroTextColor}
+                  extraStyles={`line-height: ${isMobile ? "125%" : "115%"};`}
+                >
+                  {heading}
+                </Title>
+              )}
+              {subheading && (
+                <Title
+                  variant={"large"}
+                  as={secondaryHeadingVariant}
+                  weight={FONT_WEIGHT_SEMIBOLD}
+                  fontSize={isMobile ? "2rem" : "2.5rem"}
+                  color={themeValues.heroTextColor}
+                  extraStyles={`line-height: ${isMobile ? "150%" : "115%"};`}
+                >
+                  {subheading}
+                </Title>
+              )}
             </Stack>
-            <Box padding="0">
-              <Paragraph
-                color={themeValues.heroTextColor}
-                extraStyles={`line-height: ${
-                  isMobile ? "150%" : "115%"
-                }; ${!isMobile && `font-size: 1.125rem;`}`}
-              >
-                {description}
-              </Paragraph>
-            </Box>
+            {description && (
+              <Box padding="0">
+                <Paragraph
+                  color={themeValues.heroTextColor}
+                  extraStyles={`line-height: 150%; ${
+                    !isMobile ? "font-size: 1.25rem;" : ""
+                  }`}
+                >
+                  {description}
+                </Paragraph>
+              </Box>
+            )}
           </Stack>
         </Center>
       </Styled.HeroImageContainer>
@@ -94,4 +101,6 @@ const HeroImage = ({
   );
 };
 
-export default themeComponent(HeroImage, "HeroImage", fallbackValues);
+export default withWindowSize(
+  themeComponent(HeroImage, "HeroImage", fallbackValues)
+);

package/src/components/molecules/hero-image/HeroImage.stories.js

@@ -1,3 +1,4 @@
+import { head } from "ramda";
 import HeroImage from "./HeroImage";
 
 const meta = {
@@ -25,7 +26,14 @@ const meta = {
       description: "Heading variant for the hero image heading",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: undefined }
+        defaultValue: { summary: "h1" }
+      }
+    },
+    secondaryHeadingVariant: {
+      description: "secondary heading variant for the hero image heading",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h2" }
       }
     },
     subheading: {
@@ -43,17 +51,18 @@ const meta = {
       }
     },
     imageUrl: {
-      description: "Image URL for the hero image",
+      description:
+        "Image URL for the hero image. If excluded or contains an invalid URL, a solid background (primaryHeroColor) will display.",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: undefined }
       }
     },
-    paddingOverride: {
-      description: "padding override around the HeroImage content (desktop)",
+    extraStyles: {
+      description: "styles for the HeroImage container",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "0.5rem 1.5rem" }
+        defaultValue: { summary: undefined }
       }
     },
     minWidth: {
@@ -79,6 +88,20 @@ const meta = {
         type: { summary: "string" },
         defaultValue: { summary: "3rem" }
       }
+    },
+    contentMaxWidth: {
+      description: "Maximum width of the content inside the hero image",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "76.5rem" }
+      }
+    },
+    variant: {
+      description: "Variant of the hero image (v1 or v2)",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "v1" }
+      }
     }
   }
 };

package/src/components/molecules/hero-image/HeroImage.styled.js

@@ -1,16 +1,16 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { Box } from "../../atoms";
 import { rgba } from "polished";
 
 export const getHeroImageVariantStyles = ({
+  variant,
   imageUrl,
   isMobile,
-  variant,
-  heroPrimaryColor,
-  heroSecondaryColor
+  heroPrimaryColor
 }) => {
-  return css`
-    background: ${!isMobile
+  return `
+    background: ${
+      !isMobile
         ? `linear-gradient(
             90deg,
             ${heroPrimaryColor} 33%,
@@ -19,7 +19,8 @@ export const getHeroImageVariantStyles = ({
         : `linear-gradient(
             ${rgba(heroPrimaryColor, 0.8)},
             ${rgba(heroPrimaryColor, 0.8)}
-            )`},
+            )`
+    },
       url(${imageUrl}) center / cover no-repeat, ${heroPrimaryColor};
   `;
 };

package/src/util/general.js

@@ -213,15 +213,3 @@ export const adjustHexColor = (hex, percent, action) => {
     .slice(1)
     .padStart(6, "0")}`;
 };
-
-/**
- * Gets the next heading level in the sequence.
- *
- * @param {string} heading - The current heading level (e.g., "h1").
- * @returns {string} - The next heading level in the sequence.
- */
-const headingOrder = ["h1", "h2", "h3", "h4", "h5", "h6"];
-export const getNextHeading = heading => {
-  const index = headingOrder.indexOf(heading);
-  return index >= 0 && index < 5 ? headingOrder[index + 1] : headingOrder[5];
-};