@thecb/components 7.12.2-beta.5 → 7.12.2-beta.6

package/package.json

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

package/src/components/atoms/alert/Alert.js

@@ -4,6 +4,7 @@ import { Box, Center, Cluster, Stack, Cover, Sidebar } from "../layouts";
 import Text from "../text";
 import { fallbackValues } from "./Alert.theme";
 import { themeComponent } from "../../../util/themeUtils";
+import { generateShadows } from "../../../util/generateShadows";
 
 const Alert = ({
   heading,
@@ -17,7 +18,9 @@ const Alert = ({
   showQuitLink = true,
   themeValues,
   extraStyles,
-  maxContentWidth
+  maxContentWidth,
+  noBorder = false,
+  enableBoxShadow = false
 }) => {
   const Icon = AlertIcons[variant];
 
@@ -70,7 +73,8 @@ const Alert = ({
       background={themeValues.background}
       borderRadius="4px"
       borderColor={themeValues.border}
-      borderSize="1px"
+      borderSize={noBorder ? "0px" : "1px"}
+      boxShadow={enableBoxShadow ? generateShadows()?.inset?.base : ""}
       extraStyles={extraStyles}
     >
       {maxContentWidth ? (

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -21,7 +21,7 @@ import {
   FONT_WEIGHT_BOLD,
   FONT_WEIGHT_REGULAR
 } from "../../../constants/style_constants";
-import { ATHENS_GREY, GHOST_GREY } from "../../../constants/colors";
+import { ATHENS_GREY, GRECIAN_GREY } from "../../../constants/colors";
 import ButtonWithAction from "../../atoms/button-with-action";
 import Text from "../../atoms/text";
 import Alert from "../../atoms/alert";
@@ -120,7 +120,12 @@ const PaymentDetailsContent = ({
 );
 
 const LoadingDetails = () => (
-  <Box padding="0" background={GHOST_GREY} borderRadius="4px" minHeight="196px">
+  <Box
+    padding="0"
+    background={GRECIAN_GREY}
+    borderRadius="4px"
+    minHeight="196px"
+  >
     <Cover minHeight="196px" singleChild fillCenter>
       <Center intrinsic>
         <Box
@@ -141,6 +146,9 @@ const ErrorDetails = () => (
       heading="Error Loading Payment"
       text="Please go back and try again."
       showQuitLink={false}
+      height="67px"
+      noBorder
+      enableBoxShadow
     />
   </Box>
 );