@thecb/components 11.2.8-beta.0 → 11.2.8-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.2.8-beta.0",
+  "version": "11.2.8-beta.1",
   "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 Title from "../../atoms/title";
 import { fallbackValues } from "./HeroImage.theme";
 import withWindowSize from "../../withWindowSize";
 import {
@@ -26,25 +25,19 @@ const HeroImage = ({
   secondaryHeadingVariant = "h2",
   extraStyles
 }) => {
-  const { isMobile } = useContext(ThemeContext);
-  const gradientStyles = Styled.getHeroGradientStyles({
-    variant,
-    isMobile,
-    heroPrimaryColor: themeValues.heroPrimaryColor,
-    heroSecondaryColor: themeValues.heroSecondaryColor
-  });
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
 
   return (
-    <Box
+    <Styled.HeroContainer
+      variant={variant}
       minWidth={minWidth}
       minHeight={minHeight}
       padding={isMobile ? "2rem" : "3rem 2rem"}
-      extraStyles={`
-        display: flex;
-        background: ${gradientStyles},
-          url(${imageUrl}) center / cover no-repeat, ${themeValues.heroPrimaryColor};
-        ${extraStyles}
-      `}
+      extraStyles={extraStyles}
+      imageUrl={imageUrl}
+      isMobile={isMobile}
+      theme={themeValues}
     >
       <Center
         maxWidth={contentMaxWidth}
@@ -52,7 +45,10 @@ const HeroImage = ({
         intrinsic
         extraStyles={`
           flex-flow: unset;
-          justify-content: ${variant === "v2" ? "center" : "flex-start"};
+          justify-content: ${Styled.getDeviceStyles(
+            isMobile,
+            themeValues.justifyContent
+          )};
           flex-wrap: nowrap;
         `}
       >
@@ -65,43 +61,55 @@ const HeroImage = ({
           {variant === "v1" ? (
             <Stack childGap="0">
               {heading && (
-                <Title
+                <Styled.HeroHeading
                   variant="hero"
                   as={headingVariant}
                   weight={FONT_WEIGHT_BOLD}
                   color={themeValues.heroTextColor}
-                  extraStyles={`line-height: ${isMobile ? "125%" : "115%"};`}
+                  textAlign={Styled.getDeviceStyles(
+                    isMobile,
+                    themeValues.textAlign
+                  )}
+                  isMobile={isMobile}
+                  theme={themeValues}
                 >
                   {heading}
-                </Title>
+                </Styled.HeroHeading>
               )}
               {subheading && (
-                <Title
-                  variant={"large"}
+                <Styled.HeroSubheading
+                  variant="large"
                   as={secondaryHeadingVariant}
                   weight={FONT_WEIGHT_SEMIBOLD}
-                  fontSize={isMobile ? "2rem" : "2.5rem"}
+                  textAlign={Styled.getDeviceStyles(
+                    isMobile,
+                    themeValues.textAlign
+                  )}
                   color={themeValues.heroTextColor}
-                  extraStyles={`line-height: ${isMobile ? "150%" : "115%"};`}
+                  isMobile={isMobile}
+                  theme={themeValues}
                 >
                   {subheading}
-                </Title>
+                </Styled.HeroSubheading>
               )}
             </Stack>
           ) : (
             <>
               {heading && (
-                <Title
+                <Styled.HeroHeading
                   variant="hero"
                   as={headingVariant}
                   weight={FONT_WEIGHT_BOLD}
                   color={themeValues.heroTextColor}
-                  extraStyles={`text-align: center; line-height: ${
-                    isMobile ? "125%" : "115%"
-                  };`}
+                  textAlign={Styled.getDeviceStyles(
+                    isMobile,
+                    themeValues.textAlign
+                  )}
+                  isMobile={isMobile}
+                  theme={themeValues}
                 >
                   {heading}
-                </Title>
+                </Styled.HeroHeading>
               )}
             </>
           )}
@@ -110,7 +118,7 @@ const HeroImage = ({
               <Styled.HeroDescription
                 color={themeValues.heroTextColor}
                 isMobile={isMobile}
-                variant={variant}
+                theme={themeValues}
               >
                 {description}
               </Styled.HeroDescription>
@@ -118,10 +126,10 @@ const HeroImage = ({
           )}
         </Stack>
       </Center>
-    </Box>
+    </Styled.HeroContainer>
   );
 };
 
 export default withWindowSize(
-  themeComponent(HeroImage, "HeroImage", fallbackValues)
+  themeComponent(HeroImage, "HeroImage", fallbackValues, "v1")
 );

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

@@ -1,14 +1,10 @@
 import React from "react";
 import styled from "styled-components";
-import { Paragraph } from "../../atoms";
-import { rgba } from "polished";
+import { Paragraph, Box } from "../../atoms";
+import Title from "../../atoms/title/Title.js";
+import { rgba, adjustHue, darken } from "polished";
 
-export const getHeroGradientStyles = ({
-  variant,
-  isMobile,
-  heroPrimaryColor,
-  heroSecondaryColor
-}) => {
+const getHeroGradientStyles = ({ variant, isMobile, heroPrimaryColor }) => {
   const v1Gradient = `linear-gradient(
     90deg,
     ${heroPrimaryColor} 33%,
@@ -18,24 +14,70 @@ export const getHeroGradientStyles = ({
     ${rgba(heroPrimaryColor, 0.8)},
     ${rgba(heroPrimaryColor, 0.8)}
   )`;
+  const heroSecondaryColor = darken(0.18, adjustHue(-29, heroPrimaryColor));
   const v2Gradient = `linear-gradient(
     90deg,
     ${rgba(heroPrimaryColor, 0.8)} 0%,
     ${rgba(heroSecondaryColor, 0.8)} 100%
   )`;
 
-  return {
-    v1: isMobile ? v1GradientMobile : v1Gradient,
-    v2: v2Gradient
-  }[variant];
+  return variant === "v1"
+    ? isMobile
+      ? v1GradientMobile
+      : v1Gradient
+    : v2Gradient;
 };
 
-export const HeroDescription = styled(({ variant, isMobile, ...props }) => (
+export const getDeviceStyles = (isMobile, theme) =>
+  isMobile ? theme.mobile : theme.desktop;
+
+export const HeroContainer = styled(
+  ({ variant, imageUrl, isMobile, theme, extraStyles, ...props }) => (
+    <Box {...props} />
+  )
+)`
+  display: flex;
+  background: ${({ variant, imageUrl, isMobile, theme }) =>
+    `${getHeroGradientStyles({
+      variant,
+      isMobile,
+      heroPrimaryColor: theme.heroPrimaryColor
+    })},
+    url(${imageUrl}) center / cover no-repeat, ${theme.heroPrimaryColor}`};
+  ${({ extraStyles }) => extraStyles}
+`;
+
+export const HeroHeading = styled(({ theme, isMobile, ...props }) => (
+  <Title {...props} />
+))`
+  font-size: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.headingFontSize)};
+  color: ${({ color }) => color};
+  font-weight: ${({ weight }) => weight};
+  text-align: ${({ textAlign }) => textAlign};
+  line-height: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.headingLineHeight)};
+`;
+
+export const HeroSubheading = styled(({ theme, isMobile, ...props }) => (
+  <Title {...props} />
+))`
+  font-size: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.subheadingFontSize)};
+  color: ${({ color }) => color};
+  font-weight: ${({ weight }) => weight};
+  text-align: ${({ textAlign }) => textAlign};
+  line-height: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.subheadingLineHeight)};
+`;
+
+export const HeroDescription = styled(({ theme, 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"};
+  line-height: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.descriptionLineHeight)};
+  font-size: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.descriptionFontSize)};
+  text-align: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.textAlign)};
 `;

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

@@ -3,13 +3,107 @@ import {
   ROYAL_BLUE_VIVID,
   WHITE
 } from "../../../constants/colors";
+import { FONT_SIZE } from "../../../constants/style_constants";
 
+// Colors
 const heroPrimaryColor = ROYAL_BLUE_VIVID;
-const heroSecondaryColor = MATISSE_BLUE;
 const heroTextColor = WHITE;
 
+// Font Sizes
+const headingFontSize = {
+  v1: {
+    mobile: "3.00rem",
+    desktop: "3.50rem"
+  },
+  v2: {
+    mobile: "2.50rem",
+    desktop: "3.50rem"
+  }
+};
+const subheadingFontSize = {
+  v1: {
+    mobile: "2.00rem",
+    desktop: "2.50rem"
+  }
+};
+
+const descriptionFontSize = {
+  v1: {
+    mobile: FONT_SIZE.MD,
+    desktop: FONT_SIZE.XL
+  },
+  v2: {
+    mobile: FONT_SIZE.LG,
+    desktop: FONT_SIZE.XL
+  }
+};
+
+// Line Heights
+const headingLineHeight = {
+  v1: {
+    mobile: 1.25,
+    desktop: 1.15
+  },
+  v2: {
+    mobile: 1.25,
+    desktop: 1.15
+  }
+};
+
+const subheadingLineHeight = {
+  v1: {
+    mobile: 1.5,
+    desktop: 1.15
+  }
+};
+
+const descriptionLineHeight = {
+  v1: {
+    mobile: 1.5,
+    desktop: 1.5
+  },
+  v2: {
+    mobile: 1.5,
+    desktop: 1.5
+  }
+};
+
+// Alignment
+const textAlign = {
+  v1: {
+    mobile: "left",
+    desktop: "left"
+  },
+  v2: {
+    mobile: "left",
+    desktop: "center"
+  }
+};
+
+const justifyContent = {
+  v1: {
+    mobile: "flex-start",
+    desktop: "flex-start"
+  },
+  v2: {
+    mobile: "flex-start",
+    desktop: "center"
+  }
+};
+
 export const fallbackValues = {
+  // Colors
   heroPrimaryColor,
-  heroSecondaryColor,
-  heroTextColor
+  heroTextColor,
+  // Font sizes
+  headingFontSize,
+  descriptionFontSize,
+  subheadingFontSize,
+  // Line heights
+  headingLineHeight,
+  subheadingLineHeight,
+  descriptionLineHeight,
+  // Alignment
+  textAlign,
+  justifyContent
 };