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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.12.2-beta.4",
+  "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/atoms/spinner/Spinner.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { fallbackValues } from "./Spinner.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
@@ -32,6 +32,12 @@ const SpinnerSvgAnimation = styled.svg`
       stroke-dashoffset: -124;
     }
   }
+  ${({ centerSpinner }) =>
+    centerSpinner
+      ? css`
+          margin: 0;
+        `
+      : ""}
 `;
 
 export const SpinnerContainer = styled.div`
@@ -41,11 +47,27 @@ export const SpinnerContainer = styled.div`
   align-items: center;
   justify-content: center;
   line-height: 1;
+  ${({ centerSpinner, size }) =>
+    centerSpinner
+      ? css`
+          width: ${size}px;
+          height: ${size}px;
+        `
+      : ""}
 `;
 
-const Spinner = ({ size = "24", themeValues }) => (
-  <SpinnerContainer>
-    <SpinnerSvgAnimation size={size} color={themeValues.color}>
+/*
+  `centerSpinner` prop alters existing styling of spinner to allow it to properly center itself within
+  containers. Default is false to preserve legacy behavior for past uses.
+*/
+
+const Spinner = ({ size = "24", centerSpinner = false, themeValues }) => (
+  <SpinnerContainer centerSpinner={centerSpinner} size={size}>
+    <SpinnerSvgAnimation
+      size={size}
+      color={themeValues.color}
+      centerSpinner={centerSpinner}
+    >
       <circle
         className="path"
         cx="50"

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,11 +120,19 @@ 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 padding="0" minHeight="100px" minWidth="100px">
-          <Spinner size="100" />
+        <Box
+          padding="0"
+          extraStyles={`flex-grow: 1; display: flex; justify-content: center; align-items: center;`}
+        >
+          <Spinner size="100" centerSpinner />
         </Box>
       </Center>
     </Cover>
@@ -138,6 +146,9 @@ const ErrorDetails = () => (
       heading="Error Loading Payment"
       text="Please go back and try again."
       showQuitLink={false}
+      height="67px"
+      noBorder
+      enableBoxShadow
     />
   </Box>
 );