@thecb/components 7.8.3-beta.2 → 7.8.4

package/package.json

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

package/src/components/atoms/layouts/Cluster.d.ts

@@ -13,6 +13,7 @@ export interface ClusterProps {
   justifySelf?: string;
   alignSelf?: string;
   flexGrow?: string;
+  innerWrapperAs?: string;
 }
 
 export const Cluster: React.FC<Expand<ClusterProps> &

package/src/components/atoms/layouts/Cluster.js

@@ -24,6 +24,7 @@ const Cluster = ({
   flexGrow,
   extraStyles,
   children,
+  innerWrapperAs = "div",
   ...rest
 }) => (
   <ClusterWrapper
@@ -41,6 +42,7 @@ const Cluster = ({
       minHeight={minHeight}
       minWidth={minWidth}
       $nowrap={nowrap}
+      as={innerWrapperAs}
     >
       {safeChildren(children, <Fragment />)}
     </ClusterInnerWrapper>

package/src/components/molecules/pagination/Pagination.js

@@ -23,6 +23,7 @@ const PrevNextPlaceholder = ({ buttonHeight, buttonWidth }) => (
 
 const PrevNextButton = ({
   action,
+  ariaLabel,
   arrowColor,
   borderRadius,
   buttonHeight,
@@ -34,11 +35,13 @@ const PrevNextButton = ({
     padding="0"
     minHeight={buttonHeight}
     extraStyles={`max-height: ${buttonHeight};`}
+    as="li"
   >
     <ButtonWithAction
       action={action}
       contentOverride
       dataQa={type}
+      aria-label={ariaLabel}
       extraStyles={`
         background-color: ${numberColor};
         border-color: ${numberColor};
@@ -48,9 +51,6 @@ const PrevNextButton = ({
         min-height: 100%;
         min-width: ${buttonWidth};
         padding: 0;
-        &:focus {
-          outline: none
-        }
       `}
     >
       <Box padding="0" extraStyles={type === "prev" && "transform: scaleX(-1)"}>
@@ -68,19 +68,23 @@ export const getPagesPanel = (page, pagesCount) => {
   const space = page === 1 ? PAGING_INIT_SPACE : PAGING_SPACE;
   const pages = [{ index: 1, isButton: true }];
   if (page > space + 1) {
-    pages.push({ isDelimiter: true });
+    pages.push({ isDelimiter: true, id: "first-delimiter" });
   }
   for (
     let j = Math.max(1, page - space) + 1;
     j < Math.min(lastPageNumber, page + space);
     j++
   ) {
-    pages.push({ index: j, isButton: true });
+    pages.push({ index: j, isButton: true, id: `page-${j}` });
   }
   if (page < lastPageNumber - space) {
-    pages.push({ isDelimiter: true });
+    pages.push({ isDelimiter: true, id: "last-delimiter" });
   }
-  pages.push({ index: lastPageNumber, isButton: true });
+  pages.push({
+    index: lastPageNumber,
+    isButton: true,
+    id: `page-${lastPageNumber}`
+  });
   const activePage = pages.find(p => p.index === page);
   if (activePage) {
     activePage.active = true;
@@ -103,6 +107,7 @@ const Pagination = ({
   pageNext,
   pagePrevious,
   setCurrentPage,
+  ariaLabel,
   themeValues
 }) => {
   const { isMobile } = useContext(ThemeContext);
@@ -123,12 +128,9 @@ const Pagination = ({
     &:hover {
         background-color: ${themeValues.hoverBackgroundColor}
     }
-    &:focus {
-      outline: none
-    }
   `;
 
-  const extraDisabledStyles = `
+  const currentPageStyles = `
     border: ${activeBorderWidth} solid ${numberColor ??
     themeValues.numberColor};
     color: ${numberColor ?? themeValues.activeColor};
@@ -138,14 +140,27 @@ const Pagination = ({
     }
     &:hover {
       background-color: initial;
+      border: ${activeBorderWidth} solid ${numberColor ??
+    themeValues.numberColor};
+      background-color: ${themeValues.activeBackgroundColor};
     }
   `;
 
   return (
-    <Cluster justify="center" childGap={childGap}>
+    <Cluster
+      justify="center"
+      childGap={childGap}
+      overflow={true}
+      as="nav"
+      role="navigation"
+      innerWrapperAs="ul"
+      aria-label={ariaLabel}
+      extraStyles="> ul { padding: 0px; > li { list-style-type: none; } };"
+    >
       {currentPage > 1 ? (
         <PrevNextButton
           action={pagePrevious}
+          ariaLabel={`Previous Page`}
           arrowColor={arrowColor ?? themeValues.arrowColor}
           borderRadius={borderRadius}
           buttonHeight={buttonHeight}
@@ -178,35 +193,43 @@ const Pagination = ({
           )
         : getPagesPanel(currentPage, pageCount).map((item, index) =>
             item.isButton ? (
-              <Box padding="0" extraStyles={`max-height: ${buttonHeight};`}>
+              <Box
+                padding="0"
+                extraStyles={`max-height: ${buttonHeight};`}
+                as="li"
+                key={item.id}
+              >
                 <ButtonWithAction
                   variant="ghost"
-                  key={item.index}
                   text={item.index}
-                  disabled={item.active}
-                  extraDisabledStyles={extraDisabledStyles}
+                  aria-current={item.active ? "page" : undefined}
+                  aria-label={`${
+                    item.index == pageCount ? "Last Page, " : ""
+                  }page ${item.index}`}
                   action={
                     !item.active
                       ? () => setCurrentPage({ pageNumber: item.index })
                       : noop
                   }
                   textExtraStyles={`font-size: ${fontSize}; font-weight: ${fontWeight};`}
-                  extraStyles={extraStyles}
+                  extraStyles={`${extraStyles}${
+                    item.active ? currentPageStyles : ""
+                  }`}
                   dataQa={index}
                 >
                   {item.index}
                 </ButtonWithAction>
               </Box>
             ) : (
-              <Box padding="0 10px">
+              <Box padding="0 10px" as="li" key={item.id}>
                 <Cluster justify="flex-end">
                   <Text
-                    key={index}
                     variant="pXL"
                     weight={fontWeight}
                     color={numberColor ?? themeValues.numberColor}
+                    role="presentation"
                   >
-                    {"..."}
+                    {"…"}
                   </Text>
                 </Cluster>
               </Box>
@@ -215,6 +238,7 @@ const Pagination = ({
       {currentPage < pageCount ? (
         <PrevNextButton
           action={pageNext}
+          ariaLabel={`Next Page`}
           arrowColor={arrowColor ?? themeValues.arrowColor}
           borderRadius={borderRadius}
           buttonHeight={buttonHeight}

package/src/components/molecules/pagination/index.d.ts

@@ -14,6 +14,7 @@ export interface PaginationProps {
   fontWeight?: string;
   numberColor?: string;
   pageCount: number;
+  ariaLabel?: string;
   pageNext: () => void;
   pagePrevious: () => void;
   setCurrentPage: ({ currentPage: number }) => void;

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

@@ -16,7 +16,7 @@ const linkVariants = {
   pL: "pL",
   pS: "pS",
   pXS: "pXS",
-  pXXS: "pXXs",
+  pXXS: "pXXS",
   pXL: "PXL"
 };
 

package/src/components/molecules/payment-form-card/index.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import Expand from "../../../util/expand";
-
-export interface PaymentFormCardProps {
-  variant?: string;
-  hideZipCode?: boolean;
-  clearOnDismount?: boolean;
-  fields,
-  actions,
-  showErrors,
-  handleSubmit = noop,
-  showWalletCheckbox,
-  saveToWallet,
-  walletCheckboxMarked,
-  deniedCards,
-  termsContent,
-  termsTitle = "Terms & Conditions"
-}
-
-export const Paragraph: React.FC<Expand<PaymentFormCardProps> &
-  React.HTMLAttributes<HTMLElement>>;