@thecb/components 4.0.3-beta-0 → 4.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.0.3-beta-0",
+  "version": "4.0.5",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/form-layouts/FormLayouts.theme.js

@@ -1,5 +1,5 @@
 import {
-  FIREFLY_GREY,
+  STORM_GREY,
   MATISSE_BLUE,
   WHITE,
   SEASHELL_WHITE,
@@ -23,7 +23,7 @@ const inputBackgroundColor = {
   disabled: `${SEASHELL_WHITE}`
 };
 const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
-const labelColor = { default: `${FIREFLY_GREY}`, disabled: `${FIREFLY_GREY}` };
+const labelColor = { default: `${STORM_GREY}`, disabled: `${STORM_GREY}` };
 const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
 const lineHeight = { default: "1rem", disabled: "1rem" };
 const fontSize = { default: "0.875rem", disabled: "0.875rem" };

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

@@ -2,9 +2,11 @@ import React from "react";
 import styled from "styled-components";
 import GenericCard from "../icons/GenericCard";
 import Text from "../text";
-import { Stack } from "../layouts";
+import Paragraph from "../paragraph";
+import { Box, Stack } from "../layouts";
 import { fallbackValues } from "./FormattedCreditCard.theme";
 import { themeComponent } from "../../../util/themeUtils";
+import { ASH_GREY } from "../../../constants/colors";
 
 export const CreditCardWrapper = styled.div`
   display: flex;
@@ -19,21 +21,33 @@ export const CCIconWrapper = styled.div`
   display: flex;
 `;
 
-const FormattedCreditCard = ({ lastFour, autoPay, themeValues }) => (
+const FormattedCreditCard = ({
+  lastFour,
+  autoPay,
+  expireDate,
+  themeValues
+}) => (
   <CreditCardWrapper>
     <CCIconWrapper>
       <GenericCard />
     </CCIconWrapper>
     <Stack childGap="0">
-      <Text
-        variant="p"
-        padding="0 0 0 8px"
-        color={themeValues.textColor}
-        textAlign="left"
-        extraStyles={`display: inline-block;`}
-      >
-        {`Card ending in ${lastFour}`}
-      </Text>
+      <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 && (
+          <Paragraph variant="pXS" color={ASH_GREY} textAlign="left">
+            {`Exp ${expireDate}`}
+          </Paragraph>
+        )}
+      </Box>
       {autoPay && (
         <Text
           variant="p"

package/src/components/atoms/heading/Heading.js

@@ -15,14 +15,12 @@ const Heading = ({
   extraStyles = ``,
   className,
   variant = "h1",
-  as = "h1",
   dataQa,
   children,
   ...rest
 }) => (
   <HeadingText
-    variant={variant}
-    as={as}
+    as={variant}
     weight={weight}
     color={color}
     margin={margin}

package/src/components/atoms/labeled-amount/LabeledAmount.js

@@ -5,13 +5,12 @@ import { Stack } from "../layouts";
 import Heading from "../heading";
 import Paragraph from "../paragraph";
 
-const LabeledAmount = ({ variant = "pL", label, amount, themeValues, as }) => {
+const LabeledAmount = ({ variant = "pL", label, amount, themeValues }) => {
   const LabeledAmountText = variant === "h6" ? Heading : Paragraph;
   return (
     <Stack direction="row">
       <LabeledAmountText
         variant={variant}
-        as={as}
         weight={themeValues.fontWeight}
         extraStyles="text-align: start; flex: 3;"
       >
@@ -19,7 +18,6 @@ const LabeledAmount = ({ variant = "pL", label, amount, themeValues, as }) => {
       </LabeledAmountText>
       <LabeledAmountText
         variant={variant}
-        as={as}
         weight={themeValues.fontWeight}
         extraStyles="text-align: end; flex: 1;"
       >

package/src/components/atoms/layouts/Box.styled.js

@@ -27,8 +27,10 @@ export const BoxWrapper = styled(
     maxWidth,
     padding,
     hiddenStyles,
+    ariaControls,
+    ariaLabel,
     ...props
-  }) => <div {...props} />
+  }) => <div aria-controls={ariaControls} aria-label={ariaLabel} {...props} />
 )`
   position: relative;
   box-sizing: border-box;
@@ -106,11 +108,5 @@ export const BoxWrapper = styled(
     css`
       ${extraStyles}
     `}
-
-  ${({ hiddenStyles }) =>
-    hiddenStyles &&
-    css`
-      display: none;
-    `}
 `;
 /* eslint-enable no-unused-vars */

package/src/components/molecules/module/Module.js

@@ -16,11 +16,12 @@ const Module = ({
   <Fragment>
     {heading && (
       <Heading
-        variant={variant === "default" ? "h5" : "h2"}
+        variant={variant === "default" ? "h5" : "h3"}
         weight={themeValues.fontWeight}
         color={themeValues.fontColor}
         margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
         textAlign={themeValues.textAlign}
+        aria-level={variant === "default" ? "3" : "1"}
       >
         {heading}
       </Heading>

package/src/components/molecules/module/Module.theme.js

@@ -5,7 +5,7 @@ const fontWeight = { default: "600", largeTitle: "700" };
 const fontColor = { default: CHARADE_GREY, largeTitle: CHARADE_GREY };
 const lineHeight = { default: "2rem", largeTitle: "2rem" };
 const textAlign = { default: "left", largeTitle: "left" };
-const titleType = { default: "h5", largeTitle: "h1" };
+const titleType = { default: "h5", largeTitle: "h3" };
 const titleSpacing = { default: "0.5rem", largeTitle: "1.125rem" };
 const boxShadow = {
   default:

package/src/components/molecules/obligation/Obligation.js

@@ -17,8 +17,10 @@ const Obligation = ({
   handleAutopayAction,
   deactivatePaymentSchedule,
   autoPaySchedule,
+  paymentPlanSchedule,
   navigateToSettings,
-  isMobile
+  isMobile,
+  isPaymentPlan
 }) => {
   const obligation = obligations[0];
   const { customAttributes } = obligation;
@@ -67,6 +69,8 @@ const Obligation = ({
                   deactivatePaymentSchedule={deactivatePaymentSchedule}
                   navigateToSettings={navigateToSettings}
                   autoPaySchedule={autoPaySchedule}
+                  paymentPlanSchedule={paymentPlanSchedule}
+                  isPaymentPlan={isPaymentPlan}
                 />
               )}
             </Cluster>
@@ -79,10 +83,12 @@ const Obligation = ({
               handleAutopayAction={handleAutopayAction}
               deactivatePaymentSchedule={deactivatePaymentSchedule}
               autoPaySchedule={autoPaySchedule}
+              paymentPlanSchedule={paymentPlanSchedule}
               navigateToSettings={navigateToSettings}
               config={config}
               actions={actions}
               isMobile={isMobile}
+              isPaymentPlan={isPaymentPlan}
             />
           )}
         </Stack>
@@ -95,10 +101,12 @@ const Obligation = ({
           handleAutopayAction={handleAutopayAction}
           deactivatePaymentSchedule={deactivatePaymentSchedule}
           autoPaySchedule={autoPaySchedule}
+          paymentPlanSchedule={paymentPlanSchedule}
           navigateToSettings={navigateToSettings}
           config={config}
           actions={actions}
           isMobile={isMobile}
+          isPaymentPlan={isPaymentPlan}
         />
       )}
     </Box>

package/src/components/molecules/obligation/modules/AmountModule.js

@@ -12,7 +12,9 @@ const AmountModule = ({
   isMobile,
   deactivatePaymentSchedule,
   navigateToSettings,
-  autoPaySchedule
+  autoPaySchedule,
+  paymentPlanSchedule,
+  isPaymentPlan
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   return (
@@ -38,6 +40,8 @@ const AmountModule = ({
             navigateToSettings={navigateToSettings}
             deactivatePaymentSchedule={deactivatePaymentSchedule}
             isMobile={isMobile}
+            paymentPlanSchedule={paymentPlanSchedule}
+            isPaymentPlan={isPaymentPlan}
           />
         )}
       </Stack>

package/src/components/molecules/obligation/modules/AutopayModalModule.js

@@ -9,24 +9,38 @@ import { themeComponent } from "../../../../util/themeUtils";
 const AutopayModal = ({
   autoPayActive,
   autoPaySchedule,
+  paymentPlanSchedule,
   toggleModal,
   modalOpen,
   deactivatePaymentSchedule,
   navigateToSettings,
   buttonLinkType,
   isMobile,
-  themeValues
+  themeValues,
+  isPaymentPlan
 }) => {
+  const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const modalExtraProps = {
-    modalHeaderText: autoPayActive ? "Deactivate Autopay" : "Set Up Autopay",
+    modalHeaderText: autoPayActive
+      ? `Deactivate ${planType}`
+      : `Set Up ${planType}`,
     modalBodyText: autoPayActive
-      ? "Are you sure you want to deactivate autopay? You will need to manually make your next payment."
-      : "To set up autopay you must save a payment method and address in your profile. Do you want to save these now?",
-    continueButtonText: autoPayActive ? "Disable Autopay" : "Add to Profile",
+      ? `Are you sure you want to deactivate ${
+          isPaymentPlan ? "your payment plan" : "autopay"
+        }? You will need to manually make your next payment.`
+      : `To set up ${
+          isPaymentPlan ? "a payment plan" : "autopay"
+        } you must save a payment method and address in your profile. Do you want to save these now?`,
+    continueButtonText: autoPayActive
+      ? `Disable ${planType}`
+      : "Add to Profile",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive
       ? () => {
-          deactivatePaymentSchedule(autoPaySchedule);
+          deactivatePaymentSchedule(
+            isPaymentPlan ? paymentPlanSchedule : autoPaySchedule,
+            isPaymentPlan
+          );
           toggleModal(false);
         }
       : navigateToSettings
@@ -50,7 +64,7 @@ const AutopayModal = ({
       ModalLink={() =>
         buttonLinkType ? (
           <ButtonWithAction
-            text={autoPayActive ? "Manage Autopay" : "Set Up Autopay"}
+            text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
             variant="tertiary"
             action={() => {
               toggleModal(true);
@@ -74,7 +88,7 @@ const AutopayModal = ({
             >
               <AutopayOnIcon />
               <ButtonWithAction
-                text="Autopay On"
+                text={`${planType} On`}
                 variant="smallGhost"
                 dataQa="Autopay On"
                 textExtraStyles={`font-size: 0.875rem; `}

package/src/components/molecules/obligation/modules/PaymentDetailsActions.js

@@ -15,8 +15,11 @@ const PaymentDetailsActions = ({
   handleAutopayAction,
   deactivatePaymentSchedule,
   navigateToSettings,
-  autoPaySchedule
+  autoPaySchedule,
+  paymentPlanSchedule,
+  isPaymentPlan
 }) => {
+  const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
   const [modalOpen, toggleModal] = useState(false);
   const { obligationSlug } = config;
@@ -64,6 +67,8 @@ const PaymentDetailsActions = ({
               deactivatePaymentSchedule={deactivatePaymentSchedule}
               navigateToSettings={navigateToSettings}
               autoPaySchedule={autoPaySchedule}
+              paymentPlanSchedule={paymentPlanSchedule}
+              isPaymentPlan={isPaymentPlan}
             />
           </Cluster>
         </Box>
@@ -97,7 +102,7 @@ const PaymentDetailsActions = ({
             {autoPayAvailable && !autoPayEnabled ? (
               <ButtonWithAction
                 variant="tertiary"
-                text="Set Up Autopay"
+                text={`Set Up ${planType}`}
                 action={() => {
                   setDetailedObligation(obligations, config);
                   handleAutopayAction();
@@ -115,6 +120,8 @@ const PaymentDetailsActions = ({
                 deactivatePaymentSchedule={deactivatePaymentSchedule}
                 buttonLinkType
                 isMobile={isMobile}
+                paymentPlanSchedule={paymentPlanSchedule}
+                isPaymentPlan={isPaymentPlan}
               />
             )}
           </Box>

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

@@ -31,7 +31,6 @@ const PaymentDetailsContent = ({
     </Box>
     <SolidDivider />
     <LabeledAmount
-      as="h2"
       variant={themeValues.labeledAmountTotal}
       label="Total"
       amount={displayCurrency(total)}
@@ -124,14 +123,14 @@ const PaymentDetails = ({
   ) : isCollapsible ? (
     <Box width="100%" padding="none">
       <Cluster justify="space-between" align="center">
-        <Heading variant="h5" weight="700" as="h1">
+        <Heading variant="h6" weight="700">
           {titleText}
         </Heading>
         {displayCurrency(total)}
       </Cluster>
     </Box>
   ) : (
-    <Heading as="h1" variant="h3" weight="700" margin="1rem 0 0 0">
+    <Heading variant="h3" weight="700" margin="1rem 0 0 0">
       {titleText}
     </Heading>
   );

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

@@ -181,7 +181,6 @@ const RadioSection = ({
                             key={icon.img}
                             fade={!icon.enabled}
                             isMobile={isMobile}
-                            alt={icon.altText}
                           />
                         ))}
                       </Cluster>