@thecb/components 11.6.6 → 11.6.8-beta.0

package/package.json

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

package/src/components/atoms/card-type/CardType.js

@@ -0,0 +1,20 @@
+import React from "react";
+import VisaSmallIcon from "../icons/VisaSmallIcon";
+import AmExSmallIcon from "../icons/AmExSmallIcon";
+import DiscoverSmallIcon from "../icons/DiscoverSmallIcon";
+import MasterCardSmallIcon from "../icons/MasterCardSmallIcon";
+import GenericSmallIcon from "../icons/GenericSmallIcon";
+
+const iconMap = {
+  visa: VisaSmallIcon,
+  master_card: MasterCardSmallIcon,
+  discover: DiscoverSmallIcon,
+  amex: AmExSmallIcon
+};
+
+const CardType = ({ type }) => {
+  const IconComponent = iconMap[type] || GenericSmallIcon;
+  return <IconComponent />;
+};
+
+export default CardType;

package/src/components/atoms/card-type/index.js

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

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

@@ -1,6 +1,6 @@
 import React, { Fragment } from "react";
 import styled from "styled-components";
-import GenericCard from "../icons/GenericCard";
+import CardType from "../card-type";
 import Text from "../text";
 import { Box, Stack } from "../layouts";
 import { fallbackValues } from "./FormattedCreditCard.theme";
@@ -22,6 +22,7 @@ export const CCIconWrapper = styled.div`
 
 const FormattedCreditCard = ({
   lastFour,
+  type,
   autoPay,
   expireDate,
   expirationStatus,
@@ -29,7 +30,7 @@ const FormattedCreditCard = ({
 }) => (
   <CreditCardWrapper>
     <CCIconWrapper>
-      <GenericCard />
+      <CardType type={type} />
     </CCIconWrapper>
     <Stack childGap="0">
       <Box padding="0">

package/src/components/atoms/index.js

@@ -48,6 +48,7 @@ export { default as Title } from "./title";
 export { default as ToggleSwitch } from "./toggle-switch";
 export { default as TypeaheadInput } from "./typeahead-input";
 export { default as Card } from "./card";
+export { default as CardType } from "./card-type";
 export { default as NavTabs } from "./nav-tabs";
 export { default as LoadingLine } from "./loading-line";
 export { default as WalletName } from "./wallet-name";

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

@@ -31,15 +31,20 @@ const PaymentButtonBar = ({
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
+  // cancel URLs are external (back to client system)
+  const handleCancel = () => {
+    window.location.href = cancelURL;
+  };
+
   const backButton =
     !!cancelURL && !!cancelText ? (
-      <ButtonWithLink
+      <ButtonWithAction
         text={cancelText}
-        url={cancelURL}
+        action={handleCancel}
         variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
         dataQa={backButtonTestId || cancelText}
-        aria-labelledby={`${kebabCaseString(cancelText)}-button`}
+        aria-label={`${cancelText}, navigate back to previous site`}
         role="link"
       />
     ) : (
@@ -50,7 +55,7 @@ const PaymentButtonBar = ({
           action={backButtonAction}
           extraStyles={isMobile && "flex-grow: 1"}
           dataQa="Back"
-          aria-labelledby="back-button"
+          aria-label={"Back, navigate to previous page"}
           role="link"
         />
       )