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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.2.6-beta.0",
+  "version": "11.2.6-beta.2",
   "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={`text-decoration: ${
+            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={`text-decoration: ${
+          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,82 +1,95 @@
 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 (
     <>
-      {imageUrl && (
-        <Styled.HeroImageContainer
-          minWidth={minWidth}
-          minHeight={minHeight}
-          padding={padding}
-          extraStyles={Styled.getHeroImageVariantStyles({
-            imageUrl,
-            variant,
-            gradientPrimary: themeValues.gradientColorPrimary,
-            gradientSecondary: themeValues.gradientColorSecondary
-          })}
+      <Styled.HeroImageContainer
+        minWidth={minWidth}
+        minHeight={minHeight}
+        padding={paddingOverride ?? (isMobile ? "2rem" : "3rem 5.75rem")}
+        extraStyles={Styled.getHeroImageVariantStyles({
+          imageUrl,
+          isMobile,
+          variant,
+          heroPrimaryColor: themeValues.heroPrimaryColor,
+          heroSecondaryColor: themeValues.heroSecondaryColor
+        })}
+      >
+        <Center
+          maxWidth={"78.5rem"}
+          width={"100%"}
+          intrinsic
+          extraStyles={`
+            flex-flow: unset;
+            justify-content: flex-start;
+            flex-wrap: nowrap;"
+          `}
         >
-          <Box
-            padding="0"
-            maxWidth={isMobile ? "100%" : "50%"}
-            extraStyles={"display: flex; align-items: center;"}
+          <Stack
+            childGap={contentSpacing}
+            extraStyles={`max-width: ${isMobile ? "100%" : "50%"};`}
           >
-            <Stack childGap={contentSpacing}>
-              <Stack childGap="0">
-                <Title
-                  variant="hero"
-                  as="h2"
-                  weight={FONT_WEIGHT_SEMIBOLD}
-                  color={themeValues.textColor}
-                  extraStyles={`line-height: 115%;`}
-                >
-                  {heading}
-                </Title>
-                <Title
-                  variant={"large"}
-                  as="h3"
-                  weight={FONT_WEIGHT_SEMIBOLD}
-                  fontSize={!isMobile && "2rem"}
-                  color={themeValues.textColor}
-                  extraStyles={`line-height: 115%;`}
-                >
-                  {subheading}
-                </Title>
-              </Stack>
-              <Box padding="0">
-                <Paragraph
-                  color={themeValues.textColor}
-                  extraStyles={`line-height: 150%; ${!isMobile &&
-                    `font-size: 1.125rem;`}`}
-                >
-                  {description}
-                </Paragraph>
-              </Box>
+            <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>
             </Stack>
-          </Box>
-        </Styled.HeroImageContainer>
-      )}
+            <Box padding="0">
+              <Paragraph
+                color={themeValues.heroTextColor}
+                extraStyles={`line-height: ${
+                  isMobile ? "150%" : "115%"
+                }; ${!isMobile && `font-size: 1.125rem;`}`}
+              >
+                {description}
+              </Paragraph>
+            </Box>
+          </Stack>
+        </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 = {
@@ -12,10 +11,7 @@ const meta = {
     heading: "Cityville",
     subheading: "Payment Center",
     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",
-    contentSpacing: "0.5rem"
+      "Find and make payments quickly and conveniently from your computer or phone."
   },
   argTypes: {
     heading: {
@@ -25,6 +21,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 +49,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" }
@@ -86,6 +89,17 @@ export const DesktopV1 = {
   args: {
     variant: "v1",
     minWidth: "1000px",
-    minHeight: "274px"
+    minHeight: "274px",
+    imageUrl:
+      "https://cb-public-assets.s3-us-west-2.amazonaws.com/cityville/hero.png"
+  }
+};
+
+export const NoImage = {
+  args: {
+    variant: "v1",
+    minWidth: "1000px",
+    minHeight: "274px",
+    imageUrl: undefined
   }
 };

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;
+  heroPrimaryColor,
+  heroSecondaryColor
+}) => {
+  return css`
+    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};
   `;
+};
 
 export const HeroImageContainer = styled(Box)`
   display: flex;

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

@@ -4,12 +4,12 @@ import {
   WHITE
 } from "../../../constants/colors";
 
-const gradientColorPrimary = ROYAL_BLUE_VIVID;
-const gradientColorSecondary = MATISSE_BLUE;
-const textColor = WHITE;
+const heroPrimaryColor = ROYAL_BLUE_VIVID;
+const heroSecondaryColor = MATISSE_BLUE;
+const heroTextColor = WHITE;
 
 export const fallbackValues = {
-  gradientColorPrimary,
-  gradientColorSecondary,
-  textColor
+  heroPrimaryColor,
+  heroSecondaryColor,
+  heroTextColor
 };

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

@@ -37,6 +37,7 @@ const RegistrationBanner = ({
         justify="space-between"
         overflow="visible"
         isMobile={isMobile}
+        nowrap
       >
         <Box padding="0" textAlign="left">
           <Heading
@@ -46,18 +47,18 @@ const RegistrationBanner = ({
             variant={titleVariant}
             weight={FONT_WEIGHT_SEMIBOLD}
           >
-            Register for a {clientName} Wallet Account
+            Register for a {clientName} Wallet
           </Heading>
           <Text
             extraStyles={`
               display: block;
               padding: ${isMobile ? ".125rem 0 1rem" : "0"}
             `}
-            fontSize={isMobile ? FONT_SIZE.SM : FONT_SIZE.LG}
+            fontSize={isMobile ? FONT_SIZE.MD : FONT_SIZE.LG}
             color={themeValues.secondaryColor}
           >
-            Save payment methods and information for fast, easy, and safe
-            payments with {clientName}
+            Save payment methods and billing information for fast, easy, and
+            safe payments with {clientName}
           </Text>
         </Box>
         <Styled.ButtonContainer
@@ -73,7 +74,11 @@ const RegistrationBanner = ({
             fontWeight={FONT_WEIGHT_SEMIBOLD}
             url={registrationLink}
           >
-            <Cluster justify="center" align="center">
+            <Cluster
+              justify="center"
+              align="center"
+              extraStyles="min-width: 100%"
+            >
               <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: ${({ isMobile }) => (isMobile ? "1rem 2rem" : " 2rem 8.25rem")};
+  padding: 2rem;
 `;
 
 export const ContentContainer = styled(Cluster)`
   padding: 0;
-  width: ${({ isMobile }) => (isMobile ? "296px" : " 1176px")};
+  width: ${({ isMobile }) => (isMobile ? "100%" : " 1224px")};
   > div {
     flex-direction: ${({ isMobile }) => (isMobile ? "column" : "row")};
   }
@@ -19,8 +19,10 @@ export const ContentContainer = styled(Cluster)`
 
 export const ButtonContainer = styled(Stack)`
   align-items: center;
-  > a {
-    width: ${({ isMobile }) => (isMobile ? "296px" : "222px")};
+  width: ${({ isMobile }) => (isMobile ? "100%" : "222px")};
+  padding-left: ${({ isMobile }) => (isMobile ? "0" : "2rem")};
+  > * {
+    width: inherit;
   }
 `;
 

package/src/components/molecules/tab-sidebar/TabSidebar.js

@@ -37,6 +37,7 @@ const TabSidebar = ({ links, isMobile, themeValues, minHeight = "100%" }) => (
           key={`${route}-${index}`}
           extraStyles={`text-decoration: none;
             &:hover {
+            text-decoration: none;
             ${
               active
                 ? `> * {

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