@thecb/components 7.12.2-beta.9 → 7.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.12.2-beta.9",
+  "version": "7.12.2",
   "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,7 +4,6 @@ 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,
@@ -18,16 +17,9 @@ const Alert = ({
   showQuitLink = true,
   themeValues,
   extraStyles,
-  maxContentWidth,
-  noBorder = false,
-  enableBoxShadow = false,
-  enableSmallText = false,
-  innerContentPadding = "1rem"
+  maxContentWidth
 }) => {
   const Icon = AlertIcons[variant];
-  let contentPadding = maxContentWidth
-    ? `${padding} 1rem`
-    : innerContentPadding;
 
   const content = (
     <Sidebar width="24px" childGap="0rem">
@@ -40,17 +32,13 @@ const Alert = ({
       </Box>
       <Box padding="0">
         <Sidebar sidebarOnRight width="24px" childGap="0rem">
-          <Box padding={contentPadding}>
+          <Box padding={maxContentWidth ? `${padding} 1rem` : "1rem"}>
             <Cluster justify="flex-start" align="center">
               {textOverride ? (
                 textOverride
               ) : (
                 <Stack fullHeight childGap="0.25rem">
-                  <Text
-                    variant={enableSmallText ? "pS" : "p"}
-                    color={themeValues.text}
-                    weight="600"
-                  >
+                  <Text variant="p" color={themeValues.text} weight="600">
                     {heading}
                   </Text>
                   <Text variant="pS" color={themeValues.text}>
@@ -82,8 +70,7 @@ const Alert = ({
       background={themeValues.background}
       borderRadius="4px"
       borderColor={themeValues.border}
-      borderSize={noBorder ? "0px" : "1px"}
-      boxShadow={enableBoxShadow ? generateShadows()?.inset?.base : ""}
+      borderSize="1px"
       extraStyles={extraStyles}
     >
       {maxContentWidth ? (

package/src/components/atoms/icons/AutopayOnIcon.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { SEA_GREEN } from "../../../constants/colors";
 
-const AutopayOnIcon = () => (
+const AutopayOnIcon = (color = SEA_GREEN) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="12"
@@ -11,7 +11,7 @@ const AutopayOnIcon = () => (
     <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
       <path
         className="autopayIcon"
-        fill={SEA_GREEN}
+        fill={color}
         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>

package/src/components/atoms/spinner/Spinner.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { fallbackValues } from "./Spinner.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
@@ -32,12 +32,6 @@ const SpinnerSvgAnimation = styled.svg`
       stroke-dashoffset: -124;
     }
   }
-  ${({ centerSpinner }) =>
-    centerSpinner
-      ? css`
-          margin: 0;
-        `
-      : ""}
 `;
 
 export const SpinnerContainer = styled.div`
@@ -47,27 +41,11 @@ export const SpinnerContainer = styled.div`
   align-items: center;
   justify-content: center;
   line-height: 1;
-  ${({ centerSpinner, size }) =>
-    centerSpinner
-      ? css`
-          width: ${size}px;
-          height: ${size}px;
-        `
-      : ""}
 `;
 
-/*
-  `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}
-    >
+const Spinner = ({ size = "24", themeValues }) => (
+  <SpinnerContainer>
+    <SpinnerSvgAnimation size={size} color={themeValues.color}>
       <circle
         className="path"
         cx="50"

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -7,6 +7,7 @@ import { Box, Cluster } from "../../atoms/layouts";
 import SolidDivider from "../../atoms/solid-divider";
 
 const PaymentButtonBar = ({
+  isForwardButtonDisabled = false,
   forwardButtonText = "Next",
   forwardButtonAction,
   forwardButtonLoading,
@@ -51,6 +52,7 @@ const PaymentButtonBar = ({
       variant={forwardButtonVariant}
       extraStyles={isMobile && "flex-grow: 1"}
       dataQa={redirectText}
+      disabled={isForwardButtonDisabled}
     />
   ) : (
     forwardButtonAction && (
@@ -61,6 +63,7 @@ const PaymentButtonBar = ({
         isLoading={forwardButtonLoading}
         extraStyles={isMobile && "flex-grow: 1"}
         dataQa={forwardButtonText}
+        disabled={isForwardButtonDisabled}
       />
     )
   );

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

@@ -1,12 +1,5 @@
 import React, { useState, Fragment } from "react";
-import {
-  Stack,
-  Cluster,
-  Box,
-  Motion,
-  Cover,
-  Center
-} from "../../atoms/layouts";
+import { Stack, Cluster, Box, Motion } from "../../atoms/layouts";
 import { fallbackValues } from "./PaymentDetails.theme";
 
 import { displayCurrency } from "../../../util/general";
@@ -21,11 +14,9 @@ import {
   FONT_WEIGHT_BOLD,
   FONT_WEIGHT_REGULAR
 } from "../../../constants/style_constants";
-import { ATHENS_GREY, GRECIAN_GREY } from "../../../constants/colors";
+import { ATHENS_GREY } from "../../../constants/colors";
 import ButtonWithAction from "../../atoms/button-with-action";
 import Text from "../../atoms/text";
-import Alert from "../../atoms/alert";
-import Spinner from "../../atoms/spinner";
 import { noop } from "../../../util/general";
 
 const PaymentDetailsContent = ({
@@ -119,60 +110,7 @@ const PaymentDetailsContent = ({
   </Stack>
 );
 
-const LoadingDetails = () => (
-  <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>
-);
-
-const ErrorDetails = () => (
-  <Box padding="0">
-    <Alert
-      variant="error"
-      heading="Error Loading Payment"
-      text="Please go back and try again."
-      showQuitLink={false}
-      noBorder
-      enableBoxShadow
-      enableSmallText
-      innerContentPadding="0 16px"
-      extraStyles={`min-height: 67px; height: 67px;`}
-    />
-  </Box>
-);
-
-const getLoadingOrErrorContent = (isLoading = false, isError = false) => {
-  if (isLoading) {
-    return <LoadingDetails />;
-  } else if (isError) {
-    return <ErrorDetails />;
-  }
-  return <Fragment />;
-};
-
-const Collapsible = ({
-  content,
-  title,
-  supportsTouch,
-  isOpen,
-  setIsOpen,
-  isLoading = false,
-  isError = false
-}) => (
+const Collapsible = ({ content, title, supportsTouch, isOpen, setIsOpen }) => (
   <CollapsibleSection
     isMobile={true}
     supportsTouch={supportsTouch}
@@ -191,24 +129,15 @@ const Collapsible = ({
       positionTransition
       initial={"closed"}
     >
-      {isLoading || isError
-        ? getLoadingOrErrorContent(isLoading, isError)
-        : content}
+      {content}
     </Motion>
   </CollapsibleSection>
 );
 
-const NonCollapsible = ({
-  title,
-  content,
-  isLoading = false,
-  isError = false
-}) => (
+const NonCollapsible = ({ title, content }) => (
   <Stack>
     {title}
-    {isLoading || isError
-      ? getLoadingOrErrorContent(isLoading, isError)
-      : content}
+    {content}
   </Stack>
 );
 
@@ -230,10 +159,8 @@ const PaymentDetails = ({
   voidableTransactionDetails = [],
   partialVoidAction = noop,
   voidableAmountPaid = 0,
-  remainingBalance = false,
+  remainingBalance = false
   // end partial void section
-  isLoading = false,
-  isError = false
 }) => {
   const [isOpen, setIsOpen] = useState(initiallyOpen);
   const fees = _fees
@@ -339,13 +266,11 @@ const PaymentDetails = ({
         isOpen,
         setIsOpen,
         isMobile,
-        supportsTouch,
-        isLoading,
-        isError
+        supportsTouch
       }}
     />
   ) : (
-    <NonCollapsible {...{ title, content, isLoading, isError }} />
+    <NonCollapsible {...{ title, content }} />
   );
 };
 

package/src/util/generateShadows.js

@@ -28,7 +28,7 @@ const rgbToRgba = (rgbValue = "", opacity = "") => {
   )}, ${opacity}${rgbValue.slice(-1)}`;
 };
 
-export const generateShadows = (baseColorRGB = "rgb(41, 42, 51)") => {
+export const generateShadows = baseColorRGB => {
   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 =