@ogcio/design-system-react 1.31.1 → 1.33.0

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/button/button.d.ts

@@ -1,9 +1,2 @@
-export declare const Button: import('react').ForwardRefExoticComponent<import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: import('./types.js').ButtonVariant;
-    appearance?: import('./types.js').ButtonAppearance;
-    size?: import('./types.js').ButtonSize;
-    form?: string;
-    value?: string;
-    className?: string;
-    dataTestid?: string;
-} & import('react').RefAttributes<HTMLButtonElement>>;
+import { ButtonProps } from './types';
+export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/button/button.js

@@ -1,43 +1,76 @@
-"use client";
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { cn as u } from "../cn.js";
-import { getSizeClass as c, isButtonDisabled as b, getVariantAppearanceClass as B } from "./helpers.js";
-const r = p(
+import { jsx as $ } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import q from "../atoms/Button.js";
+const a = g(
   ({
-    variant: e,
-    appearance: o,
-    size: a,
-    disabled: t,
-    className: n,
-    children: s,
-    dataTestid: i,
-    ...m
-  }, f) => /* @__PURE__ */ l(
-    "button",
+    id: e,
+    variant: r,
+    appearance: t,
+    size: o,
+    children: i,
+    disabled: d,
+    className: p,
+    onClick: s,
+    onFocus: l,
+    onBlur: n,
+    onKeyDown: b,
+    onKeyUp: m,
+    role: u,
+    type: f,
+    form: c,
+    value: y,
+    tabIndex: B,
+    dataTestid: x,
+    "aria-label": h,
+    "aria-labelledby": j,
+    "aria-describedby": w,
+    "aria-checked": T,
+    "aria-pressed": k,
+    "aria-expanded": v,
+    "aria-controls": I,
+    "aria-haspopup": N,
+    "aria-busy": O,
+    "data-testid": P
+  }, R) => /* @__PURE__ */ $(
+    q,
     {
-      "data-testid": i,
-      ...m,
-      ref: f,
-      "aria-disabled": t,
-      disabled: t,
-      className: u(
-        "gi-btn",
-        B({ disabled: t, variant: e, appearance: o }),
-        b({ disabled: t, variant: e, appearance: o }),
-        c(a),
-        n
-      ),
-      children: s
+      ref: R,
+      id: e,
+      variant: r,
+      appearance: t,
+      size: o,
+      children: i,
+      disabled: d,
+      className: p,
+      onClick: s,
+      onFocus: l,
+      onBlur: n,
+      onKeyDown: b,
+      onKeyUp: m,
+      ariaLabel: h,
+      ariaLabelledBy: j,
+      ariaDescribedBy: w,
+      ariaChecked: T,
+      ariaPressed: k,
+      ariaExpanded: v,
+      ariaControls: I,
+      ariaHasPopup: N,
+      ariaBusy: O,
+      role: u,
+      type: f,
+      form: c,
+      value: y,
+      tabIndex: B,
+      dataTestId: P ?? x
     }
   )
 );
-r.displayName = "Button";
-Object.defineProperty(r, "componentType", {
+a.displayName = "Button";
+Object.defineProperty(a, "componentType", {
   value: "Button",
   writable: !1,
   enumerable: !1
 });
 export {
-  r as Button
+  a as Button
 };

package/dist/button/helpers.d.ts

@@ -1,3 +1,4 @@
+import { IconButtonProps } from '../icon-button/icon-button.js';
 import { ButtonAppearance, ButtonVariant, ButtonSize } from './types.js';
 export declare const getVariantAppearanceClass: ({ disabled, variant, appearance, }: {
     disabled?: boolean;
@@ -5,7 +6,7 @@ export declare const getVariantAppearanceClass: ({ disabled, variant, appearance
     appearance?: ButtonAppearance;
 }) => string | undefined;
 export declare const getSizeClass: (size?: ButtonSize) => "gi-btn-small" | "gi-btn-large" | "gi-btn-regular";
-export declare const getButtonIconSizeClass: (size?: ButtonSize) => "gi-icon-btn-small" | "gi-icon-btn-large" | "gi-icon-btn-extra-large" | "gi-icon-btn-regular";
+export declare const getButtonIconSizeClass: (size?: IconButtonProps["size"]) => "gi-icon-btn-small" | "gi-icon-btn-large" | "gi-icon-btn-extra-large" | "gi-icon-btn-regular";
 export declare const isButtonDisabled: ({ disabled, variant, appearance, }: {
     disabled?: boolean;
     variant?: ButtonVariant;

package/dist/button/types.d.ts

@@ -1,13 +1,30 @@
+import { Props as GiButtonProps } from '../atoms/Button.js';
+import * as React from 'react';
 export declare const ButtonVariants: readonly ["primary", "secondary", "flat"];
 export type ButtonVariant = (typeof ButtonVariants)[number];
 export type ButtonAppearance = 'default' | 'dark' | 'light';
-export type ButtonSize = 'medium' | 'small' | 'large' | 'extraLarge';
-export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: ButtonVariant;
-    appearance?: ButtonAppearance;
-    size?: ButtonSize;
-    form?: string;
-    value?: string;
-    className?: string;
+export type ButtonSize = 'medium' | 'small' | 'large';
+export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-checked' | 'aria-pressed' | 'aria-expanded' | 'aria-controls' | 'aria-haspopup' | 'aria-busy'> & GiButtonProps & {
+    /** @deprecated Use dataTestId instead */
     dataTestid?: string;
+    /** @deprecated Use dataTestId instead */
+    'data-testid'?: string;
+    /** @deprecated Use ariaLabel instead */
+    'aria-label'?: string;
+    /** @deprecated Use ariaLabelledBy instead */
+    'aria-labelledby'?: string;
+    /** @deprecated Use ariaDescribedBy instead */
+    'aria-describedby'?: string;
+    /** @deprecated Use ariaChecked instead */
+    'aria-checked'?: boolean | 'true' | 'false' | 'mixed';
+    /** @deprecated Use ariaPressed instead */
+    'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';
+    /** @deprecated Use ariaExpanded instead */
+    'aria-expanded'?: boolean | 'true' | 'false';
+    /** @deprecated Use ariaControls instead */
+    'aria-controls'?: string;
+    /** @deprecated Use ariaHasPopup instead */
+    'aria-haspopup'?: boolean | 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** @deprecated Use ariaBusy instead */
+    'aria-busy'?: boolean | 'true' | 'false';
 };

package/dist/button-group/button-group.js

@@ -1,95 +1,93 @@
 "use client";
-import { jsx as x } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import { createContext as G, useState as V, useEffect as k, useContext as w } from "react";
-import { Button as S } from "../button/button.js";
+import S from "../atoms/Button.js";
 import { cn as g } from "../cn.js";
 import { useDomId as j } from "../hooks/use-dom-id.js";
-const I = G(
+const y = G(
   void 0
 ), D = ({
-  value: r,
+  value: o,
   children: s,
   role: d,
   "aria-checked": e,
-  "aria-label": a,
-  ...t
+  "aria-label": n
 }) => {
-  const c = w(I);
-  if (!c)
+  const t = w(y);
+  if (!t)
     throw new Error("ButtonGroupItem must be used within a ButtonGroup");
   const {
-    selectedValue: n,
-    setSelectedValue: l,
-    size: u,
-    onChange: o,
+    selectedValue: a,
+    setSelectedValue: u,
+    size: l,
+    onChange: r,
     groupId: m,
     appearance: p
-  } = c, i = n === r, b = () => {
-    l(r), o == null || o(r);
-  }, f = `${m}-${r}`;
-  return /* @__PURE__ */ x(
+  } = t, i = a === o, c = () => {
+    u(o), r == null || r(o);
+  }, b = `${m}-${o}`;
+  return /* @__PURE__ */ f(
     S,
     {
       variant: i ? "primary" : "secondary",
-      size: u,
+      size: l,
       appearance: p,
-      onClick: b,
-      id: f,
+      onClick: c,
+      id: b,
       role: d || "radio",
-      "aria-checked": e === void 0 ? i : e,
-      "aria-label": a,
+      ariaChecked: e === void 0 ? i : e,
+      ariaLabel: n,
       type: "button",
-      ...t,
       children: s
     }
   );
 }, N = ({
-  name: r,
+  name: o,
   size: s = "medium",
   appearance: d = "dark",
   onChange: e,
-  defaultValue: a,
+  defaultValue: n,
   value: t,
-  children: c,
-  role: n,
+  children: a,
+  role: u,
   "aria-labelledby": l,
-  "aria-describedby": u,
-  className: o,
-  ...m
+  "aria-describedby": r,
+  className: m,
+  ...p
 }) => {
-  const [p, i] = V(
-    a
-  ), b = t === void 0 ? p : t;
+  const [i, c] = V(
+    n
+  ), b = t === void 0 ? i : t;
   k(() => {
-    t !== void 0 && i(t);
+    t !== void 0 && c(t);
   }, [t]);
-  const f = (y) => {
-    t === void 0 && i(y), e == null || e(y);
+  const I = (x) => {
+    t === void 0 && c(x), e == null || e(x);
   }, B = j();
-  return /* @__PURE__ */ x(
-    I.Provider,
+  return /* @__PURE__ */ f(
+    y.Provider,
     {
       value: {
         selectedValue: b,
-        setSelectedValue: f,
-        name: r,
+        setSelectedValue: I,
+        name: o,
         size: s,
         onChange: e,
         groupId: B,
         appearance: d,
-        ...m
+        ...p
       },
-      children: /* @__PURE__ */ x(
+      children: /* @__PURE__ */ f(
         "div",
         {
           className: g(
             "gi-flex gi-flex-wrap gi-gap-3 [&_button]:gi-min-w-12 [&_button]:gi-justify-center",
-            o
+            m
           ),
-          role: n || "radiogroup",
+          role: u || "radiogroup",
           "aria-labelledby": l,
-          "aria-describedby": u,
-          children: c
+          "aria-describedby": r,
+          children: a
         }
       )
     }

package/dist/button-group/types.d.ts

@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react';
-import { ButtonAppearance, ButtonSize } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 export type ButtonGroupProps = PropsWithChildren<{
     name: string;
-    size?: ButtonSize;
-    appearance?: ButtonAppearance;
+    size?: ButtonProps['size'];
+    appearance?: ButtonProps['appearance'];
     onChange?: (value: string) => void;
     defaultValue?: string;
     value?: string;
@@ -22,8 +22,8 @@ export type ButtonGroupContextType = {
     selectedValue?: string;
     setSelectedValue: (value: string) => void;
     name: string;
-    size: ButtonSize;
-    appearance?: ButtonAppearance;
+    size: ButtonProps['size'];
+    appearance?: ButtonProps['appearance'];
     onChange?: (value: string) => void;
     groupId: string;
 };

package/dist/card/card-legacy.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Button as k } from "../button/button.js";
+import k from "../atoms/Button.js";
 import { translate as c } from "../i18n/utility.js";
 import { Link as u } from "../link/link.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";

package/dist/card/types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
-import { ButtonProps } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 import { IconProps } from '../icon/icon.js';
 import { LinkProps } from '../link/link.js';
 import { TagProps } from '../tag/tag.js';

package/dist/combo-box/dropdown-item.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as n, jsx as a } from "react/jsx-runtime";
 import { useState as u, useId as j, useEffect as q } from "react";
-import { Button as B } from "../button/button.js";
+import B from "../atoms/Button.js";
 import { cn as x } from "../cn.js";
 import { translate as N } from "../i18n/utility.js";
 import { Icon as D } from "../icon/icon.js";

package/dist/cookie-banner/cookie-banner.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ButtonProps } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 import { LinkProps } from '../link/link.js';
 export type CookieBannerProps = {
     showConsent: boolean;

package/dist/data-table/data-table-header.js

@@ -1,7 +1,7 @@
 import { jsxs as d, jsx as i } from "react/jsx-runtime";
 import { useMemo as A, Children as L, isValidElement as O } from "react";
 import { c as P } from "../index-CB-zPpNk.js";
-import { Button as w } from "../button/button.js";
+import w from "../atoms/Button.js";
 import { Chip as S } from "../chip/chip.js";
 import { cn as n } from "../cn.js";
 import { translate as x } from "../i18n/utility.js";

package/dist/drawer/drawer.d.ts

@@ -1,5 +1,5 @@
 import { Fragment, ReactElement } from 'react';
-import { ButtonProps } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 import { ModalProps, ModalWrapperProps } from '../modal/types.js';
 type DrawerChildren = Array<ReactElement<typeof DrawerBody | typeof DrawerBody>> | ReactElement<typeof Fragment>;
 export type DrawerPosition = 'left' | 'right' | 'bottom';

package/dist/drawer/drawer.js

@@ -3,7 +3,7 @@ import { jsx as a, jsxs as x, Fragment as C } from "react/jsx-runtime";
 import { useState as D, cloneElement as O } from "react";
 import { cn as l } from "../cn.js";
 import { ModalBody as u, ModalFooter as j, ModalWrapper as v } from "../modal/modal.js";
-const h = ({
+const T = ({
   children: o,
   className: e,
   ...r
@@ -15,29 +15,29 @@ const h = ({
     ...r,
     children: o
   }
-), k = ({
+), h = ({
   children: o,
   triggerButton: e,
   startsOpen: r,
-  closeButtonLabel: p,
+  closeButtonLabel: i,
   position: t = "right",
   className: f
 }) => {
   const [d, s] = D(!!r), m = () => s(!0), w = () => s(!1), b = O(e, {
-    "data-testid": "drawer-trigger-button-container",
+    dataTestId: "drawer-trigger-button-container",
     onClick: (y) => {
-      var c, i;
-      const n = typeof ((c = e == null ? void 0 : e.props) == null ? void 0 : c.onClick) == "function" ? (i = e == null ? void 0 : e.props) == null ? void 0 : i.onClick : void 0;
+      var c, p;
+      const n = typeof ((c = e == null ? void 0 : e.props) == null ? void 0 : c.onClick) == "function" ? (p = e == null ? void 0 : e.props) == null ? void 0 : p.onClick : void 0;
       n && n(y), m();
     }
   });
   return /* @__PURE__ */ x(C, { children: [
     b,
     /* @__PURE__ */ a(
-      h,
+      T,
       {
         children: o,
-        closeButtonLabel: p,
+        closeButtonLabel: i,
         position: t,
         className: f,
         isOpen: d,
@@ -46,12 +46,12 @@ const h = ({
     )
   ] });
 };
-Object.defineProperty(k, "componentType", {
+Object.defineProperty(h, "componentType", {
   value: "Drawer",
   writable: !1,
   enumerable: !1
 });
-const F = ({ children: o, className: e }) => /* @__PURE__ */ a(
+const k = ({ children: o, className: e }) => /* @__PURE__ */ a(
   u,
   {
     includeModalClass: !1,
@@ -62,24 +62,24 @@ const F = ({ children: o, className: e }) => /* @__PURE__ */ a(
     children: o
   }
 );
-Object.defineProperty(F, "componentType", {
+Object.defineProperty(k, "componentType", {
   value: "DrawerBody",
   writable: !1,
   enumerable: !1
 });
-const M = ({
+const F = ({
   children: o,
   className: e,
   stacked: r
 }) => /* @__PURE__ */ a(j, { stacked: r, className: l("gi-drawer-footer", e), children: o });
-Object.defineProperty(M, "componentType", {
+Object.defineProperty(F, "componentType", {
   value: "DrawerFooter",
   writable: !1,
   enumerable: !1
 });
 export {
-  k as Drawer,
-  F as DrawerBody,
-  M as DrawerFooter,
-  h as DrawerWrapper
+  h as Drawer,
+  k as DrawerBody,
+  F as DrawerFooter,
+  T as DrawerWrapper
 };