@ogcio/design-system-react 1.31.1 → 1.33.0

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

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

@@ -0,0 +1,130 @@
+import { K as n, n as i } from "../../index-Bh2cTIps.js";
+import a from "../icons/ArrowLeft.js";
+import s from "../icons/ArrowRight.js";
+import c from "../icons/CheckCircle.js";
+import m from "../icons/Close.js";
+import l from "../icons/Error.js";
+import p from "../icons/FirstPage.js";
+import f from "../icons/Info.js";
+import d from "../icons/KeyboardArrowDown.js";
+import y from "../icons/KeyboardArrowLeft.js";
+import b from "../icons/KeyboardArrowRight.js";
+import g from "../icons/KeyboardArrowUp.js";
+import C from "../icons/LastPage.js";
+import w from "../icons/Visibility.js";
+import h from "../icons/VisibilityOff.js";
+import A from "../icons/Warning.js";
+const u = [{
+  Component: a,
+  name: "ArrowLeft",
+  selector: "arrow-left"
+}, {
+  Component: s,
+  name: "ArrowRight",
+  selector: "arrow-right"
+}, {
+  Component: c,
+  name: "CheckCircle",
+  selector: "check-circle"
+}, {
+  Component: m,
+  name: "Close",
+  selector: "close"
+}, {
+  Component: l,
+  name: "Error",
+  selector: "error"
+}, {
+  Component: p,
+  name: "FirstPage",
+  selector: "first-page"
+}, {
+  Component: f,
+  name: "Info",
+  selector: "info"
+}, {
+  Component: d,
+  name: "KeyboardArrowDown",
+  selector: "keyboard-arrow-down"
+}, {
+  Component: y,
+  name: "KeyboardArrowLeft",
+  selector: "keyboard-arrow-left"
+}, {
+  Component: b,
+  name: "KeyboardArrowRight",
+  selector: "keyboard-arrow-right"
+}, {
+  Component: g,
+  name: "KeyboardArrowUp",
+  selector: "keyboard-arrow-up"
+}, {
+  Component: C,
+  name: "LastPage",
+  selector: "last-page"
+}, {
+  Component: w,
+  name: "Visibility",
+  selector: "visibility"
+}, {
+  Component: h,
+  name: "VisibilityOff",
+  selector: "visibility-off"
+}, {
+  Component: A,
+  name: "Warning",
+  selector: "warning"
+}], K = {
+  tags: ["autodocs"],
+  title: "Foundation/Icons",
+  args: {
+    size: 48,
+    color: "currentColor",
+    label: "",
+    className: ""
+  },
+  argTypes: {
+    size: {
+      control: "number",
+      description: "Width and height of the icon in pixels."
+    },
+    color: {
+      control: "color",
+      description: "Fill colour — defaults to `currentColor`."
+    },
+    label: {
+      control: "text",
+      description: 'Accessible label. When set, renders `role="img"` and `aria-label`. When empty, the icon is hidden from assistive technology via `aria-hidden`.'
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS class names."
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Use icons to visually reinforce actions, status, and navigation. Icons accept a `size` prop (in pixels), an optional `color`, and a `label` for accessibility."
+      }
+    }
+  }
+}, E = {
+  args: K.args,
+  play: async ({
+    canvasElement: e,
+    step: r
+  }) => {
+    const t = n(e);
+    for (const {
+      selector: o
+    } of u)
+      await r(`renders ${o} icon`, async () => {
+        i(t.getByTestId(o)).toBeInTheDocument();
+      });
+  }
+};
+export {
+  E as Default,
+  u as iconList,
+  K as iconsMeta
+};

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

@@ -0,0 +1,52 @@
+import { StoryContext, Renderer } from '@storybook/types';
+export declare const insetTextMeta: {
+    tags: string[];
+    title: string;
+    args: {
+        id: string;
+        cite: string;
+        describedBy: string;
+        labelledBy: string;
+        children: string;
+    };
+    argTypes: {
+        children: {
+            table: {
+                disable: true;
+            };
+        };
+        id: {
+            control: "text";
+            description: string;
+        };
+        cite: {
+            control: "text";
+            description: string;
+        };
+        describedBy: {
+            control: "text";
+            description: string;
+        };
+        labelledBy: {
+            control: "text";
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export declare const Default: {
+    args: {
+        id: string;
+        cite: string;
+        describedBy: string;
+        labelledBy: string;
+        children: string;
+    };
+    play: ({ canvasElement, step }: StoryContext<Renderer>) => Promise<void>;
+};

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

@@ -0,0 +1,64 @@
+import { K as r, n as t } from "../../index-Bh2cTIps.js";
+const s = {
+  tags: ["autodocs"],
+  title: "Typography/InsetText",
+  args: {
+    id: "inset-text-default",
+    cite: "https://example.com/source",
+    describedBy: "",
+    labelledBy: "",
+    children: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
+  },
+  argTypes: {
+    children: {
+      table: {
+        disable: !0
+      }
+    },
+    id: {
+      control: "text",
+      description: "Optional id for linking/targeting and aria references."
+    },
+    cite: {
+      control: "text",
+      description: "The source URL or description for the quotation."
+    },
+    describedBy: {
+      control: "text",
+      description: "Points to element id(s) whose content describes the inset text. Maps to `aria-describedby`."
+    },
+    labelledBy: {
+      control: "text",
+      description: "Points to element id(s) whose content labels the inset text. Maps to `aria-labelledby`."
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Inset text component to differentiate a block of text from the content that surrounds it."
+      }
+    }
+  }
+}, l = {
+  args: s.args,
+  play: async ({
+    canvasElement: i,
+    step: o
+  }) => {
+    const n = r(i), a = s.args.children;
+    await o("renders content and tag", async () => {
+      const e = n.getByText(a);
+      t(e).toBeInTheDocument(), t(e.tagName.toLowerCase()).toBe("blockquote");
+    }), await o("renders cite attribute when provided", async () => {
+      const e = n.getByText(a);
+      t(e).toHaveAttribute("cite", s.args.cite);
+    }), await o("renders inset text styles", async () => {
+      const e = n.getByText(a);
+      t(e).toHaveClass("gi-p-4"), t(e).toHaveClass("gi-border-l-2xl"), t(e).toHaveClass("gi-border-gray-500");
+    });
+  }
+};
+export {
+  l as Default,
+  s as insetTextMeta
+};

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

@@ -0,0 +1,35 @@
+import { StoryContext, Renderer } from '@storybook/types';
+export declare const logosMeta: {
+    tags: string[];
+    title: string;
+    args: {
+        label: string;
+    };
+    argTypes: {
+        size: {
+            control: "number";
+            description: string;
+        };
+        className: {
+            control: "text";
+            description: string;
+        };
+        label: {
+            control: "text";
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export declare const Default: {
+    args: {
+        label: string;
+    };
+    play: ({ canvasElement, step }: StoryContext<Renderer>) => Promise<void>;
+};