@payfit/unity-components 2.2.0 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as o, jsxs as
|
|
1
|
+
import { jsx as o, jsxs as p } from "react/jsx-runtime";
|
|
2
2
|
import { Children as l, isValidElement as i } from "react";
|
|
3
3
|
import { uyTv as f } from "@payfit/unity-themes";
|
|
4
4
|
import { useId as w } from "react-aria";
|
|
@@ -28,7 +28,7 @@ const T = f({
|
|
|
28
28
|
"uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out",
|
|
29
29
|
"uy:md:[animation-delay:100ms] uy:md:data-[entering]:animate-zoom-in uy:md:data-[exiting]:animate-zoom-out"
|
|
30
30
|
],
|
|
31
|
-
content: ["uy:group/dialog", "uy:outline-none
|
|
31
|
+
content: ["uy:group/dialog", "uy:outline-none"],
|
|
32
32
|
dismissIcon: ["uy:absolute uy:right-200 uy:top-200 uy:z-20"]
|
|
33
33
|
},
|
|
34
34
|
variants: {
|
|
@@ -62,7 +62,7 @@ function B({
|
|
|
62
62
|
size: n = "md",
|
|
63
63
|
...d
|
|
64
64
|
}) {
|
|
65
|
-
const m = z(), u = w(), { overlay: y, wrapper: s, content: g, dismissIcon:
|
|
65
|
+
const m = z(), u = w(), { overlay: y, wrapper: s, content: g, dismissIcon: c } = T({ size: n });
|
|
66
66
|
return /* @__PURE__ */ o(
|
|
67
67
|
x,
|
|
68
68
|
{
|
|
@@ -70,34 +70,35 @@ function B({
|
|
|
70
70
|
isOpen: t,
|
|
71
71
|
onOpenChange: a,
|
|
72
72
|
className: y(),
|
|
73
|
-
children: /* @__PURE__ */
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
73
|
+
children: /* @__PURE__ */ o(v, { className: s(), "data-unity-dialog": !0, "data-dd-privacy": "allow", children: /* @__PURE__ */ o(h.Provider, { value: { "aria-describedby": u }, children: /* @__PURE__ */ p(
|
|
74
|
+
b,
|
|
75
|
+
{
|
|
76
|
+
role: j(e) ? "alertdialog" : "dialog",
|
|
77
|
+
"aria-modal": "true",
|
|
78
|
+
className: g(),
|
|
79
|
+
"aria-label": d["aria-label"],
|
|
80
|
+
"aria-describedby": u,
|
|
81
|
+
"data-unity-slot": "dialog",
|
|
82
|
+
"data-unity-size": n,
|
|
83
|
+
children: [
|
|
84
|
+
r && /* @__PURE__ */ o(
|
|
85
|
+
I,
|
|
86
|
+
{
|
|
87
|
+
icon: "CloseOutlined",
|
|
88
|
+
color: "content.neutral.low",
|
|
89
|
+
title: m.formatMessage({
|
|
90
|
+
id: "unity:component:common:close:label"
|
|
91
|
+
}),
|
|
92
|
+
className: c(),
|
|
93
|
+
slot: "close",
|
|
94
|
+
size: "large",
|
|
95
|
+
asElement: "button"
|
|
96
|
+
}
|
|
97
|
+
),
|
|
98
|
+
e
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
) }) })
|
|
101
102
|
}
|
|
102
103
|
);
|
|
103
104
|
}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
+
import { IntlShape } from 'react-intl';
|
|
1
2
|
import { PlayCtx } from '../../types/testing.js';
|
|
2
3
|
/**
|
|
3
4
|
* Factory function returning a set of helpers to test Unity Dialog components.
|
|
4
5
|
* It wires Storybook's `Play` context with convenient utilities to query,
|
|
5
6
|
* assert, and interact with dialogs rendered on the canvas.
|
|
6
7
|
* @param context The Storybook play context used to group steps and actions.
|
|
8
|
+
* @param globalIntl The global intl instance to use for localization.
|
|
7
9
|
* @returns An object of helpers: `findDialog`, `closeDialog`, `assertDialogIsClosed`, `assertElementExistsInDialog`, and `triggerPrimaryAction`.
|
|
8
10
|
*/
|
|
9
|
-
export declare const getTestingUtilsDialog: (context: PlayCtx) => {
|
|
11
|
+
export declare const getTestingUtilsDialog: (context: PlayCtx, globalIntl: IntlShape) => {
|
|
10
12
|
findDialog: ({ title }: {
|
|
11
13
|
title: string;
|
|
12
14
|
}) => Promise<HTMLElement>;
|
|
@@ -14,6 +16,10 @@ export declare const getTestingUtilsDialog: (context: PlayCtx) => {
|
|
|
14
16
|
title: string;
|
|
15
17
|
closeButtonLabel: string;
|
|
16
18
|
}) => Promise<void>;
|
|
19
|
+
closeDialogWithDismissButton: ({ title, dismissButtonLabel, }: {
|
|
20
|
+
title: string;
|
|
21
|
+
dismissButtonLabel?: string;
|
|
22
|
+
}) => Promise<void>;
|
|
17
23
|
assertDialogIsClosed: (dialog: HTMLElement) => Promise<void>;
|
|
18
24
|
assertElementExistsInDialog: ({ title, content, primaryActionLabel, secondaryActionLabel, }: {
|
|
19
25
|
title: string;
|
|
@@ -1,31 +1,42 @@
|
|
|
1
|
-
import { userEvent as
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const t =
|
|
1
|
+
import { userEvent as r, within as s, expect as n, waitFor as w, screen as y } from "storybook/test";
|
|
2
|
+
const p = (e, m) => {
|
|
3
|
+
const o = async ({ title: a }) => await w(() => {
|
|
4
|
+
const t = y.queryByRole("dialog", { name: a }) ?? y.queryByRole("alertdialog", { name: a });
|
|
5
5
|
if (!t)
|
|
6
6
|
throw new Error(`Dialog with title: "${a}" not found in the page`);
|
|
7
7
|
return t;
|
|
8
|
-
}),
|
|
9
|
-
await
|
|
10
|
-
|
|
8
|
+
}), c = async (a, t) => {
|
|
9
|
+
await r.click(
|
|
10
|
+
s(a).getByRole("button", {
|
|
11
11
|
name: t
|
|
12
12
|
}),
|
|
13
13
|
{ delay: 100 }
|
|
14
14
|
);
|
|
15
15
|
};
|
|
16
16
|
return {
|
|
17
|
-
findDialog:
|
|
17
|
+
findDialog: o,
|
|
18
18
|
closeDialog: async ({
|
|
19
19
|
title: a,
|
|
20
20
|
closeButtonLabel: t
|
|
21
21
|
}) => {
|
|
22
|
-
await
|
|
23
|
-
const
|
|
24
|
-
await
|
|
22
|
+
await e.step("Close dialog", async () => {
|
|
23
|
+
const i = await o({ title: a });
|
|
24
|
+
await c(i, t);
|
|
25
|
+
});
|
|
26
|
+
},
|
|
27
|
+
closeDialogWithDismissButton: async ({
|
|
28
|
+
title: a,
|
|
29
|
+
dismissButtonLabel: t = m.formatMessage({
|
|
30
|
+
id: "unity:component:common:close:label"
|
|
31
|
+
})
|
|
32
|
+
}) => {
|
|
33
|
+
await e.step("Close dialog", async () => {
|
|
34
|
+
const i = await o({ title: a });
|
|
35
|
+
await c(i, t);
|
|
25
36
|
});
|
|
26
37
|
},
|
|
27
38
|
assertDialogIsClosed: async (a) => {
|
|
28
|
-
await
|
|
39
|
+
await w(
|
|
29
40
|
async () => {
|
|
30
41
|
await n(a).not.toBeInTheDocument();
|
|
31
42
|
},
|
|
@@ -35,24 +46,24 @@ const f = (i) => {
|
|
|
35
46
|
assertElementExistsInDialog: async ({
|
|
36
47
|
title: a,
|
|
37
48
|
content: t,
|
|
38
|
-
primaryActionLabel:
|
|
39
|
-
secondaryActionLabel:
|
|
49
|
+
primaryActionLabel: i,
|
|
50
|
+
secondaryActionLabel: l
|
|
40
51
|
}) => {
|
|
41
|
-
const
|
|
42
|
-
t && await
|
|
43
|
-
await n(
|
|
44
|
-
}),
|
|
45
|
-
`Check if "${
|
|
52
|
+
const g = await o({ title: a });
|
|
53
|
+
t && await e.step(`Check if "${t}" is in the dialog`, async () => {
|
|
54
|
+
await n(s(g).getByText(t)).toBeInTheDocument();
|
|
55
|
+
}), i && await e.step(
|
|
56
|
+
`Check if "${i}" is in the dialog`,
|
|
46
57
|
async () => {
|
|
47
58
|
await n(
|
|
48
|
-
|
|
59
|
+
s(g).getByRole("button", { name: i })
|
|
49
60
|
).toBeInTheDocument();
|
|
50
61
|
}
|
|
51
|
-
),
|
|
52
|
-
`Check if "${
|
|
62
|
+
), l && await e.step(
|
|
63
|
+
`Check if "${l}" is in the dialog`,
|
|
53
64
|
async () => {
|
|
54
65
|
await n(
|
|
55
|
-
|
|
66
|
+
s(g).getByRole("button", { name: l })
|
|
56
67
|
).toBeInTheDocument();
|
|
57
68
|
}
|
|
58
69
|
);
|
|
@@ -61,12 +72,12 @@ const f = (i) => {
|
|
|
61
72
|
title: a,
|
|
62
73
|
primaryActionLabel: t
|
|
63
74
|
}) => {
|
|
64
|
-
const
|
|
65
|
-
await
|
|
75
|
+
const i = await o({ title: a });
|
|
76
|
+
await e.step(
|
|
66
77
|
`Trigger the primary action "${t}" of the dialog`,
|
|
67
78
|
async () => {
|
|
68
|
-
await
|
|
69
|
-
|
|
79
|
+
await r.click(
|
|
80
|
+
s(i).getByRole("button", { name: t })
|
|
70
81
|
);
|
|
71
82
|
}
|
|
72
83
|
);
|
|
@@ -74,5 +85,5 @@ const f = (i) => {
|
|
|
74
85
|
};
|
|
75
86
|
};
|
|
76
87
|
export {
|
|
77
|
-
|
|
88
|
+
p as getTestingUtilsDialog
|
|
78
89
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payfit/unity-components",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.2",
|
|
4
4
|
"module": "./dist/esm/index.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@hookform/devtools": "4.4.0",
|
|
43
43
|
"@hookform/resolvers": "5.2.1",
|
|
44
44
|
"@internationalized/date": "3.10.0",
|
|
45
|
-
"@payfit/unity-illustrations": "2.2.
|
|
45
|
+
"@payfit/unity-illustrations": "2.2.2",
|
|
46
46
|
"@radix-ui/react-avatar": "1.1.11",
|
|
47
47
|
"@radix-ui/react-slot": "1.2.4",
|
|
48
48
|
"@react-aria/interactions": "3.25.6",
|
|
@@ -63,16 +63,16 @@
|
|
|
63
63
|
"react-international-phone": "4.5.0",
|
|
64
64
|
"react-intl": "7.1.14",
|
|
65
65
|
"react-stately": "3.42.0",
|
|
66
|
-
"storybook": "10.2.
|
|
66
|
+
"storybook": "10.2.2",
|
|
67
67
|
"tailwind-variants": "2.1.0",
|
|
68
68
|
"usehooks-ts": "3.1.0",
|
|
69
69
|
"zod": "4.3.6"
|
|
70
70
|
},
|
|
71
71
|
"peerDependencies": {
|
|
72
72
|
"@hookform/devtools": "^4",
|
|
73
|
-
"@payfit/unity-icons": "2.2.
|
|
74
|
-
"@payfit/unity-themes": "2.2.
|
|
75
|
-
"@storybook/react-vite": "^10.2.
|
|
73
|
+
"@payfit/unity-icons": "2.2.2",
|
|
74
|
+
"@payfit/unity-themes": "2.2.2",
|
|
75
|
+
"@storybook/react-vite": "^10.2.2",
|
|
76
76
|
"@tanstack/react-query": "^5",
|
|
77
77
|
"@tanstack/react-router": "^1.131",
|
|
78
78
|
"@tanstack/react-router-devtools": "^1.131",
|
|
@@ -90,15 +90,15 @@
|
|
|
90
90
|
"@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
|
|
91
91
|
"@payfit/storybook-addon-console-errors": "0.0.0-use.local",
|
|
92
92
|
"@payfit/storybook-config": "0.0.0-use.local",
|
|
93
|
-
"@payfit/unity-icons": "2.2.
|
|
94
|
-
"@payfit/unity-illustrations": "2.2.
|
|
95
|
-
"@payfit/unity-themes": "2.2.
|
|
93
|
+
"@payfit/unity-icons": "2.2.2",
|
|
94
|
+
"@payfit/unity-illustrations": "2.2.2",
|
|
95
|
+
"@payfit/unity-themes": "2.2.2",
|
|
96
96
|
"@payfit/vite-configs": "0.0.0-use.local",
|
|
97
|
-
"@storybook/addon-a11y": "10.2.
|
|
98
|
-
"@storybook/addon-docs": "10.2.
|
|
99
|
-
"@storybook/addon-links": "10.2.
|
|
100
|
-
"@storybook/addon-vitest": "10.2.
|
|
101
|
-
"@storybook/react-vite": "10.2.
|
|
97
|
+
"@storybook/addon-a11y": "10.2.2",
|
|
98
|
+
"@storybook/addon-docs": "10.2.2",
|
|
99
|
+
"@storybook/addon-links": "10.2.2",
|
|
100
|
+
"@storybook/addon-vitest": "10.2.2",
|
|
101
|
+
"@storybook/react-vite": "10.2.2",
|
|
102
102
|
"@tanstack/react-devtools": "0.9.3",
|
|
103
103
|
"@tanstack/react-form-devtools": "0.2.13",
|
|
104
104
|
"@tanstack/react-query": "5.90.2",
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
"@types/react-router-dom": "5.3.3",
|
|
112
112
|
"@vitejs/plugin-react": "5.1.0",
|
|
113
113
|
"@vitest/browser": "4.0.6",
|
|
114
|
-
"eslint-plugin-storybook": "10.2.
|
|
114
|
+
"eslint-plugin-storybook": "10.2.2",
|
|
115
115
|
"glob": "11.0.1",
|
|
116
116
|
"msw": "2.8.4",
|
|
117
117
|
"msw-storybook-addon": "^2.0.6",
|
|
@@ -119,8 +119,8 @@
|
|
|
119
119
|
"prettier": "3.1.0",
|
|
120
120
|
"react-docgen-typescript": "2.2.2",
|
|
121
121
|
"react-hot-toast": "2.5.1",
|
|
122
|
-
"storybook": "10.2.
|
|
123
|
-
"storybook-addon-pseudo-states": "10.2.
|
|
122
|
+
"storybook": "10.2.2",
|
|
123
|
+
"storybook-addon-pseudo-states": "10.2.2",
|
|
124
124
|
"storybook-addon-tag-badges": "3.0.2",
|
|
125
125
|
"storybook-mock-date-decorator": "3.0.0",
|
|
126
126
|
"tailwindcss": "4.1.11",
|