@ogcio/design-system-react 1.30.0 → 1.31.0

package/dist/footer/footer.js

@@ -1,102 +1,110 @@
 "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 { LogoGoldGreen as h } from "../assets/logos/LogoGoldGreen.js";
-import { LogoHarpWhite as g } from "../assets/logos/LogoHarpWhite.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 p from "../primitives/anchor.js";
-import { SectionBreak as L } from "../section-break/section-break.js";
-function l({ logo: e }) {
-  const n = `data:image/svg+xml;base64,${btoa(c(/* @__PURE__ */ t(g, {})))}`, s = `data:image/svg+xml;base64,${btoa(
-    c(/* @__PURE__ */ t(h, {}))
+import { jsxs as a, jsx as t, Fragment as u } from "react/jsx-runtime";
+import { renderToStaticMarkup as l } from "react-dom/server";
+import g from "../atoms/icons/logos/LogoGoldGreen.js";
+import h from "../atoms/icons/logos/LogoHarpWhite.js";
+import { cn as p } from "../cn.js";
+import { Container as v } from "../container/container.js";
+import { translate as i } from "../i18n/utility.js";
+import b from "../primitives/anchor.js";
+import { SectionBreak as x } from "../section-break/section-break.js";
+function c({ logo: e }) {
+  const o = `data:image/svg+xml;base64,${btoa(l(/* @__PURE__ */ t(h, {})))}`, n = `data:image/svg+xml;base64,${btoa(
+    l(/* @__PURE__ */ t(g, {}))
   )}`;
-  return /* @__PURE__ */ i("picture", { children: [
-    /* @__PURE__ */ t("source", { srcSet: (e == null ? void 0 : e.imageLarge) || s }),
+  return /* @__PURE__ */ a("picture", { children: [
+    /* @__PURE__ */ t("source", { srcSet: (e == null ? void 0 : e.imageLarge) || n }),
     /* @__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" })
+        src: (e == null ? void 0 : e.imageSmall) || o,
+        alt: (e == null ? void 0 : e.alt) || i("logo.govieLogo", { defaultValue: "Gov.ie Logo" })
       }
     )
   ] });
 }
-function M({
+function j({
   primarySlot: e,
-  secondarySlot: o,
-  utilitySlot: n,
+  secondarySlot: s,
+  utilitySlot: o,
   logo: r,
-  className: s = "",
-  dataTestid: d,
-  ...m
+  className: n = "",
+  dataTestid: m,
+  ...d
 }) {
-  const f = () => /* @__PURE__ */ i(u, { children: [
+  const f = () => /* @__PURE__ */ a(u, { children: [
     (r == null ? void 0 : r.href) && /* @__PURE__ */ t(
-      p,
+      b,
       {
         href: r.href,
-        "aria-label": a("footer.goToHomePage", {
+        "aria-label": i("footer.goToHomePage", {
           defaultValue: "Go to Home Page"
         }),
         "data-testid": "logo-link",
         external: r.external,
-        children: l({ logo: r })
+        children: c({ logo: r })
       }
     ),
-    !(r != null && r.href) && l({ logo: r })
+    !(r != null && r.href) && c({ logo: r })
   ] });
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ a(
     "footer",
     {
-      className: v("gi-footer", s),
+      className: p("gi-bg-color-surface-system-neutral-layer1", n),
       "data-module": "gieds-footer",
       role: "contentinfo",
-      "aria-label": a("footer.footer", { defaultValue: "Footer" }),
-      "data-testid": d,
-      ...m,
+      "aria-label": i("footer.footer", { defaultValue: "Footer" }),
+      "data-testid": m,
+      ...d,
       children: [
-        /* @__PURE__ */ t("div", { className: "gi-footer-container", children: /* @__PURE__ */ i(b, { children: [
+        /* @__PURE__ */ t("div", { className: "gi-py-10", children: /* @__PURE__ */ a(v, { children: [
           e && /* @__PURE__ */ t(
             "div",
             {
-              "aria-label": a("footer.primarySlot", {
+              "aria-label": i("footer.primarySlot", {
                 defaultValue: "Footer Primary Slot"
               }),
               children: e
             }
           ),
-          e && o && /* @__PURE__ */ t(
-            L,
+          e && s && /* @__PURE__ */ t(
+            x,
             {
               color: "gi-border-color-border-system-neutral-subtle",
               size: "lg"
             }
           ),
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ a(
             "div",
             {
-              className: "gi-footer-secondary-slot",
-              "aria-label": a("footer.secondarySlot", {
+              className: "gi-flex gi-flex-row-reverse gi-flex-wrap-reverse gi-justify-between gi-justify-items-stretch",
+              "aria-label": i("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 })
+                /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: `
+                gi-w-fit gi-mt-8 md:gi-mt-0 lg:gi-ml-auto lg:gi-flex-none gi-rounded-sm 
+                gi-focus-state-outline gi-focus-within-state-outline gi-focus-visible-state-outline`,
+                    children: f()
+                  }
+                ),
+                s && /* @__PURE__ */ t("div", { className: "gi-grow md:gi-max-w-[calc(100%_-_var(--gieds-space-80))]", children: s })
               ]
             }
           )
         ] }) }),
-        n && /* @__PURE__ */ t(
+        o && /* @__PURE__ */ t(
           "div",
           {
-            className: "gi-footer-utility",
-            "aria-label": a("footer.utilityLinks", {
+            className: "gi-py-4 gi-px-8 gi-bg-color-surface-system-neutral-layer2",
+            "aria-label": i("footer.utilityLinks", {
               defaultValue: "Footer Utility Links"
             }),
-            children: n
+            children: o
           }
         )
       ]
@@ -104,5 +112,5 @@ function M({
   );
 }
 export {
-  M as Footer
+  j as Footer
 };

package/dist/header/header-legacy.js

@@ -2,10 +2,10 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { useEffect as $, useMemo as H, createElement as I } from "react";
 import { renderToStaticMarkup as v } from "react-dom/server";
-import { LogoWhite as x } from "../assets/logos/LogoWhite.js";
-import { LogoBlack as D } from "../assets/logos/LogoBlack.js";
-import { LogoHarpBlack as C } from "../assets/logos/LogoHarpBlack.js";
-import { LogoHarpWhite as A } from "../assets/logos/LogoHarpWhite.js";
+import x from "../atoms/icons/logos/LogoBlack.js";
+import D from "../atoms/icons/logos/LogoHarpBlack.js";
+import C from "../atoms/icons/logos/LogoHarpWhite.js";
+import A from "../atoms/icons/logos/LogoWhite.js";
 import { cn as k } from "../cn.js";
 import { Container as y } from "../container/container.js";
 import { translate as h } from "../i18n/utility.js";
@@ -18,12 +18,12 @@ import { headerVariants as O, headerMenuVariants as P, headerLogoVariants as U,
 function S({ logo: r, appearance: n = "default" }) {
   const t = {
     harp: {
-      default: /* @__PURE__ */ e(A, {}),
-      light: /* @__PURE__ */ e(C, {})
+      default: /* @__PURE__ */ e(C, {}),
+      light: /* @__PURE__ */ e(D, {})
     },
     withText: {
-      default: /* @__PURE__ */ e(x, {}),
-      light: /* @__PURE__ */ e(D, {})
+      default: /* @__PURE__ */ e(A, {}),
+      light: /* @__PURE__ */ e(x, {})
     }
   }, s = `data:image/svg+xml;base64,${btoa(v(t.harp[n]))}`, g = `data:image/svg+xml;base64,${btoa(
     v(t.withText[n])

package/dist/hooks/use-aria-hider.d.ts

@@ -1 +1 @@
-export declare const useAriaHider: (refNode: HTMLElement | null, shouldActivate: boolean) => void;
+export declare const useAriaHider: (ref: React.RefObject<HTMLElement | null>, shouldActivate: boolean) => void;

package/dist/hooks/use-aria-hider.js

@@ -1,20 +1,21 @@
-import { useLayoutEffect as d } from "react";
-const m = (e, n) => {
-  d(() => {
-    if (n !== !0 || e === null)
+import { useLayoutEffect as s } from "react";
+const f = (n, o) => {
+  s(() => {
+    var t, u;
+    if (o !== !0 || !n.current)
       return;
-    const r = [...(e.ownerDocument ?? document).body.children].filter((t) => {
-      const o = t === e, i = t.getAttribute("aria-hidden") === "true";
-      return !o && !i;
+    const i = n.current, r = i.ownerDocument ?? document, c = [...r.body.children].filter((e) => {
+      const d = e === i, m = e.getAttribute("aria-hidden") === "true";
+      return !d && !m;
     });
-    for (const t of r)
-      t.setAttribute("aria-hidden", "true");
+    for (const e of c)
+      e.contains(r.activeElement) && ((u = (t = r.activeElement) == null ? void 0 : t.blur) == null || u.call(t)), e.setAttribute("aria-hidden", "true");
     return () => {
-      for (const t of r)
-        t.removeAttribute("aria-hidden");
+      for (const e of c)
+        e.removeAttribute("aria-hidden");
     };
-  }, [n, e]);
+  }, [o, n.current]);
 };
 export {
-  m as useAriaHider
+  f as useAriaHider
 };

package/dist/hooks/use-focus-trap.d.ts

@@ -1,2 +1,2 @@
 import { Options as FocusTrapOptions } from 'focus-trap';
-export declare const useFocusTrap: (element: HTMLElement | null, isActive: boolean, options?: FocusTrapOptions) => void;
+export declare const useFocusTrap: (ref: React.RefObject<HTMLElement | null>, isActive: boolean, options?: FocusTrapOptions) => void;