@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/dialog/test-utils.js

@@ -0,0 +1,78 @@
+import { userEvent as c, within as o, expect as n, waitFor as r, screen as w } from "storybook/test";
+const f = (i) => {
+  const s = async ({ title: a }) => await r(() => {
+    const t = w.queryByRole("dialog", { name: a }) ?? w.queryByRole("alertdialog", { name: a });
+    if (!t)
+      throw new Error(`Dialog with title: "${a}" not found in the page`);
+    return t;
+  }), y = async (a, t) => {
+    await c.click(
+      o(a).getByRole("button", {
+        name: t
+      }),
+      { delay: 100 }
+    );
+  };
+  return {
+    findDialog: s,
+    closeDialog: async ({
+      title: a,
+      closeButtonLabel: t
+    }) => {
+      await i.step("Close dialog", async () => {
+        const e = await s({ title: a });
+        await y(e, t);
+      });
+    },
+    assertDialogIsClosed: async (a) => {
+      await r(
+        async () => {
+          await n(a).not.toBeInTheDocument();
+        },
+        { timeout: 1e3 }
+      );
+    },
+    assertElementExistsInDialog: async ({
+      title: a,
+      content: t,
+      primaryActionLabel: e,
+      secondaryActionLabel: g
+    }) => {
+      const l = await s({ title: a });
+      t && await i.step(`Check if "${t}" is in the dialog`, async () => {
+        await n(o(l).getByText(t)).toBeInTheDocument();
+      }), e && await i.step(
+        `Check if "${e}" is in the dialog`,
+        async () => {
+          await n(
+            o(l).getByRole("button", { name: e })
+          ).toBeInTheDocument();
+        }
+      ), g && await i.step(
+        `Check if "${g}" is in the dialog`,
+        async () => {
+          await n(
+            o(l).getByRole("button", { name: g })
+          ).toBeInTheDocument();
+        }
+      );
+    },
+    triggerPrimaryAction: async ({
+      title: a,
+      primaryActionLabel: t
+    }) => {
+      const e = await s({ title: a });
+      await i.step(
+        `Trigger the primary action "${t}" of the dialog`,
+        async () => {
+          await c.click(
+            o(e).getByRole("button", { name: t })
+          );
+        }
+      );
+    }
+  };
+};
+export {
+  f as getTestingUtilsDialog
+};

package/dist/esm/components/error-state/ErrorState.d.ts

@@ -8,9 +8,11 @@ export declare const errorState: import('tailwind-variants').TVReturnType<{
             h2?: import('tailwind-merge').ClassNameValue;
             h3?: import('tailwind-merge').ClassNameValue;
             h4?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
             icon?: import('tailwind-merge').ClassNameValue;
             description?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
             illustration?: import('tailwind-merge').ClassNameValue;
             informationContainer?: import('tailwind-merge').ClassNameValue;
             information?: import('tailwind-merge').ClassNameValue;
@@ -24,9 +26,11 @@ export declare const errorState: import('tailwind-variants').TVReturnType<{
             h2?: import('tailwind-merge').ClassNameValue;
             h3?: import('tailwind-merge').ClassNameValue;
             h4?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
             icon?: import('tailwind-merge').ClassNameValue;
             description?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
             illustration?: import('tailwind-merge').ClassNameValue;
             informationContainer?: import('tailwind-merge').ClassNameValue;
             information?: import('tailwind-merge').ClassNameValue;
@@ -34,6 +38,8 @@ export declare const errorState: import('tailwind-variants').TVReturnType<{
         };
     };
 } | {}, {
+    container: string[];
+    wrapper: string[];
     base: string[];
     illustration: string[];
     icon: string[];
@@ -52,9 +58,11 @@ export declare const errorState: import('tailwind-variants').TVReturnType<{
             h2?: import('tailwind-merge').ClassNameValue;
             h3?: import('tailwind-merge').ClassNameValue;
             h4?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
             base?: import('tailwind-merge').ClassNameValue;
             icon?: import('tailwind-merge').ClassNameValue;
             description?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
             illustration?: import('tailwind-merge').ClassNameValue;
             informationContainer?: import('tailwind-merge').ClassNameValue;
             information?: import('tailwind-merge').ClassNameValue;
@@ -62,6 +70,8 @@ export declare const errorState: import('tailwind-variants').TVReturnType<{
         };
     };
 } | {}, {
+    container: string[];
+    wrapper: string[];
     base: string[];
     illustration: string[];
     icon: string[];
@@ -74,6 +84,8 @@ export declare const errorState: import('tailwind-variants').TVReturnType<{
     h4: string[];
     description: string[];
 }, import('tailwind-variants').TVReturnType<unknown, {
+    container: string[];
+    wrapper: string[];
     base: string[];
     illustration: string[];
     icon: string[];
@@ -163,7 +175,7 @@ interface _404ErrorStateProps extends ErrorStateBaseProps {
     /**
      * No error object needed for 404 states.
      */
-    error: never;
+    error?: never;
 }
 export type ErrorStateProps = KnownErrorStateProps | UnknownErrorStateProps | _404ErrorStateProps;
 /**

package/dist/esm/components/error-state/ErrorState.js

@@ -1,16 +1,26 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as q } from "react";
-import { Illustration as A } from "@payfit/unity-illustrations";
-import { useIntl as F } from "react-intl";
-import { tv as G } from "tailwind-variants";
-import { Button as y } from "../button/Button.js";
-import { Code as H } from "../code/Code.js";
-import { Icon as J } from "../icon/Icon.js";
-import { Text as o } from "../text/Text.js";
-import { initConfig as K } from "./initConfig.js";
-import { Collapsible as O } from "./parts/Collapsible.js";
-const Q = G({
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { forwardRef as J, useRef as K, useCallback as O } from "react";
+import { Illustration as U } from "@payfit/unity-illustrations";
+import { useIntl as V } from "react-intl";
+import { tv as W } from "tailwind-variants";
+import { useContainerQueryLevel as X } from "../../hooks/use-container-query-level.js";
+import { Button as h } from "../button/Button.js";
+import { Code as Y } from "../code/Code.js";
+import { Icon as Z } from "../icon/Icon.js";
+import { Text as r } from "../text/Text.js";
+import { initConfig as _ } from "./initConfig.js";
+import { Collapsible as $ } from "./parts/Collapsible.js";
+const ee = W({
   slots: {
+    container: [
+      "uy:@container uy:w-full uy:h-full uy:content-center uy:flex-1"
+    ],
+    wrapper: [
+      "uy:border-solid uy:border-border-neutral uy:border uy:rounded-200 uy:p-300",
+      "uy:@section:py-600 uy:@section:px-auto",
+      "uy:@page:border-0 uy:@page:py-auto uy:@page:px-auto",
+      "uy:@app:border-0 uy:@app:py-auto uy:@app:px-auto"
+    ],
     base: [
       "uy:max-w-[704px] uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-250 uy:w-full uy:justify-self-center"
     ],
@@ -19,9 +29,9 @@ const Q = G({
       //common but start from section level
       "uy:hidden",
       //component
-      "",
+      "uy:@page:w-[200px]",
       // page
-      "uy:@section:w-[220px]",
+      "uy:@section:w-[200px]",
       //section
       "uy:@app:w-[240px]"
       //app
@@ -59,95 +69,126 @@ const Q = G({
     // only on component
     description: ["uy:hidden uy:@section:block uy:@section:w-full"]
   }
-}), U = (t, i) => {
-  const r = t.detailDescription ?? i?.detailDescription;
-  return /* @__PURE__ */ c(O, { children: [
-    /* @__PURE__ */ n("div", { className: "uy:mb-200", children: r }),
-    /* @__PURE__ */ n(H, { children: t.error.message })
+}), ne = (t, n) => {
+  const i = t.detailDescription ?? n?.detailDescription;
+  return /* @__PURE__ */ u($, { children: [
+    /* @__PURE__ */ e("div", { className: "uy:mb-200", children: i }),
+    /* @__PURE__ */ e(Y, { children: t.error.message })
   ] });
-}, V = (t, i) => {
-  const r = t.backButtonLabel ?? i?.backButtonLabel;
-  return /* @__PURE__ */ n("div", { className: "uy:mt-200", children: /* @__PURE__ */ n(
-    y,
+}, te = (t, n) => {
+  const i = t.backButtonLabel ?? n?.backButtonLabel;
+  return /* @__PURE__ */ e("div", { className: "uy:mt-200 uy:@section:block uy:hidden", children: /* @__PURE__ */ e(
+    h,
     {
       onClick: () => {
         window.history.go(-1);
       },
       color: "primary",
       variant: "ghost",
-      children: r
+      children: i
     }
   ) });
-}, W = q((t, i) => {
+}, oe = J((t, n) => {
   const {
-    icon: r,
-    illustration: p,
-    onButtonPress: h,
-    buttonLabel: f,
-    mainTitle: b,
-    mainDescription: v,
-    mainDescriptionComponent: g,
-    type: u,
-    error: k,
-    role: x = "status"
+    icon: i,
+    illustration: b,
+    onButtonPress: v,
+    buttonLabel: g,
+    mainTitle: x,
+    mainDescription: k,
+    mainDescriptionComponent: w,
+    type: m,
+    error: C,
+    role: N = "status"
   } = t, {
-    base: w,
-    illustration: N,
-    icon: C,
-    informationContainer: D,
-    information: E,
-    informationComponent: B,
-    description: L,
-    h1: M,
-    h2: j,
-    h3: I,
-    h4: T
-  } = Q(), l = F(), S = K(l);
-  let a = u === "404" ? "404" : "unknown";
-  u === "generic" && k && (a = "known");
-  const e = S.get(a), m = p ?? e?.illustration, d = r ?? e?.icon, P = f ?? e?.buttonLabel, s = b ?? e?.mainTitle, z = v ?? e?.mainDescription, R = g ?? e?.mainDescriptionComponent;
-  return /* @__PURE__ */ n("div", { role: x, ref: i, className: "uy:@container uy:w-full", children: /* @__PURE__ */ c("div", { className: w(), children: [
-    m && /* @__PURE__ */ n(
-      A,
-      {
-        src: m,
-        variant: "picture",
-        alt: l.formatMessage({
-          id: "unity:component:error-state:common:illustration:alt",
-          defaultMessage: "Error states"
-        }),
-        className: N(),
-        isDecorative: !0
-      }
-    ),
-    d && /* @__PURE__ */ n(
-      J,
-      {
-        src: d,
-        size: 24,
-        color: "content.neutral.low",
-        alt: l.formatMessage({
-          id: "unity:component:error-state:common:icon:alt",
-          defaultMessage: "Error states"
-        }),
-        className: C()
-      }
-    ),
-    /* @__PURE__ */ c("div", { className: D(), children: [
-      /* @__PURE__ */ n(o, { asElement: "h1", variant: "h1", className: M(), children: s }),
-      /* @__PURE__ */ n(o, { asElement: "h2", variant: "h2", className: j(), children: s }),
-      /* @__PURE__ */ n(o, { asElement: "h3", variant: "h3", className: I(), children: s }),
-      /* @__PURE__ */ n(o, { asElement: "h4", variant: "h4", className: T(), children: s }),
-      /* @__PURE__ */ n(o, { asElement: "p", variant: "body", className: E(), children: z }),
-      /* @__PURE__ */ n(o, { asElement: "p", variant: "body", className: B(), children: R })
-    ] }),
-    /* @__PURE__ */ n(y, { variant: "primary", onPress: h, children: P }),
-    a === "unknown" && V(t, e),
-    a === "known" && /* @__PURE__ */ n("div", { className: L(), children: U(t, e) })
-  ] }) });
+    base: D,
+    container: E,
+    wrapper: B,
+    illustration: L,
+    icon: M,
+    informationContainer: j,
+    information: I,
+    informationComponent: T,
+    description: R,
+    h1: S,
+    h2: P,
+    h3: z,
+    h4: Q
+  } = ee(), l = V(), q = _(l), y = K(null), { level: d } = X({ ref: y }), A = O(
+    (c) => {
+      y.current = c, n && (typeof n == "function" ? n(c) : n.current = c);
+    },
+    [n]
+  );
+  let a = m === "404" ? "404" : "unknown";
+  m === "generic" && C && (a = "known");
+  const o = q.get(a), p = b ?? o?.illustration, f = i ?? o?.icon, F = g ?? o?.buttonLabel, s = x ?? o?.mainTitle, G = k ?? o?.mainDescription, H = w ?? o?.mainDescriptionComponent;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: N,
+      className: E(),
+      ref: A,
+      "data-container-level": d,
+      children: /* @__PURE__ */ e("div", { className: B(), children: /* @__PURE__ */ u("div", { className: D(), children: [
+        p && /* @__PURE__ */ e(
+          U,
+          {
+            src: p,
+            variant: "picture",
+            alt: l.formatMessage({
+              id: "unity:component:error-state:common:illustration:alt",
+              defaultMessage: "Error states"
+            }),
+            className: L(),
+            isDecorative: !0
+          }
+        ),
+        f && /* @__PURE__ */ e(
+          Z,
+          {
+            src: f,
+            size: 24,
+            color: "content.neutral.low",
+            alt: l.formatMessage({
+              id: "unity:component:error-state:common:icon:alt",
+              defaultMessage: "Error states"
+            }),
+            className: M()
+          }
+        ),
+        /* @__PURE__ */ u("div", { className: j(), children: [
+          /* @__PURE__ */ e(r, { asElement: "h1", variant: "h1", className: S(), children: s }),
+          /* @__PURE__ */ e(r, { asElement: "h2", variant: "h2", className: P(), children: s }),
+          /* @__PURE__ */ e(r, { asElement: "h3", variant: "h3", className: z(), children: s }),
+          /* @__PURE__ */ e(r, { asElement: "h4", variant: "h4", className: Q(), children: s }),
+          /* @__PURE__ */ e(r, { asElement: "p", variant: "body", className: I(), children: G }),
+          /* @__PURE__ */ e(
+            r,
+            {
+              asElement: "p",
+              variant: "body",
+              className: T(),
+              children: H
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          h,
+          {
+            variant: d === "component" ? "ghost" : "primary",
+            onPress: v,
+            children: F
+          }
+        ),
+        a === "unknown" && te(t, o),
+        a === "known" && /* @__PURE__ */ e("div", { className: R(), children: ne(t, o) })
+      ] }) })
+    }
+  );
 });
-W.displayName = "ErrorState";
+oe.displayName = "ErrorState";
 export {
-  W as ErrorState,
-  Q as errorState
+  oe as ErrorState,
+  ee as errorState
 };

package/dist/esm/components/error-state/initConfig.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
 import t from "@payfit/unity-illustrations/assets/EmptyStateIncidentPanel";
 import a from "@payfit/unity-illustrations/assets/EmptyStateResearch";
-import { Link as n } from "../link/Link.js";
+import { RawLink as n } from "../link/RawLink.js";
 const c = (e) => /* @__PURE__ */ new Map([
   [
     "known",

package/dist/esm/components/fieldset/Fieldset.d.ts

@@ -13,6 +13,11 @@ export declare const fieldset: import('tailwind-variants').TVReturnType<{
             fieldsContainer: string;
         };
     };
+    disableEndMargin: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     legend: string;
@@ -31,6 +36,11 @@ export declare const fieldset: import('tailwind-variants').TVReturnType<{
             fieldsContainer: string;
         };
     };
+    disableEndMargin: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     legend: string;
@@ -49,6 +59,11 @@ export declare const fieldset: import('tailwind-variants').TVReturnType<{
             fieldsContainer: string;
         };
     };
+    disableEndMargin: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     legend: string;
@@ -68,6 +83,10 @@ export interface FieldsetProps extends PropsWithChildren<VariantProps<typeof fie
      * Whether to hide the legend of the fieldset.
      */
     isLegendHidden?: boolean;
+    /**
+     * Whether to disable the end margin of the fieldset.
+     */
+    disableEndMargin?: boolean;
 }
 /**
  * The `Fieldset` component groups related form fields together with an accessible structure.

package/dist/esm/components/fieldset/Fieldset.js

@@ -1,8 +1,8 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { uyTv as g } from "@payfit/unity-themes";
-import { useId as b } from "react-aria";
-const x = g({
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
+import { useId as x } from "react-aria";
+const h = b({
   slots: {
     base: "uy:p-0 uy:m-0 uy:[&+&]:mt-500 uy:[&:last-of-type]:mb-500",
     legend: "uy:typography-h3 uy:text-content-neutral",
@@ -21,46 +21,52 @@ const x = g({
         description: "uy:block",
         fieldsContainer: "uy:mt-300"
       }
+    },
+    disableEndMargin: {
+      true: {
+        base: "uy:[&:last-of-type]:mb-0"
+      }
     }
   },
   defaultVariants: {
-    isLegendHidden: !1
+    isLegendHidden: !1,
+    disableEndMargin: !1
   }
-}), h = m(
-  ({ children: i, ...d }, n) => {
-    const s = b(), { legend: l, description: e, isLegendHidden: o, ...r } = d, {
-      base: a,
-      legend: y,
-      description: c,
-      fieldsContainer: u
-    } = x({ isLegendHidden: o }), p = e ? `${s}-fieldset-description` : void 0;
-    return /* @__PURE__ */ f(
+}), v = g(
+  ({ children: t, ...d }, n) => {
+    const i = x(), { legend: l, description: e, isLegendHidden: a, disableEndMargin: r, ...o } = d, {
+      base: y,
+      legend: c,
+      description: u,
+      fieldsContainer: p
+    } = h({ isLegendHidden: a, disableEndMargin: r }), f = e ? `${i}-fieldset-description` : void 0;
+    return /* @__PURE__ */ m(
       "fieldset",
       {
         "data-dd-privacy": "allow",
-        ...r,
+        ...o,
         ref: n,
-        className: a(),
-        "aria-describedby": p,
+        className: y(),
+        "aria-describedby": f,
         children: [
-          /* @__PURE__ */ t("legend", { className: y(), children: l }),
-          e && /* @__PURE__ */ t(
+          /* @__PURE__ */ s("legend", { className: c(), children: l }),
+          e && /* @__PURE__ */ s(
             "span",
             {
-              id: `${s}-fieldset-description`,
+              id: `${i}-fieldset-description`,
               "data-fieldset-slot": "description",
-              className: c(),
+              className: u(),
               children: e
             }
           ),
-          /* @__PURE__ */ t("div", { className: u(), children: i })
+          /* @__PURE__ */ s("div", { className: p(), children: t })
         ]
       }
     );
   }
 );
-h.displayName = "Fieldset";
+v.displayName = "Fieldset";
 export {
-  h as Fieldset,
-  x as fieldset
+  v as Fieldset,
+  h as fieldset
 };