@thecb/components 7.7.4-beta.5 → 7.7.4-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.7.4-beta.5",
+  "version": "7.7.4-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

@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 import { ThemeContext } from "styled-components";
 
-import { Cluster, Box } from "../../atoms/layouts";
+import { Cluster, Cover, Box } from "../../atoms/layouts";
 import Text from "../../atoms/text";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { ChevronIcon } from "../../atoms/icons";
@@ -92,9 +92,9 @@ const Pagination = ({
   activeBorderWidth = "3px",
   arrowColor,
   borderRadius = "3px",
-  buttonHeight = "40px",
-  buttonWidth = "40px",
-  childGap = "10px",
+  buttonHeight = "44px",
+  buttonWidth = "44px",
+  childGap = "24px",
   currentPage,
   fontSize = "17px",
   fontWeight = "900",
@@ -127,88 +127,88 @@ const Pagination = ({
           />
         )
       )}
-      {isMobile ? (
-        <Box padding="0">
-          <Cluster justify="flex-end">
-            <Text
-              variant="pXL"
-              weight={fontWeight}
-              color={numberColor ?? themeValues.numberColor}
-              extraStyles={`font-size: ${fontSize}`}
-            >
-              {`${currentPage} of ${pageCount}`}
-            </Text>
-          </Cluster>
-        </Box>
-      ) : (
-        getPagesPanel(currentPage, pageCount).map((item, index) =>
-          item.isButton ? (
-            <Box padding="0" extraStyles={`max-height: ${buttonHeight};`}>
-              <ButtonWithAction
-                variant="ghost"
-                key={item.index}
-                text={item.index}
-                disabled={item.active}
-                extraDisabledStyles={`
-              border: ${activeBorderWidth} solid ${numberColor ??
-                  themeValues.numberColor};
-              color: ${numberColor ?? themeValues.activeColor};
-              background-color: ${themeValues.activeBackgroundColor};
-              &:focus {
-                box-shadow: none;
-              }
-              &:hover {
-                background-color: initial;
-              }
-            `}
-                action={
-                  !item.active
-                    ? () => setCurrentPage({ pageNumber: item.index })
-                    : noop
-                }
-                textExtraStyles={`font-size: ${fontSize}; font-weight: ${fontWeight};`}
-                extraStyles={`
-              min-width: ${buttonWidth}; min-height: 100%; padding: 0;
-              border-radius: ${borderRadius};
-              &:hover, &:focus {
-                text-decoration: none;
-                > * > span {
-                  text-decoration: none;
-                }
-              }
-              > * > span {
-                color: ${numberColor ?? themeValues.numberColor}
-              }
-              margin: 0;
-              &:hover {
-                  background-color: ${themeValues.hoverBackgroundColor}
-              }
-              &:focus {
-                outline: none
-              }
-            `}
-                dataQa={index}
-              >
-                {item.index}
-              </ButtonWithAction>
-            </Box>
-          ) : (
-            <Box padding="0 10px">
-              <Cluster justify="flex-end">
+      {isMobile
+        ? pageCount > 0 && (
+            <Box padding="0">
+              <Cover singleChild>
                 <Text
-                  key={index}
                   variant="pXL"
                   weight={fontWeight}
                   color={numberColor ?? themeValues.numberColor}
                   extraStyles={`font-size: ${fontSize}`}
                 >
-                  {"..."}
+                  {`${currentPage} of ${pageCount}`}
                 </Text>
-              </Cluster>
+              </Cover>
             </Box>
           )
-        )
-      )}
+        : getPagesPanel(currentPage, pageCount).map((item, index) =>
+            item.isButton ? (
+              <Box padding="0" extraStyles={`max-height: ${buttonHeight};`}>
+                <ButtonWithAction
+                  variant="ghost"
+                  key={item.index}
+                  text={item.index}
+                  disabled={item.active}
+                  extraDisabledStyles={`
+                    border: ${activeBorderWidth} solid ${numberColor ??
+                    themeValues.numberColor};
+                    color: ${numberColor ?? themeValues.activeColor};
+                    background-color: ${themeValues.activeBackgroundColor};
+                    &:focus {
+                      box-shadow: none;
+                    }
+                    &:hover {
+                      background-color: initial;
+                    }
+                  `}
+                  action={
+                    !item.active
+                      ? () => setCurrentPage({ pageNumber: item.index })
+                      : noop
+                  }
+                  textExtraStyles={`font-size: ${fontSize}; font-weight: ${fontWeight};`}
+                  extraStyles={`
+                    min-width: ${buttonWidth}; min-height: 100%; padding: 0;
+                    border-radius: ${borderRadius};
+                    &:hover, &:focus {
+                      text-decoration: none;
+                      > * > span {
+                        text-decoration: none;
+                      }
+                    }
+                    > * > span {
+                      color: ${numberColor ?? themeValues.numberColor}
+                    }
+                    margin: 0;
+                    &:hover {
+                        background-color: ${themeValues.hoverBackgroundColor}
+                    }
+                    &:focus {
+                      outline: none
+                    }
+                  `}
+                  dataQa={index}
+                >
+                  {item.index}
+                </ButtonWithAction>
+              </Box>
+            ) : (
+              <Box padding="0 10px">
+                <Cluster justify="flex-end">
+                  <Text
+                    key={index}
+                    variant="pXL"
+                    weight={fontWeight}
+                    color={numberColor ?? themeValues.numberColor}
+                    extraStyles={`font-size: ${fontSize}`}
+                  >
+                    {"..."}
+                  </Text>
+                </Cluster>
+              </Box>
+            )
+          )}
       {currentPage < pageCount ? (
         <PrevNextButton
           action={pageNext}