@ogcio/design-system-react 1.19.0 → 1.21.0

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

@@ -1,5 +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;
+    ({ type, title, inset, subTitle, media, content, action, href, tag, titleAsChild, children, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/card/card-legacy.js

@@ -1,21 +1,21 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Button as b } from "../button/button.js";
+import { Button as k } 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";
+import { CardNext as b, CardMedia as L, CardContainer as T, 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,
+  inset: p = "none",
+  subTitle: t,
   media: o,
   content: m,
   action: h,
   href: n,
   tag: l,
-  dataTestid: s,
   titleAsChild: a,
-  children: y
+  children: s,
+  ...y
 }) => {
   const f = () => !d || !n && !a ? d || "" : /* @__PURE__ */ e(
     u,
@@ -26,7 +26,7 @@ const N = ({
         title: d,
         defaultValue: `Card link: ${d}`
       }),
-      children: a ? y : d
+      children: a ? s : d
     }
   ), x = (r) => r.type === "link" ? /* @__PURE__ */ e(
     u,
@@ -39,7 +39,7 @@ const N = ({
       children: r.children
     }
   ) : /* @__PURE__ */ e(
-    b,
+    k,
     {
       ...r,
       "aria-label": c("card.actionButton", {
@@ -49,12 +49,12 @@ const N = ({
       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: [
+  return /* @__PURE__ */ i(b, { inset: p, type: C, ...y, children: [
+    o && /* @__PURE__ */ e(L, { media: o, href: n }),
+    /* @__PURE__ */ i(T, { children: [
       /* @__PURE__ */ i(V, { children: [
         /* @__PURE__ */ e($, { children: f() }),
-        /* @__PURE__ */ e(j, { children: p }),
+        t && /* @__PURE__ */ e(j, { children: t }),
         l && /* @__PURE__ */ e(A, { text: l.text, type: l.type })
       ] }),
       /* @__PURE__ */ e(B, { children: m }),

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

@@ -1,13 +1,12 @@
 import { Context, FC } from 'react';
-import { TagProps } from '../tag/tag.js';
-import { CardDescriptionProps, CardContainerProps, CardActionProps, CardHeaderProps, CardMediaProps, CardNextProps, CardSubtitleProps, CardTitleProps } from './types.js';
+import { CardDescriptionProps, CardContainerProps, CardActionProps, CardHeaderProps, CardMediaProps, CardNextProps, CardSubtitleProps, CardTitleProps, CardTagProps } 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 CardTag: FC<CardTagProps>;
 export declare const CardHeader: FC<CardHeaderProps>;
 export declare const CardDescription: FC<CardDescriptionProps>;
 export declare const CardAction: FC<CardActionProps>;

package/dist/card/card-next.js

@@ -1,85 +1,250 @@
 "use client";
 import "@ogcio/design-system-react/browser-check";
-import { jsx as r, jsxs as g } from "react/jsx-runtime";
-import { createContext as l, Children as m, isValidElement as f, useContext as p, useMemo 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), o = l(!1), c = l(!1);
-function i(e, a, n) {
-  if (!p(e))
-    throw new Error(`${a} must be used inside <${n}>`);
+import { jsx as r, jsxs as A } from "react/jsx-runtime";
+import { createContext as y, useId as M, useContext as N, Children as P, isValidElement as B, useState as S, useMemo as q, useEffect as F, cloneElement as O } from "react";
+import { cn as d } from "../cn.js";
+import { useBreakpoint as G, Breakpoint as z } from "../hooks/use-breakpoint.js";
+import { Icon as J } from "../icon/icon.js";
+import { Paragraph as K } from "../paragraph/paragraph.js";
+import { Tag as Q } from "../tag/tag.js";
+import { isSpecialComponent as U, getSpecialComponentType as L } from "../utils/utilities.js";
+const $ = (e) => e.ariaLabel ?? e.label ?? e.title ?? e.alt ?? "", E = y(!1), I = y(!1), w = y(!1), x = y(null);
+function u(e, t, a) {
+  if (!N(e))
+    throw new Error(`${t} must be used inside <${a}>`);
   return !0;
 }
-const j = ({
-  children: e,
-  inset: a,
-  type: n = "vertical",
-  dataTestid: t
+const W = (e, t) => e === "full" ? { padding: t } : {}, X = (e, t, a) => {
+  if (e === "body")
+    return a === "horizontal" ? { paddingBlock: t, paddingRight: t } : { paddingInline: t, paddingBottom: t };
+}, se = ({
+  inset: e = "none",
+  insetSpace: t = 16,
+  type: a = "vertical",
+  background: i = "white",
+  className: o,
+  role: n,
+  children: l,
+  ...g
 }) => {
-  const s = v(() => {
-    const d = `gi-card-inset-${a || "none"}`;
-    return `gi-card gi-card-${n} ${d} gi-not-prose`;
-  }, [n, a]);
-  return /* @__PURE__ */ r(u.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: s, "data-testid": t, children: e }) });
-}, E = ({ media: e, href: a }) => {
-  if (i(u, "CardMedia", "Card"), !e)
+  var D, H;
+  const { breakpoint: C } = G(), b = C === z.ExtraSmall || C === z.Small, [m, p] = S(a), [s, v] = S(), [f, k] = S([]), R = q(
+    () => ({
+      setLabelId: (c) => v(c),
+      addDescId: (c) => k(
+        (T) => T.includes(c) ? T : [...T, c]
+      ),
+      labelId: s,
+      descIds: f
+    }),
+    [s, f]
+  ), j = P.toArray(l), h = j.find(
+    (c) => L(c) === "CardContainer"
+  ), V = j.find(
+    (c) => L(c) === "CardMedia"
+  );
+  return F(() => {
+    if (b || a === "vertical") {
+      p("vertical");
+      return;
+    }
+    p("horizontal");
+  }, [b]), /* @__PURE__ */ r(E.Provider, { value: !0, children: /* @__PURE__ */ r(x.Provider, { value: R, children: /* @__PURE__ */ A(
+    "div",
+    {
+      className: d(
+        "gi-card gi-not-prose",
+        {
+          "gi-card-vertical": m === "vertical",
+          "gi-card-horizontal": m === "horizontal",
+          "gi-bg-white": i === "white",
+          "gi-bg-color-surface-system-neutral-layer1": i === "grey"
+        },
+        o
+      ),
+      style: W(e, t),
+      role: n ?? "article",
+      "aria-labelledby": s,
+      "aria-describedby": f != null && f.length ? f.join(" ") : void 0,
+      ...g,
+      children: [
+        V,
+        h ? O(h, {
+          className: d((D = h.props) == null ? void 0 : D.className),
+          style: {
+            ...(H = h.props) == null ? void 0 : H.style,
+            ...X(e, t, m)
+          }
+        }) : null
+      ]
+    }
+  ) }) });
+}, Y = ({ media: e, href: t }) => {
+  if (u(E, "CardMedia", "Card"), !e)
     return null;
   switch (e.type) {
     case "image": {
-      const { src: n, alt: t, aspectRatio: s } = e.config;
-      return /* @__PURE__ */ r("div", { className: "gi-card-image", children: /* @__PURE__ */ r("a", { href: a, children: /* @__PURE__ */ r(
+      const { src: a, alt: i, aspectRatio: o } = e.config ?? {}, n = $(e.config);
+      return /* @__PURE__ */ r("div", { className: "gi-card-image", children: /* @__PURE__ */ r("a", { href: t, "aria-label": n, title: n, children: /* @__PURE__ */ r(
         "img",
         {
-          src: n,
-          alt: t,
-          style: s ? { aspectRatio: s } : void 0,
-          className: s ? "gi-w-full" : void 0
+          src: a,
+          alt: i ?? "",
+          style: o ? { aspectRatio: o } : void 0,
+          className: o ? "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 }) });
+    case "icon": {
+      const a = $(e.config);
+      return /* @__PURE__ */ r("div", { className: "gi-card-icon", children: /* @__PURE__ */ r("a", { href: t, "aria-label": a, title: a, children: /* @__PURE__ */ r(J, { ...e.config, "aria-hidden": "true" }) }) });
+    }
+    case "iframe": {
+      const { title: a } = e.config ?? "Embedded content";
+      return /* @__PURE__ */ r("div", { className: "gi-card-iframe", children: /* @__PURE__ */ r("iframe", { ...e.config, title: a }) });
+    }
     default:
       return null;
   }
-}, M = ({
+};
+Object.defineProperty(Y, "componentType", {
+  value: "CardMedia",
+  writable: !1,
+  enumerable: !1
+});
+const Z = ({
+  children: e,
+  className: t,
+  ...a
+}) => (u(E, "CardContainer", "Card"), /* @__PURE__ */ r(w.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: d("gi-card-content", t), ...a, children: e }) }));
+Object.defineProperty(Z, "componentType", {
+  value: "CardContainer",
+  writable: !1,
+  enumerable: !1
+});
+const ce = ({
   children: e,
-  inset: a = "none"
-}) => (i(u, "CardContainer", "Card"), /* @__PURE__ */ r(c.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: `gi-card-content gi-card-inset-${a || "none"}`, children: e }) })), A = ({ children: e }) => (i(o, "CardTitle", "CardHeader"), e ? /* @__PURE__ */ r("div", { className: "gi-card-title", children: e }) : null), D = ({ children: e }) => (i(o, "CardSubtitle", "CardHeader"), e ? /* @__PURE__ */ r("div", { className: "gi-card-subheading", children: e }) : null), T = ({ text: e, type: a }) => (i(o, "CardTag", "CardHeader"), /* @__PURE__ */ r("div", { className: "gi-card-tag", children: /* @__PURE__ */ r(x, { text: e, type: a }) }));
-Object.defineProperty(T, "componentType", {
+  className: t,
+  truncate: a,
+  id: i,
+  ["aria-level"]: o = 2,
+  ...n
+}) => {
+  u(I, "CardTitle", "CardHeader");
+  const l = typeof e == "string", g = (s) => {
+    var v;
+    return a && B(s) ? O(s, {
+      className: d((v = s.props) == null ? void 0 : v.className, "gi-card-truncate-text")
+    }) : s;
+  }, C = a && !l ? P.map(e, g) : e, b = M(), m = i ?? `card-title-${b}`, p = N(x);
+  return p && p.setLabelId(m), /* @__PURE__ */ r(
+    "div",
+    {
+      className: d(
+        "gi-card-title",
+        {
+          "gi-card-truncate-text": !!a && l
+        },
+        t
+      ),
+      id: m,
+      role: "heading",
+      "aria-level": o,
+      title: l && a ? e.toString() : void 0,
+      ...n,
+      children: C
+    }
+  );
+}, ue = ({
+  children: e,
+  className: t,
+  truncate: a,
+  id: i,
+  ...o
+}) => {
+  u(I, "CardSubtitle", "CardHeader");
+  const n = typeof e == "string" && a ? e : void 0, l = M(), g = i ?? `card-subtitle-${l}`, C = N(x);
+  return C && C.addDescId(g), /* @__PURE__ */ r(
+    "div",
+    {
+      className: d(
+        "gi-card-subheading",
+        {
+          "gi-card-truncate-text": a
+        },
+        t
+      ),
+      id: g,
+      title: n,
+      ...o,
+      children: e
+    }
+  );
+}, _ = ({
+  text: e,
+  type: t,
+  className: a,
+  ...i
+}) => (u(I, "CardTag", "CardHeader"), /* @__PURE__ */ r(
+  "div",
+  {
+    role: "note",
+    "aria-label": typeof e == "string" ? e : void 0,
+    className: d("gi-card-tag", a),
+    ...i,
+    children: /* @__PURE__ */ r(Q, { text: e, type: t })
+  }
+));
+Object.defineProperty(_, "componentType", {
   value: "CardTag",
   writable: !1,
   enumerable: !1
 });
-const R = ({ children: e }) => {
-  i(c, "CardHeader", "CardContainer");
-  const a = [], n = [];
-  return m.forEach(e, (t) => {
-    var d, C;
-    if (!f(t))
-      return;
-    (((d = t == null ? void 0 : t.type) == null ? void 0 : d.componentType) || ((C = t.props) == null ? void 0 : C.__type)) === "CardTag" ? n.push(t) : a.push(t);
-  }), /* @__PURE__ */ r(o.Provider, { value: !0, children: /* @__PURE__ */ g("div", { className: "gi-card-header", children: [
-    /* @__PURE__ */ r("div", { className: "gi-card-heading", children: a }),
-    n
+const Ce = ({
+  children: e,
+  className: t,
+  ...a
+}) => {
+  u(w, "CardHeader", "CardContainer");
+  const i = [], o = [];
+  return P.forEach(e, (n) => {
+    B(n) && (U(n, ["CardTag"]) ? o.push(n) : i.push(n));
+  }), /* @__PURE__ */ r(I.Provider, { value: !0, children: /* @__PURE__ */ A("div", { className: d("gi-card-header", t), role: "group", ...a, children: [
+    /* @__PURE__ */ r("div", { className: "gi-card-heading", children: i }),
+    o
   ] }) });
-}, S = ({
-  children: e
-}) => (i(c, "CardDescription", "CardContainer"), e ? /* @__PURE__ */ r("div", { className: "gi-card-paragraph", children: /* @__PURE__ */ r(h, { size: "sm", children: e }) }) : null), _ = ({
-  children: e
-}) => (i(c, "CardAction", "CardContainer"), /* @__PURE__ */ r("div", { className: "gi-card-action", children: e }));
+}, ge = ({
+  children: e,
+  className: t,
+  id: a,
+  ...i
+}) => {
+  if (u(w, "CardDescription", "CardContainer"), !e)
+    return null;
+  const o = M(), n = a ?? `card-desc-${o}`, l = N(x);
+  return l && l.addDescId(n), /* @__PURE__ */ r("div", { className: d("gi-card-paragraph", t), id: n, ...i, children: /* @__PURE__ */ r(K, { size: "sm", children: e }) });
+}, me = ({
+  children: e,
+  className: t,
+  ...a
+}) => (u(w, "CardAction", "CardContainer"), /* @__PURE__ */ r(
+  "div",
+  {
+    className: d("gi-card-action", t),
+    role: "group",
+    ...a,
+    children: e
+  }
+));
 export {
-  _ as CardAction,
-  M as CardContainer,
-  S as CardDescription,
-  R as CardHeader,
-  E as CardMedia,
-  j as CardNext,
-  D as CardSubtitle,
-  T as CardTag,
-  A as CardTitle,
-  i as useRequiredContext
+  me as CardAction,
+  Z as CardContainer,
+  ge as CardDescription,
+  Ce as CardHeader,
+  Y as CardMedia,
+  se as CardNext,
+  ue as CardSubtitle,
+  _ as CardTag,
+  ce as CardTitle,
+  u as useRequiredContext
 };

package/dist/card/card.js

@@ -1,7 +1,9 @@
-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 = [
+"use client";
+import "@ogcio/design-system-react/browser-check";
+import { jsx as r } from "react/jsx-runtime";
+import { CardLegacy as m } from "./card-legacy.js";
+import { CardNext as g } from "./card-next.js";
+const n = [
   "title",
   "subTitle",
   "href",
@@ -10,17 +12,16 @@ const r = [
   "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
-  }
-);
+], u = (e) => {
+  if (n.some((t) => t in e))
+    return console.warn(
+      "[Card] Using legacy props. Please migrate to the new composable API."
+    ), /* @__PURE__ */ r(m, { ...e });
+  const { inset: o, background: s, type: c, children: i, ...a } = e, d = new Set(n), l = Object.fromEntries(
+    Object.entries(a).filter(([t]) => !d.has(t))
+  );
+  return /* @__PURE__ */ r(g, { inset: o, type: c, background: s, ...l, children: i });
+};
 export {
-  l as Card
+  u as Card
 };

package/dist/card/types.d.ts

@@ -1,15 +1,10 @@
-import { ReactElement } from 'react';
-import { Button } from '../button/button.js';
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { ButtonProps } from '../button/types.js';
 import { IconProps } from '../icon/icon.js';
-import { Link, LinkProps } from '../link/link.js';
+import { LinkProps } from '../link/link.js';
 import { TagProps } from '../tag/tag.js';
-import { CardAction, CardContainer, CardDescription, CardMedia, CardHeader, CardTitle, CardSubtitle, CardTag } from './card-next.js';
+import { CardContainer, CardMedia } 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 & {
@@ -38,11 +33,11 @@ export type MediaContent = {
     type: 'iframe';
     config: IframePropTypes;
 };
-export type CardProps = {
+export type CardProps = ComponentPropsWithoutRef<'div'> & {
     type?: TypeProps;
     inset?: InsetProps;
+    background?: 'grey' | 'white';
     children?: CardNextChild | CardNextChild[] | null;
-    dataTestid?: string;
     /** @deprecated Use <CardTitle> instead */
     title?: string;
     /** @deprecated Use <CardTitle subtitle=""> instead */
@@ -60,33 +55,28 @@ export type CardProps = {
     /** @deprecated Use <CardTitle> */
     titleAsChild?: boolean;
 };
-export type CardContainerProps = {
-    children: CardContainerChild | CardContainerChild[];
-    inset?: InsetProps;
-};
-export type CardDescriptionProps = {
+export type CardContainerProps = ComponentPropsWithoutRef<'div'>;
+export type CardDescriptionProps = ComponentPropsWithoutRef<'div'> & {
     children?: string;
 };
-export type CardActionProps = {
-    children: CardActionChild | CardActionChild[];
-};
-export type CardNextProps = {
-    children: CardNextChild | CardNextChild[];
+export type CardActionProps = ComponentPropsWithoutRef<'div'>;
+export type CardNextProps = ComponentPropsWithoutRef<'div'> & {
     inset?: InsetProps;
+    insetSpace?: number;
     type?: TypeProps;
-    dataTestid?: string;
+    background?: 'grey' | 'white';
 };
-export type CardHeaderProps = {
-    children: CardHeaderChild | CardHeaderChild[];
+export type CardHeaderProps = ComponentPropsWithoutRef<'div'>;
+export type CardTitleProps = ComponentPropsWithoutRef<'div'> & {
+    truncate?: boolean;
 };
-export type CardTitleProps = {
-    children: CardTitleChild;
+export type CardSubtitleProps = ComponentPropsWithoutRef<'div'> & {
+    children: string;
+    truncate?: boolean;
 };
-export type CardSubtitleProps = {
-    children?: string;
-};
-export type CardMediaProps = {
+export type CardMediaProps = Omit<ComponentPropsWithoutRef<'div'> & {
     media: MediaContent;
     href?: string;
-};
+}, 'children'>;
+export type CardTagProps = Omit<ComponentPropsWithoutRef<'div'> & TagProps, 'children'>;
 export {};