@ogcio/design-system-react 1.11.0 → 1.11.2

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export type AccordionItemProps = {
+    children: React.ReactNode;
+    label: string;
+    defaultExpanded?: boolean;
+    disabled?: boolean;
+    dataTestid?: string;
+    iconStart?: boolean;
+    variant?: 'default' | 'small';
+};
+export declare const AccordionItem: ({ defaultExpanded, children, label, disabled, dataTestid, iconStart, variant, }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/accordion/accordion-item.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsxs as d, Fragment as u, jsx as i } from "react/jsx-runtime";
+import { useState as y, useRef as b } from "react";
+import { c as h } from "../index-DNkhmzZp.js";
+import { cn as r } from "../cn.js";
+import { Icon as w } from "../icon/icon.js";
+const I = h({
+  variants: {
+    variant: {
+      default: "gi-px-2 gi-py-4 gi-text-md gi-font-bold",
+      small: "gi-py-2 gi-px-2 gi-text-sm gi-font-bold"
+    }
+  }
+}), N = ({
+  defaultExpanded: c,
+  children: s,
+  label: t,
+  disabled: e,
+  dataTestid: l,
+  iconStart: m,
+  variant: n = "default"
+}) => {
+  const [o, a] = y(c), g = b(null), p = `${t}-button`, f = `${t}-panel`;
+  return /* @__PURE__ */ d(u, { children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        ref: g,
+        "data-testid": l,
+        "data-disabled": !!e,
+        "data-icon-start": !!m,
+        onClick: () => !e && a(!o),
+        onKeyDown: (x) => {
+          x.key === "Enter" && !e && a(!o);
+        },
+        "aria-expanded": o,
+        tabIndex: 0,
+        className: "gi-accordion",
+        children: /* @__PURE__ */ d(
+          "div",
+          {
+            className: r("gi-accordion-header", I({ variant: n })),
+            children: [
+              t,
+              " ",
+              /* @__PURE__ */ i(
+                w,
+                {
+                  icon: o ? "keyboard_arrow_up" : "keyboard_arrow_down"
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        id: f,
+        role: "region",
+        "aria-labelledby": p,
+        className: r("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
+          "gi-block": o,
+          "gi-hidden": !o,
+          "gi-text-md": n === "default",
+          "gi-text-sm": n === "small"
+        }),
+        children: s
+      }
+    )
+  ] });
+};
+export {
+  N as AccordionItem
+};

package/dist/accordion/accordion.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { AccordionItem } from './accordion-item.js';
+export type AccordionProps = {
+    children: ReactElement<typeof AccordionItem>[];
+    iconStart?: boolean;
+    dataTestid?: string;
+    className?: string;
+    variant?: 'default' | 'small';
+};
+export declare const Accordion: ({ children, iconStart, dataTestid, className, variant, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/accordion/accordion.js

@@ -0,0 +1,39 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Children as i, isValidElement as c, cloneElement as p } from "react";
+import { cn as n } from "../cn.js";
+const g = ({
+  children: r,
+  iconStart: t,
+  dataTestid: l,
+  className: a,
+  variant: s = "default"
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    "data-testid": l,
+    "data-icon-start": t,
+    role: "presentation",
+    className: n("gi-w-full", a),
+    children: i.map(r, (e, d) => {
+      const m = d === i.count(r) - 1;
+      return c(e) ? /* @__PURE__ */ o(
+        "div",
+        {
+          className: n("gi-border-t", {
+            "gi-border-b": m
+          }),
+          children: p(
+            e,
+            {
+              variant: s,
+              iconStart: t
+            }
+          )
+        }
+      ) : null;
+    })
+  }
+);
+export {
+  g as Accordion
+};

package/dist/accordion/accordion.test.d.ts

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

package/dist/accordion/accordion.test.js

@@ -0,0 +1,61 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { c as h, r as o, f as a } from "../test-utilities-BS7B3BF-.js";
+import { AccordionItem as n } from "./accordion-item.js";
+import { Accordion as r } from "./accordion.js";
+describe("govieAccordion", () => {
+  afterEach(h), it("should render accordion with all items", () => {
+    const { getByText: t } = o(
+      /* @__PURE__ */ l(r, { children: [
+        /* @__PURE__ */ l(n, { label: "Label1", children: [
+          /* @__PURE__ */ e("h1", { children: "This is the content Heading 1" }),
+          /* @__PURE__ */ e("p", { children: "This is a content paragraph paragraph 1" })
+        ] }),
+        /* @__PURE__ */ l(n, { label: "Label2", children: [
+          /* @__PURE__ */ e("h1", { children: "This is the content Heading 2" }),
+          /* @__PURE__ */ e("p", { children: "This is a content paragraph paragraph 2" })
+        ] })
+      ] })
+    );
+    expect(t("Label1")).toBeInTheDocument(), expect(t("Label2")).toBeInTheDocument();
+  }), it("should toggle accordion item visibility when clicked", () => {
+    const { getByText: t, queryByText: i } = o(
+      /* @__PURE__ */ l(r, { children: [
+        /* @__PURE__ */ e(n, { label: "Label1", children: /* @__PURE__ */ e("p", { children: "This is the content for Label1" }) }),
+        /* @__PURE__ */ e(n, { label: "Label2", children: /* @__PURE__ */ e("p", { children: "This is the content for Label2" }) })
+      ] })
+    ), c = t("Label1");
+    expect(i("This is the content for Label1")).not.toBeVisible(), a.click(c), expect(i("This is the content for Label1")).toBeVisible(), a.click(c), expect(i("This is the content for Label1")).not.toBeVisible();
+  }), it("should not toggle disabled accordion item", () => {
+    const { getByText: t, queryByText: i } = o(
+      /* @__PURE__ */ l(r, { children: [
+        /* @__PURE__ */ e(n, { label: "Label1", disabled: !0, children: /* @__PURE__ */ e("p", { children: "This is the content for Label1" }) }),
+        /* @__PURE__ */ e(n, { label: "Label2", children: /* @__PURE__ */ e("p", { children: "This is the content for Label2" }) })
+      ] })
+    ), c = t("Label1");
+    expect(i("This is the content for Label1")).not.toBeVisible(), a.click(c), expect(i("This is the content for Label1")).not.toBeVisible();
+  }), it("should render accordion items with defaultExpanded set to true", () => {
+    const { getByText: t } = o(
+      /* @__PURE__ */ l(r, { children: [
+        /* @__PURE__ */ e(n, { label: "Label1", defaultExpanded: !0, children: /* @__PURE__ */ e("p", { children: "This is the content for Label1" }) }),
+        /* @__PURE__ */ e(n, { label: "Label2", children: /* @__PURE__ */ e("p", { children: "This is the content for Label2" }) })
+      ] })
+    );
+    expect(t("This is the content for Label1")).toBeVisible();
+  }), it("should apply iconStart styling when iconStart is true", () => {
+    const { container: t } = o(
+      /* @__PURE__ */ l(r, { iconStart: !0, children: [
+        /* @__PURE__ */ e(n, { label: "Label1", children: /* @__PURE__ */ e("p", { children: "This is the content for Label1" }) }),
+        /* @__PURE__ */ e(n, { label: "Label2", children: /* @__PURE__ */ e("p", { children: "This is the content for Label2" }) })
+      ] })
+    ), i = t.querySelector(".gi-accordion"), c = i == null ? void 0 : i.getAttribute("data-icon-start");
+    expect(c).toBe("true");
+  }), it("should not apply iconStart styling when iconStart is false", () => {
+    const { container: t } = o(
+      /* @__PURE__ */ l(r, { children: [
+        /* @__PURE__ */ e(n, { label: "Label1", children: /* @__PURE__ */ e("p", { children: "This is the content for Label1" }) }),
+        /* @__PURE__ */ e(n, { label: "Label2", children: /* @__PURE__ */ e("p", { children: "This is the content for Label2" }) })
+      ] })
+    ), i = t.querySelector("div.gi-flex-row-reverse");
+    expect(i).not.toBeInTheDocument();
+  });
+});

package/dist/alert/alert.d.ts

@@ -0,0 +1,89 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const alertVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+            baseDismissible: string;
+        };
+        danger: {
+            base: string;
+            baseDismissible: string;
+        };
+        success: {
+            base: string;
+            baseDismissible: string;
+        };
+        warning: {
+            base: string;
+            baseDismissible: string;
+        };
+    };
+}, {
+    base: string;
+    baseDismissible: string;
+    container: string;
+    heading: string;
+    dismiss: string;
+}, undefined, TVConfig<V, EV>, {
+    variant: {
+        info: {
+            base: string;
+            baseDismissible: string;
+        };
+        danger: {
+            base: string;
+            baseDismissible: string;
+        };
+        success: {
+            base: string;
+            baseDismissible: string;
+        };
+        warning: {
+            base: string;
+            baseDismissible: string;
+        };
+    };
+}, {
+    base: string;
+    baseDismissible: string;
+    container: string;
+    heading: string;
+    dismiss: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+            baseDismissible: string;
+        };
+        danger: {
+            base: string;
+            baseDismissible: string;
+        };
+        success: {
+            base: string;
+            baseDismissible: string;
+        };
+        warning: {
+            base: string;
+            baseDismissible: string;
+        };
+    };
+}, {
+    base: string;
+    baseDismissible: string;
+    container: string;
+    heading: string;
+    dismiss: string;
+}, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;
+type AlertProps = {
+    variant?: VariantProps<typeof alertVariants>['variant'];
+    title: string;
+    children?: ReactNode;
+    dismissible?: boolean;
+    dataTestid?: string;
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function Alert({ title, children, variant, dismissible, onClose, dataTestid, }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+export { Alert, alertVariants };
+export type { AlertProps };

package/dist/alert/alert.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useState as D } from "react";
+import { c as h } from "../index-DNkhmzZp.js";
+import { cn as v } from "../cn.js";
+import { translate as k } from "../i18n/utility.js";
+import { Icon as w } from "../icon/icon.js";
+import { IconButton as N } from "../icon-button/icon-button.js";
+const V = h({
+  slots: {
+    base: "gi-alert-base",
+    baseDismissible: "gi-alert-base-dismissible",
+    container: "gi-alert-container",
+    heading: "gi-alert-title",
+    dismiss: "gi-alert-dismiss"
+  },
+  variants: {
+    variant: {
+      info: {
+        base: "gi-alert-info",
+        baseDismissible: "gi-alert-info"
+      },
+      danger: {
+        base: "gi-alert-danger",
+        baseDismissible: "gi-alert-danger"
+      },
+      success: {
+        base: "gi-alert-success",
+        baseDismissible: "gi-alert-success"
+      },
+      warning: {
+        base: "gi-alert-warning",
+        baseDismissible: "gi-alert-success"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "info"
+  }
+}), x = ({ variant: e }) => {
+  let s;
+  switch (e) {
+    case "warning": {
+      s = "warning";
+      break;
+    }
+    case "success": {
+      s = "check_circle";
+      break;
+    }
+    case "danger": {
+      s = "error";
+      break;
+    }
+    default:
+      s = "info";
+  }
+  return s;
+};
+function _({
+  title: e,
+  children: s,
+  variant: i = "info",
+  dismissible: t,
+  onClose: a,
+  dataTestid: l
+}) {
+  const [c, o] = D(!1), { base: m, heading: d, container: b, dismiss: g, baseDismissible: f } = V({
+    variant: i
+  }), u = t ? f : m;
+  return c ? null : /* @__PURE__ */ n(
+    "div",
+    {
+      className: v(u(), "gi-not-prose"),
+      "data-testid": l,
+      role: "alert",
+      "aria-live": "assertive",
+      children: [
+        /* @__PURE__ */ r(
+          w,
+          {
+            icon: x({ variant: i }),
+            ariaHidden: !0,
+            className: "gi-alert-icon",
+            "data-variant": i
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: b(), children: [
+          /* @__PURE__ */ r("p", { className: d(), children: e }),
+          s
+        ] }),
+        t && /* @__PURE__ */ r(
+          N,
+          {
+            onClick: (p) => {
+              o(!0), a == null || a(p);
+            },
+            className: g(),
+            size: "small",
+            appearance: "dark",
+            variant: "flat",
+            icon: { icon: "close" },
+            "aria-label": k("alert.dismissAlert", {
+              defaultValue: "Dismiss alert"
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  _ as Alert,
+  V as alertVariants
+};

package/dist/alert/alert.test.d.ts

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

package/dist/alert/alert.test.js

@@ -0,0 +1,45 @@
+import { jsx as i } from "react/jsx-runtime";
+import { c as r, t as l, r as o } from "../test-utilities-BS7B3BF-.js";
+import { Alert as c } from "./alert.js";
+const a = [
+  "info",
+  "success",
+  "warning",
+  "danger"
+];
+describe("Alert", () => {
+  afterEach(r);
+  const t = (e) => o(/* @__PURE__ */ i(c, { ...e }));
+  l(
+    Reflect.ownKeys(a),
+    (e) => t({
+      variant: e,
+      title: "Information",
+      children: "This is an info alert"
+    })
+  ), it("should render alert with title and message", () => {
+    const e = t({
+      variant: "info",
+      title: "Information",
+      children: "This is an info alert",
+      dataTestid: "alert"
+    }), s = e.getByTestId("alert");
+    expect(s).toBeTruthy(), expect(e.getByText("Information")).toBeTruthy(), expect(e.getByText("This is an info alert")).toBeTruthy();
+  }), it("should render different variants", () => {
+    for (const e of a) {
+      const n = t({
+        variant: e,
+        title: `${e} alert`,
+        children: `This is a ${e} alert`,
+        dataTestid: "alert"
+      }).getByTestId("alert");
+      expect(n).toHaveClass(`gi-alert-${e}`), r();
+    }
+  }), it("should pass axe accessibility tests", async () => {
+    await t({
+      variant: "success",
+      title: "Accessible Alert",
+      children: "This alert should be accessible"
+    }).axe();
+  });
+});

package/dist/assets/logos/gov-of-ireland/harp-gold-text-green.d.ts

@@ -0,0 +1,2 @@
+declare function HarpGoldWithTextGreen(): import("react/jsx-runtime").JSX.Element;
+export default HarpGoldWithTextGreen;