@transferwise/components 0.0.0-experimental-6fb3b67 → 0.0.0-experimental-4658255
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/inputs/SelectInput.js +41 -2
- package/build/inputs/SelectInput.js.map +1 -1
- package/build/inputs/SelectInput.mjs +41 -2
- package/build/inputs/SelectInput.mjs.map +1 -1
- package/build/inputs/_BottomSheet.js +1 -29
- package/build/inputs/_BottomSheet.js.map +1 -1
- package/build/inputs/_BottomSheet.mjs +2 -30
- package/build/inputs/_BottomSheet.mjs.map +1 -1
- package/build/main.css +5 -15
- package/build/styles/inputs/SelectInput.css +5 -15
- package/build/styles/main.css +5 -15
- package/build/types/inputs/SelectInput.d.ts +20 -1
- package/build/types/inputs/SelectInput.d.ts.map +1 -1
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/inputs/SelectInput.css +5 -15
- package/src/inputs/SelectInput.spec.tsx +0 -33
- package/src/inputs/SelectInput.story.tsx +94 -0
- package/src/inputs/SelectInput.tsx +84 -1
- package/src/inputs/_BottomSheet.less +3 -15
- package/src/inputs/_BottomSheet.tsx +3 -19
- package/src/main.css +5 -15
- package/src/common/bottomSheet/BottomSheet.test.story.tsx +0 -94
- package/src/inputs/SelectInput.test.story.tsx +0 -83
- package/src/moneyInput/MoneyInput.test.story.tsx +0 -101
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
3
|
-
import { userEvent, within } from 'storybook/test';
|
|
4
|
-
import { lorem100, lorem500 } from '../../test-utils';
|
|
5
|
-
import { Typography } from '../propsValues/typography';
|
|
6
|
-
import Alert from '../../alert';
|
|
7
|
-
import Body from '../../body';
|
|
8
|
-
import Button from '../../button';
|
|
9
|
-
import Title from '../../title';
|
|
10
|
-
import BottomSheet from './BottomSheet';
|
|
11
|
-
|
|
12
|
-
const wait = async (duration = 500) =>
|
|
13
|
-
new Promise<void>((resolve) => {
|
|
14
|
-
setTimeout(resolve, duration);
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
export default {
|
|
18
|
-
component: BottomSheet,
|
|
19
|
-
title: 'Dialogs/BottomSheet/tests',
|
|
20
|
-
tags: ['!autodocs'],
|
|
21
|
-
args: {
|
|
22
|
-
open: false,
|
|
23
|
-
},
|
|
24
|
-
} satisfies Meta<typeof BottomSheet>;
|
|
25
|
-
|
|
26
|
-
type Story = StoryObj<typeof BottomSheet>;
|
|
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
|
-
*/
|
|
36
|
-
export const SmoothScrollReset: Story = {
|
|
37
|
-
args: {
|
|
38
|
-
children: (
|
|
39
|
-
<>
|
|
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>
|
|
45
|
-
<Body as="p">{lorem100}</Body>
|
|
46
|
-
<Body as="p">{lorem100}</Body>
|
|
47
|
-
</>
|
|
48
|
-
),
|
|
49
|
-
},
|
|
50
|
-
decorators: [
|
|
51
|
-
(Story) => (
|
|
52
|
-
<>
|
|
53
|
-
<style>{'html { scroll-behavior: smooth; }'}</style>
|
|
54
|
-
<div style={{ maxWidth: 500 }}>
|
|
55
|
-
<Body>
|
|
56
|
-
<p>{lorem100}</p>
|
|
57
|
-
<p>{lorem100}</p>
|
|
58
|
-
</Body>
|
|
59
|
-
<Story />
|
|
60
|
-
<Body as="p" className="m-t-5 disabled">
|
|
61
|
-
{lorem500}
|
|
62
|
-
</Body>
|
|
63
|
-
</div>
|
|
64
|
-
</>
|
|
65
|
-
),
|
|
66
|
-
],
|
|
67
|
-
parameters: {
|
|
68
|
-
chromatic: {
|
|
69
|
-
disableSnapshot: true,
|
|
70
|
-
},
|
|
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
|
-
},
|
|
78
|
-
render: ({ open, ...args }) => {
|
|
79
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
80
|
-
|
|
81
|
-
return (
|
|
82
|
-
<div>
|
|
83
|
-
<Button onClick={() => setIsOpen(true)}>Open BottomSheet</Button>
|
|
84
|
-
<BottomSheet
|
|
85
|
-
{...args}
|
|
86
|
-
open={isOpen}
|
|
87
|
-
onClose={() => {
|
|
88
|
-
setIsOpen(false);
|
|
89
|
-
}}
|
|
90
|
-
/>
|
|
91
|
-
</div>
|
|
92
|
-
);
|
|
93
|
-
},
|
|
94
|
-
};
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
|
-
import { fn, type Mock, userEvent, within } from 'storybook/test';
|
|
3
|
-
import { allModes } from '../../.storybook/modes';
|
|
4
|
-
import { lorem5, lorem500 } from '../test-utils';
|
|
5
|
-
import { Field } from '../field/Field';
|
|
6
|
-
import Body from '../body';
|
|
7
|
-
import { SelectInput, type SelectInputProps } from './SelectInput';
|
|
8
|
-
|
|
9
|
-
const meta = {
|
|
10
|
-
title: 'Forms/SelectInput/tests',
|
|
11
|
-
component: SelectInput,
|
|
12
|
-
args: {
|
|
13
|
-
onFilterChange: fn() satisfies Mock,
|
|
14
|
-
onChange: fn() satisfies Mock,
|
|
15
|
-
onClose: fn() satisfies Mock,
|
|
16
|
-
onOpen: fn() satisfies Mock,
|
|
17
|
-
},
|
|
18
|
-
tags: ['!autodocs'],
|
|
19
|
-
} satisfies Meta<typeof SelectInput>;
|
|
20
|
-
export default meta;
|
|
21
|
-
|
|
22
|
-
type Story<T, M extends boolean = false> = StoryObj<SelectInputProps<T, M>>;
|
|
23
|
-
|
|
24
|
-
const wait = async (duration = 500) =>
|
|
25
|
-
new Promise<void>((resolve) => {
|
|
26
|
-
setTimeout(resolve, duration);
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* This test ensures that when the SelectInput is used within a scrollable page,
|
|
31
|
-
* opening the dropdown does not cause any unwanted scrolling or layout shifts.
|
|
32
|
-
* Expected preview should start with green bar at the top, with yellow section
|
|
33
|
-
* not in the viewport.
|
|
34
|
-
*
|
|
35
|
-
* NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
|
|
36
|
-
*/
|
|
37
|
-
export const SmoothScrollReset: Story<string> = {
|
|
38
|
-
args: {
|
|
39
|
-
items: Array.from({ length: 15 }).map((_, id) => ({
|
|
40
|
-
type: 'option',
|
|
41
|
-
value: `option ${id + 1}`,
|
|
42
|
-
})),
|
|
43
|
-
placeholder: 'Select option',
|
|
44
|
-
},
|
|
45
|
-
decorators: [
|
|
46
|
-
(Story) => (
|
|
47
|
-
<>
|
|
48
|
-
<style>{`html { scroll-behavior: smooth; }`}</style>
|
|
49
|
-
<div>
|
|
50
|
-
<div
|
|
51
|
-
className="d-flex align-items-center justify-content-center"
|
|
52
|
-
style={{
|
|
53
|
-
backgroundColor: 'var(--color-bright-yellow)',
|
|
54
|
-
height: 400,
|
|
55
|
-
}}
|
|
56
|
-
>
|
|
57
|
-
This block should not be in the viewport.
|
|
58
|
-
</div>
|
|
59
|
-
<div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
|
|
60
|
-
<Field id="el1" label={lorem5}>
|
|
61
|
-
<Story />
|
|
62
|
-
</Field>
|
|
63
|
-
<Body as="p">{lorem500}</Body>
|
|
64
|
-
</div>
|
|
65
|
-
</>
|
|
66
|
-
),
|
|
67
|
-
],
|
|
68
|
-
play: async ({ canvasElement }) => {
|
|
69
|
-
document.documentElement.scrollTop = 400;
|
|
70
|
-
await wait();
|
|
71
|
-
const canvas = within(canvasElement);
|
|
72
|
-
const triggerButton = canvas.getByRole('combobox');
|
|
73
|
-
await userEvent.click(triggerButton);
|
|
74
|
-
},
|
|
75
|
-
globals: {
|
|
76
|
-
viewport: { value: allModes.largeMobile.viewport, isRotated: false },
|
|
77
|
-
},
|
|
78
|
-
parameters: {
|
|
79
|
-
chromatic: {
|
|
80
|
-
disableSnapshot: true,
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
|
-
};
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
|
-
import { userEvent, within } from 'storybook/test';
|
|
3
|
-
import { allModes } from '../../.storybook/modes';
|
|
4
|
-
import { lorem500 } from '../test-utils';
|
|
5
|
-
import { Field } from '../field/Field';
|
|
6
|
-
import Body from '../body';
|
|
7
|
-
import MoneyInput from './MoneyInput';
|
|
8
|
-
|
|
9
|
-
const meta = {
|
|
10
|
-
title: 'Forms/MoneyInput/tests',
|
|
11
|
-
component: MoneyInput,
|
|
12
|
-
args: {
|
|
13
|
-
amount: 1000,
|
|
14
|
-
id: 'moneyInput',
|
|
15
|
-
currencies: [
|
|
16
|
-
{
|
|
17
|
-
value: 'EUR',
|
|
18
|
-
label: 'EUR',
|
|
19
|
-
note: 'Euro',
|
|
20
|
-
currency: 'eur',
|
|
21
|
-
searchable: 'Spain, Germany, France, Austria',
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
value: 'GBP',
|
|
25
|
-
label: 'GBP',
|
|
26
|
-
note: 'British pound',
|
|
27
|
-
currency: 'gbp',
|
|
28
|
-
searchable: 'England, Scotland, Wales',
|
|
29
|
-
},
|
|
30
|
-
],
|
|
31
|
-
selectedCurrency: {
|
|
32
|
-
value: 'EUR',
|
|
33
|
-
label: 'EUR',
|
|
34
|
-
note: 'Euro',
|
|
35
|
-
currency: 'eur',
|
|
36
|
-
searchable: 'Spain, Germany, France, Austria',
|
|
37
|
-
},
|
|
38
|
-
searchPlaceholder: '',
|
|
39
|
-
onAmountChange: () => {},
|
|
40
|
-
onCurrencyChange: () => {},
|
|
41
|
-
},
|
|
42
|
-
tags: ['!autodocs'],
|
|
43
|
-
} satisfies Meta<typeof MoneyInput>;
|
|
44
|
-
export default meta;
|
|
45
|
-
|
|
46
|
-
type Story = StoryObj<typeof MoneyInput>;
|
|
47
|
-
|
|
48
|
-
const wait = async (duration = 500) =>
|
|
49
|
-
new Promise<void>((resolve) => {
|
|
50
|
-
setTimeout(resolve, duration);
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* This test ensures that when the SelectInput is used within a scrollable page,
|
|
55
|
-
* opening the dropdown does not cause any unwanted scrolling or layout shifts.
|
|
56
|
-
* Expected preview should start with green bar at the top, with yellow section
|
|
57
|
-
* not in the viewport.
|
|
58
|
-
*
|
|
59
|
-
* NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
|
|
60
|
-
*/
|
|
61
|
-
export const SmoothScrollReset: Story = {
|
|
62
|
-
decorators: [
|
|
63
|
-
(Story) => (
|
|
64
|
-
<>
|
|
65
|
-
<style>{`html { scroll-behavior: smooth; }`}</style>
|
|
66
|
-
<div>
|
|
67
|
-
<div
|
|
68
|
-
className="d-flex align-items-center justify-content-center"
|
|
69
|
-
style={{
|
|
70
|
-
backgroundColor: 'var(--color-bright-yellow)',
|
|
71
|
-
height: 400,
|
|
72
|
-
}}
|
|
73
|
-
>
|
|
74
|
-
This block should not be in the viewport.
|
|
75
|
-
</div>
|
|
76
|
-
<div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
|
|
77
|
-
<Field id="el1" label="Select currency">
|
|
78
|
-
<Story />
|
|
79
|
-
</Field>
|
|
80
|
-
<Body as="p">{lorem500}</Body>
|
|
81
|
-
</div>
|
|
82
|
-
</>
|
|
83
|
-
),
|
|
84
|
-
],
|
|
85
|
-
play: async ({ canvasElement }) => {
|
|
86
|
-
await wait();
|
|
87
|
-
document.documentElement.scrollTop = 400;
|
|
88
|
-
await wait();
|
|
89
|
-
const canvas = within(canvasElement);
|
|
90
|
-
const triggerButton = canvas.getByRole('combobox');
|
|
91
|
-
await userEvent.click(triggerButton);
|
|
92
|
-
},
|
|
93
|
-
globals: {
|
|
94
|
-
viewport: { value: allModes.largeMobile.viewport, isRotated: false },
|
|
95
|
-
},
|
|
96
|
-
parameters: {
|
|
97
|
-
chromatic: {
|
|
98
|
-
disableSnapshot: true,
|
|
99
|
-
},
|
|
100
|
-
},
|
|
101
|
-
};
|