@thecb/components 9.2.8-beta.0 → 9.2.9-beta.0

package/package.json

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

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

@@ -7,6 +7,8 @@ const AccountNumberImage = () => {
       width="371"
       height="164"
       viewBox="0 0 371 164"
+      role="img"
+      aria-label="A check with the account number highlighted in the bottom center"
     >
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <g transform="translate(-364 -546)">

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

@@ -8,6 +8,8 @@ export const BankIcon = () => {
       viewBox="0 0 28 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Check Payment"
     >
       <path
         d="M0 2.25C0 1.00736 1.04467 0 2.33333 0H25.6667C26.9553 0 28 1.00736 28 2.25V15.75C28 16.9926 26.9553 18 25.6667 18H2.33333C1.04467 18 0 16.9926 0 15.75V2.25Z"

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

@@ -9,6 +9,8 @@ const CheckmarkIcon = () => (
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
+    role="img"
+    aria-label="Successful payment, green checkmark"
   >
     <g
       id="Cityville-Checkout---Desktop---Logged-In"

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

@@ -7,6 +7,8 @@ const GenericCard = () => (
     viewBox="0 0 28 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-label="Card Payment"
   >
     <rect width="28" height="18" rx="2" fill="#15749D" />
     <path

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

@@ -7,6 +7,8 @@ const RoutingNumberImage = () => {
       width="371"
       height="164"
       viewBox="0 0 371 164"
+      role="img"
+      aria-label="A check with the routing number highlighted in the lower left hand corner"
     >
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <g transform="translate(-365 -522)">

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

@@ -38,8 +38,7 @@ import {
   SuccessfulIcon,
   VoidedIcon,
   StatusUnknownIcon,
-  AutopayIcon,
-  KebabMenuIcon
+  AutopayIcon
 } from "./index";
 
 const story = page({
@@ -85,4 +84,3 @@ export const successfulIcon = () => <SuccessfulIcon />;
 export const voidedIcon = () => <VoidedIcon />;
 export const statusUnknownIcon = () => <StatusUnknownIcon />;
 export const autopayIcon = () => <AutopayIcon />;
-export const kebabMenuIcon = () => <KebabMenuIcon />;

package/src/components/atoms/icons/index.d.ts

@@ -21,4 +21,3 @@ export * from "./SuccessfulIconMedium";
 export * from "./SuccessfulIconSmall";
 export * from "./XCircleIconMedium";
 export * from "./XCircleIconSmall";
-export * from "./KebabMenuIcon";

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

@@ -86,7 +86,6 @@ import ArrowLeftCircleIconMedium from "./ArrowLeftCircleIconMedium";
 import ChargebackIconMedium from "./ChargebackIconMedium";
 import ChargebackReversalIconMedium from "./ChargebackReversalIconMedium";
 import PlusCircleIcon from "./PlusCircleIcon";
-import KebabMenuIcon from "./KebabMenuIcon";
 
 export {
   AccountsIcon,
@@ -176,6 +175,5 @@ export {
   ArrowLeftCircleIconMedium,
   ChargebackIconMedium,
   ChargebackReversalIconMedium,
-  PlusCircleIcon,
-  KebabMenuIcon
+  PlusCircleIcon
 };

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

@@ -67,7 +67,8 @@ const Modal = ({
             alignItems: "center"
           }}
           dialogStyle={{
-            width: customWidth || "615px"
+            width: customWidth || "615px",
+            overflow: "auto"
           }}
           underlayClickExits={underlayClickExits}
         >

package/src/components/atoms/icons/KebabMenuIcon.d.ts

@@ -1 +0,0 @@
-export const KebabMenuIcon: JSX.Element;

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

@@ -1,38 +0,0 @@
-import React from "react";
-
-const KebabMenuIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="21"
-      height="32"
-      viewBox="0 0 21 32"
-      fill="none"
-    >
-      <path
-        d="M0 4C0 1.79086 1.79086 0 4 0L17 0C19.2091 0 21 1.79086 21 4V28C21 30.2091 19.2091 32 17 32H4C1.79086 32 0 30.2091 0 28L0 4Z"
-        fill="#FEFEFE"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10.5 6C9.39333 6 8.5 6.89333 8.5 8C8.5 9.10667 9.39333 10 10.5 10C11.6067 10 12.5 9.10667 12.5 8C12.5 6.89333 11.6067 6 10.5 6Z"
-        fill="#3B5BDB"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10.5 14C9.39333 14 8.5 14.8933 8.5 16C8.5 17.1067 9.39333 18 10.5 18C11.6067 18 12.5 17.1067 12.5 16C12.5 14.8933 11.6067 14 10.5 14Z"
-        fill="#3B5BDB"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10.5 22C9.39333 22 8.5 22.9067 8.5 24C8.5 25.0933 9.40667 26 10.5 26C11.5933 26 12.5 25.0933 12.5 24C12.5 22.9067 11.6067 22 10.5 22Z"
-        fill="#3B5BDB"
-      />
-    </svg>
-  );
-};
-
-export default KebabMenuIcon;