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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.8.2-beta.4",
+  "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/icons/AutopayOnIcon.js

@@ -1,8 +1,7 @@
 import React from "react";
-import { fallbackValues } from "./Icons.theme";
-import { themeComponent } from "../../../util/themeUtils";
+import { SEA_GREEN } from "../../../constants/colors";
 
-const AutopayOnIcon = ({ themeValues }) => (
+const AutopayOnIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="12"
@@ -12,7 +11,7 @@ const AutopayOnIcon = ({ themeValues }) => (
     <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
       <path
         className="autopayIcon"
-        fill={themeValues.primaryColor}
+        fill={SEA_GREEN}
         fillRule="nonzero"
         d="M1.898 5.75c.079 0 .141-.02.188-.059a.281.281 0 00.094-.152 3.825 3.825 0 011.394-2.144A3.838 3.838 0 016 2.563c.5 0 .98.09 1.441.27.461.179.88.44 1.254.784l-.984.985A.542.542 0 007.547 5c0 .156.055.29.164.398.11.11.242.165.398.165h3.141c.156 0 .289-.055.398-.165A.542.542 0 0011.812 5V1.86a.542.542 0 00-.164-.399.542.542 0 00-.398-.164.542.542 0 00-.398.164l-.844.844A5.699 5.699 0 006 .688c-.938 0-1.809.207-2.613.62-.805.415-1.48.981-2.028 1.7A5.726 5.726 0 00.281 5.422a.265.265 0 00.059.223c.055.07.129.105.222.105h1.336zM6 12.312c.937 0 1.809-.207 2.613-.62a5.919 5.919 0 002.028-1.7 5.726 5.726 0 001.078-2.414.265.265 0 00-.059-.223.267.267 0 00-.223-.105h-1.335c-.079 0-.141.02-.188.059a.281.281 0 00-.094.152 3.825 3.825 0 01-1.394 2.144c-.711.555-1.52.833-2.426.833-.5 0-.98-.09-1.441-.27a3.985 3.985 0 01-1.254-.785l.984-.985A.542.542 0 004.453 8a.542.542 0 00-.164-.398.542.542 0 00-.398-.164H.75a.542.542 0 00-.398.164A.542.542 0 00.187 8v3.14c0 .157.055.29.165.4.109.108.242.163.398.163.156 0 .29-.055.398-.164l.844-.844A5.699 5.699 0 006 12.312z"
       ></path>
@@ -20,9 +19,4 @@ const AutopayOnIcon = ({ themeValues }) => (
   </svg>
 );
 
-export default themeComponent(
-  AutopayOnIcon,
-  "Icons",
-  fallbackValues,
-  "primary"
-);
+export default AutopayOnIcon;

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";
@@ -67,7 +68,7 @@ const MUSTARD_YELLOW = "#FFD459";
 const FIRE_YELLOW = "#B34A00";
 // ORANGE
 const CARROT_ORANGE = "#ED9620";
-const ZEST_ORANGE = "#F47820";
+const ZEST_ORANGE = "#B84A00";
 const APRICOT_ORANGE = "#FFE8D8";
 // RED
 const RED = "#FF0000";
@@ -138,6 +139,7 @@ export {
   BRIGHT_GREY,
   CHARADE_GREY,
   GRECIAN_GREY,
+  COOL_GREY_05,
   BLACK_SQUEEZE,
   GREY_CHATEAU,
   CLOUDBURST_BLUE,