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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.8.2-beta.3",
+  "version": "7.8.2-beta.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/molecules/pagination/Pagination.js

@@ -103,6 +103,7 @@ const Pagination = ({
   pageNext,
   pagePrevious,
   setCurrentPage,
+  ariaLabel,
   themeValues
 }) => {
   const { isMobile } = useContext(ThemeContext);
@@ -145,6 +146,7 @@ const Pagination = ({
       overflow={true}
       as="nav"
       innerWrapperAs="ul"
+      aria-label={ariaLabel}
       extraStyles="> ul { padding: 0px; > li { list-style-type: none; } };"
     >
       {currentPage > 1 ? (
@@ -187,10 +189,10 @@ const Pagination = ({
                 padding="0"
                 extraStyles={`max-height: ${buttonHeight};`}
                 as="li"
+                key={`pagination-button-${item.index}`}
               >
                 <ButtonWithAction
                   variant="ghost"
-                  key={item.index}
                   text={item.index}
                   disabled={item.active}
                   extraDisabledStyles={extraDisabledStyles}
@@ -211,10 +213,9 @@ const Pagination = ({
                 </ButtonWithAction>
               </Box>
             ) : (
-              <Box padding="0 10px">
+              <Box padding="0 10px" as="li" key={`pagination-elipsis-${index}`}>
                 <Cluster justify="flex-end">
                   <Text
-                    key={index}
                     variant="pXL"
                     weight={fontWeight}
                     color={numberColor ?? themeValues.numberColor}

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;