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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.7.4-beta.5",
+  "version": "7.7.4-beta.7",
   "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,87 @@ 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}
+                  >
+                    {"..."}
+                  </Text>
+                </Cluster>
+              </Box>
+            )
+          )}
       {currentPage < pageCount ? (
         <PrevNextButton
           action={pageNext}

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

@@ -9,13 +9,11 @@ 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

package/src/components/molecules/pagination/index.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface PaginationProps {
+  extraStyles?: string;
+  activeBorderWidth?: string;
+  arrowColor?: string;
+  borderRadius?: string;
+  buttonHeight?: string;
+  buttonWidth?: string;
+  childGap?: string;
+  currentPage: number;
+  fontSize?: string;
+  fontWeight?: string;
+  numberColor?: string;
+  pageCount: number;
+  pageNext: () => void;
+  pagePrevious: () => void;
+  setCurrentPage: ({ currentPage: number }) => void;
+}
+
+export const Pagination: React.FC<Expand<PaginationProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -1,187 +0,0 @@
-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);