@ogcio/design-system-react 1.11.1 → 1.11.2

package/dist/list/list.test.js

@@ -0,0 +1,67 @@
+import { jsx as c } from "react/jsx-runtime";
+import { Link as r } from "../link/link.js";
+import { c as a, r as h } from "../test-utilities-BS7B3BF-.js";
+import { List as p, ListTypeEnum as n } from "./list.js";
+describe("govieList", () => {
+  afterEach(a);
+  const i = (t) => h(/* @__PURE__ */ c(p, { ...t, "data-testid": "govieList" }));
+  it("should render a list correctly with items", () => {
+    const t = ["Item 1", "Item 2", "Item 3", "Item 4"], s = i({
+      items: t
+    }), e = s.getByRole("list");
+    for (const o of t)
+      expect(s.getByText(o)).toBeInTheDocument();
+    expect(e).toBeInTheDocument();
+  }), it("should render a list of links correctly", () => {
+    const t = [/* @__PURE__ */ c(r, { href: "#", children: "Link 1" }), /* @__PURE__ */ c(r, { href: "#", children: "Link 2" })], s = i({
+      items: t
+    }), e = s.getByRole("list"), o = s.getAllByRole("link");
+    for (const l of o) {
+      const m = l.getAttribute("href");
+      expect(m).toEqual("#");
+    }
+    expect(o.length).toBe(t.length), expect(e).toBeInTheDocument();
+  }), it('should have correct className for default type "normal"', () => {
+    const e = i({
+      items: ["Item 1", "Item 2", "Item 3", "Item 4"]
+    }).getByTestId("govieList");
+    expect(e.classList.contains("gi-list")).toBe(!0);
+  }), it('should have correct className when type is "number"', () => {
+    const e = i({
+      items: ["Item 1", "Item 2", "Item 3", "Item 4"],
+      type: n.Number
+    }).getByTestId("govieList");
+    expect(e.classList.contains("gi-list-number")).toBe(!0);
+  }), it('should have correct className when type is "bullet"', () => {
+    const e = i({
+      items: ["Item 1", "Item 2", "Item 3", "Item 4"],
+      type: n.Bullet
+    }).getByTestId("govieList");
+    expect(e.classList.contains("gi-list-bullet")).toBe(!0);
+  }), it('should have correct className when type is "none"', () => {
+    const e = i({
+      items: ["Item 1", "Item 2", "Item 3", "Item 4"],
+      type: n.None
+    }).getByTestId("govieList");
+    expect(e.classList.contains("gi-list")).toBe(!0);
+  }), it('should have correct className when is "spaced"', () => {
+    const e = i({
+      items: ["Item 1", "Item 2", "Item 3", "Item 4"],
+      spaced: !0
+    }).getByTestId("govieList");
+    expect(e.classList.contains("gi-list-spaced")).toBe(!0);
+  }), it('should have correct "spaced" class combined with the "type" class', () => {
+    const e = i({
+      items: ["Item 1", "Item 2", "Item 3", "Item 4"],
+      spaced: !0,
+      type: n.Bullet
+    }).getByTestId("govieList");
+    expect(e.classList.contains("gi-list-spaced")).toBe(!0), expect(e.classList.contains("gi-list-bullet")).toBe(!0);
+  }), it("should pass axe accessibility tests", async () => {
+    await i({
+      items: [/* @__PURE__ */ c(r, { href: "#", children: "Link 1" }), /* @__PURE__ */ c(r, { href: "#", children: "Link 2" })],
+      spaced: !0,
+      type: n.Number
+    }).axe();
+  });
+});

package/dist/list-item/list-item.d.ts

@@ -0,0 +1,9 @@
+export type ListItemProps = {
+    label?: string;
+    action?: () => void;
+    href?: string;
+    external?: boolean;
+    bold?: boolean;
+    slot?: React.ReactNode;
+};
+export declare function ListItem({ label, href, external, bold, slot }: ListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/list-item/list-item.js

@@ -0,0 +1,19 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as n } from "../cn.js";
+import s from "../primitives/anchor.js";
+function f({ label: i, href: t, external: o, bold: e, slot: r }) {
+  return /* @__PURE__ */ m(
+    s,
+    {
+      "aria-label": i,
+      href: t,
+      className: n("gi-list-item", { "gi-font-bold": e }),
+      external: o,
+      asChild: !!r,
+      children: r || /* @__PURE__ */ m("span", { className: "gi-text-sm gi-ml-1", children: i })
+    }
+  );
+}
+export {
+  f as ListItem
+};

package/dist/modal/modal.content.d.ts

@@ -0,0 +1,2 @@
+export declare const HtmlContent: import("react/jsx-runtime").JSX.Element;
+export declare const TriggerButton: import("react/jsx-runtime").JSX.Element;

package/dist/modal/modal.content.js

@@ -0,0 +1,19 @@
+import { jsxs as i, Fragment as r, jsx as t } from "react/jsx-runtime";
+import { Button as o } from "../button/button.js";
+import { ModalTitle as e, ModalBody as a, ModalFooter as n } from "./modal.js";
+const c = /* @__PURE__ */ i(r, { children: [
+  /* @__PURE__ */ t(e, { children: "Modal Title" }),
+  /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t("p", { className: "gi-paragraph-md", children: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam molestias error accusantium non nobis excepturi doloremque dolorem possimus corrupti. Nostrum quisquam est voluptate! Iure suscipit, commodi cupiditate sit minima veritatis." }) }),
+  /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(o, { children: "Primary" }) })
+] }), d = /* @__PURE__ */ t(
+  "button",
+  {
+    "data-testid": "trigger-button-container",
+    className: "gi-btn gi-btn-primary gi-btn-regular",
+    children: "Open Modal"
+  }
+);
+export {
+  c as HtmlContent,
+  d as TriggerButton
+};

package/dist/modal/modal.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { HeadingProps } from '../heading/heading.js';
+import { ModalFooterProps, ModalProps, ModalWrapperProps } from './types.js';
+export declare const ModalWrapper: ({ position, size, closeOnClick, closeOnOverlayClick, isOpen, onClose, closeButtonLabel, className, children, closeButtonSize, dataTestId, ...props }: ModalWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalTitle: ({ children, as, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalBody: ({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalFooter: ({ className, children, orientation, dataModalSize, }: ModalFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ children, triggerButton, startsOpen, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/modal/modal.js

@@ -0,0 +1,222 @@
+"use client";
+import { jsx as r, jsxs as p, Fragment as T } from "react/jsx-runtime";
+import { Children as x, cloneElement as f, isValidElement as k, useState as F } from "react";
+import { Button as A } from "../button/button.js";
+import { cn as s } from "../cn.js";
+import { Heading as I } from "../heading/heading.js";
+import { Icon as E } from "../icon/icon.js";
+import { IconButton as R } from "../icon-button/icon-button.js";
+const v = (e, a, t) => {
+  var i;
+  return k(t) ? t.type === e || ((i = t == null ? void 0 : t._owner) == null ? void 0 : i.name) === a : !1;
+}, B = {
+  flat: 0,
+  secondary: 1,
+  primary: 2
+}, O = ({
+  label: e,
+  size: a = "small",
+  ...t
+}) => {
+  let n = "sm";
+  return (a === "large" || a === "medium") && (n = "md"), e ? /* @__PURE__ */ r(
+    A,
+    {
+      onClick: t.onClick,
+      variant: "flat",
+      size: a,
+      appearance: "dark",
+      className: "gi-modal-icon",
+      "aria-label": e,
+      ...t,
+      children: /* @__PURE__ */ p(T, { children: [
+        e,
+        /* @__PURE__ */ r(E, { icon: "close", size: n })
+      ] })
+    }
+  ) : /* @__PURE__ */ r(
+    R,
+    {
+      className: "gi-modal-icon",
+      icon: {
+        icon: "close"
+      },
+      "aria-label": "Close modal",
+      onClick: t.onClick,
+      variant: "flat",
+      size: a,
+      appearance: "dark",
+      ...t
+    }
+  );
+}, V = ({
+  position: e = "center",
+  size: a = "lg",
+  closeOnClick: t = !0,
+  closeOnOverlayClick: n = !0,
+  isOpen: i,
+  onClose: c,
+  closeButtonLabel: d,
+  className: m,
+  children: o,
+  closeButtonSize: g,
+  dataTestId: u,
+  ...y
+}) => {
+  const h = x.toArray(o), C = h.find(
+    (l) => v(M, "ModalTitle", l)
+  ), N = h.find(
+    (l) => v(_, "ModalFooter", l)
+  ), b = C ? f(C, {
+    as: a === "sm" ? "h5" : "h4"
+  }) : null, j = h.map(
+    (l) => N ? f(l, {
+      dataModalSize: a
+    }) : l
+  ).filter((l) => !v(M, "ModalTitle", l));
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ...y,
+      className: s("gi-modal", {
+        "gi-modal-open": i,
+        "gi-modal-close": !i
+      }),
+      "data-testid": u || "modal",
+      "data-element": "modal",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-describedby": "gi-modal-body",
+      onClick: (l) => {
+        l.target.dataset.element === "modal" && t && n && c();
+      },
+      children: /* @__PURE__ */ p(
+        "div",
+        {
+          "data-testid": "modal-container",
+          "data-size": a,
+          "data-position": e,
+          className: s(
+            "gi-modal-container-control",
+            {
+              "gi-modal-container": !m,
+              "gi-modal-container-center": e === "center",
+              "gi-modal-container-left": e === "left",
+              "gi-modal-container-right": e === "right",
+              "gi-modal-container-bottom": e === "bottom"
+            },
+            m
+          ),
+          children: [
+            /* @__PURE__ */ p("div", { children: [
+              b,
+              t && /* @__PURE__ */ r(
+                O,
+                {
+                  onClick: c,
+                  label: d,
+                  size: g
+                }
+              )
+            ] }),
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: s({
+                  "gi-pb-6": !N
+                }),
+                children: j
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, M = ({ children: e, as: a = "h4", ...t }) => /* @__PURE__ */ r("div", { className: "gi-flex-1", id: "gi-modal-title", children: /* @__PURE__ */ r(I, { as: a, ...t, children: e }) }), J = ({
+  children: e,
+  className: a
+}) => /* @__PURE__ */ r(
+  "div",
+  {
+    id: "gi-modal-body",
+    className: s(
+      {
+        "gi-modal-body": !a
+      },
+      a
+    ),
+    children: e
+  }
+), _ = ({
+  className: e,
+  children: a,
+  orientation: t,
+  dataModalSize: n
+}) => {
+  const d = (Array.isArray(a) ? a : [a]).filter(
+    (o) => k(o) && o.type === A
+  ).sort((o, g) => {
+    const u = o.props.variant ?? "primary", y = g.props.variant ?? "primary";
+    return (B[u] || 0) - (B[y] || 0);
+  }), m = s({
+    "gi-justify-center sm:gi-justify-start": !t && n !== "sm",
+    "gi-justify-center": t === "vertical" || n === "sm",
+    "gi-justify-start": t === "horizontal"
+  });
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: s(e, {
+        "gi-pt-6": d.length === 0,
+        "gi-modal-footer": d.length
+      }),
+      children: d.length > 0 && /* @__PURE__ */ r(
+        "div",
+        {
+          "data-orientation": t || "unset",
+          "data-modal-size": n,
+          children: d.map(
+            (o) => {
+              var g;
+              return f(o, {
+                className: s((g = o == null ? void 0 : o.props) == null ? void 0 : g.className, m)
+              });
+            }
+          ) || null
+        }
+      )
+    }
+  );
+}, K = ({
+  children: e,
+  triggerButton: a,
+  startsOpen: t,
+  ...n
+}) => {
+  const [i, c] = F(!!t), d = () => c(!0), m = () => c(!1), o = f(a, {
+    "data-testid": "modal-trigger-button-container",
+    "aria-haspopup": "dialog",
+    onClick: d
+  });
+  return /* @__PURE__ */ p(T, { children: [
+    o,
+    /* @__PURE__ */ r(
+      V,
+      {
+        onClose: m,
+        position: "center",
+        isOpen: i,
+        ...n,
+        children: e
+      }
+    )
+  ] });
+};
+export {
+  K as Modal,
+  J as ModalBody,
+  _ as ModalFooter,
+  M as ModalTitle,
+  V as ModalWrapper
+};

package/dist/modal/modal.test.d.ts

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

package/dist/modal/modal.test.js

@@ -0,0 +1,81 @@
+import { jsx as a, Fragment as m, jsxs as g } from "react/jsx-runtime";
+import { act as d } from "react";
+import { Button as i } from "../button/button.js";
+import { c as u, w as c, r as B } from "../test-utilities-BS7B3BF-.js";
+import { HtmlContent as s, TriggerButton as r } from "./modal.content.js";
+import { Modal as p, ModalFooter as y } from "./modal.js";
+describe("modal", () => {
+  afterEach(u);
+  const n = (t) => B(/* @__PURE__ */ a(p, { ...t }));
+  it("should render the modal on load if startsOpen is true", () => {
+    const t = n({
+      children: s,
+      triggerButton: r,
+      startsOpen: !0
+    }), o = t.getByTestId("modal"), e = t.getByTestId("modal-container");
+    expect(o.classList.contains("gi-modal-open")).toBe(!0), expect(e).toBeTruthy();
+  }), it("should open the modal on button trigger", async () => {
+    const t = n({
+      children: s,
+      triggerButton: r
+    });
+    t.getByTestId(
+      "modal-trigger-button-container"
+    ).click(), await c(() => {
+      const e = t.getByTestId("modal");
+      expect(e.classList.contains("gi-modal-open")).toBe(!0);
+    });
+  }), it("should close the modal on icon click", async () => {
+    const t = n({
+      children: s,
+      triggerButton: r
+    }), o = t.getByTestId("modal"), e = t.getByTestId(
+      "modal-trigger-button-container"
+    );
+    expect(o.classList.contains("gi-modal-open")).toBe(!1), await d(async () => {
+      e.click();
+    }), await c(() => {
+      expect(o.classList.contains("gi-modal-open")).toBe(!0);
+    });
+    const l = t.getByTestId("modal-container").querySelector(".gi-modal-icon");
+    expect(l).toBeVisible(), await d(async () => {
+      l.click();
+    });
+  }), it("should close the modal on overlay click", async () => {
+    const t = n({
+      children: s,
+      triggerButton: r
+    });
+    t.getByTestId(
+      "modal-trigger-button-container"
+    ).click(), await c(() => {
+      const e = t.getByTestId("modal");
+      expect(e.classList.contains("gi-modal-open")).toBe(!0), e.click();
+    }), await c(() => {
+      const e = t.getByTestId("modal");
+      expect(e.classList.contains("gi-modal-open")).toBe(!1);
+    });
+  }), it("should render modal footer buttons in correct order", async () => {
+    const t = n({
+      dataTestId: "modal-footer",
+      children: /* @__PURE__ */ a(m, { children: /* @__PURE__ */ g(y, { children: [
+        /* @__PURE__ */ a(i, { variant: "flat", children: "Help" }),
+        /* @__PURE__ */ a(i, { variant: "secondary", children: "Cancel" }),
+        /* @__PURE__ */ a(i, { variant: "primary", children: "Save" })
+      ] }) }),
+      triggerButton: r,
+      startsOpen: !0
+    });
+    t.getByTestId(
+      "modal-trigger-button-container"
+    ).click(), await c(() => {
+      const e = t.getByTestId("modal-footer").querySelectorAll("button");
+      expect(e).toHaveLength(4), expect(e[0].textContent).toBe("close"), expect(e[1].textContent).toBe("Help"), expect(e[2].textContent).toBe("Cancel"), expect(e[3].textContent).toBe("Save");
+    });
+  }), it("should pass axe accessibility tests", async () => {
+    await n({
+      children: s,
+      triggerButton: r
+    }).axe();
+  });
+});

package/dist/modal/types.d.ts

@@ -0,0 +1,39 @@
+import { ReactElement } from 'react';
+import { ButtonProps, ButtonSize, ButtonVariant } from '../button/types.js';
+import { IconButtonProps } from '../icon-button/icon-button.js';
+import { ModalBody, ModalFooter, ModalTitle } from './modal.js';
+export type ModalPositions = 'center' | 'left' | 'right' | 'bottom';
+export type ModalFooterOrientation = 'vertical' | 'horizontal';
+export type ModalChildren = Array<ReactElement<typeof ModalTitle | typeof ModalBody | typeof ModalFooter>> | ReactElement<typeof ModalTitle | typeof ModalBody | typeof ModalFooter>;
+export type ModalWrapperProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    position?: ModalPositions;
+    closeButtonSize?: ButtonSize;
+} & Omit<ModalProps, 'triggerButton'>;
+export type ModalSize = 'sm' | 'md' | 'lg';
+export type ModalProps = React.AriaAttributes & {
+    className?: string;
+    closeButtonLabel?: string;
+    triggerButton: React.ReactElement;
+    children: ModalChildren;
+    startsOpen?: boolean;
+    closeOnClick?: boolean;
+    closeOnOverlayClick?: boolean;
+    dataTestId?: string;
+    size?: ModalSize;
+};
+export type ModalCloseButtonProps = {
+    label?: string;
+} & Omit<IconButtonProps, 'className' | 'icon' | 'variant' | 'appearance'>;
+export type ModalFooterButton = {
+    label: string;
+    variant: ButtonVariant;
+} & ButtonProps;
+export type ModalFooterProps = {
+    className?: string;
+    orientation?: ModalFooterOrientation;
+    dataTestId?: string;
+    dataModalSize?: ModalSize;
+    children: React.ReactElement<ButtonProps> | React.ReactElement<ButtonProps>[];
+};

package/dist/modal/types.js

@@ -0,0 +1 @@
+

package/dist/pagination/pagination.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export type PaginationProps = {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    dataTestid?: string;
+};
+export declare const Pagination: React.FC<PaginationProps>;

package/dist/pagination/pagination.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import d, { useState as V, useEffect as T } from "react";
+import { Button as c } from "../button/button.js";
+import { useBreakpoint as _, Breakpoint as u } from "../hooks/use-breakpoint.js";
+import { translate as t } from "../i18n/utility.js";
+import { Icon as m } from "../icon/icon.js";
+import { getDisplayPages as g } from "../utils/utilities.js";
+const R = ({
+  currentPage: a,
+  totalPages: n,
+  onPageChange: l,
+  dataTestid: b
+}) => {
+  if (n === 0)
+    return null;
+  const { breakpoint: r, width: f } = _(), [s, v] = V(!1);
+  T(() => {
+    v(!0);
+  }, []);
+  const x = s && r === u.ExtraSmall, o = s && f !== null && f < 639, h = () => (s && r ? g(a, n, r) : g(a, n, u.Large)).map(
+    (e, N) => e === -1 || e === -2 ? /* @__PURE__ */ i(d.Fragment, { children: /* @__PURE__ */ i(
+      m,
+      {
+        role: "presentation",
+        className: "gi-text-gray-700",
+        icon: "more_horiz"
+      }
+    ) }, `ellipsis-${N}`) : /* @__PURE__ */ i(
+      c,
+      {
+        variant: e === a ? "primary" : "flat",
+        size: "large",
+        appearance: "dark",
+        onClick: () => l(e),
+        "aria-label": t("pagination.goToPage", {
+          page: e,
+          defaultValue: `Go to page ${e}`
+        }),
+        children: e
+      },
+      e
+    )
+  ), k = () => /* @__PURE__ */ i("span", { className: "gi-text-md", "aria-live": "polite", children: /* @__PURE__ */ i("span", { className: "gi-font-bold", children: t("pagination.page", {
+    currentPage: a,
+    totalPages: n,
+    defaultValue: `Page ${a} of ${n}`
+  }) }) });
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: "gi-pagination",
+      role: "navigation",
+      "aria-label": t("pagination.page", {
+        currentPage: a,
+        totalPages: n,
+        defaultValue: `Page ${a} of ${n}`
+      }),
+      "data-testid": b,
+      children: [
+        /* @__PURE__ */ p(
+          c,
+          {
+            variant: "flat",
+            size: "large",
+            appearance: "dark",
+            disabled: a === 1,
+            onClick: () => l(a - 1),
+            "aria-label": t("pagination.goToPrevious", {
+              defaultValue: "Go to previous"
+            }),
+            className: o ? "gi-icon-btn-large" : "",
+            dataTestid: "govie-pagination-prev-btn",
+            children: [
+              /* @__PURE__ */ i(d.Fragment, { children: /* @__PURE__ */ i(m, { icon: "arrow_left_alt" }) }, "previous-btn-pagination"),
+              !o && t("pagination.previous", { defaultValue: "Previous" })
+            ]
+          }
+        ),
+        x ? k() : h(),
+        /* @__PURE__ */ p(
+          c,
+          {
+            disabled: a === n,
+            variant: "flat",
+            size: "large",
+            appearance: "dark",
+            onClick: () => l(a + 1),
+            "aria-label": t("pagination.goToNext", { defaultValue: "Go to next" }),
+            className: o ? "gi-icon-btn-large" : "",
+            dataTestid: "govie-pagination-next-btn",
+            children: [
+              !o && t("pagination.next", { defaultValue: "Next" }),
+              /* @__PURE__ */ i(d.Fragment, { children: /* @__PURE__ */ i(m, { icon: "arrow_right_alt" }) }, "next-btn-pagination")
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  R as Pagination
+};

package/dist/pagination/pagination.test.d.ts

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