@thecb/components 10.2.3 → 10.2.4-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.2.3",
+  "version": "10.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/button-with-action/ButtonWithAction.js

@@ -155,7 +155,9 @@ const ButtonWithAction = forwardRef(
                 variant={themeValues.fontSizeVariant}
                 color={themeValues.color}
                 textWrap={textWrap}
-                extraStyles={textExtraStyles}
+                extraStyles={
+                  disabled ? textExtraStyles + disabledStyles : textExtraStyles
+                }
               >
                 {text}
               </Text>

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

@@ -40,9 +40,7 @@ import {
   StatusUnknownIcon,
   AutopayIcon,
   KebabMenuIcon,
-  MultiCartIcon,
-  CloseIcon,
-  TrashIconV2
+  MultiCartIcon
 } from "./index";
 
 const story = page({
@@ -90,5 +88,3 @@ export const statusUnknownIcon = () => <StatusUnknownIcon />;
 export const autopayIcon = () => <AutopayIcon />;
 export const kebabMenuIcon = () => <KebabMenuIcon />;
 export const multiCartIcon = () => <MultiCartIcon />;
-export const closeIcon = () => <CloseIcon />;
-export const trashIconV2 = () => <TrashIconV2 />;

package/src/components/atoms/icons/index.d.ts

@@ -23,5 +23,3 @@ export * from "./XCircleIconMedium";
 export * from "./XCircleIconSmall";
 export * from "./KebabMenuIcon";
 export * from "./MultiCartIcon";
-export * from "./CloseIcon";
-export * from "./TrashIconV2";

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

@@ -88,8 +88,6 @@ import ChargebackReversalIconMedium from "./ChargebackReversalIconMedium";
 import PlusCircleIcon from "./PlusCircleIcon";
 import KebabMenuIcon from "./KebabMenuIcon";
 import MultiCartIcon from "./MultiCartIcon";
-import CloseIcon from "./CloseIcon";
-import TrashIconV2 from "./TrashIconV2";
 
 export {
   AccountsIcon,
@@ -181,7 +179,5 @@ export {
   ChargebackReversalIconMedium,
   PlusCircleIcon,
   KebabMenuIcon,
-  MultiCartIcon,
-  CloseIcon,
-  TrashIconV2
+  MultiCartIcon
 };

package/src/components/atoms/placeholder/Placeholder.js

@@ -17,6 +17,7 @@ import {
   PaymentMethodAddIcon
 } from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { noop } from "../../../util/general";
 
 const getLargeIcon = iconName => {
   switch (iconName) {
@@ -36,21 +37,27 @@ const PlaceholderContentWrapper = ({
   action,
   destination,
   children,
-  dataQa
+  dataQa,
+  disabled = false
 }) =>
   isLink ? (
-    <Link to={destination} data-qa={dataQa}>
+    <Link to={destination} data-qa={dataQa} disabled={disabled}>
       <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
         {children}
       </Box>
     </Link>
   ) : (
     <Box
-      onClick={action}
+      onClick={disabled ? noop : action}
       padding="0"
       minHeight="100%"
-      extraStyles={`cursor: pointer;`}
       dataQa={dataQa}
+      aria-disabled={disabled}
+      extraStyles={
+        disabled
+          ? "cursor: default; opacity: 0.7;"
+          : "cursor: pointer; opacity: 1;"
+      }
     >
       {children}
     </Box>
@@ -65,13 +72,15 @@ const Placeholder = ({
   variant,
   largeIcon,
   themeValues,
-  dataQa
+  dataQa,
+  disabled = false
 }) => (
   <PlaceholderContentWrapper
     isLink={isLink}
     action={action}
     destination={destination}
     dataQa={dataQa}
+    disabled={disabled}
   >
     <Box
       padding="0"
@@ -108,7 +117,7 @@ const Placeholder = ({
         <Box
           padding="0"
           tabIndex="0"
-          onKeyPress={e => e.key === "Enter" && action()}
+          onKeyPress={e => e.key === "Enter" && !disabled && action()}
         >
           <Cluster justify="center" align="center" minHeight="100%">
             <Switcher maxChildren={2} childGap="0">

package/src/components/atoms/placeholder/Placeholder.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { text, select } from "@storybook/addon-knobs";
+import { text, select, boolean } from "@storybook/addon-knobs";
 import Placeholder from "./Placeholder";
 import page from "../../../../.storybook/page";
 
@@ -21,14 +21,27 @@ const iconLabel = "largeIcon";
 const defaultIcon = "accounts";
 
 export const placeholder = () => (
-  <Placeholder
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    isLink
-    destination={text("destination", "add-account", "props")}
-    text={text("text", "Add an Account", "props")}
-    largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
-    key="placeholder"
-  />
+  <>
+    <h2>Placeholder w/Link</h2>
+    <Placeholder
+      variant={select(variantsLabel, variants, defaultValue, groupId)}
+      isLink
+      destination={text("destination", "/", "props")}
+      text={text("text", "Add an Account", "props")}
+      largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
+      key="placeholder1"
+      disabled={boolean("disabled", false, groupId)}
+    />
+    <h2>Placeholder w/Action</h2>
+    <Placeholder
+      variant={select(variantsLabel, variants, defaultValue, groupId)}
+      text={text("text", "Add an Account", "props")}
+      largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
+      key="placeholder2"
+      disabled={boolean("disabled", false, groupId)}
+      action={() => window.alert("Click event registered!")}
+    />
+  </>
 );
 
 const story = page({

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

@@ -5,4 +5,3 @@ export * from "./footer-with-subfooter";
 export * from "./popover";
 export * from "./radio-group";
 export * from "./toast-notification";
-export * from "./popup-menu";

package/src/components/molecules/index.js

@@ -40,4 +40,3 @@ export { default as Timeout } from "./timeout";
 export { default as ToastNotification } from "./toast-notification";
 export { default as WelcomeModule } from "./welcome-module";
 export { default as WorkflowTile } from "./workflow-tile";
-export { default as PopupMenu } from "./popup-menu";

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

@@ -36,7 +36,8 @@ const Obligation = ({
   inactive = false,
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
-  inactiveLookupValue = ""
+  inactiveLookupValue = "",
+  isInCustomerManagement = false
 }) => {
   /*
     The value of obligations is always an array. It can contain:
@@ -137,6 +138,7 @@ const Obligation = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
+              isInCustomerManagement={isInCustomerManagement}
             />
           )}
         </Stack>
@@ -160,6 +162,7 @@ const Obligation = ({
           description={description}
           subDescription={subDescription}
           allowedPaymentInstruments={allowedPaymentInstruments}
+          isInCustomerManagement={isInCustomerManagement}
         />
       )}
     </Box>

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

@@ -27,7 +27,8 @@ const AutopayModal = ({
   inactive,
   description,
   subDescription,
-  allowedPaymentInstruments
+  allowedPaymentInstruments,
+  isInCustomerManagement = false
 }) => {
   const generateMethodNeededText = (planText, allowedPaymentInstruments) => {
     const allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
@@ -80,6 +81,7 @@ const AutopayModal = ({
       case "secondary": {
         return (
           <ButtonWithAction
+            disabled={isInCustomerManagement}
             text={
               autoPayActive ? `Turn off ${shortPlan}` : `Set Up ${shortPlan}`
             }
@@ -99,6 +101,7 @@ const AutopayModal = ({
       case "tertiary": {
         return (
           <ButtonWithAction
+            disabled={isInCustomerManagement}
             text={autoPayActive ? `Manage ${shortPlan}` : `Set Up ${shortPlan}`}
             variant="tertiary"
             action={() => {

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

@@ -23,7 +23,8 @@ const PaymentDetailsActions = ({
   dueDate,
   description,
   subDescription,
-  allowedPaymentInstruments
+  allowedPaymentInstruments,
+  isInCustomerManagement = false
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -119,6 +120,7 @@ const PaymentDetailsActions = ({
                 }}
                 dataQa="Set Up Autopay"
                 extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+                disabled={isInCustomerManagement}
               />
             ) : (
               <AutopayModalModule
@@ -148,6 +150,7 @@ const PaymentDetailsActions = ({
                 text="Pay Now"
                 variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"
+                disabled={isInCustomerManagement}
               />
             </Box>
           )}
@@ -161,6 +164,7 @@ const PaymentDetailsActions = ({
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"
               extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
+              disabled={isInCustomerManagement}
             />
           </Box>
         )}

package/src/components/templates/default-page-template/DefaultPageTemplate.js

@@ -15,8 +15,7 @@ const CenterSingle = ({
   themeValues,
   maxWidth = "75rem",
   gutters = "2rem",
-  fillPageVertical = false,
-  background = COOL_GREY_05
+  fillPageVertical = false
 }) => {
   const themeContext = useContext(ThemeContext);
   const { isMobile } = themeContext;
@@ -25,7 +24,7 @@ const CenterSingle = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={background}
+      background={COOL_GREY_05}
       extraStyles="flex-grow: 1;"
     >
       <Cover

package/src/components/atoms/icons/CloseIcon.d.ts

@@ -1 +0,0 @@
-export const CloseIcon: JSX.Element;

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

@@ -1,48 +0,0 @@
-import React from "react";
-
-export const CloseIcon = ({
-  iconFill = "#3B414D",
-  iconWidth = "24",
-  iconHeight = "24",
-  ...rest
-}) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={iconWidth}
-      height={iconHeight}
-      viewBox="0 0 24 24"
-      fill="none"
-      {...rest}
-    >
-      <title>Close Icon</title>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17.3033 5.98982C17.108 5.79456 16.7915 5.79456 16.5962 5.98982L12 10.586L7.40381 5.98982C7.20854 5.79456 6.89196 5.79456 6.6967 5.98982L5.98959 6.69693C5.79433 6.89219 5.79433 7.20878 5.98959 7.40404L10.5858 12.0002L5.98959 16.5964C5.79433 16.7917 5.79433 17.1083 5.98959 17.3035L6.6967 18.0106C6.89196 18.2059 7.20854 18.2059 7.40381 18.0106L12 13.4144L16.5962 18.0106C16.7915 18.2059 17.108 18.2059 17.3033 18.0106L18.0104 17.3035C18.2057 17.1083 18.2057 16.7917 18.0104 16.5964L13.4142 12.0002L18.0104 7.40404C18.2057 7.20878 18.2057 6.89219 18.0104 6.69693L17.3033 5.98982Z"
-        fill={iconFill}
-      />
-      <mask
-        id="mask0_3727_16765"
-        style={{ maskType: "luminance" }}
-        maskUnits="userSpaceOnUse"
-        x="5"
-        y="5"
-        width="14"
-        height="14"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M17.3033 5.98982C17.108 5.79456 16.7915 5.79456 16.5962 5.98982L12 10.586L7.40381 5.98982C7.20854 5.79456 6.89196 5.79456 6.6967 5.98982L5.98959 6.69693C5.79433 6.89219 5.79433 7.20878 5.98959 7.40404L10.5858 12.0002L5.98959 16.5964C5.79433 16.7917 5.79433 17.1083 5.98959 17.3035L6.6967 18.0106C6.89196 18.2059 7.20854 18.2059 7.40381 18.0106L12 13.4144L16.5962 18.0106C16.7915 18.2059 17.108 18.2059 17.3033 18.0106L18.0104 17.3035C18.2057 17.1083 18.2057 16.7917 18.0104 16.5964L13.4142 12.0002L18.0104 7.40404C18.2057 7.20878 18.2057 6.89219 18.0104 6.69693L17.3033 5.98982Z"
-          fill="none"
-        />
-      </mask>
-      <g mask="url(#mask0_3727_16765)">
-        <path d="M0 0H24V24H0V0Z" fill={iconFill} />
-      </g>
-    </svg>
-  );
-};
-
-export default CloseIcon;

package/src/components/atoms/icons/TrashIconV2.d.ts

@@ -1 +0,0 @@
-export const TrashIconV2: JSX.Element;

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

@@ -1,41 +0,0 @@
-import React from "react";
-import { fallbackValues } from "./Icons.theme";
-import { themeComponent } from "../../../util/themeUtils";
-
-const TrashIconV2 = ({ themeValues, iconFill }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M11.5 4H14V6H4V4H6.5L7.21429 3H10.7857L11.5 4ZM6.99048 15C6.25714 15 5.65714 14.4857 5.65714 13.8571L4.85714 7H12.8571L12.0571 13.8571C12.0571 14.4857 11.4571 15 10.7238 15H6.99048Z"
-        fill={iconFill ?? themeValues.singleIconColor}
-      />
-      <mask
-        id="mask0_4292_11876"
-        style={{ maskType: "luminance" }}
-        maskUnits="userSpaceOnUse"
-        x="4"
-        y="3"
-        width="10"
-        height="12"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M11.5 4H14V6H4V4H6.5L7.21429 3H10.7857L11.5 4ZM6.99048 15C6.25714 15 5.65714 14.4857 5.65714 13.8571L4.85714 7H12.8571L12.0571 13.8571C12.0571 14.4857 11.4571 15 10.7238 15H6.99048Z"
-          fill="white"
-        />
-      </mask>
-      <g mask="url(#mask0_4292_11876)"></g>
-    </svg>
-  );
-};
-
-export default themeComponent(TrashIconV2, "Icons", fallbackValues, "primary");