@thecb/components 7.8.1 → 7.8.3-beta.1

package/package.json

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

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -1,7 +1,12 @@
-/*
-  For now I'm using string values, eventually shared components library will have its own constants file
-  for colors/values that should be used here instead
-*/
+import {
+  WHITE,
+  TRANSPARENT,
+  SAPPHIRE_BLUE,
+  PEACOCK_BLUE,
+  MATISSE_BLUE,
+  RASPBERRY,
+  ERROR_COLOR
+} from "../../../constants/colors";
 
 const padding = {
   primary: "0.75rem 1.5rem",
@@ -19,18 +24,18 @@ const padding = {
 };
 
 const color = {
-  primary: "#FFFFFF",
-  secondary: "#15749D",
-  back: "#15749D",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#15749D",
-  smallGhost: "#15749D",
-  ghost: "#15749D",
-  tertiary: "#15749D",
-  danger: "#FFFFFF",
-  dangerSecondary: "#D11053",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  primary: WHITE,
+  secondary: MATISSE_BLUE,
+  back: MATISSE_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: MATISSE_BLUE,
+  ghost: MATISSE_BLUE,
+  tertiary: MATISSE_BLUE,
+  danger: WHITE,
+  dangerSecondary: ERROR_COLOR,
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 
 const fontSizeVariant = {
@@ -94,123 +99,123 @@ const minWidth = {
 };
 
 const backgroundColor = {
-  primary: "#15749D",
-  secondary: "transparent",
-  back: "transparent",
-  smallPrimary: "#15749D",
-  smallSecondary: "transparent",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
-  danger: "#ED125F",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  primary: MATISSE_BLUE,
+  secondary: TRANSPARENT,
+  back: TRANSPARENT,
+  smallPrimary: MATISSE_BLUE,
+  smallSecondary: TRANSPARENT,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
+  danger: RASPBERRY,
+  dangerSecondary: TRANSPARENT,
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 
 const border = {
-  primary: "2px solid #15749D",
-  secondary: "2px solid #15749D",
-  back: "2px solid #15749D",
-  smallPrimary: "2px solid #15749D",
-  smallSecondary: "2px solid #15749D",
+  primary: "2px solid " + MATISSE_BLUE,
+  secondary: "2px solid " + MATISSE_BLUE,
+  back: "2px solid " + MATISSE_BLUE,
+  smallPrimary: "2px solid " + MATISSE_BLUE,
+  smallSecondary: "2px solid " + MATISSE_BLUE,
   smallGhost: "none",
   ghost: "none",
   tertiary: "none",
-  danger: "2px solid #ED125F",
-  dangerSecondary: "2px solid #D11053",
-  whiteSecondary: "2px solid white",
-  whitePrimary: "2px solid transparent"
+  danger: "2px solid " + RASPBERRY,
+  dangerSecondary: "2px solid " + ERROR_COLOR,
+  whiteSecondary: "2px solid " + WHITE,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const hoverBackgroundColor = {
-  primary: "#116285",
+  primary: SAPPHIRE_BLUE,
   secondary: "#DBEAF0",
-  back: "transparent",
-  smallPrimary: "#116285",
+  back: TRANSPARENT,
+  smallPrimary: SAPPHIRE_BLUE,
   smallSecondary: "#DBEAF0",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#BA002C",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  dangerSecondary: "#FAE7EE",
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 
 const hoverBorderColor = {
-  primary: "#116285",
-  secondary: "#15749D",
+  primary: SAPPHIRE_BLUE,
+  secondary: MATISSE_BLUE,
   back: "#DCEAF1",
-  smallPrimary: "#116285",
-  smallSecondary: "#15749D",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallPrimary: SAPPHIRE_BLUE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#B10541",
-  whiteSecondary: "2px solid transparent",
-  whitePrimary: "2px solid transparent"
+  whiteSecondary: "2px solid " + TRANSPARENT,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const hoverColor = {
-  primary: "#FFFFFF",
-  secondary: "#116285",
-  back: "#116285",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#116285",
-  smallGhost: "#116285",
-  ghost: "#116285",
-  tertiary: "#116285",
-  danger: "#FFFFFF",
+  primary: WHITE,
+  secondary: SAPPHIRE_BLUE,
+  back: SAPPHIRE_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: SAPPHIRE_BLUE,
+  smallGhost: SAPPHIRE_BLUE,
+  ghost: SAPPHIRE_BLUE,
+  tertiary: SAPPHIRE_BLUE,
+  danger: WHITE,
   dangerSecondary: "#B10541",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 
 const activeBackgroundColor = {
-  primary: "#0E506D",
+  primary: PEACOCK_BLUE,
   secondary: "#B8D5E1",
-  back: "transparent",
-  smallPrimary: "#0E506D",
+  back: TRANSPARENT,
+  smallPrimary: PEACOCK_BLUE,
   smallSecondary: "#B8D5E1",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#870000",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  dangerSecondary: "#FAE7EE",
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 
 const activeBorderColor = {
-  primary: "#0E506D",
-  secondary: "#15749D",
-  back: "#0E506D",
-  smallPrimary: "#0E506D",
-  smallSecondary: "#15749D",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  primary: PEACOCK_BLUE,
+  secondary: MATISSE_BLUE,
+  back: PEACOCK_BLUE,
+  smallPrimary: PEACOCK_BLUE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#910029",
-  whiteSecondary: "2px solid transparent",
-  whitePrimary: "2px solid transparent"
+  whiteSecondary: "2px solid " + TRANSPARENT,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const activeColor = {
-  primary: "#FFFFFF",
-  secondary: "#15749D",
-  back: "#0E506D",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#0E506D",
-  smallGhost: "#0E506D",
-  ghost: "#0E506D",
-  tertiary: "#0E506D",
-  danger: "#FFFFFF",
+  primary: WHITE,
+  secondary: MATISSE_BLUE,
+  back: PEACOCK_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: PEACOCK_BLUE,
+  smallGhost: PEACOCK_BLUE,
+  ghost: PEACOCK_BLUE,
+  tertiary: PEACOCK_BLUE,
+  danger: WHITE,
   dangerSecondary: "#910029",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 
 export const fallbackValues = {

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -14,6 +14,9 @@ import {
 } from "../../atoms/form-layouts";
 import AccountAndRoutingModal from "../account-and-routing-modal";
 import { noop } from "../../../util/general";
+import { Cluster, Cover } from "../../atoms/layouts";
+import TermsAndConditionsModal from "../terms-and-conditions-modal/TermsAndConditionsModal";
+import Text from "../../atoms/text";
 
 const PaymentFormACH = ({
   variant = "default",
@@ -28,13 +31,17 @@ const PaymentFormACH = ({
   handleSubmit = noop,
   showWalletCheckbox,
   saveToWallet,
-  walletCheckboxMarked
+  walletCheckboxMarked,
+  termsContent,
+  termsTitle = "Terms & Conditions"
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
   const [showRouting, toggleShowRouting] = useState(false);
   const [showAccount, toggleShowAccount] = useState(false);
+  const [termsModalOpen, setTermsModalOpen] = useState(false);
+  const showTerms = !!termsContent;
 
   const nameErrors = {
     [required.error]: "Name is required"
@@ -153,13 +160,31 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
-        {showWalletCheckbox && (
-          <Checkbox
-            name="bank checkbox"
-            title="Save checking account to wallet"
-            checked={walletCheckboxMarked}
-            onChange={saveToWallet}
-          />
+        {(showWalletCheckbox || showTerms) && (
+          <Cluster childGap={"4px"}>
+            {showWalletCheckbox && (
+              <Checkbox
+                name="bank checkbox"
+                title="Save checking account to wallet."
+                checked={walletCheckboxMarked}
+                onChange={saveToWallet}
+              />
+            )}
+            {showTerms && (
+              <Cover singleChild>
+                <Cluster childGap={0}>
+                  <Text>View&nbsp;</Text>
+                  <TermsAndConditionsModal
+                    link={termsTitle}
+                    terms={termsContent}
+                    title={termsTitle}
+                    isOpen={termsModalOpen}
+                    toggleOpen={setTermsModalOpen}
+                  />
+                </Cluster>
+              </Cover>
+            )}
+          </Cluster>
         )}
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from "react";
+import React, { useEffect, useContext, useState } from "react";
 import { ThemeContext } from "styled-components";
 import {
   required,
@@ -26,8 +26,10 @@ import {
   FormContainer,
   FormInputRow
 } from "../../atoms/form-layouts";
-import { Box } from "../../atoms/layouts";
+import { Box, Cluster, Cover } from "../../atoms/layouts";
 import withWindowSize from "../../withWindowSize";
+import TermsAndConditionsModal from "../terms-and-conditions-modal/TermsAndConditionsModal";
+import Text from "../../atoms/text";
 
 const PaymentFormCard = ({
   variant = "default",
@@ -40,9 +42,14 @@ const PaymentFormCard = ({
   showWalletCheckbox,
   saveToWallet,
   walletCheckboxMarked,
-  deniedCards
+  deniedCards,
+  termsContent,
+  termsTitle = "Terms & Conditions"
 }) => {
   const { isMobile } = useContext(ThemeContext);
+  const [termsModalOpen, setTermsModalOpen] = useState(false);
+  const showTerms = !!termsContent;
+
   useEffect(() => {
     if (deniedCards) {
       deniedCards.map(card =>
@@ -177,13 +184,31 @@ const PaymentFormCard = ({
             />
           </Box>
         )}
-        {showWalletCheckbox && (
-          <Checkbox
-            name="credit card checkbox"
-            title="Save credit card to wallet"
-            checked={walletCheckboxMarked}
-            onChange={saveToWallet}
-          />
+        {(showWalletCheckbox || showTerms) && (
+          <Cluster childGap={"4px"}>
+            {showWalletCheckbox && (
+              <Checkbox
+                name="credit card checkbox"
+                title="Save credit card to wallet."
+                checked={walletCheckboxMarked}
+                onChange={saveToWallet}
+              />
+            )}
+            {showTerms && (
+              <Cover singleChild>
+                <Cluster childGap={0}>
+                  <Text>View&nbsp;</Text>
+                  <TermsAndConditionsModal
+                    link={termsTitle}
+                    terms={termsContent}
+                    title={termsTitle}
+                    isOpen={termsModalOpen}
+                    toggleOpen={setTermsModalOpen}
+                  />
+                </Cluster>
+              </Cover>
+            )}
+          </Cluster>
         )}
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/terms-and-conditions/TermsAndConditions.js

@@ -9,7 +9,8 @@ const TermsAndConditions = ({
   isChecked,
   html,
   terms,
-  error = false
+  error = false,
+  linkVariant
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
@@ -31,6 +32,7 @@ const TermsAndConditions = ({
                 terms={terms}
                 isOpen={showTerms}
                 toggleOpen={toggleShowTerms}
+                linkVariant={linkVariant}
               />
             )}
           </Stack>

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -14,6 +14,7 @@ const TermsAndConditionsModal = ({
   acceptText,
   terms,
   variant,
+  linkVariant = "p",
   themeValues
 }) => (
   <Modal
@@ -42,14 +43,14 @@ const TermsAndConditionsModal = ({
     }}
   >
     <Text
-      variant={variant === "default" ? "pS" : "pXS"}
+      variant={linkVariant}
       onClick={() => toggleOpen(true)}
       onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
       tabIndex="0"
       color={themeValues.linkColor}
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
-      extraStyles={`display: inline-block; width: fit-content;`}
+      extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
     >
       {link}
     </Text>

package/src/constants/colors.js

@@ -54,6 +54,8 @@ const HOVER_LIGHT_BLUE = "#EFFAFF";
 const MATISSE_BLUE = "#15749D";
 const ROYAL_BLUE = "#3181E3";
 const ASTRAL_BLUE = "#3176AA";
+const SAPPHIRE_BLUE = "#116285";
+const PEACOCK_BLUE = "#0E506D";
 // GREEN
 const FOREST_GREEN = "#19b03F";
 const MEADOW_GREEN = "#16C98D";
@@ -76,6 +78,7 @@ const RED = "#FF0000";
 const CRIMSON_RED = "#ED1C24";
 const THUNDERBIRD_RED = "#C3191F";
 const RAZZMATAZZ_RED = "#D11053";
+const RASPBERRY = "#ED125F";
 const FANTASY_RED = "#FCF4F4";
 const COSMOS_RED = "#FFD0D3";
 const BLUSH_RED = "#FFF0F5";
@@ -161,6 +164,8 @@ export {
   MATISSE_BLUE,
   ROYAL_BLUE,
   ASTRAL_BLUE,
+  SAPPHIRE_BLUE,
+  PEACOCK_BLUE,
   FOREST_GREEN,
   MEADOW_GREEN,
   POLAR_GREEN,
@@ -182,6 +187,7 @@ export {
   FANTASY_RED,
   COSMOS_RED,
   BLUSH_RED,
+  RASPBERRY,
   ALERT_COLORS,
   ERROR_COLOR
 };