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

package/package.json

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

package/src/components/atoms/layouts/Center.styled.js

@@ -4,6 +4,7 @@ export const CenterWrapper = styled.div`
   box-sizing: content-box;
   margin-left: auto;
   margin-right: auto;
+  width: ${({ width }) => width || "auto"};
   max-width: ${({ maxWidth }) => maxWidth};
   padding-left: ${({ gutters }) => gutters};
   padding-right: ${({ gutters }) => gutters};
@@ -15,4 +16,5 @@ export const CenterWrapper = styled.div`
     align-items: center;
   `
       : ``};
+  ${({ extraStyles }) => extraStyles}
 `;

package/src/components/atoms/link/ExternalLink.js

@@ -6,6 +6,7 @@ import { StyledExternalLink } from "./ExternalLink.styled";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { safeChildren } from "../../../util/general";
 import { Box } from "../layouts";
+import { LINK_TEXT_DECORATION } from "../../../constants/style_constants";
 
 const ExternalLink = forwardRef(
   (
@@ -57,11 +58,12 @@ const ExternalLink = forwardRef(
           activeColor={themeValues.activeColor}
           fontFamily={themeValues.fontFamily}
           tabIndex={tabIndex}
-          extrastyles={extraStyles}
+          extrastyles={`${
+            isUnderlined ? LINK_TEXT_DECORATION : "none"
+          } ${extraStyles}`}
           rel={newTab ? "noopener" : ""}
           data-qa={dataQa}
           aria-label={ariaLabel}
-          isUnderlined={isUnderlined}
           ref={ref}
         >
           {safeChildren(children, <span />)}

package/src/components/atoms/link/ExternalLink.styled.js

@@ -22,8 +22,7 @@ export const StyledExternalLink = styled(
   font-weight: ${({ weight }) => weight};
   font-family: ${({ fontFamily }) => fontFamily};
   line-height: ${({ lineheight }) => lineheight};
-  text-decoration: ${({ isUnderlined }) =>
-    isUnderlined ? LINK_TEXT_DECORATION : "none"};
+  text-decoration: ${LINK_TEXT_DECORATION};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};

package/src/components/atoms/link/InternalLink.js

@@ -4,6 +4,7 @@ import { fallbackValues } from "./Link.theme";
 import { createThemeValues } from "../../../util/themeUtils";
 import { StyledInternalLink } from "./InternalLink.styled";
 import { safeChildren } from "../../../util/general";
+import { LINK_TEXT_DECORATION } from "../../../constants/style_constants";
 
 const InternalLink = forwardRef(
   (
@@ -45,9 +46,10 @@ const InternalLink = forwardRef(
         hoverColor={themeValues.hoverColor}
         activeColor={themeValues.activeColor}
         tabIndex={tabIndex}
-        extrastyles={extraStyles}
+        extrastyles={`${
+          isUnderlined ? LINK_TEXT_DECORATION : "none"
+        } ${extraStyles}`}
         data-qa={dataQa}
-        isUnderlined={isUnderlined}
         ref={ref}
       >
         {safeChildren(children, <span />)}

package/src/components/atoms/link/InternalLink.styled.js

@@ -28,8 +28,7 @@ export const StyledInternalLink = styled(
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
-  text-decoration: ${({ isUnderlined }) =>
-    isUnderlined ? LINK_TEXT_DECORATION : "none"};
+  text-decoration: ${LINK_TEXT_DECORATION};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};

package/src/components/molecules/contact-card/ContactCard.js

@@ -101,10 +101,9 @@ const ContactCard = ({
                   "contact-card-link"
                 );
                 return (
-                  <>
+                  <React.Fragment key={linkID}>
                     {R.test(URL_TEST, link.link) ? (
                       <ExternalLink
-                        key={linkID}
                         dataQa={linkID}
                         href={link.link}
                         newTab={true}
@@ -129,7 +128,6 @@ const ContactCard = ({
                       </ExternalLink>
                     ) : (
                       <InternalLink
-                        key={linkID}
                         to={link.link}
                         dataQa={linkID}
                         fontSize={FONT_SIZE.SM}
@@ -145,7 +143,7 @@ const ContactCard = ({
                         {link.text}
                       </InternalLink>
                     )}
-                  </>
+                  </React.Fragment>
                 );
               })}
             </Stack>

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

@@ -1,27 +1,32 @@
 import React, { useContext } from "react";
 import { ThemeContext } from "styled-components";
-import { Box, Cluster, Stack } from "../../atoms/layouts";
-import BoxWithShadow from "../../atoms/box-with-shadow";
+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 { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import {
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_SEMIBOLD
+} from "../../../constants/style_constants";
 import * as Styled from "./HeroImage.styled";
+import { getNextHeading } from "../../../util/general";
 
 const HeroImage = ({
   themeValues,
   heading,
+  headingVariant = "h2",
   subheading,
   description,
   imageUrl,
   variant = "v1",
-  padding = "4rem",
   minWidth = "100%",
   minHeight = "auto",
-  contentSpacing = "0.5rem"
+  contentSpacing = "0.5rem",
+  paddingOverride
 }) => {
   const { isMobile } = useContext(ThemeContext);
+  const secondaryHeadingVariant = getNextHeading(headingVariant);
 
   return (
     <>
@@ -29,37 +34,46 @@ const HeroImage = ({
         <Styled.HeroImageContainer
           minWidth={minWidth}
           minHeight={minHeight}
-          padding={padding}
+          padding={paddingOverride ?? (isMobile ? "2rem" : "3rem 5.75rem")}
           extraStyles={Styled.getHeroImageVariantStyles({
             imageUrl,
+            isMobile,
             variant,
-            gradientPrimary: themeValues.gradientColorPrimary,
-            gradientSecondary: themeValues.gradientColorSecondary
+            gradientColorPrimary: themeValues.gradientColorPrimary,
+            gradientColorSecondary: themeValues.gradientColorSecondary
           })}
         >
-          <Box
-            padding="0"
-            maxWidth={isMobile ? "100%" : "50%"}
-            extraStyles={"display: flex; align-items: center;"}
+          <Center
+            maxWidth={"78.5rem"}
+            width={"100%"}
+            intrinsic
+            extraStyles={`
+              flex-flow: unset;
+              justify-content: flex-start;
+              flex-wrap: nowrap;"
+            `}
           >
-            <Stack childGap={contentSpacing}>
+            <Stack
+              childGap={contentSpacing}
+              extraStyles={`max-width: ${isMobile ? "100%" : "50%"};`}
+            >
               <Stack childGap="0">
                 <Title
                   variant="hero"
-                  as="h2"
-                  weight={FONT_WEIGHT_SEMIBOLD}
+                  as={headingVariant}
+                  weight={FONT_WEIGHT_BOLD}
                   color={themeValues.textColor}
-                  extraStyles={`line-height: 115%;`}
+                  extraStyles={`line-height: ${isMobile ? "125%" : "115%"};`}
                 >
                   {heading}
                 </Title>
                 <Title
                   variant={"large"}
-                  as="h3"
+                  as={secondaryHeadingVariant}
                   weight={FONT_WEIGHT_SEMIBOLD}
-                  fontSize={!isMobile && "2rem"}
+                  fontSize={isMobile ? "1.5rem" : "2rem"}
                   color={themeValues.textColor}
-                  extraStyles={`line-height: 115%;`}
+                  extraStyles={`line-height: ${isMobile ? "150%" : "115%"};`}
                 >
                   {subheading}
                 </Title>
@@ -67,14 +81,15 @@ const HeroImage = ({
               <Box padding="0">
                 <Paragraph
                   color={themeValues.textColor}
-                  extraStyles={`line-height: 150%; ${!isMobile &&
-                    `font-size: 1.125rem;`}`}
+                  extraStyles={`line-height: ${
+                    isMobile ? "150%" : "115%"
+                  }; ${!isMobile && `font-size: 1.125rem;`}`}
                 >
                   {description}
                 </Paragraph>
               </Box>
             </Stack>
-          </Box>
+          </Center>
         </Styled.HeroImageContainer>
       )}
     </>

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

@@ -1,4 +1,3 @@
-import { variants } from "styled-theming";
 import HeroImage from "./HeroImage";
 
 const meta = {
@@ -14,7 +13,7 @@ const meta = {
     description:
       "Find and make payments quickly and conveniently from your computer or phone.",
     imageUrl:
-      "https://thecitybase.wpenginepowered.com/wp-content/uploads/2020/02/homepage-hero2.jpg",
+      "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?q=80&w=1844&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     contentSpacing: "0.5rem"
   },
   argTypes: {
@@ -25,6 +24,13 @@ const meta = {
         defaultValue: { summary: undefined }
       }
     },
+    headingVariant: {
+      description: "Heading variant for the hero image heading",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
     subheading: {
       description: "Hero image sub-heading",
       table: {
@@ -46,8 +52,8 @@ const meta = {
         defaultValue: { summary: undefined }
       }
     },
-    padding: {
-      description: "Padding around the HeroImage content (desktop)",
+    paddingOverride: {
+      description: "padding override around the HeroImage content (desktop)",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "0.5rem 1.5rem" }

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

@@ -1,20 +1,28 @@
 import styled, { css } from "styled-components";
 import { Box } from "../../atoms";
+import { rgba } from "polished";
 
 export const getHeroImageVariantStyles = ({
   imageUrl,
+  isMobile,
   variant,
-  gradientPrimary,
-  gradientSecondary
-}) => `
-    background: linear-gradient(
-      90deg,
-      ${gradientPrimary} 33%,
-      rgba(59, 91, 219, 0) 100%
-    ),
-    url(${imageUrl});
-    background-size: cover;
+  gradientColorPrimary,
+  gradientColorSecondary
+}) => {
+  return css`
+    background: ${!isMobile
+        ? `linear-gradient(
+            90deg,
+            ${gradientColorPrimary} 33%,
+            transparent 100%
+            )`
+        : `linear-gradient(
+            ${rgba(gradientColorPrimary, 0.8)},
+            ${rgba(gradientColorPrimary, 0.8)}
+            )`},
+      url(${imageUrl}) center / cover no-repeat;
   `;
+};
 
 export const HeroImageContainer = styled(Box)`
   display: flex;

package/src/util/general.js

@@ -213,3 +213,15 @@ 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];
+};