@thecb/components 10.7.0-beta.2 → 10.7.1-beta.1

package/package.json

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

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -89,8 +89,6 @@ const ButtonWithAction = forwardRef(
       variant
     );
     const { isMobile } = themeContext;
-    console.log("button text / theme context is", text, themeContext);
-    console.log("button text / theme values are", text, themeValues);
 
     const hoverStyles = `
       outline: none;

package/src/components/atoms/wallet-name/WalletName.js

@@ -7,7 +7,6 @@ import { ThemeContext } from "styled-components";
 import Module from "../../molecules/module/Module";
 import Spinner from "../spinner/Spinner";
 import { CHARADE_GREY } from "../../../constants/colors";
-import { noop } from "../../../util/general";
 
 const WalletName = ({
   mainText, // left side text
@@ -16,7 +15,9 @@ const WalletName = ({
   actionText = null, // right side hyperlinked text
   disableAction = false,
   linkButtonExtraStyles = "", // hyperlinked text extraStyles
-  isLoading = false // shows a spinner on the left when true
+  isLoading = false, // shows a spinner on the left when true
+  dataQa = null,
+  actionTextPositionMobile = "outside" // whether action text is outside/below box or inside it
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -49,7 +50,7 @@ const WalletName = ({
               mainText && <Text>{mainText}</Text>
             )}
           </Box>
-          {!isMobile && (
+          {(actionTextPositionMobile === "inside" || !isMobile) && (
             <Box padding="0">
               {text && <Text variant="pXS">{text}</Text>}
               {(text || actionText) && <>&nbsp;</>}
@@ -57,6 +58,7 @@ const WalletName = ({
                 <ButtonWithAction
                   disabled={disableAction}
                   text={actionText}
+                  dataQa={dataQa}
                   action={action}
                   variant="smallGhost"
                   extraStyles={`
@@ -71,7 +73,7 @@ const WalletName = ({
           )}
         </Cluster>
       </Module>
-      {isMobile && (
+      {!!isMobile && actionTextPositionMobile === "outside" && (
         <Cluster
           align="center"
           justify={text || actionText ? "flex-end" : "flex-start"}

package/src/components/atoms/wallet-name/WalletName.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 import WalletName from "./WalletName";
-import { text, object, boolean } from "@storybook/addon-knobs";
+import { text, object, boolean, select } from "@storybook/addon-knobs";
 import page from "../../../../.storybook/page";
 
 export const walletName = () => {
@@ -12,6 +12,31 @@ export const walletName = () => {
       text={text("text", "Not you?", "props")}
       disableAction={boolean("disableAction", false, "props")}
       isLoading={boolean("isLoading", false, "props")}
+      actionTextPositionMobile={select(
+        "actionTextPositionMobile",
+        { inside: "inside", outside: "outside" },
+        "outside",
+        "props"
+      )}
+    />
+  );
+};
+
+export const walletNameWithOverrides = () => {
+  return (
+    <WalletName
+      mainText={text("mainText", "Firstname Lastname", "props")}
+      action={object("action", () => window.alert("action fired!"), "props")}
+      actionText={text("actionText", "Check out as a guest", "props")}
+      text={text("text", "Not you?", "props")}
+      disableAction={boolean("disableAction", false, "props")}
+      isLoading={boolean("isLoading", false, "props")}
+      actionTextPositionMobile={select(
+        "actionTextPositionMobile",
+        { inside: "inside", outside: "outside" },
+        "outside",
+        "props"
+      )}
     />
   );
 };

package/src/components/atoms/wallet-name/index.d.ts

@@ -9,6 +9,8 @@ export interface WalletNameProps {
   text?: string | null;
   isLoading: boolean;
   buttonExtraStyles?: string;
+  dataQa?: string | null;
+  actionTextPositionMobile?: "inside" | "outside";
 }
 
 export const WalletName: React.FC<Expand<WalletNameProps> &

package/src/components/molecules/obligation/Obligation.js

@@ -15,8 +15,6 @@ import {
   InactiveControlsModule,
   InactiveTitleModule
 } from "./modules";
-import { themeComponent } from "../../../util/themeUtils";
-import { fallbackValues } from "./Obligation.theme";
 
 const Obligation = ({
   config,
@@ -39,8 +37,7 @@ const Obligation = ({
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
   inactiveLookupValue = "",
-  isInCustomerManagement = false,
-  themeValues
+  isInCustomerManagement = false
 }) => {
   /*
     The value of obligations is always an array. It can contain:
@@ -91,7 +88,6 @@ const Obligation = ({
                       configIconMap={config.iconMap}
                       iconValue={config.iconValue}
                       customAttributes={customAttributes}
-                      iconColor={themeValues.iconColor}
                     />
                   )}
                   <TitleModule
@@ -198,7 +194,6 @@ const Obligation = ({
                     configIconMap={config.iconMap}
                     iconValue={config.iconValue}
                     customAttributes={customAttributes}
-                    iconColor={themeValues.iconColor}
                   />
                   <InactiveTitleModule
                     title={inactiveLookupTitle}
@@ -261,4 +256,4 @@ const Obligation = ({
   return inactive ? inactiveObligation : activeObligation;
 };
 
-export default themeComponent(Obligation, "Obligation", fallbackValues);
+export default Obligation;

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

@@ -4,7 +4,7 @@ import { Box, Stack } from "../../../atoms/layouts";
 import Text from "../../../atoms/text";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
 import { displayCurrency, noop } from "../../../../util/general";
-import AutopayModalModule from "./AutopayModalModule";
+import { AutopayModalModule } from "./AutopayModalModule";
 
 const AmountModule = ({
   totalAmountDue,

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

@@ -6,10 +6,11 @@ import { AutopayOnIcon } from "../../../atoms/icons";
 import { Box, Cluster } from "../../../atoms/layouts";
 import { SEA_GREEN } from "../../../../constants/colors";
 import { ACH_METHOD, CC_METHOD } from "../../../../constants/general";
+import { fallbackValues } from "./AutopayModalModule.theme";
+import { themeComponent } from "../../../../util/themeUtils";
 import { titleCaseString, noop } from "../../../../util/general";
-import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
 
-const AutopayModalModule = ({
+const AutopayModal = ({
   autoPayActive,
   autoPaySchedule,
   paymentPlanSchedule,
@@ -19,6 +20,7 @@ const AutopayModalModule = ({
   navigateToSettings,
   controlType = "tertiary",
   isMobile,
+  themeValues,
   isPaymentPlan,
   nextAutopayDate,
   dueDate,
@@ -73,12 +75,6 @@ const AutopayModalModule = ({
         }
       : navigateToSettings
   };
-  const modalLinkHoverFocus = `
-    outline: none;
-    cursor: pointer;
-    text-decoration: underline;
-    text-decoration-color: #317D4F;
-  `;
 
   const hoverStyles = "text-decoration: underline;";
   const activeStyles = "text-decoration: underline;";
@@ -146,8 +142,8 @@ const AutopayModalModule = ({
                 tabIndex="0"
                 dataQa={`${shortPlan} On`}
                 color={SEA_GREEN}
-                weight={FONT_WEIGHT_REGULAR}
-                hoverStyles={modalLinkHoverFocus}
+                weight={themeValues.fontWeight}
+                hoverStyles={themeValues.modalLinkHoverFocus}
                 extraStyles={`padding-left: 0.25rem;`}
                 disabled={disableActions}
               >
@@ -171,4 +167,8 @@ const AutopayModalModule = ({
   );
 };
 
-export default AutopayModalModule;
+export const AutopayModalModule = themeComponent(
+  AutopayModal,
+  "AutopayModal",
+  fallbackValues
+);

package/src/components/molecules/obligation/modules/AutopayModalModule.theme.js

@@ -0,0 +1,20 @@
+import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
+
+const color = "#15749D";
+const hoverColor = "#116285";
+const activeColor = "#0E506D";
+const linkColor = "#3176AA";
+const fontWeight = FONT_WEIGHT_REGULAR;
+const modalLinkHoverFocus = `outline: none;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: #317D4F;`;
+
+export const fallbackValues = {
+  color,
+  hoverColor,
+  activeColor,
+  linkColor,
+  fontWeight,
+  modalLinkHoverFocus
+};

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

@@ -1,6 +1,10 @@
 import React from "react";
 import { iconsMap } from "../icons";
 import { Box, Cluster } from "../../../atoms/layouts";
+import { themeComponent } from "../../../../util/themeUtils";
+import { fallbackValues } from "../../../atoms/icons/Icons.theme";
+
+// Uses the theme values (singleIconColor) for the other icons, located in /atoms/icons
 
 const IconsModule = ({
   icon,
@@ -8,7 +12,7 @@ const IconsModule = ({
   configIconMap,
   iconValue,
   customAttributes,
-  iconColor
+  themeValues
 }) => {
   let Icon;
   if (typeof icon === "object") {
@@ -21,10 +25,10 @@ const IconsModule = ({
   return (
     <Box padding="0 1rem 0 0">
       <Cluster justify="center" align="center">
-        <Icon color={iconColor} />
+        <Icon color={themeValues.singleIconColor} />
       </Cluster>
     </Box>
   );
 };
 
-export default IconsModule;
+export default themeComponent(IconsModule, "Icon", fallbackValues, "primary");

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { GHOST_GREY } from "../../../../constants/colors";
 import { Box, Cluster } from "../../../atoms/layouts";
-import AutopayModalModule from "./AutopayModalModule";
+import { AutopayModalModule } from "./AutopayModalModule";
 import RemoveAccountModalModule from "./RemoveAccountModalModule";
 import { noop } from "../../../../util/general";
 

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Box, Cluster } from "../../../atoms/layouts";
 import ButtonWithAction from "../../../atoms/button-with-action";
-import AutopayModalModule from "./AutopayModalModule";
+import { AutopayModalModule } from "./AutopayModalModule";
 import { GHOST_GREY } from "../../../../constants/colors";
 import AmountModule from "./AmountModule";
 import { noop } from "../../../../util/general";

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -25,7 +25,9 @@ const PaymentButtonBar = ({
   hideBackButton = false,
   buttonGroupStyles,
   hideAdditionalButton = false,
-  additionalButton
+  additionalButton,
+  nextButtonTestId = null,
+  backButtonTestId = null
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -36,7 +38,7 @@ const PaymentButtonBar = ({
         url={cancelURL}
         variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
-        dataQa={cancelText}
+        dataQa={backButtonTestId || cancelText}
         aria-labelledby={`${kebabCaseString(cancelText)}-button`}
         role="link"
       />
@@ -60,7 +62,7 @@ const PaymentButtonBar = ({
       text={redirectText}
       variant={forwardButtonVariant}
       extraStyles={isMobile && "flex-grow: 1"}
-      dataQa={redirectText}
+      dataQa={nextButtonTestId || redirectText}
       disabled={isForwardButtonDisabled}
       aria-labelledby={`${kebabCaseString(redirectText)}-button`}
       role={forwardButtonAriaRole}
@@ -73,7 +75,7 @@ const PaymentButtonBar = ({
         action={forwardButtonAction}
         isLoading={forwardButtonLoading}
         extraStyles={isMobile && "flex-grow: 1"}
-        dataQa={forwardButtonText}
+        dataQa={nextButtonTestId || forwardButtonText}
         disabled={isForwardButtonDisabled}
         aria-labelledby={`${kebabCaseString(forwardButtonText)}-button`}
         role={forwardButtonAriaRole}

package/src/components/molecules/radio-section/RadioSection.js

@@ -58,6 +58,7 @@ const RadioSection = ({
   ariaDescribedBy,
   isSectionRequired = false,
   groupedSections,
+  borderOverride,
   ...rest
 }) => {
   const [focused, setFocused] = useState(null);
@@ -98,7 +99,7 @@ const RadioSection = ({
   return (
     <Box
       padding="1px"
-      border={`1px solid ${themeValues.borderColor}`}
+      border={borderOverride || `1px solid ${themeValues.borderColor}`}
       borderRadius="4px"
       extraStyles={containerStyles}
       role="radiogroup"

package/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.js

@@ -3,14 +3,22 @@ import { ThemeContext } from "styled-components";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import { Box, Cluster } from "../../atoms/layouts";
-import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
+import { CHARADE_GREY, WHITE } from "../../../constants/colors";
 import ButtonWithLink from "../../atoms/button-with-link";
 import { ForgotPasswordIcon } from "../../atoms/icons";
 import withWindowSize from "../../withWindowSize";
 import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
+import { fallbackValues } from "./ResetConfirmationForm.theme";
+import { createThemeValues } from "../../../util/themeUtils";
 
 const ResetConfirmationForm = () => {
-  const { isMobile } = useContext(ThemeContext);
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "ResetConfirmationForm"
+  );
+  const { isMobile } = themeContext;
 
   return (
     <Box
@@ -20,7 +28,11 @@ const ResetConfirmationForm = () => {
       background={WHITE}
       boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
     >
-      <Box background={GRECIAN_GREY} minWidth="100%" padding="0.5rem">
+      <Box
+        background={themeValues.bannerBackgroundColor}
+        minWidth="100%"
+        padding="0.5rem"
+      >
         <Cluster justify="center" align="center">
           <ForgotPasswordIcon />
         </Cluster>

package/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.theme.js

@@ -0,0 +1,9 @@
+import { colors } from "../../../constants";
+
+const { GRECIAN_GREY } = colors;
+
+const bannerBackgroundColor = GRECIAN_GREY;
+
+export const fallbackValues = {
+  bannerBackgroundColor
+};

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.js

@@ -3,14 +3,22 @@ import { ThemeContext } from "styled-components";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import { Box, Cluster } from "../../atoms/layouts";
-import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
+import { CHARADE_GREY, WHITE } from "../../../constants/colors";
 import ButtonWithLink from "../../atoms/button-with-link";
 import { ForgotPasswordIcon } from "../../atoms/icons";
 import withWindowSize from "../../withWindowSize";
 import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
+import { fallbackValues } from "./ResetPasswordSuccess.theme";
+import { createThemeValues } from "../../../util/themeUtils";
 
-const ResetConfirmationForm = () => {
-  const { isMobile } = useContext(ThemeContext);
+const ResetPasswordSuccess = () => {
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "ResetPasswordSuccess"
+  );
+  const { isMobile } = themeContext;
 
   return (
     <Box
@@ -20,7 +28,11 @@ const ResetConfirmationForm = () => {
       background={WHITE}
       boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
     >
-      <Box background={GRECIAN_GREY} minWidth="100%" padding="0.5rem">
+      <Box
+        background={themeValues.bannerBackgroundColor}
+        minWidth="100%"
+        padding="0.5rem"
+      >
         <Cluster justify="center" align="center">
           <ForgotPasswordIcon />
         </Cluster>
@@ -53,4 +65,4 @@ const ResetConfirmationForm = () => {
     </Box>
   );
 };
-export default withWindowSize(ResetConfirmationForm);
+export default withWindowSize(ResetPasswordSuccess);

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.theme.js

@@ -0,0 +1,9 @@
+import { colors } from "../../../constants";
+
+const { GRECIAN_GREY } = colors;
+
+const bannerBackgroundColor = GRECIAN_GREY;
+
+export const fallbackValues = {
+  bannerBackgroundColor
+};

package/src/components/molecules/obligation/Obligation.theme.js

@@ -1,7 +0,0 @@
-import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
-
-const iconColor = ROYAL_BLUE_VIVID;
-
-export const fallbackValues = {
-  iconColor
-};

package/src/stories/Button.stories.ts

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta: Meta<typeof Button> = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};

package/src/stories/Button.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import './button.css';
-
-interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};