@ogcio/design-system-react 1.11.0 → 1.11.2

package/dist/header/helper.js

@@ -0,0 +1,79 @@
+const i = "gi-hidden", d = "gi-block", f = () => {
+  const e = document.querySelectorAll(
+    "[id^='ItemActionTrigger-']"
+  ), a = document.querySelectorAll("[id^='SlotContainer-']"), c = document.querySelector(
+    "#SearchTrigger"
+  );
+  return {
+    itemSlotActions: e,
+    slotContainers: a,
+    searchTrigger: c
+  };
+}, A = (e) => {
+  const { itemSlotActions: a } = f();
+  if (e.checked)
+    for (const c of a) {
+      const h = c;
+      h.checked = !1, h.dispatchEvent(
+        new CustomEvent("change", {
+          detail: {
+            fromSearchTrigger: !0
+          }
+        })
+      );
+    }
+}, v = (e) => {
+  A(e.target);
+}, T = () => {
+  const { itemSlotActions: e, slotContainers: a, searchTrigger: c } = f();
+  if (e.length > 0) {
+    const h = (t, o, m) => {
+      const l = t.dataset.index || "", s = document.querySelector(
+        `#ItemIconActionTrigger-${l}`
+      ), r = document.querySelector(
+        `#ItemCloseTrigger-${l}`
+      ), { itemSlotActions: g } = f(), u = document.querySelector(
+        `#SlotContainer-${l}`
+      );
+      if (!o || m)
+        for (const n of a)
+          n.classList.remove(d), n.classList.add(i);
+      if (t.checked && !o)
+        s.classList.add(i), r.classList.add(d), r.classList.remove(i), u.classList.remove(i), u.classList.add(d);
+      else {
+        r.classList.add(i), r.classList.remove(d), s.classList.add(d), s.classList.remove(i);
+        return;
+      }
+      const L = [...g].filter(
+        (n) => n.checked && n.id !== t.id
+      );
+      for (const n of L)
+        n.checked = !1, n.dispatchEvent(
+          new CustomEvent("change", {
+            detail: {
+              fromFilteredItems: !0
+            }
+          })
+        );
+    }, S = (t) => {
+      var r, g;
+      const o = t, m = (r = o == null ? void 0 : o.detail) == null ? void 0 : r.fromFilteredItems, l = (g = o == null ? void 0 : o.detail) == null ? void 0 : g.fromSearchTrigger, s = t.target;
+      h(s, m, l), c != null && c.checked && (s != null && s.checked) && (c.checked = !1, c.dispatchEvent(new Event("change", { bubbles: !0 })));
+    };
+    for (const t of e)
+      t == null || t.addEventListener("change", S);
+    return () => {
+      for (const t of e)
+        t == null || t.removeEventListener("change", S);
+    };
+  }
+}, k = () => {
+  const e = document.querySelector("#SearchTrigger");
+  return e && e.addEventListener("change", v), () => {
+    e && e.removeEventListener("change", v);
+  };
+};
+export {
+  T as attachEventsToItemActionTriggers,
+  k as attachEventsToSearchTrigger
+};

package/dist/header/types.d.ts

@@ -0,0 +1,76 @@
+import { LogoProps } from '../common/types.js';
+import { DrawerPosition } from '../drawer/drawer.js';
+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';
+type CommonProps = {
+    showItemMode?: HeaderItemMode;
+};
+type ConditionalProps = {
+    label?: string;
+    ariaLabel?: string;
+    icon?: IconId;
+    component: React.ReactNode;
+    href?: never;
+    external?: never;
+    onClick?: never;
+    slotAppearance?: HeaderItemAppearance;
+    drawerPosition?: DrawerPosition;
+    itemType: 'slot';
+} | {
+    label?: never;
+    ariaLabel?: string;
+    icon?: never;
+    component?: never;
+    href?: never;
+    external?: never;
+    onClick?: never;
+    slotAppearance?: never;
+    drawerPosition?: never;
+    itemType: 'divider';
+} | {
+    label?: string;
+    ariaLabel?: string;
+    icon?: IconId;
+    component?: never;
+    href?: string;
+    external?: boolean;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    slotAppearance?: never;
+    drawerPosition?: never;
+    itemType: 'link';
+} | {
+    label?: never;
+    ariaLabel?: string;
+    icon?: never;
+    component: React.ReactNode;
+    href?: never;
+    external?: never;
+    onClick?: never;
+    slotAppearance?: never;
+    drawerPosition?: never;
+    itemType: 'custom-link';
+};
+export type HeaderItem = CommonProps & ConditionalProps;
+export type SecondaryLink = {
+    href: string;
+    label: string;
+    slot?: undefined;
+} | {
+    slot: React.ReactNode;
+    href?: undefined;
+    label?: undefined;
+};
+export type HeaderProps = {
+    title?: string;
+    logo?: LogoProps;
+    addDefaultMobileMenu?: boolean;
+    mobileMenuLabel?: string;
+    items?: HeaderItem[];
+    secondaryLinks?: SecondaryLink[];
+    fullWidth?: boolean;
+    showTitleOnMobile?: boolean;
+    dataTestid?: string;
+};
+export {};

package/dist/header/types.js

@@ -0,0 +1 @@
+

package/dist/heading/heading.d.ts

@@ -0,0 +1,82 @@
+import { VariantProps } from 'tailwind-variants';
+export declare const sizeVariants: {
+    xl: string;
+    lg: string;
+    md: string;
+    sm: string;
+    xs: string;
+    '2xs': string;
+};
+export declare const asVariants: {
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+};
+export declare const headingVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        '2xs': string;
+    };
+    as: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, {
+    text: string;
+    base: string;
+}, undefined, TVConfig<V, EV>, {
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        '2xs': string;
+    };
+    as: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, {
+    text: string;
+    base: string;
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        '2xs': string;
+    };
+    as: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, {
+    text: string;
+    base: string;
+}, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;
+export type HeadingProps = VariantProps<typeof headingVariants> & {
+    caption?: string;
+} & React.HTMLAttributes<HTMLHeadingElement>;
+export declare function Heading({ as, size, children, caption, className, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/heading/heading.js

@@ -0,0 +1,50 @@
+import { jsxs as x, Fragment as o, jsx as s } from "react/jsx-runtime";
+import { c as l } from "../index-DNkhmzZp.js";
+import { cn as e } from "../cn.js";
+const c = {
+  xl: "gi-heading-xl",
+  lg: "gi-heading-lg",
+  md: "gi-heading-md",
+  sm: "gi-heading-sm",
+  xs: "gi-heading-xs",
+  "2xs": "gi-heading-2xs"
+}, f = {
+  h1: "gi-heading-xl",
+  h2: "gi-heading-lg",
+  h3: "gi-heading-md",
+  h4: "gi-heading-sm",
+  h5: "gi-heading-xs",
+  h6: "gi-heading-2xs"
+}, p = l({
+  slots: {
+    text: "gi-text-gray-600",
+    base: ""
+  },
+  variants: {
+    size: c,
+    as: f
+  },
+  defaultVariants: {
+    as: "h1"
+  }
+});
+function j({
+  as: i,
+  size: g,
+  children: n,
+  caption: a,
+  className: t,
+  ...h
+}) {
+  const d = i || "h1", { text: r, base: m } = p({ as: i, size: g });
+  return /* @__PURE__ */ x(o, { children: [
+    a && /* @__PURE__ */ s("span", { className: e(r()), "aria-hidden": "true", children: a }),
+    /* @__PURE__ */ s(d, { className: e(m(), t), ...h, children: n })
+  ] });
+}
+export {
+  j as Heading,
+  f as asVariants,
+  p as headingVariants,
+  c as sizeVariants
+};

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

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

package/dist/hint-text/hint-text.js

@@ -0,0 +1,30 @@
+import { jsx as n } from "react/jsx-runtime";
+import { c as a } from "../index-DNkhmzZp.js";
+const d = {
+  Small: "sm",
+  Medium: "md",
+  Large: "lg"
+}, l = a({
+  base: "gi-hint-text",
+  variants: {
+    size: {
+      sm: "gi-hint-text-sm",
+      md: "gi-hint-text-md",
+      lg: "gi-hint-text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), r = ({
+  text: t,
+  children: i,
+  className: e,
+  size: m = d.Medium,
+  ...s
+}) => /* @__PURE__ */ n("div", { className: l({ size: m, className: e }), ...s, children: i ?? t });
+r.displayName = "HintText";
+export {
+  d as HintSize,
+  r as HintText
+};

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

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

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

@@ -0,0 +1,31 @@
+import { jsx as n } from "react/jsx-runtime";
+import { c, r } from "../test-utilities-BS7B3BF-.js";
+import { HintText as h, HintSize as i } from "./hint-text.js";
+describe("govieHintText", () => {
+  afterEach(c);
+  const s = (e) => r(/* @__PURE__ */ n(h, { ...e }));
+  it('should render hint text with the correct content for size "md"', () => {
+    const t = s({
+      size: i.Medium,
+      text: "This is medium hint text"
+    }).getByText("This is medium hint text");
+    expect(t).toBeTruthy(), expect(t.tagName).toBe("DIV");
+  }), it("should render small hint text with the correct class", () => {
+    const t = s({
+      size: i.Small,
+      text: "This is small hint text"
+    }).getByText("This is small hint text");
+    expect(t).toBeTruthy(), expect(t.classList.contains("gi-hint-text-sm")).toBe(!0);
+  }), it("should render large hint text with the correct class", () => {
+    const t = s({
+      size: i.Large,
+      text: "This is large hint text"
+    }).getByText("This is large hint text");
+    expect(t).toBeTruthy(), expect(t.classList.contains("gi-hint-text-lg")).toBe(!0);
+  }), it("should pass axe accessibility tests", async () => {
+    await s({
+      size: i.Medium,
+      text: "Accessible hint text"
+    }).axe();
+  });
+});

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

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { HintSize } from './hint-text.js';
+export type HintSizeType = (typeof HintSize)[keyof typeof HintSize];
+export type HintTextProps = PropsWithChildren<React.HTMLAttributes<HTMLElement> & {
+    text?: string | React.ReactElement;
+    size?: HintSizeType;
+}>;

package/dist/hint-text/types.js

@@ -0,0 +1 @@
+

package/dist/hooks/use-breakpoint.d.ts

@@ -0,0 +1,12 @@
+export declare const Breakpoint: {
+    readonly ExtraSmall: "xs";
+    readonly Small: "sm";
+    readonly Medium: "md";
+    readonly Large: "lg";
+    readonly ExtraLarge: "xl";
+};
+export type BreakpointType = (typeof Breakpoint)[keyof typeof Breakpoint];
+export declare const useBreakpoint: () => {
+    breakpoint: BreakpointType | null;
+    width: number | null;
+};

package/dist/hooks/use-breakpoint.js

@@ -0,0 +1,24 @@
+"use client";
+import { useState as i, useEffect as o } from "react";
+const r = {
+  ExtraSmall: "xs",
+  Small: "sm",
+  Medium: "md",
+  Large: "lg",
+  ExtraLarge: "xl"
+}, u = (e) => e < 480 ? r.ExtraSmall : e < 640 ? r.Small : e < 768 ? r.Medium : e < 1024 ? r.Large : r.ExtraLarge, c = () => {
+  const [e, a] = i(null), [s, l] = i(null);
+  return o(() => {
+    const t = () => {
+      const n = globalThis.window.innerWidth;
+      l(n), a(u(n));
+    };
+    return t(), globalThis.window.addEventListener("resize", t), () => {
+      globalThis.window.removeEventListener("resize", t);
+    };
+  }, []), { breakpoint: e, width: s };
+};
+export {
+  r as Breakpoint,
+  c as useBreakpoint
+};

package/dist/hooks/use-dom-id.d.ts

@@ -0,0 +1 @@
+export declare function useDomId(): string;

package/dist/hooks/use-dom-id.js

@@ -0,0 +1,8 @@
+import { useId as o, useMemo as r } from "react";
+function u() {
+  const e = o();
+  return r(() => e.replaceAll(":", "-"), [e]);
+}
+export {
+  u as useDomId
+};

package/dist/i18n/config.d.ts

@@ -0,0 +1,7 @@
+import { Resource } from 'i18next';
+export { default as i18next } from 'i18next';
+export declare const initI18n: (config: {
+    resources: Resource;
+    lng?: string;
+    fallbackLng?: string;
+}) => void;

package/dist/i18n/config.js

@@ -0,0 +1,13 @@
+import { a as n } from "../i18next-DxWa09nx.js";
+import { i as l } from "../i18next-DxWa09nx.js";
+const a = (e) => {
+  n({
+    resources: e.resources,
+    lng: e.lng || "en",
+    fallbackLng: e.fallbackLng || "en"
+  });
+};
+export {
+  l as i18next,
+  a as initI18n
+};

package/dist/i18n/utility.d.ts

@@ -0,0 +1 @@
+export declare const translate: (key: string, options?: Record<string, any>) => any;

package/dist/i18n/utility.js

@@ -0,0 +1,5 @@
+import { i as e, t } from "../i18next-DxWa09nx.js";
+const u = (a, r) => e.isInitialized ? t(a, r) : (r == null ? void 0 : r.defaultValue) || a;
+export {
+  u as translate
+};