@transferwise/components 0.0.0-experimental-ff811de → 0.0.0-experimental-f2947c6
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/types/listItem/_stories/subcomponents.d.ts +1 -0
- package/build/types/listItem/_stories/subcomponents.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/listItem/_stories/ListItem.disabled.story.tsx +392 -0
- package/src/listItem/_stories/ListItem.story.tsx +0 -256
- package/src/listItem/_stories/subcomponents.tsx +5 -0
|
@@ -20,6 +20,7 @@ export declare const SB_LIST_ITEM_PROMPTS: {
|
|
|
20
20
|
};
|
|
21
21
|
export declare const SB_LIST_ITEM_MEDIA: {
|
|
22
22
|
readonly image: import("react").JSX.Element;
|
|
23
|
+
readonly avatarFlag: import("react").JSX.Element;
|
|
23
24
|
readonly avatarSingle: import("react").JSX.Element;
|
|
24
25
|
readonly avatarDouble: import("react").JSX.Element;
|
|
25
26
|
readonly avatarDiagonal: import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"subcomponents.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/subcomponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQlC,MAAM,MAAM,uBAAuB,GAC/B,iBAAiB,GACjB,QAAQ,GACR,cAAc,GACd,eAAe,GACf,qBAAqB,GACrB,YAAY,GACZ,kBAAkB,GAClB,qBAAqB,GACrB,2BAA2B,GAC3B,mBAAmB,GACnB,yBAAyB,GACzB,4BAA4B,GAC5B,kCAAkC,GAClC,YAAY,GACZ,oBAAoB,GACpB,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;AAEb,eAAO,MAAM,iBAAiB;;;;;;;;CAgB7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,uBAAuB,EAAE,SAAS,CA2DnE,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;CAe/B,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;CAavB,CAAC;AAEX,eAAO,MAAM,kBAAkB
|
|
1
|
+
{"version":3,"file":"subcomponents.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/subcomponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQlC,MAAM,MAAM,uBAAuB,GAC/B,iBAAiB,GACjB,QAAQ,GACR,cAAc,GACd,eAAe,GACf,qBAAqB,GACrB,YAAY,GACZ,kBAAkB,GAClB,qBAAqB,GACrB,2BAA2B,GAC3B,mBAAmB,GACnB,yBAAyB,GACzB,4BAA4B,GAC5B,kCAAkC,GAClC,YAAY,GACZ,oBAAoB,GACpB,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;AAEb,eAAO,MAAM,iBAAiB;;;;;;;;CAgB7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,uBAAuB,EAAE,SAAS,CA2DnE,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;CAe/B,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;CAavB,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;;;CAyBrB,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,392 @@
|
|
|
1
|
+
import { Title, Subtitle, Description, Stories } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
3
|
+
import { MultiCurrency, Plus } from '@transferwise/icons';
|
|
4
|
+
import { lorem10, lorem5 } from '../../test-utils';
|
|
5
|
+
import List from '../../list';
|
|
6
|
+
import Link from '../../link';
|
|
7
|
+
import { ListItem, type ListItemProps } from '../ListItem';
|
|
8
|
+
import type { ListItemPromptProps } from '../Prompt';
|
|
9
|
+
import {
|
|
10
|
+
SB_LIST_ITEM_TEXT as TEXT,
|
|
11
|
+
SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
|
|
12
|
+
SB_LIST_ITEM_CONTROLS as CONTROLS,
|
|
13
|
+
SB_LIST_ITEM_MEDIA as MEDIA,
|
|
14
|
+
} from './subcomponents';
|
|
15
|
+
import { disableControls } from './helpers';
|
|
16
|
+
|
|
17
|
+
const hideControls = disableControls([
|
|
18
|
+
'title',
|
|
19
|
+
'subtitle',
|
|
20
|
+
'valueTitle',
|
|
21
|
+
'valueSubtitle',
|
|
22
|
+
'media',
|
|
23
|
+
'additionalInfo',
|
|
24
|
+
'prompt',
|
|
25
|
+
'control',
|
|
26
|
+
'as',
|
|
27
|
+
'inverted',
|
|
28
|
+
'className',
|
|
29
|
+
'id',
|
|
30
|
+
'valueColumnWidth',
|
|
31
|
+
]);
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Please refer to the [design documentation](https://wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
|
|
35
|
+
*/
|
|
36
|
+
export default {
|
|
37
|
+
component: ListItem,
|
|
38
|
+
title: 'Content/ListItem/Disabled State',
|
|
39
|
+
tags: ['autodocs'],
|
|
40
|
+
argTypes: hideControls(),
|
|
41
|
+
parameters: {
|
|
42
|
+
docs: {
|
|
43
|
+
toc: true,
|
|
44
|
+
page: () => (
|
|
45
|
+
<>
|
|
46
|
+
<Title>Disabled state</Title>
|
|
47
|
+
<Subtitle />
|
|
48
|
+
<Description />
|
|
49
|
+
<Stories />
|
|
50
|
+
</>
|
|
51
|
+
),
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
} satisfies Meta<ListItemProps>;
|
|
55
|
+
type Story = StoryObj<ListItemProps>;
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* When dealing with dynamic content, e.g. BFFs or general form submissions, it's a common practice
|
|
59
|
+
* to stop the users from making changes to the inputs while the form is being processed.
|
|
60
|
+
*
|
|
61
|
+
* Because these form states are usually short-lived, and would take at most few seconds to
|
|
62
|
+
* complete, it's a good practice not to introduce any major content changes that could distract
|
|
63
|
+
* the user or, event worse, cause layout shift. That's why, by default, toggling the `disabled`
|
|
64
|
+
* prop will not show any additional visual indicators, apart from the luminosity and opacity
|
|
65
|
+
* changes.
|
|
66
|
+
*/
|
|
67
|
+
export const ShortLived: Story = {
|
|
68
|
+
name: 'Short-lived: fully interactive',
|
|
69
|
+
args: {
|
|
70
|
+
disabled: true,
|
|
71
|
+
title: TEXT.title,
|
|
72
|
+
subtitle: TEXT.subtitle,
|
|
73
|
+
valueTitle: TEXT.valueTitle,
|
|
74
|
+
valueSubtitle: TEXT.valueSubtitle,
|
|
75
|
+
media: MEDIA.avatarFlag,
|
|
76
|
+
control: (
|
|
77
|
+
<ListItem.Button priority="secondary" onClick={() => {}}>
|
|
78
|
+
Click me
|
|
79
|
+
</ListItem.Button>
|
|
80
|
+
),
|
|
81
|
+
},
|
|
82
|
+
render: function Render(args) {
|
|
83
|
+
const renderPrompt = (sentiment: ListItemPromptProps['sentiment']) => (
|
|
84
|
+
<ListItem.Prompt sentiment={sentiment}>
|
|
85
|
+
This prompt contains an <Link href="https://wise.com">external link</Link> too.
|
|
86
|
+
</ListItem.Prompt>
|
|
87
|
+
);
|
|
88
|
+
|
|
89
|
+
return (
|
|
90
|
+
<List>
|
|
91
|
+
<ListItem {...args} control={CONTROLS.navigation} />
|
|
92
|
+
<ListItem {...args} prompt={renderPrompt('neutral')} control={CONTROLS.navigation} />
|
|
93
|
+
<ListItem {...args} prompt={renderPrompt('warning')} />
|
|
94
|
+
<ListItem {...args} prompt={renderPrompt('positive')} />
|
|
95
|
+
</List>
|
|
96
|
+
);
|
|
97
|
+
},
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* There's a difference between fully and partially interactive ListItems. While setting `disabled`
|
|
102
|
+
* prop on the former applies the visual treatment to the whole item, on the latter ones it only
|
|
103
|
+
* affects the control element (`ListItem.Button` or `ListItem.IconButton`).
|
|
104
|
+
*
|
|
105
|
+
* That way, the inline link or button in the additional info section remains interactive and
|
|
106
|
+
* accessible.
|
|
107
|
+
*/
|
|
108
|
+
export const ShortLivedPartially: Story = {
|
|
109
|
+
name: 'Short-lived: partially interactive',
|
|
110
|
+
args: {
|
|
111
|
+
disabled: true,
|
|
112
|
+
title: TEXT.title,
|
|
113
|
+
subtitle: TEXT.subtitle,
|
|
114
|
+
valueTitle: TEXT.valueTitle,
|
|
115
|
+
valueSubtitle: TEXT.valueSubtitle,
|
|
116
|
+
media: MEDIA.avatarFlag,
|
|
117
|
+
additionalInfo: INFO.interactive,
|
|
118
|
+
},
|
|
119
|
+
render: function Render(args) {
|
|
120
|
+
const renderPrompt = (sentiment: ListItemPromptProps['sentiment']) => (
|
|
121
|
+
<ListItem.Prompt sentiment={sentiment}>
|
|
122
|
+
This prompt contains an <Link href="https://wise.com">external link</Link> too.
|
|
123
|
+
</ListItem.Prompt>
|
|
124
|
+
);
|
|
125
|
+
|
|
126
|
+
return (
|
|
127
|
+
<List>
|
|
128
|
+
<ListItem {...args} prompt={renderPrompt('warning')} control={CONTROLS.partialButton} />
|
|
129
|
+
<ListItem
|
|
130
|
+
{...args}
|
|
131
|
+
prompt={renderPrompt('positive')}
|
|
132
|
+
control={CONTROLS.partialIconButton}
|
|
133
|
+
/>
|
|
134
|
+
</List>
|
|
135
|
+
);
|
|
136
|
+
},
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* On the other hand, instances of ListItems that are disabled for longer periods of time and
|
|
141
|
+
* remain in such state until some event occurs can and should offer extended affordances to the
|
|
142
|
+
* user, so they are aware of the current state of the item and the reason why it's not available
|
|
143
|
+
* to them.
|
|
144
|
+
*
|
|
145
|
+
* To achieve, that we're exposing a new variant of the `ListItem.Prompt` component with a specific
|
|
146
|
+
* icon and colour scheme.
|
|
147
|
+
*/
|
|
148
|
+
export const LongLived: Story = {
|
|
149
|
+
name: 'Long-lived: fully interactive',
|
|
150
|
+
args: {
|
|
151
|
+
disabled: true,
|
|
152
|
+
title: TEXT.title,
|
|
153
|
+
subtitle: TEXT.subtitle,
|
|
154
|
+
valueTitle: TEXT.valueTitle,
|
|
155
|
+
valueSubtitle: TEXT.valueSubtitle,
|
|
156
|
+
media: MEDIA.avatarFlag,
|
|
157
|
+
control: (
|
|
158
|
+
<ListItem.Button priority="secondary" onClick={() => {}}>
|
|
159
|
+
Click me
|
|
160
|
+
</ListItem.Button>
|
|
161
|
+
),
|
|
162
|
+
},
|
|
163
|
+
render: function Render(args) {
|
|
164
|
+
const renderPrompt = (sentiment: ListItemPromptProps['sentiment']) => (
|
|
165
|
+
<ListItem.Prompt sentiment={sentiment}>
|
|
166
|
+
This prompt contains an <Link href="https://wise.com">external link</Link> too.
|
|
167
|
+
</ListItem.Prompt>
|
|
168
|
+
);
|
|
169
|
+
|
|
170
|
+
return (
|
|
171
|
+
<List>
|
|
172
|
+
<ListItem {...args} control={CONTROLS.navigation} />
|
|
173
|
+
<ListItem {...args} prompt={renderPrompt('neutral')} control={CONTROLS.navigation} />
|
|
174
|
+
<ListItem {...args} prompt={renderPrompt('warning')} />
|
|
175
|
+
<ListItem {...args} prompt={renderPrompt('positive')} />
|
|
176
|
+
</List>
|
|
177
|
+
);
|
|
178
|
+
},
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* Similarly to the short-lived scenario, partially interactive items will only apply the visual
|
|
183
|
+
* treatment to the control element, leaving the additional info section fully interactive and
|
|
184
|
+
* accessible.
|
|
185
|
+
*
|
|
186
|
+
* That said, you will be expected to use the `ListItem.Prompt` component to explain the reason
|
|
187
|
+
* why the item was disabled.
|
|
188
|
+
*/
|
|
189
|
+
export const LongLivedPartially: Story = {
|
|
190
|
+
name: 'Long-lived: partially interactive',
|
|
191
|
+
args: {
|
|
192
|
+
disabled: true,
|
|
193
|
+
title: TEXT.title,
|
|
194
|
+
subtitle: TEXT.subtitle,
|
|
195
|
+
valueTitle: TEXT.valueTitle,
|
|
196
|
+
valueSubtitle: TEXT.valueSubtitle,
|
|
197
|
+
media: MEDIA.avatarFlag,
|
|
198
|
+
additionalInfo: INFO.interactive,
|
|
199
|
+
},
|
|
200
|
+
render: function Render(args) {
|
|
201
|
+
const renderPrompt = (sentiment: ListItemPromptProps['sentiment']) => (
|
|
202
|
+
<ListItem.Prompt sentiment={sentiment}>
|
|
203
|
+
This prompt contains an <Link href="https://wise.com">external link</Link> too.
|
|
204
|
+
</ListItem.Prompt>
|
|
205
|
+
);
|
|
206
|
+
|
|
207
|
+
return (
|
|
208
|
+
<List>
|
|
209
|
+
<ListItem {...args} prompt={renderPrompt('warning')} control={CONTROLS.partialButton} />
|
|
210
|
+
<ListItem
|
|
211
|
+
{...args}
|
|
212
|
+
prompt={renderPrompt('positive')}
|
|
213
|
+
control={CONTROLS.partialIconButton}
|
|
214
|
+
/>
|
|
215
|
+
</List>
|
|
216
|
+
);
|
|
217
|
+
},
|
|
218
|
+
};
|
|
219
|
+
|
|
220
|
+
export const AllControls: Story = {
|
|
221
|
+
parameters: {
|
|
222
|
+
docs: {
|
|
223
|
+
canvas: {
|
|
224
|
+
sourceState: 'hidden',
|
|
225
|
+
},
|
|
226
|
+
},
|
|
227
|
+
controls: { disable: true },
|
|
228
|
+
knobs: { disable: true },
|
|
229
|
+
},
|
|
230
|
+
render: (args) => (
|
|
231
|
+
<List>
|
|
232
|
+
<ListItem
|
|
233
|
+
disabled
|
|
234
|
+
media={
|
|
235
|
+
<ListItem.AvatarView>
|
|
236
|
+
<MultiCurrency />
|
|
237
|
+
</ListItem.AvatarView>
|
|
238
|
+
}
|
|
239
|
+
title="Navigation"
|
|
240
|
+
subtitle={lorem5}
|
|
241
|
+
control={<ListItem.Navigation onClick={() => {}} />}
|
|
242
|
+
/>
|
|
243
|
+
<ListItem
|
|
244
|
+
disabled
|
|
245
|
+
media={
|
|
246
|
+
<ListItem.AvatarView>
|
|
247
|
+
<MultiCurrency />
|
|
248
|
+
</ListItem.AvatarView>
|
|
249
|
+
}
|
|
250
|
+
title="Button primary"
|
|
251
|
+
subtitle={lorem5}
|
|
252
|
+
control={<ListItem.Button priority="primary">Primary</ListItem.Button>}
|
|
253
|
+
/>
|
|
254
|
+
<ListItem
|
|
255
|
+
disabled
|
|
256
|
+
media={
|
|
257
|
+
<ListItem.AvatarView>
|
|
258
|
+
<MultiCurrency />
|
|
259
|
+
</ListItem.AvatarView>
|
|
260
|
+
}
|
|
261
|
+
title="Button secondary neutral"
|
|
262
|
+
subtitle={lorem5}
|
|
263
|
+
control={<ListItem.Button>Secondary</ListItem.Button>}
|
|
264
|
+
/>
|
|
265
|
+
<ListItem
|
|
266
|
+
disabled
|
|
267
|
+
media={
|
|
268
|
+
<ListItem.AvatarView>
|
|
269
|
+
<MultiCurrency />
|
|
270
|
+
</ListItem.AvatarView>
|
|
271
|
+
}
|
|
272
|
+
title="Button secondary neutral"
|
|
273
|
+
subtitle={lorem5}
|
|
274
|
+
control={<ListItem.Button priority="secondary-neutral">Secondary Neutral</ListItem.Button>}
|
|
275
|
+
/>
|
|
276
|
+
<ListItem
|
|
277
|
+
disabled
|
|
278
|
+
media={
|
|
279
|
+
<ListItem.AvatarView>
|
|
280
|
+
<MultiCurrency />
|
|
281
|
+
</ListItem.AvatarView>
|
|
282
|
+
}
|
|
283
|
+
title="Button tertiary"
|
|
284
|
+
subtitle={lorem5}
|
|
285
|
+
control={<ListItem.Button priority="tertiary">Tertiary</ListItem.Button>}
|
|
286
|
+
/>
|
|
287
|
+
<ListItem
|
|
288
|
+
disabled
|
|
289
|
+
media={
|
|
290
|
+
<ListItem.AvatarView>
|
|
291
|
+
<MultiCurrency />
|
|
292
|
+
</ListItem.AvatarView>
|
|
293
|
+
}
|
|
294
|
+
title="Icon Button"
|
|
295
|
+
subtitle={lorem5}
|
|
296
|
+
control={
|
|
297
|
+
<ListItem.IconButton>
|
|
298
|
+
<Plus />
|
|
299
|
+
</ListItem.IconButton>
|
|
300
|
+
}
|
|
301
|
+
/>
|
|
302
|
+
<ListItem
|
|
303
|
+
disabled
|
|
304
|
+
media={
|
|
305
|
+
<ListItem.AvatarView>
|
|
306
|
+
<MultiCurrency />
|
|
307
|
+
</ListItem.AvatarView>
|
|
308
|
+
}
|
|
309
|
+
title="Checkbox"
|
|
310
|
+
subtitle={lorem5}
|
|
311
|
+
control={<ListItem.Checkbox />}
|
|
312
|
+
/>
|
|
313
|
+
<ListItem
|
|
314
|
+
disabled
|
|
315
|
+
media={
|
|
316
|
+
<ListItem.AvatarView>
|
|
317
|
+
<MultiCurrency />
|
|
318
|
+
</ListItem.AvatarView>
|
|
319
|
+
}
|
|
320
|
+
title="Checkbox checked"
|
|
321
|
+
subtitle={lorem5}
|
|
322
|
+
control={<ListItem.Checkbox checked />}
|
|
323
|
+
/>
|
|
324
|
+
<ListItem
|
|
325
|
+
disabled
|
|
326
|
+
media={
|
|
327
|
+
<ListItem.AvatarView>
|
|
328
|
+
<MultiCurrency />
|
|
329
|
+
</ListItem.AvatarView>
|
|
330
|
+
}
|
|
331
|
+
title="Checkbox indeterminate"
|
|
332
|
+
subtitle={lorem5}
|
|
333
|
+
control={<ListItem.Checkbox indeterminate />}
|
|
334
|
+
/>
|
|
335
|
+
<ListItem
|
|
336
|
+
disabled
|
|
337
|
+
media={
|
|
338
|
+
<ListItem.AvatarView>
|
|
339
|
+
<MultiCurrency />
|
|
340
|
+
</ListItem.AvatarView>
|
|
341
|
+
}
|
|
342
|
+
title="Switch on"
|
|
343
|
+
subtitle={lorem5}
|
|
344
|
+
control={<ListItem.Switch checked onClick={() => {}} />}
|
|
345
|
+
/>
|
|
346
|
+
<ListItem
|
|
347
|
+
disabled
|
|
348
|
+
media={
|
|
349
|
+
<ListItem.AvatarView>
|
|
350
|
+
<MultiCurrency />
|
|
351
|
+
</ListItem.AvatarView>
|
|
352
|
+
}
|
|
353
|
+
title="Switch off"
|
|
354
|
+
subtitle={lorem5}
|
|
355
|
+
control={<ListItem.Switch onClick={() => {}} />}
|
|
356
|
+
/>
|
|
357
|
+
<ListItem
|
|
358
|
+
disabled
|
|
359
|
+
media={
|
|
360
|
+
<ListItem.AvatarView>
|
|
361
|
+
<MultiCurrency />
|
|
362
|
+
</ListItem.AvatarView>
|
|
363
|
+
}
|
|
364
|
+
title="Switch off"
|
|
365
|
+
subtitle={lorem5}
|
|
366
|
+
control={<ListItem.Radio name="radio" checked />}
|
|
367
|
+
/>
|
|
368
|
+
<ListItem
|
|
369
|
+
disabled
|
|
370
|
+
media={
|
|
371
|
+
<ListItem.AvatarView>
|
|
372
|
+
<MultiCurrency />
|
|
373
|
+
</ListItem.AvatarView>
|
|
374
|
+
}
|
|
375
|
+
title="Switch off"
|
|
376
|
+
subtitle={lorem5}
|
|
377
|
+
control={<ListItem.Radio name="radios" />}
|
|
378
|
+
/>
|
|
379
|
+
<ListItem
|
|
380
|
+
disabled
|
|
381
|
+
media={
|
|
382
|
+
<ListItem.AvatarView>
|
|
383
|
+
<MultiCurrency />
|
|
384
|
+
</ListItem.AvatarView>
|
|
385
|
+
}
|
|
386
|
+
title="Non-interactive"
|
|
387
|
+
subtitle={lorem10}
|
|
388
|
+
additionalInfo={INFO.nonInteractive}
|
|
389
|
+
/>
|
|
390
|
+
</List>
|
|
391
|
+
),
|
|
392
|
+
};
|
|
@@ -564,262 +564,6 @@ export const Interactivity: StoryObj<PreviewStoryArgs> = storySourceWithoutNoise
|
|
|
564
564
|
},
|
|
565
565
|
});
|
|
566
566
|
|
|
567
|
-
/**
|
|
568
|
-
* While most disabled states will show as grayed out, the navigation control switches from chevron
|
|
569
|
-
* to a new icon for improved user experience and accessibility. <br />
|
|
570
|
-
* For the same reason, only the control part of the List Item is dimmed, while all the content
|
|
571
|
-
* retains high contrast and interactivity.
|
|
572
|
-
*
|
|
573
|
-
* Please refer to the [design documentation](https://wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
|
|
574
|
-
*/
|
|
575
|
-
export const Disabled: Story = {
|
|
576
|
-
parameters: {
|
|
577
|
-
docs: {
|
|
578
|
-
canvas: {
|
|
579
|
-
sourceState: 'hidden',
|
|
580
|
-
},
|
|
581
|
-
},
|
|
582
|
-
controls: { disable: true },
|
|
583
|
-
knobs: { disable: true },
|
|
584
|
-
},
|
|
585
|
-
render: (args) => (
|
|
586
|
-
<List>
|
|
587
|
-
<ListItem
|
|
588
|
-
disabled
|
|
589
|
-
media={
|
|
590
|
-
<ListItem.AvatarView>
|
|
591
|
-
<MultiCurrency />
|
|
592
|
-
</ListItem.AvatarView>
|
|
593
|
-
}
|
|
594
|
-
title="Navigation"
|
|
595
|
-
subtitle={lorem5}
|
|
596
|
-
control={<ListItem.Navigation onClick={() => {}} />}
|
|
597
|
-
/>
|
|
598
|
-
<ListItem
|
|
599
|
-
disabled
|
|
600
|
-
media={
|
|
601
|
-
<ListItem.AvatarView>
|
|
602
|
-
<MultiCurrency />
|
|
603
|
-
</ListItem.AvatarView>
|
|
604
|
-
}
|
|
605
|
-
title="Button secondary neutral"
|
|
606
|
-
subtitle={lorem5}
|
|
607
|
-
control={<ListItem.Button priority="secondary-neutral">Secondary Neutral</ListItem.Button>}
|
|
608
|
-
/>
|
|
609
|
-
<ListItem
|
|
610
|
-
disabled
|
|
611
|
-
media={
|
|
612
|
-
<ListItem.AvatarView>
|
|
613
|
-
<MultiCurrency />
|
|
614
|
-
</ListItem.AvatarView>
|
|
615
|
-
}
|
|
616
|
-
title="Button primary"
|
|
617
|
-
subtitle={lorem5}
|
|
618
|
-
control={<ListItem.Button priority="primary">Primary</ListItem.Button>}
|
|
619
|
-
/>
|
|
620
|
-
<ListItem
|
|
621
|
-
disabled
|
|
622
|
-
media={
|
|
623
|
-
<ListItem.AvatarView>
|
|
624
|
-
<MultiCurrency />
|
|
625
|
-
</ListItem.AvatarView>
|
|
626
|
-
}
|
|
627
|
-
title="Button tertiary"
|
|
628
|
-
subtitle={lorem5}
|
|
629
|
-
control={<ListItem.Button priority="tertiary">Tertiary</ListItem.Button>}
|
|
630
|
-
/>
|
|
631
|
-
<ListItem
|
|
632
|
-
disabled
|
|
633
|
-
media={
|
|
634
|
-
<ListItem.AvatarView>
|
|
635
|
-
<MultiCurrency />
|
|
636
|
-
</ListItem.AvatarView>
|
|
637
|
-
}
|
|
638
|
-
title="Icon Button"
|
|
639
|
-
subtitle={lorem5}
|
|
640
|
-
control={
|
|
641
|
-
<ListItem.IconButton>
|
|
642
|
-
<Plus />
|
|
643
|
-
</ListItem.IconButton>
|
|
644
|
-
}
|
|
645
|
-
/>
|
|
646
|
-
<ListItem
|
|
647
|
-
disabled
|
|
648
|
-
media={
|
|
649
|
-
<ListItem.AvatarView>
|
|
650
|
-
<MultiCurrency />
|
|
651
|
-
</ListItem.AvatarView>
|
|
652
|
-
}
|
|
653
|
-
title="Checkbox"
|
|
654
|
-
subtitle={lorem5}
|
|
655
|
-
control={<ListItem.Checkbox />}
|
|
656
|
-
/>
|
|
657
|
-
<ListItem
|
|
658
|
-
disabled
|
|
659
|
-
media={
|
|
660
|
-
<ListItem.AvatarView>
|
|
661
|
-
<MultiCurrency />
|
|
662
|
-
</ListItem.AvatarView>
|
|
663
|
-
}
|
|
664
|
-
title="Checkbox checked"
|
|
665
|
-
subtitle={lorem5}
|
|
666
|
-
control={<ListItem.Checkbox checked />}
|
|
667
|
-
/>
|
|
668
|
-
<ListItem
|
|
669
|
-
disabled
|
|
670
|
-
media={
|
|
671
|
-
<ListItem.AvatarView>
|
|
672
|
-
<MultiCurrency />
|
|
673
|
-
</ListItem.AvatarView>
|
|
674
|
-
}
|
|
675
|
-
title="Checkbox indeterminate"
|
|
676
|
-
subtitle={lorem5}
|
|
677
|
-
control={<ListItem.Checkbox indeterminate />}
|
|
678
|
-
/>
|
|
679
|
-
<ListItem
|
|
680
|
-
disabled
|
|
681
|
-
media={
|
|
682
|
-
<ListItem.AvatarView>
|
|
683
|
-
<MultiCurrency />
|
|
684
|
-
</ListItem.AvatarView>
|
|
685
|
-
}
|
|
686
|
-
title="Switch on"
|
|
687
|
-
subtitle={lorem5}
|
|
688
|
-
control={<ListItem.Switch checked onClick={() => {}} />}
|
|
689
|
-
/>
|
|
690
|
-
<ListItem
|
|
691
|
-
disabled
|
|
692
|
-
media={
|
|
693
|
-
<ListItem.AvatarView>
|
|
694
|
-
<MultiCurrency />
|
|
695
|
-
</ListItem.AvatarView>
|
|
696
|
-
}
|
|
697
|
-
title="Switch off"
|
|
698
|
-
subtitle={lorem5}
|
|
699
|
-
control={<ListItem.Switch onClick={() => {}} />}
|
|
700
|
-
/>
|
|
701
|
-
<ListItem
|
|
702
|
-
disabled
|
|
703
|
-
media={
|
|
704
|
-
<ListItem.AvatarView>
|
|
705
|
-
<MultiCurrency />
|
|
706
|
-
</ListItem.AvatarView>
|
|
707
|
-
}
|
|
708
|
-
title="Switch off"
|
|
709
|
-
subtitle={lorem5}
|
|
710
|
-
control={<ListItem.Radio name="radio" checked />}
|
|
711
|
-
/>
|
|
712
|
-
<ListItem
|
|
713
|
-
disabled
|
|
714
|
-
media={
|
|
715
|
-
<ListItem.AvatarView>
|
|
716
|
-
<MultiCurrency />
|
|
717
|
-
</ListItem.AvatarView>
|
|
718
|
-
}
|
|
719
|
-
title="Switch off"
|
|
720
|
-
subtitle={lorem5}
|
|
721
|
-
control={<ListItem.Radio name="radios" />}
|
|
722
|
-
/>
|
|
723
|
-
<ListItem
|
|
724
|
-
disabled
|
|
725
|
-
media={
|
|
726
|
-
<ListItem.AvatarView>
|
|
727
|
-
<MultiCurrency />
|
|
728
|
-
</ListItem.AvatarView>
|
|
729
|
-
}
|
|
730
|
-
title="Switch off"
|
|
731
|
-
subtitle={lorem5}
|
|
732
|
-
additionalInfo={ADDITIONAL_INFO.interactive}
|
|
733
|
-
prompt={PROMPTS.nonInteractive}
|
|
734
|
-
control={
|
|
735
|
-
<ListItem.Button partiallyInteractive onClick={() => {}}>
|
|
736
|
-
Click me
|
|
737
|
-
</ListItem.Button>
|
|
738
|
-
}
|
|
739
|
-
/>
|
|
740
|
-
<ListItem
|
|
741
|
-
disabled
|
|
742
|
-
media={
|
|
743
|
-
<ListItem.AvatarView>
|
|
744
|
-
<MultiCurrency />
|
|
745
|
-
</ListItem.AvatarView>
|
|
746
|
-
}
|
|
747
|
-
title="Fully interactive"
|
|
748
|
-
subtitle={lorem10}
|
|
749
|
-
additionalInfo={ADDITIONAL_INFO.interactive}
|
|
750
|
-
control={<ListItem.Button>Action</ListItem.Button>}
|
|
751
|
-
prompt={PROMPTS.nonInteractive}
|
|
752
|
-
/>
|
|
753
|
-
|
|
754
|
-
<ListItem
|
|
755
|
-
disabled
|
|
756
|
-
media={
|
|
757
|
-
<ListItem.AvatarView>
|
|
758
|
-
<MultiCurrency />
|
|
759
|
-
</ListItem.AvatarView>
|
|
760
|
-
}
|
|
761
|
-
title="Partially interactive"
|
|
762
|
-
subtitle={lorem10}
|
|
763
|
-
additionalInfo={ADDITIONAL_INFO.interactive}
|
|
764
|
-
control={<ListItem.Button partiallyInteractive>Action</ListItem.Button>}
|
|
765
|
-
prompt={PROMPTS.interactive}
|
|
766
|
-
/>
|
|
767
|
-
|
|
768
|
-
<ListItem
|
|
769
|
-
disabled
|
|
770
|
-
media={
|
|
771
|
-
<ListItem.AvatarView>
|
|
772
|
-
<MultiCurrency />
|
|
773
|
-
</ListItem.AvatarView>
|
|
774
|
-
}
|
|
775
|
-
title="Navigation as Button"
|
|
776
|
-
subtitle={lorem10}
|
|
777
|
-
additionalInfo={ADDITIONAL_INFO.interactive}
|
|
778
|
-
control={
|
|
779
|
-
<ListItem.Navigation
|
|
780
|
-
onClick={() => {
|
|
781
|
-
console.log('click');
|
|
782
|
-
}}
|
|
783
|
-
/>
|
|
784
|
-
}
|
|
785
|
-
prompt={PROMPTS.interactive}
|
|
786
|
-
/>
|
|
787
|
-
|
|
788
|
-
<ListItem
|
|
789
|
-
disabled
|
|
790
|
-
media={
|
|
791
|
-
<ListItem.AvatarView>
|
|
792
|
-
<MultiCurrency />
|
|
793
|
-
</ListItem.AvatarView>
|
|
794
|
-
}
|
|
795
|
-
title="Navigation as Link"
|
|
796
|
-
subtitle={lorem10}
|
|
797
|
-
additionalInfo={ADDITIONAL_INFO.interactive}
|
|
798
|
-
control={<ListItem.Navigation target="_blank" href="https://wise.com/help/" />}
|
|
799
|
-
prompt={PROMPTS.interactive}
|
|
800
|
-
/>
|
|
801
|
-
|
|
802
|
-
<ListItem
|
|
803
|
-
disabled
|
|
804
|
-
media={
|
|
805
|
-
<ListItem.AvatarView>
|
|
806
|
-
<MultiCurrency />
|
|
807
|
-
</ListItem.AvatarView>
|
|
808
|
-
}
|
|
809
|
-
title="Navigation as Link"
|
|
810
|
-
subtitle={lorem10}
|
|
811
|
-
additionalInfo={ADDITIONAL_INFO.nonInteractive}
|
|
812
|
-
control={<ListItem.Navigation target="_blank" href="https://wise.com/help/" />}
|
|
813
|
-
prompt={
|
|
814
|
-
<ListItem.Prompt loading sentiment="positive">
|
|
815
|
-
Short lived disabled state so we keep initial icon here
|
|
816
|
-
</ListItem.Prompt>
|
|
817
|
-
}
|
|
818
|
-
/>
|
|
819
|
-
</List>
|
|
820
|
-
),
|
|
821
|
-
};
|
|
822
|
-
|
|
823
567
|
/**
|
|
824
568
|
* For backwards compatibility, all of the ListItem's content elements accept `ReactNode`.
|
|
825
569
|
* That said, most of them should be fed with plain text only. The exception is `valueTitle`
|
|
@@ -144,6 +144,11 @@ export const SB_LIST_ITEM_MEDIA = {
|
|
|
144
144
|
src="https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg"
|
|
145
145
|
/>
|
|
146
146
|
),
|
|
147
|
+
avatarFlag: (
|
|
148
|
+
<ListItem.AvatarView>
|
|
149
|
+
<Flag code="de" />
|
|
150
|
+
</ListItem.AvatarView>
|
|
151
|
+
),
|
|
147
152
|
avatarSingle: (
|
|
148
153
|
<ListItem.AvatarView>
|
|
149
154
|
<Briefcase />
|