Lerna versionbump [ci skip]

- @navikt/ds-css@0.15.7

@navikt/core/css/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @import "baseline/baseline.css";
 @import "typography.css";
 @import "grid.css";
@@ -13,6 +14,7 @@
 @import "loader.css";
 @import "menu.css";
 @import "modal.css";
+@import "pagination.css";
 @import "popover.css";
 @import "tag.css";
 @import "toggle-group.css";

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.15.5",
+  "version": "0.15.7",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",

@navikt/core/css/pagination.css

@@ -0,0 +1,118 @@
+:root {
+  --navds-pagination-color-background-hover: var(
+    --navds-semantic-color-canvas-background
+  );
+  --navds-pagination-color-background-active: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+  --navds-pagination-color-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-pagination-color-background-selected: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-pagination-color-text-selected: var(
+    --navds-semantic-color-text-inverted
+  );
+}
+
+.navds-pagination {
+  display: flex;
+}
+
+.navds-pagination__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: var(--navds-spacing-3);
+}
+
+.navds-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--navds-spacing-8);
+  cursor: default;
+}
+
+.navds-pagination--small .navds-pagination__ellipsis {
+  width: var(--navds-spacing-6);
+}
+
+.navds-pagination__item {
+  display: flex;
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: 2px;
+  padding: var(--navds-spacing-1) var(--navds-spacing-3);
+}
+
+.navds-pagination--small .navds-pagination__item {
+  padding: 2px var(--navds-spacing-2);
+}
+
+.navds-pagination__item:hover {
+  background-color: var(--navds-pagination-color-background-hover);
+}
+
+.navds-pagination__item:active {
+  background-color: var(--navds-pagination-color-background-active);
+  color: var(--navds-pagination-color-text-active);
+}
+
+.navds-pagination__item:focus {
+  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus),
+    inset 0 0 0 3px white;
+  outline: none;
+}
+
+.navds-pagination__item[aria-current="true"] {
+  background-color: var(--navds-pagination-color-background-selected);
+  color: var(--navds-pagination-color-text-selected);
+  font-weight: var(--navds-font-weight-bold);
+}
+
+.navds-pagination__prev-next {
+  display: flex;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  text-decoration: underline;
+  color: var(--navds-semantic-color-link);
+  align-items: center;
+  gap: var(--navds-spacing-1);
+  border-radius: 2px;
+}
+
+.navds-pagination__prev-next:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
+}
+
+.navds-pagination__prev-next:disabled {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.navds-pagination__prev-next-icon {
+  margin: 7px;
+}
+
+.navds-pagination--small .navds-pagination__prev-next-icon {
+  margin: var(--navds-spacing-1);
+  font-size: 1rem;
+}
+
+.navds-pagination__next-text {
+  padding-left: 0.75rem;
+}
+
+.navds-pagination__prev-text {
+  padding-right: 0.75rem;
+}

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.16.10",
+  "version": "0.16.12",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",

@navikt/core/react/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";

@navikt/core/react/src/modal/Modal.tsx

@@ -6,7 +6,7 @@ import { Close } from "@navikt/ds-icons";
 import { Button } from "..";
 import ModalContent, { ModalContentType } from "./ModalContent";
 
-export interface ModalProps extends ReactModal {
+export interface ModalProps {
   /**
    * Modal content
    */

@navikt/core/react/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;

@navikt/core/react/src/pagination/index.ts

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

@navikt/core/react/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,
+};

@navikt/core/react/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,
+    ]);
+  });
+});

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.11.10",
+  "version": "0.11.12",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@navikt/ds-icons": "^0.8.4",
-    "@navikt/ds-react": "^0.16.10",
+    "@navikt/ds-react": "^0.16.12",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",