@thecb/components 5.9.0-beta.5 → 5.9.1

package/src/components/templates/center-single/CenterSingle.js

@@ -4,7 +4,6 @@ import { fallbackValues } from "../templates.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowResize from "../../withWindowSize";
 import { Box, Center, Cover } from "../../atoms/layouts";
-import { COOL_GREY_05 } from "../../../constants/colors";
 
 const CenterSingle = ({
   header,
@@ -24,7 +23,7 @@ const CenterSingle = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={COOL_GREY_05}
+      background={themeValues.pageBackground}
       extraStyles="flex-grow: 1;"
     >
       <Cover centerOverride={isMobile && !centeredMobileContent}>

package/src/components/templates/center-stack/CenterStack.js

@@ -4,7 +4,6 @@ import { fallbackValues } from "../templates.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowResize from "../../withWindowSize";
 import { Box, Center, Cover, Stack } from "../../atoms/layouts";
-import { COOL_GREY_05 } from "../../../constants/colors";
 
 const CenterStack = ({
   header,
@@ -24,7 +23,7 @@ const CenterStack = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={COOL_GREY_05}
+      background={themeValues.pageBackground}
       extraStyles="flex-grow: 1;"
     >
       <Cover>

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

@@ -4,7 +4,6 @@ import { fallbackValues } from "../templates.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowResize from "../../withWindowSize";
 import { Box, Center, Cover } from "../../atoms/layouts";
-import { COOL_GREY_05 } from "../../../constants/colors";
 
 const CenterSingle = ({
   header,
@@ -23,7 +22,7 @@ const CenterSingle = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={COOL_GREY_05}
+      background={themeValues.pageBackground}
       extraStyles="flex-grow: 1;"
     >
       <Cover childGap="0" fillCenter>

package/src/components/templates/sidebar-single-content/SidebarSingleContent.js

@@ -4,7 +4,6 @@ import { fallbackValues } from "../templates.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowResize from "../../withWindowSize";
 import { Box, Center, Cover, Sidebar } from "../../atoms/layouts";
-import { COOL_GREY_05 } from "../../../constants/colors";
 
 const SidebarSingleContent = ({
   header,
@@ -29,7 +28,7 @@ const SidebarSingleContent = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={COOL_GREY_05}
+      background={themeValues.pageBackground}
       extraStyles="flex-grow: 1;"
     >
       <Cover centerOverride={!sidebarVerticalCenter}>

package/src/components/templates/sidebar-stack-content/SidebarStackContent.js

@@ -4,7 +4,6 @@ import { fallbackValues } from "../templates.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowResize from "../../withWindowSize";
 import { Box, Center, Cover, Sidebar, Stack } from "../../atoms/layouts";
-import { COOL_GREY_05 } from "../../../constants/colors";
 
 const SidebarStackContent = ({
   header,
@@ -30,7 +29,7 @@ const SidebarStackContent = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={COOL_GREY_05}
+      background={themeValues.pageBackground}
       key="page-bg"
       extraStyles="flex-grow: 1;"
     >

package/src/components/templates/templates.theme.js

@@ -1,4 +1,4 @@
-const pageBackground = "#FBFCFD";
+const pageBackground = "#F6F6F9";
 
 export const fallbackValues = {
   pageBackground

package/src/constants/colors.js

@@ -15,26 +15,25 @@ const AQUA_HAZE_WHITE = "#F7F9FA";
 const BLEACH_WHITE = "#FEF4d7";
 const CATSKILL_WHITE = "#EAF2F6";
 // GREY
-const ATHENS_GREY = "#F6F6F9"; // CBS-100
+const ATHENS_GREY = "#F6F6F9";
 const ALTO_GREY = "#d1d1d1";
 const SILVER_GREY = "#cdcdcd";
 const PEWTER_GREY = "#DFE1E4";
 const ASH_GREY = "#979797";
 const IRON_GREY = "#d5d8dc";
-const GHOST_GREY = "#CACED8"; // CBS-300
+const GHOST_GREY = "#CACED8";
 const DUSTY_GREY = "#9B9B9B";
 const REGENT_GREY = "#959EA7";
-const STORM_GREY = "#6D717E"; // CBS-700
+const STORM_GREY = "#6D717E";
 const TROUT_GREY = "#515660";
 const MINESHAFT_GREY = "#333333";
 const SOOT_GREY = "#999999";
 const FIREFLY_GREY = "#091325";
-const BRIGHT_GREY = "#3B414D"; // CBS-800
-const CHARADE_GREY = "#292A33"; // CBS-900
-const GRECIAN_GREY = "#E5E7EC"; // CBS-200
+const BRIGHT_GREY = "#3B414D";
+const CHARADE_GREY = "#292A33";
+const GRECIAN_GREY = "#E5E7EC";
 const BLACK_SQUEEZE = "#EAF2F7";
-const GREY_CHATEAU = "#959CA8"; // CBS-500
-const COOL_GREY_05 = "#fbfcfd"; // CBS-050
+const GREY_CHATEAU = "#959CA8";
 // BLUE
 const CLOUDBURST_BLUE = "#26395c";
 const ZODIAC_BLUE = "#14284b";
@@ -68,7 +67,7 @@ const MUSTARD_YELLOW = "#FFD459";
 const FIRE_YELLOW = "#B34A00";
 // ORANGE
 const CARROT_ORANGE = "#ED9620";
-const ZEST_ORANGE = "#B84A00";
+const ZEST_ORANGE = "#F47820";
 const APRICOT_ORANGE = "#FFE8D8";
 // RED
 const RED = "#FF0000";
@@ -139,7 +138,6 @@ export {
   BRIGHT_GREY,
   CHARADE_GREY,
   GRECIAN_GREY,
-  COOL_GREY_05,
   BLACK_SQUEEZE,
   GREY_CHATEAU,
   CLOUDBURST_BLUE,

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

@@ -1,62 +0,0 @@
-import React, { useState } from "react";
-import Modal from "../../modal";
-import ButtonWithAction from "../../../atoms/button-with-action";
-import { Box } from "../../../atoms/layouts";
-
-const RemoveAccountModalModule = ({
-  agencyName,
-  obligations = [],
-  removeAccount,
-  accountType,
-  isMobile
-}) => {
-  const [modalIsOpen, setModalIsOpen] = useState(false);
-  const lastItem = [...obligations].pop();
-  const accounts = obligations.length
-    ? obligations.reduce((acc, curr) => {
-        const account = curr.details.description;
-        const formattedAccount =
-          curr !== lastItem ? `${account} and ` : `${account}`;
-        return formattedAccount === agencyName
-          ? agencyName
-          : acc + formattedAccount;
-      }, `${agencyName} - `)
-    : "";
-  const identifier =
-    accountType === "Account" && obligations.length > 1
-      ? "accounts"
-      : accountType === "Property" && obligations.length > 1
-      ? "properties"
-      : accountType.toLowerCase();
-
-  return (
-    <Modal
-      showModal={() => setModalIsOpen(true)}
-      hideModal={() => setModalIsOpen(false)}
-      modalOpen={modalIsOpen}
-      modalHeaderText={`Remove ${accountType}`}
-      modalBodyText={`Are you sure you want to remove the ${identifier} ${accounts} from your profile? Any autopay scheduled against ${
-        obligations.length > 1 ? "them" : "it"
-      } will be deactivated.`}
-      continueButtonText="Remove"
-      continueAction={() => {
-        removeAccount();
-        setModalIsOpen(false);
-      }}
-      useDangerButton
-    >
-      <Box padding="0" extraStyles={`flex-grow: 1;`}>
-        <ButtonWithAction
-          text="Remove"
-          variant="secondary"
-          action={() => setModalIsOpen(true)}
-          dataQa="Remove Account"
-          extraStyles={
-            isMobile ? `flex-grow: 1; width: 100%; margin: 0;` : `flex-grow: 1;`
-          }
-        />
-      </Box>
-    </Modal>
-  );
-};
-export default RemoveAccountModalModule;