@navikt/ds-react 0.16.10 → 0.16.11

package/cjs/index.js

@@ -22,6 +22,7 @@ __exportStar(require("./link-panel"), exports);
 __exportStar(require("./loader"), exports);
 __exportStar(require("./menu"), exports);
 __exportStar(require("./modal"), exports);
+__exportStar(require("./pagination"), exports);
 __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
 __exportStar(require("./speech-bubble"), exports);

package/cjs/pagination/Pagination.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSteps = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ds_icons_1 = require("@navikt/ds-icons");
+const __1 = require("..");
+const getSteps = ({ page, count, boundaryCount = 1, siblingCount = 1, }) => {
+    var _a, _b;
+    const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    if (count <= (boundaryCount + siblingCount) * 2 + 3)
+        return range(1, count);
+    const startPages = range(1, boundaryCount);
+    const endPages = range(count - boundaryCount + 1, count);
+    const siblingsStart = Math.max(Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+    const siblingsEnd = siblingsStart + siblingCount * 2;
+    return [
+        ...startPages,
+        siblingsStart - ((_a = startPages[startPages.length - 1]) !== null && _a !== void 0 ? _a : 0) === 2
+            ? siblingsStart - 1
+            : "ellipsis",
+        ...range(siblingsStart, siblingsEnd),
+        ((_b = endPages[0]) !== null && _b !== void 0 ? _b : count + 1) - siblingsEnd === 2
+            ? siblingsEnd + 1
+            : "ellipsis",
+        ...endPages,
+    ];
+};
+exports.getSteps = getSteps;
+const Pagination = ({ page, onPageChange, count, boundaryCount = 1, siblingCount = 1, className, size = "medium", prevNextTexts = false, }) => {
+    if (page < 1) {
+        console.error("page cannot be less than 1");
+        return null;
+    }
+    if (count < 1) {
+        console.error("count cannot be less than 1");
+        return null;
+    }
+    if (boundaryCount < 0) {
+        console.error("boundaryCount cannot be less than 0");
+        return null;
+    }
+    if (siblingCount < 0) {
+        console.error("siblingCount cannot be less than 0");
+        return null;
+    }
+    return (react_1.default.createElement("nav", { className: (0, classnames_1.default)("navds-pagination", `navds-pagination--${size}`, className) },
+        prevNextTexts && (react_1.default.createElement("button", { className: "navds-pagination__prev-next", disabled: page === 1, onClick: () => onPageChange(page - 1) },
+            react_1.default.createElement(ds_icons_1.Back, { className: "navds-pagination__prev-next-icon", role: "presentation" }),
+            react_1.default.createElement(__1.BodyShort, { size: size, className: "navds-pagination__prev-text" }, "Tilbake"))),
+        react_1.default.createElement("ul", { className: "navds-pagination__list" },
+            !prevNextTexts && (react_1.default.createElement("li", null,
+                react_1.default.createElement("button", { className: "navds-pagination__prev-next", disabled: page === 1, onClick: () => onPageChange(page - 1) },
+                    react_1.default.createElement(ds_icons_1.Back, { className: "navds-pagination__prev-next-icon", title: "Tilbake" })))),
+            (0, exports.getSteps)({ page, count, siblingCount, boundaryCount }).map((step, i) => {
+                const n = Number(step);
+                return isNaN(n) ? (react_1.default.createElement("li", { className: "navds-pagination__ellipsis", key: `${step}${i}` },
+                    react_1.default.createElement(__1.BodyShort, { size: size }, "..."))) : (react_1.default.createElement("li", { key: step },
+                    react_1.default.createElement(__1.BodyShort, { size: size, as: "button", className: "navds-pagination__item", onClick: () => onPageChange(n), "aria-current": page === n ? true : undefined }, n)));
+            }),
+            !prevNextTexts && (react_1.default.createElement("li", null,
+                react_1.default.createElement("button", { className: "navds-pagination__prev-next", disabled: page === count, onClick: () => onPageChange(page + 1) },
+                    react_1.default.createElement(ds_icons_1.Next, { className: "navds-pagination__prev-next-icon", title: "Neste" }))))),
+        prevNextTexts && (react_1.default.createElement("button", { className: "navds-pagination__prev-next", disabled: page === count, onClick: () => onPageChange(page + 1) },
+            react_1.default.createElement(__1.BodyShort, { size: size, className: "navds-pagination__next-text" }, "Neste"),
+            react_1.default.createElement(ds_icons_1.Next, { className: "navds-pagination__prev-next-icon", role: "presentation" })))));
+};
+exports.default = Pagination;

package/cjs/pagination/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+var Pagination_1 = require("./Pagination");
+Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return __importDefault(Pagination_1).default; } });
+__exportStar(require("./Pagination"), exports);

package/cjs/pagination/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/pagination/index.js",
+  "types": "../../esm/pagination/index.d.ts"
+}

package/esm/index.d.ts

@@ -10,6 +10,7 @@ export * from "./link-panel";
 export * from "./loader";
 export * from "./menu";
 export * from "./modal";
+export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
 export * from "./speech-bubble";

package/esm/index.js

@@ -10,6 +10,7 @@ export * from "./link-panel";
 export * from "./loader";
 export * from "./menu";
 export * from "./modal";
+export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
 export * from "./speech-bubble";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/esm/pagination/Pagination.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Current page
+     */
+    page: number;
+    /**
+     * Number of always visible pages before and after the current page.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Number of always visible pages at the beginning and end.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * Callback when current page changes
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * Total number of pages
+     */
+    count: number;
+    /**
+     * Changes padding, height and font-size
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * Display text alongside "previous" and "next" icons
+     * @default false
+     */
+    prevNextTexts?: boolean;
+}
+export declare const getSteps: ({ page, count, boundaryCount, siblingCount, }: {
+    page: any;
+    count: any;
+    boundaryCount?: number | undefined;
+    siblingCount?: number | undefined;
+}) => (string | number)[];
+declare const Pagination: ({ page, onPageChange, count, boundaryCount, siblingCount, className, size, prevNextTexts, }: PaginationProps) => JSX.Element | null;
+export default Pagination;

package/esm/pagination/Pagination.js

@@ -0,0 +1,65 @@
+import React from "react";
+import cl from "classnames";
+import { Back, Next } from "@navikt/ds-icons";
+import { BodyShort } from "..";
+export const getSteps = ({ page, count, boundaryCount = 1, siblingCount = 1, }) => {
+    var _a, _b;
+    const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    if (count <= (boundaryCount + siblingCount) * 2 + 3)
+        return range(1, count);
+    const startPages = range(1, boundaryCount);
+    const endPages = range(count - boundaryCount + 1, count);
+    const siblingsStart = Math.max(Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+    const siblingsEnd = siblingsStart + siblingCount * 2;
+    return [
+        ...startPages,
+        siblingsStart - ((_a = startPages[startPages.length - 1]) !== null && _a !== void 0 ? _a : 0) === 2
+            ? siblingsStart - 1
+            : "ellipsis",
+        ...range(siblingsStart, siblingsEnd),
+        ((_b = endPages[0]) !== null && _b !== void 0 ? _b : count + 1) - siblingsEnd === 2
+            ? siblingsEnd + 1
+            : "ellipsis",
+        ...endPages,
+    ];
+};
+const Pagination = ({ page, onPageChange, count, boundaryCount = 1, siblingCount = 1, className, size = "medium", prevNextTexts = false, }) => {
+    if (page < 1) {
+        console.error("page cannot be less than 1");
+        return null;
+    }
+    if (count < 1) {
+        console.error("count cannot be less than 1");
+        return null;
+    }
+    if (boundaryCount < 0) {
+        console.error("boundaryCount cannot be less than 0");
+        return null;
+    }
+    if (siblingCount < 0) {
+        console.error("siblingCount cannot be less than 0");
+        return null;
+    }
+    return (React.createElement("nav", { className: cl("navds-pagination", `navds-pagination--${size}`, className) },
+        prevNextTexts && (React.createElement("button", { className: "navds-pagination__prev-next", disabled: page === 1, onClick: () => onPageChange(page - 1) },
+            React.createElement(Back, { className: "navds-pagination__prev-next-icon", role: "presentation" }),
+            React.createElement(BodyShort, { size: size, className: "navds-pagination__prev-text" }, "Tilbake"))),
+        React.createElement("ul", { className: "navds-pagination__list" },
+            !prevNextTexts && (React.createElement("li", null,
+                React.createElement("button", { className: "navds-pagination__prev-next", disabled: page === 1, onClick: () => onPageChange(page - 1) },
+                    React.createElement(Back, { className: "navds-pagination__prev-next-icon", title: "Tilbake" })))),
+            getSteps({ page, count, siblingCount, boundaryCount }).map((step, i) => {
+                const n = Number(step);
+                return isNaN(n) ? (React.createElement("li", { className: "navds-pagination__ellipsis", key: `${step}${i}` },
+                    React.createElement(BodyShort, { size: size }, "..."))) : (React.createElement("li", { key: step },
+                    React.createElement(BodyShort, { size: size, as: "button", className: "navds-pagination__item", onClick: () => onPageChange(n), "aria-current": page === n ? true : undefined }, n)));
+            }),
+            !prevNextTexts && (React.createElement("li", null,
+                React.createElement("button", { className: "navds-pagination__prev-next", disabled: page === count, onClick: () => onPageChange(page + 1) },
+                    React.createElement(Next, { className: "navds-pagination__prev-next-icon", title: "Neste" }))))),
+        prevNextTexts && (React.createElement("button", { className: "navds-pagination__prev-next", disabled: page === count, onClick: () => onPageChange(page + 1) },
+            React.createElement(BodyShort, { size: size, className: "navds-pagination__next-text" }, "Neste"),
+            React.createElement(Next, { className: "navds-pagination__prev-next-icon", role: "presentation" })))));
+};
+export default Pagination;
+//# sourceMappingURL=Pagination.js.map

package/esm/pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/pagination/Pagination.tsx"],"names":[],"mappings":"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"}

package/esm/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from "./Pagination";
+export * from "./Pagination";

package/esm/pagination/index.js

@@ -0,0 +1,3 @@
+export { default as Pagination } from "./Pagination";
+export * from "./Pagination";
+//# sourceMappingURL=index.js.map

package/esm/pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.16.10",
+  "version": "0.16.11",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -65,5 +65,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "a7c326aa4331fa89793e18100b240e00df66f21e"
+  "gitHead": "e89d3b27b21bc59ddf707e280660a0d59f51d0ad"
 }

package/src/index.ts

@@ -10,6 +10,7 @@ export * from "./link-panel";
 export * from "./loader";
 export * from "./menu";
 export * from "./modal";
+export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
 export * from "./speech-bubble";

package/src/pagination/Pagination.tsx

@@ -0,0 +1,191 @@
+import React from "react";
+import cl from "classnames";
+import { Back, Next } from "@navikt/ds-icons";
+import { BodyShort } from "..";
+
+interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Current page
+   */
+  page: number;
+  /**
+   * Number of always visible pages before and after the current page.
+   * @default 1
+   */
+  siblingCount?: number;
+  /**
+   * Number of always visible pages at the beginning and end.
+   * @default 1
+   */
+  boundaryCount?: number;
+  /**
+   * Callback when current page changes
+   */
+  onPageChange: (page: number) => void;
+  /**
+   * Total number of pages
+   */
+  count: number;
+  /**
+   * Changes padding, height and font-size
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * Display text alongside "previous" and "next" icons
+   * @default false
+   */
+  prevNextTexts?: boolean;
+}
+
+export const getSteps = ({
+  page,
+  count,
+  boundaryCount = 1,
+  siblingCount = 1,
+}) => {
+  const range = (start: number, end: number) =>
+    Array.from({ length: end - start + 1 }, (_, i) => start + i);
+
+  if (count <= (boundaryCount + siblingCount) * 2 + 3) return range(1, count);
+
+  const startPages = range(1, boundaryCount);
+  const endPages = range(count - boundaryCount + 1, count);
+
+  const siblingsStart = Math.max(
+    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+  const siblingsEnd = siblingsStart + siblingCount * 2;
+
+  return [
+    ...startPages,
+    siblingsStart - (startPages[startPages.length - 1] ?? 0) === 2
+      ? siblingsStart - 1
+      : "ellipsis",
+    ...range(siblingsStart, siblingsEnd),
+    (endPages[0] ?? count + 1) - siblingsEnd === 2
+      ? siblingsEnd + 1
+      : "ellipsis",
+    ...endPages,
+  ];
+};
+
+const Pagination = ({
+  page,
+  onPageChange,
+  count,
+  boundaryCount = 1,
+  siblingCount = 1,
+  className,
+  size = "medium",
+  prevNextTexts = false,
+}: PaginationProps) => {
+  if (page < 1) {
+    console.error("page cannot be less than 1");
+    return null;
+  }
+  if (count < 1) {
+    console.error("count cannot be less than 1");
+    return null;
+  }
+  if (boundaryCount < 0) {
+    console.error("boundaryCount cannot be less than 0");
+    return null;
+  }
+  if (siblingCount < 0) {
+    console.error("siblingCount cannot be less than 0");
+    return null;
+  }
+
+  return (
+    <nav
+      className={cl("navds-pagination", `navds-pagination--${size}`, className)}
+    >
+      {prevNextTexts && (
+        <button
+          className="navds-pagination__prev-next"
+          disabled={page === 1}
+          onClick={() => onPageChange(page - 1)}
+        >
+          <Back
+            className="navds-pagination__prev-next-icon"
+            role="presentation"
+          />
+          <BodyShort size={size} className="navds-pagination__prev-text">
+            Tilbake
+          </BodyShort>
+        </button>
+      )}
+      <ul className="navds-pagination__list">
+        {!prevNextTexts && (
+          <li>
+            <button
+              className="navds-pagination__prev-next"
+              disabled={page === 1}
+              onClick={() => onPageChange(page - 1)}
+            >
+              <Back
+                className="navds-pagination__prev-next-icon"
+                title="Tilbake"
+              />
+            </button>
+          </li>
+        )}
+        {getSteps({ page, count, siblingCount, boundaryCount }).map(
+          (step, i) => {
+            const n = Number(step);
+            return isNaN(n) ? (
+              <li className="navds-pagination__ellipsis" key={`${step}${i}`}>
+                <BodyShort size={size}>...</BodyShort>
+              </li>
+            ) : (
+              <li key={step}>
+                <BodyShort
+                  size={size}
+                  as="button"
+                  className="navds-pagination__item"
+                  onClick={() => onPageChange(n)}
+                  aria-current={page === n ? true : undefined}
+                >
+                  {n}
+                </BodyShort>
+              </li>
+            );
+          }
+        )}
+        {!prevNextTexts && (
+          <li>
+            <button
+              className="navds-pagination__prev-next"
+              disabled={page === count}
+              onClick={() => onPageChange(page + 1)}
+            >
+              <Next
+                className="navds-pagination__prev-next-icon"
+                title="Neste"
+              />
+            </button>
+          </li>
+        )}
+      </ul>
+      {prevNextTexts && (
+        <button
+          className="navds-pagination__prev-next"
+          disabled={page === count}
+          onClick={() => onPageChange(page + 1)}
+        >
+          <BodyShort size={size} className="navds-pagination__next-text">
+            Neste
+          </BodyShort>
+          <Next
+            className="navds-pagination__prev-next-icon"
+            role="presentation"
+          />
+        </button>
+      )}
+    </nav>
+  );
+};
+
+export default Pagination;

package/src/pagination/index.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from "./Pagination";
+export * from "./Pagination";

package/src/pagination/pagination.stories.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import Pagination from "./Pagination";
+
+export default {
+  title: "ds-react/pagination",
+  component: Pagination,
+};
+
+export const All = (props) => {
+  const [page, setPage] = useState(props.page);
+  return (
+    <div>
+      <h2>Pagination</h2>
+      <Pagination {...props} page={page} onPageChange={setPage} />
+
+      <h2>Small</h2>
+      <Pagination size="small" {...props} page={page} onPageChange={setPage} />
+
+      <h2>prevNextTexts</h2>
+      <Pagination prevNextTexts {...props} page={page} onPageChange={setPage} />
+      <h3>prevNextTexts small</h3>
+      <Pagination
+        prevNextTexts
+        size="small"
+        {...props}
+        page={page}
+        onPageChange={setPage}
+      />
+    </div>
+  );
+};
+All.args = {
+  page: 1,
+  count: 8,
+  siblingCount: 1,
+  boundaryCount: 1,
+};

package/src/pagination/steps.test.ts

@@ -0,0 +1,120 @@
+import faker from "faker";
+import { getSteps } from "./Pagination";
+
+describe("getSteps", () => {
+  it("lists all pages when count is <= 7", () => {
+    const count = faker.datatype.number({ min: 1, max: 7 });
+    expect(getSteps({ page: 1, count })).toEqual(
+      Array.from({ length: count }, (_, i) => i + 1)
+    );
+  });
+
+  it("has an end ellipsis when count >= 8", () => {
+    const count = faker.datatype.number({ min: 8 });
+    const page = faker.datatype.number({ min: 1, max: 4 });
+    expect(
+      getSteps({
+        page,
+        count,
+      })
+    ).toEqual([1, 2, 3, 4, 5, "ellipsis", count]);
+  });
+
+  it("has a start ellipsis when count - page >= 3", () => {
+    const count = faker.datatype.number({ min: 8 });
+    const page = faker.datatype.number({ min: count - 3, max: count });
+    expect(
+      getSteps({
+        page,
+        count,
+      })
+    ).toEqual([
+      1,
+      "ellipsis",
+      count - 4,
+      count - 3,
+      count - 2,
+      count - 1,
+      count,
+    ]);
+  });
+
+  it("has start & end ellipsis when count is high", () => {
+    const count = faker.datatype.number({ min: 9 });
+    const page = faker.datatype.number({ min: 5, max: count - 4 });
+    expect(
+      getSteps({
+        page,
+        count,
+      })
+    ).toEqual([1, "ellipsis", page - 1, page, page + 1, "ellipsis", count]);
+  });
+
+  it("can have a reduced siblingCount", () => {
+    const count = faker.datatype.number({ min: 7 });
+    const page = faker.datatype.number({ min: 4, max: count - 3 });
+    expect(
+      getSteps({
+        page,
+        count,
+        siblingCount: 0,
+      })
+    ).toEqual([1, "ellipsis", page, "ellipsis", count]);
+  });
+
+  it("can have an increased siblingCount", () => {
+    const count = faker.datatype.number({ min: 11 });
+    const page = faker.datatype.number({ min: 6, max: count - 5 });
+    expect(
+      getSteps({
+        page,
+        count,
+        siblingCount: 2,
+      })
+    ).toEqual([
+      1,
+      "ellipsis",
+      page - 2,
+      page - 1,
+      page,
+      page + 1,
+      page + 2,
+      "ellipsis",
+      count,
+    ]);
+  });
+
+  it("can have an reduced boundaryCount", () => {
+    const count = faker.datatype.number({ min: 7 });
+    const page = faker.datatype.number({ min: 4, max: count - 3 });
+    expect(
+      getSteps({
+        page,
+        count,
+        boundaryCount: 0,
+      })
+    ).toEqual(["ellipsis", page - 1, page, page + 1, "ellipsis"]);
+  });
+
+  it("can have an increased boundaryCount", () => {
+    const count = faker.datatype.number({ min: 11 });
+    const page = faker.datatype.number({ min: 6, max: count - 5 });
+    expect(
+      getSteps({
+        page,
+        count,
+        boundaryCount: 2,
+      })
+    ).toEqual([
+      1,
+      2,
+      "ellipsis",
+      page - 1,
+      page,
+      page + 1,
+      "ellipsis",
+      count - 1,
+      count,
+    ]);
+  });
+});