@thecb/components 7.7.3 → 7.7.4-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.7.3",
+  "version": "7.7.4-beta.2",
   "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,16 +62,19 @@ const Spinner = ({ isMobile }) => (
 
 const ButtonWithAction = ({
   action = noop,
-  variant = "primary",
-  text,
-  textWrap = false,
-  isLoading = false,
-  dataQa = null,
-  textExtraStyles,
+  children,
   contentOverride = false,
+  dataQa = null,
+  disabledBackgroundColor = "#6D717E",
+  disabledBorderColor = "#6D717E",
+  disabledColor = "#FFFFFF",
   extraStyles = "",
+  isLoading = false,
   tabIndex,
-  children,
+  text,
+  textExtraStyles,
+  textWrap = false,
+  variant = "primary",
   ...rest
 }) => {
   const themeContext = useContext(ThemeContext);
@@ -103,12 +106,12 @@ const ButtonWithAction = ({
     };
   `;
   const disabledStyles = `
-    background-color: #6D717E;
-    border-color: #6D717E;
-    color: #FFFFFF;
+    background-color: ${disabledBackgroundColor};
+    border-color: ${disabledBorderColor};
+    color: ${disabledColor};
     cursor: default;
     &:focus {
-      box-shadow: 0 0 10px #6D717E;
+      box-shadow: 0 0 10px ${disabledBackgroundColor};
       outline: none;
     }
   `;

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

@@ -3,26 +3,42 @@ import { Cluster, Box } from "../../atoms/layouts";
 import Text from "../../atoms/text";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { ChevronIcon } from "../../atoms/icons";
-import { MATISSE_BLUE, ALABASTER_WHITE } from "../../../constants/colors";
 import { noop } from "../../../util/general";
+import { themeComponent } from "../../../util/themeUtils";
+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 PrevNextButton = ({ action, type, arrowColor, numberColor }) => (
-  <Box padding="0 10px 0" minHeight="40px" extraStyles="max-height: 40px;">
+const PrevNextButton = ({
+  action,
+  arrowColor,
+  borderRadius,
+  buttonHeight,
+  buttonWidth,
+  numberColor,
+  type
+}) => (
+  <Box
+    padding="0 10px 0"
+    minHeight={buttonHeight}
+    extraStyles={`max-height: ${buttonHeight};`}
+  >
     <ButtonWithAction
       action={action}
       contentOverride
       dataQa={type}
       extraStyles={`
-        min-width: 40px;
+        background-color: ${numberColor};
+        border-color: ${numberColor}
+        border-radius: ${borderRadius};
+        margin: 0;
+        max-height: ${buttonHeight};
         min-height: 100%;
-        max-height: 40px;
-        padding: 6px;
-        border-radius: 3px;
-        background-color: ${numberColor ?? MATISSE_BLUE};
-        border-color: ${numberColor ?? MATISSE_BLUE}
+        min-width: ${buttonWidth};
+        &:focus {
+          outline: none
+        }
       `}
     >
       <Box padding="0" extraStyles={type === "prev" && "transform: scaleX(-1)"}>
@@ -61,31 +77,38 @@ export const getPagesPanel = (page, pagesCount) => {
 };
 
 const Pagination = ({
-  pagePrevious,
-  pageNext,
-  setCurrentPage,
+  activeBorderWidth = "1px",
+  activeBackgroundColor,
+  arrowColor,
+  borderRadius = "3px",
+  buttonHeight = "40px",
+  buttonWidth = "40px",
+  childGap = "10px",
   currentPage,
-  pageCount,
+  fontSize = "17px",
+  fontWeight = "900",
   numberColor,
-  arrowColor
+  pageCount,
+  pageNext,
+  pagePrevious,
+  setCurrentPage,
+  themeValues
 }) => (
-  <Cluster justify="center" childGap="10px">
+  <Cluster justify="center" childGap={childGap}>
     {currentPage > 1 && (
       <PrevNextButton
-        type="prev"
         action={pagePrevious}
-        arrowColor={arrowColor}
-        numberColor={numberColor}
+        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"
-          border={item.active && `1px solid ${numberColor ?? MATISSE_BLUE}`}
-          borderRadius={item.active && "3px"}
-          extraStyles="max-height: 40px;"
-        >
+        <Box padding="0" extraStyles={`max-height: ${buttonHeight};`}>
           <ButtonWithAction
             variant="ghost"
             key={item.index}
@@ -96,9 +119,16 @@ const Pagination = ({
                 ? () => setCurrentPage({ pageNumber: item.index })
                 : noop
             }
-            textExtraStyles={`font-size: 17px; font-weight: 900;`}
+            textExtraStyles={`font-size: ${fontSize}; font-weight: ${fontWeight};`}
             extraStyles={`
-              min-width: 40px; min-height: 100%; padding: 0;
+              ${
+                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 {
@@ -106,16 +136,22 @@ const Pagination = ({
                 }
               }
               > * > span {
-                color: ${numberColor ?? MATISSE_BLUE}
+                color: ${numberColor ?? themeValues.numberColor}
+              }
+              margin: 0;
+              &:hover { ${
+                item.active
+                  ? "cursor: default;"
+                  : `background-color: ${themeValues.hoverBackgroundColor}`
+              } }
+              &:focus {
+                outline: none
               }
-            }
-            &:hover { ${
-              item.active
-                ? "cursor: default;"
-                : `background-color: ${ALABASTER_WHITE}`
-            } }
             `}
             dataQa={index}
+            disabledBackgroundColor={activeBackgroundColor}
+            disabledBorderColor={numberColor ?? themeValues.numberColor}
+            disabledColor={numberColor ?? themeValues.numberColor}
           >
             {item.index}
           </ButtonWithAction>
@@ -126,8 +162,8 @@ const Pagination = ({
             <Text
               key={index}
               variant="pXL"
-              weight="900"
-              color={numberColor ?? MATISSE_BLUE}
+              weight={fontWeight}
+              color={numberColor ?? themeValues.numberColor}
             >
               {"..."}
             </Text>
@@ -137,13 +173,16 @@ const Pagination = ({
     )}
     {currentPage < pageCount && (
       <PrevNextButton
-        type="next"
         action={pageNext}
-        arrowColor={arrowColor}
-        numberColor={numberColor}
+        arrowColor={arrowColor ?? themeValues.arrowColor}
+        borderRadius={borderRadius}
+        buttonHeight={buttonHeight}
+        buttonWidth={buttonWidth}
+        numberColor={numberColor ?? themeValues.numberColor}
+        type="next"
       />
     )}
   </Cluster>
 );
 
-export default Pagination;
+export default themeComponent(Pagination, "Pagination", fallbackValues);

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

@@ -0,0 +1,187 @@
+import React from "react";
+import { Cluster, Box } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import ButtonWithAction from "../../atoms/button-with-action";
+import { ChevronIcon } from "../../atoms/icons";
+import { noop } from "../../../util/general";
+import { themeComponent } from "../../../util/themeUtils";
+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 PrevNextButton = ({
+  action,
+  arrowColor,
+  borderRadius,
+  numberColor,
+  buttonHeight,
+  buttonWidth,
+  type
+}) => (
+  <Box
+    padding="0 10px 0"
+    minHeight={buttonHeight}
+    extraStyles={`max-height: ${buttonHeight};`}
+  >
+    <ButtonWithAction
+      action={action}
+      contentOverride
+      dataQa={type}
+      extraStyles={`
+        min-width: ${buttonWidth};
+        min-height: 100%;
+        max-height: ${buttonHeight};
+        padding: 6px;
+        border-radius: ${borderRadius};
+        background-color: ${numberColor};
+        border-color: ${numberColor};
+        margin: 0;
+      `}
+    >
+      <Box padding="0" extraStyles={type === "prev" && "transform: scaleX(-1)"}>
+        <ChevronIcon variant="darkMode" iconFill={arrowColor} />
+      </Box>
+    </ButtonWithAction>
+  </Box>
+);
+
+export const getPagesPanel = (page, pagesCount) => {
+  if (!pagesCount || pagesCount <= 1) {
+    return [];
+  }
+  const lastPageNumber = pagesCount;
+  const space = page === 1 ? PAGING_INIT_SPACE : PAGING_SPACE;
+  const pages = [{ index: 1, isButton: true }];
+  if (page > space + 1) {
+    pages.push({ isDelimiter: true });
+  }
+  for (
+    let j = Math.max(1, page - space) + 1;
+    j < Math.min(lastPageNumber, page + space);
+    j++
+  ) {
+    pages.push({ index: j, isButton: true });
+  }
+  if (page < lastPageNumber - space) {
+    pages.push({ isDelimiter: true });
+  }
+  pages.push({ index: lastPageNumber, isButton: true });
+  const activePage = pages.find(p => p.index === page);
+  if (activePage) {
+    activePage.active = true;
+  }
+  return pages;
+};
+
+const Pagination = ({
+  activeBorderWidth = "1px",
+  applyActivePageDisabledStyles = true,
+  arrowColor,
+  borderRadius = "3px",
+  buttonHeight = "40px",
+  buttonWidth = "40px",
+  childGap = "10px",
+  currentPage,
+  fontSize = "17px",
+  fontWeight = "900",
+  numberColor,
+  pageCount,
+  pageNext,
+  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}
+            applyDisabledStyles={applyActivePageDisabledStyles}
+            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;
+                  border: ${activeBorderWidth} solid ${numberColor ??
+                    themeValues.numberColor};
+                  > * > span {
+                    cursor: default;
+                  }`
+                : `background-color: ${themeValues.hoverBackgroundColor}`
+            } }
+            `}
+            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}
+            >
+              {"..."}
+            </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>
+);
+
+export default themeComponent(Pagination, "Pagination", fallbackValues);

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

@@ -0,0 +1,15 @@
+import {
+  WHITE,
+  MATISSE_BLUE,
+  ALABASTER_WHITE
+} from "../../../constants/colors";
+
+const arrowColor = WHITE;
+const numberColor = MATISSE_BLUE;
+const hoverBackgroundColor = ALABASTER_WHITE;
+
+export const fallbackValues = {
+  arrowColor,
+  hoverBackgroundColor,
+  numberColor
+};