@thecb/components 11.2.4-beta.0 → 11.2.4

package/package.json

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

package/src/components/atoms/link/ExternalLink.js

@@ -21,6 +21,7 @@ const ExternalLink = forwardRef(
       tabIndex = "0",
       dataQa,
       ariaLabel,
+      isUnderlined = true,
       children
     },
     ref
@@ -60,6 +61,7 @@ const ExternalLink = forwardRef(
           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,15 +22,18 @@ export const StyledExternalLink = styled(
   font-weight: ${({ weight }) => weight};
   font-family: ${({ fontFamily }) => fontFamily};
   line-height: ${({ lineheight }) => lineheight};
-  text-decoration: ${LINK_TEXT_DECORATION};
+  text-decoration: ${({ isUnderlined }) =>
+    isUnderlined ? LINK_TEXT_DECORATION : "none"};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};
+    text-decoration: ${LINK_TEXT_DECORATION};
   }
 
   &:focus {
     outline: 3px solid ${ROYAL_BLUE};
     outline-offset: 2px;
+    text-decoration: ${LINK_TEXT_DECORATION};
   }
 
   &:active {

package/src/components/atoms/link/InternalLink.js

@@ -19,7 +19,8 @@ const InternalLink = forwardRef(
       margin,
       tabIndex = "0",
       dataQa,
-      extraStyles = ``
+      extraStyles = ``,
+      isUnderlined = true
     },
     ref
   ) => {
@@ -46,6 +47,7 @@ const InternalLink = forwardRef(
         tabIndex={tabIndex}
         extrastyles={extraStyles}
         data-qa={dataQa}
+        isUnderlined={isUnderlined}
         ref={ref}
       >
         {safeChildren(children, <span />)}

package/src/components/atoms/link/InternalLink.styled.js

@@ -28,15 +28,18 @@ export const StyledInternalLink = styled(
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
-  text-decoration: ${LINK_TEXT_DECORATION};
+  text-decoration: ${({ isUnderlined }) =>
+    isUnderlined ? LINK_TEXT_DECORATION : "none"};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};
+    text-decoration: ${LINK_TEXT_DECORATION};
   }
 
   &:focus {
     outline: 3px solid ${ROYAL_BLUE};
     outline-offset: 2px;
+    text-decoration: ${LINK_TEXT_DECORATION};
   }
 
   &:active {

package/src/components/molecules/contact-card/ContactCard.js

@@ -42,7 +42,7 @@ const ContactCard = ({
       background={WHITE}
       boxShadow="0px 2px 4px rgba(0, 0, 0, 0.25)"
       dataQa={createIdFromString(title, "contact-card")}
-      maxWidth={isMobile ? "100%" : "208px"}
+      maxWidth="100%"
       minWidth={isMobile ? "240px" : "208px"}
       minHeight="141px"
       padding="1.5rem"
@@ -108,14 +108,15 @@ const ContactCard = ({
                         dataQa={linkID}
                         href={link.link}
                         newTab={true}
+                        isUnderlined={false}
                         extraStyles={`
-                        flex-direction: row;
-                        align-items: center;
-                        align-content: flex-start;
-                        justify-content: space-between;
-                        word-break: break-word;
-                        ${TextWrapStyles}
-                      `}
+                          flex-direction: row;
+                          align-items: center;
+                          align-content: flex-start;
+                          justify-content: space-between;
+                          word-break: break-word;
+                          ${TextWrapStyles}
+                        `}
                         size={FONT_SIZE.SM}
                         lineHeight="1.313rem"
                       >
@@ -132,10 +133,14 @@ const ContactCard = ({
                         to={link.link}
                         dataQa={linkID}
                         fontSize={FONT_SIZE.SM}
+                        color={linkThemeValues.externalLinkColor}
+                        isUnderlined={false}
+                        active={false}
+                        lineheight="1.313rem"
                         extraStyles={`
-                        word-break: break-word;
-                        ${TextWrapStyles}
-                      `}
+                          word-break: break-word;
+                          ${TextWrapStyles}
+                        `}
                       >
                         {link.text}
                       </InternalLink>

package/src/components/molecules/contact-card/ContactCard.stories.js

@@ -60,6 +60,10 @@ export const BasicContactCard = {
     content:
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",
     links: [
+      {
+        text: "Wallet Login",
+        link: "/login"
+      },
       {
         text: "Cityville Home",
         link: "https://cityville-demos.uat.cityba.se/"

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,110 @@
+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}
+      >
+        <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,80 @@
+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"
+    }
+  },
+  render: args => {
+    return <RegistrationBanner {...args} key="registration-banner-standard" />;
+  }
+};

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

@@ -0,0 +1,44 @@
+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 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,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;