@ogcio/design-system-react 1.31.0 → 1.32.0

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

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

@@ -0,0 +1,54 @@
+import { K as n, n as t } from "../../index-Bh2cTIps.js";
+const s = {
+  tags: ["autodocs"],
+  title: "Foundation/Logos",
+  args: {
+    label: ""
+  },
+  argTypes: {
+    size: {
+      control: "number",
+      description: "Size of the Logo in pixels."
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS class names."
+    },
+    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`.'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Use the logo component to display the Government of Ireland brand mark."
+      }
+    }
+  }
+}, i = {
+  args: s.args,
+  play: async ({
+    canvasElement: a,
+    step: e
+  }) => {
+    const o = n(a);
+    await e("renders Logo Black", async () => {
+      t(o.getByTestId("logo-black")).toBeInTheDocument();
+    }), await e("renders Logo Gold Green", async () => {
+      t(o.getByTestId("logo-gold-green")).toBeInTheDocument();
+    }), await e("renders Logo White", async () => {
+      t(o.getByTestId("logo-white")).toBeInTheDocument();
+    }), await e("renders Logo Harp Black", async () => {
+      t(o.getByTestId("logo-harp-black")).toBeInTheDocument();
+    }), await e("renders Logo Harp White", async () => {
+      t(o.getByTestId("logo-harp-white")).toBeInTheDocument();
+    }), await e("renders Logo Gold White", async () => {
+      t(o.getByTestId("logo-gold-white")).toBeInTheDocument();
+    });
+  }
+};
+export {
+  i as Default,
+  s as logosMeta
+};

package/dist/breadcrumbs/breadcrumbs.js

@@ -1,30 +1,31 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { translate as m } from "../i18n/utility.js";
-import { Icon as n } from "../icon/icon.js";
-import { Link as c } from "../link/link.js";
-const f = () => /* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @__PURE__ */ e(n, { className: "gi-text-gray-700", icon: "more_horiz" }) }), o = ({
-  href: r,
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import m from "../atoms/icons/KeyboardArrowLeft.js";
+import { translate as n } from "../i18n/utility.js";
+import { Icon as c } from "../icon/icon.js";
+import { Link as o } from "../link/link.js";
+const h = () => /* @__PURE__ */ r("div", { "aria-hidden": "true", children: /* @__PURE__ */ r(c, { className: "gi-text-gray-700", icon: "more_horiz" }) }), g = ({
+  href: e,
   children: i,
   asChild: a,
   ...s
-}) => /* @__PURE__ */ e(
-  c,
+}) => /* @__PURE__ */ r(
+  o,
   {
     noColor: !0,
     asChild: a,
-    href: r,
+    href: e,
     "aria-label": `${i} page`,
     size: "sm",
     className: "gi-text-ellipsis gi-whitespace-nowrap gi-line-clamp-1",
     ...s,
     children: i
   }
-), x = (r) => /* @__PURE__ */ e(o, { ...r, "aria-current": "page" }), g = () => /* @__PURE__ */ e("span", { className: "gi-px-3 gi-text-gray-500", children: "/" }), h = ({ children: r, iconStart: i }) => {
-  const a = Array.isArray(r) ? r : [r];
-  return /* @__PURE__ */ e(
+), N = (e) => /* @__PURE__ */ r(g, { ...e, "aria-current": "page" }), p = () => /* @__PURE__ */ r("span", { className: "gi-px-3 gi-text-gray-500", children: "/" }), B = ({ children: e, iconStart: i }) => {
+  const a = Array.isArray(e) ? e : [e];
+  return /* @__PURE__ */ r(
     "nav",
     {
-      "aria-label": m("breadcrumbs.breadcrumbs", { defaultValue: "Breadcrumbs" }),
+      "aria-label": n("breadcrumbs.breadcrumbs", { defaultValue: "Breadcrumbs" }),
       className: "gi-flex gi-items-center gi-gap-1",
       children: /* @__PURE__ */ t(
         "ol",
@@ -38,7 +39,7 @@ const f = () => /* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @
           [&>li]:gi-items-center
           `,
           children: [
-            i && /* @__PURE__ */ e("li", { role: "listitem", className: "gi-pr-1", children: /* @__PURE__ */ e(n, { "aria-label": "chevron-left", icon: "chevron_left", size: "sm" }) }),
+            i && /* @__PURE__ */ r("li", { role: "listitem", className: "gi-pr-1", children: /* @__PURE__ */ r(m, { className: "gi-block gi-shrink-0", size: 16 }) }),
             a.map((s, l) => /* @__PURE__ */ t(
               "li",
               {
@@ -46,7 +47,7 @@ const f = () => /* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @
                 role: "listitem",
                 children: [
                   s,
-                  l < a.length - 1 && /* @__PURE__ */ e(g, {})
+                  l < a.length - 1 && /* @__PURE__ */ r(p, {})
                 ]
               },
               `breadcrumb_item_${l}`
@@ -58,8 +59,8 @@ const f = () => /* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @
   );
 };
 export {
-  x as BreadcrumbCurrentLink,
-  f as BreadcrumbEllipsis,
-  o as BreadcrumbLink,
-  h as Breadcrumbs
+  N as BreadcrumbCurrentLink,
+  h as BreadcrumbEllipsis,
+  g as BreadcrumbLink,
+  B as Breadcrumbs
 };

package/dist/header/components/header-menu.js

@@ -1,10 +1,10 @@
 "use client";
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
 import { useState as h } from "react";
-import { cn as f } from "../../cn.js";
-import { Icon as g } from "../../icon/icon.js";
+import f from "../../atoms/icons/KeyboardArrowRight.js";
+import { cn as g } from "../../cn.js";
 import { ListItem as s } from "../../list-item/list-item.js";
-const p = ({ index: l, item: e }) => {
+const p = ({ index: n, item: e }) => {
   const [r, c] = h(!1), o = () => {
     c((a) => !a);
   }, t = (a) => {
@@ -13,35 +13,35 @@ const p = ({ index: l, item: e }) => {
   return /* @__PURE__ */ i(
     "div",
     {
-      id: `Accordion-item-${l}`,
+      id: `Accordion-item-${n}`,
       className: "gi-accordion-item-container",
       "data-open": r.toString(),
       role: "presentation",
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ l(
           "div",
           {
             "aria-label": e.label,
-            id: `Accordion-header-${l}`,
+            id: `Accordion-header-${n}`,
             role: "button",
             "aria-expanded": r,
-            "aria-controls": `Accordion-slot-${l}`,
+            "aria-controls": `Accordion-slot-${n}`,
             className: "gi-header-accordion-item-toggle",
             tabIndex: 0,
             onClick: o,
             onKeyDown: t,
             children: /* @__PURE__ */ i("div", { children: [
-              /* @__PURE__ */ n("span", { className: "gi-text-sm gi-font-bold gi-ml-1", children: e.label }),
-              /* @__PURE__ */ n(g, { icon: "chevron_right", className: "gi-accordion-item-icon" })
+              /* @__PURE__ */ l("span", { className: "gi-text-sm gi-font-bold gi-ml-1", children: e.label }),
+              /* @__PURE__ */ l(f, { className: "gi-block gi-shrink-0 gi-accordion-item-icon" })
             ] })
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ l(
           "div",
           {
-            id: `Accordion-slot-${l}`,
+            id: `Accordion-slot-${n}`,
             role: "region",
-            className: f("gi-accordion-item-slot", {
+            className: g("gi-accordion-item-slot", {
               "gi-hidden": !r
             }),
             children: e.slot
@@ -49,13 +49,13 @@ const p = ({ index: l, item: e }) => {
         )
       ]
     },
-    `Accordion-item-${l}`
+    `Accordion-item-${n}`
   );
-}, m = ({
-  items: l,
+}, I = ({
+  items: n,
   secondaryLinks: e
 }) => /* @__PURE__ */ i("ul", { children: [
-  l == null ? void 0 : l.map(({ itemType: r, label: c, ...o }, t) => {
+  n == null ? void 0 : n.map(({ itemType: r, label: c, ...o }, t) => {
     const [a, d] = [
       r === "link" || r === "custom-link",
       r === "slot"
@@ -63,7 +63,7 @@ const p = ({ index: l, item: e }) => {
     if (!c)
       return null;
     if (a)
-      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+      return /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
         s,
         {
           href: o == null ? void 0 : o.href,
@@ -73,7 +73,7 @@ const p = ({ index: l, item: e }) => {
         }
       ) }, `navLink-${c}-${t}`);
     if (d)
-      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+      return /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
         p,
         {
           index: t,
@@ -84,7 +84,7 @@ const p = ({ index: l, item: e }) => {
         }
       ) }, `toolItems-${c}-${t}`);
   }),
-  e == null ? void 0 : e.map((r, c) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+  e == null ? void 0 : e.map((r, c) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
     s,
     {
       href: r.href,
@@ -96,5 +96,5 @@ const p = ({ index: l, item: e }) => {
 ] });
 export {
   p as MenuItemAccordion,
-  m as MobileHeaderMenuItems
+  I as MobileHeaderMenuItems
 };

package/dist/header/components/header-search.js

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Button as c } from "../../button/button.js";
-import { Heading as h } from "../../heading/heading.js";
+import c from "../../Heading.js";
+import { Button as h } from "../../button/button.js";
 import { translate as a } from "../../i18n/utility.js";
 import { IconButton as d } from "../../icon-button/icon-button.js";
 import { InputText as m } from "../../input-text/input-text.js";
@@ -17,7 +17,7 @@ function b({
       "data-testid": "header-search-form",
       "aria-label": a("header.searchForm", { defaultValue: "Search Form" }),
       children: [
-        /* @__PURE__ */ e(h, { as: "h4", children: "Search the website" }),
+        /* @__PURE__ */ e(c, { as: "h4", children: "Search the website" }),
         /* @__PURE__ */ r("div", { className: "gi-flex gi-items-end gi-mt-4", children: [
           /* @__PURE__ */ e(
             m,
@@ -33,7 +33,7 @@ function b({
             }
           ),
           /* @__PURE__ */ e("div", { className: "gi-ml-1 gi-flex-none gi-hidden md:gi-block", children: /* @__PURE__ */ e(
-            c,
+            h,
             {
               "aria-label": a("header.submitSearch", {
                 defaultValue: "Submit Search"