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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.7.4-beta.4",
+  "version": "7.7.4-beta.5",
   "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,4 +1,6 @@
-import React from "react";
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+
 import { Cluster, Box } from "../../atoms/layouts";
 import Text from "../../atoms/text";
 import ButtonWithAction from "../../atoms/button-with-action";
@@ -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,8 +89,7 @@ export const getPagesPanel = (page, pagesCount) => {
 };
 
 const Pagination = ({
-  activeBorderWidth = "1px",
-  activeBackgroundColor,
+  activeBorderWidth = "3px",
   arrowColor,
   borderRadius = "3px",
   buttonHeight = "40px",
@@ -94,40 +104,70 @@ 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};`
-                  : ""
+}) => {
+  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"
+        />
+      ) : (
+        isMobile && (
+          <PrevNextPlaceholder
+            buttonHeight={buttonHeight}
+            buttonWidth={buttonWidth}
+          />
+        )
+      )}
+      {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 {
@@ -140,50 +180,55 @@ const Pagination = ({
                 color: ${numberColor ?? themeValues.numberColor}
               }
               margin: 0;
-              &:hover { ${
-                item.active
-                  ? "cursor: default;"
-                  : `background-color: ${themeValues.hoverBackgroundColor}`
-              } }
+              &:hover {
+                  background-color: ${themeValues.hoverBackgroundColor}
+              }
               &:focus {
                 outline: none
               }
             `}
-            dataQa={index}
-            disabledBackgroundColor={activeBackgroundColor}
-            disabledBorderColor={numberColor ?? themeValues.numberColor}
-            disabledColor={numberColor ?? themeValues.numberColor}
-          >
-            {item.index}
-          </ButtonWithAction>
-        </Box>
+                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"
+        />
       ) : (
-        <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}
+          />
+        )
+      )}
+    </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