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

package/package.json

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

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/hero-image/HeroImage.js

@@ -0,0 +1,84 @@
+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 { 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 * as Styled from "./HeroImage.styled";
+
+const HeroImage = ({
+  themeValues,
+  heading,
+  subheading,
+  description,
+  imageUrl,
+  variant = "v1",
+  padding = "4rem",
+  minWidth = "100%",
+  minHeight = "auto",
+  contentSpacing = "0.5rem"
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <>
+      {imageUrl && (
+        <Styled.HeroImageContainer
+          minWidth={minWidth}
+          minHeight={minHeight}
+          padding={padding}
+          extraStyles={Styled.getHeroImageVariantStyles({
+            imageUrl,
+            variant,
+            gradientPrimary: themeValues.gradientColorPrimary,
+            gradientSecondary: themeValues.gradientColorSecondary
+          })}
+        >
+          <Box
+            padding="0"
+            maxWidth={isMobile ? "100%" : "50%"}
+            extraStyles={"display: flex; align-items: center;"}
+          >
+            <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>
+          </Box>
+        </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,91 @@
+import { variants } from "styled-theming";
+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://thecitybase.wpenginepowered.com/wp-content/uploads/2020/02/homepage-hero2.jpg",
+    contentSpacing: "0.5rem"
+  },
+  argTypes: {
+    heading: {
+      description: "Hero image main 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 }
+      }
+    },
+    padding: {
+      description: "Padding 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,21 @@
+import styled, { css } from "styled-components";
+import { Box } from "../../atoms";
+
+export const getHeroImageVariantStyles = ({
+  imageUrl,
+  variant,
+  gradientPrimary,
+  gradientSecondary
+}) => `
+    background: linear-gradient(
+      90deg,
+      ${gradientPrimary} 33%,
+      rgba(59, 91, 219, 0) 100%
+    ),
+    url(${imageUrl});
+    background-size: cover;
+  `;
+
+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")};
   }
 `;