@thecb/components 11.2.3-beta.2 → 11.2.3-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.2.3-beta.2",
+  "version": "11.2.3-beta.4",
   "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

@@ -14,12 +14,11 @@ import withWindowSize from "../../withWindowSize";
 import Heading from "../../atoms/heading";
 
 const RegistrationBanner = ({
-  description,
+  clientName,
   extraStyles,
   loginLink = "/login",
   registrationLink = "/registration",
   themeValues,
-  title,
   titleAs,
   titleVariant
 }) => {
@@ -32,6 +31,7 @@ const RegistrationBanner = ({
       isMobile={isMobile}
       role="banner"
       aria-label="Registration Banner"
+      justify="center"
     >
       <Styled.ContentContainer
         role="main"
@@ -48,7 +48,7 @@ const RegistrationBanner = ({
             variant={titleVariant}
             weight={FONT_WEIGHT_SEMIBOLD}
           >
-            {title}
+            Register for a {clientName} Wallet Account
           </Heading>
           <Text
             extraStyles={`
@@ -58,7 +58,8 @@ const RegistrationBanner = ({
             fontSize={isMobile ? FONT_SIZE.SM : FONT_SIZE.LG}
             color={themeValues.secondaryColor}
           >
-            {description}
+            Save payment methods and information for fast, easy, and safe
+            payments with {clientName}
           </Text>
         </Box>
         <Styled.ButtonContainer

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

@@ -6,17 +6,10 @@ import * as RegistrationBannerStories from './RegistrationBanner.stories.js';
 
 <Title />
 
-Originally used in the PayDot project, `RegistrationBanner` displays a promotional banner for user registration. It includes the following features:
+Originally used in the PayDot project, `RegistrationBanner` displays a promotional banner for user registration.
 
-- **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.
+- Title and Description: A `clientName` prop is passed, which displays within the title and description text.
+- Responsive: Adjusts its layout and font sizes based on whether the user is on a mobile device, using the `isMobile` value from the theme context.
+- Action Links: Provides two main action links - one for registration ("Register Now") and another for logging in ("Log In").
 
 <Controls />
-
-<div style={{ marginBottom: "2em"}}>
-    <Story />
-</div>

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

@@ -9,31 +9,21 @@ const meta = {
   },
   tags: ["!autodocs"],
   args: {
-    description:
-      "Save payment methods and accounts to make interacting with Cityville fast, safe, and easy.",
+    clientName: "Cityville",
     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: {
+    clientName: {
       description:
-        "Text to display in the RegistrationBanner's description area",
+        "Name of the client using the RegistrationBanner (e.g. Cityville). This will be displayed in the title and description of the banner.",
       table: {
         type: { summary: "string" },
         defaultValue: {
-          summary:
-            "Save payment methods and accounts to make interacting with Cityville fast, safe, and easy."
+          summary: "Cityville"
         }
       }
     },

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

@@ -3,7 +3,7 @@ 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)`
+export const BannerContainer = styled(Cluster)`
   background: ${({ themeValues }) => hexToRGBA(themeValues.background, 0.9)};
   padding: ${({ isMobile }) => (isMobile ? "1rem 2rem" : " 2rem 8.25rem")};
 `;

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

@@ -1,13 +1,12 @@
 import React from "react";
 import Expand from "../../../util/expand";
-import RegistrationBanner from "./index";
 
 export interface RegistrationBannerProps {
-  description?: string;
+  clientName?: string;
   extraStyles?: string;
   loginLink?: string;
   registrationLink?: string;
-  title?: string;
+  themeValues: any;
   titleAs?: string;
   titleVariant?: string;
 }