@thecb/components 3.6.0-beta.2 → 3.7.0-beta.1

package/dist/index.cjs.js

@@ -36452,6 +36452,123 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
   };
 };
 
+var PAGING_SPACE = 2; // how many pages we want to have before/after delimiter
+
+var PAGING_INIT_SPACE = 3; // first delimiter should appear after 3 pages
+
+var PrevNextButton = function PrevNextButton(_ref) {
+  var action = _ref.action,
+      type = _ref.type;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 10px 0",
+    minHeight: "40px",
+    extraStyles: "max-height: 40px;"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    action: action,
+    contentOverride: true,
+    dataQa: type,
+    extraStyles: "\n        min-width: 40px;\n        min-height: 100%;\n        max-height: 40px;\n        padding: 6px;\n        border-radius: 3px;\n      "
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: type === "prev" && "transform: scaleX(-1)"
+  }, /*#__PURE__*/React__default.createElement(ChevronIcon$1, {
+    variant: "darkMode"
+  }))));
+};
+
+var getPagesPanel = function getPagesPanel(page, pagesCount) {
+  if (!pagesCount || pagesCount <= 1) {
+    return [];
+  }
+
+  var lastPageNumber = pagesCount;
+  var space = page === 1 ? PAGING_INIT_SPACE : PAGING_SPACE;
+  var pages = [{
+    index: 1,
+    isButton: true
+  }];
+
+  if (page > space + 1) {
+    pages.push({
+      isDelimiter: true
+    });
+  }
+
+  for (var 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
+  });
+  var activePage = pages.find(function (p) {
+    return p.index === page;
+  });
+
+  if (activePage) {
+    activePage.active = true;
+  }
+
+  return pages;
+};
+
+var Pagination = function Pagination(_ref2) {
+  var pagePrevious = _ref2.pagePrevious,
+      pageNext = _ref2.pageNext,
+      setCurrentPage = _ref2.setCurrentPage,
+      currentPage = _ref2.currentPage,
+      pageCount = _ref2.pageCount;
+  return /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "center",
+    childGap: "10px"
+  }, currentPage > 1 && /*#__PURE__*/React__default.createElement(PrevNextButton, {
+    type: "prev",
+    action: pagePrevious
+  }), getPagesPanel(currentPage, pageCount).map(function (item, index) {
+    return item.isButton ? /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0",
+      border: item.active && "1px solid ".concat(MATISSE_BLUE),
+      borderRadius: item.active && "3px",
+      extraStyles: "max-height: 40px;"
+    }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+      variant: "ghost",
+      key: item.index,
+      text: item.index,
+      disabled: item.active,
+      action: !item.active ? function () {
+        return setCurrentPage({
+          pageNumber: item.index
+        });
+      } : noop,
+      textExtraStyles: "font-size: 17px; font-weight: 900;",
+      extraStyles: "\n              min-width: 40px; min-height: 100%; padding: 0;\n              &:hover, &:focus {\n                text-decoration: none;\n                > * > span {\n                  text-decoration: none;\n                }\n              }\n            }\n            &:hover { ".concat(item.active ? "cursor: default;" : "background-color: ".concat(ALABASTER_WHITE), " }\n            "),
+      dataQa: index
+    }, item.index)) : /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0 10px"
+    }, /*#__PURE__*/React__default.createElement(Cluster, {
+      justify: "flex-end"
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
+      key: index,
+      variant: "pXL",
+      weight: "900",
+      color: MATISSE_BLUE
+    }, "...")));
+  }), currentPage < pageCount && /*#__PURE__*/React__default.createElement(PrevNextButton, {
+    type: "next",
+    action: pageNext
+  }));
+};
+
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$forwardButtonTex = _ref.forwardButtonText,
       forwardButtonText = _ref$forwardButtonTex === void 0 ? "Next" : _ref$forwardButtonTex,
@@ -38292,6 +38409,7 @@ exports.NavHeader = NavHeader;
 exports.NavMenuDesktop = NavMenuDesktop$1;
 exports.NavMenuMobile = NavMenuMobile$1;
 exports.Obligation = Obligation;
+exports.Pagination = Pagination;
 exports.Paragraph = Paragraph$1;
 exports.PartialAmountForm = PartialAmountForm;
 exports.PasswordRequirements = PasswordRequirements;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.6.0-beta.2",
+  "version": "3.7.0-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/molecules/index.js

@@ -13,6 +13,7 @@ export { default as Module } from "./module";
 export * from "./nav-menu";
 export { default as Obligation } from "./obligation";
 export * from "./partial-amount-form";
+export { default as Pagination } from "./pagination";
 export { default as PaymentButtonBar } from "./payment-button-bar";
 export { default as PaymentDetails } from "./payment-details";
 export { default as PaymentFormACH } from "./payment-form-ach";

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

@@ -0,0 +1,125 @@
+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 { MATISSE_BLUE, ALABASTER_WHITE } from "../../../constants/colors";
+import { noop } from "../../../util/general";
+
+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 }) => (
+  <Box padding="0 10px 0" minHeight="40px" extraStyles="max-height: 40px;">
+    <ButtonWithAction
+      action={action}
+      contentOverride
+      dataQa={type}
+      extraStyles={`
+        min-width: 40px;
+        min-height: 100%;
+        max-height: 40px;
+        padding: 6px;
+        border-radius: 3px;
+      `}
+    >
+      <Box padding="0" extraStyles={type === "prev" && "transform: scaleX(-1)"}>
+        <ChevronIcon variant="darkMode" />
+      </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 = ({
+  pagePrevious,
+  pageNext,
+  setCurrentPage,
+  currentPage,
+  pageCount
+}) => (
+  <Cluster justify="center" childGap="10px">
+    {currentPage > 1 && <PrevNextButton type="prev" action={pagePrevious} />}
+    {getPagesPanel(currentPage, pageCount).map((item, index) =>
+      item.isButton ? (
+        <Box
+          padding="0"
+          border={item.active && `1px solid ${MATISSE_BLUE}`}
+          borderRadius={item.active && "3px"}
+          extraStyles="max-height: 40px;"
+        >
+          <ButtonWithAction
+            variant="ghost"
+            key={item.index}
+            text={item.index}
+            disabled={item.active}
+            action={
+              !item.active
+                ? () => setCurrentPage({ pageNumber: item.index })
+                : noop
+            }
+            textExtraStyles={`font-size: 17px; font-weight: 900;`}
+            extraStyles={`
+              min-width: 40px; min-height: 100%; padding: 0;
+              &:hover, &:focus {
+                text-decoration: none;
+                > * > span {
+                  text-decoration: none;
+                }
+              }
+            }
+            &:hover { ${
+              item.active
+                ? "cursor: default;"
+                : `background-color: ${ALABASTER_WHITE}`
+            } }
+            `}
+            dataQa={index}
+          >
+            {item.index}
+          </ButtonWithAction>
+        </Box>
+      ) : (
+        <Box padding="0 10px">
+          <Cluster justify="flex-end">
+            <Text key={index} variant="pXL" weight="900" color={MATISSE_BLUE}>
+              {"..."}
+            </Text>
+          </Cluster>
+        </Box>
+      )
+    )}
+    {currentPage < pageCount && (
+      <PrevNextButton type="next" action={pageNext} />
+    )}
+  </Cluster>
+);
+
+export default Pagination;

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

@@ -0,0 +1,3 @@
+import Pagination from "./Pagination";
+
+export default Pagination;