@ogcio/design-system-react 1.11.1 → 1.11.2

package/dist/tooltip/tooltip.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsxs as b, jsx as g } from "react/jsx-runtime";
+import { useState as c, useId as h, useCallback as d, useEffect as v } from "react";
+import { c as y } from "../index-DNkhmzZp.js";
+const T = ["top", "bottom", "left", "right"], E = y({
+  base: "gi-tooltip",
+  variants: {
+    position: {
+      left: "gi-tooltip-left",
+      right: "gi-tooltip-right",
+      top: "gi-tooltip-top",
+      bottom: "gi-tooltip-bottom"
+    }
+  }
+}), F = ({
+  text: o,
+  position: i = "top",
+  dataTestid: p,
+  children: u
+}) => {
+  const [e, n] = c(!1), [f, a] = c(!1), l = h(), r = () => n(!0), t = d(() => {
+    n(!1), a(!1);
+  }, []), s = d(
+    (m) => {
+      m.key === "Escape" && t();
+    },
+    [t]
+  );
+  return v(() => (document.addEventListener("keydown", s), () => {
+    document.removeEventListener("keydown", s);
+  }), [s]), /* @__PURE__ */ b(
+    "span",
+    {
+      className: "gi-tooltip-wrapper",
+      onMouseEnter: r,
+      onMouseLeave: () => {
+        f || t();
+      },
+      onFocus: () => {
+        a(!0), r();
+      },
+      onBlur: () => {
+        t();
+      },
+      "aria-describedby": e ? l : void 0,
+      "data-testid": p,
+      children: [
+        u,
+        e && /* @__PURE__ */ g(
+          "span",
+          {
+            id: l,
+            role: "tooltip",
+            className: E({ position: i }),
+            "aria-hidden": !e,
+            "data-testid": `dti-tooltip-content-${i}`,
+            children: o.length > 100 ? o.slice(0, 100) + "..." : o
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  F as Tooltip,
+  T as positionVariants
+};

package/dist/tooltip/tooltip.test.d.ts

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

package/dist/tooltip/tooltip.test.js

@@ -0,0 +1,85 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as r, t as s, f as l, r as c } from "../test-utilities-BS7B3BF-.js";
+import { positionVariants as p, Tooltip as x } from "./tooltip.js";
+describe("govieTooltip", () => {
+  afterEach(r);
+  const n = (t) => c(/* @__PURE__ */ o(x, { ...t, children: "Hover me" }));
+  s(
+    Reflect.ownKeys(p),
+    (t) => n({
+      text: "Tooltip Text",
+      position: t,
+      children: /* @__PURE__ */ o("button", { children: "Hover me" })
+    })
+  ), it("should render the child component", () => {
+    const e = n({
+      text: "Tooltip Text",
+      position: "top",
+      children: /* @__PURE__ */ o("button", { children: "Hover me" })
+    }).getByText("Hover me");
+    expect(e).toBeTruthy();
+  }), it("should not show tooltip initially", () => {
+    const e = n({
+      text: "Tooltip Text",
+      position: "top",
+      children: /* @__PURE__ */ o("button", { children: "Hover me" })
+    }).queryByText("Tooltip Text");
+    expect(e).not.toBeInTheDocument();
+  }), it("should show tooltip on mouse enter", () => {
+    const t = n({
+      text: "Tooltip Text",
+      position: "top",
+      children: /* @__PURE__ */ o("button", { children: "Hover me" })
+    }), e = t.getByText("Hover me");
+    l.mouseEnter(e);
+    const i = t.getByText("Tooltip Text");
+    expect(i).toBeInTheDocument();
+  }), it("should hide tooltip on mouse leave", () => {
+    const t = n({
+      text: "Tooltip Text",
+      position: "top",
+      children: /* @__PURE__ */ o("button", { children: "Hover me" })
+    }), e = t.getByText("Hover me");
+    l.mouseEnter(e);
+    const i = t.getByText("Tooltip Text");
+    expect(i).toBeInTheDocument(), l.mouseLeave(e), expect(t.queryByText("Tooltip Text")).not.toBeInTheDocument();
+  }), it.each(["top", "bottom", "left", "right"])(
+    "should apply correct position class for %s position",
+    (t) => {
+      const e = n({
+        text: "Tooltip Text",
+        position: t,
+        children: /* @__PURE__ */ o("button", { children: "Hover me" })
+      });
+      l.mouseEnter(e.getByText("Hover me"));
+      const i = e.getByText("Tooltip Text");
+      expect(i).toHaveClass(`gi-tooltip-${t}`);
+    }
+  ), it("should render tooltip with correct text", () => {
+    const t = "Test Tooltip Content", e = n({
+      text: t,
+      position: "top",
+      children: /* @__PURE__ */ o("button", { children: "Hover me" })
+    });
+    l.mouseEnter(e.getByText("Hover me"));
+    const i = e.getByText(t);
+    expect(i).toBeInTheDocument();
+  }), it("should render ellipis with long tooltip text", () => {
+    const e = n({
+      text: "Very long tooltip text. Very long tooltip text. Very long tooltip text. Very long tooltip text. Very long tooltip text.",
+      position: "top",
+      children: /* @__PURE__ */ o("button", { children: "Hover me" })
+    });
+    l.mouseEnter(e.getByText("Hover me"));
+    const i = e.getByText(
+      "Very long tooltip text. Very long tooltip text. Very long tooltip text. Very long tooltip text. Very..."
+    );
+    expect(i).toBeInTheDocument();
+  }), it("should pass axe accessibility tests", async () => {
+    await n({
+      text: "Accessibility Tooltip",
+      position: "top",
+      children: /* @__PURE__ */ o("button", { children: "Hover me" })
+    }).axe();
+  });
+});

package/dist/utilities.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns a safe for url string representation.
+ *
+ * @param value - The string to be transformed
+ * @returns A string that can be used as slug
+ *
+ */
+export declare function slugify(value?: string): string | undefined;
+export declare function generateRandomId(): string;

package/dist/utilities.js

@@ -0,0 +1,13 @@
+function l(r) {
+  if (!r)
+    return r;
+  let e = r.replaceAll(/^\s+|\s+$/g, "");
+  return e = e.toLowerCase(), e = e.replaceAll(/[^\d a-z-]/g, "").replaceAll(/\s+/g, "-").replaceAll(/-+/g, "-"), e;
+}
+function t() {
+  return Math.random().toString(36).slice(2, 11);
+}
+export {
+  t as generateRandomId,
+  l as slugify
+};

package/dist/utils/utilities.d.ts

@@ -0,0 +1,24 @@
+import { BreakpointType } from '../hooks/use-breakpoint.js';
+type DisplayPage = number | -1 | -2;
+/**
+ * Helper function to generate an array of page numbers and ellipses for pagination.
+ *
+ * This function is used to generate a compact pagination display that includes page numbers and ellipsis placeholders
+ * based on the active page (`currentPage`), total number of pages (`totalPages`), and the screen size breakpoint.
+ * When the `breakpoint` is small (`SM` or `MD`), the function limits the displayed pages to a simplified view.
+ * When the breakpoint is larger, it displays a wider range of pages around the `currentPage`.
+ *
+ * @param {number} currentPage - The currently active page number in the pagination.
+ * @param {number} totalPages - The total number of pages in the pagination.
+ * @param {Breakpoint} breakpoint - The screen size breakpoint, which determines the range of displayed pages.
+ *
+ * @returns {DisplayPage[]} - An array representing pages to be displayed, where:
+ *   - Positive numbers represent actual page numbers.
+ *   - `-1` and `-2` are placeholders for ellipses ('...') indicating a range of hidden pages.
+ *
+ * Examples:
+ * - For `currentPage = 3`, `totalPages = 100`, and `breakpoint = SM`, the output would be `[1, -1, 3, -2, 100]`.
+ * - For `currentPage = 3`, `totalPages = 3`, and `breakpoint = SM`, the output would be `[1, 2, 3]`.
+ */
+export declare const getDisplayPages: (currentPage: number, totalPages: number, breakpoint: BreakpointType) => DisplayPage[];
+export {};

package/dist/utils/utilities.js

@@ -0,0 +1,20 @@
+import { Breakpoint as u } from "../hooks/use-breakpoint.js";
+const x = (p, f, d) => {
+  if (d === u.Small || d === u.Medium) {
+    const i = [];
+    if (f <= 3) {
+      for (let s = 1; s <= f; s++)
+        i.push(s);
+      return i;
+    }
+    return i.push(1), p > 2 && i.push(-1), p > 1 && p < f && i.push(p), p < f - 1 && i.push(-2), f > 1 && i.push(f), i;
+  }
+  const h = [];
+  p > 3 && h.push(1), p > 4 && h.push(-1);
+  for (let i = p - 2; i <= p + 2; i++)
+    i >= 1 && i <= f && h.push(i);
+  return p < f - 3 && h.push(-2), p < f - 2 && h.push(f), h;
+};
+export {
+  x as getDisplayPages
+};

package/dist/utils/utilities.test.d.ts

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

package/dist/utils/utilities.test.js

@@ -0,0 +1,79 @@
+import { Breakpoint as e } from "../hooks/use-breakpoint.js";
+import { getDisplayPages as a } from "./utilities.js";
+describe("getDisplayPages", () => {
+  it("should return all pages for small screens when totalPages is less than or equal to 3", () => {
+    expect(a(1, 3, e.Small)).toEqual([1, 2, 3]), expect(a(2, 3, e.Small)).toEqual([1, 2, 3]);
+  }), it("should return [1, -2, totalPages] when on first page for small screens and large totalPages", () => {
+    expect(a(1, 10, e.Small)).toEqual([1, -2, 10]);
+  }), it("should return [1, currentPage, -2, totalPages] when currentPage is near start for small screens", () => {
+    expect(a(2, 10, e.Small)).toEqual([1, 2, -2, 10]), expect(a(3, 100, e.Small)).toEqual([
+      1,
+      -1,
+      3,
+      -2,
+      100
+    ]);
+  }), it("should return [1, -1, currentPage, -2, totalPages] when currentPage is in the middle for small screens", () => {
+    expect(a(5, 10, e.Small)).toEqual([
+      1,
+      -1,
+      5,
+      -2,
+      10
+    ]), expect(a(7, 10, e.Small)).toEqual([
+      1,
+      -1,
+      7,
+      -2,
+      10
+    ]);
+  }), it("should return [1, -1, totalPages-1, totalPages] when currentPage is near end for small screens", () => {
+    expect(a(9, 10, e.Small)).toEqual([1, -1, 9, 10]), expect(a(10, 10, e.Small)).toEqual([1, -1, 10]);
+  }), it("should return wider range of pages with ellipses for large screens", () => {
+    expect(a(5, 10, e.Large)).toEqual([
+      1,
+      -1,
+      3,
+      4,
+      5,
+      6,
+      7,
+      -2,
+      10
+    ]), expect(a(1, 10, e.Large)).toEqual([1, 2, 3, -2, 10]), expect(a(10, 10, e.Large)).toEqual([
+      1,
+      -1,
+      8,
+      9,
+      10
+    ]);
+  }), it("should handle edge case of currentPage being the only page", () => {
+    expect(a(1, 1, e.Small)).toEqual([1]), expect(a(1, 1, e.Large)).toEqual([1]);
+  }), it("should handle case where currentPage is at extreme start and end for larger screens", () => {
+    expect(a(1, 100, e.Large)).toEqual([
+      1,
+      2,
+      3,
+      -2,
+      100
+    ]), expect(a(100, 100, e.Large)).toEqual([
+      1,
+      -1,
+      98,
+      99,
+      100
+    ]);
+  }), it("should handle large number of pages with currentPage in the middle on large screens", () => {
+    expect(a(50, 100, e.Large)).toEqual([
+      1,
+      -1,
+      48,
+      49,
+      50,
+      51,
+      52,
+      -2,
+      100
+    ]);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogcio/design-system-react",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "description": "The GOV IE design system React components.",
   "type": "module",
   "main": "dist/index.js",
@@ -52,9 +52,9 @@
     "react-dom": "19.0.0",
     "@ogcio/design-system-eslint-config": "1.2.5",
     "@ogcio/design-system-prettier-config": "1.0.5",
-    "@ogcio/design-system-tailwind": "1.10.1",
     "@ogcio/theme-doete": "1.0.0",
-    "@ogcio/theme-govie": "1.5.1"
+    "@ogcio/design-system-tailwind": "1.10.2",
+    "@ogcio/theme-govie": "1.5.2"
   },
   "scripts": {
     "format": "prettier 'src/**/*.{ts,tsx}' --write",