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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.7.4-beta.6",
+  "version": "7.7.4-beta.8",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

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

@@ -107,6 +107,40 @@ const Pagination = ({
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
+  const 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
+    }
+  `;
+
+  const extraDisabledStyles = `
+    border: ${activeBorderWidth} solid ${numberColor ??
+    themeValues.numberColor};
+    color: ${numberColor ?? themeValues.activeColor};
+    background-color: ${themeValues.activeBackgroundColor};
+    &:focus {
+      box-shadow: none;
+    }
+    &:hover {
+      background-color: initial;
+    }
+  `;
+
   return (
     <Cluster justify="center" childGap={childGap}>
       {currentPage > 1 ? (
@@ -150,44 +184,14 @@ const Pagination = ({
                   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;
-                    }
-                  `}
+                  extraDisabledStyles={extraDisabledStyles}
                   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
-                    }
-                  `}
+                  extraStyles={extraStyles}
                   dataQa={index}
                 >
                   {item.index}
@@ -201,7 +205,6 @@ const Pagination = ({
                     variant="pXL"
                     weight={fontWeight}
                     color={numberColor ?? themeValues.numberColor}
-                    extraStyles={`font-size: ${fontSize}`}
                   >
                     {"..."}
                   </Text>

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);