@thecb/components 10.4.0-beta.0 → 10.4.0-beta.10

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

@@ -8,7 +8,7 @@ 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 } from "../../../../util/general";
+import { titleCaseString, noop } from "../../../../util/general";
 
 const AutopayModal = ({
   autoPayActive,
@@ -27,7 +27,11 @@ const AutopayModal = ({
   inactive,
   description,
   subDescription,
-  allowedPaymentInstruments
+  allowedPaymentInstruments,
+  disableActions = false,
+  action,
+  onClick,
+  onKeyPress
 }) => {
   const generateMethodNeededText = (planText, allowedPaymentInstruments) => {
     const allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
@@ -39,25 +43,27 @@ const AutopayModal = ({
         ? "checking account payment method"
         : "payment method";
 
-    return `To setup ${planText} you must have a saved ${methodRequired} and address. Do you want to save these now?`;
+    return `To set up ${planText} you must have a saved ${methodRequired} and address. Do you want to save these now?`;
   };
   const plan = isPaymentPlan ? "your payment plan" : "autopay";
   const shortPlan = isPaymentPlan ? "Payment Plan" : "Autopay";
-  const deactivateText = `deactivate ${shortPlan} for ${description}: ${subDescription}`;
-  const activateText = `Set Up ${shortPlan} for ${description}: ${subDescription}`;
+  const deactivateText = `Stop ${shortPlan.toLowerCase()} for ${titleCaseString(
+    description
+  )}: ${titleCaseString(subDescription)}`;
+  const activateText = `Set up ${shortPlan.toLowerCase()} for ${titleCaseString(
+    description
+  )}: ${titleCaseString(subDescription)}`;
   const nextDate = dueDate || nextAutopayDate;
   const modalExtraProps = {
-    modalHeaderText: autoPayActive
-      ? titleCaseString(deactivateText)
-      : titleCaseString(activateText),
+    modalHeaderText: autoPayActive ? deactivateText : activateText,
     modalBodyText: autoPayActive
-      ? `Are you sure you want to deactivate ${plan}? ${
-          !inactive && nextDate
-            ? `Your next payment will be due on ${nextDate}.`
+      ? `Are you sure you want to stop ${plan}? ${
+          !inactive && nextDate && nextDate !== "On"
+            ? "Your next payment will be due on " + nextDate + "."
             : ""
         }`
       : generateMethodNeededText(plan, allowedPaymentInstruments),
-    continueButtonText: autoPayActive ? `Disable ${shortPlan}` : "Add",
+    continueButtonText: autoPayActive ? `Stop ${shortPlan}` : "Add",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive
       ? () => {
@@ -83,7 +89,7 @@ const AutopayModal = ({
             }
             variant="secondary"
             action={() => {
-              toggleModal(true);
+              action || toggleModal(true);
             }}
             dataQa="Turn off Autopay"
             extraStyles={
@@ -91,6 +97,7 @@ const AutopayModal = ({
                 ? `flex-grow: 1; width: 100%; margin: 0;`
                 : `flex-grow: 1; min-width: 165px;`
             }
+            disabled={disableActions}
           />
         );
       }
@@ -100,10 +107,11 @@ const AutopayModal = ({
             text={autoPayActive ? `Manage ${shortPlan}` : `Set Up ${shortPlan}`}
             variant="tertiary"
             action={() => {
-              toggleModal(true);
+              action || toggleModal(true);
             }}
             dataQa="Manage Autopay"
             extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+            disabled={disableActions}
           />
         );
       }
@@ -112,7 +120,7 @@ const AutopayModal = ({
           <Box
             padding="0"
             onClick={() => {
-              toggleModal(true);
+              onClick || toggleModal(true);
             }}
             hoverStyles={hoverStyles}
             activeStyles={activeStyles}
@@ -125,16 +133,20 @@ const AutopayModal = ({
               <AutopayOnIcon />
               <Text
                 variant="pS"
-                onClick={() => toggleModal(true)}
-                onKeyPress={e => {
-                  e.key === "Enter" && toggleModal(true);
-                }}
+                onClick={() => onClick || toggleModal(true)}
+                onKeyPress={
+                  onKeyPress ||
+                  (e => {
+                    e.key === "Enter" && toggleModal(true);
+                  })
+                }
                 tabIndex="0"
                 dataQa={`${shortPlan} On`}
                 color={SEA_GREEN}
                 weight={themeValues.fontWeight}
                 hoverStyles={themeValues.modalLinkHoverFocus}
                 extraStyles={`padding-left: 0.25rem;`}
+                disabled={disableActions}
               >
                 {`${shortPlan} ${nextAutopayDate}`}
               </Text>
@@ -146,8 +158,8 @@ const AutopayModal = ({
   };
   return (
     <Modal
-      showModal={() => toggleModal(true)}
-      hideModal={() => toggleModal(false)}
+      showModal={disableActions ? noop : () => toggleModal(true)}
+      hideModal={disableActions ? noop : () => toggleModal(false)}
       modalOpen={modalOpen}
       {...modalExtraProps}
     >

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

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { GHOST_GREY } from "../../../../constants/colors";
-import ButtonWithAction from "../../../atoms/button-with-action";
 import { Box, Cluster } from "../../../atoms/layouts";
 import { AutopayModalModule } from "./AutopayModalModule";
 import RemoveAccountModalModule from "./RemoveAccountModalModule";
+import { noop } from "../../../../util/general";
 
 const InactiveControlsModule = ({
   autoPayEnabled,
@@ -21,7 +21,8 @@ const InactiveControlsModule = ({
   actions,
   description,
   subDescription,
-  allowedPaymentInstruments
+  allowedPaymentInstruments,
+  disableActions = false
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   const { deleteObligationAssoc } = actions;
@@ -58,15 +59,26 @@ const InactiveControlsModule = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
+              disableActions={disableActions}
+              action={disableActions ? noop : toggleModal(true)}
+              onClick={disableActions ? noop : toggleModal(true)}
+              onKeyPress={
+                disableActions
+                  ? noop
+                  : e => {
+                      e.key === "Enter" && toggleModal(true);
+                    }
+              }
             />
           </Box>
         )}
         <Box padding="0" extraStyles={`flex-grow: 1;`}>
           <RemoveAccountModalModule
             agencyName={agencyName}
-            removeAccount={handleRemoveAccount}
+            removeAccount={disableActions ? noop : handleRemoveAccount}
             accountType={configType === "ACCOUNT" ? "Account" : "Property"}
             isMobile={isMobile}
+            disableActions={disableActions}
           />
         </Box>
       </Cluster>

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

@@ -4,6 +4,7 @@ import ButtonWithAction from "../../../atoms/button-with-action";
 import { AutopayModalModule } from "./AutopayModalModule";
 import { GHOST_GREY } from "../../../../constants/colors";
 import AmountModule from "./AmountModule";
+import { noop } from "../../../../util/general";
 
 const PaymentDetailsActions = ({
   isMobile,
@@ -24,7 +25,7 @@ const PaymentDetailsActions = ({
   description,
   subDescription,
   allowedPaymentInstruments,
-  isInCustomerManagement = false
+  disableActions = false
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -80,6 +81,7 @@ const PaymentDetailsActions = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
+              disableActions={disableActions}
             />
           </Cluster>
         </Box>
@@ -101,7 +103,7 @@ const PaymentDetailsActions = ({
                   ? "Account Details"
                   : "Property Details"
               }
-              action={handleDetailsClick}
+              action={disableActions ? noop : handleDetailsClick}
               dataQa="Account Details"
               extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
             />
@@ -110,16 +112,23 @@ const PaymentDetailsActions = ({
             padding={isMobile ? "0 8px 0 0" : "0"}
             extraStyles={isMobile && `flex-grow: 1;`}
           >
-            {autoPayAvailable && !autoPayEnabled && !isInCustomerManagement ? (
+            {autoPayAvailable && !autoPayEnabled ? (
               <ButtonWithAction
                 variant="tertiary"
                 text={`Set Up ${planType}`}
                 action={() => {
-                  setDetailedObligation(obligations, config, obligationAssocID);
-                  handleAutopayAction();
+                  if (!disableActions) {
+                    setDetailedObligation(
+                      obligations,
+                      config,
+                      obligationAssocID
+                    );
+                    handleAutopayAction();
+                  }
                 }}
                 dataQa="Set Up Autopay"
                 extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+                disabled={disableActions}
               />
             ) : (
               <AutopayModalModule
@@ -138,30 +147,44 @@ const PaymentDetailsActions = ({
                 description={description}
                 subDescription={subDescription}
                 allowedPaymentInstruments={allowedPaymentInstruments}
+                disableActions={disableActions}
+                action={disableActions ? noop : toggleModal(true)}
+                onClick={disableActions ? noop : toggleModal(true)}
+                onKeyPress={
+                  disableActions
+                    ? noop
+                    : e => {
+                        e.key === "Enter" && toggleModal(true);
+                      }
+                }
               />
             )}
           </Box>
-          {!isMobile && !isInCustomerManagement && (
+          {!isMobile && (
             <Box padding={"0"}>
               <ButtonWithAction
                 isLoading={isLoading}
-                action={() => handleClick(obligations)}
+                action={disableActions ? noop : () => handleClick(obligations)}
                 text="Pay Now"
                 variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"
+                disabled={disableActions}
               />
             </Box>
           )}
         </Cluster>
-        {isMobile && !isInCustomerManagement && (
+        {isMobile && (
           <Box padding="8px 0 0" width="100%">
             <ButtonWithAction
               isLoading={isLoading}
-              action={() => handleClick(obligations)}
+              action={() =>
+                disableActions ? noop : () => handleClick(obligations)
+              }
               text="Pay Now"
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"
               extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
+              disabled={disableActions}
             />
           </Box>
         )}

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

@@ -8,7 +8,8 @@ const RemoveAccountModalModule = ({
   obligations = [],
   removeAccount,
   accountType,
-  isMobile
+  isMobile,
+  disableActions = false
 }) => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const lastItem = [...obligations].pop();
@@ -31,8 +32,8 @@ const RemoveAccountModalModule = ({
 
   return (
     <Modal
-      showModal={() => setModalIsOpen(true)}
-      hideModal={() => setModalIsOpen(false)}
+      showModal={disableActions ? noop : () => setModalIsOpen(true)}
+      hideModal={disableActions ? noop : () => setModalIsOpen(false)}
       modalOpen={modalIsOpen}
       modalHeaderText={`Remove ${accountType}`}
       modalBodyText={`Are you sure you want to remove the ${identifier} ${accounts}? Any autopay scheduled against ${
@@ -40,8 +41,10 @@ const RemoveAccountModalModule = ({
       } will be deactivated.`}
       continueButtonText="Remove"
       continueAction={() => {
-        removeAccount();
-        setModalIsOpen(false);
+        if (!disableActions) {
+          removeAccount();
+          setModalIsOpen(false);
+        }
       }}
       useDangerButton
     >
@@ -49,11 +52,12 @@ const RemoveAccountModalModule = ({
         <ButtonWithAction
           text="Remove"
           variant="secondary"
-          action={() => setModalIsOpen(true)}
+          action={disableActions ? noop : () => setModalIsOpen(true)}
           dataQa="Remove Account"
           extraStyles={
             isMobile ? `flex-grow: 1; width: 100%; margin: 0;` : `flex-grow: 1;`
           }
+          disabled={disableActions}
         />
       </Box>
     </Modal>

package/src/components/molecules/pagination/Pagination.js

@@ -94,6 +94,7 @@ export const getPagesPanel = (page, pagesCount) => {
 
 const Pagination = ({
   activeBorderWidth = "3px",
+  ariaLabel,
   arrowColor,
   borderRadius = "3px",
   buttonHeight = "44px",
@@ -107,7 +108,6 @@ const Pagination = ({
   pageNext,
   pagePrevious,
   setCurrentPage,
-  ariaLabel,
   themeValues
 }) => {
   const { isMobile } = useContext(ThemeContext);
@@ -115,12 +115,6 @@ const Pagination = ({
   const extraStyles = `
     min-width: ${buttonWidth}; min-height: 100%; padding: 0;
     border-radius: ${borderRadius};
-    &:hover, &:focus {
-      text-decoration: none;
-      > * > span {
-        text-decoration: none;
-      }
-    }
     > * > span {
       color: ${numberColor ?? themeValues.numberColor}
     }

package/src/components/molecules/pagination/Pagination.stories.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { number, text } from "@storybook/addon-knobs";
+import Pagination from "./Pagination";
+import page from "../../../../.storybook/page";
+
+export const pagination = () => (
+  <Pagination
+    activeBorderWidth={text("activeBorderWidth", "3px", "props")}
+    ariaLabel={text("ariaLabel", "Aria Label", "props")}
+    arrowColor={text("arrowColor", "#FFFFFF", "props")}
+    borderRadius={text("borderRadius", "3px", "props")}
+    buttonHeight={text("buttonHeight", "44px", "props")}
+    buttonWidth={text("buttonWidth", "44px", "props")}
+    childGap={text("childGap", "24px", "props")}
+    currentPage={number("currentPage", 2)}
+    fontSize={text("fontSize", "17px", "props")}
+    fontWeight={text("fontWeight", "900", "props")}
+    numberColor={text("numberColor", "#15749D", "props")}
+    pageCount={number("pageCount", 3)}
+    pageNext={() => {}}
+    pagePrevious={() => {}}
+    setCurrentPage={() => {}}
+    // themeValues
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/Pagination",
+  Component: Pagination
+});
+
+export default story;

package/src/components/molecules/pagination/Pagination.theme.js

@@ -1,8 +1,7 @@
 import {
   WHITE,
   MATISSE_BLUE,
-  ALABASTER_WHITE,
-  STORM_GREY
+  ALABASTER_WHITE
 } from "../../../constants/colors";
 
 const arrowColor = WHITE;

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

@@ -22,7 +22,10 @@ const PaymentButtonBar = ({
   redirectText = "Return",
   buttonFlexOverride,
   hideForwardButton = false,
-  hideBackButton = false
+  hideBackButton = false,
+  buttonGroupStyles,
+  hideAdditionalButton = false,
+  additionalButton
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -92,9 +95,11 @@ const PaymentButtonBar = ({
               : "flex-end"
           }
           align="center"
+          extraStyles={buttonGroupStyles}
         >
           {!hideBackButton && <Fragment>{backButton}</Fragment>}
           {!hideForwardButton && <Fragment>{forwardButton}</Fragment>}
+          {!hideAdditionalButton && <Fragment>{additionalButton}</Fragment>}
         </Cluster>
       </Box>
     </Fragment>

package/src/components/molecules/tab-sidebar/TabSidebar.js

@@ -35,8 +35,8 @@ const TabSidebar = ({ links, isMobile, themeValues }) => (
         <InternalLink
           to={route}
           key={`${route}-${index}`}
-          extraStyles={`&:hover {
-            text-decoration: none; 
+          extraStyles={`text-decoration: none;
+            &:hover {
             ${
               active
                 ? `> * {

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

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

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

@@ -1,6 +1,7 @@
 import {
   FONT_WEIGHT_REGULAR,
-  FONT_WEIGHT_SEMIBOLD
+  FONT_WEIGHT_SEMIBOLD,
+  LINK_TEXT_DECORATION
 } from "../../../constants/style_constants";
 
 const backgroundColor = { default: "#ffffff", footer: "#ffffff" };
@@ -22,11 +23,17 @@ const standardInteractionStyles = `
       outline-offset: 2px;
     }
 `;
+
 const modalLinkHoverFocus = {
   default: standardInteractionStyles,
   footer: standardInteractionStyles
 };
 
+const modalLinkTextDecoration = {
+  default: LINK_TEXT_DECORATION,
+  footer: "none"
+};
+
 export const fallbackValues = {
   backgroundColor,
   linkColor,
@@ -34,5 +41,6 @@ export const fallbackValues = {
   fontSize,
   lineHeight,
   fontWeight,
-  modalLinkHoverFocus
+  modalLinkHoverFocus,
+  modalLinkTextDecoration
 };

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

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

package/src/constants/index.d.ts

@@ -1,3 +1,4 @@
 import * as colors from "./colors";
+import * as styleConstants from "./style_constants";
 
-export { colors };
+export { colors, styleConstants };

package/src/constants/index.js

@@ -1,4 +1,13 @@
-import * as colors from "./colors";
-import * as fontWeights from "./style_constants";
+export * as colors from "./colors";
+export * as general from "./general";
+export * as regexConstants from "./regex_constants";
+export * as styleConstants from "./style_constants";
 
-export { colors, fontWeights };
+/**
+ * This export is named "fontWeights" and referenced as such in much existing code.
+ * Navigate Frontend is one example that uses this particular export. However, new
+ * usage of style constants should reference the `styleConstants` export instead.
+ *
+ * @deprecated
+ */
+export * as fontWeights from "./style_constants";

package/src/constants/style_constants.d.ts

@@ -0,0 +1,11 @@
+type StyleDeclaration = string;
+
+export const HEADER_HEIGHT: StyleDeclaration;
+export const FOOTER_HEIGHT: StyleDeclaration;
+export const SPACER_HEIGHT: StyleDeclaration;
+export const JUMBO_HEIGHT: StyleDeclaration;
+export const COMPACT_JUMBO_HEIGHT: StyleDeclaration;
+export const FONT_WEIGHT_REGULAR: StyleDeclaration;
+export const FONT_WEIGHT_BOLD: StyleDeclaration;
+export const FONT_WEIGHT_SEMIBOLD: StyleDeclaration;
+export const LINK_TEXT_DECORATION: StyleDeclaration;

package/src/constants/style_constants.js

@@ -8,6 +8,7 @@ const COMPACT_JUMBO_HEIGHT = "65px";
 const FONT_WEIGHT_REGULAR = "400";
 const FONT_WEIGHT_BOLD = "700";
 const FONT_WEIGHT_SEMIBOLD = "600";
+const LINK_TEXT_DECORATION = "underline solid 1px";
 
 export {
   HEADER_HEIGHT,
@@ -17,5 +18,6 @@ export {
   COMPACT_JUMBO_HEIGHT,
   FONT_WEIGHT_REGULAR,
   FONT_WEIGHT_BOLD,
-  FONT_WEIGHT_SEMIBOLD
+  FONT_WEIGHT_SEMIBOLD,
+  LINK_TEXT_DECORATION
 };