@transferwise/components 0.0.0-experimental-27624ec → 0.0.0-experimental-050a253
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.
- package/build/main.css +1 -1
- package/build/styles/dimmer/Dimmer.css +1 -1
- package/build/styles/main.css +1 -1
- package/package.json +1 -1
- package/src/common/bottomSheet/BottomSheet.test.story.tsx +38 -17
- package/src/dimmer/Dimmer.css +1 -1
- package/src/dimmer/Dimmer.less +1 -1
- package/src/inputs/SelectInput.test.story.tsx +4 -70
- package/src/main.css +1 -1
package/build/main.css
CHANGED
package/build/styles/main.css
CHANGED
package/package.json
CHANGED
|
@@ -1,14 +1,19 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
1
|
import { useState } from 'react';
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import Button from '../../button';
|
|
2
|
+
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
3
|
+
import { userEvent, within } from 'storybook/test';
|
|
6
4
|
import { lorem100, lorem500 } from '../../test-utils';
|
|
7
|
-
import Title from '../../title/Title';
|
|
8
5
|
import { Typography } from '../propsValues/typography';
|
|
9
|
-
|
|
6
|
+
import Alert from '../../alert';
|
|
7
|
+
import Body from '../../body';
|
|
8
|
+
import Button from '../../button';
|
|
9
|
+
import Title from '../../title';
|
|
10
10
|
import BottomSheet from './BottomSheet';
|
|
11
11
|
|
|
12
|
+
const wait = async (duration = 500) =>
|
|
13
|
+
new Promise<void>((resolve) => {
|
|
14
|
+
setTimeout(resolve, duration);
|
|
15
|
+
});
|
|
16
|
+
|
|
12
17
|
export default {
|
|
13
18
|
component: BottomSheet,
|
|
14
19
|
title: 'Dialogs/BottomSheet/tests',
|
|
@@ -20,11 +25,23 @@ export default {
|
|
|
20
25
|
|
|
21
26
|
type Story = StoryObj<typeof BottomSheet>;
|
|
22
27
|
|
|
28
|
+
/**
|
|
29
|
+
* This test ensures that when the SelectInput is used within a scrollable page,
|
|
30
|
+
* opening the dropdown does not cause any unwanted scrolling or layout shifts.
|
|
31
|
+
* Expected preview should start with green bar at the top, with yellow section
|
|
32
|
+
* not in the viewport.
|
|
33
|
+
*
|
|
34
|
+
* NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
|
|
35
|
+
*/
|
|
23
36
|
export const SmoothScrollReset: Story = {
|
|
24
37
|
args: {
|
|
25
38
|
children: (
|
|
26
39
|
<>
|
|
27
|
-
<Title type={Typography.TITLE_SECTION}>
|
|
40
|
+
<Title type={Typography.TITLE_SECTION}>Observe the document</Title>
|
|
41
|
+
<Alert className="m-t-2" type="warning">
|
|
42
|
+
Once the <code>BottomSheet</code> opens, the document underneath should be static and
|
|
43
|
+
should not scroll.
|
|
44
|
+
</Alert>
|
|
28
45
|
<Body as="p">{lorem100}</Body>
|
|
29
46
|
<Body as="p">{lorem100}</Body>
|
|
30
47
|
</>
|
|
@@ -35,27 +52,34 @@ export const SmoothScrollReset: Story = {
|
|
|
35
52
|
<>
|
|
36
53
|
<style>{'html { scroll-behavior: smooth; }'}</style>
|
|
37
54
|
<div style={{ maxWidth: 500 }}>
|
|
55
|
+
<Body as="p">
|
|
56
|
+
<p>{lorem100}</p>
|
|
57
|
+
<p>{lorem100}</p>
|
|
58
|
+
</Body>
|
|
38
59
|
<Story />
|
|
60
|
+
<Body as="p" className="m-t-5 disabled">
|
|
61
|
+
{lorem500}
|
|
62
|
+
</Body>
|
|
39
63
|
</div>
|
|
40
64
|
</>
|
|
41
65
|
),
|
|
42
66
|
],
|
|
43
67
|
parameters: {
|
|
44
68
|
chromatic: {
|
|
45
|
-
|
|
69
|
+
disableSnapshot: true,
|
|
46
70
|
},
|
|
47
71
|
},
|
|
72
|
+
play: async ({ canvasElement }) => {
|
|
73
|
+
document.documentElement.scrollTop = 400;
|
|
74
|
+
await wait(500);
|
|
75
|
+
const canvas = within(canvasElement);
|
|
76
|
+
await userEvent.click(canvas.getByRole('button'));
|
|
77
|
+
},
|
|
48
78
|
render: ({ open, ...args }) => {
|
|
49
79
|
const [isOpen, setIsOpen] = useState(false);
|
|
50
80
|
|
|
51
81
|
return (
|
|
52
82
|
<div>
|
|
53
|
-
<Body as="p" className="disabled">
|
|
54
|
-
{lorem100}
|
|
55
|
-
</Body>
|
|
56
|
-
<Body as="p" className="m-b-5 disabled">
|
|
57
|
-
{lorem100}
|
|
58
|
-
</Body>
|
|
59
83
|
<Button onClick={() => setIsOpen(true)}>Open BottomSheet</Button>
|
|
60
84
|
<BottomSheet
|
|
61
85
|
{...args}
|
|
@@ -64,9 +88,6 @@ export const SmoothScrollReset: Story = {
|
|
|
64
88
|
setIsOpen(false);
|
|
65
89
|
}}
|
|
66
90
|
/>
|
|
67
|
-
<Body as="p" className="m-t-5 disabled">
|
|
68
|
-
{lorem500}
|
|
69
|
-
</Body>
|
|
70
91
|
</div>
|
|
71
92
|
);
|
|
72
93
|
},
|
package/src/dimmer/Dimmer.css
CHANGED
package/src/dimmer/Dimmer.less
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
2
|
import { fn, type Mock, userEvent, within } from 'storybook/test';
|
|
3
|
-
import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
|
|
4
|
-
|
|
5
|
-
import { isChromatic } from '../../.storybook/helpers/isChromatic';
|
|
6
3
|
import { allModes } from '../../.storybook/modes';
|
|
7
4
|
import { lorem5, lorem500 } from '../test-utils';
|
|
8
5
|
import { Field } from '../field/Field';
|
|
@@ -24,7 +21,7 @@ export default meta;
|
|
|
24
21
|
|
|
25
22
|
type Story<T, M extends boolean = false> = StoryObj<SelectInputProps<T, M>>;
|
|
26
23
|
|
|
27
|
-
const wait = async (duration =
|
|
24
|
+
const wait = async (duration = 500) =>
|
|
28
25
|
new Promise<void>((resolve) => {
|
|
29
26
|
setTimeout(resolve, duration);
|
|
30
27
|
});
|
|
@@ -34,7 +31,8 @@ const wait = async (duration = 1000) =>
|
|
|
34
31
|
* opening the dropdown does not cause any unwanted scrolling or layout shifts.
|
|
35
32
|
* Expected preview should start with green bar at the top, with yellow section
|
|
36
33
|
* not in the viewport.
|
|
37
|
-
*
|
|
34
|
+
*
|
|
35
|
+
* NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
|
|
38
36
|
*/
|
|
39
37
|
export const SmoothScrollReset: Story<string> = {
|
|
40
38
|
args: {
|
|
@@ -69,10 +67,7 @@ export const SmoothScrollReset: Story<string> = {
|
|
|
69
67
|
],
|
|
70
68
|
play: async ({ canvasElement }) => {
|
|
71
69
|
document.documentElement.scrollTop = 400;
|
|
72
|
-
|
|
73
|
-
window.scrollTo(0, 400);
|
|
74
|
-
window.scroll(0, 400);
|
|
75
|
-
await wait(500);
|
|
70
|
+
await wait();
|
|
76
71
|
const canvas = within(canvasElement);
|
|
77
72
|
const triggerButton = canvas.getByRole('combobox');
|
|
78
73
|
await userEvent.click(triggerButton);
|
|
@@ -86,64 +81,3 @@ export const SmoothScrollReset: Story<string> = {
|
|
|
86
81
|
},
|
|
87
82
|
},
|
|
88
83
|
};
|
|
89
|
-
|
|
90
|
-
/**
|
|
91
|
-
* This test ensures that when the SelectInput is used within a scrollable page,
|
|
92
|
-
* opening the dropdown does not cause any unwanted scrolling or layout shifts.
|
|
93
|
-
* Expected preview should start with green bar at the top, with yellow section
|
|
94
|
-
* not in the viewport.
|
|
95
|
-
* NB: This test is disabled in Chromatic as there's no known way .
|
|
96
|
-
*/
|
|
97
|
-
export const SmoothScrollReset2: Story<string> = {
|
|
98
|
-
args: {
|
|
99
|
-
items: Array.from({ length: 15 }).map((_, id) => ({
|
|
100
|
-
type: 'option',
|
|
101
|
-
value: `option ${id + 1}`,
|
|
102
|
-
})),
|
|
103
|
-
placeholder: 'Select option',
|
|
104
|
-
},
|
|
105
|
-
decorators: [
|
|
106
|
-
(Story) => (
|
|
107
|
-
<>
|
|
108
|
-
<style>{`html { scroll-behavior: smooth; width: 414px; height 800px ; overflow: auto}`}</style>
|
|
109
|
-
<div>
|
|
110
|
-
<div
|
|
111
|
-
className="d-flex align-items-center justify-content-center"
|
|
112
|
-
style={{
|
|
113
|
-
backgroundColor: 'var(--color-bright-yellow)',
|
|
114
|
-
height: 400,
|
|
115
|
-
}}
|
|
116
|
-
>
|
|
117
|
-
This block should not be in the viewport.
|
|
118
|
-
</div>
|
|
119
|
-
<div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
|
|
120
|
-
<Field id="el1" label={lorem5}>
|
|
121
|
-
<Story />
|
|
122
|
-
</Field>
|
|
123
|
-
<Body as="p">{lorem500}</Body>
|
|
124
|
-
</div>
|
|
125
|
-
</>
|
|
126
|
-
),
|
|
127
|
-
],
|
|
128
|
-
play: async ({ canvasElement }) => {
|
|
129
|
-
document.documentElement.scrollTop = 400;
|
|
130
|
-
document.body.scrollTop = 400;
|
|
131
|
-
window.scrollTo(0, 400);
|
|
132
|
-
window.scroll(0, 400);
|
|
133
|
-
await wait(500);
|
|
134
|
-
const canvas = within(canvasElement);
|
|
135
|
-
const triggerButton = canvas.getByRole('combobox');
|
|
136
|
-
await userEvent.click(triggerButton);
|
|
137
|
-
},
|
|
138
|
-
globals: {
|
|
139
|
-
viewport: { value: allModes.largeMobile.viewport, isRotated: false },
|
|
140
|
-
},
|
|
141
|
-
parameters: {
|
|
142
|
-
chromatic: {
|
|
143
|
-
delay: 250,
|
|
144
|
-
modes: {
|
|
145
|
-
largeMobile: allModes.largeMobile,
|
|
146
|
-
},
|
|
147
|
-
},
|
|
148
|
-
},
|
|
149
|
-
};
|