@thecb/components 7.12.2-beta.0 → 7.12.2-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.12.2-beta.0",
+  "version": "7.12.2-beta.10",
   "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,13 +18,21 @@ const Alert = ({
   showQuitLink = true,
   themeValues,
   extraStyles,
-  maxContentWidth
+  maxContentWidth,
+  noBorder = false,
+  enableBoxShadow = false,
+  enableSmallText = false,
+  innerContentPadding = "1rem",
+  iconPadding = "0 0 0 1rem"
 }) => {
   const Icon = AlertIcons[variant];
+  let contentPadding = maxContentWidth
+    ? `${padding} 1rem`
+    : innerContentPadding;
 
   const content = (
     <Sidebar width="24px" childGap="0rem">
-      <Box padding="0 0 0 1rem" minHeight="100%">
+      <Box padding={iconPadding} minHeight="100%">
         <Cover minHeight="100%" singleChild>
           <Box padding="0" width="1.5rem" minHeight="1.5rem">
             <Icon />
@@ -32,13 +41,17 @@ const Alert = ({
       </Box>
       <Box padding="0">
         <Sidebar sidebarOnRight width="24px" childGap="0rem">
-          <Box padding={maxContentWidth ? `${padding} 1rem` : "1rem"}>
+          <Box padding={contentPadding}>
             <Cluster justify="flex-start" align="center">
               {textOverride ? (
                 textOverride
               ) : (
                 <Stack fullHeight childGap="0.25rem">
-                  <Text variant="p" color={themeValues.text} weight="600">
+                  <Text
+                    variant={enableSmallText ? "pS" : "p"}
+                    color={themeValues.text}
+                    weight="600"
+                  >
                     {heading}
                   </Text>
                   <Text variant="pS" color={themeValues.text}>
@@ -70,7 +83,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

@@ -1,5 +1,12 @@
 import React, { useState, Fragment } from "react";
-import { Stack, Cluster, Box, Motion } from "../../atoms/layouts";
+import {
+  Stack,
+  Cluster,
+  Box,
+  Motion,
+  Cover,
+  Center
+} from "../../atoms/layouts";
 import { fallbackValues } from "./PaymentDetails.theme";
 
 import { displayCurrency } from "../../../util/general";
@@ -14,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";
@@ -60,7 +67,7 @@ const PaymentDetailsContent = ({
                 text="Void"
                 padding="0"
                 extraStyles={`
-                  min-width: 65px; 
+                  min-width: 65px;
                   margin: 0px;
                   min-height: 0px;
                 `}
@@ -113,8 +120,22 @@ const PaymentDetailsContent = ({
 );
 
 const LoadingDetails = () => (
-  <Box padding="0" background={GHOST_GREY} borderRadius="4px">
-    <Spinner />
+  <Box
+    padding="0"
+    background={GRECIAN_GREY}
+    borderRadius="4px"
+    minHeight="196px"
+  >
+    <Cover minHeight="196px" singleChild fillCenter>
+      <Center intrinsic>
+        <Box
+          padding="0"
+          extraStyles={`flex-grow: 1; display: flex; justify-content: center; align-items: center;`}
+        >
+          <Spinner size="100" centerSpinner />
+        </Box>
+      </Center>
+    </Cover>
   </Box>
 );
 
@@ -125,6 +146,12 @@ const ErrorDetails = () => (
       heading="Error Loading Payment"
       text="Please go back and try again."
       showQuitLink={false}
+      noBorder
+      enableBoxShadow
+      enableSmallText
+      innerContentPadding="0 1rem"
+      extraStyles={`min-height: 67px; height: 67px;`}
+      iconPadding="0 0 0 0.75rem"
     />
   </Box>
 );

package/src/util/generateShadows.js

@@ -28,7 +28,7 @@ const rgbToRgba = (rgbValue = "", opacity = "") => {
   )}, ${opacity}${rgbValue.slice(-1)}`;
 };
 
-export const generateShadows = baseColorRGB => {
+export const generateShadows = (baseColorRGB = "rgb(41, 42, 51)") => {
   const colorTen = rgbToRgba(baseColorRGB, "0.1") || "rgba(41, 42, 51, 0.1)";
   const colorTwenty = rgbToRgba(baseColorRGB, "0.2") || "rgba(41, 42, 51, 0.2)";
   const colorTwentyFive =