@thecb/components 11.2.4-beta.1 → 11.2.5-beta.0

package/package.json

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

package/src/components/molecules/index.js

@@ -29,6 +29,7 @@ export { default as PhoneForm } from "./phone-form";
 export { default as Popover } from "./popover";
 export { default as RadioGroup } from "./radio-group";
 export { default as RadioSection } from "./radio-section";
+export { default as RegistrationBanner } from "./registration-banner";
 export { default as RegistrationForm } from "./registration-form";
 export { default as ResetConfirmationForm } from "./reset-confirmation-form";
 export { default as ResetPasswordForm } from "./reset-password-form";

package/src/components/molecules/obligation/modules/InactiveTitleModule.js

@@ -28,7 +28,7 @@ const InactiveTitleModule = ({ title, subtitle, autoPayEnabled }) => (
         Unable to load account details
       </Detail>
       <Detail variant="extraSmall" as="p" color={BLACK}>
-        {`This may mean the balance has been paid and was removed from the system, or that there was an error loading it. .${
+        {`This may mean that the account has been paid off or there was an error loading it. If you have questions about this account, please contact us.${
           autoPayEnabled
             ? " You may disable autopay for this account by pressing the 'Turn off Autopay' button."
             : ""

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 = ({
+  clientName,
+  extraStyles,
+  loginLink = "/login",
+  registrationLink = "/registration",
+  themeValues,
+  titleAs,
+  titleVariant
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
+  return (
+    <Styled.BannerContainer
+      extraStyles={extraStyles}
+      themeValues={themeValues}
+      isMobile={isMobile}
+      aria-label="Registration Banner"
+      justify="center"
+    >
+      <Styled.ContentContainer
+        align="center"
+        justify="space-between"
+        overflow="visible"
+        isMobile={isMobile}
+        nowrap
+      >
+        <Box padding="0" textAlign="left">
+          <Heading
+            as={titleAs}
+            color={themeValues.primaryColor}
+            fontSize={isMobile ? FONT_SIZE.XL : "1.5rem"}
+            variant={titleVariant}
+            weight={FONT_WEIGHT_SEMIBOLD}
+          >
+            Register for a {clientName} Wallet Account
+          </Heading>
+          <Text
+            extraStyles={`
+              display: block;
+              padding: ${isMobile ? ".125rem 0 1rem" : "0"}
+            `}
+            fontSize={isMobile ? FONT_SIZE.SM : FONT_SIZE.LG}
+            color={themeValues.secondaryColor}
+          >
+            Save payment methods and information for fast, easy, and safe
+            payments with {clientName}
+          </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,15 @@
+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.
+
+- 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 />

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

@@ -0,0 +1,83 @@
+import React from "react";
+import RegistrationBanner from "./RegistrationBanner";
+
+const meta = {
+  title: "Molecules/RegistrationBanner",
+  component: RegistrationBanner,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    clientName: "Cityville",
+    extraStyles: "",
+    titleAs: "h1",
+    titleVariant: "h1",
+    registrationLink: "/registration",
+    loginLink: "/login"
+  },
+  argTypes: {
+    clientName: {
+      description:
+        "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: "Cityville"
+        }
+      }
+    },
+    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"
+  //   }
+  // },
+  parameters: {
+    layout: "fullscreen"
+  },
+  render: args => {
+    return <RegistrationBanner {...args} key="registration-banner-standard" />;
+  }
+};

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

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { Box, Cluster, Stack } from "../../atoms/layouts";
+import ButtonWithLink from "../../atoms/button-with-link/ButtonWithLink";
+import { adjustHexColor } from "../../../util/general";
+
+export const BannerContainer = styled(Cluster)`
+  background: ${({ themeValues }) =>
+    adjustHexColor(themeValues.background, 10, "lighten")};
+  padding: ${({ isMobile }) => (isMobile ? "1rem 2rem" : " 2rem 1rem")};
+`;
+
+export const ContentContainer = styled(Cluster)`
+  padding: 0;
+  width: ${({ isMobile }) => (isMobile ? "100%" : " 1224px")};
+  > div {
+    flex-direction: ${({ isMobile }) => (isMobile ? "column" : "row")};
+  }
+`;
+
+export const ButtonContainer = styled(Stack)`
+  align-items: center;
+  > a {
+    width: ${({ isMobile }) => (isMobile ? "100%" : "222px")};
+  }
+  padding-left: ${({ isMobile }) => (isMobile ? "0" : " 2rem")};
+`;
+
+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,15 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface RegistrationBannerProps {
+  clientName?: string;
+  extraStyles?: string;
+  loginLink?: string;
+  registrationLink?: string;
+  themeValues?: any;
+  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;