@thecb/components 11.2.5 → 11.2.6-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.2.5",
+  "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/atoms/title/Title.theme.js

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

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

@@ -0,0 +1,99 @@
+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 {
+  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",
+  minWidth = "100%",
+  minHeight = "auto",
+  contentSpacing = "0.5rem",
+  paddingOverride
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+  const secondaryHeadingVariant = getNextHeading(headingVariant);
+
+  return (
+    <>
+      {imageUrl && (
+        <Styled.HeroImageContainer
+          minWidth={minWidth}
+          minHeight={minHeight}
+          padding={paddingOverride ?? (isMobile ? "2rem" : "3rem 5.75rem")}
+          extraStyles={Styled.getHeroImageVariantStyles({
+            imageUrl,
+            isMobile,
+            variant,
+            gradientColorPrimary: themeValues.gradientColorPrimary,
+            gradientColorSecondary: themeValues.gradientColorSecondary
+          })}
+        >
+          <Center
+            maxWidth={"78.5rem"}
+            width={"100%"}
+            intrinsic
+            extraStyles={`
+              flex-flow: unset;
+              justify-content: flex-start;
+              flex-wrap: nowrap;"
+            `}
+          >
+            <Stack
+              childGap={contentSpacing}
+              extraStyles={`max-width: ${isMobile ? "100%" : "50%"};`}
+            >
+              <Stack childGap="0">
+                <Title
+                  variant="hero"
+                  as={headingVariant}
+                  weight={FONT_WEIGHT_BOLD}
+                  color={themeValues.textColor}
+                  extraStyles={`line-height: ${isMobile ? "125%" : "115%"};`}
+                >
+                  {heading}
+                </Title>
+                <Title
+                  variant={"large"}
+                  as={secondaryHeadingVariant}
+                  weight={FONT_WEIGHT_SEMIBOLD}
+                  fontSize={isMobile ? "1.5rem" : "2rem"}
+                  color={themeValues.textColor}
+                  extraStyles={`line-height: ${isMobile ? "150%" : "115%"};`}
+                >
+                  {subheading}
+                </Title>
+              </Stack>
+              <Box padding="0">
+                <Paragraph
+                  color={themeValues.textColor}
+                  extraStyles={`line-height: ${
+                    isMobile ? "150%" : "115%"
+                  }; ${!isMobile && `font-size: 1.125rem;`}`}
+                >
+                  {description}
+                </Paragraph>
+              </Box>
+            </Stack>
+          </Center>
+        </Styled.HeroImageContainer>
+      )}
+    </>
+  );
+};
+
+export default themeComponent(HeroImage, "HeroImage", fallbackValues);

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

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as HeroImageStories from './HeroImage.stories.js';
+
+<Meta of={HeroImageStories} />
+
+<Title />
+
+HeroImage is a themeable component that renders a heading, sub-heading, and description with an image gradient background. It supports custom padding and content spacing for both mobile and desktop, as well as minimum width and height values.
+
+<div style={{ margin: "2em 0"}}>
+  <Story />
+</div>
+
+<Controls />

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

@@ -0,0 +1,97 @@
+import HeroImage from "./HeroImage";
+
+const meta = {
+  title: "Molecules/HeroImage",
+  component: HeroImage,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    heading: "Cityville",
+    subheading: "Payment Center",
+    description:
+      "Find and make payments quickly and conveniently from your computer or phone.",
+    imageUrl:
+      "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: {
+    heading: {
+      description: "Hero image main heading",
+      table: {
+        type: { summary: "string" },
+        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: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    description: {
+      description: "Hero image description",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    imageUrl: {
+      description: "Image URL for the hero image",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    paddingOverride: {
+      description: "padding override around the HeroImage content (desktop)",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "0.5rem 1.5rem" }
+      }
+    },
+    minWidth: {
+      description:
+        "Minimum width of the HeroImage, must be a valid value for the `min-width` property.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "100%" }
+      }
+    },
+    minHeight: {
+      description:
+        "Minimum height of the HeroImage, must be a valid value for the `min-height` property.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "auto" }
+      }
+    },
+    contentSpacing: {
+      description:
+        "Space between the headers and image, must be a valid CSS measurement value with a unit",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "3rem" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const DesktopV1 = {
+  args: {
+    variant: "v1",
+    minWidth: "1000px",
+    minHeight: "274px"
+  }
+};

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

@@ -0,0 +1,29 @@
+import styled, { css } from "styled-components";
+import { Box } from "../../atoms";
+import { rgba } from "polished";
+
+export const getHeroImageVariantStyles = ({
+  imageUrl,
+  isMobile,
+  variant,
+  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/components/molecules/hero-image/HeroImage.theme.js

@@ -0,0 +1,15 @@
+import {
+  MATISSE_BLUE,
+  ROYAL_BLUE_VIVID,
+  WHITE
+} from "../../../constants/colors";
+
+const gradientColorPrimary = ROYAL_BLUE_VIVID;
+const gradientColorSecondary = MATISSE_BLUE;
+const textColor = WHITE;
+
+export const fallbackValues = {
+  gradientColorPrimary,
+  gradientColorSecondary,
+  textColor
+};

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

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

package/src/components/molecules/index.js

@@ -45,3 +45,4 @@ export { default as WorkflowTile } from "./workflow-tile";
 export { default as PopupMenu } from "./popup-menu";
 export { default as MultipleSelectFilter } from "./multiple-select-filter";
 export { default as ContactCard } from "./contact-card";
+export { default as HeroImage } from "./hero-image";

package/src/components/molecules/registration-banner/RegistrationBanner.js

@@ -37,7 +37,6 @@ const RegistrationBanner = ({
         justify="space-between"
         overflow="visible"
         isMobile={isMobile}
-        nowrap
       >
         <Box padding="0" textAlign="left">
           <Heading
@@ -47,18 +46,18 @@ const RegistrationBanner = ({
             variant={titleVariant}
             weight={FONT_WEIGHT_SEMIBOLD}
           >
-            Register for a {clientName} Wallet
+            Register for a {clientName} Wallet Account
           </Heading>
           <Text
             extraStyles={`
               display: block;
               padding: ${isMobile ? ".125rem 0 1rem" : "0"}
             `}
-            fontSize={isMobile ? FONT_SIZE.MD : FONT_SIZE.LG}
+            fontSize={isMobile ? FONT_SIZE.SM : FONT_SIZE.LG}
             color={themeValues.secondaryColor}
           >
-            Save payment methods and billing information for fast, easy, and
-            safe payments with {clientName}
+            Save payment methods and information for fast, easy, and safe
+            payments with {clientName}
           </Text>
         </Box>
         <Styled.ButtonContainer
@@ -74,11 +73,7 @@ const RegistrationBanner = ({
             fontWeight={FONT_WEIGHT_SEMIBOLD}
             url={registrationLink}
           >
-            <Cluster
-              justify="center"
-              align="center"
-              extraStyles="min-width: 100%"
-            >
+            <Cluster justify="center" align="center">
               <Text
                 extraStyles="margin-right: 0.5rem"
                 fontSize={isMobile ? FONT_SIZE.MD : FONT_SIZE.LG}

package/src/components/molecules/registration-banner/RegistrationBanner.styled.js

@@ -6,12 +6,12 @@ import { adjustHexColor } from "../../../util/general";
 export const BannerContainer = styled(Cluster)`
   background: ${({ themeValues }) =>
     adjustHexColor(themeValues.background, 10, "lighten")};
-  padding: 2rem;
+  padding: ${({ isMobile }) => (isMobile ? "1rem 2rem" : " 2rem 8.25rem")};
 `;
 
 export const ContentContainer = styled(Cluster)`
   padding: 0;
-  width: ${({ isMobile }) => (isMobile ? "100%" : " 1224px")};
+  width: ${({ isMobile }) => (isMobile ? "296px" : " 1176px")};
   > div {
     flex-direction: ${({ isMobile }) => (isMobile ? "column" : "row")};
   }
@@ -19,10 +19,8 @@ export const ContentContainer = styled(Cluster)`
 
 export const ButtonContainer = styled(Stack)`
   align-items: center;
-  width: ${({ isMobile }) => (isMobile ? "100%" : "222px")};
-  padding-left: ${({ isMobile }) => (isMobile ? "0" : "2rem")};
-  > * {
-    width: inherit;
+  > a {
+    width: ${({ isMobile }) => (isMobile ? "296px" : "222px")};
   }
 `;
 

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];
+};