@transferwise/components 0.0.0-experimental-3232842 → 0.0.0-experimental-c0de090
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 +0 -2
- package/build/styles/listItem/ListItem.css +0 -2
- package/build/styles/main.css +0 -2
- package/package.json +1 -1
- package/src/listItem/ListItem.css +0 -2
- package/src/listItem/ListItem.less +0 -1
- package/src/listItem/_stories/ListItem.scenarios.story.tsx +122 -2
- package/src/main.css +0 -2
package/build/main.css
CHANGED
|
@@ -3166,8 +3166,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3166
3166
|
width: 100%;
|
|
3167
3167
|
border-radius: 16px;
|
|
3168
3168
|
border-radius: var(--radius-medium);
|
|
3169
|
-
background-color: #ffffff;
|
|
3170
|
-
background-color: var(--color-background-screen);
|
|
3171
3169
|
position: relative;
|
|
3172
3170
|
padding: 12px 0;
|
|
3173
3171
|
padding: var(--size-12) 0;
|
package/build/styles/main.css
CHANGED
|
@@ -3166,8 +3166,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3166
3166
|
width: 100%;
|
|
3167
3167
|
border-radius: 16px;
|
|
3168
3168
|
border-radius: var(--radius-medium);
|
|
3169
|
-
background-color: #ffffff;
|
|
3170
|
-
background-color: var(--color-background-screen);
|
|
3171
3169
|
position: relative;
|
|
3172
3170
|
padding: 12px 0;
|
|
3173
3171
|
padding: var(--size-12) 0;
|
package/package.json
CHANGED
|
@@ -2,7 +2,15 @@ import { useState } from 'react';
|
|
|
2
2
|
import { Title, Subtitle, Description, Stories } from '@storybook/addon-docs/blocks';
|
|
3
3
|
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
4
4
|
import { action } from 'storybook/actions';
|
|
5
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
InfoCircle,
|
|
7
|
+
Documents,
|
|
8
|
+
Warning,
|
|
9
|
+
Home,
|
|
10
|
+
Globe,
|
|
11
|
+
People,
|
|
12
|
+
Link as LinkIcon,
|
|
13
|
+
} from '@transferwise/icons';
|
|
6
14
|
import { lorem10, lorem100, lorem20, lorem5 } from '../../test-utils';
|
|
7
15
|
import Modal from '../../modal';
|
|
8
16
|
import Link from '../../link';
|
|
@@ -23,7 +31,7 @@ import {
|
|
|
23
31
|
|
|
24
32
|
export default {
|
|
25
33
|
component: ListItem,
|
|
26
|
-
title: 'Content/ListItem/
|
|
34
|
+
title: 'Content/ListItem/Common Scenarios',
|
|
27
35
|
tags: ['autodocs'],
|
|
28
36
|
args: {
|
|
29
37
|
title: lorem5,
|
|
@@ -226,3 +234,115 @@ export const CopyAndPasteWithSnackbar: Story = storySourceWithoutNoise({
|
|
|
226
234
|
);
|
|
227
235
|
},
|
|
228
236
|
});
|
|
237
|
+
|
|
238
|
+
export const Summary: Story = {
|
|
239
|
+
parameters: {
|
|
240
|
+
docs: {
|
|
241
|
+
canvas: {
|
|
242
|
+
sourceState: 'shown',
|
|
243
|
+
},
|
|
244
|
+
},
|
|
245
|
+
backgrounds: {
|
|
246
|
+
default: 'light',
|
|
247
|
+
values: [
|
|
248
|
+
{ name: 'light', value: '#f8f9fa' },
|
|
249
|
+
{ name: 'dark', value: '#343a40' },
|
|
250
|
+
],
|
|
251
|
+
},
|
|
252
|
+
},
|
|
253
|
+
render: () => {
|
|
254
|
+
const css = `.custom-variant {
|
|
255
|
+
border: none;
|
|
256
|
+
}`;
|
|
257
|
+
return (
|
|
258
|
+
<>
|
|
259
|
+
<div style={{ padding: '24px', width: '450px' }}>
|
|
260
|
+
<List>
|
|
261
|
+
<ListItem
|
|
262
|
+
title="System maintenance"
|
|
263
|
+
subtitle="Scheduled downtime notification"
|
|
264
|
+
media={
|
|
265
|
+
<ListItem.AvatarView size={32} style={{ border: 'none' }}>
|
|
266
|
+
<Warning />
|
|
267
|
+
</ListItem.AvatarView>
|
|
268
|
+
}
|
|
269
|
+
control={
|
|
270
|
+
<ListItem.IconButton partiallyInteractive>
|
|
271
|
+
<InfoCircle />
|
|
272
|
+
</ListItem.IconButton>
|
|
273
|
+
}
|
|
274
|
+
/>
|
|
275
|
+
<ListItem
|
|
276
|
+
title="One link, one QR code, many uses"
|
|
277
|
+
subtitle="Quick Pay is a unique link and QR code for your business to get paid online and in person."
|
|
278
|
+
media={
|
|
279
|
+
<ListItem.AvatarView size={32} style={{ border: 'none' }}>
|
|
280
|
+
<LinkIcon />
|
|
281
|
+
</ListItem.AvatarView>
|
|
282
|
+
}
|
|
283
|
+
/>
|
|
284
|
+
<ListItem
|
|
285
|
+
title="Action required"
|
|
286
|
+
subtitle="Update your payment address"
|
|
287
|
+
media={
|
|
288
|
+
<ListItem.AvatarView size={32} style={{ border: 'none' }}>
|
|
289
|
+
<Home />
|
|
290
|
+
</ListItem.AvatarView>
|
|
291
|
+
}
|
|
292
|
+
additionalInfo={
|
|
293
|
+
<ListItem.AdditionalInfo
|
|
294
|
+
action={{ label: 'Change Address', onClick: () => console.log('hello') }}
|
|
295
|
+
/>
|
|
296
|
+
}
|
|
297
|
+
/>
|
|
298
|
+
<ListItem
|
|
299
|
+
title="Action required"
|
|
300
|
+
subtitle="Update your payment address"
|
|
301
|
+
media={
|
|
302
|
+
<ListItem.AvatarView size={32} style={{ border: 'none' }}>
|
|
303
|
+
<Home />
|
|
304
|
+
</ListItem.AvatarView>
|
|
305
|
+
}
|
|
306
|
+
additionalInfo={
|
|
307
|
+
<ListItem.AdditionalInfo
|
|
308
|
+
action={{ label: 'Change Address', onClick: () => console.log('hello') }}
|
|
309
|
+
/>
|
|
310
|
+
}
|
|
311
|
+
control={
|
|
312
|
+
<ListItem.IconButton partiallyInteractive>
|
|
313
|
+
<InfoCircle />
|
|
314
|
+
</ListItem.IconButton>
|
|
315
|
+
}
|
|
316
|
+
/>
|
|
317
|
+
</List>
|
|
318
|
+
</div>
|
|
319
|
+
<div
|
|
320
|
+
style={{
|
|
321
|
+
padding: '24px',
|
|
322
|
+
width: '450px',
|
|
323
|
+
backgroundColor: 'var(--color-background-neutral)',
|
|
324
|
+
}}
|
|
325
|
+
>
|
|
326
|
+
<List>
|
|
327
|
+
<ListItem
|
|
328
|
+
title="Receive money from around the world"
|
|
329
|
+
media={
|
|
330
|
+
<ListItem.AvatarView size={32} style={{ border: 'none' }}>
|
|
331
|
+
<Globe />
|
|
332
|
+
</ListItem.AvatarView>
|
|
333
|
+
}
|
|
334
|
+
/>
|
|
335
|
+
<ListItem
|
|
336
|
+
title="Let customers pay in a currency they trust"
|
|
337
|
+
media={
|
|
338
|
+
<ListItem.AvatarView size={32} style={{ border: 'none' }}>
|
|
339
|
+
<People />
|
|
340
|
+
</ListItem.AvatarView>
|
|
341
|
+
}
|
|
342
|
+
/>
|
|
343
|
+
</List>
|
|
344
|
+
</div>
|
|
345
|
+
</>
|
|
346
|
+
);
|
|
347
|
+
},
|
|
348
|
+
};
|
package/src/main.css
CHANGED
|
@@ -3166,8 +3166,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3166
3166
|
width: 100%;
|
|
3167
3167
|
border-radius: 16px;
|
|
3168
3168
|
border-radius: var(--radius-medium);
|
|
3169
|
-
background-color: #ffffff;
|
|
3170
|
-
background-color: var(--color-background-screen);
|
|
3171
3169
|
position: relative;
|
|
3172
3170
|
padding: 12px 0;
|
|
3173
3171
|
padding: var(--size-12) 0;
|