@thecb/components 11.2.6 → 11.2.8-beta.0

package/package.json

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

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

@@ -2,7 +2,6 @@ import React, { useContext } from "react";
 import { ThemeContext } from "styled-components";
 import { Box, Center, Stack } from "../../atoms/layouts";
 import { themeComponent } from "../../../util/themeUtils";
-import Paragraph from "../../atoms/paragraph";
 import Title from "../../atoms/title";
 import { fallbackValues } from "./HeroImage.theme";
 import withWindowSize from "../../withWindowSize";
@@ -28,35 +27,42 @@ const HeroImage = ({
   extraStyles
 }) => {
   const { isMobile } = useContext(ThemeContext);
-  const heroImageVariantStyles = Styled.getHeroImageVariantStyles({
+  const gradientStyles = Styled.getHeroGradientStyles({
     variant,
-    imageUrl,
     isMobile,
-    heroPrimaryColor: themeValues.heroPrimaryColor
+    heroPrimaryColor: themeValues.heroPrimaryColor,
+    heroSecondaryColor: themeValues.heroSecondaryColor
   });
 
   return (
-    <>
-      <Styled.HeroImageContainer
-        minWidth={minWidth}
-        minHeight={minHeight}
-        padding={isMobile ? "2rem" : "3rem 2rem"}
-        extraStyles={`${heroImageVariantStyles} ${extraStyles}`}
+    <Box
+      minWidth={minWidth}
+      minHeight={minHeight}
+      padding={isMobile ? "2rem" : "3rem 2rem"}
+      extraStyles={`
+        display: flex;
+        background: ${gradientStyles},
+          url(${imageUrl}) center / cover no-repeat, ${themeValues.heroPrimaryColor};
+        ${extraStyles}
+      `}
+    >
+      <Center
+        maxWidth={contentMaxWidth}
+        width={"100%"}
+        intrinsic
+        extraStyles={`
+          flex-flow: unset;
+          justify-content: ${variant === "v2" ? "center" : "flex-start"};
+          flex-wrap: nowrap;
+        `}
       >
-        <Center
-          maxWidth={contentMaxWidth}
-          width={"100%"}
-          intrinsic
-          extraStyles={`
-            flex-flow: unset;
-            justify-content: flex-start;
-            flex-wrap: nowrap;
-          `}
+        <Stack
+          childGap={contentSpacing}
+          extraStyles={`max-width: ${
+            isMobile || variant === "v2" ? "100%" : "50%"
+          };`}
         >
-          <Stack
-            childGap={contentSpacing}
-            extraStyles={`max-width: ${isMobile ? "100%" : "50%"};`}
-          >
+          {variant === "v1" ? (
             <Stack childGap="0">
               {heading && (
                 <Title
@@ -82,22 +88,37 @@ const HeroImage = ({
                 </Title>
               )}
             </Stack>
-            {description && (
-              <Box padding="0">
-                <Paragraph
+          ) : (
+            <>
+              {heading && (
+                <Title
+                  variant="hero"
+                  as={headingVariant}
+                  weight={FONT_WEIGHT_BOLD}
                   color={themeValues.heroTextColor}
-                  extraStyles={`line-height: 150%; ${
-                    !isMobile ? "font-size: 1.25rem;" : ""
-                  }`}
+                  extraStyles={`text-align: center; line-height: ${
+                    isMobile ? "125%" : "115%"
+                  };`}
                 >
-                  {description}
-                </Paragraph>
-              </Box>
-            )}
-          </Stack>
-        </Center>
-      </Styled.HeroImageContainer>
-    </>
+                  {heading}
+                </Title>
+              )}
+            </>
+          )}
+          {description && (
+            <Box padding="0">
+              <Styled.HeroDescription
+                color={themeValues.heroTextColor}
+                isMobile={isMobile}
+                variant={variant}
+              >
+                {description}
+              </Styled.HeroDescription>
+            </Box>
+          )}
+        </Stack>
+      </Center>
+    </Box>
   );
 };
 

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

@@ -118,7 +118,7 @@ export const DesktopV1 = {
   }
 };
 
-export const NoImage = {
+export const NoImageV1 = {
   args: {
     variant: "v1",
     minWidth: "1000px",
@@ -126,3 +126,24 @@ export const NoImage = {
     imageUrl: undefined
   }
 };
+
+export const DesktopV2 = {
+  args: {
+    heading: "Cityville Payment Center",
+    variant: "v2",
+    minWidth: "1000px",
+    minHeight: "274px",
+    imageUrl:
+      "https://cb-public-assets.s3-us-west-2.amazonaws.com/cityville/hero.jpg"
+  }
+};
+
+export const NoImageV2 = {
+  args: {
+    heading: "Cityville Payment Center",
+    variant: "v2",
+    minWidth: "1000px",
+    minHeight: "274px",
+    imageUrl: undefined
+  }
+};

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

@@ -1,30 +1,41 @@
+import React from "react";
 import styled from "styled-components";
-import { Box } from "../../atoms";
+import { Paragraph } from "../../atoms";
 import { rgba } from "polished";
 
-export const getHeroImageVariantStyles = ({
+export const getHeroGradientStyles = ({
   variant,
-  imageUrl,
   isMobile,
-  heroPrimaryColor
+  heroPrimaryColor,
+  heroSecondaryColor
 }) => {
-  return `
-    background: ${
-      !isMobile
-        ? `linear-gradient(
-            90deg,
-            ${heroPrimaryColor} 33%,
-            transparent 100%
-            )`
-        : `linear-gradient(
-            ${rgba(heroPrimaryColor, 0.8)},
-            ${rgba(heroPrimaryColor, 0.8)}
-            )`
-    },
-      url(${imageUrl}) center / cover no-repeat, ${heroPrimaryColor};
-  `;
+  const v1Gradient = `linear-gradient(
+    90deg,
+    ${heroPrimaryColor} 33%,
+    transparent 100%
+  )`;
+  const v1GradientMobile = `linear-gradient(
+    ${rgba(heroPrimaryColor, 0.8)},
+    ${rgba(heroPrimaryColor, 0.8)}
+  )`;
+  const v2Gradient = `linear-gradient(
+    90deg,
+    ${rgba(heroPrimaryColor, 0.8)} 0%,
+    ${rgba(heroSecondaryColor, 0.8)} 100%
+  )`;
+
+  return {
+    v1: isMobile ? v1GradientMobile : v1Gradient,
+    v2: v2Gradient
+  }[variant];
 };
 
-export const HeroImageContainer = styled(Box)`
-  display: flex;
+export const HeroDescription = styled(({ variant, isMobile, ...props }) => (
+  <Paragraph {...props} />
+))`
+  line-height: 150%;
+  font-size: ${({ isMobile }) => (!isMobile ? "1.25rem" : "inherit")};
+  text-align: ${({ variant }) => (variant === "v2" ? "center" : "inherit")};
+  font-size: ${({ variant, isMobile }) =>
+    variant === "v2" ? (isMobile ? "1.125rem" : "1.25rem") : "inherit"};
 `;