@thecb/components 10.4.0-beta.15 → 10.4.0-beta.17

package/package.json

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

package/src/components/molecules/modal/Modal.js

@@ -46,7 +46,8 @@ const Modal = ({
   buttonExtraStyles,
   children,
   dataQa = null,
-  initialFocusSelector = ""
+  initialFocusSelector = "",
+  blurUnderlay = true
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const modalContainerRef = useRef(null);
@@ -66,7 +67,10 @@ const Modal = ({
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
-            alignItems: "center"
+            alignItems: "center",
+            background: "rgba(41, 42, 51, 0.45)",
+            backdropFilter: blurUnderlay ? "blur(4px)" : "none",
+            WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
           }}
           dialogStyle={{
             width: customWidth || "615px",

package/src/components/molecules/modal/Modal.stories.js

@@ -35,6 +35,7 @@ export const modal = () => (
     defaultWrapper={boolean("defaultWrapper", true, groupId)}
     onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
     maxHeight={text("maxHeight", null, groupId)}
+    blurUnderlay={boolean("blurUnderlay", true, groupId)}
   />
 );
 
@@ -80,6 +81,7 @@ export const modalWithoutButtons = () => {
       defaultWrapper={boolean("defaultWrapper", true, groupId)}
       noButtons={boolean("noButtons", true, groupId)}
       maxHeight={text("maxHeight", null, groupId)}
+      blurUnderlay={boolean("blurUnderlay", false, groupId)}
     />
   );
 };

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

@@ -69,7 +69,7 @@ const InactiveControlsModule = ({
             removeAccount={disableActions ? noop : handleRemoveAccount}
             accountType={configType === "ACCOUNT" ? "Account" : "Property"}
             isMobile={isMobile}
-            isInCustomerManagement={disableActions}
+            disableActions={disableActions}
           />
         </Box>
       </Cluster>

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

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Modal from "../../modal";
 import ButtonWithAction from "../../../atoms/button-with-action";
 import { Box } from "../../../atoms/layouts";
+import { noop } from "../../../../util/general";
 
 const RemoveAccountModalModule = ({
   agencyName,
@@ -9,7 +10,7 @@ const RemoveAccountModalModule = ({
   removeAccount,
   accountType,
   isMobile,
-  isInCustomerManagement = false
+  disableActions = false
 }) => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const lastItem = [...obligations].pop();
@@ -41,8 +42,10 @@ const RemoveAccountModalModule = ({
       } will be deactivated.`}
       continueButtonText="Remove"
       continueAction={() => {
-        removeAccount();
-        setModalIsOpen(false);
+        if (!disableActions) {
+          removeAccount();
+          setModalIsOpen(false);
+        }
       }}
       useDangerButton
     >
@@ -50,12 +53,12 @@ const RemoveAccountModalModule = ({
         <ButtonWithAction
           text="Remove"
           variant="secondary"
-          action={isInCustomerManagement ? noop : () => setModalIsOpen(true)}
+          action={disableActions ? noop : () => setModalIsOpen(true)}
           dataQa="Remove Account"
           extraStyles={
             isMobile ? `flex-grow: 1; width: 100%; margin: 0;` : `flex-grow: 1;`
           }
-          disabled={isInCustomerManagement}
+          disabled={disableActions}
         />
       </Box>
     </Modal>