@thecb/components 7.6.1 → 7.7.0-beta.1

package/package.json

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

package/src/components/atoms/{icons/PaymentIcon.js → formatted-bank-account/FormattedBankAccount.js}

@@ -1,7 +1,8 @@
 import React from "react";
 import styled from "styled-components";
-import { REGENT_GREY, CHARADE_GREY } from "../../../constants/colors";
-import BankIcon from "./BankIcon";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./FormattedBankAccount.theme";
+import BankIcon from "../icons/BankIcon";
 import { Stack, Box } from "../layouts";
 import Text from "../text";
 
@@ -12,7 +13,7 @@ export const BankItemWrapper = styled.div`
 `;
 
 export const BankAccountText = styled.h4`
-  color: ${CHARADE_GREY};
+  color: ${({ color }) => color};
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
@@ -24,22 +25,31 @@ export const BankAccountText = styled.h4`
 const CHECKING = "CHECKING";
 const SAVINGS = "SAVINGS";
 
-const PaymentIcon = ({ lastFour, accountType, autoPay }) => (
+const FormattedBankAccount = ({
+  lastFour,
+  accountType,
+  autoPay,
+  themeValues
+}) => (
   <BankItemWrapper>
     <Box padding="0.25rem 0 0 0" extraStyles={`margin-right: 1rem;`}>
       <BankIcon />
     </Box>
     <Stack childGap="0">
       {accountType === CHECKING && (
-        <BankAccountText>Checking Account ending in {lastFour}</BankAccountText>
+        <BankAccountText color={themeValues.textColor}>
+          Checking Account ending in {lastFour}
+        </BankAccountText>
       )}
       {accountType === SAVINGS && (
-        <BankAccountText>Savings Account ending in {lastFour}</BankAccountText>
+        <BankAccountText color={themeValues.textColor}>
+          Savings Account ending in {lastFour}
+        </BankAccountText>
       )}
       {autoPay && (
         <Text
           variant="p"
-          color={REGENT_GREY}
+          color={themeValues.autopayTextColor}
           extraStyles={`font-style: italic;`}
         >{`Autopay Enabled`}</Text>
       )}
@@ -47,4 +57,8 @@ const PaymentIcon = ({ lastFour, accountType, autoPay }) => (
   </BankItemWrapper>
 );
 
-export default PaymentIcon;
+export default themeComponent(
+  FormattedBankAccount,
+  "FormattedBankAccount",
+  fallbackValues
+);

package/src/components/atoms/formatted-bank-account/FormattedBankAccount.theme.js

@@ -0,0 +1,9 @@
+import { CHARADE_GREY, REGENT_GREY } from "../../../constants/colors";
+
+const textColor = `${CHARADE_GREY}`;
+const autopayTextColor = `${REGENT_GREY}`;
+
+export const fallbackValues = {
+  textColor,
+  autopayTextColor
+};

package/src/components/atoms/formatted-bank-account/index.js

@@ -0,0 +1,3 @@
+import FormattedBankAccount from "./FormattedBankAccount";
+
+export default FormattedBankAccount;

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.js

@@ -2,15 +2,10 @@ import React, { Fragment } from "react";
 import styled from "styled-components";
 import GenericCard from "../icons/GenericCard";
 import Text from "../text";
-import Paragraph from "../paragraph";
 import { Box, Stack } from "../layouts";
 import { fallbackValues } from "./FormattedCreditCard.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
-
-const ACTIVE = "ACTIVE";
-const EXPIRING_SOON = "EXPIRING_SOON";
-const EXPIRED = "EXPIRED";
+import { renderCardStatus } from "../../../util/general";
 
 export const CreditCardWrapper = styled.div`
   display: flex;
@@ -31,61 +26,38 @@ const FormattedCreditCard = ({
   expireDate,
   expirationStatus,
   themeValues
-}) => {
-  const renderCardStatus = () => {
-    switch (expirationStatus) {
-      case ACTIVE:
-        return (
-          <Paragraph variant="pXS" color={ASH_GREY} textAlign="left">
-            Exp Date {expireDate}
-          </Paragraph>
-        );
-      case EXPIRING_SOON:
-        return (
-          <Paragraph variant="pXS" color={FIRE_YELLOW} textAlign="left">
-            Expiring Soon {expireDate}
-          </Paragraph>
-        );
-      case EXPIRED:
-        return (
-          <Paragraph variant="pXS" color={ASH_GREY} textAlign="left">
-            Expired
-          </Paragraph>
-        );
-      default:
-        null;
-    }
-  };
-  return (
-    <CreditCardWrapper>
-      <CCIconWrapper>
-        <GenericCard />
-      </CCIconWrapper>
-      <Stack childGap="0">
-        <Box padding="0">
-          <Text
-            variant="p"
-            padding="0 0 0 8px"
-            color={themeValues.textColor}
-            textAlign="left"
-            extraStyles={`display: inline-block;`}
-          >
-            {`Card ending in ${lastFour}`}
-          </Text>
-          {expireDate && <Fragment>{renderCardStatus()}</Fragment>}
-        </Box>
-        {autoPay && (
-          <Text
-            variant="p"
-            color={themeValues.autopayTextColor}
-            extraStyles={`font-style: italic;`}
-          >{`Autopay Enabled`}</Text>
+}) => (
+  <CreditCardWrapper>
+    <CCIconWrapper>
+      <GenericCard />
+    </CCIconWrapper>
+    <Stack childGap="0">
+      <Box padding="0">
+        <Text
+          variant="p"
+          padding="0 0 0 8px"
+          color={themeValues.textColor}
+          textAlign="left"
+          extraStyles={`display: inline-block;`}
+        >
+          {`Card ending in ${lastFour}`}
+        </Text>
+        {expireDate && (
+          <Fragment>
+            {renderCardStatus(expirationStatus, expireDate, "left", "p")}
+          </Fragment>
         )}
-      </Stack>
-    </CreditCardWrapper>
-  );
-};
-
+      </Box>
+      {autoPay && (
+        <Text
+          variant="p"
+          color={themeValues.autopayTextColor}
+          extraStyles={`font-style: italic;`}
+        >{`Autopay Enabled`}</Text>
+      )}
+    </Stack>
+  </CreditCardWrapper>
+);
 export default themeComponent(
   FormattedCreditCard,
   "FormattedCreditCard",

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

@@ -18,7 +18,6 @@ import RoutingNumberImage from "./RoutingNumberImage";
 import CheckmarkIcon from "./CheckmarkIcon";
 import BankIcon from "./BankIcon";
 import GenericCard from "./GenericCard";
-import PaymentIcon from "./PaymentIcon";
 import IconAdd from "./IconAdd";
 import IconQuitLarge from "./IconQuitLarge";
 import TimeoutImage from "./TimeoutImage";
@@ -85,7 +84,6 @@ export {
   CheckmarkIcon,
   BankIcon,
   GenericCard,
-  PaymentIcon,
   IconAdd,
   IconQuitLarge,
   TimeoutImage,

package/src/components/atoms/index.js

@@ -16,6 +16,7 @@ export { default as Dropdown } from "./dropdown";
 export * from "./form-layouts";
 export { default as FormSelect } from "./form-select";
 export { default as FormattedAddress } from "./formatted-address";
+export { default as FormattedBankAccount } from "./formatted-bank-account";
 export { default as FormattedCreditCard } from "./formatted-credit-card";
 export { default as HamburgerButton } from "./hamburger-button";
 export { default as Heading } from "./heading";

package/src/components/molecules/radio-section/RadioSection.js

@@ -7,7 +7,7 @@ import RadioButton from "./radio-button/RadioButton";
 import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
 import { noop } from "../../../util/general";
 import Text from "../../atoms/text";
-import { CHARADE_GREY, ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
+import { CHARADE_GREY } from "../../../constants/colors";
 /*
   Takes an array of section objects, each object should look like:
     {
@@ -17,7 +17,8 @@ import { CHARADE_GREY, ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
       hideRadioButton: boolean, (keeps section displayed but hides radio and disables open/close function),
       hidden: boolean, (hides section entirely)
       dataQa: string,
-      content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work)
+      content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work),
+      rightTitleContent: <React Component(s)> (rendered on the very right of the title section, use to supplement "rightIcons" with text, as in expired CC status, or render other custom content)
     }
   
   Also takes an "openSection" which should equal the id of the section that should be open
@@ -30,10 +31,6 @@ import { CHARADE_GREY, ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
 
 */
 
-const ACTIVE = "ACTIVE";
-const EXPIRING_SOON = "EXPIRING_SOON";
-const EXPIRED = "EXPIRED";
-
 const RadioSection = ({
   themeValues,
   isMobile,
@@ -51,44 +48,6 @@ const RadioSection = ({
     }
   };
 
-  const renderCardStatus = item => {
-    const { expirationStatus, expireDate } = item;
-    switch (expirationStatus) {
-      case ACTIVE:
-        return (
-          <Text
-            variant="pXS"
-            color={ASH_GREY}
-            extraStyles={`text-align: right;`}
-          >
-            Exp Date {expireDate}
-          </Text>
-        );
-      case EXPIRING_SOON:
-        return (
-          <Text
-            variant="pXS"
-            color={FIRE_YELLOW}
-            extraStyles={`text-align: right;`}
-          >
-            Expiring Soon {expireDate}
-          </Text>
-        );
-      case EXPIRED:
-        return (
-          <Text
-            variant="pXS"
-            color={ASH_GREY}
-            extraStyles={`text-align: right;`}
-          >
-            Expired
-          </Text>
-        );
-      default:
-        null;
-    }
-  };
-
   const wrapper = {
     open: {
       height: openHeight,
@@ -232,8 +191,8 @@ const RadioSection = ({
                         ))}
                       </Cluster>
                     )}
-                    {section.shouldDisplayCardExpiration && (
-                      <Fragment>{renderCardStatus(section)}</Fragment>
+                    {section.rightTitleContent && (
+                      <Fragment>{rightTitleContent}</Fragment>
                     )}
                   </Cluster>
                 </Box>

package/src/util/general.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from "react";
 import numeral from "numeral";
-import { CHARADE_GREY } from "../constants/colors";
+import { CHARADE_GREY, ASH_GREY, FIRE_YELLOW } from "../constants/colors";
+import Text from "../components/atoms/text";
 
 export const noop = () => {};
 
@@ -159,3 +160,48 @@ export const titleCaseString = string => {
     )
     .join(" ");
 };
+
+export const renderCardStatus = (
+  expirationStatus,
+  expireDate,
+  textAlign = "right",
+  as = "span"
+) => {
+  switch (expirationStatus) {
+    case ACTIVE:
+      return (
+        <Text
+          as={as}
+          variant="pXS"
+          color={ASH_GREY}
+          extraStyles={`text-align: ${textAlign};`}
+        >
+          Exp Date {expireDate}
+        </Text>
+      );
+    case EXPIRING_SOON:
+      return (
+        <Text
+          as={as}
+          variant="pXS"
+          color={FIRE_YELLOW}
+          extraStyles={`text-align: ${textAlign};`}
+        >
+          Expiring Soon {expireDate}
+        </Text>
+      );
+    case EXPIRED:
+      return (
+        <Text
+          as={as}
+          variant="pXS"
+          color={ASH_GREY}
+          extraStyles={`text-align: ${textAlign};`}
+        >
+          Expired
+        </Text>
+      );
+    default:
+      null;
+  }
+};