@ogcio/design-system-react 1.11.0 → 1.11.2

package/dist/card/card-legacy.d.ts

@@ -0,0 +1,5 @@
+import { CardProps } from './types.js';
+export declare const CardLegacy: {
+    ({ type, title, inset, subTitle, media, content, action, href, tag, dataTestid, titleAsChild, children, }: CardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/card/card-legacy.js

@@ -0,0 +1,68 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Button as b } from "../button/button.js";
+import { translate as c } from "../i18n/utility.js";
+import { Link as u } from "../link/link.js";
+import { CardNext as k, CardMedia as T, CardContainer as L, CardHeader as V, CardTitle as $, CardSubtitle as j, CardTag as A, CardDescription as B, CardAction as H } from "./card-next.js";
+const N = ({
+  type: C = "vertical",
+  title: d,
+  inset: t = "none",
+  subTitle: p,
+  media: o,
+  content: m,
+  action: h,
+  href: n,
+  tag: l,
+  dataTestid: s,
+  titleAsChild: a,
+  children: y
+}) => {
+  const f = () => !d || !n && !a ? d || "" : /* @__PURE__ */ e(
+    u,
+    {
+      href: n,
+      asChild: a,
+      "aria-label": c("card.cardHeader", {
+        title: d,
+        defaultValue: `Card link: ${d}`
+      }),
+      children: a ? y : d
+    }
+  ), x = (r) => r.type === "link" ? /* @__PURE__ */ e(
+    u,
+    {
+      ...r,
+      "aria-label": c("card.actionLink", {
+        children: r.children,
+        defaultValue: `Action link: ${r.children}`
+      }),
+      children: r.children
+    }
+  ) : /* @__PURE__ */ e(
+    b,
+    {
+      ...r,
+      "aria-label": c("card.actionButton", {
+        children: r.children,
+        defaultValue: `Action button: ${r.children}`
+      }),
+      children: r.children
+    }
+  );
+  return /* @__PURE__ */ i(k, { inset: t, type: C, dataTestid: s, children: [
+    o && /* @__PURE__ */ e(T, { media: o, href: n }),
+    /* @__PURE__ */ i(L, { inset: t, children: [
+      /* @__PURE__ */ i(V, { children: [
+        /* @__PURE__ */ e($, { children: f() }),
+        /* @__PURE__ */ e(j, { children: p }),
+        l && /* @__PURE__ */ e(A, { text: l.text, type: l.type })
+      ] }),
+      /* @__PURE__ */ e(B, { children: m }),
+      h && /* @__PURE__ */ e(H, { children: x(h) })
+    ] })
+  ] });
+};
+N.displayName = "CardLegacy";
+export {
+  N as CardLegacy
+};

package/dist/card/card-next.d.ts

@@ -0,0 +1,13 @@
+import { Context, FC } from 'react';
+import { TagProps } from '../tag/tag.js';
+import { CardDescriptionProps, CardContainerProps, CardActionProps, CardHeaderProps, CardMediaProps, CardNextProps, CardSubtitleProps, CardTitleProps } from './types.js';
+export declare function useRequiredContext(context: Context<boolean>, componentName: string, parentName: string): true;
+export declare const CardNext: FC<CardNextProps>;
+export declare const CardMedia: FC<CardMediaProps>;
+export declare const CardContainer: FC<CardContainerProps>;
+export declare const CardTitle: FC<CardTitleProps>;
+export declare const CardSubtitle: FC<CardSubtitleProps>;
+export declare const CardTag: FC<TagProps>;
+export declare const CardHeader: FC<CardHeaderProps>;
+export declare const CardDescription: FC<CardDescriptionProps>;
+export declare const CardAction: FC<CardActionProps>;

package/dist/card/card-next.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { createContext as l, useContext as m, useMemo as f, Children as p, isValidElement as v } from "react";
+import { Icon as N } from "../icon/icon.js";
+import { Paragraph as h } from "../paragraph/paragraph.js";
+import { Tag as x } from "../tag/tag.js";
+const u = l(!1), c = l(!1), o = l(!1);
+function i(e, a, t) {
+  if (!m(e))
+    throw new Error(`${a} must be used inside <${t}>`);
+  return !0;
+}
+const P = ({
+  children: e,
+  inset: a,
+  type: t = "vertical",
+  dataTestid: n
+}) => {
+  const d = f(() => {
+    const s = `gi-card-inset-${a || "none"}`;
+    return `gi-card gi-card-${t} ${s} gi-not-prose`;
+  }, [t, a]);
+  return /* @__PURE__ */ r(u.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: d, "data-testid": n, children: e }) });
+}, j = ({ media: e, href: a }) => {
+  if (i(u, "CardMedia", "Card"), !e)
+    return null;
+  switch (e.type) {
+    case "image": {
+      const { src: t, alt: n, aspectRatio: d } = e.config;
+      return /* @__PURE__ */ r("div", { className: "gi-card-image", children: /* @__PURE__ */ r("a", { href: a, children: /* @__PURE__ */ r(
+        "img",
+        {
+          src: t,
+          alt: n,
+          style: d ? { aspectRatio: d } : void 0,
+          className: d ? "gi-w-full" : void 0
+        }
+      ) }) });
+    }
+    case "icon":
+      return /* @__PURE__ */ r("div", { className: "gi-card-icon", "aria-hidden": "true", children: /* @__PURE__ */ r("a", { href: a, children: /* @__PURE__ */ r(N, { ...e.config }) }) });
+    case "iframe":
+      return /* @__PURE__ */ r("div", { className: "gi-card-iframe", children: /* @__PURE__ */ r("iframe", { ...e.config }) });
+    default:
+      return null;
+  }
+}, E = ({
+  children: e,
+  inset: a = "none"
+}) => (i(u, "CardContainer", "Card"), /* @__PURE__ */ r(o.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: `gi-card-content gi-card-inset-${a || "none"}`, children: e }) })), M = ({ children: e }) => (i(c, "CardTitle", "CardHeader"), e ? /* @__PURE__ */ r("div", { className: "gi-card-title", children: e }) : null), A = ({ children: e }) => (i(c, "CardSubtitle", "CardHeader"), e ? /* @__PURE__ */ r("div", { className: "gi-card-subheading", children: e }) : null), T = ({ text: e, type: a }) => (i(c, "CardTag", "CardHeader"), /* @__PURE__ */ r("div", { className: "gi-card-tag", children: /* @__PURE__ */ r(x, { text: e, type: a }) }));
+Object.defineProperty(T, "componentType", {
+  value: "CardTag",
+  writable: !1,
+  enumerable: !1
+});
+const D = ({ children: e }) => {
+  i(o, "CardHeader", "CardContainer");
+  const a = [], t = [];
+  return p.forEach(e, (n) => {
+    var s, C;
+    if (!v(n))
+      return;
+    (((s = n == null ? void 0 : n.type) == null ? void 0 : s.componentType) || ((C = n.props) == null ? void 0 : C.__mdxType)) === "CardTag" ? t.push(n) : a.push(n);
+  }), /* @__PURE__ */ r(c.Provider, { value: !0, children: /* @__PURE__ */ g("div", { className: "gi-card-header", children: [
+    /* @__PURE__ */ r("div", { className: "gi-card-heading", children: a }),
+    t
+  ] }) });
+}, R = ({
+  children: e
+}) => (i(o, "CardDescription", "CardContainer"), e ? /* @__PURE__ */ r("div", { className: "gi-card-paragraph", children: /* @__PURE__ */ r(h, { size: "sm", children: e }) }) : null), S = ({
+  children: e
+}) => (i(o, "CardAction", "CardContainer"), /* @__PURE__ */ r("div", { className: "gi-card-action", children: e }));
+export {
+  S as CardAction,
+  E as CardContainer,
+  R as CardDescription,
+  D as CardHeader,
+  j as CardMedia,
+  P as CardNext,
+  A as CardSubtitle,
+  T as CardTag,
+  M as CardTitle,
+  i as useRequiredContext
+};

package/dist/card/card.d.ts

@@ -0,0 +1,2 @@
+import { CardProps } from './types.js';
+export declare const Card: (props: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/card/card.js

@@ -0,0 +1,26 @@
+import { jsx as t } from "react/jsx-runtime";
+import { CardLegacy as a } from "./card-legacy.js";
+import { CardNext as n } from "./card-next.js";
+const r = [
+  "title",
+  "subTitle",
+  "href",
+  "media",
+  "tag",
+  "content",
+  "action",
+  "titleAsChild"
+], l = (e) => r.some((i) => i in e) ? (console.warn(
+  "[Card] Using legacy props. Please migrate to the new composable API."
+), /* @__PURE__ */ t(a, { ...e })) : /* @__PURE__ */ t(
+  n,
+  {
+    inset: e.inset,
+    type: e.type,
+    dataTestid: e.dataTestid,
+    children: e.children
+  }
+);
+export {
+  l as Card
+};

package/dist/card/card.test.d.ts

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

package/dist/card/card.test.js

@@ -0,0 +1,130 @@
+import { jsx as c } from "react/jsx-runtime";
+import { c as n, r as o } from "../test-utilities-BS7B3BF-.js";
+import { Card as a } from "./card.js";
+describe("govieCard", () => {
+  afterEach(n);
+  const i = (t) => o(/* @__PURE__ */ c(a, { ...t }));
+  it("should render a card with title and content", () => {
+    const t = i({
+      type: "vertical",
+      title: "Card Title",
+      content: "This is the card content."
+    }), e = t.getByText("Card Title"), r = t.getByText("This is the card content.");
+    expect(e).toBeTruthy(), expect(r).toBeTruthy(), expect(e.tagName).toBe("DIV"), expect(r.tagName).toBe("P");
+  }), it("should render a horizontal card layout", () => {
+    const e = i({
+      type: "horizontal",
+      title: "Horizontal Card",
+      content: "This is the content of a horizontal card."
+    }).container.querySelector(".gi-card-horizontal");
+    expect(e).toBeTruthy();
+  }), it("should render a vertical card layout", () => {
+    const e = i({
+      type: "vertical",
+      title: "Vertical Card",
+      content: "This is the content of a vertical card."
+    }).container.querySelector(".gi-card-vertical");
+    expect(e).toBeTruthy();
+  }), it('should render an image when media type is "image"', () => {
+    const { container: t } = i({
+      type: "vertical",
+      title: "Card with Image",
+      media: {
+        type: "image",
+        config: {
+          src: "SOME_PATH",
+          alt: "Test image"
+        }
+      },
+      href: "#"
+    }), e = t.querySelector("img");
+    expect(e).toBeTruthy(), expect(e.getAttribute("src")).toBe("SOME_PATH"), expect(e.getAttribute("alt")).toBe("Test image");
+  }), it("should render an image with aspect ratio when provided", () => {
+    const { container: t } = i({
+      type: "vertical",
+      title: "Card with Image",
+      media: {
+        type: "image",
+        config: {
+          src: "SOME_PATH",
+          alt: "Test image",
+          aspectRatio: "16/9"
+        }
+      },
+      href: "#"
+    }), e = t.querySelector("img");
+    expect(e).toBeTruthy(), expect(e.getAttribute("style")).toBe("aspect-ratio: 16/9;");
+  }), it('should render an icon when media type is "icon"', () => {
+    var r;
+    const e = i({
+      type: "horizontal",
+      title: "Card with Icon",
+      media: {
+        type: "icon",
+        config: {
+          icon: "download",
+          size: "xl",
+          className: "gi-text-gray-500"
+        }
+      }
+    }).getByTestId("govie-icon");
+    expect(e).toBeTruthy(), expect((r = e.textContent) == null ? void 0 : r.trim()).toBe("download"), expect(e.classList.contains("gi-text-gray-500")).toBe(!0);
+  }), it('should render an iframe when media type is "iframe"', () => {
+    const { container: t } = i({
+      type: "vertical",
+      title: "Card with Iframe",
+      media: {
+        type: "iframe",
+        config: {
+          src: "https://www.youtube.com/embed/test",
+          title: "Test video",
+          allowFullScreen: !0
+        }
+      }
+    }), e = t.querySelector("iframe");
+    expect(e).toBeTruthy(), expect(e.getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/test"
+    ), expect(e.getAttribute("title")).toBe("Test video"), expect(e.getAttribute("allowFullScreen")).not.toBeNull();
+  }), it("should render actions if actions prop is provided", () => {
+    const e = i({
+      type: "vertical",
+      title: "Card with Actions",
+      content: "This is the card content with actions.",
+      action: { type: "link", href: "#", children: "Action 1" }
+    }).getByText("Action 1");
+    expect(e).toBeTruthy(), expect(e.getAttribute("href")).toBe("#");
+  }), it('should render a link if "href" prop is provided for title', () => {
+    const e = i({
+      type: "vertical",
+      title: "Linked Title",
+      href: "#",
+      content: "Content for a card with a link."
+    }).getByText("Linked Title");
+    expect(e.tagName).toBe("A"), expect(e.getAttribute("href")).toBe("#");
+  }), it('should render a subtitle if "subTitle" prop is provided', () => {
+    const e = i({
+      type: "vertical",
+      title: "Card with Subtitle",
+      subTitle: "This is the subtitle",
+      content: "Content for a card with a subtitle."
+    }).getByText("This is the subtitle");
+    expect(e.tagName).toBe("DIV"), expect(e.classList.contains("gi-card-subheading")).toBe(!0);
+  }), it('should render a tag if "tag" prop is provided', () => {
+    const e = i({
+      type: "vertical",
+      title: "Card with Tag",
+      content: "Content for a card with a tag.",
+      tag: {
+        text: "New",
+        type: "success"
+      }
+    }).getByText("New");
+    expect(e).toBeTruthy();
+  }), it("should pass axe accessibility tests", async () => {
+    await i({
+      type: "vertical",
+      title: "Accessible Card",
+      content: "Accessible content for the card."
+    }).axe();
+  });
+});

package/dist/card/types.d.ts

@@ -0,0 +1,92 @@
+import { ReactElement } from 'react';
+import { Button } from '../button/button.js';
+import { ButtonProps } from '../button/types.js';
+import { IconProps } from '../icon/icon.js';
+import { Link, LinkProps } from '../link/link.js';
+import { TagProps } from '../tag/tag.js';
+import { CardAction, CardContainer, CardDescription, CardMedia, CardHeader, CardTitle, CardSubtitle, CardTag } from './card-next.js';
+type CardNextChild = ReactElement<typeof CardMedia> | ReactElement<typeof CardContainer> | ReactElement | undefined | null;
+type CardContainerChild = ReactElement<typeof CardHeader> | ReactElement<typeof CardDescription> | ReactElement<typeof CardAction> | undefined;
+type CardHeaderChild = ReactElement<typeof CardTitle> | ReactElement<typeof CardSubtitle> | ReactElement<typeof CardTag> | undefined;
+type CardActionChild = ReactElement<typeof Button> | ReactElement<typeof Link>;
+type CardTitleChild = ReactElement<typeof Link> | string;
+type InsetProps = 'body' | 'full' | 'none';
+type TypeProps = 'vertical' | 'horizontal';
+export type Action = (ButtonProps & {
+    type: 'button';
+}) | (LinkProps & {
+    type: 'link';
+});
+export type ImagePropTypes = {
+    src: string;
+    alt?: string;
+    aspectRatio?: '4/3' | '1/1' | `${number}/${number}`;
+};
+export type IframePropTypes = {
+    src: string;
+    title?: string;
+    allowFullScreen?: boolean;
+    allow?: string;
+};
+export type MediaContent = {
+    type: 'image';
+    config: ImagePropTypes;
+} | {
+    type: 'icon';
+    config: IconProps;
+} | {
+    type: 'iframe';
+    config: IframePropTypes;
+};
+export type CardProps = {
+    type?: TypeProps;
+    inset?: InsetProps;
+    children?: CardNextChild | CardNextChild[] | null;
+    dataTestid?: string;
+    /** @deprecated Use <CardTitle> instead */
+    title?: string;
+    /** @deprecated Use <CardTitle subtitle=""> instead */
+    subTitle?: string;
+    /** @deprecated Use <CardAction> with a n action component (e.g: Button, Link) instead */
+    action?: Action;
+    /** @deprecated Use <CardDescription> instead */
+    content?: string;
+    /** @deprecated Use <CardMedia> instead */
+    media?: MediaContent;
+    /** @deprecated Use <CardHeader tag={}> instead */
+    tag?: TagProps;
+    /** @deprecated Use <Link> around <CardTitle> instead */
+    href?: string;
+    /** @deprecated Use <CardTitle> */
+    titleAsChild?: boolean;
+};
+export type CardContainerProps = {
+    children: CardContainerChild | CardContainerChild[];
+    inset?: InsetProps;
+};
+export type CardDescriptionProps = {
+    children?: string;
+};
+export type CardActionProps = {
+    children: CardActionChild | CardActionChild[];
+};
+export type CardNextProps = {
+    children: CardNextChild | CardNextChild[];
+    inset?: InsetProps;
+    type?: TypeProps;
+    dataTestid?: string;
+};
+export type CardHeaderProps = {
+    children: CardHeaderChild | CardHeaderChild[];
+};
+export type CardTitleProps = {
+    children: CardTitleChild;
+};
+export type CardSubtitleProps = {
+    children?: string;
+};
+export type CardMediaProps = {
+    media: MediaContent;
+    href?: string;
+};
+export {};

package/dist/card/types.js

@@ -0,0 +1 @@
+

package/dist/checkbox/checkbox-group.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @deprecated Use <InputCheckboxGroup /> instead of <CheckboxGroup />.
+ */
+export declare const CheckboxGroup: import('react').FC<import('react').PropsWithChildren<import('../index.js').InputCheckboxGroupProps>>;

package/dist/checkbox/checkbox-group.js

@@ -0,0 +1,7 @@
+"use client";
+import { InputCheckboxGroup as o } from "../input-checkbox-group/input-checkbox-group.js";
+const e = o;
+e.displayName = "CheckboxGroup";
+export {
+  e as CheckboxGroup
+};

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @deprecated Use <InputCheckbox /> instead of <Checkbox />.
+ */
+export declare const Checkbox: import('react').FC<import('../index.js').InputCheckboxProps>;

package/dist/checkbox/checkbox.js

@@ -0,0 +1,7 @@
+"use client";
+import { InputCheckbox as e } from "../input-checkbox/input-checkbox.js";
+const o = e;
+o.displayName = "Checkbox";
+export {
+  o as Checkbox
+};

package/dist/checkbox/types.d.ts

@@ -0,0 +1,14 @@
+import { InputCheckboxProps, InputCheckboxSizeEnumType } from '../input-checkbox/types.js';
+import { InputCheckboxGroupProps } from '../input-checkbox-group/types.js';
+/** @deprecated Use InputCheckboxSizeEnum instead */
+export declare const CheckboxSizeEnum: {
+    readonly Large: "lg";
+    readonly Medium: "md";
+    readonly Small: "sm";
+};
+/** @deprecated Use InputCheckboxSizeEnumType instead */
+export type CheckboxSizeEnumType = InputCheckboxSizeEnumType;
+/** @deprecated Use InputCheckboxProps instead */
+export type CheckboxProps = InputCheckboxProps;
+/** @deprecated Use InputCheckboxGroupProps instead */
+export type CheckboxGroupProps = InputCheckboxGroupProps;

package/dist/checkbox/types.js

@@ -0,0 +1,5 @@
+import { InputCheckboxSizeEnum as o } from "../input-checkbox/types.js";
+const m = o;
+export {
+  m as CheckboxSizeEnum
+};

package/dist/chip/chip.d.ts

@@ -0,0 +1,9 @@
+export type ChipProps = {
+    label: string;
+    onClose: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    className?: string;
+};
+export declare const Chip: {
+    ({ label, className, onClose }: ChipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/chip/chip.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { useId as l } from "react";
+import { cn as p } from "../cn.js";
+import { translate as c } from "../i18n/utility.js";
+import { Icon as s } from "../icon/icon.js";
+const m = ({ label: i, className: t, onClose: n = () => null }) => {
+  const o = `chip-description-${l()}`, a = (e) => {
+    ["Enter", " "].includes(e.key) && (e.preventDefault(), n(e));
+  };
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: p(t, "gi-chip"),
+      "aria-label": c("chip.label", { label: i, defaultValue: `chip: ${i}` }),
+      "aria-describedby": o,
+      tabIndex: 0,
+      onKeyDown: a,
+      children: [
+        /* @__PURE__ */ r("span", { id: o, children: i }),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            role: "button",
+            "aria-label": c("chip.removeChip", { defaultValue: "remove chip" }),
+            onClick: n,
+            children: /* @__PURE__ */ r(s, { icon: "close", size: "sm" })
+          }
+        )
+      ]
+    }
+  );
+};
+m.displayName = "Chip";
+export {
+  m as Chip
+};

package/dist/cn.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/cn.js

@@ -0,0 +1,19 @@
+function i(r) {
+  var f, n, t = "";
+  if (typeof r == "string" || typeof r == "number") t += r;
+  else if (typeof r == "object") if (Array.isArray(r)) {
+    var o = r.length;
+    for (f = 0; f < o; f++) r[f] && (n = i(r[f])) && (t && (t += " "), t += n);
+  } else for (n in r) r[n] && (t && (t += " "), t += n);
+  return t;
+}
+function u() {
+  for (var r, f, n = 0, t = "", o = arguments.length; n < o; n++) (r = arguments[n]) && (f = i(r)) && (t && (t += " "), t += f);
+  return t;
+}
+function a(...r) {
+  return u(r);
+}
+export {
+  a as cn
+};

package/dist/combo-box/combo-box.content.d.ts

@@ -0,0 +1,12 @@
+export declare const organisationOptions: {
+    label: string;
+    value: string;
+}[];
+export declare const categoryOptions: {
+    label: string;
+    value: string;
+}[];
+export declare const topicOptions: {
+    label: string;
+    value: string;
+}[];