@ogcio/design-system-react 1.15.3 → 1.17.0

package/dist/header/components/header-slot.js

@@ -1,74 +1,80 @@
-import { jsx as a, jsxs as l, Fragment as p } from "react/jsx-runtime";
-import { useState as u } from "react";
-import { cn as d } from "../../cn.js";
-import { DrawerWrapper as b, DrawerBody as I } from "../../drawer/drawer.js";
-import { translate as s } from "../../i18n/utility.js";
-import { Icon as o } from "../../icon/icon.js";
-import { Input as m } from "../../primitives/input.js";
-const D = ({ index: e, slot: r }) => /* @__PURE__ */ a(
+import { jsx as a, jsxs as s, Fragment as I } from "react/jsx-runtime";
+import { useState as $ } from "react";
+import { cn as n } from "../../cn.js";
+import { DrawerWrapper as f, DrawerBody as T } from "../../drawer/drawer.js";
+import { translate as c } from "../../i18n/utility.js";
+import { Icon as i } from "../../icon/icon.js";
+import { Input as h } from "../../primitives/input.js";
+import { headerSlotContainerVariants as b, headerToolItemVariants as p } from "../variants.js";
+const y = ({
+  index: e,
+  slot: r,
+  appearance: t
+}) => /* @__PURE__ */ a(
   "div",
   {
     id: `SlotContainer-${e}`,
     "data-testid": `SlotContainer-${e}`,
     "data-index": e,
-    "aria-label": s("header.headerSlot", {
+    "aria-label": c("header.headerSlot", {
       index: e + 1,
       defaultValue: `Slot Container ${e + 1}`
     }),
-    className: "gi-hidden gi-bg-gray-50 gi-py-4 gi-px-4 gi-border-b-2xl gi-border-b-color-surface-system-primary-default gi-order-3",
+    className: n(b({ appearance: t }), "gi-hidden"),
     children: r
   }
-), $ = ({
+), C = ({
   index: e,
-  item: { component: r, drawerPosition: h, icon: c, label: i, ariaLabel: g }
+  item: { component: r, drawerPosition: t, icon: d, label: l, ariaLabel: m },
+  appearance: u
 }) => {
-  const [t, n] = u(!1);
-  return /* @__PURE__ */ l(p, { children: [
-    /* @__PURE__ */ l(
+  const [o, g] = $(!1);
+  return /* @__PURE__ */ s(I, { children: [
+    /* @__PURE__ */ s(
       "label",
       {
         htmlFor: `ItemActionDrawerTrigger-${e}`,
-        className: "gi-header-tool-item",
-        onClick: () => n(!0),
+        className: p({ appearance: u }),
+        onClick: () => g(!0),
         children: [
           /* @__PURE__ */ a(
-            m,
+            h,
             {
               "data-testid": `ItemActionDrawerTrigger-${e}`,
-              className: "gi-block gi-w-0 gi-absolute gi-h-0",
+              className: "gi-header-tool-item-input",
               id: `ItemActionDrawerTrigger-${e}`,
               "data-index": e,
-              "aria-label": g || i || "",
+              "aria-label": m || l || "",
               type: "checkbox"
             }
           ),
-          i && /* @__PURE__ */ a(
+          l && /* @__PURE__ */ a(
             "span",
             {
               id: `ItemActionDrawerTrigger-${e}-label`,
               className: "label",
-              "aria-hidden": g ? "true" : "false",
-              children: i
+              "aria-hidden": m ? "true" : "false",
+              children: l
             }
           ),
-          c && /* @__PURE__ */ a(
-            o,
+          d && /* @__PURE__ */ a(
+            i,
             {
-              className: d({
-                "gi-hidden": t,
-                "gi-block": !t
+              className: n({
+                "gi-hidden": o,
+                "gi-block": !o
               }),
-              icon: c,
+              icon: d,
               id: `ItemIconDrawerActionTrigger-${e}`,
               ariaHidden: !0
             }
           ),
           /* @__PURE__ */ a(
-            o,
+            i,
             {
-              className: d({
-                "gi-hidden": !t,
-                "gi-block": t
+              className: n({
+                "gi-hidden": !o,
+                "gi-block": o
               }),
               id: `ItemCloseTrigger-${e}`,
               ariaHidden: !0,
@@ -80,35 +86,40 @@ const D = ({ index: e, slot: r }) => /* @__PURE__ */ a(
       }
     ),
     /* @__PURE__ */ a(
-      b,
+      f,
       {
-        isOpen: t,
-        onClose: () => n(!1),
-        position: h || "right",
-        closeButtonLabel: s("header.drawer.close", {
+        isOpen: o,
+        onClose: () => g(!1),
+        position: t || "right",
+        closeButtonLabel: c("header.drawer.close", {
           defaultValue: "Close"
         }),
         closeButtonSize: "large",
-        children: /* @__PURE__ */ a(I, { children: r })
+        children: /* @__PURE__ */ a(T, { children: r })
       }
     )
   ] });
-}, y = ({ item: e, index: r }) => e.slotAppearance === "drawer" ? /* @__PURE__ */ a($, { index: r, item: e }) : /* @__PURE__ */ l(
+}, B = ({
+  item: e,
+  index: r,
+  appearance: t
+}) => e.slotAppearance === "drawer" ? /* @__PURE__ */ a(C, { index: r, item: e, appearance: t }) : /* @__PURE__ */ s(
   "label",
   {
     htmlFor: `ItemActionTrigger-${r}`,
-    "aria-label": s("header.toggleActionItem", {
+    "aria-label": c("header.toggleActionItem", {
       item: e.label || `item ${r + 1}`,
       defaultValue: `Toggle item action for ${e.label || `item ${r + 1}`}`
     }),
-    className: "gi-header-tool-item",
+    className: p({ appearance: t }),
     "data-label-index": r,
     children: [
       /* @__PURE__ */ a(
-        m,
+        h,
         {
           "data-testid": `ItemActionTrigger-${r}`,
           id: `ItemActionTrigger-${r}`,
+          className: "gi-header-tool-item-input",
           "data-index": r,
           "aria-expanded": "false",
           "aria-controls": `SlotContainer-${r + 1}`,
@@ -117,7 +128,7 @@ const D = ({ index: e, slot: r }) => /* @__PURE__ */ a(
       ),
       e.label && /* @__PURE__ */ a("span", { className: "label", children: e.label }),
       e.icon && /* @__PURE__ */ a(
-        o,
+        i,
         {
           icon: e.icon,
           ariaHidden: !0,
@@ -125,7 +136,7 @@ const D = ({ index: e, slot: r }) => /* @__PURE__ */ a(
         }
       ),
       /* @__PURE__ */ a(
-        o,
+        i,
         {
           className: "gi-hidden close-icon",
           ariaHidden: !0,
@@ -138,6 +149,6 @@ const D = ({ index: e, slot: r }) => /* @__PURE__ */ a(
   }
 );
 export {
-  D as SlotContainer,
-  y as SlotItemAction
+  y as SlotContainer,
+  B as SlotItemAction
 };

package/dist/header/header.d.ts

@@ -1,2 +1,2 @@
 import { HeaderProps } from './types.js';
-export declare function Header({ title, items, logo, secondaryLinks, fullWidth, addDefaultMobileMenu, mobileMenuLabel, showMenuLabel, showTitleOnMobile, dataTestid, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, items, logo, secondaryLinks, fullWidth, addDefaultMobileMenu, mobileMenuLabel, showMenuLabel, showTitleOnMobile, dataTestid, appearance, }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/header.js

@@ -1,26 +1,38 @@
 "use client";
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { useEffect as I, useMemo as A, createElement as L } from "react";
-import { renderToStaticMarkup as b } from "react-dom/server";
-import V from "../assets/logos/gov-of-ireland/harp-white.js";
-import j from "../assets/logos/harp/harp-white.js";
-import { cn as p } from "../cn.js";
-import { Container as v } from "../container/container.js";
-import { translate as m } from "../i18n/utility.js";
-import { Icon as E } from "../icon/icon.js";
-import h from "../primitives/anchor.js";
-import { MobileHeaderMenuItems as G } from "./components/header-menu.js";
-import { SlotContainer as F, SlotItemAction as O } from "./components/header-slot.js";
-import { attachEventsToItemActionTriggers as P } from "./helper.js";
-function N({ logo: a }) {
-  const t = `data:image/svg+xml;base64,${btoa(b(/* @__PURE__ */ e(j, {})))}`, d = `data:image/svg+xml;base64,${btoa(
-    b(/* @__PURE__ */ e(V, {}))
+import { useEffect as H, useMemo as T, createElement as I } from "react";
+import { renderToStaticMarkup as v } from "react-dom/server";
+import x from "../assets/logos/gov-of-ireland/harp-black.js";
+import D from "../assets/logos/gov-of-ireland/harp-white.js";
+import L from "../assets/logos/harp/harp-black.js";
+import C from "../assets/logos/harp/harp-white.js";
+import { cn as k } from "../cn.js";
+import { Container as p } from "../container/container.js";
+import { translate as h } from "../i18n/utility.js";
+import { Icon as A } from "../icon/icon.js";
+import u from "../primitives/anchor.js";
+import { MobileHeaderMenuItems as j } from "./components/header-menu.js";
+import { SlotContainer as E, SlotItemAction as G } from "./components/header-slot.js";
+import { attachEventsToItemActionTriggers as B } from "./helper.js";
+import { headerVariants as F, headerMenuVariants as O, headerLogoVariants as P, headerTitleVariants as U, headerSecondaryLinksVariants as W, headerDividerVariants as q, headerToolItemVariants as y, headerSecondaryLinkItemVariants as z, headerSecondaryLinkSlotItemVariants as J } from "./variants.js";
+function S({ logo: r, appearance: n = "default" }) {
+  const t = {
+    harp: {
+      default: /* @__PURE__ */ e(C, {}),
+      light: /* @__PURE__ */ e(L, {})
+    },
+    withText: {
+      default: /* @__PURE__ */ e(D, {}),
+      light: /* @__PURE__ */ e(x, {})
+    }
+  }, o = `data:image/svg+xml;base64,${btoa(v(t.harp[n]))}`, b = `data:image/svg+xml;base64,${btoa(
+    v(t.withText[n])
   )}`;
   return /* @__PURE__ */ c("picture", { children: [
     /* @__PURE__ */ e(
       "source",
       {
-        srcSet: (a == null ? void 0 : a.imageLarge) || d,
+        srcSet: (r == null ? void 0 : r.imageLarge) || b,
         media: "(min-width: 640px)"
       }
     ),
@@ -28,165 +40,175 @@ function N({ logo: a }) {
       "img",
       {
         className: "gi-h-10 sm:gi-h-14",
-        src: (a == null ? void 0 : a.imageSmall) || t,
-        alt: (a == null ? void 0 : a.alt) || m("logo.govieLogo", { defaultValue: "Gov.ie logo" })
+        src: (r == null ? void 0 : r.imageSmall) || o,
+        alt: (r == null ? void 0 : r.alt) || h("logo.govieLogo", { defaultValue: "Gov.ie logo" })
       }
     )
   ] });
 }
-const U = (a, i, t) => [{
-  label: a,
+const K = (r, n, t) => [{
+  label: r,
   icon: "menu",
   itemType: "slot",
-  component: /* @__PURE__ */ e(G, { items: i, secondaryLinks: t }),
+  component: /* @__PURE__ */ e(j, { items: n, secondaryLinks: t }),
   slotAppearance: "drawer",
   showItemMode: "mobile-only"
-}, ...i], B = ({
-  href: a,
-  label: i,
+}, ...n], Q = ({
+  href: r,
+  label: n,
   slot: t,
-  index: s
-}) => /* @__PURE__ */ e("li", { children: a ? /* @__PURE__ */ e(
-  h,
+  index: l,
+  appearance: o = "default"
+}) => /* @__PURE__ */ e("li", { children: r ? /* @__PURE__ */ e(
+  u,
+  {
+    "aria-label": n,
+    "data-testid": `secondary-link-desktop-${l}`,
+    href: r,
+    className: z({ appearance: o }),
+    children: n
+  }
+) : /* @__PURE__ */ e(
+  "div",
   {
-    "aria-label": i,
-    "data-testid": `secondary-link-desktop-${s}`,
-    href: a,
-    className: "gi-header-secondary-item",
-    children: i
+    className: J({ appearance: o }),
+    "data-appearance": o,
+    children: t
   }
-) : /* @__PURE__ */ e("div", { className: "gi-header-secondary-item-slot", children: t }) }), W = ({ links: a }) => /* @__PURE__ */ e("ul", { children: a == null ? void 0 : a.map((i, t) => /* @__PURE__ */ L(
-  B,
+) }), R = ({ links: r, appearance: n }) => /* @__PURE__ */ e("ul", { children: r == null ? void 0 : r.map((t, l) => /* @__PURE__ */ I(
+  Q,
   {
-    ...i,
-    index: t,
-    key: `secondary-${i.label}-${t}`
+    ...t,
+    index: l,
+    key: `secondary-${t.label}-${l}`,
+    appearance: n
   }
 )) });
-function ie({
-  title: a,
-  items: i,
+function ue({
+  title: r,
+  items: n,
   logo: t,
-  secondaryLinks: s,
-  fullWidth: d = !1,
-  addDefaultMobileMenu: g,
-  mobileMenuLabel: y,
-  showMenuLabel: k = !0,
-  showTitleOnMobile: C,
-  dataTestid: M
+  secondaryLinks: l,
+  fullWidth: o = !1,
+  addDefaultMobileMenu: f,
+  mobileMenuLabel: b,
+  showMenuLabel: N = !0,
+  showTitleOnMobile: M,
+  dataTestid: V,
+  appearance: i = "default"
 }) {
-  const S = "gi-header", $ = "gi-header-secondary-bar", w = "gi-header-menu", H = "gi-header-title", f = "gi-header-tool-item", D = "gi-header-divider";
-  I(() => {
-    P();
+  H(() => {
+    B();
   }, []);
-  const T = ({
-    item: r,
-    index: n
+  const $ = ({
+    item: a,
+    index: s
   }) => {
-    switch (r.itemType) {
+    switch (a.itemType) {
       case "slot":
-        return /* @__PURE__ */ e(O, { index: n, item: r });
+        return /* @__PURE__ */ e(G, { index: s, item: a, appearance: i });
       case "link":
         return /* @__PURE__ */ c(
-          h,
+          u,
           {
-            className: f,
-            href: r.href,
-            onClick: r.onClick,
-            "aria-label": r.label || `link ${n}`,
-            "data-testid": `item-link-${n}`,
-            external: r.external,
+            className: y({ appearance: i }),
+            href: a.href,
+            onClick: a.onClick,
+            "aria-label": a.label || `link ${s}`,
+            "data-testid": `item-link-${s}`,
+            external: a.external,
             children: [
-              r.label && r.label,
-              r.icon && /* @__PURE__ */ e(E, { icon: r.icon })
+              a.label && a.label,
+              a.icon && /* @__PURE__ */ e(A, { icon: a.icon })
             ]
           }
         );
       case "custom-link":
-        return /* @__PURE__ */ e(h, { asChild: !0, className: f, children: r.component });
+        return /* @__PURE__ */ e(u, { asChild: !0, className: y({ appearance: i }), children: a.component });
       default:
-        return /* @__PURE__ */ e("div", { className: D });
+        return /* @__PURE__ */ e("div", { className: q({ appearance: i }) });
     }
-  }, x = k ? y || m("header.menu", { defaultValue: "Menu" }) : "", l = A(() => {
-    const r = i || [];
-    return g ? U(x, r, s || []) : r;
-  }, [g]);
+  }, w = N ? b || h("header.menu", { defaultValue: "Menu" }) : "", d = T(() => {
+    const a = n || [];
+    return f ? K(w, a, l || []) : a;
+  }, [f]);
   return /* @__PURE__ */ c(
     "header",
     {
       id: "GovieHeader",
-      "aria-label": m("header.siteHeader", { defaultValue: "Site Header" }),
-      className: S,
-      "data-testid": M,
+      "aria-label": h("header.siteHeader", { defaultValue: "Site Header" }),
+      className: F({ appearance: i }),
+      "data-testid": V,
       children: [
         /* @__PURE__ */ e(
-          v,
+          p,
           {
             id: "HeaderContainer",
             className: "gi-order-2",
-            fullWidth: d,
-            children: /* @__PURE__ */ c("div", { className: w, children: [
-              /* @__PURE__ */ c("div", { className: "gi-header-logo", children: [
+            fullWidth: o,
+            children: /* @__PURE__ */ c("div", { className: O({ appearance: i }), children: [
+              /* @__PURE__ */ c("div", { className: P({ appearance: i }), children: [
                 (t == null ? void 0 : t.href) && /* @__PURE__ */ e(
-                  h,
+                  u,
                   {
                     href: t.href,
-                    "aria-label": m("header.goToHomePage", {
+                    "aria-label": h("header.goToHomePage", {
                       defaultValue: "Go to Home Page"
                     }),
                     "data-testid": "logo-link",
                     external: t.external,
-                    children: N({ logo: t })
+                    children: S({ logo: t, appearance: i })
                   }
                 ),
-                !(t != null && t.href) && N({ logo: t })
+                !(t != null && t.href) && S({ logo: t, appearance: i })
               ] }),
               /* @__PURE__ */ e(
                 "div",
                 {
-                  className: p(H, {
-                    "gi-hidden": !C
+                  className: k(U({ appearance: i }), {
+                    "gi-hidden": !M
                   }),
-                  children: a
+                  children: r
                 }
               ),
-              /* @__PURE__ */ e("div", { className: "gi-flex gi-items-center gi-gap-2 md:gi-gap-4 gi-flex-none", children: l == null ? void 0 : l.map((r, n) => {
-                const { label: u, showItemMode: o = "desktop-only" } = r;
+              /* @__PURE__ */ e("div", { className: "gi-flex gi-items-center gi-gap-2 md:gi-gap-4 gi-flex-none", children: d == null ? void 0 : d.map((a, s) => {
+                const { label: g, showItemMode: m = "desktop-only" } = a;
                 return /* @__PURE__ */ e(
                   "div",
                   {
-                    "aria-label": r.ariaLabel,
-                    "data-testid": `header-item-${n}`,
-                    className: p({
-                      "gi-block": o === "always",
-                      "gi-block lg:gi-hidden": o === "mobile-only",
-                      "gi-hidden lg:gi-block": o === "desktop-only"
+                    "aria-label": a.ariaLabel,
+                    "data-testid": `header-item-${s}`,
+                    className: k({
+                      "gi-block": m === "always",
+                      "gi-block lg:gi-hidden": m === "mobile-only",
+                      "gi-hidden lg:gi-block": m === "desktop-only"
                     }),
-                    children: /* @__PURE__ */ e(T, { item: r, index: n })
+                    children: /* @__PURE__ */ e($, { item: a, index: s })
                   },
-                  `item-${u}-${n}`
+                  `item-${g}-${s}`
                 );
               }) })
             ] })
           }
         ),
-        s && /* @__PURE__ */ e("div", { className: p($, "gi-order-1"), children: /* @__PURE__ */ e(
-          v,
+        l && /* @__PURE__ */ e("div", { className: W({ appearance: i }), children: /* @__PURE__ */ e(
+          p,
           {
             className: "gi-flex gi-justify-end gi-items-center",
-            fullWidth: d,
-            children: s && /* @__PURE__ */ e(W, { links: s })
+            fullWidth: o,
+            children: l && /* @__PURE__ */ e(R, { links: l, appearance: i })
           }
         ) }),
-        l == null ? void 0 : l.map(({ itemType: r, component: n, slotAppearance: u }, o) => {
-          if (r === "slot")
-            return n && u !== "drawer" ? /* @__PURE__ */ e(
-              F,
+        d == null ? void 0 : d.map(({ itemType: a, component: s, slotAppearance: g }, m) => {
+          if (a === "slot")
+            return s && g !== "drawer" ? /* @__PURE__ */ e(
+              E,
               {
-                slot: n,
-                index: o
+                slot: s,
+                index: m,
+                appearance: i
               },
-              `slot-container-${o}`
+              `slot-container-${m}`
             ) : null;
         })
       ]
@@ -194,5 +216,5 @@ function ie({
   );
 }
 export {
-  ie as Header
+  ue as Header
 };

package/dist/header/types.d.ts

@@ -4,6 +4,7 @@ import { IconId } from '../icon/icon.js';
 export type HeaderItemMode = 'always' | 'mobile-only' | 'desktop-only';
 export type HeaderItemAppearance = 'dropdown' | 'drawer';
 export type HeaderItemType = 'slot' | 'divider' | 'link' | 'custom-link';
+export type HeaderAppearance = 'default' | 'light';
 type CommonProps = {
     showItemMode?: HeaderItemMode;
 };
@@ -73,5 +74,6 @@ export type HeaderProps = {
     fullWidth?: boolean;
     showTitleOnMobile?: boolean;
     dataTestid?: string;
+    appearance?: HeaderAppearance;
 };
 export {};