@ogcio/design-system-react 1.11.1 → 1.11.2

package/dist/drawer/drawer.d.ts

@@ -0,0 +1,26 @@
+import { Fragment, ReactElement } from 'react';
+import { ButtonProps, ButtonSize } from '../button/types.js';
+import { ModalProps, ModalWrapperProps } from '../modal/types.js';
+type DrawerChildren = Array<ReactElement<typeof DrawerBody | typeof DrawerBody>> | ReactElement<typeof Fragment>;
+export type DrawerPosition = 'left' | 'right' | 'bottom';
+export type DrawerProps = Omit<ModalProps, 'closeOnClick' | 'closeOnOverlayClick' | 'size'> & {
+    position?: DrawerPosition;
+    closeButtonSize?: ButtonSize;
+    children: DrawerChildren;
+};
+type DrawerSectionProps = {
+    children: React.ReactElement<ButtonProps> | React.ReactElement<ButtonProps>[];
+    className?: string;
+};
+type DrawerBodySectionProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+export type DrawerWrapperProps = ModalWrapperProps & {
+    children: DrawerChildren;
+};
+export declare const DrawerWrapper: ({ children, className, ...props }: DrawerWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: ({ children, triggerButton, startsOpen, closeButtonLabel, position, className, closeButtonSize, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DrawerBody: ({ children, className }: DrawerBodySectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DrawerFooter: ({ children, className }: DrawerSectionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/drawer/drawer.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as r, jsxs as x, Fragment as y } from "react/jsx-runtime";
+import { useState as D, cloneElement as O } from "react";
+import { cn as n } from "../cn.js";
+import { ModalWrapper as F, ModalBody as M, ModalFooter as N } from "../modal/modal.js";
+const b = ({
+  children: o,
+  className: e,
+  ...s
+}) => /* @__PURE__ */ r(F, { className: n("gi-drawer-container", e), ...s, children: o }), S = ({
+  children: o,
+  triggerButton: e,
+  startsOpen: s,
+  closeButtonLabel: p,
+  position: i = "right",
+  className: m,
+  closeButtonSize: f
+}) => {
+  const [t, a] = D(!!s), w = () => a(!0), C = () => a(!1), h = O(e, {
+    "data-testid": "drawer-trigger-button-container",
+    onClick: (k) => {
+      var l, d;
+      const c = typeof ((l = e == null ? void 0 : e.props) == null ? void 0 : l.onClick) == "function" ? (d = e == null ? void 0 : e.props) == null ? void 0 : d.onClick : void 0;
+      c && c(k), w();
+    }
+  });
+  return /* @__PURE__ */ x(y, { children: [
+    h,
+    /* @__PURE__ */ r(
+      b,
+      {
+        children: o,
+        closeButtonLabel: p,
+        position: i,
+        className: m,
+        isOpen: t,
+        onClose: C,
+        closeButtonSize: f
+      }
+    )
+  ] });
+}, T = ({ children: o, className: e }) => /* @__PURE__ */ r(M, { className: n("gi-drawer-body", e), children: o }), q = ({ children: o, className: e }) => /* @__PURE__ */ r(N, { className: n("gi-drawer-footer", e), children: o });
+export {
+  S as Drawer,
+  T as DrawerBody,
+  q as DrawerFooter,
+  b as DrawerWrapper
+};

package/dist/drawer/drawer.test.d.ts

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

package/dist/drawer/drawer.test.js

@@ -0,0 +1,69 @@
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
+import { act as l } from "react";
+import { Button as g } from "../button/button.js";
+import { c as m, w as a, r as B } from "../test-utilities-BS7B3BF-.js";
+import { HtmlContent as n, TriggerButton as s } from "./drawer.content.js";
+import { Drawer as u, DrawerBody as p, DrawerFooter as w } from "./drawer.js";
+describe("drawer", () => {
+  afterEach(m);
+  const r = (t) => B(
+    /* @__PURE__ */ d(u, { ...t, children: [
+      /* @__PURE__ */ c(p, { children: "Here is the body content of the drawer." }),
+      /* @__PURE__ */ c(w, { children: /* @__PURE__ */ c(g, { children: "Close Drawer" }) })
+    ] })
+  );
+  it("should render the drawer on load if startsOpen is true", () => {
+    const t = r({
+      children: n,
+      triggerButton: s,
+      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 drawer on button trigger", async () => {
+    const t = r({
+      children: n,
+      triggerButton: s
+    });
+    t.getByTestId(
+      "drawer-trigger-button-container"
+    ).click(), await a(() => {
+      const e = t.getByTestId("modal");
+      expect(e.classList.contains("gi-modal-open")).toBe(!0);
+    });
+  }), it("should close the drawer on icon click", async () => {
+    const t = r({
+      children: n,
+      triggerButton: s
+    }), o = t.getByTestId("modal"), e = t.getByTestId(
+      "drawer-trigger-button-container"
+    );
+    expect(o.classList.contains("gi-modal-open")).toBe(!1), await l(async () => {
+      e.click();
+    }), await a(() => {
+      expect(o.classList.contains("gi-modal-open")).toBe(!0);
+    });
+    const i = t.getByTestId("modal-container").querySelector(".gi-modal-icon");
+    expect(i).toBeVisible(), await l(async () => {
+      i.click();
+    });
+  }), it("should close the drawer on overlay click", async () => {
+    const t = r({
+      children: n,
+      triggerButton: s
+    });
+    t.getByTestId(
+      "drawer-trigger-button-container"
+    ).click(), await a(() => {
+      const e = t.getByTestId("modal");
+      expect(e.classList.contains("gi-modal-open")).toBe(!0), e.click();
+    }), await a(() => {
+      const e = t.getByTestId("modal");
+      expect(e.classList.contains("gi-modal-open")).toBe(!1);
+    });
+  }), it("should pass axe accessibility tests", async () => {
+    await r({
+      children: n,
+      triggerButton: s
+    }).axe();
+  });
+});

package/dist/error-text/error-text.d.ts

@@ -0,0 +1,7 @@
+import { ErrorTextProps } from './types.js';
+export declare const ErrorSize: {
+    readonly Small: "sm";
+    readonly Medium: "md";
+    readonly Large: "lg";
+};
+export declare const ErrorText: React.FC<ErrorTextProps>;

package/dist/error-text/error-text.js

@@ -0,0 +1,40 @@
+import { jsx as a } from "react/jsx-runtime";
+import { c as m } from "../index-DNkhmzZp.js";
+const d = {
+  Small: "sm",
+  Medium: "md",
+  Large: "lg"
+}, l = m({
+  base: "gi-error-text",
+  variants: {
+    size: {
+      sm: "gi-error-text-sm",
+      md: "gi-error-text-md",
+      lg: "gi-error-text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), x = ({
+  text: r,
+  className: e,
+  size: t = d.Medium,
+  dataTestid: i,
+  children: o,
+  ...s
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    role: "alert",
+    className: l({ size: t, className: e }),
+    "data-testid": i,
+    ...s,
+    children: o ?? r
+  }
+);
+x.displayName = "ErrorText";
+export {
+  d as ErrorSize,
+  x as ErrorText
+};

package/dist/error-text/error-text.test.d.ts

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

package/dist/error-text/error-text.test.js

@@ -0,0 +1,30 @@
+import { jsx as o } from "react/jsx-runtime";
+import { r as i } from "../test-utilities-BS7B3BF-.js";
+import { ErrorText as n, ErrorSize as s } from "./error-text.js";
+describe("govieErrorText", () => {
+  const t = (r) => i(/* @__PURE__ */ o(n, { ...r }));
+  it("should render error text with the correct content", () => {
+    const e = t({
+      text: "This is an error message",
+      size: s.Medium
+    }).getByText("This is an error message");
+    expect(e).toBeTruthy(), expect(e.tagName).toBe("DIV");
+  }), it('should render error text with "sm" size', () => {
+    const e = t({
+      text: "Small error message",
+      size: s.Small
+    }).getByText("Small error message");
+    expect(e.classList.contains("gi-error-text-sm")).toBe(!0);
+  }), it('should render error text with "lg" size', () => {
+    const e = t({
+      text: "Large error message",
+      size: s.Large
+    }).getByText("Large error message");
+    expect(e.classList.contains("gi-error-text-lg")).toBe(!0);
+  }), it("should pass axe accessibility tests", async () => {
+    await t({
+      text: "Accessible error message",
+      size: s.Medium
+    }).axe();
+  });
+});

package/dist/error-text/types.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { ErrorSize } from './error-text.js';
+export type ErrorSizeType = (typeof ErrorSize)[keyof typeof ErrorSize];
+export type ErrorTextProps = PropsWithChildren<React.HTMLAttributes<HTMLDivElement> & {
+    text?: string | React.ReactElement;
+    size?: ErrorSizeType;
+    dataTestid?: string;
+}>;

package/dist/error-text/types.js

@@ -0,0 +1 @@
+

package/dist/file-upload/file-upload.d.ts

@@ -0,0 +1,9 @@
+import { InputFileProps } from '../input-file/types.js';
+/**
+ * @deprecated Use FileUploadProps instead of `Radio`.
+ */
+export type FileUploadProps = InputFileProps;
+/**
+ * @deprecated Use <InputFile /> instead of <FileUpload />.
+ */
+export declare const FileUpload: import('react').ForwardRefExoticComponent<InputFileProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/file-upload/file-upload.js

@@ -0,0 +1,6 @@
+import { InputFile as l } from "../input-file/input-file.js";
+const o = l;
+o.displayName = "FileUpload";
+export {
+  o as FileUpload
+};

package/dist/footer/footer.d.ts

@@ -0,0 +1,11 @@
+import { default as React, ReactNode } from 'react';
+import { LogoProps } from '../common/types.js';
+export type FooterProps = {
+    primarySlot?: ReactNode;
+    secondarySlot?: ReactNode;
+    utilitySlot?: ReactNode;
+    logo?: LogoProps;
+    className?: string;
+    dataTestid?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function Footer({ primarySlot, secondarySlot, utilitySlot, logo, className, dataTestid, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/footer/footer.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsxs as i, jsx as t, Fragment as u } from "react/jsx-runtime";
+import { renderToStaticMarkup as c } from "react-dom/server";
+import h from "../assets/logos/gov-of-ireland/harp-gold-text-green.js";
+import p from "../assets/logos/harp/harp-white.js";
+import { cn as v } from "../cn.js";
+import { Container as b } from "../container/container.js";
+import { translate as a } from "../i18n/utility.js";
+import g from "../primitives/anchor.js";
+import { SectionBreak as k } from "../section-break/section-break.js";
+function l({ logo: e }) {
+  const n = `data:image/svg+xml;base64,${btoa(c(/* @__PURE__ */ t(p, {})))}`, s = `data:image/svg+xml;base64,${btoa(
+    c(/* @__PURE__ */ t(h, {}))
+  )}`;
+  return /* @__PURE__ */ i("picture", { children: [
+    /* @__PURE__ */ t("source", { srcSet: (e == null ? void 0 : e.imageLarge) || s }),
+    /* @__PURE__ */ t(
+      "img",
+      {
+        className: "gi-h-16",
+        src: (e == null ? void 0 : e.imageSmall) || n,
+        alt: (e == null ? void 0 : e.alt) || a("logo.govieLogo", { defaultValue: "Gov.ie Logo" })
+      }
+    )
+  ] });
+}
+function H({
+  primarySlot: e,
+  secondarySlot: o,
+  utilitySlot: n,
+  logo: r,
+  className: s = "",
+  dataTestid: d,
+  ...m
+}) {
+  const f = () => /* @__PURE__ */ i(u, { children: [
+    (r == null ? void 0 : r.href) && /* @__PURE__ */ t(
+      g,
+      {
+        href: r.href,
+        "aria-label": a("footer.goToHomePage", {
+          defaultValue: "Go to Home Page"
+        }),
+        "data-testid": "logo-link",
+        external: r.external,
+        children: l({ logo: r })
+      }
+    ),
+    !(r != null && r.href) && l({ logo: r })
+  ] });
+  return /* @__PURE__ */ i(
+    "footer",
+    {
+      className: v("gi-footer", s),
+      "data-module": "gieds-footer",
+      role: "contentinfo",
+      "aria-label": a("footer.footer", { defaultValue: "Footer" }),
+      "data-testid": d,
+      ...m,
+      children: [
+        /* @__PURE__ */ t("div", { className: "gi-footer-container", children: /* @__PURE__ */ i(b, { children: [
+          e && /* @__PURE__ */ t(
+            "div",
+            {
+              "aria-label": a("footer.primarySlot", {
+                defaultValue: "Footer Primary Slot"
+              }),
+              children: e
+            }
+          ),
+          e && o && /* @__PURE__ */ t(
+            k,
+            {
+              color: "gi-border-color-border-system-neutral-subtle",
+              size: "lg"
+            }
+          ),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              className: "gi-footer-secondary-slot",
+              "aria-label": a("footer.secondarySlot", {
+                defaultValue: "Footer Secondary Slot"
+              }),
+              children: [
+                /* @__PURE__ */ t("div", { className: "gi-footer-logo", children: f() }),
+                o && /* @__PURE__ */ t("div", { className: "gi-footer-secondary-slot-content", children: o })
+              ]
+            }
+          )
+        ] }) }),
+        n && /* @__PURE__ */ t(
+          "div",
+          {
+            className: "gi-footer-utility",
+            "aria-label": a("footer.utilityLinks", {
+              defaultValue: "Footer Utility Links"
+            }),
+            children: n
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  H as Footer
+};

package/dist/footer/footer.test.d.ts

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

package/dist/footer/footer.test.js

@@ -0,0 +1,42 @@
+import { jsx as n } from "react/jsx-runtime";
+import { c as r, s as e, r as s } from "../test-utilities-BS7B3BF-.js";
+import { Footer as d } from "./footer.js";
+describe("Footer", () => {
+  afterEach(r);
+  const o = (t = {}) => s(/* @__PURE__ */ n(d, { ...t }));
+  it("should render the footer with default props", () => {
+    o({
+      dataTestid: "govie-footer"
+    });
+    const t = e.getByRole("contentinfo");
+    expect(t).toBeInTheDocument(), expect(t).toHaveAttribute("aria-label", "Footer"), expect(t).toHaveAttribute("data-testid", "govie-footer"), expect(t).toHaveClass("gi-footer");
+  }), it("should render with custom className", () => {
+    o({ className: "custom-class" });
+    const t = e.getByRole("contentinfo");
+    expect(t).toHaveClass("gi-footer custom-class");
+  }), it("should not render primary nav when primarySlot is not provided", () => {
+    o({}), expect(
+      e.queryByLabelText("Primary footer navigation")
+    ).not.toBeInTheDocument();
+  }), it("should render secondary slot when provided", () => {
+    o({ secondarySlot: /* @__PURE__ */ n("div", { "data-testid": "secondary-content", children: "Secondary Content" }) }), expect(e.getByTestId("secondary-content")).toBeInTheDocument();
+  }), it("should not render secondary nav when secondarySlot is not provided", () => {
+    o({}), expect(
+      e.queryByLabelText("Secondary footer navigation")
+    ).not.toBeInTheDocument();
+  }), it("should render utility slot when provided", () => {
+    o({ utilitySlot: /* @__PURE__ */ n("div", { "data-testid": "utility-content", children: "Utility Content" }) });
+    const i = e.getByLabelText("Footer Utility Links");
+    expect(i).toBeInTheDocument(), expect(e.getByTestId("utility-content")).toBeInTheDocument();
+  }), it("should not render utility section when utilitySlot is not provided", () => {
+    o({}), expect(e.queryByLabelText("Utility links")).not.toBeInTheDocument();
+  }), it("should render all slots when provided", () => {
+    o({
+      primarySlot: /* @__PURE__ */ n("div", { "data-testid": "primary", children: "Primary" }),
+      secondarySlot: /* @__PURE__ */ n("div", { "data-testid": "secondary", children: "Secondary" }),
+      utilitySlot: /* @__PURE__ */ n("div", { "data-testid": "utility", children: "Utility" })
+    }), expect(e.getByTestId("primary")).toBeInTheDocument(), expect(e.getByTestId("secondary")).toBeInTheDocument(), expect(e.getByTestId("utility")).toBeInTheDocument();
+  }), it("should pass axe tests", async () => {
+    await o({}).axe();
+  });
+});

package/dist/forms/form-field-with-tag/form-field-with-tag.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { ErrorTextProps } from '../../error-text/types.js';
+import { HintTextProps } from '../../hint-text/types.js';
+import { LabelTextProps } from '../../label/types.js';
+import { TagProps } from '../../tag/tag.js';
+/**
+ * @deprecated This type is deprecated and will be removed in a future release.
+ * Please use the new FormFieldProps component instead.
+ */
+export type FormFieldWithTagProps = {
+    error?: ErrorTextProps;
+    hint?: HintTextProps;
+    label?: LabelTextProps;
+    className?: string;
+    tag?: TagProps;
+} & React.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+/**
+ * @deprecated This component is deprecated and will be removed in a future release.
+ * Please use the new FormField component instead.
+ */
+export declare const FormFieldWithTag: {
+    ({ label, hint, error, children, className, tag, }: FormFieldWithTagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/forms/form-field-with-tag/form-field-with-tag.js

@@ -0,0 +1,50 @@
+import { jsxs as o, jsx as m } from "react/jsx-runtime";
+import { S as d } from "../../index-ntYL1VRC.js";
+import { cn as c } from "../../cn.js";
+import { ErrorText as l } from "../../error-text/error-text.js";
+import { HintText as f } from "../../hint-text/hint-text.js";
+import { translate as a } from "../../i18n/utility.js";
+import { Label as p } from "../../label/label.js";
+import { Tag as g } from "../../tag/tag.js";
+const n = ({
+  label: e,
+  hint: s,
+  error: i,
+  children: x,
+  className: r,
+  tag: t
+}) => /* @__PURE__ */ o("fieldset", { className: c({ "gi-error-state": i }, r), children: [
+  /* @__PURE__ */ o("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
+    /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ o("div", { className: "gi-flex gi-items-center gi-justify-between", children: [
+        (e == null ? void 0 : e.text) && /* @__PURE__ */ m(
+          p,
+          {
+            text: e.text,
+            size: e.size,
+            htmlFor: e.htmlFor,
+            className: "gi-font-bold",
+            children: e.children
+          }
+        ),
+        (t == null ? void 0 : t.text) && t.type && /* @__PURE__ */ m(
+          "div",
+          {
+            "aria-label": a("formField.tag", {
+              tag: t.text,
+              defaultValue: `Tag: ${t.text}`
+            }),
+            children: /* @__PURE__ */ m(g, { text: t.text, type: t.type })
+          }
+        )
+      ] }),
+      (s == null ? void 0 : s.text) && /* @__PURE__ */ m(f, { text: s.text, size: s.size, className: "gi-mb-1" })
+    ] }),
+    (i == null ? void 0 : i.text) && /* @__PURE__ */ m(l, { text: i.text, size: i.size, className: "gi-mb-1" })
+  ] }),
+  /* @__PURE__ */ m(d, { children: x })
+] });
+n.displayName = "FormFieldWithTag";
+export {
+  n as FormFieldWithTag
+};

package/dist/forms/form-field.d.ts

@@ -0,0 +1,11 @@
+import { FieldsetHTMLAttributes } from 'react';
+import { ErrorTextProps } from '../error-text/types.js';
+import { HintTextProps } from '../hint-text/types.js';
+import { LabelTextProps } from '../label/types.js';
+export type FormFieldProps = {
+    error?: ErrorTextProps;
+    hint?: HintTextProps;
+    label?: LabelTextProps;
+    className?: string;
+} & Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'style'>;
+export declare const FormField: ({ label, hint, error, children, className, ...props }: FormFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/forms/form-field.js

@@ -0,0 +1,41 @@
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { S as g } from "../index-ntYL1VRC.js";
+import { cn as h } from "../cn.js";
+import { ErrorText as l } from "../error-text/error-text.js";
+import { HintText as a } from "../hint-text/hint-text.js";
+import { Label as z } from "../label/label.js";
+const C = ({
+  label: e,
+  hint: s,
+  error: m,
+  children: c,
+  className: x,
+  ...d
+}) => {
+  const n = (f, t) => {
+    const o = f === "error" ? l : a;
+    return t != null && t.text ? typeof t.text == "string" ? /* @__PURE__ */ i(o, { text: t.text, size: t.size, className: "gi-mb-1" }) : /* @__PURE__ */ i(o, { size: t.size, className: "gi-mb-1", children: t.text }) : null;
+  };
+  return /* @__PURE__ */ r("fieldset", { className: h({ "gi-error-state": m }, x), ...d, children: [
+    /* @__PURE__ */ r("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
+      /* @__PURE__ */ r("div", { children: [
+        (e == null ? void 0 : e.text) && /* @__PURE__ */ i(
+          z,
+          {
+            text: e.text,
+            size: e.size,
+            htmlFor: e.htmlFor,
+            className: "gi-font-bold",
+            children: e.children
+          }
+        ),
+        n("hint", s)
+      ] }),
+      n("error", m)
+    ] }),
+    /* @__PURE__ */ i(g, { children: c })
+  ] });
+};
+export {
+  C as FormField
+};

package/dist/forms/form.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+type FormType = React.FormHTMLAttributes<HTMLFormElement>;
+export declare const Form: ({ children, ...props }: FormType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/forms/form.js

@@ -0,0 +1,5 @@
+import { jsx as m } from "react/jsx-runtime";
+const e = ({ children: r, ...o }) => /* @__PURE__ */ m("form", { ...o, children: r });
+export {
+  e as Form
+};

package/dist/header/components/header-menu.d.ts

@@ -0,0 +1,13 @@
+import { HeaderProps } from '../types.js';
+export type MobileHeaderMenuProps = Pick<HeaderProps, 'items' | 'secondaryLinks'>;
+type MenuItemAccordionProps = {
+    index: number;
+    item: {
+        label?: string;
+        slot: React.ReactNode;
+    };
+};
+export declare const MenuItemAccordion: ({ index, item }: MenuItemAccordionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MobileHeaderMenuItems: ({ items, secondaryLinks, }: MobileHeaderMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare function HeaderMenu({ ...props }: MobileHeaderMenuProps): import("react/jsx-runtime").JSX.Element;
+export default HeaderMenu;