@thecb/components 11.2.2 → 11.2.3-beta.1

package/package.json

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

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

@@ -0,0 +1,111 @@
+import React, { useContext } from "react";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./RegistrationBanner.theme";
+import * as Styled from "./RegistrationBanner.styled";
+import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
+import { Box, Cluster } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import { ThemeContext } from "styled-components";
+import {
+  FONT_SIZE,
+  FONT_WEIGHT_SEMIBOLD
+} from "../../../constants/style_constants";
+import withWindowSize from "../../withWindowSize";
+import Heading from "../../atoms/heading";
+
+const RegistrationBanner = ({
+  description,
+  extraStyles,
+  loginLink = "/login",
+  registrationLink = "/registration",
+  themeValues,
+  title,
+  titleAs,
+  titleVariant
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
+  return (
+    <Styled.BannerContainer
+      extraStyles={extraStyles}
+      themeValues={themeValues}
+      isMobile={isMobile}
+      role="banner"
+      aria-label="Registration Banner"
+    >
+      <Styled.ContentContainer
+        role="main"
+        align="center"
+        justify="space-between"
+        overflow="visible"
+        isMobile={isMobile}
+      >
+        <Box padding="0" textAlign="left">
+          <Heading
+            as={titleAs}
+            color={themeValues.primaryColor}
+            fontSize={isMobile ? FONT_SIZE.XL : "1.5rem"}
+            variant={titleVariant}
+            weight={FONT_WEIGHT_SEMIBOLD}
+          >
+            {title}
+          </Heading>
+          <Text
+            extraStyles={`
+              display: block;
+              padding: ${isMobile ? ".125rem 0 1rem" : "0"}
+            `}
+            fontSize={isMobile ? FONT_SIZE.SM : FONT_SIZE.LG}
+            color={themeValues.secondaryColor}
+          >
+            {description}
+          </Text>
+        </Box>
+        <Styled.ButtonContainer
+          justify="space-between"
+          fullHeight
+          childGap="0.5rem"
+          isMobile={isMobile}
+        >
+          <Styled.RegisterLink
+            variant="secondary"
+            color={themeValues.primaryColor}
+            contentOverride
+            fontWeight={FONT_WEIGHT_SEMIBOLD}
+            url={registrationLink}
+          >
+            <Cluster justify="center" align="center">
+              <Text
+                extraStyles="margin-right: 0.5rem"
+                fontSize={isMobile ? FONT_SIZE.MD : FONT_SIZE.LG}
+                color={themeValues.primaryColor}
+                weight={FONT_WEIGHT_SEMIBOLD}
+              >
+                Register Now
+              </Text>
+              <ArrowRightIcon />
+            </Cluster>
+          </Styled.RegisterLink>
+          <Styled.LoginLink
+            text="Log In"
+            variant="secondary"
+            contentOverride
+            url={loginLink}
+          >
+            <Text
+              fontSize={isMobile ? FONT_SIZE.SM : FONT_SIZE.MD}
+              color={themeValues.primaryColor}
+              weight={FONT_WEIGHT_SEMIBOLD}
+            >
+              or Log In
+            </Text>
+          </Styled.LoginLink>
+        </Styled.ButtonContainer>
+      </Styled.ContentContainer>
+    </Styled.BannerContainer>
+  );
+};
+
+export default withWindowSize(
+  themeComponent(RegistrationBanner, "RegistrationBanner", fallbackValues)
+);

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

@@ -0,0 +1,22 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as RegistrationBannerStories from './RegistrationBanner.stories.js';
+
+<Meta of={RegistrationBannerStories} />
+
+<Title />
+
+Originally used in the PayDot project, `RegistrationBanner` displays a promotional banner for user registration. It includes the following features:
+
+- **Title and Description**: Displays a title and description text, which can be customized via props.
+- **Responsive Design**: Adjusts its layout and font sizes based on whether the user is on a mobile device, using the `isMobile` value from the theme context.
+- **Styled Components**: Utilizes styled-components for styling, ensuring consistent theming and styling across the application.
+- **Action Links**: Provides two main action links - one for registration ("Register Now") and another for logging in ("Log In"), each styled appropriately and including an icon for the registration link.
+- **Accessibility**: Includes ARIA roles and labels to improve accessibility for users with disabilities.
+- **Customizable Links**: Accepts `registrationLink` and `loginLink` props to customize the URLs for the registration and login links, defaulting to `/registration` and `/login` respectively.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

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

@@ -0,0 +1,90 @@
+import React from "react";
+import RegistrationBanner from "./RegistrationBanner";
+
+const meta = {
+  title: "Molecules/RegistrationBanner",
+  component: RegistrationBanner,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    description:
+      "Save payment methods and accounts to make interacting with Cityville fast, safe, and easy.",
+    extraStyles: "",
+    title: "Register for a Cityville Wallet Account",
+    titleAs: "h1",
+    titleVariant: "h1",
+    registrationLink: "/registration",
+    loginLink: "/login"
+  },
+  argTypes: {
+    title: {
+      description: "Text to display in the RegistrationBanner's heading area",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Register for a Cityville Wallet Account" }
+      }
+    },
+    description: {
+      description:
+        "Text to display in the RegistrationBanner's description area",
+      table: {
+        type: { summary: "string" },
+        defaultValue: {
+          summary:
+            "Save payment methods and accounts to make interacting with Cityville fast, safe, and easy."
+        }
+      }
+    },
+    extraStyles: {
+      description: "Additional styles for the RegistrationBanner",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    titleAs: {
+      description: "HTML tag to use for the title",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h1" }
+      }
+    },
+    titleVariant: {
+      description: "Variant of the title",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h1" }
+      }
+    },
+    registrationLink: {
+      description: "URL for the registration link",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "/registration" }
+      }
+    },
+    loginLink: {
+      description: "URL for the login link",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "/login" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const StandardRegistrationBanner = {
+  args: {},
+  parameters: {
+    viewport: {
+      defaultViewport: "responsive"
+    }
+  },
+  render: args => {
+    return <RegistrationBanner {...args} key="registration-banner-standard" />;
+  }
+};

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

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+import { Box, Cluster, Stack } from "../../atoms/layouts";
+import ButtonWithLink from "../../atoms/button-with-link/ButtonWithLink";
+import { hexToRGBA } from "../../../util/general";
+
+export const BannerContainer = styled(Box)`
+  background: ${({ themeValues }) => hexToRGBA(themeValues.background, 0.9)};
+  padding: ${({ isMobile }) => (isMobile ? "1rem 2rem" : " 2rem 8.25rem")};
+`;
+
+export const ContentContainer = styled(Cluster)`
+  padding: 0;
+  width: ${({ isMobile }) => (isMobile ? "296px" : " 1176px")};
+  > div {
+    flex-direction: ${({ isMobile }) => (isMobile ? "column" : "row")};
+  }
+`;
+
+export const ButtonContainer = styled(Stack)`
+  align-items: center;
+  > a {
+    width: ${({ isMobile }) => (isMobile ? "296px" : "222px")};
+  }
+`;
+
+export const RegisterLink = styled(ButtonWithLink)`
+  border-radius: 100px;
+  margin: 0;
+  width: 100%;
+`;
+
+export const LoginLink = styled(ButtonWithLink)`
+  border-radius: 100px;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  min-height: 2rem;
+  margin-top: 0px;
+  border: none;
+  &:hover {
+    text-decoration: none;
+  }
+`;

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

@@ -0,0 +1,11 @@
+import {
+  CHARADE_GREY,
+  CORNFLOWER_BLUE,
+  ROYAL_BLUE_VIVID
+} from "../../../constants/colors";
+
+export const fallbackValues = {
+  primaryColor: ROYAL_BLUE_VIVID,
+  secondaryColor: CHARADE_GREY,
+  background: CORNFLOWER_BLUE
+};

package/src/components/molecules/registration-banner/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import Expand from "../../../util/expand";
+import RegistrationBanner from "./index";
+
+export interface RegistrationBannerProps {
+  description?: string;
+  extraStyles?: string;
+  loginLink?: string;
+  registrationLink?: string;
+  title?: string;
+  titleAs?: string;
+  titleVariant?: string;
+}
+
+export const RegistrationBanner: React.FC<Expand<RegistrationBannerProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

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

package/src/util/general.js

@@ -213,3 +213,39 @@ export const adjustHexColor = (hex, percent, action) => {
     .slice(1)
     .padStart(6, "0")}`;
 };
+
+/**
+ * Converts a hex color code to an RGBA color string with the specified alpha value.
+ *
+ * @param {string} hex - The hex color code (e.g., "#3498db" or "3498db").
+ * @param {number} alpha - The alpha value (opacity) between 0 and 1.
+ * @returns {string} - The RGBA color string (e.g., "rgba(52, 152, 219, 0.5)").
+ * @throws {Error} - Throws an error if the hex code is not a valid 3 or 6-digit hex color.
+ */
+export const hexToRGBA = (hex, alpha) => {
+  // Remove hash at the start if present
+  hex = hex.replace(/^\s*#/, "");
+
+  // If hex is 3 characters, convert it to 6 characters.
+  if (hex.length === 3) {
+    hex = hex
+      .split("")
+      .map(char => char + char)
+      .join("");
+  }
+
+  // Validate hex length
+  if (hex.length !== 6) {
+    throw new Error(
+      "Invalid hex color provided. Expected a 3 or 6-digit hex color."
+    );
+  }
+
+  // Parse the hex color components
+  const bigint = parseInt(hex, 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};