@thecb/components 5.8.2-beta.6 → 5.8.2-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.8.2-beta.6",
+  "version": "5.8.2-beta.7",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/layouts/Box.styled.js

@@ -35,19 +35,16 @@ export const BoxWrapper = styled(
   position: relative;
   box-sizing: border-box;
   padding: ${({ padding }) => padding};
-  border: ${({ borderSize, borderColor }) =>
-    `${borderSize} solid ${borderColor}`};
+  border: ${({ border }) => border};
   box-shadow: ${({ boxShadow }) => boxShadow};
   background-color: ${({ background }) => background};
   min-height: ${({ minHeight }) => (minHeight ? minHeight : "auto")};
-  ${({ width }) => width && `width: ${width};`}
+  width: ${({ width }) => width}
   min-width: ${({ minWidth }) => (minWidth ? minWidth : "auto")};
   max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : "auto")};
   color: ${({ color }) => color};
   border-radius: ${({ borderRadius }) => borderRadius};
-  border-width: ${({ borderWidthOverride, borderSize }) =>
-    borderWidthOverride ? borderWidthOverride : borderSize};
-  border: ${({ border }) => border};
+  border-width: ${({ borderWidthOverride }) => borderWidthOverride};
   text-align: ${({ textAlign }) => textAlign};
 
   &:hover {

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

@@ -1,6 +1,11 @@
 import React from "react";
 import { Box, Cluster, Stack } from "../../../components/atoms/layouts";
-import { WHITE, BRIGHT_GREY, ATHENS_GREY } from "../../../constants/colors";
+import {
+  WHITE,
+  BRIGHT_GREY,
+  ATHENS_GREY,
+  GRECIAN_GREY
+} from "../../../constants/colors";
 import {
   IconModule,
   TitleModule,
@@ -41,7 +46,7 @@ const Obligation = ({
   const firstObligation = obligations[0];
   const customAttributes = firstObligation?.customAttributes ?? {};
   const boxShadowValue =
-    "0px 4px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
+    "0px 2px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
   const activeObligation = (
     <Box
       padding="0"
@@ -50,6 +55,8 @@ const Obligation = ({
       as="section"
       aria-label={`${firstObligation?.description ??
         "account"} ${firstObligation?.subDescription ?? obligationAssocID}`}
+      border={`1px solid ${GRECIAN_GREY}`}
+      borderWidthOverride="1px 0 0 0"
     >
       <Box background={WHITE} padding="24px 16px">
         <Stack childGap="14px">

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

@@ -25,7 +25,7 @@ const InactiveControlsModule = ({
       border={isMobile ? `1px solid ${GHOST_GREY}` : `0px`}
       borderWidthOverride={isMobile ? `1px 0 0 0` : `0px`}
     >
-      <Cluster childGap={`8px`} nowrap>
+      <Cluster childGap={autopayEnabled ? `8px` : "0"} nowrap>
         {autoPayEnabled && (
           <Box padding="0" extraStyles={`flex-grow: 1;`}>
             <AutopayModalModule
@@ -51,7 +51,9 @@ const InactiveControlsModule = ({
             action={handleRemoveAccount}
             dataQa="Remove Account"
             extraStyles={
-              isMobile ? `flex-grow: 1; width: 100%;` : `flex-grow: 1;`
+              isMobile
+                ? `flex-grow: 1; width: 100%; margin: 0;`
+                : `flex-grow: 1;`
             }
           />
         </Box>

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

@@ -130,17 +130,13 @@ const PaymentDetailsActions = ({
             )}
           </Box>
           {!isMobile && (
-            <Box
-              padding={isMobile ? "0 0 0 8px" : "0"}
-              extraStyles={isMobile && `flex-grow: 1;`}
-            >
+            <Box padding={"0"}>
               <ButtonWithAction
                 isLoading={isLoading}
                 action={() => handleClick(obligations)}
                 text="Pay Now"
                 variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"
-                extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
               />
             </Box>
           )}
@@ -153,7 +149,7 @@ const PaymentDetailsActions = ({
               text="Pay Now"
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"
-              extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+              extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
             />
           </Box>
         )}

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

@@ -4,6 +4,7 @@ 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 +24,7 @@ const CenterSingle = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={themeValues.pageBackground}
+      background={COOL_GREY_05}
       extraStyles="flex-grow: 1;"
     >
       <Cover centerOverride={isMobile && !centeredMobileContent}>

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

@@ -4,6 +4,7 @@ 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,
@@ -23,7 +24,7 @@ const CenterStack = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={themeValues.pageBackground}
+      background={COOL_GREY_05}
       extraStyles="flex-grow: 1;"
     >
       <Cover>

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

@@ -4,6 +4,7 @@ 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,
@@ -22,7 +23,7 @@ const CenterSingle = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={themeValues.pageBackground}
+      background={COOL_GREY_05}
       extraStyles="flex-grow: 1;"
     >
       <Cover childGap="0" fillCenter>

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

@@ -4,6 +4,7 @@ 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,
@@ -28,7 +29,7 @@ const SidebarSingleContent = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={themeValues.pageBackground}
+      background={COOL_GREY_05}
       extraStyles="flex-grow: 1;"
     >
       <Cover centerOverride={!sidebarVerticalCenter}>

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

@@ -4,6 +4,7 @@ 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,
@@ -29,7 +30,7 @@ const SidebarStackContent = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={themeValues.pageBackground}
+      background={COOL_GREY_05}
       key="page-bg"
       extraStyles="flex-grow: 1;"
     >

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

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

package/src/constants/colors.js

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