@thecb/components 7.8.2-beta.4 → 7.8.2-beta.6

package/package.json

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

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

@@ -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;
@@ -126,7 +130,7 @@ const Pagination = ({
     }
   `;
 
-  const extraDisabledStyles = `
+  const currentPageStyles = `
     border: ${activeBorderWidth} solid ${numberColor ??
     themeValues.numberColor};
     color: ${numberColor ?? themeValues.activeColor};
@@ -136,6 +140,9 @@ const Pagination = ({
     }
     &:hover {
       background-color: initial;
+      border: ${activeBorderWidth} solid ${numberColor ??
+    themeValues.numberColor};
+      background-color: ${themeValues.activeBackgroundColor};
     }
   `;
 
@@ -145,6 +152,7 @@ const Pagination = ({
       childGap={childGap}
       overflow={true}
       as="nav"
+      role="navigation"
       innerWrapperAs="ul"
       aria-label={ariaLabel}
       extraStyles="> ul { padding: 0px; > li { list-style-type: none; } };"
@@ -152,7 +160,7 @@ const Pagination = ({
       {currentPage > 1 ? (
         <PrevNextButton
           action={pagePrevious}
-          ariaLabel={`Previous Page Button`}
+          ariaLabel={`Previous Page`}
           arrowColor={arrowColor ?? themeValues.arrowColor}
           borderRadius={borderRadius}
           buttonHeight={buttonHeight}
@@ -189,36 +197,37 @@ const Pagination = ({
                 padding="0"
                 extraStyles={`max-height: ${buttonHeight};`}
                 as="li"
-                key={`pagination-button-${item.index}`}
+                key={item.id}
               >
                 <ButtonWithAction
                   variant="ghost"
                   text={item.index}
-                  disabled={item.active}
-                  extraDisabledStyles={extraDisabledStyles}
                   aria-current={item.active ? "page" : undefined}
-                  aria-label={`${item.active ? "Current " : ""}Page ${
-                    item.index
-                  } Button`}
+                  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" as="li" key={`pagination-elipsis-${index}`}>
+              <Box padding="0 10px" as="li" key={item.id}>
                 <Cluster justify="flex-end">
                   <Text
                     variant="pXL"
                     weight={fontWeight}
                     color={numberColor ?? themeValues.numberColor}
+                    aria-label="ellipsis"
                   >
                     {"..."}
                   </Text>
@@ -229,7 +238,7 @@ const Pagination = ({
       {currentPage < pageCount ? (
         <PrevNextButton
           action={pageNext}
-          ariaLabel={`Next Page Button`}
+          ariaLabel={`Next Page`}
           arrowColor={arrowColor ?? themeValues.arrowColor}
           borderRadius={borderRadius}
           buttonHeight={buttonHeight}