@thecb/components 7.8.2-beta.5 → 7.8.2-beta.7

package/package.json

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

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

@@ -130,7 +130,7 @@ const Pagination = ({
     }
   `;
 
-  const extraDisabledStyles = `
+  const currentPageStyles = `
     border: ${activeBorderWidth} solid ${numberColor ??
     themeValues.numberColor};
     color: ${numberColor ?? themeValues.activeColor};
@@ -140,6 +140,9 @@ const Pagination = ({
     }
     &:hover {
       background-color: initial;
+      border: ${activeBorderWidth} solid ${numberColor ??
+    themeValues.numberColor};
+      background-color: ${themeValues.activeBackgroundColor};
     }
   `;
 
@@ -157,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}
@@ -199,19 +202,19 @@ const Pagination = ({
                 <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}
@@ -224,8 +227,9 @@ const Pagination = ({
                     variant="pXL"
                     weight={fontWeight}
                     color={numberColor ?? themeValues.numberColor}
+                    role="presentation"
                   >
-                    {"..."}
+                    {"…"}
                   </Text>
                 </Cluster>
               </Box>
@@ -234,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}