@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

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

@@ -0,0 +1,115 @@
+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
+          </Heading>
+          <Text
+            extraStyles={`
+              display: block;
+              padding: ${isMobile ? ".125rem 0 1rem" : "0"}
+            `}
+            fontSize={isMobile ? FONT_SIZE.MD : FONT_SIZE.LG}
+            color={themeValues.secondaryColor}
+          >
+            Save payment methods and billing 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"
+              extraStyles="min-width: 100%"
+            >
+              <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 color={themeValues.primaryColor} />
+            </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,46 @@
+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.primaryColor, 90, "lighten")};
+  padding: 2rem;
+`;
+
+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;
+  width: ${({ isMobile }) => (isMobile ? "100%" : "222px")};
+  padding-left: ${({ isMobile }) => (isMobile ? "0" : "2rem")};
+  > * {
+    width: inherit;
+  }
+`;
+
+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,6 @@
+import { CHARADE_GREY, ROYAL_BLUE_VIVID } from "../../../constants/colors";
+
+export const fallbackValues = {
+  primaryColor: ROYAL_BLUE_VIVID,
+  secondaryColor: CHARADE_GREY
+};

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;

package/src/components/molecules/registration-form/RegistrationForm.js

@@ -36,7 +36,8 @@ const RegistrationForm = ({
   };
   const emailErrorMessages = {
     [required.error]: "Email is required",
-    [isProbablyEmail.error]: "Invalid email address"
+    [isProbablyEmail.error]:
+      "Please enter a valid email address in the format user@example.com"
   };
   const passwordErrorMessages = {
     [required.error]: "Password is required",

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)`}
@@ -35,7 +35,9 @@ const TabSidebar = ({ links, isMobile, themeValues }) => (
         <InternalLink
           to={route}
           key={`${route}-${index}`}
-          extraStyles={`text-decoration: none;
+          isUnderlined={false}
+          hoverUnderline={false}
+          extraStyles={`
             &:hover {
             ${
               active

package/src/components/molecules/tabs/Tabs.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from "react";
+import React, { useState, Fragment, useEffect } from "react";
 import { Stack, Box, Cluster } from "../../atoms/layouts";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./Tabs.theme";
@@ -8,9 +8,25 @@ const HORIZONTAL = "horizontal";
 
 const Tabs = ({
   tabsConfig,
-  tabsDisplayMode // can be either HORIZONTAL or VERTICAL
+  tabsDisplayMode = HORIZONTAL,
+  tabsPadding = "0",
+  contentPadding = "0",
+  extraStyles = "",
+  ...props
 }) => {
-  const [activeTab, toggleActiveTab] = useState(tabsConfig.tabs[0].label);
+  const [activeTab, toggleActiveTab] = useState(
+    tabsConfig.tabs[0]?.label || null
+  );
+
+  useEffect(() => {
+    const currentTabExists = tabsConfig.tabs.some(
+      tab => tab.label === activeTab
+    );
+
+    if (!activeTab || !currentTabExists) {
+      toggleActiveTab(tabsConfig.tabs[0]?.label || null);
+    }
+  }, [tabsConfig, activeTab]);
 
   const createTabs = (tabConfig, activeTab) => {
     return tabConfig.tabs.map(tab => {
@@ -25,7 +41,7 @@ const Tabs = ({
     });
   };
 
-  const showHorozontal = (tabsConfig, activeTab) => {
+  const showHorizontal = (tabsConfig, activeTab) => {
     return (
       <Cluster justify={"space-around"}>
         {createTabs(tabsConfig, activeTab)}
@@ -38,14 +54,14 @@ const Tabs = ({
   };
 
   return (
-    <Box className="tabs">
-      <Box className="tab-list">
+    <Box className="tabs" padding="0" extraStyles={extraStyles} {...props}>
+      <Box className="tab-list" padding={tabsPadding}>
         {tabsDisplayMode == HORIZONTAL
-          ? showHorozontal(tabsConfig, activeTab)
+          ? showHorizontal(tabsConfig, activeTab)
           : showVertical(tabsConfig, activeTab)}
       </Box>
-      <Box className="tab-content">
-        <Box>
+      <Box className="tab-content" padding={contentPadding}>
+        <Box padding="0">
           {tabsConfig.tabs.map((tab, idx) => {
             if (tab.label !== activeTab) return undefined;
             return <Fragment key={idx}>{tab.content}</Fragment>;

package/src/components/molecules/tabs/Tabs.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as TabsStories from './Tabs.stories.js';
+
+<Meta of={TabsStories} />
+
+<Title />
+
+Currently used in POS, the Tabs component is a small widget that takes a configuration object and creates a tabbable toggle between arbitrary pieces of content.
+
+The example displays a form on one tab and basic text on the other, but there is no limit to the content that can be displayed inside of the tabs. Tabs can be stacked horizontally or vertically on top of the content.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

package/src/components/molecules/tabs/Tabs.stories.js

@@ -0,0 +1,149 @@
+import React from "react";
+import { Box, Center, Cover } from "../../atoms/layouts";
+import Tabs from "./Tabs";
+import { fn } from "@storybook/test";
+import PaymentFormCard from "../payment-form-card";
+import * as PaymentFormCardState from "../payment-form-card/PaymentFormCard.state";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+
+const store = createStore(
+  PaymentFormCardState.reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const ConnectedPaymentFormCard = connect(
+  PaymentFormCardState.mapStateToProps,
+  PaymentFormCardState.mapDispatchToProps
+)(PaymentFormCard);
+
+const meta = {
+  title: "Molecules/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    tabsConfig: undefined,
+    tabsDisplayMode: undefined
+  },
+  argTypes: {
+    tabsConfig: {
+      description:
+        "Object containing an array of tabs to show, along with their label, active state, and associated content",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    tabsDisplayMode: {
+      description:
+        "Whether to display tabs in horizontal or vertical configuration. Use 'horizontal' for horitzontal config. All other values will result in vertical configuration.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export default meta;
+
+export const HoriztonalTabs = {
+  args: {
+    tabsConfig: {
+      tabs: [
+        {
+          label: "Credit Card",
+          active: true,
+          content: (
+            <ConnectedPaymentFormCard
+              variant="checkout"
+              hideTitle
+              hideZipCode
+              fields={{
+                ...PaymentFormCardState.mapStateToProps(store.getState())
+              }}
+              {...PaymentFormCardState.mapDispatchToProps(store.dispatch)}
+              fees={{
+                label: "Service Fee",
+                type: "FLAT",
+                value: 0
+              }}
+              showWalletCheckbox
+              saveToWallet={fn()}
+              walletCheckboxMarked
+              termsContent={"terms"}
+              termsTitle={"Terms and Conditions"}
+            />
+          )
+        },
+        {
+          label: "ACH Payment",
+          active: true,
+          content: (
+            <Box minWidth="500px" minHeight="400px">
+              <Center>
+                <Cover singleChild>ACH Payment Form</Cover>
+              </Center>
+            </Box>
+          )
+        }
+      ]
+    },
+    tabsDisplayMode: "horizontal"
+  }
+};
+
+export const VerticalTabs = {
+  args: {
+    tabsConfig: {
+      tabs: [
+        {
+          label: "Credit Card",
+          active: true,
+          content: (
+            <ConnectedPaymentFormCard
+              variant="checkout"
+              hideTitle
+              hideZipCode
+              fields={{
+                ...PaymentFormCardState.mapStateToProps(store.getState())
+              }}
+              {...PaymentFormCardState.mapDispatchToProps(store.dispatch)}
+              fees={{
+                label: "Service Fee",
+                type: "FLAT",
+                value: 0
+              }}
+              showWalletCheckbox
+              saveToWallet={fn()}
+              walletCheckboxMarked
+              termsContent={"terms"}
+              termsTitle={"Terms and Conditions"}
+            />
+          )
+        },
+        {
+          label: "ACH Payment",
+          active: true,
+          content: (
+            <Box minWidth="500px" minHeight="400px">
+              <Center>
+                <Cover singleChild>ACH Payment Form</Cover>
+              </Center>
+            </Box>
+          )
+        }
+      ]
+    }
+  }
+};

package/src/components/molecules/tabs/index.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface TabConfig {
+  label: string;
+  content: React.ReactNode;
+}
+
+export interface TabsConfigObject {
+  tabs: TabConfig[];
+}
+
+export interface TabsProps {
+  tabsConfig: TabsConfigObject;
+  tabsDisplayMode?: "horizontal" | "vertical";
+}
+
+export declare const Tabs: React.FC<Expand<TabsProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export default Tabs;

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -54,7 +54,7 @@ const TermsAndConditionsModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       textDecoration={themeValues.modalLinkTextDecoration}
-      extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
+      extraStyles={`display: inline-block; width: fit-content; cursor: pointer; min-height: 24px; line-height: 24px;`}
       role="button" // This should always be a "button" since it opens a modal
       className="modal-trigger"
     >