@transferwise/components 46.166.0 → 46.167.0
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/CardContainer/CardContainer.js +34 -0
- package/build/CardContainer/CardContainer.js.map +1 -0
- package/build/CardContainer/CardContainer.mjs +30 -0
- package/build/CardContainer/CardContainer.mjs.map +1 -0
- package/build/CardWidget/CardWidget.js +98 -0
- package/build/CardWidget/CardWidget.js.map +1 -0
- package/build/CardWidget/CardWidget.mjs +94 -0
- package/build/CardWidget/CardWidget.mjs.map +1 -0
- package/build/CardWidget/CardWidgetAction.js +73 -0
- package/build/CardWidget/CardWidgetAction.js.map +1 -0
- package/build/CardWidget/CardWidgetAction.mjs +68 -0
- package/build/CardWidget/CardWidgetAction.mjs.map +1 -0
- package/build/ListItem/ListItem.js +2 -0
- package/build/ListItem/ListItem.js.map +1 -1
- package/build/ListItem/ListItem.mjs +2 -0
- package/build/ListItem/ListItem.mjs.map +1 -1
- package/build/index.js +4 -0
- package/build/index.js.map +1 -1
- package/build/index.mjs +2 -0
- package/build/index.mjs.map +1 -1
- package/build/main.css +194 -0
- package/build/styles/CardContainer/CardContainer.css +108 -0
- package/build/styles/CardWidget/CardWidget.css +78 -0
- package/build/styles/ListItem/ListItem.css +8 -0
- package/build/styles/main.css +194 -0
- package/build/types/Body/Body.d.ts +2 -2
- package/build/types/CardContainer/CardContainer.d.ts +8 -0
- package/build/types/CardContainer/CardContainer.d.ts.map +1 -0
- package/build/types/CardContainer/CardContainer.types.d.ts +55 -0
- package/build/types/CardContainer/CardContainer.types.d.ts.map +1 -0
- package/build/types/CardContainer/_stories/helpers.d.ts +3 -0
- package/build/types/CardContainer/_stories/helpers.d.ts.map +1 -0
- package/build/types/CardContainer/index.d.ts +3 -0
- package/build/types/CardContainer/index.d.ts.map +1 -0
- package/build/types/CardWidget/CardWidget.d.ts +10 -0
- package/build/types/CardWidget/CardWidget.d.ts.map +1 -0
- package/build/types/CardWidget/CardWidget.types.d.ts +55 -0
- package/build/types/CardWidget/CardWidget.types.d.ts.map +1 -0
- package/build/types/CardWidget/CardWidgetAction.d.ts +54 -0
- package/build/types/CardWidget/CardWidgetAction.d.ts.map +1 -0
- package/build/types/CardWidget/index.d.ts +4 -0
- package/build/types/CardWidget/index.d.ts.map +1 -0
- package/build/types/IconButton/IconButton.d.ts +1 -1
- package/build/types/ListItem/ListItem.d.ts +1 -1
- package/build/types/ListItem/ListItem.d.ts.map +1 -1
- package/build/types/MoneyInput/MoneyInput.d.ts +1 -1
- package/build/types/MoneyInput/MoneyInput.d.ts.map +1 -1
- package/build/types/Title/Title.d.ts +2 -2
- package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts +1 -1
- package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts +1 -1
- package/build/types/index.d.ts +4 -0
- package/build/types/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/CardContainer/CardContainer.css +108 -0
- package/src/CardContainer/CardContainer.less +171 -0
- package/src/CardContainer/CardContainer.test.tsx +150 -0
- package/src/CardContainer/CardContainer.tsx +51 -0
- package/src/CardContainer/CardContainer.types.ts +62 -0
- package/src/CardContainer/_stories/CardContainer.story.tsx +167 -0
- package/src/CardContainer/_stories/CardContainer.test.story.tsx +103 -0
- package/src/CardContainer/_stories/helpers.tsx +50 -0
- package/src/CardContainer/index.ts +6 -0
- package/src/CardWidget/CardWidget.css +78 -0
- package/src/CardWidget/CardWidget.less +107 -0
- package/src/CardWidget/CardWidget.test.tsx +221 -0
- package/src/CardWidget/CardWidget.tsx +78 -0
- package/src/CardWidget/CardWidget.types.ts +63 -0
- package/src/CardWidget/CardWidgetAction.tsx +128 -0
- package/src/CardWidget/_stories/CardWidget.story.tsx +238 -0
- package/src/CardWidget/_stories/CardWidget.test.story.tsx +350 -0
- package/src/CardWidget/index.ts +3 -0
- package/src/ListItem/ListItem.css +8 -0
- package/src/ListItem/ListItem.less +8 -0
- package/src/ListItem/ListItem.test.tsx +20 -0
- package/src/ListItem/ListItem.tsx +3 -1
- package/src/ListItem/_stories/ListItem.layout.test.story.tsx +1 -1
- package/src/ListItem/_stories/ListItem.story.tsx +1 -1
- package/src/Prompt/CriticalBanner/_stories/CriticalBanner.docs.mdx +122 -0
- package/src/Prompt/CriticalBanner/_stories/CriticalBanner.story.tsx +0 -2
- package/src/index.ts +13 -0
- package/src/main.css +194 -0
- package/src/main.less +2 -0
- package/src/FlowNavigation/_stories/FlowNavigation.CriticalBanner.docs.mdx +0 -66
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
import { Plus, Settings } from '@transferwise/icons';
|
|
2
|
+
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
3
|
+
|
|
4
|
+
import {
|
|
5
|
+
createSandboxStory,
|
|
6
|
+
globalScope,
|
|
7
|
+
} from '../../../.storybook/components/sandbox/SandboxEditor';
|
|
8
|
+
import Body from '../../Body';
|
|
9
|
+
import type { CardContainerSpotlight } from '../../CardContainer';
|
|
10
|
+
import { CardsList, SampleContent } from '../../CardContainer/_stories/helpers';
|
|
11
|
+
import { Typography } from '../../common';
|
|
12
|
+
import CardWidget from '..';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* A `CardContainer` with an optional header above its content. The `header` prop takes a `title`,
|
|
16
|
+
* a `titleAction` that turns the title into a link, and up to two actions.
|
|
17
|
+
*/
|
|
18
|
+
const meta: Meta<typeof CardWidget> = {
|
|
19
|
+
component: CardWidget,
|
|
20
|
+
title: 'Layouts/CardWidget',
|
|
21
|
+
tags: ['early-access'],
|
|
22
|
+
argTypes: {
|
|
23
|
+
header: {
|
|
24
|
+
control: 'object',
|
|
25
|
+
table: { type: { summary: 'CardWidgetHeader' } },
|
|
26
|
+
},
|
|
27
|
+
spotlight: {
|
|
28
|
+
control: 'radio',
|
|
29
|
+
options: [undefined, 'active', 'inactive'],
|
|
30
|
+
table: {
|
|
31
|
+
defaultValue: { summary: 'undefined' },
|
|
32
|
+
type: { summary: 'CardContainerSpotlight' },
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
as: {
|
|
36
|
+
control: 'radio',
|
|
37
|
+
options: ['div', 'section', 'article'],
|
|
38
|
+
table: { defaultValue: { summary: "'div'" }, type: { summary: 'string' } },
|
|
39
|
+
},
|
|
40
|
+
children: {
|
|
41
|
+
control: false,
|
|
42
|
+
table: { type: { summary: 'ReactNode' } },
|
|
43
|
+
},
|
|
44
|
+
className: { control: 'text', table: { type: { summary: 'string' } } },
|
|
45
|
+
'data-testid': { control: 'text', table: { type: { summary: 'string' } } },
|
|
46
|
+
},
|
|
47
|
+
args: {
|
|
48
|
+
spotlight: 'active',
|
|
49
|
+
as: 'div',
|
|
50
|
+
header: {
|
|
51
|
+
title: 'Cards',
|
|
52
|
+
titleAction: { href: '#cards' },
|
|
53
|
+
action: { label: 'Order card' },
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export default meta;
|
|
59
|
+
|
|
60
|
+
type Story = StoryObj<typeof CardWidget>;
|
|
61
|
+
|
|
62
|
+
/** Experiment with the widget's props. */
|
|
63
|
+
export const Playground: Story = {
|
|
64
|
+
render: (args) => (
|
|
65
|
+
<div style={{ maxWidth: '480px' }}>
|
|
66
|
+
<CardWidget {...args}>
|
|
67
|
+
<SampleContent />
|
|
68
|
+
</CardWidget>
|
|
69
|
+
</div>
|
|
70
|
+
),
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
export const Sandbox = createSandboxStory({
|
|
74
|
+
code: `<CardWidget
|
|
75
|
+
spotlight="active"
|
|
76
|
+
header={{
|
|
77
|
+
title: 'Cards',
|
|
78
|
+
titleAction: { href: '#cards' },
|
|
79
|
+
action: { label: 'Order card' },
|
|
80
|
+
}}
|
|
81
|
+
>
|
|
82
|
+
<Body>Your virtual card is ready to use.</Body>
|
|
83
|
+
<Body>Spend in 40+ currencies with the real exchange rate.</Body>
|
|
84
|
+
</CardWidget>`,
|
|
85
|
+
scope: { ...globalScope, CardWidget },
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
/** `titleAction` turns the title into a link to the widget's own screen and appends a chevron. */
|
|
89
|
+
export const TitleLink: Story = {
|
|
90
|
+
parameters: { controls: { disable: true } },
|
|
91
|
+
render: () => (
|
|
92
|
+
<CardWidget header={{ title: 'Cards', titleAction: { href: '#cards' } }}>
|
|
93
|
+
<SampleContent />
|
|
94
|
+
</CardWidget>
|
|
95
|
+
),
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* An action object with a `label` renders a small button, and one with only an `icon` a 32px icon
|
|
100
|
+
* button, which requires an `aria-label`. `actionSecondary` renders before `action` at a lower
|
|
101
|
+
* emphasis; two actions is the maximum, to keep the title legible. When the header is 360px wide
|
|
102
|
+
* or narrower, the actions move under a title that doesn't fit beside them on one line.
|
|
103
|
+
*/
|
|
104
|
+
export const Actions: Story = {
|
|
105
|
+
parameters: { controls: { disable: true } },
|
|
106
|
+
render: () => {
|
|
107
|
+
const header = {
|
|
108
|
+
title: 'Cards',
|
|
109
|
+
titleAction: { href: '#cards' },
|
|
110
|
+
action: { label: 'Order card', icon: <Plus size={16} /> },
|
|
111
|
+
actionSecondary: { 'aria-label': 'Card settings', icon: <Settings size={16} /> },
|
|
112
|
+
};
|
|
113
|
+
return (
|
|
114
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
|
|
115
|
+
<CardWidget header={header}>
|
|
116
|
+
<SampleContent />
|
|
117
|
+
</CardWidget>
|
|
118
|
+
|
|
119
|
+
<div style={{ width: '320px' }}>
|
|
120
|
+
<CardWidget header={header}>
|
|
121
|
+
<SampleContent />
|
|
122
|
+
</CardWidget>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
);
|
|
126
|
+
},
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
/** A title too long for its line wraps. A linked title keeps its chevron after its last word. */
|
|
130
|
+
export const LongTitle: Story = {
|
|
131
|
+
parameters: { controls: { disable: true } },
|
|
132
|
+
render: () => (
|
|
133
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
|
|
134
|
+
<CardWidget header={{ title: 'Cards, accounts and everything else you hold with us' }}>
|
|
135
|
+
<SampleContent />
|
|
136
|
+
</CardWidget>
|
|
137
|
+
|
|
138
|
+
<CardWidget
|
|
139
|
+
header={{
|
|
140
|
+
title: 'Cards, accounts and everything else you hold with us',
|
|
141
|
+
titleAction: { href: '#cards' },
|
|
142
|
+
action: { label: 'Order card', icon: <Plus size={16} /> },
|
|
143
|
+
actionSecondary: { 'aria-label': 'Card settings', icon: <Settings size={16} /> },
|
|
144
|
+
}}
|
|
145
|
+
>
|
|
146
|
+
<SampleContent />
|
|
147
|
+
</CardWidget>
|
|
148
|
+
</div>
|
|
149
|
+
),
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
/** The action slots also take any node, for content the button actions do not cover. */
|
|
153
|
+
export const CustomAction: Story = {
|
|
154
|
+
parameters: { controls: { disable: true } },
|
|
155
|
+
render: () => (
|
|
156
|
+
<CardWidget
|
|
157
|
+
header={{
|
|
158
|
+
title: 'Balance',
|
|
159
|
+
action: (
|
|
160
|
+
<Body as="span" type={Typography.BODY_DEFAULT_BOLD}>
|
|
161
|
+
£1,240.00
|
|
162
|
+
</Body>
|
|
163
|
+
),
|
|
164
|
+
}}
|
|
165
|
+
>
|
|
166
|
+
<SampleContent />
|
|
167
|
+
</CardWidget>
|
|
168
|
+
),
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
/** A header followed by a list, as in a dashboard's cards module. */
|
|
172
|
+
export const WithList: Story = {
|
|
173
|
+
parameters: { controls: { disable: true } },
|
|
174
|
+
render: () => (
|
|
175
|
+
<CardWidget
|
|
176
|
+
header={{
|
|
177
|
+
title: 'Cards',
|
|
178
|
+
titleAction: { href: '#cards' },
|
|
179
|
+
action: { label: 'New card', icon: <Plus size={16} /> },
|
|
180
|
+
}}
|
|
181
|
+
>
|
|
182
|
+
<CardsList />
|
|
183
|
+
</CardWidget>
|
|
184
|
+
),
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
/**
|
|
188
|
+
* The card shows as hovered or pressed while the title link is, and as hovered while the link has
|
|
189
|
+
* keyboard focus. Hovering or pressing the rest of
|
|
190
|
+
* the card, or its actions, leaves it at rest.
|
|
191
|
+
*/
|
|
192
|
+
export const Interactive: Story = {
|
|
193
|
+
parameters: { controls: { disable: true } },
|
|
194
|
+
render: () => (
|
|
195
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
|
|
196
|
+
{([undefined, 'active', 'inactive'] as (CardContainerSpotlight | undefined)[]).map(
|
|
197
|
+
(spotlight) => (
|
|
198
|
+
<CardWidget
|
|
199
|
+
key={spotlight ?? 'none'}
|
|
200
|
+
spotlight={spotlight}
|
|
201
|
+
header={{
|
|
202
|
+
title: `Spotlight: ${spotlight ?? 'not set'}`,
|
|
203
|
+
titleAction: { href: '#cards' },
|
|
204
|
+
action: { label: 'Order card', icon: <Plus size={16} /> },
|
|
205
|
+
actionSecondary: { 'aria-label': 'Card settings', icon: <Settings size={16} /> },
|
|
206
|
+
}}
|
|
207
|
+
>
|
|
208
|
+
<Body>Your virtual card is ready to use.</Body>
|
|
209
|
+
</CardWidget>
|
|
210
|
+
),
|
|
211
|
+
)}
|
|
212
|
+
</div>
|
|
213
|
+
),
|
|
214
|
+
};
|
|
215
|
+
|
|
216
|
+
/** The same header on each spotlight. */
|
|
217
|
+
export const Spotlight: Story = {
|
|
218
|
+
parameters: { controls: { disable: true } },
|
|
219
|
+
render: () => (
|
|
220
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
|
|
221
|
+
{([undefined, 'active', 'inactive'] as (CardContainerSpotlight | undefined)[]).map(
|
|
222
|
+
(spotlight) => (
|
|
223
|
+
<CardWidget
|
|
224
|
+
key={spotlight ?? 'none'}
|
|
225
|
+
spotlight={spotlight}
|
|
226
|
+
header={{
|
|
227
|
+
title: `Spotlight: ${spotlight ?? 'not set'}`,
|
|
228
|
+
titleAction: { href: '#cards' },
|
|
229
|
+
action: { label: 'Order card', icon: <Plus size={16} /> },
|
|
230
|
+
}}
|
|
231
|
+
>
|
|
232
|
+
<SampleContent />
|
|
233
|
+
</CardWidget>
|
|
234
|
+
),
|
|
235
|
+
)}
|
|
236
|
+
</div>
|
|
237
|
+
),
|
|
238
|
+
};
|
|
@@ -0,0 +1,350 @@
|
|
|
1
|
+
import { Card, Jar, Plus, Settings, Travel } from '@transferwise/icons';
|
|
2
|
+
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
3
|
+
import { useTheme } from '@wise/components-theming';
|
|
4
|
+
|
|
5
|
+
import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
|
|
6
|
+
import { withVariantConfig } from '../../../.storybook/helpers';
|
|
7
|
+
import Body from '../../Body';
|
|
8
|
+
import type { CardContainerSpotlight } from '../../CardContainer';
|
|
9
|
+
import List from '../../List';
|
|
10
|
+
import ListItem from '../../ListItem';
|
|
11
|
+
import type { ListItemProps } from '../../ListItem';
|
|
12
|
+
import Title from '../../Title';
|
|
13
|
+
import CardWidget from '..';
|
|
14
|
+
import type { CardWidgetProps } from '..';
|
|
15
|
+
|
|
16
|
+
const meta: Meta<typeof CardWidget> = {
|
|
17
|
+
component: CardWidget,
|
|
18
|
+
tags: ['!autodocs', '!manifest'],
|
|
19
|
+
title: 'Layouts/CardWidget/Tests',
|
|
20
|
+
};
|
|
21
|
+
export default meta;
|
|
22
|
+
type Story = StoryObj<CardWidgetProps>;
|
|
23
|
+
|
|
24
|
+
const SPOTLIGHTS: (CardContainerSpotlight | undefined)[] = [undefined, 'active', 'inactive'];
|
|
25
|
+
|
|
26
|
+
const ACTIONS = {
|
|
27
|
+
action: { label: 'Order card', icon: <Plus size={16} /> },
|
|
28
|
+
actionSecondary: { 'aria-label': 'Settings', icon: <Settings size={16} /> },
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const ThemeTitle = () => {
|
|
32
|
+
const { theme, screenMode } = useTheme();
|
|
33
|
+
return (
|
|
34
|
+
<Title type="title-subsection">
|
|
35
|
+
{theme} / {screenMode}
|
|
36
|
+
</Title>
|
|
37
|
+
);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
/** A full header on every spotlight against every theme. */
|
|
41
|
+
export const AllVariants: Story = {
|
|
42
|
+
...withVariantConfig([
|
|
43
|
+
'default',
|
|
44
|
+
'dark',
|
|
45
|
+
'bright-green',
|
|
46
|
+
'forest-green',
|
|
47
|
+
'business',
|
|
48
|
+
'business--bright-green',
|
|
49
|
+
'business--forest-green',
|
|
50
|
+
'platform',
|
|
51
|
+
'platform--forest-green',
|
|
52
|
+
]),
|
|
53
|
+
render: () => (
|
|
54
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '420px' }}>
|
|
55
|
+
<ThemeTitle />
|
|
56
|
+
{SPOTLIGHTS.map((spotlight) => (
|
|
57
|
+
<CardWidget
|
|
58
|
+
key={spotlight ?? 'none'}
|
|
59
|
+
spotlight={spotlight}
|
|
60
|
+
header={{
|
|
61
|
+
title: `Spotlight: ${spotlight ?? 'not set'}`,
|
|
62
|
+
titleAction: { href: '#target' },
|
|
63
|
+
...ACTIONS,
|
|
64
|
+
}}
|
|
65
|
+
>
|
|
66
|
+
<Body>First line of content.</Body>
|
|
67
|
+
<Body>Second line, to show the content stacks flush.</Body>
|
|
68
|
+
</CardWidget>
|
|
69
|
+
))}
|
|
70
|
+
</div>
|
|
71
|
+
),
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
/** Every combination of title link and the two action slots. */
|
|
75
|
+
export const HeaderCombinations: Story = {
|
|
76
|
+
render: () => (
|
|
77
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '420px' }}>
|
|
78
|
+
<CardWidget header={{ title: 'Title only' }}>
|
|
79
|
+
<Body>Content</Body>
|
|
80
|
+
</CardWidget>
|
|
81
|
+
|
|
82
|
+
<CardWidget header={{ title: 'Title as link', titleAction: { href: '#target' } }}>
|
|
83
|
+
<Body>Content</Body>
|
|
84
|
+
</CardWidget>
|
|
85
|
+
|
|
86
|
+
<CardWidget
|
|
87
|
+
header={{
|
|
88
|
+
title:
|
|
89
|
+
'A title link long enough to wrap onto a second line, with its chevron after the last word',
|
|
90
|
+
titleAction: { href: '#target' },
|
|
91
|
+
}}
|
|
92
|
+
>
|
|
93
|
+
<Body>Content</Body>
|
|
94
|
+
</CardWidget>
|
|
95
|
+
|
|
96
|
+
<CardWidget header={{ title: 'Leading action only', action: { label: 'Order card' } }}>
|
|
97
|
+
<Body>Content</Body>
|
|
98
|
+
</CardWidget>
|
|
99
|
+
|
|
100
|
+
<CardWidget header={{ title: 'Secondary action only', actionSecondary: { label: 'Manage' } }}>
|
|
101
|
+
<Body>Content</Body>
|
|
102
|
+
</CardWidget>
|
|
103
|
+
|
|
104
|
+
<CardWidget
|
|
105
|
+
header={{
|
|
106
|
+
title: 'Both actions, icon only',
|
|
107
|
+
action: { 'aria-label': 'Add', icon: <Plus size={16} /> },
|
|
108
|
+
actionSecondary: ACTIONS.actionSecondary,
|
|
109
|
+
}}
|
|
110
|
+
>
|
|
111
|
+
<Body>Content</Body>
|
|
112
|
+
</CardWidget>
|
|
113
|
+
|
|
114
|
+
<CardWidget
|
|
115
|
+
header={{
|
|
116
|
+
title: 'A title long enough to wrap onto more than a single line next to its actions',
|
|
117
|
+
titleAction: { href: '#target' },
|
|
118
|
+
...ACTIONS,
|
|
119
|
+
}}
|
|
120
|
+
>
|
|
121
|
+
<Body>Content</Body>
|
|
122
|
+
</CardWidget>
|
|
123
|
+
|
|
124
|
+
<CardWidget header={{ title: 'Header only', action: { label: 'Order card' } }} />
|
|
125
|
+
|
|
126
|
+
<CardWidget>
|
|
127
|
+
<Body>No header — the content starts at the card's top padding.</Body>
|
|
128
|
+
</CardWidget>
|
|
129
|
+
</div>
|
|
130
|
+
),
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
const LIST_ITEMS = [
|
|
134
|
+
{ title: '•••• 1582', subtitle: 'Current account', icon: <Card /> },
|
|
135
|
+
{ title: '•••• 9982', subtitle: 'Jar', icon: <Jar /> },
|
|
136
|
+
{ title: '•••• 5507', subtitle: 'Travel', icon: <Travel /> },
|
|
137
|
+
];
|
|
138
|
+
|
|
139
|
+
const CardListItem = ({
|
|
140
|
+
index,
|
|
141
|
+
spotlight,
|
|
142
|
+
}: {
|
|
143
|
+
index: number;
|
|
144
|
+
spotlight?: ListItemProps['spotlight'];
|
|
145
|
+
}) => {
|
|
146
|
+
const { title, subtitle, icon } = LIST_ITEMS[index];
|
|
147
|
+
return (
|
|
148
|
+
<ListItem
|
|
149
|
+
title={title}
|
|
150
|
+
subtitle={subtitle}
|
|
151
|
+
spotlight={spotlight}
|
|
152
|
+
media={<ListItem.AvatarView>{icon}</ListItem.AvatarView>}
|
|
153
|
+
control={<ListItem.Navigation href={`#item-${index}`} />}
|
|
154
|
+
/>
|
|
155
|
+
);
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
/**
|
|
159
|
+
* A `List` with every mix of spotlight and non-spotlight items. Non-spotlight items draw their
|
|
160
|
+
* hover and focus backgrounds 8px out of bounds, into the card's padding.
|
|
161
|
+
*/
|
|
162
|
+
export const ListCombinations: Story = {
|
|
163
|
+
render: () => (
|
|
164
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '420px' }}>
|
|
165
|
+
<CardWidget header={{ title: 'Non-spotlight items', titleAction: { href: '#target' } }}>
|
|
166
|
+
<List>
|
|
167
|
+
<CardListItem index={0} />
|
|
168
|
+
<CardListItem index={1} />
|
|
169
|
+
<CardListItem index={2} />
|
|
170
|
+
</List>
|
|
171
|
+
</CardWidget>
|
|
172
|
+
|
|
173
|
+
<CardWidget header={{ title: 'Active spotlight items' }}>
|
|
174
|
+
<List>
|
|
175
|
+
<CardListItem index={0} spotlight="active" />
|
|
176
|
+
<CardListItem index={1} spotlight="active" />
|
|
177
|
+
</List>
|
|
178
|
+
</CardWidget>
|
|
179
|
+
|
|
180
|
+
<CardWidget header={{ title: 'Inactive spotlight items' }}>
|
|
181
|
+
<List>
|
|
182
|
+
<CardListItem index={0} spotlight="inactive" />
|
|
183
|
+
<CardListItem index={1} spotlight="inactive" />
|
|
184
|
+
</List>
|
|
185
|
+
</CardWidget>
|
|
186
|
+
|
|
187
|
+
<CardWidget header={{ title: 'Active and inactive spotlight items' }}>
|
|
188
|
+
<List>
|
|
189
|
+
<CardListItem index={0} spotlight="active" />
|
|
190
|
+
<CardListItem index={1} spotlight="inactive" />
|
|
191
|
+
</List>
|
|
192
|
+
</CardWidget>
|
|
193
|
+
|
|
194
|
+
<CardWidget header={{ title: 'Spotlight and non-spotlight items', action: ACTIONS.action }}>
|
|
195
|
+
<List>
|
|
196
|
+
<CardListItem index={0} spotlight="active" />
|
|
197
|
+
<CardListItem index={1} />
|
|
198
|
+
<CardListItem index={2} />
|
|
199
|
+
</List>
|
|
200
|
+
</CardWidget>
|
|
201
|
+
|
|
202
|
+
<CardWidget
|
|
203
|
+
spotlight="active"
|
|
204
|
+
header={{ title: 'Single non-spotlight item in an active card' }}
|
|
205
|
+
>
|
|
206
|
+
<List>
|
|
207
|
+
<CardListItem index={0} />
|
|
208
|
+
</List>
|
|
209
|
+
</CardWidget>
|
|
210
|
+
|
|
211
|
+
<CardWidget
|
|
212
|
+
spotlight="inactive"
|
|
213
|
+
header={{ title: 'Single spotlight item in an inactive card' }}
|
|
214
|
+
>
|
|
215
|
+
<List>
|
|
216
|
+
<CardListItem index={0} spotlight="active" />
|
|
217
|
+
</List>
|
|
218
|
+
</CardWidget>
|
|
219
|
+
|
|
220
|
+
<CardWidget>
|
|
221
|
+
<List>
|
|
222
|
+
<CardListItem index={0} />
|
|
223
|
+
<CardListItem index={1} />
|
|
224
|
+
</List>
|
|
225
|
+
</CardWidget>
|
|
226
|
+
</div>
|
|
227
|
+
),
|
|
228
|
+
};
|
|
229
|
+
|
|
230
|
+
/**
|
|
231
|
+
* Two spotlighted widgets side by side: one with a title-only header and text, the other with
|
|
232
|
+
* action buttons and a `List`. Each header is at least as tall as the 32px action buttons, so the
|
|
233
|
+
* first line of content starts at the same height in both.
|
|
234
|
+
*/
|
|
235
|
+
export const SideBySide: Story = {
|
|
236
|
+
render: () => (
|
|
237
|
+
<div style={{ display: 'flex', gap: '24px', maxWidth: '900px' }}>
|
|
238
|
+
<div style={{ flex: 1 }}>
|
|
239
|
+
<CardWidget spotlight="active" header={{ title: 'Balance' }}>
|
|
240
|
+
<Body>Your virtual card is ready to use.</Body>
|
|
241
|
+
<Body>Spend in 40+ currencies with the real exchange rate.</Body>
|
|
242
|
+
</CardWidget>
|
|
243
|
+
</div>
|
|
244
|
+
<div style={{ flex: 1 }}>
|
|
245
|
+
<CardWidget
|
|
246
|
+
spotlight="active"
|
|
247
|
+
header={{ title: 'Cards', titleAction: { href: '#target' }, ...ACTIONS }}
|
|
248
|
+
>
|
|
249
|
+
<List>
|
|
250
|
+
<CardListItem index={0} />
|
|
251
|
+
<CardListItem index={1} />
|
|
252
|
+
<CardListItem index={2} />
|
|
253
|
+
</List>
|
|
254
|
+
</CardWidget>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
),
|
|
258
|
+
};
|
|
259
|
+
|
|
260
|
+
/**
|
|
261
|
+
* When the header is 360px wide or narrower, its action corner stays beside a title that fits on
|
|
262
|
+
* one line next to it, and moves under a longer title. Above that width, a long title wraps beside
|
|
263
|
+
* the actions instead.
|
|
264
|
+
*/
|
|
265
|
+
export const NarrowHeader: Story = {
|
|
266
|
+
render: () => (
|
|
267
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
|
|
268
|
+
{[320, 394, 420].map((width) => (
|
|
269
|
+
<div key={width} style={{ display: 'flex', flexDirection: 'column', gap: '16px', width }}>
|
|
270
|
+
{['Cards', `A longer title in a card ${width}px wide`].map((title) => (
|
|
271
|
+
<CardWidget
|
|
272
|
+
key={title}
|
|
273
|
+
spotlight="active"
|
|
274
|
+
header={{ title, titleAction: { href: '#target' }, ...ACTIONS }}
|
|
275
|
+
>
|
|
276
|
+
<Body>Content</Body>
|
|
277
|
+
</CardWidget>
|
|
278
|
+
))}
|
|
279
|
+
</div>
|
|
280
|
+
))}
|
|
281
|
+
</div>
|
|
282
|
+
),
|
|
283
|
+
};
|
|
284
|
+
|
|
285
|
+
/**
|
|
286
|
+
* In RTL the action cluster should move to the left and the title's trailing chevron should point
|
|
287
|
+
* left. The `actionSecondary` slot must stay on the inline-start side of `action` in both
|
|
288
|
+
* directions.
|
|
289
|
+
*
|
|
290
|
+
* Every widget is rendered wide (480px, actions beside the title) and narrow (320px). At 320px the
|
|
291
|
+
* short titles keep their actions beside them, and the long title's actions stack under it,
|
|
292
|
+
* aligned to the inline end. The long title wraps, so its chevron should follow the last word on
|
|
293
|
+
* the inline-end side in both directions.
|
|
294
|
+
*/
|
|
295
|
+
export const RTLDiff: Story = {
|
|
296
|
+
render: () => {
|
|
297
|
+
const i18n = useRtlDiffI18n();
|
|
298
|
+
const actions = {
|
|
299
|
+
action: { label: i18n.orderCard, icon: <Plus size={16} /> },
|
|
300
|
+
actionSecondary: { 'aria-label': i18n.settings, icon: <Settings size={16} /> },
|
|
301
|
+
};
|
|
302
|
+
const widgets = (
|
|
303
|
+
<>
|
|
304
|
+
<CardWidget header={{ title: i18n.cards, titleAction: { href: '#target' } }}>
|
|
305
|
+
<Body>{i18n.content}</Body>
|
|
306
|
+
</CardWidget>
|
|
307
|
+
|
|
308
|
+
<CardWidget header={{ title: i18n.cards, ...actions }}>
|
|
309
|
+
<Body>{i18n.content}</Body>
|
|
310
|
+
</CardWidget>
|
|
311
|
+
|
|
312
|
+
<CardWidget
|
|
313
|
+
spotlight="active"
|
|
314
|
+
header={{ title: i18n.longTitle, titleAction: { href: '#target' }, ...actions }}
|
|
315
|
+
>
|
|
316
|
+
<Body>{i18n.content}</Body>
|
|
317
|
+
</CardWidget>
|
|
318
|
+
|
|
319
|
+
<CardWidget spotlight="inactive" header={{ title: i18n.cards }}>
|
|
320
|
+
<Body>{i18n.content}</Body>
|
|
321
|
+
</CardWidget>
|
|
322
|
+
</>
|
|
323
|
+
);
|
|
324
|
+
|
|
325
|
+
return (
|
|
326
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
|
|
327
|
+
{[480, 320].map((width) => (
|
|
328
|
+
<div key={width} style={{ display: 'flex', flexDirection: 'column', gap: '24px', width }}>
|
|
329
|
+
{widgets}
|
|
330
|
+
</div>
|
|
331
|
+
))}
|
|
332
|
+
</div>
|
|
333
|
+
);
|
|
334
|
+
},
|
|
335
|
+
...withRTLDiff({
|
|
336
|
+
i18n: {
|
|
337
|
+
cards: { en: 'Cards', ar: 'البطاقات' },
|
|
338
|
+
content: {
|
|
339
|
+
en: 'Your virtual card is ready to use.',
|
|
340
|
+
ar: 'بطاقتك الافتراضية جاهزة للاستخدام.',
|
|
341
|
+
},
|
|
342
|
+
orderCard: { en: 'Order card', ar: 'اطلب بطاقة' },
|
|
343
|
+
settings: { en: 'Card settings', ar: 'إعدادات البطاقة' },
|
|
344
|
+
longTitle: {
|
|
345
|
+
en: 'Cards, accounts and everything else you hold with us',
|
|
346
|
+
ar: 'البطاقات والحسابات وكل ما تحتفظ به لدينا',
|
|
347
|
+
},
|
|
348
|
+
},
|
|
349
|
+
}),
|
|
350
|
+
};
|
|
@@ -391,6 +391,14 @@
|
|
|
391
391
|
padding-inline: 0;
|
|
392
392
|
container-type: inline-size;
|
|
393
393
|
}
|
|
394
|
+
.wds-list-item-paddingY-8 {
|
|
395
|
+
padding-block: var(--size-8);
|
|
396
|
+
padding-inline: 0;
|
|
397
|
+
}
|
|
398
|
+
.wds-list-item-paddingY-16 {
|
|
399
|
+
padding-block: var(--size-16);
|
|
400
|
+
padding-inline: 0;
|
|
401
|
+
}
|
|
394
402
|
.wds-list-item-paddingY-24 {
|
|
395
403
|
padding-block: var(--size-24);
|
|
396
404
|
padding-inline: 0;
|
|
@@ -1516,16 +1516,36 @@ describe('ListItem', () => {
|
|
|
1516
1516
|
describe('paddingY', () => {
|
|
1517
1517
|
it('uses the default vertical padding when not set', () => {
|
|
1518
1518
|
render(<ListItem title="Test Title" />);
|
|
1519
|
+
expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-8');
|
|
1520
|
+
expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-16');
|
|
1521
|
+
expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
|
|
1522
|
+
});
|
|
1523
|
+
|
|
1524
|
+
it('uses the smaller vertical padding when set to 8', () => {
|
|
1525
|
+
render(<ListItem title="Test Title" paddingY={8} />);
|
|
1526
|
+
expect(screen.getByRole('listitem')).toHaveClass('wds-list-item-paddingY-8');
|
|
1527
|
+
expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-16');
|
|
1519
1528
|
expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
|
|
1520
1529
|
});
|
|
1521
1530
|
|
|
1522
1531
|
it('uses the default vertical padding when set to 12', () => {
|
|
1523
1532
|
render(<ListItem title="Test Title" paddingY={12} />);
|
|
1533
|
+
expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-8');
|
|
1534
|
+
expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-16');
|
|
1535
|
+
expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
|
|
1536
|
+
});
|
|
1537
|
+
|
|
1538
|
+
it('uses the medium vertical padding when set to 16', () => {
|
|
1539
|
+
render(<ListItem title="Test Title" paddingY={16} />);
|
|
1540
|
+
expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-8');
|
|
1541
|
+
expect(screen.getByRole('listitem')).toHaveClass('wds-list-item-paddingY-16');
|
|
1524
1542
|
expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
|
|
1525
1543
|
});
|
|
1526
1544
|
|
|
1527
1545
|
it('uses the larger vertical padding when set to 24', () => {
|
|
1528
1546
|
render(<ListItem title="Test Title" paddingY={24} />);
|
|
1547
|
+
expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-8');
|
|
1548
|
+
expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-16');
|
|
1529
1549
|
expect(screen.getByRole('listitem')).toHaveClass('wds-list-item-paddingY-24');
|
|
1530
1550
|
});
|
|
1531
1551
|
});
|
|
@@ -63,7 +63,7 @@ export type ListItemProps = {
|
|
|
63
63
|
* Vertical padding of the list item, in pixels.
|
|
64
64
|
* @default 12
|
|
65
65
|
*/
|
|
66
|
-
paddingY?: 12 | 24;
|
|
66
|
+
paddingY?: 8 | 12 | 16 | 24;
|
|
67
67
|
title: ReactNode;
|
|
68
68
|
subtitle?: ReactNode;
|
|
69
69
|
/**
|
|
@@ -238,6 +238,8 @@ export const ListItem = ({
|
|
|
238
238
|
'wds-list-item-partially-interactive': isPartiallyInteractive,
|
|
239
239
|
[`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:
|
|
240
240
|
isFullyInteractive && !!spotlight,
|
|
241
|
+
'wds-list-item-paddingY-8': paddingY === 8,
|
|
242
|
+
'wds-list-item-paddingY-16': paddingY === 16,
|
|
241
243
|
'wds-list-item-paddingY-24': paddingY === 24,
|
|
242
244
|
disabled: disabled && !isPartiallyInteractive,
|
|
243
245
|
'disabled--has-prompt-reason':
|
|
@@ -72,7 +72,7 @@ export const PaddingY: Story = {
|
|
|
72
72
|
};
|
|
73
73
|
return (
|
|
74
74
|
<List>
|
|
75
|
-
{([12, 24] as const).map((paddingY) => (
|
|
75
|
+
{([8, 12, 16, 24] as const).map((paddingY) => (
|
|
76
76
|
<Fragment key={paddingY}>
|
|
77
77
|
<ListItem {...props} paddingY={paddingY} />
|
|
78
78
|
<ListItem {...props} paddingY={paddingY} spotlight="active" />
|