@ogcio/design-system-react 1.15.3 → 1.16.0

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 {};

package/dist/header/variants.d.ts

@@ -0,0 +1,160 @@
+export declare const headerVariants: import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header", TVConfig<V, EV>, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header", TVConfig<V, EV>, unknown, unknown, undefined>>;
+export declare const headerMenuVariants: import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-menu", TVConfig<V, EV>, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-menu", TVConfig<V, EV>, unknown, unknown, undefined>>;
+export declare const headerToolItemVariants: import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-tool-item ", TVConfig<V, EV>, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-tool-item ", TVConfig<V, EV>, unknown, unknown, undefined>>;
+export declare const headerSecondaryLinksVariants: import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-secondary-bar gi-order-1", TVConfig<V, EV>, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-secondary-bar gi-order-1", TVConfig<V, EV>, unknown, unknown, undefined>>;
+export declare const headerSecondaryLinkItemVariants: import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-secondary-item", TVConfig<V, EV>, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-secondary-item", TVConfig<V, EV>, unknown, unknown, undefined>>;
+export declare const headerSecondaryLinkSlotItemVariants: import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-secondary-item-slot", TVConfig<V, EV>, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-secondary-item-slot", TVConfig<V, EV>, unknown, unknown, undefined>>;
+export declare const headerTitleVariants: import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-title", TVConfig<V, EV>, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-title", TVConfig<V, EV>, unknown, unknown, undefined>>;
+export declare const headerDividerVariants: import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-divider", TVConfig<V, EV>, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-divider", TVConfig<V, EV>, unknown, unknown, undefined>>;
+export declare const headerSlotContainerVariants: import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-slot-container", TVConfig<V, EV>, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-slot-container", TVConfig<V, EV>, unknown, unknown, undefined>>;
+export declare const headerLogoVariants: import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-logo", TVConfig<V, EV>, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, undefined, "gi-header-logo", TVConfig<V, EV>, unknown, unknown, undefined>>;

package/dist/header/variants.js

@@ -0,0 +1,88 @@
+import { c as a } from "../index-CB-zPpNk.js";
+const e = {
+  default: "gi-text-white gi-stroke-white",
+  light: "gi-text-gray-950"
+}, r = {
+  default: "gi-bg-color-surface-system-primary-default",
+  light: "gi-bg-white"
+}, i = a({
+  base: "gi-header",
+  variants: {
+    appearance: r
+  }
+}), n = a({
+  base: "gi-header-menu",
+  variants: {
+    appearance: r
+  }
+}), s = a({
+  base: "gi-header-tool-item ",
+  variants: {
+    appearance: {
+      default: `${e.default} gi-header-tool-item-default`,
+      light: `${e.light} gi-header-tool-item-light`
+    }
+  }
+}), d = a({
+  base: "gi-header-secondary-bar gi-order-1",
+  variants: {
+    appearance: {
+      default: "gi-bg-color-surface-system-primary-subtle",
+      light: "gi-bg-gray-50"
+    }
+  }
+}), o = a({
+  base: "gi-header-secondary-item",
+  variants: {
+    appearance: {
+      default: `${e.default} gi-header-secondary-item-default`,
+      light: `${e.light} gi-header-secondary-item-light`
+    }
+  }
+}), g = a({
+  base: "gi-header-secondary-item-slot",
+  variants: {
+    appearance: e
+  }
+}), l = a({
+  base: "gi-header-title",
+  variants: {
+    appearance: e
+  }
+}), h = a({
+  base: "gi-header-divider",
+  variants: {
+    appearance: {
+      default: "gi-border-white",
+      light: "gi-border-gray-950"
+    }
+  }
+}), c = a({
+  base: "gi-header-slot-container",
+  variants: {
+    appearance: {
+      default: "gi-border-b-color-surface-system-primary-default gi-bg-gray-50",
+      light: "gi-border-gray-950"
+    }
+  }
+}), p = a({
+  base: "gi-header-logo",
+  variants: {
+    appearance: {
+      default: "gi-header-logo-default",
+      light: "gi-header-logo-light"
+    }
+  }
+});
+export {
+  h as headerDividerVariants,
+  p as headerLogoVariants,
+  n as headerMenuVariants,
+  o as headerSecondaryLinkItemVariants,
+  g as headerSecondaryLinkSlotItemVariants,
+  d as headerSecondaryLinksVariants,
+  c as headerSlotContainerVariants,
+  l as headerTitleVariants,
+  s as headerToolItemVariants,
+  i as headerVariants
+};

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

@@ -1,2 +1,3 @@
-import { InputFileProps } from './types.js';
-export declare const InputFile: import('react').ForwardRefExoticComponent<InputFileProps & import('react').RefAttributes<HTMLInputElement>>;
+export declare const InputFile: import('react').ForwardRefExoticComponent<{
+    dataTestid?: string;
+} & import('react').InputHTMLAttributes<Omit<HTMLInputElement, "type">> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/input-file/input-file.js

@@ -1,20 +1,21 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-import { cn as m } from "../cn.js";
-import { Input as o } from "../primitives/input.js";
-const f = e(
-  ({ className: t, ...i }, p) => /* @__PURE__ */ r(
-    o,
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { cn as o } from "../cn.js";
+import { Input as p } from "../primitives/input.js";
+const a = r(
+  ({ className: i, ...t }, e) => /* @__PURE__ */ m(
+    p,
     {
-      ...i,
-      className: m(t, "gi-input-file"),
+      "data-testid": t.dataTestid,
+      ...t,
+      className: o(i, "gi-input-file"),
       type: "file",
       multiple: !0,
-      ref: p
+      ref: e
     }
   )
 );
-f.displayName = "InputFile";
+a.displayName = "InputFile";
 export {
-  f as InputFile
+  a as InputFile
 };

package/dist/input-file/types.d.ts

@@ -1 +1,3 @@
-export type InputFileProps = React.InputHTMLAttributes<Omit<HTMLInputElement, 'type'>>;
+export type InputFileProps = {
+    dataTestid?: string;
+} & React.InputHTMLAttributes<Omit<HTMLInputElement, 'type'>>;

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

@@ -17,6 +17,7 @@ export declare const InputText: import('react').ForwardRefExoticComponent<import
     halfFluid?: boolean;
     clearButtonEnabled?: boolean;
     containerProps?: any;
+    dataTestId?: string;
 } & import('react').RefAttributes<HTMLInputElement>>;
 export declare const InputTextTableCell: import('react').ForwardRefExoticComponent<import('react').InputHTMLAttributes<HTMLInputElement> & {
     prefix?: React.ReactNode;
@@ -35,6 +36,7 @@ export declare const InputTextTableCell: import('react').ForwardRefExoticCompone
     halfFluid?: boolean;
     clearButtonEnabled?: boolean;
     containerProps?: any;
+    dataTestId?: string;
 } & {
     error?: boolean;
     disabled?: boolean;