@ogcio/design-system-react 1.11.1 → 1.11.2

package/dist/pagination/pagination.test.js

@@ -0,0 +1,95 @@
+import { jsx as g } from "react/jsx-runtime";
+import { useBreakpoint as l, Breakpoint as a } from "../hooks/use-breakpoint.js";
+import { c as p, f as d, r as h } from "../test-utilities-BS7B3BF-.js";
+import { Pagination as x } from "./pagination.js";
+vi.mock("../hooks/use-breakpoint.js", async () => ({
+  ...await vi.importActual("../hooks/use-breakpoint.js"),
+  useBreakpoint: vi.fn()
+}));
+vi.mock("i18next", async (n) => {
+  const e = await n(), t = {
+    "pagination.previous": () => "Previous",
+    "pagination.next": () => "Next",
+    "pagination.page": (o) => `Page ${o == null ? void 0 : o.currentPage} of ${o == null ? void 0 : o.totalPages}`,
+    "pagination.goToPage": (o) => `Go to page ${o == null ? void 0 : o.page}`,
+    "pagination.goToPrevious": () => "Go to previous",
+    "pagination.goToNext": () => "Go to next"
+  }, i = (o, u) => {
+    var r;
+    return ((r = t[o]) == null ? void 0 : r.call(t, u)) || o;
+  };
+  return {
+    ...e,
+    default: {
+      ...e.default,
+      isInitialized: !0,
+      t: i
+    },
+    t: i
+  };
+});
+const c = vi.mocked(l), s = {
+  currentPage: 5,
+  totalPages: 10,
+  onPageChange: vi.fn()
+};
+describe("Pagination", () => {
+  beforeEach(() => {
+    c.mockReturnValue({
+      breakpoint: a.Large,
+      width: 1024
+    });
+  }), afterEach(() => {
+    p(), vi.restoreAllMocks();
+  });
+  const n = (e) => h(/* @__PURE__ */ g(x, { ...e }));
+  it("should render the previous and next buttons", () => {
+    const e = n(s), t = e.getByText("Previous"), i = e.getByText("Next");
+    expect(t).toBeInTheDocument(), expect(i).toBeInTheDocument();
+  }), it("should not render pagination when totalPages is 0", () => {
+    const e = { ...s, totalPages: 0 }, i = n(e).container.firstChild;
+    expect(i).toBeNull();
+  }), it("should render pagination buttons and page numbers when not on XS breakpoint", () => {
+    c.mockReturnValue({
+      breakpoint: a.ExtraSmall,
+      width: 480
+    });
+    const e = n(s), t = e.getAllByRole("button");
+    expect(t.length).toBeGreaterThan(0), expect(e.getByText("Page 5 of 10")).toBeInTheDocument();
+  }), it("should render page number buttons correctly on large breakpoints", () => {
+    c.mockReturnValue({
+      breakpoint: a.Large,
+      width: 1024
+    });
+    const e = n(s);
+    for (const t of [1, 3, 4, 5, 6, 7, 10])
+      expect(e.getByText(t)).toBeInTheDocument();
+  }), it("should hide pagination buttons on XS breakpoint", () => {
+    c.mockReturnValue({
+      breakpoint: a.ExtraSmall,
+      width: 400
+    });
+    const e = n(s), t = e.queryAllByRole("button");
+    expect(t.length).toBe(2), expect(e.getByText("Page 5 of 10")).toBeInTheDocument();
+  }), it("should call onPageChange when a page button is clicked", () => {
+    c.mockReturnValue({
+      breakpoint: a.Large,
+      width: 1024
+    });
+    const t = n(s).getByText("3");
+    d.click(t), expect(s.onPageChange).toHaveBeenCalledWith(3);
+  }), it("should disable previous button on the first page", () => {
+    const e = { ...s, currentPage: 1 }, i = n(e).getByText("Previous");
+    expect(i).toBeDisabled();
+  }), it("should disable next button on the last page", () => {
+    const e = { ...s, currentPage: 10 }, i = n(e).getByText("Next");
+    expect(i).toBeDisabled();
+  }), it("should render ellipses correctly for page ranges", () => {
+    const i = n(s).getAllByTestId("govie-icon").find(
+      (o) => o.textContent === "more_horiz"
+    );
+    expect(i).toBeInTheDocument();
+  }), it("should pass accessibility tests", async () => {
+    await n(s).axe();
+  });
+});

package/dist/paragraph/paragraph.d.ts

@@ -0,0 +1,17 @@
+export type ParagraphAs = 'p' | 'span';
+export type ParagraphSize = 'lg' | 'md' | 'sm';
+export type ParagraphAlign = 'start' | 'center' | 'end' | 'justify';
+export type ParagraphWhitespace = 'normal' | 'pre' | 'pre-wrap' | 'break-spaces';
+export type ParagraphProps = {
+    as?: ParagraphAs;
+    size?: ParagraphSize;
+    align?: ParagraphAlign;
+    whitespace?: ParagraphWhitespace;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+    ariaLabel?: string;
+    id?: string;
+    dataTestid?: string;
+};
+export declare function Paragraph({ as: As, size, align, whitespace, children, style, className, id, ariaLabel, dataTestid, }: ParagraphProps): import("react/jsx-runtime").JSX.Element;

package/dist/paragraph/paragraph.js

@@ -0,0 +1,60 @@
+import { jsx as m } from "react/jsx-runtime";
+function w({
+  as: e = "p",
+  size: a = "md",
+  align: r = "start",
+  whitespace: t = "normal",
+  children: s,
+  style: i,
+  className: p,
+  id: n,
+  ariaLabel: c,
+  dataTestid: g
+}) {
+  const u = (() => {
+    switch (a) {
+      case "lg":
+        return e === "p" ? "gi-paragraph-lg" : "gi-span-lg";
+      case "sm":
+        return e === "p" ? "gi-paragraph-sm" : "gi-span-sm";
+      default:
+        return e === "p" ? "gi-paragraph-md" : "gi-span-md";
+    }
+  })(), l = (() => {
+    switch (r) {
+      case "center":
+        return "gi-text-center";
+      case "end":
+        return "gi-text-end";
+      case "justify":
+        return "gi-text-justify";
+      default:
+        return "gi-text-start";
+    }
+  })(), h = (() => {
+    switch (t) {
+      case "pre":
+        return "gi-whitespace-pre";
+      case "pre-wrap":
+        return "gi-whitespace-pre-wrap";
+      case "break-spaces":
+        return "gi-whitespace-break-spaces";
+      default:
+        return "gi-whitespace-normal";
+    }
+  })();
+  return /* @__PURE__ */ m(
+    e,
+    {
+      className: `${u} ${l} ${h} ${p || ""}`,
+      "aria-label": c,
+      style: i,
+      id: n,
+      "data-testid": g,
+      children: s
+    }
+  );
+}
+export {
+  w as Paragraph
+};

package/dist/paragraph/paragraph.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/paragraph/paragraph.test.js

@@ -0,0 +1,63 @@
+import { jsx as a } from "react/jsx-runtime";
+import { c as n, r } from "../test-utilities-BS7B3BF-.js";
+import { Paragraph as c } from "./paragraph.js";
+describe("govieParagraph", () => {
+  afterEach(n);
+  const s = (t) => r(/* @__PURE__ */ a(c, { ...t }));
+  it('should render a paragraph with the correct content when props.as is "p"', () => {
+    const e = s({
+      as: "p",
+      children: "This is a paragraph",
+      size: "md"
+    }).getByText("This is a paragraph");
+    expect(e).toBeTruthy(), expect(e.tagName).toBe("P");
+  }), it('should render a span with the correct content when props.as is "span"', () => {
+    const e = s({
+      as: "span",
+      children: "This is a span",
+      size: "lg"
+    }).getByText("This is a span");
+    expect(e).toBeTruthy(), expect(e.tagName).toBe("SPAN");
+  }), it('should have correct text size classes for "lg"', () => {
+    const e = s({
+      as: "p",
+      children: "Large text",
+      size: "lg"
+    }).getByText("Large text");
+    expect(e.classList.contains("gi-paragraph-lg")).toBe(!0);
+  }), it('should have correct text size classes for "md"', () => {
+    const e = s({
+      as: "span",
+      children: "Medium text",
+      size: "md"
+    }).getByText("Medium text");
+    expect(e.classList.contains("gi-span-md")).toBe(!0);
+  }), it('should have correct text size classes for "sm"', () => {
+    const e = s({
+      as: "p",
+      children: "Small text",
+      size: "sm"
+    }).getByText("Small text");
+    expect(e.classList.contains("gi-paragraph-sm")).toBe(!0);
+  }), it("should have aligned end", () => {
+    const e = s({
+      as: "p",
+      children: "Small text",
+      align: "end"
+    }).getByText("Small text");
+    expect(e.classList.contains("gi-text-end")).toBe(!0);
+  }), it("should safely render HTML content", () => {
+    const e = s({
+      as: "p",
+      children: /* @__PURE__ */ a("a", { href: "#", children: "Anchor tag" }),
+      size: "sm"
+    }).getByText("Anchor tag");
+    expect(e).toBeTruthy(), expect(e.innerHTML).toContain("Anchor tag");
+  }), it("should pass axe accessibility tests", async () => {
+    await s({
+      as: "p",
+      children: "Accessible paragraph",
+      size: "md"
+    }).axe();
+  });
+});

package/dist/phase-banner/phase-banner.d.ts

@@ -0,0 +1,5 @@
+export type PhaseBannerProps = {
+    level: 'alpha' | 'beta';
+    children: React.ReactNode;
+};
+export declare function PhaseBanner({ level, children }: PhaseBannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/phase-banner/phase-banner.js

@@ -0,0 +1,10 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+function i({ level: a, children: n }) {
+  return /* @__PURE__ */ r("div", { "data-testid": "phase-banner", className: "gi-phase-banner-container", children: [
+    /* @__PURE__ */ e("div", { className: "gi-phase-banner", children: a }),
+    /* @__PURE__ */ e("div", { children: n })
+  ] });
+}
+export {
+  i as PhaseBanner
+};

package/dist/phase-banner/phase-banner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/phase-banner/phase-banner.test.js

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import { c, r as h } from "../test-utilities-BS7B3BF-.js";
+import { PhaseBanner as i } from "./phase-banner.js";
+describe("goviePhaseBanner", () => {
+  afterEach(c);
+  const a = (s) => h(/* @__PURE__ */ r(i, { ...s }));
+  it("should render a phase-banner with alpha level", () => {
+    var t, n;
+    const e = a({
+      children: "This is a phase-banner",
+      level: "alpha"
+    }).getByTestId("phase-banner");
+    expect(e).toBeTruthy(), expect((n = (t = e.firstElementChild) == null ? void 0 : t.textContent) == null ? void 0 : n.trim()).toBe("alpha");
+  }), it('should render a span with the correct content when props.as is "span"', () => {
+    var t, n;
+    const e = a({
+      children: "This is a span",
+      level: "beta"
+    }).getByTestId("phase-banner");
+    expect(e).toBeTruthy(), expect((n = (t = e.firstElementChild) == null ? void 0 : t.textContent) == null ? void 0 : n.trim()).toBe("beta");
+  }), it("should pass axe accessibility tests", async () => {
+    await a({
+      children: "Accessible phase-banner",
+      level: "alpha"
+    }).axe();
+  });
+});

package/dist/popover/popover.d.ts

@@ -0,0 +1,2 @@
+import { PopoverProps } from './types.js';
+export declare const Popover: ({ triggerRef, children, className, open, onOpenChange, options, extraRefs, }: PopoverProps) => import("react/jsx-runtime").JSX.Element | null;