@transferwise/components 0.0.0-experimental-984cfd9 → 0.0.0-experimental-24596c9
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/listItem/AvatarLayout/ListItemAvatarLayout.js.map +1 -1
- package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs.map +1 -1
- package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts +3 -4
- package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx +2 -2
- package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx +4 -3
- package/src/listItem/AvatarView/ListItemAvatarView.story.tsx +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarLayout.js","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\
|
|
1
|
+
{"version":3,"file":"ListItemAvatarLayout.js","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {\n size?: ListItemMediaSize;\n};\n\n/**\n * This component allows for rendering 2 avatars. It's a thin wrapper around the\n * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only\n * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarLayoutComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-layout', className)}\n />\n );\n};\nAvatarLayout.displayName = 'ListItem.AvatarLayout';\n"],"names":["AvatarLayout","className","size","props","useListItemMedia","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":";;;;;;;AAgBO,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;EAC5FC,iCAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,cAAA,CAACC,sBAAgB,EAAA;AAAA,IAAA,GACXH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,SAAI,CAAC,mCAAmC,EAAEN,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,CAACQ,WAAW,GAAG,uBAAuB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarLayout.mjs","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\
|
|
1
|
+
{"version":3,"file":"ListItemAvatarLayout.mjs","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {\n size?: ListItemMediaSize;\n};\n\n/**\n * This component allows for rendering 2 avatars. It's a thin wrapper around the\n * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only\n * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarLayoutComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-layout', className)}\n />\n );\n};\nAvatarLayout.displayName = 'ListItem.AvatarLayout';\n"],"names":["AvatarLayout","className","size","props","useListItemMedia","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":";;;;;AAgBO,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;EAC5FC,gBAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,GAAA,CAACC,cAAgB,EAAA;AAAA,IAAA,GACXH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,IAAI,CAAC,mCAAmC,EAAEN,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,CAACQ,WAAW,GAAG,uBAAuB;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { type AvatarLayoutProps } from '../../avatarLayout';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import { ListItemMediaSize } from '../ListItemContext';
|
|
3
|
+
export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {
|
|
4
|
+
size?: ListItemMediaSize;
|
|
4
5
|
};
|
|
5
|
-
export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
|
|
6
6
|
/**
|
|
7
7
|
* This component allows for rendering 2 avatars. It's a thin wrapper around the
|
|
8
8
|
* [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only
|
|
@@ -14,5 +14,4 @@ export declare const AvatarLayout: {
|
|
|
14
14
|
({ className, size, ...props }: ListItemAvatarLayoutProps): import("react").JSX.Element;
|
|
15
15
|
displayName: string;
|
|
16
16
|
};
|
|
17
|
-
export {};
|
|
18
17
|
//# sourceMappingURL=ListItemAvatarLayout.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarLayout.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"names":[],"mappings":"AAAA,OAAyB,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"ListItemAvatarLayout.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"names":[],"mappings":"AAAA,OAAyB,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAG9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG;IACxF,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;oCAAwC,yBAAyB;;CAUzF,CAAC"}
|
package/package.json
CHANGED
|
@@ -37,7 +37,7 @@ export default {
|
|
|
37
37
|
},
|
|
38
38
|
size: {
|
|
39
39
|
control: 'select',
|
|
40
|
-
options: [32, 40, 48, 56, 72],
|
|
40
|
+
options: [24, 32, 40, 48, 56, 72],
|
|
41
41
|
description: 'Size of the avatar layout',
|
|
42
42
|
},
|
|
43
43
|
},
|
|
@@ -102,7 +102,7 @@ export const Sizes: Story = {
|
|
|
102
102
|
},
|
|
103
103
|
argTypes: disableControls()(['size', 'orientation']),
|
|
104
104
|
render: (args) => {
|
|
105
|
-
const sizes = [32, 40, 48, 56, 72] as const;
|
|
105
|
+
const sizes = [24, 32, 40, 48, 56, 72] as const;
|
|
106
106
|
const orientations = ['horizontal', 'diagonal'] as const;
|
|
107
107
|
|
|
108
108
|
return (
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { useListItemMedia } from '../useListItemMedia';
|
|
4
|
+
import { ListItemMediaSize } from '../ListItemContext';
|
|
4
5
|
|
|
5
|
-
type
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & {
|
|
7
|
+
size?: ListItemMediaSize;
|
|
8
|
+
};
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
11
|
* This component allows for rendering 2 avatars. It's a thin wrapper around the
|
|
@@ -13,7 +13,7 @@ import type { ListItemAvatarViewProps } from './ListItemAvatarView';
|
|
|
13
13
|
|
|
14
14
|
const hideControls = disableControls(['badge', 'children']);
|
|
15
15
|
|
|
16
|
-
const SIZES = [32, 40, 48, 56, 72] as const;
|
|
16
|
+
const SIZES = [24, 32, 40, 48, 56, 72] as const;
|
|
17
17
|
const BADGES = {
|
|
18
18
|
'Country flag badge': { flagCode: 'GBP' },
|
|
19
19
|
'StatusIcon badge': { status: 'warning' },
|
|
@@ -209,7 +209,7 @@ export const ContentTypes: Story = {
|
|
|
209
209
|
};
|
|
210
210
|
|
|
211
211
|
/**
|
|
212
|
-
* AvatarView supports
|
|
212
|
+
* AvatarView supports 6 sizes to fit different list item contexts: `24`, `32`, `40`, `48`, `56`, `72`. If decorated with a Badge, those will be sized accordingly as well. <br />
|
|
213
213
|
* Please refer to the [design documentation](https://wise.design/components/list-item#avatar:~:text=of%20the%20avatar.-,Avatar%20sizes,-List%20item%20supports) for details on when to use which one.
|
|
214
214
|
*/
|
|
215
215
|
export const Sizes: Story = {
|