@transferwise/components 0.0.0-experimental-11565f2 → 0.0.0-experimental-d0addc4
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/dateInput/DateInput.js.map +1 -1
- package/build/dateInput/DateInput.mjs.map +1 -1
- package/build/types/dateInput/DateInput.d.ts.map +1 -1
- package/build/types/listItem/_stories/helpers.d.ts +1 -0
- package/build/types/listItem/_stories/helpers.d.ts.map +1 -1
- package/build/types/listItem/_stories/subcomponents.d.ts +9 -0
- package/build/types/listItem/_stories/subcomponents.d.ts.map +1 -1
- package/build/types/listItem/_stories/variants/helpers.d.ts +8 -0
- package/build/types/listItem/_stories/variants/helpers.d.ts.map +1 -0
- package/package.json +3 -3
- package/src/dateInput/DateInput.tsx +1 -3
- package/src/listItem/_stories/helpers.tsx +8 -0
- package/src/listItem/_stories/subcomponents.tsx +21 -2
- package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx +49 -0
- package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx +43 -0
- package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx +49 -0
- package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx +34 -0
- package/src/listItem/_stories/variants/ListItem.personal.test.story.tsx +130 -0
- package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx +43 -0
- package/src/listItem/_stories/variants/ListItem.small.test.story.tsx +34 -0
- package/src/listItem/_stories/variants/helpers.tsx +137 -0
- package/src/listItem/_stories/ListItem.variants.test.story.tsx +0 -425
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
|
+
import List from '../../../list';
|
|
3
|
+
import { ListItem, type ListItemProps } from '../../ListItem';
|
|
4
|
+
import {
|
|
5
|
+
SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
|
|
6
|
+
SB_LIST_ITEM_CONTROLS as CONTROLS,
|
|
7
|
+
SB_LIST_ITEM_PROMPTS as PROMPT,
|
|
8
|
+
} from '../subcomponents';
|
|
9
|
+
import { generateVariantsForControl } from './helpers';
|
|
10
|
+
|
|
11
|
+
export default {
|
|
12
|
+
component: ListItem,
|
|
13
|
+
title: 'Content/ListItem/tests/variants/theme: personal',
|
|
14
|
+
tags: ['!autodocs'],
|
|
15
|
+
parameters: {
|
|
16
|
+
controls: { disable: true },
|
|
17
|
+
actions: { disable: true },
|
|
18
|
+
knobs: { disable: true },
|
|
19
|
+
},
|
|
20
|
+
} satisfies Meta<ListItemProps>;
|
|
21
|
+
|
|
22
|
+
type Story = StoryObj<ListItemProps>;
|
|
23
|
+
|
|
24
|
+
export const Button = generateVariantsForControl('button');
|
|
25
|
+
export const ButtonAsLink = generateVariantsForControl('buttonAsLink');
|
|
26
|
+
export const ButtonPartiallyInteractive = generateVariantsForControl('partialButton');
|
|
27
|
+
export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl('partialButtonAsLink');
|
|
28
|
+
export const IconButton = generateVariantsForControl('iconButton');
|
|
29
|
+
export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink');
|
|
30
|
+
export const IconButtonWithLabel = generateVariantsForControl('iconButtonWithLabel');
|
|
31
|
+
export const IconButtonAsLinkWithLabel = generateVariantsForControl('iconButtonAsLinkWithLabel');
|
|
32
|
+
export const IconButtonPartiallyInteractive = generateVariantsForControl('partialIconButton');
|
|
33
|
+
export const IconButtonAsLinkPartiallyInteractive =
|
|
34
|
+
generateVariantsForControl('partialIconButtonAsLink');
|
|
35
|
+
export const Navigation = generateVariantsForControl('navigation');
|
|
36
|
+
export const NavigationAsButton = generateVariantsForControl('navigationAsButton');
|
|
37
|
+
export const Checkbox = generateVariantsForControl('checkbox');
|
|
38
|
+
export const Radio = generateVariantsForControl('radio');
|
|
39
|
+
export const Switch = generateVariantsForControl('switch');
|
|
40
|
+
export const NonInteractive = generateVariantsForControl('non-interactive');
|
|
41
|
+
|
|
42
|
+
export const ButtonControlLabel: Story = {
|
|
43
|
+
render: () => (
|
|
44
|
+
<List>
|
|
45
|
+
<ListItem
|
|
46
|
+
title="Fully interactive button."
|
|
47
|
+
subtitle="It uses default content hierarchy."
|
|
48
|
+
valueTitle="100 GBP"
|
|
49
|
+
valueSubtitle="200 USD"
|
|
50
|
+
additionalInfo={INFO.nonInteractive}
|
|
51
|
+
control={CONTROLS.button}
|
|
52
|
+
prompt={PROMPT.nonInteractive}
|
|
53
|
+
/>
|
|
54
|
+
|
|
55
|
+
<ListItem
|
|
56
|
+
inverted
|
|
57
|
+
title="Fully interactive button."
|
|
58
|
+
subtitle="It uses inverted content hierarchy."
|
|
59
|
+
valueTitle="100 GBP"
|
|
60
|
+
valueSubtitle="200 USD"
|
|
61
|
+
additionalInfo={INFO.nonInteractive}
|
|
62
|
+
control={CONTROLS.button}
|
|
63
|
+
prompt={PROMPT.nonInteractive}
|
|
64
|
+
/>
|
|
65
|
+
|
|
66
|
+
<ListItem
|
|
67
|
+
title="Fully interactive button as HTML anchor."
|
|
68
|
+
subtitle="It uses default content hierarchy."
|
|
69
|
+
valueTitle="100 GBP"
|
|
70
|
+
valueSubtitle="200 USD"
|
|
71
|
+
additionalInfo={INFO.nonInteractive}
|
|
72
|
+
control={CONTROLS.buttonAsLink}
|
|
73
|
+
prompt={PROMPT.nonInteractive}
|
|
74
|
+
/>
|
|
75
|
+
|
|
76
|
+
<ListItem
|
|
77
|
+
inverted
|
|
78
|
+
title="Fully interactive button as HTML anchor."
|
|
79
|
+
subtitle="It uses inverted content hierarchy."
|
|
80
|
+
valueTitle="100 GBP"
|
|
81
|
+
valueSubtitle="200 USD"
|
|
82
|
+
additionalInfo={INFO.nonInteractive}
|
|
83
|
+
control={CONTROLS.buttonAsLink}
|
|
84
|
+
prompt={PROMPT.nonInteractive}
|
|
85
|
+
/>
|
|
86
|
+
|
|
87
|
+
<ListItem
|
|
88
|
+
title="Partially interactive button."
|
|
89
|
+
subtitle="It uses default content hierarchy."
|
|
90
|
+
valueTitle="100 GBP"
|
|
91
|
+
valueSubtitle="200 USD"
|
|
92
|
+
additionalInfo={INFO.nonInteractive}
|
|
93
|
+
control={CONTROLS.partialButton}
|
|
94
|
+
prompt={PROMPT.nonInteractive}
|
|
95
|
+
/>
|
|
96
|
+
|
|
97
|
+
<ListItem
|
|
98
|
+
inverted
|
|
99
|
+
title="Partially interactive button."
|
|
100
|
+
subtitle="It uses inverted content hierarchy."
|
|
101
|
+
valueTitle="100 GBP"
|
|
102
|
+
valueSubtitle="200 USD"
|
|
103
|
+
additionalInfo={INFO.nonInteractive}
|
|
104
|
+
control={CONTROLS.partialButton}
|
|
105
|
+
prompt={PROMPT.nonInteractive}
|
|
106
|
+
/>
|
|
107
|
+
|
|
108
|
+
<ListItem
|
|
109
|
+
title="Partially interactive button as HTML anchor."
|
|
110
|
+
subtitle="It uses default content hierarchy."
|
|
111
|
+
valueTitle="100 GBP"
|
|
112
|
+
valueSubtitle="200 USD"
|
|
113
|
+
additionalInfo={INFO.nonInteractive}
|
|
114
|
+
control={CONTROLS.partialButtonAsLink}
|
|
115
|
+
prompt={PROMPT.nonInteractive}
|
|
116
|
+
/>
|
|
117
|
+
|
|
118
|
+
<ListItem
|
|
119
|
+
inverted
|
|
120
|
+
title="Partially interactive button as HTML anchor."
|
|
121
|
+
subtitle="It uses inverted content hierarchy."
|
|
122
|
+
valueTitle="100 GBP"
|
|
123
|
+
valueSubtitle="200 USD"
|
|
124
|
+
additionalInfo={INFO.nonInteractive}
|
|
125
|
+
control={CONTROLS.partialButtonAsLink}
|
|
126
|
+
prompt={PROMPT.nonInteractive}
|
|
127
|
+
/>
|
|
128
|
+
</List>
|
|
129
|
+
),
|
|
130
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react-webpack5';
|
|
2
|
+
import { ListItem, type ListItemProps } from '../../ListItem';
|
|
3
|
+
import { generateVariantsForControl } from './helpers';
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
component: ListItem,
|
|
7
|
+
title: 'Content/ListItem/tests/variants/rtl',
|
|
8
|
+
tags: ['!autodocs'],
|
|
9
|
+
parameters: {
|
|
10
|
+
controls: { disable: true },
|
|
11
|
+
actions: { disable: true },
|
|
12
|
+
knobs: { disable: true },
|
|
13
|
+
},
|
|
14
|
+
} satisfies Meta<ListItemProps>;
|
|
15
|
+
|
|
16
|
+
export const Button = generateVariantsForControl('button', 'rtl');
|
|
17
|
+
export const ButtonAsLink = generateVariantsForControl('buttonAsLink', 'rtl');
|
|
18
|
+
export const ButtonPartiallyInteractive = generateVariantsForControl('partialButton', 'rtl');
|
|
19
|
+
export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl(
|
|
20
|
+
'partialButtonAsLink',
|
|
21
|
+
'rtl',
|
|
22
|
+
);
|
|
23
|
+
export const IconButton = generateVariantsForControl('iconButton', 'rtl');
|
|
24
|
+
export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink', 'rtl');
|
|
25
|
+
export const IconButtonWithLabel = generateVariantsForControl('iconButtonWithLabel', 'rtl');
|
|
26
|
+
export const IconButtonAsLinkWithLabel = generateVariantsForControl(
|
|
27
|
+
'iconButtonAsLinkWithLabel',
|
|
28
|
+
'rtl',
|
|
29
|
+
);
|
|
30
|
+
export const IconButtonPartiallyInteractive = generateVariantsForControl(
|
|
31
|
+
'partialIconButton',
|
|
32
|
+
'rtl',
|
|
33
|
+
);
|
|
34
|
+
export const IconButtonAsLinkPartiallyInteractive = generateVariantsForControl(
|
|
35
|
+
'partialIconButtonAsLink',
|
|
36
|
+
'rtl',
|
|
37
|
+
);
|
|
38
|
+
export const Navigation = generateVariantsForControl('navigation', 'rtl');
|
|
39
|
+
export const NavigationAsButton = generateVariantsForControl('navigationAsButton', 'rtl');
|
|
40
|
+
export const Checkbox = generateVariantsForControl('checkbox', 'rtl');
|
|
41
|
+
export const Radio = generateVariantsForControl('radio', 'rtl');
|
|
42
|
+
export const Switch = generateVariantsForControl('switch', 'rtl');
|
|
43
|
+
export const NonInteractive = generateVariantsForControl('non-interactive', 'rtl');
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react-webpack5';
|
|
2
|
+
import { ListItem, type ListItemProps } from '../../ListItem';
|
|
3
|
+
import { generateVariantsForControl } from './helpers';
|
|
4
|
+
import { withSizedContainer } from '../helpers';
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
component: ListItem,
|
|
8
|
+
title: 'Content/ListItem/tests/variants/cq: small',
|
|
9
|
+
tags: ['!autodocs'],
|
|
10
|
+
parameters: {
|
|
11
|
+
controls: { disable: true },
|
|
12
|
+
actions: { disable: true },
|
|
13
|
+
knobs: { disable: true },
|
|
14
|
+
},
|
|
15
|
+
decorators: [withSizedContainer(275)],
|
|
16
|
+
} satisfies Meta<ListItemProps>;
|
|
17
|
+
|
|
18
|
+
export const Button = generateVariantsForControl('button');
|
|
19
|
+
export const ButtonAsLink = generateVariantsForControl('buttonAsLink');
|
|
20
|
+
export const ButtonPartiallyInteractive = generateVariantsForControl('partialButton');
|
|
21
|
+
export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl('partialButtonAsLink');
|
|
22
|
+
export const IconButton = generateVariantsForControl('iconButton');
|
|
23
|
+
export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink');
|
|
24
|
+
export const IconButtonWithLabel = generateVariantsForControl('iconButtonWithLabel');
|
|
25
|
+
export const IconButtonAsLinkWithLabel = generateVariantsForControl('iconButtonAsLinkWithLabel');
|
|
26
|
+
export const IconButtonPartiallyInteractive = generateVariantsForControl('partialIconButton');
|
|
27
|
+
export const IconButtonAsLinkPartiallyInteractive =
|
|
28
|
+
generateVariantsForControl('partialIconButtonAsLink');
|
|
29
|
+
export const Navigation = generateVariantsForControl('navigation');
|
|
30
|
+
export const NavigationAsButton = generateVariantsForControl('navigationAsButton');
|
|
31
|
+
export const Checkbox = generateVariantsForControl('checkbox');
|
|
32
|
+
export const Radio = generateVariantsForControl('radio');
|
|
33
|
+
export const Switch = generateVariantsForControl('switch');
|
|
34
|
+
export const NonInteractive = generateVariantsForControl('non-interactive');
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-webpack5';
|
|
2
|
+
import { StoryConfig, storyConfig } from '../../../test-utils';
|
|
3
|
+
import List from '../../../list';
|
|
4
|
+
import { ListItem, type ListItemProps } from '../../ListItem';
|
|
5
|
+
import {
|
|
6
|
+
SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
|
|
7
|
+
SB_LIST_ITEM_CONTROLS as CONTROLS,
|
|
8
|
+
SB_LIST_ITEM_MEDIA as MEDIA,
|
|
9
|
+
SB_LIST_ITEM_PROMPTS as PROMPT,
|
|
10
|
+
SB_LIST_ITEM_TEXT as TEXT,
|
|
11
|
+
SB_ListItem_ControlType as ControlType,
|
|
12
|
+
} from '../subcomponents';
|
|
13
|
+
|
|
14
|
+
type Story = StoryObj<ListItemProps>;
|
|
15
|
+
type VariantPartial = { title: string } & Partial<ListItemProps>;
|
|
16
|
+
|
|
17
|
+
const { title, subtitle, valueTitle, valueSubtitle, longTitle, longSubtitle, longValueTitle } =
|
|
18
|
+
TEXT;
|
|
19
|
+
const prompt = PROMPT.nonInteractive;
|
|
20
|
+
const media = MEDIA.avatarSingle;
|
|
21
|
+
|
|
22
|
+
export const generateVariantsForControl = (
|
|
23
|
+
controlType: ControlType,
|
|
24
|
+
variant: NonNullable<StoryConfig['variants']>[number] = 'default',
|
|
25
|
+
): Story => {
|
|
26
|
+
const control = CONTROLS[controlType];
|
|
27
|
+
const isInteractive = [
|
|
28
|
+
'partialButton',
|
|
29
|
+
'partialButtonAsLink',
|
|
30
|
+
'partialIconButton',
|
|
31
|
+
'partialIconButtonAsLink',
|
|
32
|
+
].includes(controlType);
|
|
33
|
+
const additionalInfo = isInteractive ? INFO.interactive : INFO.nonInteractive;
|
|
34
|
+
const instances = [
|
|
35
|
+
{ title },
|
|
36
|
+
{ title: longTitle },
|
|
37
|
+
{ title, valueTitle },
|
|
38
|
+
{ title, valueTitle: longValueTitle },
|
|
39
|
+
{ title: longTitle, valueTitle },
|
|
40
|
+
{ title, subtitle },
|
|
41
|
+
{ title, subtitle: longSubtitle },
|
|
42
|
+
{ title, additionalInfo },
|
|
43
|
+
{ title, valueTitle, valueSubtitle },
|
|
44
|
+
{ title, valueTitle: longValueTitle, valueSubtitle },
|
|
45
|
+
{ title, subtitle, inverted: true },
|
|
46
|
+
{ title, subtitle, valueTitle },
|
|
47
|
+
{ title, subtitle, valueTitle, inverted: true },
|
|
48
|
+
{ title, subtitle, valueTitle, valueSubtitle },
|
|
49
|
+
{ title, subtitle, valueTitle, valueSubtitle, inverted: true },
|
|
50
|
+
{ media, title },
|
|
51
|
+
{ media, title: longTitle },
|
|
52
|
+
{ media, title, valueTitle },
|
|
53
|
+
{ media, title: longTitle, valueTitle },
|
|
54
|
+
{ media, title, valueTitle: longValueTitle },
|
|
55
|
+
{ media, title, subtitle },
|
|
56
|
+
{ media, title: longTitle, subtitle },
|
|
57
|
+
{ media, title, valueTitle, valueSubtitle },
|
|
58
|
+
{ media, title, valueTitle },
|
|
59
|
+
{ media, title, valueSubtitle },
|
|
60
|
+
{ media, title, subtitle },
|
|
61
|
+
{ media, title, additionalInfo },
|
|
62
|
+
{ media, title, subtitle, valueTitle },
|
|
63
|
+
{ media, title, subtitle, valueTitle, valueSubtitle },
|
|
64
|
+
{ media, title, subtitle, additionalInfo: INFO.nonInteractive },
|
|
65
|
+
isInteractive ? { media, title, subtitle, additionalInfo: INFO.interactive } : null,
|
|
66
|
+
{ media, title, subtitle, additionalInfo, valueTitle },
|
|
67
|
+
{ media, title, subtitle, additionalInfo, valueTitle, valueSubtitle },
|
|
68
|
+
{ media, title, subtitle, additionalInfo, valueTitle, valueSubtitle, prompt },
|
|
69
|
+
{
|
|
70
|
+
media,
|
|
71
|
+
title,
|
|
72
|
+
subtitle,
|
|
73
|
+
additionalInfo,
|
|
74
|
+
valueTitle,
|
|
75
|
+
valueSubtitle,
|
|
76
|
+
prompt: PROMPT.interactive,
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
media,
|
|
80
|
+
title,
|
|
81
|
+
subtitle,
|
|
82
|
+
additionalInfo,
|
|
83
|
+
valueTitle,
|
|
84
|
+
valueSubtitle,
|
|
85
|
+
prompt: PROMPT.interactive,
|
|
86
|
+
inverted: true,
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
media,
|
|
90
|
+
title,
|
|
91
|
+
subtitle,
|
|
92
|
+
additionalInfo,
|
|
93
|
+
valueTitle,
|
|
94
|
+
valueSubtitle,
|
|
95
|
+
prompt: PROMPT.interactive,
|
|
96
|
+
spotlight: 'active',
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
media,
|
|
100
|
+
title,
|
|
101
|
+
subtitle,
|
|
102
|
+
additionalInfo,
|
|
103
|
+
valueTitle,
|
|
104
|
+
valueSubtitle,
|
|
105
|
+
prompt: PROMPT.interactive,
|
|
106
|
+
spotlight: 'inactive',
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
media,
|
|
110
|
+
title,
|
|
111
|
+
subtitle,
|
|
112
|
+
additionalInfo,
|
|
113
|
+
valueTitle,
|
|
114
|
+
valueSubtitle,
|
|
115
|
+
prompt: PROMPT.interactive,
|
|
116
|
+
spotlight: 'inactive',
|
|
117
|
+
disabled: true,
|
|
118
|
+
},
|
|
119
|
+
].filter(Boolean) as VariantPartial[];
|
|
120
|
+
|
|
121
|
+
return storyConfig(
|
|
122
|
+
{
|
|
123
|
+
render: () => (
|
|
124
|
+
<List>
|
|
125
|
+
{instances.map((instance, instanceIndex) => (
|
|
126
|
+
<ListItem
|
|
127
|
+
key={`${variant}-${controlType}-${instanceIndex}`}
|
|
128
|
+
control={control}
|
|
129
|
+
{...instance}
|
|
130
|
+
/>
|
|
131
|
+
))}
|
|
132
|
+
</List>
|
|
133
|
+
),
|
|
134
|
+
},
|
|
135
|
+
{ variants: [variant] },
|
|
136
|
+
);
|
|
137
|
+
};
|