@thecb/components 11.2.3-beta.4 → 11.2.4-beta.1

package/package.json

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

package/src/components/atoms/icons/ExternalLinkIcon.js

@@ -1,12 +1,13 @@
 import React from "react";
 
-const ExternalLinkIcon = ({ linkColor, text }) => (
+const ExternalLinkIcon = ({ linkColor, text, ariaLabel = "External Link" }) => (
   <svg
     width="14"
     height="14"
     viewBox="0 0 14 14"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    aria-label={ariaLabel}
   >
     <path
       fillRule="evenodd"

package/src/components/atoms/layouts/Stack.js

@@ -19,6 +19,7 @@ const Stack = ({
   children,
   direction = "column",
   justify,
+  extraStyles,
   ...rest
 }) => (
   <StackWrapper
@@ -27,6 +28,7 @@ const Stack = ({
     fullHeight={fullHeight}
     direction={direction}
     justify={justify}
+    extraStyles={extraStyles}
     {...rest}
   >
     {safeChildren(children, <Fragment />)}

package/src/components/atoms/layouts/Stack.styled.js

@@ -27,4 +27,6 @@ export const StackWrapper = styled.div`
     }
   `
       : ``};
+
+  ${({ extraStyles }) => extraStyles}
 `;

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

@@ -1,14 +1,20 @@
 import React, { useContext } from "react";
+import * as R from "ramda";
 import { Box, Stack } from "../../atoms/layouts";
-import { ExternalLink } from "../../atoms";
+import { ExternalLink, InternalLink } from "../../atoms";
 import { ThemeContext } from "styled-components";
 import * as Styled from "./ContactCard.styled";
 import { createIdFromString } from "../../../util/general";
-import { FONT_SIZE } from "../../../constants/style_constants";
+import {
+  FONT_SIZE,
+  FONT_WEIGHT_SEMIBOLD
+} from "../../../constants/style_constants";
 import ExternalLinkIcon from "../../atoms/icons/ExternalLinkIcon";
 import SolidDivider from "../../atoms/solid-divider";
-import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
+import { ROYAL_BLUE_VIVID, WHITE } from "../../../constants/colors";
 import { createThemeValues } from "../../../util/themeUtils";
+import { TextWrapStyles } from "./ContactCard.styled";
+import { URL_TEST } from "../../../constants/regex_constants";
 
 const ContactCard = ({
   title,
@@ -33,9 +39,10 @@ const ContactCard = ({
   return (
     <Styled.Container
       borderRadius="8px"
+      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"
@@ -55,6 +62,7 @@ const ContactCard = ({
             variant={titleVariant}
             margin={0}
             fontSize={FONT_SIZE.MD}
+            weight={FONT_WEIGHT_SEMIBOLD}
           >
             {title}
           </Styled.Title>
@@ -77,13 +85,14 @@ const ContactCard = ({
               variant={titleVariant}
               margin={0}
               fontSize={FONT_SIZE.MD}
+              weight={FONT_WEIGHT_SEMIBOLD}
             >
               {secondTitle}
             </Styled.Title>
             <Stack
               childGap={"4px"}
               justify="space-between"
-              style={{ width: "100%" }}
+              extraStyles={`width: 100%;`}
               fullHeight
             >
               {links.map(link => {
@@ -92,26 +101,51 @@ const ContactCard = ({
                   "contact-card-link"
                 );
                 return (
-                  <ExternalLink
-                    key={linkID}
-                    dataQa={linkID}
-                    href={link.link}
-                    newTab={true}
-                    extraStyles={`
-                      flex-direction: row;
-                      align-items: center;
-                      align-content: flex-start;
-                      justify-content: space-between;
-                    `}
-                    size={FONT_SIZE.SM}
-                    lineHeight="1.313rem"
-                  >
-                    {link.text}
-                    <ExternalLinkIcon
-                      linkColor={linkThemeValues.externalLinkColor}
-                      text={link.text}
-                    />
-                  </ExternalLink>
+                  <>
+                    {R.test(URL_TEST, link.link) ? (
+                      <ExternalLink
+                        key={linkID}
+                        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}
+                        `}
+                        size={FONT_SIZE.SM}
+                        lineHeight="1.313rem"
+                      >
+                        {link.text}
+                        <ExternalLinkIcon
+                          linkColor={linkThemeValues.externalLinkColor}
+                          text={link.text}
+                          ariaLabel="(Opens in a new tab)"
+                        />
+                      </ExternalLink>
+                    ) : (
+                      <InternalLink
+                        key={linkID}
+                        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}
+                        `}
+                      >
+                        {link.text}
+                      </InternalLink>
+                    )}
+                  </>
                 );
               })}
             </Stack>

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/contact-card/ContactCard.styled.js

@@ -1,11 +1,14 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Heading from "../../atoms/heading";
-import Stack from "../../atoms/layouts/Stack";
 import { Box } from "../../atoms/layouts";
-import {
-  FONT_SIZE,
-  FONT_WEIGHT_SEMIBOLD
-} from "../../../constants/style_constants";
+import { FONT_SIZE } from "../../../constants/style_constants";
+
+export const TextWrapStyles = css`
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  max-width: 100%;
+`;
 
 export const Container = styled(Box)`
   height: fit-content;
@@ -15,33 +18,27 @@ export const Container = styled(Box)`
   align-items: flex-start;
   gap: 1.5rem;
   border-radius: 8px;
+  ${({ extraStyles }) => extraStyles}
 `;
 
 export const Title = styled(Heading)`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  align-self: stretch;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  background-color: transparent;
-  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+  ${TextWrapStyles}
 `;
 
 export const Content = styled(Box)`
+  word-break: break-word;
   padding: 0;
   font-size: ${FONT_SIZE.SM};
   line-height: 1.313rem;
-  overflow-wrap: normal;
   letter-spacing: 0.14px;
-`;
+  ${TextWrapStyles}
 
-export const Footer = styled(Stack)`
-  width: 100%;
-`;
+  p {
+    margin: 0;
+  }
 
-export const Divider = styled(Box)`
-  padding: 0;
-  height: 1px;
-  width: 100%;
+  p,
+  span {
+    line-height: 1.313rem;
+  }
 `;

package/src/components/molecules/index.js

@@ -29,7 +29,6 @@ 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/util/general.js

@@ -213,39 +213,3 @@ 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})`;
-};

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

@@ -1,112 +0,0 @@
-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}
-      role="banner"
-      aria-label="Registration Banner"
-      justify="center"
-    >
-      <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}
-          >
-            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

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

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

@@ -1,43 +0,0 @@
-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(Cluster)`
-  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

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

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

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