@ogcio/design-system-react 1.31.1 → 1.32.0

package/dist/atoms/icons/CheckCircle.js

@@ -0,0 +1,23 @@
+import { jsx as l } from "react/jsx-runtime";
+function a(e) {
+  return /* @__PURE__ */ l(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: e.size ?? 24,
+      height: e.size ?? 24,
+      className: e.className,
+      id: e.id,
+      role: e.label ? "img" : void 0,
+      "aria-label": e.label,
+      "aria-hidden": !e.label,
+      fill: e.color ?? "currentColor",
+      "data-testid": e.dataTestId ?? "check_circle",
+      children: /* @__PURE__ */ l("path", { d: "m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" })
+    }
+  );
+}
+export {
+  a as default
+};

package/dist/atoms/icons/Error.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function Error(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Error;

package/dist/atoms/icons/Error.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+function l(t) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: t.size ?? 24,
+      height: t.size ?? 24,
+      className: t.className,
+      id: t.id,
+      role: t.label ? "img" : void 0,
+      "aria-label": t.label,
+      "aria-hidden": !t.label,
+      fill: t.color ?? "currentColor",
+      "data-testid": t.dataTestId ?? "error",
+      children: /* @__PURE__ */ e("path", { d: "M508.5-291.5Q520-303 520-320t-11.5-28.5Q497-360 480-360t-28.5 11.5Q440-337 440-320t11.5 28.5Q463-280 480-280t28.5-11.5ZM440-440h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" })
+    }
+  );
+}
+export {
+  l as default
+};

package/dist/atoms/icons/FirstPage.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function FirstPage(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default FirstPage;

package/dist/atoms/icons/FirstPage.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+function l(a) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: a.size ?? 24,
+      height: a.size ?? 24,
+      className: a.className,
+      id: a.id,
+      role: a.label ? "img" : void 0,
+      "aria-label": a.label,
+      "aria-hidden": !a.label,
+      fill: a.color ?? "currentColor",
+      "data-testid": a.dataTestId ?? "first_page",
+      children: /* @__PURE__ */ e("path", { d: "M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z" })
+    }
+  );
+}
+export {
+  l as default
+};

package/dist/atoms/icons/Info.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function Info(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Info;

package/dist/atoms/icons/Info.js

@@ -0,0 +1,23 @@
+import { jsx as a } from "react/jsx-runtime";
+function i(t) {
+  return /* @__PURE__ */ a(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: t.size ?? 24,
+      height: t.size ?? 24,
+      className: t.className,
+      id: t.id,
+      role: t.label ? "img" : void 0,
+      "aria-label": t.label,
+      "aria-hidden": !t.label,
+      fill: t.color ?? "currentColor",
+      "data-testid": t.dataTestId ?? "info",
+      children: /* @__PURE__ */ a("path", { d: "M440-280h80v-240h-80v240Zm68.5-331.5Q520-623 520-640t-11.5-28.5Q497-680 480-680t-28.5 11.5Q440-657 440-640t11.5 28.5Q463-600 480-600t28.5-11.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" })
+    }
+  );
+}
+export {
+  i as default
+};

package/dist/atoms/icons/KeyboardArrowLeft.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function KeyboardArrowLeft(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default KeyboardArrowLeft;

package/dist/atoms/icons/KeyboardArrowLeft.js

@@ -0,0 +1,23 @@
+import { jsx as a } from "react/jsx-runtime";
+function t(e) {
+  return /* @__PURE__ */ a(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: e.size ?? 24,
+      height: e.size ?? 24,
+      className: e.className,
+      id: e.id,
+      role: e.label ? "img" : void 0,
+      "aria-label": e.label,
+      "aria-hidden": !e.label,
+      fill: e.color ?? "currentColor",
+      "data-testid": e.dataTestId ?? "keyboard_arrow_left",
+      children: /* @__PURE__ */ a("path", { d: "M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" })
+    }
+  );
+}
+export {
+  t as default
+};

package/dist/atoms/icons/KeyboardArrowRight.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function KeyboardArrowRight(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default KeyboardArrowRight;

package/dist/atoms/icons/KeyboardArrowRight.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+function l(a) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: a.size ?? 24,
+      height: a.size ?? 24,
+      className: a.className,
+      id: a.id,
+      role: a.label ? "img" : void 0,
+      "aria-label": a.label,
+      "aria-hidden": !a.label,
+      fill: a.color ?? "currentColor",
+      "data-testid": a.dataTestId ?? "keyboard_arrow_right",
+      children: /* @__PURE__ */ e("path", { d: "M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" })
+    }
+  );
+}
+export {
+  l as default
+};

package/dist/atoms/icons/LastPage.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function LastPage(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default LastPage;

package/dist/atoms/icons/LastPage.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+function t(a) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: a.size ?? 24,
+      height: a.size ?? 24,
+      className: a.className,
+      id: a.id,
+      role: a.label ? "img" : void 0,
+      "aria-label": a.label,
+      "aria-hidden": !a.label,
+      fill: a.color ?? "currentColor",
+      "data-testid": a.dataTestId ?? "last_page",
+      children: /* @__PURE__ */ e("path", { d: "m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z" })
+    }
+  );
+}
+export {
+  t as default
+};

package/dist/atoms/icons/Warning.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function Warning(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Warning;

package/dist/atoms/icons/Warning.js

@@ -0,0 +1,23 @@
+import { jsx as t } from "react/jsx-runtime";
+function i(a) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: a.size ?? 24,
+      height: a.size ?? 24,
+      className: a.className,
+      id: a.id,
+      role: a.label ? "img" : void 0,
+      "aria-label": a.label,
+      "aria-hidden": !a.label,
+      fill: a.color ?? "currentColor",
+      "data-testid": a.dataTestId ?? "warning",
+      children: /* @__PURE__ */ t("path", { d: "m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm330.5-51.5Q520-263 520-280t-11.5-28.5Q497-320 480-320t-28.5 11.5Q440-297 440-280t11.5 28.5Q463-240 480-240t28.5-11.5ZM440-360h80v-200h-80v200Zm40-100Z" })
+    }
+  );
+}
+export {
+  i as default
+};

package/dist/atoms/icons/index.d.ts

@@ -1,6 +1,16 @@
-export { default as KeyboardArrowDown } from './KeyboardArrowDown';
-export { default as KeyboardArrowUp } from './KeyboardArrowUp';
 export { default as Close } from './Close';
 export { default as Visibility } from './Visibility';
 export { default as VisibilityOff } from './VisibilityOff';
+export { default as KeyboardArrowLeft } from './KeyboardArrowLeft';
+export { default as KeyboardArrowRight } from './KeyboardArrowRight';
+export { default as KeyboardArrowDown } from './KeyboardArrowDown';
+export { default as KeyboardArrowUp } from './KeyboardArrowUp';
+export { default as ArrowLeft } from './ArrowLeft';
+export { default as ArrowRight } from './ArrowRight';
+export { default as FirstPage } from './FirstPage';
+export { default as LastPage } from './LastPage';
+export { default as Info } from './Info';
+export { default as Error } from './Error';
+export { default as Warning } from './Warning';
+export { default as CheckCircle } from './CheckCircle';
 export * from './types';

package/dist/atoms/icons/index.js

@@ -1,12 +1,32 @@
-import { default as e } from "./KeyboardArrowDown.js";
-import { default as f } from "./KeyboardArrowUp.js";
-import { default as i } from "./Close.js";
-import { default as s } from "./Visibility.js";
-import { default as p } from "./VisibilityOff.js";
+import { default as e } from "./Close.js";
+import { default as t } from "./Visibility.js";
+import { default as s } from "./VisibilityOff.js";
+import { default as l } from "./KeyboardArrowLeft.js";
+import { default as m } from "./KeyboardArrowRight.js";
+import { default as x } from "./KeyboardArrowDown.js";
+import { default as w } from "./KeyboardArrowUp.js";
+import { default as y } from "./ArrowLeft.js";
+import { default as g } from "./ArrowRight.js";
+import { default as K } from "./FirstPage.js";
+import { default as C } from "./LastPage.js";
+import { default as c } from "./Info.js";
+import { default as R } from "./Error.js";
+import { default as k } from "./Warning.js";
+import { default as E } from "./CheckCircle.js";
 export {
-  i as Close,
-  e as KeyboardArrowDown,
-  f as KeyboardArrowUp,
-  s as Visibility,
-  p as VisibilityOff
+  y as ArrowLeft,
+  g as ArrowRight,
+  E as CheckCircle,
+  e as Close,
+  R as Error,
+  K as FirstPage,
+  c as Info,
+  x as KeyboardArrowDown,
+  l as KeyboardArrowLeft,
+  m as KeyboardArrowRight,
+  w as KeyboardArrowUp,
+  C as LastPage,
+  t as Visibility,
+  s as VisibilityOff,
+  k as Warning
 };

package/dist/atoms/index.d.ts

@@ -1,3 +1,4 @@
-export { default as DsButton } from './DsButton';
+export { default as Button } from './Button';
 export { default as InsetText } from './InsetText';
+export * from './heading';
 export * from './icons';

package/dist/atoms/index.js

@@ -1,16 +1,52 @@
-import { default as t } from "./DsButton.js";
+import { default as o } from "./Button.js";
 import { default as a } from "./InsetText.js";
-import { default as s } from "./icons/KeyboardArrowDown.js";
-import { default as d } from "./icons/KeyboardArrowUp.js";
-import { default as p } from "./icons/Close.js";
-import { default as x } from "./icons/Visibility.js";
-import { default as b } from "./icons/VisibilityOff.js";
+import { default as s } from "./heading/H1.js";
+import { default as l } from "./heading/H2.js";
+import { default as x } from "./heading/H3.js";
+import { default as u } from "./heading/H4.js";
+import { default as g } from "./heading/H5.js";
+import { default as w } from "./heading/H6.js";
+import { default as b } from "./heading/styles.js";
+import { getSize as H } from "./heading/utils.js";
+import { default as K } from "./icons/Close.js";
+import { default as L } from "./icons/Visibility.js";
+import { default as I } from "./icons/VisibilityOff.js";
+import { default as R } from "./icons/KeyboardArrowLeft.js";
+import { default as V } from "./icons/KeyboardArrowRight.js";
+import { default as z } from "./icons/KeyboardArrowDown.js";
+import { default as D } from "./icons/KeyboardArrowUp.js";
+import { default as F } from "./icons/ArrowLeft.js";
+import { default as T } from "./icons/ArrowRight.js";
+import { default as W } from "./icons/FirstPage.js";
+import { default as q } from "./icons/LastPage.js";
+import { default as G } from "./icons/Info.js";
+import { default as M } from "./icons/Error.js";
+import { default as Q } from "./icons/Warning.js";
+import { default as Y } from "./icons/CheckCircle.js";
 export {
-  p as Close,
-  t as DsButton,
+  F as ArrowLeft,
+  T as ArrowRight,
+  o as Button,
+  Y as CheckCircle,
+  K as Close,
+  M as Error,
+  W as FirstPage,
+  s as H1,
+  l as H2,
+  x as H3,
+  u as H4,
+  g as H5,
+  w as H6,
+  G as Info,
   a as InsetText,
-  s as KeyboardArrowDown,
-  d as KeyboardArrowUp,
-  x as Visibility,
-  b as VisibilityOff
+  z as KeyboardArrowDown,
+  R as KeyboardArrowLeft,
+  V as KeyboardArrowRight,
+  D as KeyboardArrowUp,
+  q as LastPage,
+  L as Visibility,
+  I as VisibilityOff,
+  Q as Warning,
+  H as getSize,
+  b as headingStyles
 };

package/dist/atoms/storybook/Heading.meta.d.ts

@@ -0,0 +1,60 @@
+import { StoryContext, Renderer } from '@storybook/types';
+export declare const headingMeta: {
+    tags: string[];
+    title: string;
+    args: {
+        id: string;
+    };
+    argTypes: {
+        readonly size: {
+            readonly control: {
+                readonly type: "select";
+            };
+            readonly options: readonly ["", ...("sm" | "md" | "lg" | "xl" | "xs" | "2xs")[]];
+            readonly description: "Font size of the heading. Defaults to the size mapped to the heading level.";
+            readonly table: {
+                readonly type: {
+                    readonly summary: string;
+                };
+            };
+        };
+        readonly id: {
+            readonly control: false;
+            readonly description: "Optional id for linking/targeting and aria references.";
+        };
+        readonly className: {
+            readonly control: false;
+            readonly description: "Additional CSS classes to apply to the heading element.";
+            readonly table: {
+                readonly type: {
+                    readonly summary: "string";
+                };
+            };
+        };
+        readonly dataTestId: {
+            readonly control: false;
+            readonly description: "Test id for targeting the element in automated tests.";
+            readonly table: {
+                readonly type: {
+                    readonly summary: "string";
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export declare const Default: {
+    tags: string[];
+    args: {
+        id: string;
+    };
+};
+export declare const AllHeadingLevels: {
+    play: ({ canvasElement, step }: StoryContext<Renderer>) => Promise<void>;
+};

package/dist/atoms/storybook/Heading.meta.js

@@ -0,0 +1,70 @@
+import { K as i, n as t } from "../../index-Bh2cTIps.js";
+import { Size as s } from "../heading/types.js";
+const o = {
+  tags: ["autodocs"],
+  title: "Typography/Heading",
+  args: {
+    id: "heading-id"
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "select"
+      },
+      options: ["", ...Object.values(s)],
+      description: "Font size of the heading. Defaults to the size mapped to the heading level.",
+      table: {
+        type: {
+          summary: Object.values(s).map((a) => `"${a}"`).join(" | ")
+        }
+      }
+    },
+    id: {
+      control: !1,
+      description: "Optional id for linking/targeting and aria references."
+    },
+    className: {
+      control: !1,
+      description: "Additional CSS classes to apply to the heading element.",
+      table: {
+        type: {
+          summary: "string"
+        }
+      }
+    },
+    dataTestId: {
+      control: !1,
+      description: "Test id for targeting the element in automated tests.",
+      table: {
+        type: {
+          summary: "string"
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Heading component for rendering semantic heading elements (h1–h6) with consistent typography styles."
+      }
+    }
+  }
+}, r = {
+  tags: ["skip-playwright"],
+  args: o.args
+}, l = {
+  play: async ({
+    canvasElement: a,
+    step: n
+  }) => {
+    const e = i(a);
+    await n("renders h1 to h6 with the correct semantic tags", async () => {
+      t(e.getByTestId("heading-1").tagName).toBe("H1"), t(e.getByTestId("heading-2").tagName).toBe("H2"), t(e.getByTestId("heading-3").tagName).toBe("H3"), t(e.getByTestId("heading-4").tagName).toBe("H4"), t(e.getByTestId("heading-5").tagName).toBe("H5"), t(e.getByTestId("heading-6").tagName).toBe("H6");
+    });
+  }
+};
+export {
+  l as AllHeadingLevels,
+  r as Default,
+  o as headingMeta
+};

package/dist/atoms/storybook/Icons.meta.d.ts

@@ -0,0 +1,51 @@
+import { StoryContext, Renderer } from '@storybook/types';
+import { default as ArrowLeft } from '../icons/ArrowLeft';
+export declare const iconList: {
+    Component: typeof ArrowLeft;
+    name: string;
+    selector: string;
+}[];
+export declare const iconsMeta: {
+    tags: string[];
+    title: string;
+    args: {
+        size: number;
+        color: string;
+        label: string;
+        className: string;
+    };
+    argTypes: {
+        size: {
+            control: "number";
+            description: string;
+        };
+        color: {
+            control: "color";
+            description: string;
+        };
+        label: {
+            control: "text";
+            description: string;
+        };
+        className: {
+            control: "text";
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export declare const Default: {
+    args: {
+        size: number;
+        color: string;
+        label: string;
+        className: string;
+    };
+    play: ({ canvasElement, step }: StoryContext<Renderer>) => Promise<void>;
+};