@purpurds/pagination 5.19.1

package/src/pagination-page-trigger.test.tsx

@@ -0,0 +1,172 @@
+import React, { forwardRef } from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { PaginationPageTrigger } from "./pagination-page-trigger";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("PaginationPageTrigger", () => {
+  const onPageChangeMock = vi.fn();
+  const hrefGetterMock = vi.fn((page: number) => `#page-${page}`);
+
+  it("renders a button when asLink is not set", () => {
+    render(
+      <PaginationPageTrigger
+        anchorTagElement="a"
+        onPageChange={onPageChangeMock}
+        pageNumber={1}
+        selected={false}
+      />
+    );
+
+    const button = screen.getByTestId(Selectors.BUTTON);
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent("1");
+  });
+
+  it("calls onPageChange when button is clicked", async () => {
+    render(
+      <PaginationPageTrigger
+        anchorTagElement="a"
+        onPageChange={onPageChangeMock}
+        pageNumber={1}
+        selected={false}
+      />
+    );
+
+    const button = screen.getByTestId(Selectors.BUTTON);
+    await userEvent.click(button);
+    expect(onPageChangeMock).toHaveBeenCalledWith(1);
+  });
+
+  it("renders a link when asLink is true and not disabled", () => {
+    render(
+      <PaginationPageTrigger
+        anchorTagElement="a"
+        onPageChange={onPageChangeMock}
+        pageNumber={1}
+        selected={false}
+        asLink
+        hrefGetter={hrefGetterMock}
+        disabled={false}
+      />
+    );
+
+    const link = screen.getByTestId(Selectors.LINK);
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveTextContent("1");
+    expect(link).toHaveAttribute("href", "#page-1");
+  });
+
+  it("renders a custom link when asLink is true and not disabled", () => {
+    const CustomTestLink = forwardRef(
+      ({ children, href }: { children?: React.ReactNode; href?: string }) => (
+        <a data-testid="custom-test-link" href={href}>
+          {children}
+        </a>
+      )
+    );
+    render(
+      <PaginationPageTrigger
+        anchorTagElement={CustomTestLink}
+        onPageChange={onPageChangeMock}
+        pageNumber={1}
+        selected={false}
+        asLink
+        hrefGetter={hrefGetterMock}
+        disabled={false}
+      />
+    );
+
+    const link = screen.getByTestId("custom-test-link");
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveTextContent("1");
+    expect(link).toHaveAttribute("href", "#page-1");
+  });
+
+  it("calls onPageChange when link is clicked", async () => {
+    render(
+      <PaginationPageTrigger
+        anchorTagElement="a"
+        onPageChange={onPageChangeMock}
+        pageNumber={2}
+        selected={false}
+        asLink
+        hrefGetter={hrefGetterMock}
+        disabled={false}
+      />
+    );
+
+    const link = screen.getByTestId(Selectors.LINK);
+    await userEvent.click(link);
+    expect(onPageChangeMock).toHaveBeenCalledWith(2);
+  });
+
+  it("renders a disabled link when asLink is true and disabled", () => {
+    render(
+      <PaginationPageTrigger
+        anchorTagElement="a"
+        onPageChange={onPageChangeMock}
+        pageNumber={1}
+        selected={false}
+        asLink
+        hrefGetter={hrefGetterMock}
+        disabled={true}
+      />
+    );
+
+    const disabledLink = screen.getByTestId(Selectors.DISABLED_LINK);
+    expect(disabledLink).toBeInTheDocument();
+    expect(disabledLink).toHaveTextContent("1");
+  });
+
+  it("renders a disabled button when disabled is true", () => {
+    render(
+      <PaginationPageTrigger
+        anchorTagElement="a"
+        onPageChange={onPageChangeMock}
+        pageNumber={1}
+        selected={false}
+        disabled={true}
+      />
+    );
+
+    const button = screen.getByTestId(Selectors.BUTTON);
+    expect(button).toBeInTheDocument();
+    expect(button).toBeDisabled();
+  });
+
+  it.each([
+    { asLink: false as never, selector: Selectors.BUTTON },
+    { asLink: true as const, selector: Selectors.LINK },
+  ])("applies selected class when selected is true (asLink: $asLink)", ({ asLink, selector }) => {
+    render(
+      <PaginationPageTrigger
+        anchorTagElement="a"
+        onPageChange={onPageChangeMock}
+        pageNumber={1}
+        selected={true}
+        asLink={asLink}
+        hrefGetter={hrefGetterMock}
+      />
+    );
+
+    const element = screen.getByTestId(selector);
+    expect(element).toHaveClass("purpur-pagination-page-trigger__trigger-item--selected");
+  });
+});
+
+const Selectors = {
+  ROOT: "purpur-pagination-page-trigger",
+  DISABLED_LINK: "purpur-pagination-page-trigger-disabled-link",
+  LINK: "purpur-pagination-page-trigger-link",
+  BUTTON: "purpur-pagination-page-trigger-button",
+};

package/src/pagination-page-trigger.tsx

@@ -0,0 +1,93 @@
+import React, { ForwardedRef, forwardRef } from "react";
+import c from "classnames/bind";
+
+import styles from "./pagination-page-trigger.module.scss";
+import { InternalLinkProps, InternalNoLinkProps, Link } from "./types";
+const cx = c.bind(styles);
+
+export type PaginationPageTriggerProps = {
+  ["data-testid"]?: string;
+  anchorTagElement: Link;
+  className?: string;
+  disabled?: boolean;
+  onPageChange: (page: number) => void;
+  pageNumber: number;
+  selected: boolean;
+} & (InternalLinkProps | InternalNoLinkProps);
+
+const rootClassName = "purpur-pagination-page-trigger";
+
+export const PaginationPageTrigger = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "purpur-pagination-page-trigger",
+      anchorTagElement: AnchorTagElement,
+      asLink,
+      className,
+      disabled,
+      hrefGetter,
+      onPageChange,
+      pageNumber,
+      selected,
+      ...props
+    }: PaginationPageTriggerProps,
+    ref: ForwardedRef<HTMLLIElement>
+  ) => {
+    const classes = cx([className, rootClassName]);
+
+    return (
+      <li className={classes} data-testid={dataTestId} ref={ref} {...props}>
+        {asLink ? (
+          disabled ? (
+            <span
+              className={cx([
+                `${rootClassName}__trigger-item`,
+                `${rootClassName}__trigger-item--page-trigger`,
+                `${rootClassName}__trigger-item--sm`,
+                `${rootClassName}__trigger-item--icon-only`,
+                `${rootClassName}__trigger-item--disabled`,
+              ])}
+              data-testid={`${dataTestId}-disabled-link`}
+            >
+              {pageNumber}
+            </span>
+          ) : (
+            <AnchorTagElement
+              className={cx([
+                `${rootClassName}__trigger-item`,
+                `${rootClassName}__trigger-item--page-trigger`,
+                `${rootClassName}__trigger-item--sm`,
+                `${rootClassName}__trigger-item--icon-only`,
+                { [`${rootClassName}__trigger-item--selected`]: selected },
+              ])}
+              data-testid={`${dataTestId}-link`}
+              href={hrefGetter(pageNumber)}
+              onClick={() => onPageChange(pageNumber)}
+            >
+              {pageNumber}
+            </AnchorTagElement>
+          )
+        ) : (
+          <button
+            aria-disabled={disabled}
+            className={cx([
+              `${rootClassName}__trigger-item`,
+              `${rootClassName}__trigger-item--page-trigger`,
+              `${rootClassName}__trigger-item--sm`,
+              `${rootClassName}__trigger-item--icon-only`,
+              { [`${rootClassName}__trigger-item--selected`]: selected },
+            ])}
+            data-testid={`${dataTestId}-button`}
+            disabled={disabled}
+            onClick={() => onPageChange(pageNumber)}
+            type="button"
+          >
+            {pageNumber}
+          </button>
+        )}
+      </li>
+    );
+  }
+);
+
+PaginationPageTrigger.displayName = "PaginationPageTrigger";

package/src/pagination-pages.module.scss

@@ -0,0 +1,8 @@
+.purpur-pagination-pages {
+  display: flex;
+  gap: var(--purpur-spacing-100);
+  justify-content: center;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}

package/src/pagination-pages.test.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { PaginationPages } from "./pagination-pages";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+const onPageChange = vi.fn();
+
+describe("PaginationPages Component", () => {
+  it("should render the PaginationPages component", () => {
+    render(<PaginationPages pages={[1, 2, 3, 4, 5]} currentPage={1} onPageChange={onPageChange} />);
+    expect(screen.getByTestId(Selectors.PAGINATION_PAGES)).toBeInTheDocument();
+  });
+
+  it("should display the correct number of pages", () => {
+    render(<PaginationPages pages={[1, 2, 3, 4, 5]} currentPage={1} onPageChange={onPageChange} />);
+    for (let i = 1; i <= 5; i++) {
+      expect(screen.getByText(i)).toBeInTheDocument();
+    }
+  });
+
+  it("should display two truncation separators correctly", () => {
+    const currentPage = 23;
+    render(
+      <PaginationPages
+        pages={[1, 22, 23, 24, 50]}
+        currentPage={currentPage}
+        onPageChange={onPageChange}
+      />
+    );
+
+    expect(
+      screen.getByTestId("purpur-pagination-pages-truncation-separator-22")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId("purpur-pagination-pages-truncation-separator-50")
+    ).toBeInTheDocument();
+    expect(screen.getAllByText("...").length).toBe(2);
+  });
+
+  it("should display one truncation separator correctly at the beginning", () => {
+    const currentPage = 2;
+    render(
+      <PaginationPages
+        pages={[1, 2, 3, 4, 50]}
+        currentPage={currentPage}
+        onPageChange={onPageChange}
+      />
+    );
+
+    expect(
+      screen.getByTestId("purpur-pagination-pages-truncation-separator-50")
+    ).toBeInTheDocument();
+    expect(screen.getAllByText("...").length).toBe(1);
+  });
+
+  it("should display one truncation separator correctly at the end", () => {
+    const currentPage = 49;
+    render(
+      <PaginationPages
+        pages={[1, 47, 48, 49, 50]}
+        currentPage={currentPage}
+        onPageChange={onPageChange}
+      />
+    );
+
+    expect(
+      screen.getByTestId("purpur-pagination-pages-truncation-separator-47")
+    ).toBeInTheDocument();
+    expect(screen.getAllByText("...").length).toBe(1);
+  });
+
+  it("should handle page click events", async () => {
+    render(<PaginationPages pages={[1, 2, 3, 4, 5]} currentPage={1} onPageChange={onPageChange} />);
+
+    const pageButton = screen.getByText("2");
+    await userEvent.click(pageButton);
+
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+});
+
+const Selectors = {
+  PAGINATION_PAGES: "purpur-pagination-pages",
+  TRUNCATION_SEPARATOR: "truncation-separator",
+};

package/src/pagination-pages.tsx

@@ -0,0 +1,72 @@
+import React, { ForwardedRef, forwardRef } from "react";
+import c from "classnames/bind";
+
+import { PaginationPageTrigger } from "./pagination-page-trigger";
+import styles from "./pagination-pages.module.scss";
+import { PaginationTruncationSeparator } from "./pagination-truncation-separator";
+import { InternalLinkProps, InternalNoLinkProps, Link } from "./types";
+const cx = c.bind(styles);
+
+export type PaginationPagesProps = {
+  ["data-testid"]?: string;
+  anchorTagElement: Link;
+  className?: string;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  pages: number[];
+} & (InternalNoLinkProps | InternalLinkProps);
+
+const rootClassName = "purpur-pagination-pages";
+
+export const PaginationPages = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "purpur-pagination-pages",
+      anchorTagElement: AnchorTagElement,
+      asLink,
+      className,
+      currentPage,
+      hrefGetter,
+      onPageChange,
+      pages,
+      ...props
+    }: PaginationPagesProps,
+    ref: ForwardedRef<HTMLOListElement>
+  ) => {
+    const classes = cx([className, rootClassName]);
+
+    return (
+      <ol className={classes} data-testid={dataTestId} ref={ref} {...props}>
+        {pages.flatMap((pageNumber: number, idx: number, pages: number[]) => {
+          const TriggerComponent = (
+            <PaginationPageTrigger
+              {...(asLink
+                ? { asLink: true, hrefGetter }
+                : {
+                    asLink: undefined as never,
+                    hrefGetter: undefined as never,
+                  })}
+              anchorTagElement={AnchorTagElement}
+              data-testid={`${dataTestId}-page-${pageNumber}`}
+              key={pageNumber}
+              onPageChange={onPageChange}
+              selected={pageNumber === currentPage}
+              pageNumber={pageNumber}
+            />
+          );
+          return idx === 0 || pages[idx - 1] + 1 === pageNumber
+            ? [TriggerComponent]
+            : [
+                <PaginationTruncationSeparator
+                  data-testid={`${dataTestId}-truncation-separator-${pageNumber}`}
+                  key={`${pageNumber}-separator`}
+                />,
+                TriggerComponent,
+              ];
+        })}
+      </ol>
+    );
+  }
+);
+
+PaginationPages.displayName = "PaginationPages";

package/src/pagination-step-trigger.module.scss

@@ -0,0 +1,27 @@
+@import "@purpurds/action/src/action.scss";
+@import "@purpurds/tokens/breakpoint/variables";
+
+.purpur-pagination-step-trigger {
+  &__trigger-item {
+    @include action();
+
+    &--step-trigger {
+      box-sizing: border-box;
+      height: calc(var(--purpur-spacing-150) + var(--purpur-spacing-400));
+      padding: var(--purpur-spacing-100);
+      width: calc(var(--purpur-spacing-150) + var(--purpur-spacing-400));
+
+      @media screen and (min-width: $purpur-breakpoint-lg) {
+        padding: var(--purpur-spacing-100) var(--purpur-spacing-250);
+        width: auto;
+      }
+    }
+
+    &--disabled {
+      background-color: var(--purpur-color-background-interactive-disabled);
+      box-shadow: none;
+      color: var(--purpur-color-text-weak);
+      cursor: not-allowed;
+    }
+  }
+}

package/src/pagination-step-trigger.test.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { PaginationStepTrigger } from "./pagination-step-trigger";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+});
+
+const hrefGetter = vi.fn((page: number) => `#page-${page}`);
+const onPageChange = vi.fn();
+
+describe("PaginationStepTrigger", () => {
+  it("renders a disabled link when asLink is true and disabled is true", () => {
+    render(
+      <PaginationStepTrigger
+        anchorTagElement="a"
+        asLink
+        disabled
+        hrefGetter={hrefGetter}
+        onPageChange={onPageChange}
+        pageToNavigateTo={1}
+      >
+        Disabled Link
+      </PaginationStepTrigger>
+    );
+
+    const disabledLink = screen.getByTestId(Selectors.DISABLED_LINK);
+    expect(disabledLink).toBeInTheDocument();
+    expect(disabledLink).toHaveTextContent("Disabled Link");
+  });
+
+  it("renders an enabled link when asLink is true and disabled is false", async () => {
+    render(
+      <PaginationStepTrigger
+        anchorTagElement="a"
+        asLink
+        disabled={false}
+        hrefGetter={hrefGetter}
+        onPageChange={onPageChange}
+        pageToNavigateTo={2}
+      >
+        Enabled Link
+      </PaginationStepTrigger>
+    );
+
+    const link = screen.getByTestId(Selectors.LINK);
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveTextContent("Enabled Link");
+    expect(link).toHaveAttribute("href", "#page-2");
+
+    await userEvent.click(link);
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+  it("renders a button when asLink is not set", async () => {
+    render(
+      <PaginationStepTrigger
+        anchorTagElement="a"
+        disabled={false}
+        onPageChange={onPageChange}
+        pageToNavigateTo={3}
+      >
+        Button
+      </PaginationStepTrigger>
+    );
+
+    const button = screen.getByTestId(Selectors.BUTTON);
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent("Button");
+
+    await userEvent.click(button);
+    expect(onPageChange).toHaveBeenCalledWith(3);
+  });
+
+  it("renders a disabled button when asLink is not set and disabled is true", () => {
+    render(
+      <PaginationStepTrigger
+        anchorTagElement="a"
+        disabled
+        onPageChange={onPageChange}
+        pageToNavigateTo={1}
+      >
+        Disabled Button
+      </PaginationStepTrigger>
+    );
+
+    const button = screen.getByTestId(Selectors.BUTTON);
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent("Disabled Button");
+    expect(button).toBeDisabled();
+  });
+});
+
+const Selectors = {
+  ROOT: "purpur-pagination-step-trigger",
+  DISABLED_LINK: "purpur-pagination-step-trigger-disabled-link",
+  LINK: "purpur-pagination-step-trigger-link",
+  BUTTON: "purpur-pagination-step-trigger-button",
+};

package/src/pagination-step-trigger.tsx

@@ -0,0 +1,92 @@
+import React, { ForwardedRef, forwardRef } from "react";
+import c from "classnames/bind";
+
+import styles from "./pagination-step-trigger.module.scss";
+import { InternalLinkProps, InternalNoLinkProps, Link } from "./types";
+const cx = c.bind(styles);
+
+export type PaginationStepTriggerProps = {
+  ["data-testid"]?: string;
+  anchorTagElement: Link;
+  children: React.ReactNode;
+  className?: string;
+  disabled: boolean;
+  onPageChange: (page: number) => void;
+  pageToNavigateTo: number;
+} & (InternalLinkProps | InternalNoLinkProps);
+
+const rootClassName = "purpur-pagination-step-trigger";
+
+export const PaginationStepTrigger = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "purpur-pagination-step-trigger",
+      anchorTagElement: AnchorTagElement,
+      asLink,
+      children,
+      className,
+      disabled,
+      hrefGetter,
+      onPageChange,
+      pageToNavigateTo,
+      ...props
+    }: PaginationStepTriggerProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const classes = cx([className, rootClassName]);
+
+    return (
+      <div className={classes} data-testid={dataTestId} ref={ref} {...props}>
+        {asLink ? (
+          disabled ? (
+            <span
+              className={cx([
+                `${rootClassName}__trigger-item`,
+                `${rootClassName}__trigger-item--step-trigger`,
+                `${rootClassName}__trigger-item--secondary`,
+                `${rootClassName}__trigger-item--sm`,
+                `${rootClassName}__trigger-item--disabled`,
+              ])}
+              data-testid={`${dataTestId}-disabled-link`}
+            >
+              {children}
+            </span>
+          ) : (
+            <AnchorTagElement
+              className={cx([
+                `${rootClassName}__trigger-item`,
+                `${rootClassName}__trigger-item--step-trigger`,
+                `${rootClassName}__trigger-item--secondary`,
+                `${rootClassName}__trigger-item--sm`,
+              ])}
+              data-testid={`${dataTestId}-link`}
+              href={hrefGetter(pageToNavigateTo)}
+              onClick={() => onPageChange(pageToNavigateTo)}
+            >
+              {children}
+            </AnchorTagElement>
+          )
+        ) : (
+          <button
+            aria-disabled={disabled}
+            className={cx([
+              `${rootClassName}__trigger-item`,
+              `${rootClassName}__trigger-item--step-trigger`,
+              `${rootClassName}__trigger-item--secondary`,
+              `${rootClassName}__trigger-item--sm`,
+              { [`${rootClassName}__trigger-item--disabled`]: disabled },
+            ])}
+            data-testid={`${dataTestId}-button`}
+            disabled={disabled}
+            onClick={() => onPageChange(pageToNavigateTo)}
+            type="button"
+          >
+            {children}
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+PaginationStepTrigger.displayName = "PaginationStepTrigger";

package/src/pagination-truncation-separator.module.scss

@@ -0,0 +1,8 @@
+.purpur-pagination-truncation-separator {
+  box-sizing: border-box;
+  display: block;
+  height: calc(2 * var(--purpur-spacing-250));
+  padding: var(--purpur-spacing-150) 0;
+  text-align: center;
+  width: var(--purpur-spacing-250);
+}