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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.7.4-beta.4",
+  "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/atoms/button-with-action/ButtonWithAction.js

@@ -62,19 +62,17 @@ const Spinner = ({ isMobile }) => (
 
 const ButtonWithAction = ({
   action = noop,
-  children,
-  contentOverride = false,
+  variant = "primary",
+  text,
+  textWrap = false,
+  isLoading = false,
   dataQa = null,
-  disabledBackgroundColor = "#6D717E",
-  disabledBorderColor = "#6D717E",
-  disabledColor = "#FFFFFF",
+  textExtraStyles,
+  contentOverride = false,
   extraStyles = "",
-  isLoading = false,
   tabIndex,
-  text,
-  textExtraStyles,
-  textWrap = false,
-  variant = "primary",
+  children,
+  extraDisabledStyles,
   ...rest
 }) => {
   const themeContext = useContext(ThemeContext);
@@ -106,14 +104,15 @@ const ButtonWithAction = ({
     };
   `;
   const disabledStyles = `
-    background-color: ${disabledBackgroundColor};
-    border-color: ${disabledBorderColor};
-    color: ${disabledColor};
+    background-color: #6D717E;
+    border-color: #6D717E;
+    color: #FFFFFF;
     cursor: default;
     &:focus {
-      box-shadow: 0 0 10px ${disabledBackgroundColor};
+      box-shadow: 0 0 10px #6D717E;
       outline: none;
     }
+    ${extraDisabledStyles}
   `;
 
   return (

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

@@ -1,5 +1,7 @@
-import React from "react";
-import { Cluster, Box } from "../../atoms/layouts";
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+
+import { Cluster, Cover, Box } from "../../atoms/layouts";
 import Text from "../../atoms/text";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { ChevronIcon } from "../../atoms/icons";
@@ -10,6 +12,15 @@ import { fallbackValues } from "./Pagination.theme";
 const PAGING_SPACE = 2; // how many pages we want to have before/after delimiter
 const PAGING_INIT_SPACE = 3; // first delimiter should appear after 3 pages
 
+const PrevNextPlaceholder = ({ buttonHeight, buttonWidth }) => (
+  <Box
+    padding="0"
+    minHeight={buttonHeight}
+    minWidth={buttonWidth}
+    extraStyles={`max-height: ${buttonHeight};`}
+  ></Box>
+);
+
 const PrevNextButton = ({
   action,
   arrowColor,
@@ -20,7 +31,7 @@ const PrevNextButton = ({
   type
 }) => (
   <Box
-    padding="0 10px 0"
+    padding="0"
     minHeight={buttonHeight}
     extraStyles={`max-height: ${buttonHeight};`}
   >
@@ -30,7 +41,7 @@ const PrevNextButton = ({
       dataQa={type}
       extraStyles={`
         background-color: ${numberColor};
-        border-color: ${numberColor}
+        border-color: ${numberColor};
         border-radius: ${borderRadius};
         margin: 0;
         max-height: ${buttonHeight};
@@ -78,13 +89,12 @@ export const getPagesPanel = (page, pagesCount) => {
 };
 
 const Pagination = ({
-  activeBorderWidth = "1px",
-  activeBackgroundColor,
+  activeBorderWidth = "3px",
   arrowColor,
   borderRadius = "3px",
-  buttonHeight = "40px",
-  buttonWidth = "40px",
-  childGap = "10px",
+  buttonHeight = "44px",
+  buttonWidth = "44px",
+  childGap = "24px",
   currentPage,
   fontSize = "17px",
   fontWeight = "900",
@@ -94,96 +104,131 @@ const Pagination = ({
   pagePrevious,
   setCurrentPage,
   themeValues
-}) => (
-  <Cluster justify="center" childGap={childGap}>
-    {currentPage > 1 && (
-      <PrevNextButton
-        action={pagePrevious}
-        arrowColor={arrowColor ?? themeValues.arrowColor}
-        borderRadius={borderRadius}
-        buttonHeight={buttonHeight}
-        buttonWidth={buttonWidth}
-        numberColor={numberColor ?? themeValues.numberColor}
-        type="prev"
-      />
-    )}
-    {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}
-            action={
-              !item.active
-                ? () => setCurrentPage({ pageNumber: item.index })
-                : noop
-            }
-            textExtraStyles={`font-size: ${fontSize}; font-weight: ${fontWeight};`}
-            extraStyles={`
-              ${
-                item.active
-                  ? `border: ${activeBorderWidth} solid ${numberColor ??
-                      themeValues.numberColor};`
-                  : ""
-              }
-              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 { ${
-                item.active
-                  ? "cursor: default;"
-                  : `background-color: ${themeValues.hoverBackgroundColor}`
-              } }
-              &:focus {
-                outline: none
-              }
-            `}
-            dataQa={index}
-            disabledBackgroundColor={activeBackgroundColor}
-            disabledBorderColor={numberColor ?? themeValues.numberColor}
-            disabledColor={numberColor ?? themeValues.numberColor}
-          >
-            {item.index}
-          </ButtonWithAction>
-        </Box>
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <Cluster justify="center" childGap={childGap}>
+      {currentPage > 1 ? (
+        <PrevNextButton
+          action={pagePrevious}
+          arrowColor={arrowColor ?? themeValues.arrowColor}
+          borderRadius={borderRadius}
+          buttonHeight={buttonHeight}
+          buttonWidth={buttonWidth}
+          numberColor={numberColor ?? themeValues.numberColor}
+          type="prev"
+        />
       ) : (
-        <Box padding="0 10px">
-          <Cluster justify="flex-end">
-            <Text
-              key={index}
-              variant="pXL"
-              weight={fontWeight}
-              color={numberColor ?? themeValues.numberColor}
-            >
-              {"..."}
-            </Text>
-          </Cluster>
-        </Box>
-      )
-    )}
-    {currentPage < pageCount && (
-      <PrevNextButton
-        action={pageNext}
-        arrowColor={arrowColor ?? themeValues.arrowColor}
-        borderRadius={borderRadius}
-        buttonHeight={buttonHeight}
-        buttonWidth={buttonWidth}
-        numberColor={numberColor ?? themeValues.numberColor}
-        type="next"
-      />
-    )}
-  </Cluster>
-);
+        isMobile && (
+          <PrevNextPlaceholder
+            buttonHeight={buttonHeight}
+            buttonWidth={buttonWidth}
+          />
+        )
+      )}
+      {isMobile
+        ? pageCount > 0 && (
+            <Box padding="0">
+              <Cover singleChild>
+                <Text
+                  variant="pXL"
+                  weight={fontWeight}
+                  color={numberColor ?? themeValues.numberColor}
+                  extraStyles={`font-size: ${fontSize}`}
+                >
+                  {`${currentPage} of ${pageCount}`}
+                </Text>
+              </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}
+          arrowColor={arrowColor ?? themeValues.arrowColor}
+          borderRadius={borderRadius}
+          buttonHeight={buttonHeight}
+          buttonWidth={buttonWidth}
+          numberColor={numberColor ?? themeValues.numberColor}
+          type="next"
+        />
+      ) : (
+        isMobile && (
+          <PrevNextPlaceholder
+            buttonHeight={buttonHeight}
+            buttonWidth={buttonWidth}
+          />
+        )
+      )}
+    </Cluster>
+  );
+};
 
 export default themeComponent(Pagination, "Pagination", fallbackValues);

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

@@ -1,14 +1,21 @@
 import {
   WHITE,
   MATISSE_BLUE,
-  ALABASTER_WHITE
+  ALABASTER_WHITE,
+  STORM_GREY
 } from "../../../constants/colors";
 
 const arrowColor = WHITE;
 const numberColor = MATISSE_BLUE;
 const hoverBackgroundColor = ALABASTER_WHITE;
+const activeBackgroundColor = WHITE;
+const activeBorderColor = MATISSE_BLUE;
+const activeColor = MATISSE_BLUE;
 
 export const fallbackValues = {
+  activeColor,
+  activeBackgroundColor,
+  activeBorderColor,
   arrowColor,
   hoverBackgroundColor,
   numberColor