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

package/package.json

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

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";
@@ -48,6 +48,10 @@ const PaymentDetailsActions = ({
     setDetailedObligation(obligations, config, obligationAssocID);
     navigateToDetailedObligation(detailsSlug);
   };
+  const handlePayNowClick = disableActions
+    ? noop
+    : () => handleClick(obligations);
+
   return (
     <Box
       padding={isMobile ? "0" : "16px 0 0"}
@@ -149,7 +153,7 @@ const PaymentDetailsActions = ({
             <Box padding={"0"}>
               <ButtonWithAction
                 isLoading={isLoading}
-                action={disableActions ? noop : () => handleClick(obligations)}
+                action={handlePayNowClick}
                 text="Pay Now"
                 variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"
@@ -162,7 +166,7 @@ const PaymentDetailsActions = ({
           <Box padding="8px 0 0" width="100%">
             <ButtonWithAction
               isLoading={isLoading}
-              action={disableActions ? noop : () => handleClick(obligations)}
+              action={handlePayNowClick}
               text="Pay Now"
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"

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