@thecb/components 10.7.1-beta.1 → 10.7.2-beta.1

package/package.json

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

package/src/components/atoms/alert/Alert.js

@@ -73,7 +73,16 @@ const Alert = ({
           </Box>
           <Cluster justify="flex-end" align="flex-start">
             {showQuitLink && (
-              <Box padding="0" minHeight="100%" onClick={onLinkClick}>
+              <Box
+                padding="0"
+                minHeight="100%"
+                onClick={onLinkClick}
+                onKeyDown={e => e.key === "Enter" && onLinkClick()}
+                role="button"
+                tabIndex={0}
+                aria-label={`Close Alert: ${heading}`}
+                extraStyles="cursor: pointer;"
+              >
                 <IconQuit />
               </Box>
             )}

package/src/components/atoms/wallet-name/WalletName.js

@@ -7,6 +7,7 @@ import { ThemeContext } from "styled-components";
 import Module from "../../molecules/module/Module";
 import Spinner from "../spinner/Spinner";
 import { CHARADE_GREY } from "../../../constants/colors";
+import { noop } from "../../../util/general";
 
 const WalletName = ({
   mainText, // left side text
@@ -15,9 +16,7 @@ const WalletName = ({
   actionText = null, // right side hyperlinked text
   disableAction = false,
   linkButtonExtraStyles = "", // hyperlinked text extraStyles
-  isLoading = false, // shows a spinner on the left when true
-  dataQa = null,
-  actionTextPositionMobile = "outside" // whether action text is outside/below box or inside it
+  isLoading = false // shows a spinner on the left when true
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -50,7 +49,7 @@ const WalletName = ({
               mainText && <Text>{mainText}</Text>
             )}
           </Box>
-          {(actionTextPositionMobile === "inside" || !isMobile) && (
+          {!isMobile && (
             <Box padding="0">
               {text && <Text variant="pXS">{text}</Text>}
               {(text || actionText) && <>&nbsp;</>}
@@ -58,7 +57,6 @@ const WalletName = ({
                 <ButtonWithAction
                   disabled={disableAction}
                   text={actionText}
-                  dataQa={dataQa}
                   action={action}
                   variant="smallGhost"
                   extraStyles={`
@@ -73,7 +71,7 @@ const WalletName = ({
           )}
         </Cluster>
       </Module>
-      {!!isMobile && actionTextPositionMobile === "outside" && (
+      {isMobile && (
         <Cluster
           align="center"
           justify={text || actionText ? "flex-end" : "flex-start"}

package/src/components/atoms/wallet-name/WalletName.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 import WalletName from "./WalletName";
-import { text, object, boolean, select } from "@storybook/addon-knobs";
+import { text, object, boolean } from "@storybook/addon-knobs";
 import page from "../../../../.storybook/page";
 
 export const walletName = () => {
@@ -12,31 +12,6 @@ export const walletName = () => {
       text={text("text", "Not you?", "props")}
       disableAction={boolean("disableAction", false, "props")}
       isLoading={boolean("isLoading", false, "props")}
-      actionTextPositionMobile={select(
-        "actionTextPositionMobile",
-        { inside: "inside", outside: "outside" },
-        "outside",
-        "props"
-      )}
-    />
-  );
-};
-
-export const walletNameWithOverrides = () => {
-  return (
-    <WalletName
-      mainText={text("mainText", "Firstname Lastname", "props")}
-      action={object("action", () => window.alert("action fired!"), "props")}
-      actionText={text("actionText", "Check out as a guest", "props")}
-      text={text("text", "Not you?", "props")}
-      disableAction={boolean("disableAction", false, "props")}
-      isLoading={boolean("isLoading", false, "props")}
-      actionTextPositionMobile={select(
-        "actionTextPositionMobile",
-        { inside: "inside", outside: "outside" },
-        "outside",
-        "props"
-      )}
     />
   );
 };

package/src/components/atoms/wallet-name/index.d.ts

@@ -9,8 +9,6 @@ export interface WalletNameProps {
   text?: string | null;
   isLoading: boolean;
   buttonExtraStyles?: string;
-  dataQa?: string | null;
-  actionTextPositionMobile?: "inside" | "outside";
 }
 
 export const WalletName: React.FC<Expand<WalletNameProps> &

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

@@ -15,6 +15,8 @@ import {
   InactiveControlsModule,
   InactiveTitleModule
 } from "./modules";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./Obligation.theme";
 
 const Obligation = ({
   config,
@@ -37,7 +39,8 @@ const Obligation = ({
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
   inactiveLookupValue = "",
-  isInCustomerManagement = false
+  isInCustomerManagement = false,
+  themeValues
 }) => {
   /*
     The value of obligations is always an array. It can contain:
@@ -88,6 +91,7 @@ const Obligation = ({
                       configIconMap={config.iconMap}
                       iconValue={config.iconValue}
                       customAttributes={customAttributes}
+                      iconColor={themeValues.iconColor}
                     />
                   )}
                   <TitleModule
@@ -194,6 +198,7 @@ const Obligation = ({
                     configIconMap={config.iconMap}
                     iconValue={config.iconValue}
                     customAttributes={customAttributes}
+                    iconColor={themeValues.iconColor}
                   />
                   <InactiveTitleModule
                     title={inactiveLookupTitle}
@@ -256,4 +261,4 @@ const Obligation = ({
   return inactive ? inactiveObligation : activeObligation;
 };
 
-export default Obligation;
+export default themeComponent(Obligation, "Obligation", fallbackValues);

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

@@ -0,0 +1,7 @@
+import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
+
+const iconColor = ROYAL_BLUE_VIVID;
+
+export const fallbackValues = {
+  iconColor
+};

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

@@ -4,7 +4,7 @@ import { Box, Stack } from "../../../atoms/layouts";
 import Text from "../../../atoms/text";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
 import { displayCurrency, noop } from "../../../../util/general";
-import { AutopayModalModule } from "./AutopayModalModule";
+import AutopayModalModule from "./AutopayModalModule";
 
 const AmountModule = ({
   totalAmountDue,

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

@@ -6,11 +6,10 @@ import { AutopayOnIcon } from "../../../atoms/icons";
 import { Box, Cluster } from "../../../atoms/layouts";
 import { SEA_GREEN } from "../../../../constants/colors";
 import { ACH_METHOD, CC_METHOD } from "../../../../constants/general";
-import { fallbackValues } from "./AutopayModalModule.theme";
-import { themeComponent } from "../../../../util/themeUtils";
 import { titleCaseString, noop } from "../../../../util/general";
+import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
 
-const AutopayModal = ({
+const AutopayModalModule = ({
   autoPayActive,
   autoPaySchedule,
   paymentPlanSchedule,
@@ -20,7 +19,6 @@ const AutopayModal = ({
   navigateToSettings,
   controlType = "tertiary",
   isMobile,
-  themeValues,
   isPaymentPlan,
   nextAutopayDate,
   dueDate,
@@ -75,6 +73,12 @@ const AutopayModal = ({
         }
       : navigateToSettings
   };
+  const modalLinkHoverFocus = `
+    outline: none;
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-color: #317D4F;
+  `;
 
   const hoverStyles = "text-decoration: underline;";
   const activeStyles = "text-decoration: underline;";
@@ -142,8 +146,8 @@ const AutopayModal = ({
                 tabIndex="0"
                 dataQa={`${shortPlan} On`}
                 color={SEA_GREEN}
-                weight={themeValues.fontWeight}
-                hoverStyles={themeValues.modalLinkHoverFocus}
+                weight={FONT_WEIGHT_REGULAR}
+                hoverStyles={modalLinkHoverFocus}
                 extraStyles={`padding-left: 0.25rem;`}
                 disabled={disableActions}
               >
@@ -167,8 +171,4 @@ const AutopayModal = ({
   );
 };
 
-export const AutopayModalModule = themeComponent(
-  AutopayModal,
-  "AutopayModal",
-  fallbackValues
-);
+export default AutopayModalModule;

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

@@ -1,10 +1,6 @@
 import React from "react";
 import { iconsMap } from "../icons";
 import { Box, Cluster } from "../../../atoms/layouts";
-import { themeComponent } from "../../../../util/themeUtils";
-import { fallbackValues } from "../../../atoms/icons/Icons.theme";
-
-// Uses the theme values (singleIconColor) for the other icons, located in /atoms/icons
 
 const IconsModule = ({
   icon,
@@ -12,7 +8,7 @@ const IconsModule = ({
   configIconMap,
   iconValue,
   customAttributes,
-  themeValues
+  iconColor
 }) => {
   let Icon;
   if (typeof icon === "object") {
@@ -25,10 +21,10 @@ const IconsModule = ({
   return (
     <Box padding="0 1rem 0 0">
       <Cluster justify="center" align="center">
-        <Icon color={themeValues.singleIconColor} />
+        <Icon color={iconColor} />
       </Cluster>
     </Box>
   );
 };
 
-export default themeComponent(IconsModule, "Icon", fallbackValues, "primary");
+export default IconsModule;

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { GHOST_GREY } from "../../../../constants/colors";
 import { Box, Cluster } from "../../../atoms/layouts";
-import { AutopayModalModule } from "./AutopayModalModule";
+import AutopayModalModule from "./AutopayModalModule";
 import RemoveAccountModalModule from "./RemoveAccountModalModule";
 import { noop } from "../../../../util/general";
 

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Box, Cluster } from "../../../atoms/layouts";
 import ButtonWithAction from "../../../atoms/button-with-action";
-import { AutopayModalModule } from "./AutopayModalModule";
+import AutopayModalModule from "./AutopayModalModule";
 import { GHOST_GREY } from "../../../../constants/colors";
 import AmountModule from "./AmountModule";
 import { noop } from "../../../../util/general";

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

@@ -25,9 +25,7 @@ const PaymentButtonBar = ({
   hideBackButton = false,
   buttonGroupStyles,
   hideAdditionalButton = false,
-  additionalButton,
-  nextButtonTestId = null,
-  backButtonTestId = null
+  additionalButton
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -38,7 +36,7 @@ const PaymentButtonBar = ({
         url={cancelURL}
         variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
-        dataQa={backButtonTestId || cancelText}
+        dataQa={cancelText}
         aria-labelledby={`${kebabCaseString(cancelText)}-button`}
         role="link"
       />
@@ -62,7 +60,7 @@ const PaymentButtonBar = ({
       text={redirectText}
       variant={forwardButtonVariant}
       extraStyles={isMobile && "flex-grow: 1"}
-      dataQa={nextButtonTestId || redirectText}
+      dataQa={redirectText}
       disabled={isForwardButtonDisabled}
       aria-labelledby={`${kebabCaseString(redirectText)}-button`}
       role={forwardButtonAriaRole}
@@ -75,7 +73,7 @@ const PaymentButtonBar = ({
         action={forwardButtonAction}
         isLoading={forwardButtonLoading}
         extraStyles={isMobile && "flex-grow: 1"}
-        dataQa={nextButtonTestId || forwardButtonText}
+        dataQa={forwardButtonText}
         disabled={isForwardButtonDisabled}
         aria-labelledby={`${kebabCaseString(forwardButtonText)}-button`}
         role={forwardButtonAriaRole}

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

@@ -58,7 +58,6 @@ const RadioSection = ({
   ariaDescribedBy,
   isSectionRequired = false,
   groupedSections,
-  borderOverride,
   ...rest
 }) => {
   const [focused, setFocused] = useState(null);
@@ -99,7 +98,7 @@ const RadioSection = ({
   return (
     <Box
       padding="1px"
-      border={borderOverride || `1px solid ${themeValues.borderColor}`}
+      border={`1px solid ${themeValues.borderColor}`}
       borderRadius="4px"
       extraStyles={containerStyles}
       role="radiogroup"

package/src/components/molecules/toast-notification/ToastNotification.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import { Box, Cluster } from "../../atoms/layouts";
 import { Paragraph } from "../../atoms";
 import {
@@ -13,6 +13,7 @@ import {
 } from "../../../constants/colors";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { generateShadows } from "../../../util/generateShadows";
+import { SCREEN_READER_ONLY } from "../../../constants/style_constants";
 
 const VARIANTS = {
   SUCCESS: "success",
@@ -30,55 +31,85 @@ const ToastNotification = ({
   height = "56px",
   childGap = "1rem",
   backgroundColor,
-  role = "alert",
+  role = "status",
   ariaLive = "polite",
+  screenReaderMessage,
+  showScreenReaderMessage = true,
   ...rest
-}) => (
-  <Box
-    onClick={closeToastNotification}
-    onKeyDown={e => e.key === "Enter" && closeToastNotification()}
-    background={
-      backgroundColor
-        ? backgroundColor
-        : variant === VARIANTS.SUCCESS
-        ? HINT_GREEN
-        : variant === VARIANTS.ERROR
-        ? ERROR_BACKGROUND_COLOR
-        : WHITE
+}) => {
+  const screenReaderMessageRef = useRef();
+  const LIVEREGION_TRANSITION_DELAY = 1000;
+
+  useEffect(() => {
+    if (showScreenReaderMessage) {
+      const timeout = setTimeout(() => {
+        if (screenReaderMessageRef.current) {
+          screenReaderMessageRef.current.textContent = `${
+            screenReaderMessage ? screenReaderMessage : message ? message : ""
+          }`;
+        }
+      }, LIVEREGION_TRANSITION_DELAY);
+
+      return () => clearTimeout(timeout);
     }
-    minWidth={minWidth}
-    minHeight={height && parseInt(height) < 100 ? height : "100px"}
-    height={height ? height : "auto"}
-    tabIndex={toastOpen ? "-1" : "0"}
-    padding="0rem 1rem"
-    borderRadius="4px"
-    boxShadow={generateShadows().standard.base}
-    extraStyles={`
+  }, [showScreenReaderMessage, screenReaderMessage, message]);
+
+  return (
+    <>
+      <Box
+        onClick={closeToastNotification}
+        onKeyDown={e => e.key === "Enter" && closeToastNotification()}
+        background={
+          backgroundColor
+            ? backgroundColor
+            : variant === VARIANTS.SUCCESS
+            ? HINT_GREEN
+            : variant === VARIANTS.ERROR
+            ? ERROR_BACKGROUND_COLOR
+            : WHITE
+        }
+        minWidth={minWidth}
+        minHeight={height && parseInt(height) < 100 ? height : "100px"}
+        height={height ? height : "auto"}
+        tabIndex={toastOpen ? "-1" : "0"}
+        padding="0rem 1rem"
+        borderRadius="4px"
+        boxShadow={generateShadows().standard.base}
+        extraStyles={`
       display: ${toastOpen ? "block" : "none"};
       position: fixed; bottom: 4rem; left: 4rem;
       ${extraStyles};
       cursor: pointer;
     `}
-    role={role}
-    aria-live={ariaLive}
-    {...rest}
-  >
-    <Cluster align="center" childGap={childGap} justify="space-between">
-      <Cluster align="center" childGap={childGap}>
-        {variant === VARIANTS.SUCCESS && <SuccessfulIconMedium />}
-        {variant === VARIANTS.ERROR && <ErroredIcon />}
-        <Box padding="1rem 0" maxWidth={maxWidth}>
-          <Paragraph
-            weight={FONT_WEIGHT_SEMIBOLD}
-            extraStyles={"word-break: break-word;"}
-          >
-            {message}
-          </Paragraph>
-        </Box>
-      </Cluster>
-      <IconQuitLarge />
-    </Cluster>
-  </Box>
-);
+        {...rest}
+      >
+        <Cluster align="center" childGap={childGap} justify="space-between">
+          <Cluster align="center" childGap={childGap}>
+            {variant === VARIANTS.SUCCESS && <SuccessfulIconMedium />}
+            {variant === VARIANTS.ERROR && <ErroredIcon />}
+            <Box padding="1rem 0" maxWidth={maxWidth}>
+              <Paragraph
+                weight={FONT_WEIGHT_SEMIBOLD}
+                extraStyles={"word-break: break-word;"}
+              >
+                {message}
+              </Paragraph>
+            </Box>
+          </Cluster>
+          <IconQuitLarge />
+        </Cluster>
+      </Box>
+      {showScreenReaderMessage && (
+        <span
+          ref={screenReaderMessageRef}
+          style={SCREEN_READER_ONLY}
+          role={role}
+          aria-live={ariaLive}
+          aria-atomic={true}
+        ></span>
+      )}
+    </>
+  );
+};
 
 export default ToastNotification;

package/src/constants/style_constants.js

@@ -24,3 +24,15 @@ export const SPACING = {
   XS: "1.0rem", // Figma: Spacing/XS
   MD: "1.5rem" // Figma: Spacing/Normal
 };
+export const SCREEN_READER_ONLY = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  width: "1px",
+  whiteSpace: "nowrap"
+};

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

@@ -1,20 +0,0 @@
-import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
-
-const color = "#15749D";
-const hoverColor = "#116285";
-const activeColor = "#0E506D";
-const linkColor = "#3176AA";
-const fontWeight = FONT_WEIGHT_REGULAR;
-const modalLinkHoverFocus = `outline: none;
-  cursor: pointer;
-  text-decoration: underline;
-  text-decoration-color: #317D4F;`;
-
-export const fallbackValues = {
-  color,
-  hoverColor,
-  activeColor,
-  linkColor,
-  fontWeight,
-  modalLinkHoverFocus
-};