@thecb/components 9.2.7-beta.9 → 9.2.8-beta.0

package/package.json

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

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

@@ -265,11 +265,13 @@ const Dropdown = ({
       clearTimeout(timer);
       setTimer(setTimeout(() => setInputValue(""), 20000));
     }
+
     setFilteredOptions(
       options.filter(
         option =>
-          option.value.toLowerCase().match(inputValue.toLowerCase()) ||
-          option.text.toLowerCase().match(inputValue.toLowerCase())
+          option?.value?.toLowerCase()?.indexOf(inputValue?.toLowerCase()) >=
+            0 ||
+          option.text?.toLowerCase()?.indexOf(inputValue?.toLowerCase()) >= 0
       )
     );
   }, [inputValue]);

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

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

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

@@ -0,0 +1,38 @@
+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;

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

@@ -38,7 +38,8 @@ import {
   SuccessfulIcon,
   VoidedIcon,
   StatusUnknownIcon,
-  AutopayIcon
+  AutopayIcon,
+  KebabMenuIcon
 } from "./index";
 
 const story = page({
@@ -84,3 +85,4 @@ 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,3 +21,4 @@ export * from "./SuccessfulIconMedium";
 export * from "./SuccessfulIconSmall";
 export * from "./XCircleIconMedium";
 export * from "./XCircleIconSmall";
+export * from "./KebabMenuIcon";

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

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

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -60,8 +60,6 @@ const AccountAndRoutingModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       extraStyles={`cursor: pointer;`}
-      role="button"
-      className="modal-trigger"
     >
       {link}
     </Text>

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

@@ -45,12 +45,10 @@ const Modal = ({
   isLoading,
   buttonExtraStyles,
   children,
-  dataQa = null,
-  initialFocus = null
+  dataQa = null
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const modalContainerRef = useRef(null);
-
   return (
     <div ref={modalContainerRef} data-qa={dataQa}>
       {modalOpen && (
@@ -72,9 +70,6 @@ const Modal = ({
             width: customWidth || "615px"
           }}
           underlayClickExits={underlayClickExits}
-          aria-modal={true}
-          aria-name={modalHeaderText}
-          {...(initialFocus ? { initialFocus: initialFocus } : {})}
         >
           <Box
             padding="0"
@@ -129,8 +124,6 @@ const Modal = ({
                                     dataQa={cancelButtonText}
                                     extraStyles={buttonExtraStyles}
                                     className="modal-cancel-button"
-                                    role="button"
-                                    name={cancelButtonText}
                                   />
                                 </Box>
                                 <Box width="100%" padding="0">
@@ -145,8 +138,6 @@ const Modal = ({
                                     disabled={isContinueActionDisabled}
                                     extraStyles={buttonExtraStyles}
                                     className="modal-continue-button"
-                                    role="button"
-                                    name={continueButtonText}
                                   />
                                 </Box>
                               </Stack>
@@ -165,8 +156,6 @@ const Modal = ({
                                   dataQa={cancelButtonText}
                                   extraStyles={buttonExtraStyles}
                                   className="modal-cancel-button"
-                                  role="button"
-                                  name={cancelButtonText}
                                 />
                                 <ButtonWithAction
                                   variant={
@@ -179,8 +168,6 @@ const Modal = ({
                                   disabled={isContinueActionDisabled}
                                   extraStyles={buttonExtraStyles}
                                   className="modal-continue-button"
-                                  role="button"
-                                  name={continueButtonText}
                                 />
                               </Stack>
                             )}
@@ -194,8 +181,6 @@ const Modal = ({
                               dataQa={closeButtonText}
                               extraStyles={buttonExtraStyles}
                               className="modal-close-button"
-                              role="button"
-                              name={closeButtonText}
                             />
                           </Box>
                         )}

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV1.js

@@ -33,7 +33,6 @@ const TermsAndConditionsControlV1 = ({
                 isOpen={showTerms}
                 toggleOpen={toggleShowTerms}
                 linkVariant={linkVariant}
-                initialFocus={`[role="button"]:not(.modal-trigger)`}
               />
             )}
           </Stack>

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -75,7 +75,6 @@ const TermsAndConditionsControlV2 = ({
                   toggleOpen={toggleTerms}
                   linkVariant={modalVariant}
                   title={modalTitle}
-                  initialFocus={`.modal-close-button`}
                 />
               )}
             </Cluster>

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -15,8 +15,7 @@ const TermsAndConditionsModal = ({
   terms,
   variant,
   linkVariant = "p",
-  themeValues,
-  initialFocus = null
+  themeValues
 }) => (
   <Modal
     modalOpen={isOpen}
@@ -43,7 +42,6 @@ const TermsAndConditionsModal = ({
       toggleAccepted(true);
       toggleOpen(false);
     }}
-    {...(initialFocus ? { initialFocus: initialFocus } : {})}
   >
     <Text
       variant={linkVariant}
@@ -54,8 +52,6 @@ const TermsAndConditionsModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
-      role="button"
-      className="modal-trigger"
     >
       {link}
     </Text>