@thecb/components 10.6.9-beta.1 → 10.6.9-beta.2

package/package.json

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

package/src/components/atoms/dropdown/Dropdown.js

@@ -357,7 +357,7 @@ const Dropdown = ({
             setInputChangedByAutofill(true);
           }
         }}
-        padding="12px"
+        padding="12px 25px 12px 12px"
         placeholder={getSelection()}
         required={options.required || isRequired}
         role="combobox"

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

@@ -2,45 +2,27 @@ import React from "react";
 
 export const CloseIcon = ({
   iconFill = "#3B414D",
-  iconWidth = "24",
-  iconHeight = "24",
+  iconWidth = "24px",
+  iconHeight = "24px",
   ...rest
 }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width={iconWidth}
-      height={iconHeight}
-      viewBox="0 0 24 24"
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
       fill="none"
+      style={{ width: iconWidth, height: iconHeight }}
       {...rest}
     >
       <title>Close Icon</title>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M17.3033 5.98982C17.108 5.79456 16.7915 5.79456 16.5962 5.98982L12 10.586L7.40381 5.98982C7.20854 5.79456 6.89196 5.79456 6.6967 5.98982L5.98959 6.69693C5.79433 6.89219 5.79433 7.20878 5.98959 7.40404L10.5858 12.0002L5.98959 16.5964C5.79433 16.7917 5.79433 17.1083 5.98959 17.3035L6.6967 18.0106C6.89196 18.2059 7.20854 18.2059 7.40381 18.0106L12 13.4144L16.5962 18.0106C16.7915 18.2059 17.108 18.2059 17.3033 18.0106L18.0104 17.3035C18.2057 17.1083 18.2057 16.7917 18.0104 16.5964L13.4142 12.0002L18.0104 7.40404C18.2057 7.20878 18.2057 6.89219 18.0104 6.69693L17.3033 5.98982Z"
+        d="M17.3033 6.48982C17.108 6.29456 16.7915 6.29456 16.5962 6.48982L12 11.086L7.40381 6.48982C7.20854 6.29456 6.89196 6.29456 6.6967 6.48982L5.98959 7.19693C5.79433 7.39219 5.79433 7.70878 5.98959 7.90404L10.5858 12.5002L5.98959 17.0964C5.79433 17.2917 5.79433 17.6083 5.98959 17.8035L6.6967 18.5106C6.89196 18.7059 7.20854 18.7059 7.40381 18.5106L12 13.9144L16.5962 18.5106C16.7915 18.7059 17.108 18.7059 17.3033 18.5106L18.0104 17.8035C18.2057 17.6083 18.2057 17.2917 18.0104 17.0964L13.4142 12.5002L18.0104 7.90404C18.2057 7.70878 18.2057 7.39219 18.0104 7.19693L17.3033 6.48982Z"
         fill={iconFill}
       />
-      <mask
-        id="mask0_3727_16765"
-        style={{ maskType: "luminance" }}
-        maskUnits="userSpaceOnUse"
-        x="5"
-        y="5"
-        width="14"
-        height="14"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M17.3033 5.98982C17.108 5.79456 16.7915 5.79456 16.5962 5.98982L12 10.586L7.40381 5.98982C7.20854 5.79456 6.89196 5.79456 6.6967 5.98982L5.98959 6.69693C5.79433 6.89219 5.79433 7.20878 5.98959 7.40404L10.5858 12.0002L5.98959 16.5964C5.79433 16.7917 5.79433 17.1083 5.98959 17.3035L6.6967 18.0106C6.89196 18.2059 7.20854 18.2059 7.40381 18.0106L12 13.4144L16.5962 18.0106C16.7915 18.2059 17.108 18.2059 17.3033 18.0106L18.0104 17.3035C18.2057 17.1083 18.2057 16.7917 18.0104 16.5964L13.4142 12.0002L18.0104 7.40404C18.2057 7.20878 18.2057 6.89219 18.0104 6.69693L17.3033 5.98982Z"
-          fill="none"
-        />
-      </mask>
-      <g mask="url(#mask0_3727_16765)">
-        <path d="M0 0H24V24H0V0Z" fill={iconFill} />
-      </g>
     </svg>
   );
 };

package/src/components/molecules/modal/ModalControlV2.js

@@ -141,7 +141,11 @@ const Modal = ({
                   {modalHeaderText}
                 </Title>
                 {showCloseIconButton && (
-                  <CloseIconButton hideModal={hideModal} />
+                  <CloseIconButton
+                    hideModal={hideModal}
+                    iconHeight={isMobile ? "20px" : "24px"}
+                    iconWidth={isMobile ? "20px" : "24px"}
+                  />
                 )}
               </Cluster>
             </Box>

package/src/components/molecules/modal/__private__/CloseIconButton.js

@@ -6,8 +6,8 @@ import { CloseIcon } from "../../../atoms/icons/CloseIcon";
 export const CloseIconButton = ({
   buttonExtraStyles = "",
   hideModal = noop,
-  iconWidth = "24",
-  iconHeight = "24",
+  iconWidth = "24px",
+  iconHeight = "24px",
   ariaLabel = "Close Modal"
 }) => {
   return (

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

@@ -162,9 +162,7 @@ const PaymentDetailsActions = ({
           <Box padding="8px 0 0" width="100%">
             <ButtonWithAction
               isLoading={isLoading}
-              action={() =>
-                disableActions ? noop : () => handleClick(obligations)
-              }
+              action={disableActions ? noop : () => handleClick(obligations)}
               text="Pay Now"
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"

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

@@ -71,7 +71,7 @@ const PaymentFormCard = ({
     [hasLength.error]: "Credit card number is invalid",
     [matchesRegex.error]: `${displayCardBrand(
       fields.creditCardNumber.rawValue
-    )} is not accepted`
+    )} cards are not available for payment`
   };
   const expirationDateErrors = {
     [required.error]: "Expiration date is required",

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { boolean } from "@storybook/addon-knobs";
+import { boolean, object } from "@storybook/addon-knobs";
 
 import PaymentFormCard from "./PaymentFormCard";
 import page from "../../../../.storybook/page";
@@ -13,12 +13,21 @@ const story = page({
   mapStateToProps: PaymentFormCardState.mapStateToProps,
   mapDispatchToProps: PaymentFormCardState.mapDispatchToProps
 });
+
 export default story;
 
 const ConnectedForm = connect(
   PaymentFormCardState.mapStateToProps,
   PaymentFormCardState.mapDispatchToProps
 )(PaymentFormCard);
+
 export const paymentFormCard = () => (
   <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
 );
+
+export const paymentFormCardWithDeniedCards = () => (
+  <ConnectedForm
+    showErrors={boolean("showErrors", false, "props")}
+    deniedCards={object("deniedCards", ["AMEX"], "props")}
+  />
+);

package/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.js

@@ -3,22 +3,14 @@ import { ThemeContext } from "styled-components";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import { Box, Cluster } from "../../atoms/layouts";
-import { CHARADE_GREY, WHITE } from "../../../constants/colors";
+import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
 import ButtonWithLink from "../../atoms/button-with-link";
 import { ForgotPasswordIcon } from "../../atoms/icons";
 import withWindowSize from "../../withWindowSize";
 import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
-import { fallbackValues } from "./ResetConfirmatForm.theme";
-import { createThemeValues } from "../../../util/themeUtils";
 
 const ResetConfirmationForm = () => {
-  const themeContext = useContext(ThemeContext);
-  const themeValues = createThemeValues(
-    themeContext,
-    fallbackValues,
-    "ResetConfirmationForm"
-  );
-  const { isMobile } = themeContext;
+  const { isMobile } = useContext(ThemeContext);
 
   return (
     <Box
@@ -28,11 +20,7 @@ const ResetConfirmationForm = () => {
       background={WHITE}
       boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
     >
-      <Box
-        background={themeValues.bannerBackgroundColor}
-        minWidth="100%"
-        padding="0.5rem"
-      >
+      <Box background={GRECIAN_GREY} minWidth="100%" padding="0.5rem">
         <Cluster justify="center" align="center">
           <ForgotPasswordIcon />
         </Cluster>

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.js

@@ -3,22 +3,14 @@ import { ThemeContext } from "styled-components";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import { Box, Cluster } from "../../atoms/layouts";
-import { CHARADE_GREY, WHITE } from "../../../constants/colors";
+import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
 import ButtonWithLink from "../../atoms/button-with-link";
 import { ForgotPasswordIcon } from "../../atoms/icons";
 import withWindowSize from "../../withWindowSize";
 import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
-import { fallbackValues } from "./ResetPasswordSuccess.theme";
-import { createThemeValues } from "../../../util/themeUtils";
 
-const ResetPasswordSuccess = () => {
-  const themeContext = useContext(ThemeContext);
-  const themeValues = createThemeValues(
-    themeContext,
-    fallbackValues,
-    "ResetPasswordSuccess"
-  );
-  const { isMobile } = themeContext;
+const ResetConfirmationForm = () => {
+  const { isMobile } = useContext(ThemeContext);
 
   return (
     <Box
@@ -28,11 +20,7 @@ const ResetPasswordSuccess = () => {
       background={WHITE}
       boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
     >
-      <Box
-        background={themeValues.bannerBackgroundColor}
-        minWidth="100%"
-        padding="0.5rem"
-      >
+      <Box background={GRECIAN_GREY} minWidth="100%" padding="0.5rem">
         <Cluster justify="center" align="center">
           <ForgotPasswordIcon />
         </Cluster>
@@ -65,4 +53,4 @@ const ResetPasswordSuccess = () => {
     </Box>
   );
 };
-export default withWindowSize(ResetPasswordSuccess);
+export default withWindowSize(ResetConfirmationForm);

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

@@ -30,10 +30,13 @@ const ToastNotification = ({
   height = "56px",
   childGap = "1rem",
   backgroundColor,
-  role = "alert"
+  role = "alert",
+  ariaLive = "polite",
+  ...rest
 }) => (
   <Box
     onClick={closeToastNotification}
+    onKeyDown={e => e.key === "Enter" && closeToastNotification()}
     background={
       backgroundColor
         ? backgroundColor
@@ -57,6 +60,8 @@ const ToastNotification = ({
       cursor: pointer;
     `}
     role={role}
+    aria-live={ariaLive}
+    {...rest}
   >
     <Cluster align="center" childGap={childGap} justify="space-between">
       <Cluster align="center" childGap={childGap}>

package/src/util/general.js

@@ -74,9 +74,9 @@ export const displayCardBrand = number => {
     return "Mastercard";
   } else if (/^4/.test(number)) {
     return "Visa";
-  } else if (/^3[4,7]/.test(number)) {
+  } else if (/^3[4,7]\d{13}$/.test(number)) {
     return "American Express";
-  } else return "Unknown Card";
+  } else return "Unknown";
 };
 
 export const checkDeniedCards = name => {

package/src/components/molecules/reset-confirmation-form/ResetConfirmatForm.theme.js

@@ -1,9 +0,0 @@
-import { colors } from "../../../constants";
-
-const { GRECIAN_GREY } = colors;
-
-const bannerBackgroundColor = GRECIAN_GREY;
-
-export const fallbackValues = {
-  bannerBackgroundColor
-};

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.theme.js

@@ -1,9 +0,0 @@
-import { colors } from "../../../constants";
-
-const { GRECIAN_GREY } = colors;
-
-const bannerBackgroundColor = GRECIAN_GREY;
-
-export const fallbackValues = {
-  bannerBackgroundColor
-};