@thecb/components 10.6.6-beta.5 → 10.6.7-beta.0

package/package.json

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

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
-    )} cards are not available for payment`
+    )} is not accepted`
   };
   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, object } from "@storybook/addon-knobs";
+import { boolean } from "@storybook/addon-knobs";
 
 import PaymentFormCard from "./PaymentFormCard";
 import page from "../../../../.storybook/page";
@@ -13,21 +13,12 @@ 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/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]\d{13}$/.test(number)) {
+  } else if (/^3[4,7]/.test(number)) {
     return "American Express";
-  } else return "Unknown";
+  } else return "Unknown Card";
 };
 
 export const checkDeniedCards = name => {