@thecb/components 11.2.2-beta.0 → 11.2.3-beta.0

package/package.json

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

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

@@ -31,7 +31,7 @@ const ExternalLinkIcon = ({ linkColor, text }) => (
       />
     </mask>
     <g mask={`url(#mask0_902_435-${text})`}>
-      <rect x="-0.0864258" width="14" height="14" fill={linkColor} />
+      <rect x="-0.0864258" width="14" height="14" fill="none" />
     </g>
   </svg>
 );

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

@@ -0,0 +1,125 @@
+import React, { useContext } from "react";
+import { Box, Stack } from "../../atoms/layouts";
+import { ExternalLink } 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 ExternalLinkIcon from "../../atoms/icons/ExternalLinkIcon";
+import SolidDivider from "../../atoms/solid-divider";
+import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
+import { createThemeValues } from "../../../util/themeUtils";
+
+const ContactCard = ({
+  title,
+  secondTitle = "Helpful Links",
+  content = "",
+  links = [],
+  extraStyles = "",
+  titleVariant = "h3",
+  ariaLabel = "Contact Information",
+  linkVariant = "primary"
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
+  const linkFallbackValues = { externalLinkColor: ROYAL_BLUE_VIVID };
+  const linkThemeValues = createThemeValues(
+    themeContext,
+    linkFallbackValues,
+    "Link",
+    linkVariant
+  );
+
+  return (
+    <Styled.Container
+      borderRadius="8px"
+      boxShadow="0px 2px 4px rgba(0, 0, 0, 0.25)"
+      dataQa={createIdFromString(title, "contact-card")}
+      maxWidth={isMobile ? "100%" : "208px"}
+      minWidth={isMobile ? "240px" : "208px"}
+      minHeight="141px"
+      padding="1.5rem"
+      extraStyles={extraStyles}
+      role="complementary"
+      aria-label={ariaLabel}
+    >
+      <Stack
+        childGap="8px"
+        bottomItem={3}
+        justify="space-between"
+        style={{ width: "100%" }}
+        fullHeight
+      >
+        <Box padding={0} width="100%">
+          <Styled.Title
+            variant={titleVariant}
+            margin={0}
+            fontSize={FONT_SIZE.MD}
+          >
+            {title}
+          </Styled.Title>
+        </Box>
+        <Box padding={"0"} width="100%">
+          <Styled.Content>{content}</Styled.Content>
+        </Box>
+      </Stack>
+      {links.length > 0 && (
+        <>
+          <SolidDivider aria-hidden={true} />
+          <Stack
+            childGap={"8px"}
+            bottomItem={3}
+            justify="space-between"
+            style={{ width: "100%" }}
+            fullHeight
+          >
+            <Styled.Title
+              variant={titleVariant}
+              margin={0}
+              fontSize={FONT_SIZE.MD}
+            >
+              {secondTitle}
+            </Styled.Title>
+            <Stack
+              childGap={"4px"}
+              justify="space-between"
+              style={{ width: "100%" }}
+              fullHeight
+            >
+              {links.map(link => {
+                const linkID = createIdFromString(
+                  link.text,
+                  "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>
+                );
+              })}
+            </Stack>
+          </Stack>
+        </>
+      )}
+    </Styled.Container>
+  );
+};
+
+export default ContactCard;

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

@@ -0,0 +1,76 @@
+import React from "react";
+import ContactCard from "./ContactCard";
+
+const meta = {
+  title: "Molecules/ContactCard",
+  component: ContactCard,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    title: "City Hall Payment Center",
+    extraStyles: "",
+    titleVariant: "h3"
+  },
+  argTypes: {
+    title: {
+      description: "Text to display in the ContactCard's heading area",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "City Hall Payment Center" }
+      }
+    },
+    content: {
+      description: "Text to display in the ContactCard's content area",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    links: {
+      description: "Array of links to display in the ContactCard",
+      table: {
+        type: { summary: "array" },
+        defaultValue: { summary: "[]" }
+      }
+    },
+    extraStyles: {
+      description: "Extra styles to apply to the ContactCard",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    titleVariant: {
+      description: "HTML element to use for heading element, default is h3",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h3" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const BasicContactCard = {
+  args: {
+    title: "City Hall Payment Center",
+    content:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",
+    links: [
+      {
+        text: "Cityville Home",
+        link: "https://cityville-demos.uat.cityba.se/"
+      },
+      {
+        text: "Contact Us",
+        link: "https://eunasolutions.com/contact-us/"
+      }
+    ]
+  },
+  render: args => {
+    return <ContactCard {...args} key="contact-card-basic" extraStyles={``} />;
+  }
+};

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

@@ -0,0 +1,47 @@
+import styled 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";
+
+export const Container = styled(Box)`
+  height: fit-content;
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+  border-radius: 8px;
+`;
+
+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};
+`;
+
+export const Content = styled(Box)`
+  padding: 0;
+  font-size: ${FONT_SIZE.SM};
+  line-height: 1.313rem;
+  overflow-wrap: normal;
+  letter-spacing: 0.14px;
+`;
+
+export const Footer = styled(Stack)`
+  width: 100%;
+`;
+
+export const Divider = styled(Box)`
+  padding: 0;
+  height: 1px;
+  width: 100%;
+`;

package/src/components/molecules/contact-card/index.d.ts

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from "react";
+import Expand from "../../../util/expand";
+
+export interface ContactCardProps {
+  title?: string; // title 1
+  secondTitle?: string; // title 2
+  content?: any; // content
+  links?: any; // list of links
+  extraStyles?: string; // extra styles
+  titleVariant?: string; // title variant
+  ariaLabel?: string; // aria label
+  linkVariant?: string; // link variant
+}
+
+export const ContactCard: React.FC<Expand<ContactCardProps> &
+  HTMLAttributes<HTMLElement>>;

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

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

package/src/components/molecules/index.js

@@ -43,3 +43,4 @@ export { default as WelcomeModule } from "./welcome-module";
 export { default as WorkflowTile } from "./workflow-tile";
 export { default as PopupMenu } from "./popup-menu";
 export { default as MultipleSelectFilter } from "./multiple-select-filter";
+export { default as ContactCard } from "./contact-card";

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/components/molecules/tab-sidebar/TabSidebar.js

@@ -16,11 +16,11 @@ import {
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./TabSidebar.theme";
 
-const TabSidebar = ({ links, isMobile, themeValues }) => (
+const TabSidebar = ({ links, isMobile, themeValues, minHeight = "100%" }) => (
   <Box
     padding="0"
     background={COOL_GREY_05}
-    minHeight="100%"
+    minHeight={minHeight}
     role="region"
     aria-label="Profile tabs"
     boxShadow={isMobile && `inset 0px -1px 0px 0px rgb(202, 206, 216)`}

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})`;
+};