@transferwise/components 0.0.0-experimental-d11e9c5 → 0.0.0-experimental-6a7bc4f
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/avatarView/AvatarView.js +31 -24
- package/build/avatarView/AvatarView.js.map +1 -1
- package/build/avatarView/AvatarView.mjs +30 -23
- package/build/avatarView/AvatarView.mjs.map +1 -1
- package/build/badge/Badge.js +13 -3
- package/build/badge/Badge.js.map +1 -1
- package/build/badge/Badge.mjs +12 -2
- package/build/badge/Badge.mjs.map +1 -1
- package/build/badge/BadgeAssets.js +6 -31
- package/build/badge/BadgeAssets.js.map +1 -1
- package/build/badge/BadgeAssets.mjs +1 -26
- package/build/badge/BadgeAssets.mjs.map +1 -1
- package/build/index.js +112 -112
- package/build/index.mjs +24 -24
- package/build/types/avatarView/AvatarView.d.ts +11 -4
- package/build/types/avatarView/AvatarView.d.ts.map +1 -1
- package/build/types/badge/Badge.d.ts +4 -3
- package/build/types/badge/Badge.d.ts.map +1 -1
- package/build/types/badge/BadgeAssets.d.ts +2 -3
- package/build/types/badge/BadgeAssets.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/avatarView/AvatarView.story.tsx +57 -0
- package/src/avatarView/AvatarView.tsx +44 -24
- package/src/badge/Badge.tsx +12 -5
- package/src/badge/BadgeAssets.tsx +3 -7
- package/src/decision/Decision.story.tsx +9 -9
|
@@ -11,7 +11,7 @@ require('../common/theme.js');
|
|
|
11
11
|
require('../common/direction.js');
|
|
12
12
|
require('../common/propsValues/control.js');
|
|
13
13
|
require('../common/propsValues/breakpoint.js');
|
|
14
|
-
|
|
14
|
+
require('../common/propsValues/size.js');
|
|
15
15
|
require('../common/propsValues/typography.js');
|
|
16
16
|
require('../common/propsValues/width.js');
|
|
17
17
|
require('../common/propsValues/type.js');
|
|
@@ -21,7 +21,7 @@ require('../common/propsValues/position.js');
|
|
|
21
21
|
require('../common/propsValues/layouts.js');
|
|
22
22
|
require('../common/propsValues/status.js');
|
|
23
23
|
require('../common/propsValues/sentiment.js');
|
|
24
|
-
require('../common/propsValues/profileType.js');
|
|
24
|
+
var profileType = require('../common/propsValues/profileType.js');
|
|
25
25
|
require('../common/propsValues/variant.js');
|
|
26
26
|
require('../common/propsValues/scroll.js');
|
|
27
27
|
require('../common/propsValues/markdownNodeType.js');
|
|
@@ -71,7 +71,7 @@ function AvatarView({
|
|
|
71
71
|
}),
|
|
72
72
|
...style
|
|
73
73
|
},
|
|
74
|
-
children: children === undefined ? /*#__PURE__*/jsxRuntime.jsx(
|
|
74
|
+
children: children === undefined ? /*#__PURE__*/jsxRuntime.jsx(AvatarViewContent, {
|
|
75
75
|
imgSrc,
|
|
76
76
|
type,
|
|
77
77
|
name
|
|
@@ -82,13 +82,13 @@ function AvatarView({
|
|
|
82
82
|
}
|
|
83
83
|
/** Size of badge depends on size of avatar */
|
|
84
84
|
const MAP_BADGE_ASSET_SIZE = {
|
|
85
|
-
16:
|
|
86
|
-
24:
|
|
87
|
-
32:
|
|
88
|
-
40:
|
|
89
|
-
48:
|
|
90
|
-
56:
|
|
91
|
-
72:
|
|
85
|
+
16: 16,
|
|
86
|
+
24: 16,
|
|
87
|
+
32: 16,
|
|
88
|
+
40: 16,
|
|
89
|
+
48: 16,
|
|
90
|
+
56: 24,
|
|
91
|
+
72: 24
|
|
92
92
|
};
|
|
93
93
|
/** Certain sizes of AvatarView has a custom offset of Badge */
|
|
94
94
|
const MAP_BADGE_POSITION = {
|
|
@@ -101,43 +101,50 @@ const MAP_BADGE_POSITION = {
|
|
|
101
101
|
function Badges({
|
|
102
102
|
children,
|
|
103
103
|
avatar,
|
|
104
|
-
|
|
104
|
+
'aria-label': ariaLabel,
|
|
105
|
+
asset: customBadge,
|
|
106
|
+
...badgeAssets
|
|
105
107
|
}) {
|
|
106
108
|
const {
|
|
107
|
-
size
|
|
109
|
+
size = 48,
|
|
108
110
|
selected,
|
|
109
111
|
notification
|
|
110
112
|
} = avatar;
|
|
111
|
-
const
|
|
112
|
-
|
|
113
|
-
|
|
113
|
+
const anyBadge = Object.values({
|
|
114
|
+
customBadge,
|
|
115
|
+
...badgeAssets
|
|
116
|
+
}).filter(Boolean).length > 0;
|
|
117
|
+
if ((anyBadge || selected) && size > 16) {
|
|
118
|
+
const badgeSize = MAP_BADGE_ASSET_SIZE[size];
|
|
114
119
|
return /*#__PURE__*/jsxRuntime.jsx(Badge, {
|
|
120
|
+
"aria-label": ariaLabel,
|
|
115
121
|
size: badgeSize,
|
|
116
|
-
badge: /*#__PURE__*/jsxRuntime.jsx(
|
|
122
|
+
badge: customBadge ? /*#__PURE__*/jsxRuntime.jsx(Circle, {
|
|
123
|
+
fixedSize: true,
|
|
124
|
+
size: badgeSize,
|
|
125
|
+
children: customBadge
|
|
126
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(BadgeAssets, {
|
|
117
127
|
...(selected ? {
|
|
118
128
|
status: 'positive'
|
|
119
|
-
} :
|
|
129
|
+
} : badgeAssets),
|
|
120
130
|
size: badgeSize
|
|
121
131
|
}),
|
|
122
132
|
style: {
|
|
123
133
|
// @ts-expect-error CSS custom props allowed
|
|
124
|
-
'--badge-content-position': `${MAP_BADGE_POSITION[size
|
|
134
|
+
'--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`
|
|
125
135
|
},
|
|
126
136
|
children: children
|
|
127
137
|
});
|
|
128
138
|
}
|
|
129
139
|
if (notification) {
|
|
130
140
|
return /*#__PURE__*/jsxRuntime.jsx(NotificationDot, {
|
|
131
|
-
avatarSize: size
|
|
141
|
+
avatarSize: size,
|
|
132
142
|
children: children
|
|
133
143
|
});
|
|
134
144
|
}
|
|
135
145
|
return children;
|
|
136
146
|
}
|
|
137
|
-
|
|
138
|
-
* Common logic for entities (personal & business profiles or recipients)
|
|
139
|
-
*/
|
|
140
|
-
function Profile({
|
|
147
|
+
function AvatarViewContent({
|
|
141
148
|
imgSrc,
|
|
142
149
|
name,
|
|
143
150
|
type
|
|
@@ -151,7 +158,7 @@ function Profile({
|
|
|
151
158
|
});
|
|
152
159
|
}
|
|
153
160
|
if (type) {
|
|
154
|
-
return type
|
|
161
|
+
return type === profileType.ProfileType.BUSINESS ? /*#__PURE__*/jsxRuntime.jsx(icons.Briefcase, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.Profile, {});
|
|
155
162
|
}
|
|
156
163
|
if (name) {
|
|
157
164
|
return initials.getInitials(name);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport NotificationDot from './NotificationDot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials,
|
|
1
|
+
{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport NotificationDot from './NotificationDot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = BadgeAssetsProps &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n name?: string | null;\n type?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n notification?: boolean;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n children = undefined,\n size = 48,\n selected,\n notification,\n badge,\n interactive = false,\n className,\n style,\n imgSrc,\n type,\n name,\n ...restProps\n}: Props) {\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx(\n 'np-avatar-view',\n interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n { 'np-avatar-view-selected': selected },\n className,\n )}\n {...restProps}\n >\n <Badges avatar={{ size, notification, selected }} {...badge}>\n <Circle\n size={size}\n fixedSize\n className={clsx('np-avatar-view-content')}\n enableBorder={!interactive || selected}\n style={{\n ...(selected && { '--circle-border-color': 'var(--color-interactive-primary)' }),\n ...style,\n }}\n >\n {children === undefined ? <AvatarViewContent {...{ imgSrc, type, name }} /> : children}\n </Circle>\n </Badges>\n </Circle>\n );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n 16: 16,\n 24: 16,\n 32: 16,\n 40: 16,\n 48: 16,\n 56: 24,\n 72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Certain sizes of AvatarView has a custom offset of Badge */\nconst MAP_BADGE_POSITION = {\n 24: -6,\n 32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n PropsWithChildren<{\n avatar: Pick<Props, 'selected' | 'size' | 'notification'>;\n }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n children,\n avatar,\n 'aria-label': ariaLabel,\n asset: customBadge,\n ...badgeAssets\n}: BadgesProps) {\n const { size = 48, selected, notification } = avatar;\n const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n if ((anyBadge || selected) && size > 16) {\n const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n return (\n <Badge\n aria-label={ariaLabel}\n size={badgeSize}\n badge={\n customBadge ? (\n <Circle fixedSize size={badgeSize}>\n {customBadge}\n </Circle>\n ) : (\n <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n )\n }\n style={{\n // @ts-expect-error CSS custom props allowed\n '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n }}\n >\n {children}\n </Badge>\n );\n }\n if (notification) {\n return <NotificationDot avatarSize={size}>{children}</NotificationDot>;\n }\n return children;\n}\n\nfunction AvatarViewContent({ imgSrc, name, type }: Pick<Props, 'imgSrc' | 'name' | 'type'>) {\n const [tryLoadImage, setTryLoadImage] = useState(true);\n if (imgSrc && tryLoadImage) {\n return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n }\n if (type) {\n return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n }\n if (name) {\n return getInitials(name);\n }\n return <PersonalProfileIcon />;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","notification","badge","interactive","className","style","imgSrc","type","name","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","badgeSize","Badge","BadgeAssets","status","NotificationDot","avatarSize","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ import '../common/theme.mjs';
|
|
|
9
9
|
import '../common/direction.mjs';
|
|
10
10
|
import '../common/propsValues/control.mjs';
|
|
11
11
|
import '../common/propsValues/breakpoint.mjs';
|
|
12
|
-
import
|
|
12
|
+
import '../common/propsValues/size.mjs';
|
|
13
13
|
import '../common/propsValues/typography.mjs';
|
|
14
14
|
import '../common/propsValues/width.mjs';
|
|
15
15
|
import '../common/propsValues/type.mjs';
|
|
@@ -19,13 +19,13 @@ import '../common/propsValues/position.mjs';
|
|
|
19
19
|
import '../common/propsValues/layouts.mjs';
|
|
20
20
|
import '../common/propsValues/status.mjs';
|
|
21
21
|
import '../common/propsValues/sentiment.mjs';
|
|
22
|
-
import '../common/propsValues/profileType.mjs';
|
|
22
|
+
import { ProfileType } from '../common/propsValues/profileType.mjs';
|
|
23
23
|
import '../common/propsValues/variant.mjs';
|
|
24
24
|
import '../common/propsValues/scroll.mjs';
|
|
25
25
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
26
26
|
import '../common/fileType.mjs';
|
|
27
27
|
import { getInitials } from '../common/initials.mjs';
|
|
28
|
-
import { Briefcase, Profile
|
|
28
|
+
import { Briefcase, Profile } from '@transferwise/icons';
|
|
29
29
|
import 'react-intl';
|
|
30
30
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
31
31
|
import { jsx } from 'react/jsx-runtime';
|
|
@@ -69,7 +69,7 @@ function AvatarView({
|
|
|
69
69
|
}),
|
|
70
70
|
...style
|
|
71
71
|
},
|
|
72
|
-
children: children === undefined ? /*#__PURE__*/jsx(
|
|
72
|
+
children: children === undefined ? /*#__PURE__*/jsx(AvatarViewContent, {
|
|
73
73
|
imgSrc,
|
|
74
74
|
type,
|
|
75
75
|
name
|
|
@@ -80,13 +80,13 @@ function AvatarView({
|
|
|
80
80
|
}
|
|
81
81
|
/** Size of badge depends on size of avatar */
|
|
82
82
|
const MAP_BADGE_ASSET_SIZE = {
|
|
83
|
-
16:
|
|
84
|
-
24:
|
|
85
|
-
32:
|
|
86
|
-
40:
|
|
87
|
-
48:
|
|
88
|
-
56:
|
|
89
|
-
72:
|
|
83
|
+
16: 16,
|
|
84
|
+
24: 16,
|
|
85
|
+
32: 16,
|
|
86
|
+
40: 16,
|
|
87
|
+
48: 16,
|
|
88
|
+
56: 24,
|
|
89
|
+
72: 24
|
|
90
90
|
};
|
|
91
91
|
/** Certain sizes of AvatarView has a custom offset of Badge */
|
|
92
92
|
const MAP_BADGE_POSITION = {
|
|
@@ -99,22 +99,32 @@ const MAP_BADGE_POSITION = {
|
|
|
99
99
|
function Badges({
|
|
100
100
|
children,
|
|
101
101
|
avatar,
|
|
102
|
-
|
|
102
|
+
'aria-label': ariaLabel,
|
|
103
|
+
asset: customBadge,
|
|
104
|
+
...badgeAssets
|
|
103
105
|
}) {
|
|
104
106
|
const {
|
|
105
107
|
size = 48,
|
|
106
108
|
selected,
|
|
107
109
|
notification
|
|
108
110
|
} = avatar;
|
|
109
|
-
const
|
|
110
|
-
|
|
111
|
-
|
|
111
|
+
const anyBadge = Object.values({
|
|
112
|
+
customBadge,
|
|
113
|
+
...badgeAssets
|
|
114
|
+
}).filter(Boolean).length > 0;
|
|
115
|
+
if ((anyBadge || selected) && size > 16) {
|
|
116
|
+
const badgeSize = MAP_BADGE_ASSET_SIZE[size];
|
|
112
117
|
return /*#__PURE__*/jsx(Badge, {
|
|
118
|
+
"aria-label": ariaLabel,
|
|
113
119
|
size: badgeSize,
|
|
114
|
-
badge: /*#__PURE__*/jsx(
|
|
120
|
+
badge: customBadge ? /*#__PURE__*/jsx(Circle, {
|
|
121
|
+
fixedSize: true,
|
|
122
|
+
size: badgeSize,
|
|
123
|
+
children: customBadge
|
|
124
|
+
}) : /*#__PURE__*/jsx(BadgeAssets, {
|
|
115
125
|
...(selected ? {
|
|
116
126
|
status: 'positive'
|
|
117
|
-
} :
|
|
127
|
+
} : badgeAssets),
|
|
118
128
|
size: badgeSize
|
|
119
129
|
}),
|
|
120
130
|
style: {
|
|
@@ -132,10 +142,7 @@ function Badges({
|
|
|
132
142
|
}
|
|
133
143
|
return children;
|
|
134
144
|
}
|
|
135
|
-
|
|
136
|
-
* Common logic for entities (personal & business profiles or recipients)
|
|
137
|
-
*/
|
|
138
|
-
function Profile({
|
|
145
|
+
function AvatarViewContent({
|
|
139
146
|
imgSrc,
|
|
140
147
|
name,
|
|
141
148
|
type
|
|
@@ -149,12 +156,12 @@ function Profile({
|
|
|
149
156
|
});
|
|
150
157
|
}
|
|
151
158
|
if (type) {
|
|
152
|
-
return type
|
|
159
|
+
return type === ProfileType.BUSINESS ? /*#__PURE__*/jsx(Briefcase, {}) : /*#__PURE__*/jsx(Profile, {});
|
|
153
160
|
}
|
|
154
161
|
if (name) {
|
|
155
162
|
return getInitials(name);
|
|
156
163
|
}
|
|
157
|
-
return /*#__PURE__*/jsx(Profile
|
|
164
|
+
return /*#__PURE__*/jsx(Profile, {});
|
|
158
165
|
}
|
|
159
166
|
|
|
160
167
|
export { AvatarView as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport NotificationDot from './NotificationDot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials,
|
|
1
|
+
{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport NotificationDot from './NotificationDot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = BadgeAssetsProps &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n name?: string | null;\n type?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n notification?: boolean;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n children = undefined,\n size = 48,\n selected,\n notification,\n badge,\n interactive = false,\n className,\n style,\n imgSrc,\n type,\n name,\n ...restProps\n}: Props) {\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx(\n 'np-avatar-view',\n interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n { 'np-avatar-view-selected': selected },\n className,\n )}\n {...restProps}\n >\n <Badges avatar={{ size, notification, selected }} {...badge}>\n <Circle\n size={size}\n fixedSize\n className={clsx('np-avatar-view-content')}\n enableBorder={!interactive || selected}\n style={{\n ...(selected && { '--circle-border-color': 'var(--color-interactive-primary)' }),\n ...style,\n }}\n >\n {children === undefined ? <AvatarViewContent {...{ imgSrc, type, name }} /> : children}\n </Circle>\n </Badges>\n </Circle>\n );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n 16: 16,\n 24: 16,\n 32: 16,\n 40: 16,\n 48: 16,\n 56: 24,\n 72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Certain sizes of AvatarView has a custom offset of Badge */\nconst MAP_BADGE_POSITION = {\n 24: -6,\n 32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n PropsWithChildren<{\n avatar: Pick<Props, 'selected' | 'size' | 'notification'>;\n }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n children,\n avatar,\n 'aria-label': ariaLabel,\n asset: customBadge,\n ...badgeAssets\n}: BadgesProps) {\n const { size = 48, selected, notification } = avatar;\n const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n if ((anyBadge || selected) && size > 16) {\n const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n return (\n <Badge\n aria-label={ariaLabel}\n size={badgeSize}\n badge={\n customBadge ? (\n <Circle fixedSize size={badgeSize}>\n {customBadge}\n </Circle>\n ) : (\n <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n )\n }\n style={{\n // @ts-expect-error CSS custom props allowed\n '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n }}\n >\n {children}\n </Badge>\n );\n }\n if (notification) {\n return <NotificationDot avatarSize={size}>{children}</NotificationDot>;\n }\n return children;\n}\n\nfunction AvatarViewContent({ imgSrc, name, type }: Pick<Props, 'imgSrc' | 'name' | 'type'>) {\n const [tryLoadImage, setTryLoadImage] = useState(true);\n if (imgSrc && tryLoadImage) {\n return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n }\n if (type) {\n return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n }\n if (name) {\n return getInitials(name);\n }\n return <PersonalProfileIcon />;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","notification","badge","interactive","className","style","imgSrc","type","name","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","badgeSize","Badge","BadgeAssets","status","NotificationDot","avatarSize","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
|
package/build/badge/Badge.js
CHANGED
|
@@ -26,6 +26,17 @@ require('react-intl');
|
|
|
26
26
|
require('../common/closeButton/CloseButton.messages.js');
|
|
27
27
|
var jsxRuntime = require('react/jsx-runtime');
|
|
28
28
|
|
|
29
|
+
const mapLegacySize = {
|
|
30
|
+
16: size.Size.SMALL,
|
|
31
|
+
24: size.Size.LARGE,
|
|
32
|
+
// medium is no longer exists, so we map it to small
|
|
33
|
+
[String(size.Size.MEDIUM)]: size.Size.SMALL
|
|
34
|
+
};
|
|
35
|
+
// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.
|
|
36
|
+
// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.
|
|
37
|
+
/**
|
|
38
|
+
* @deprecated Use `<AvatarView badge={..} />` instead.
|
|
39
|
+
*/
|
|
29
40
|
const Badge = ({
|
|
30
41
|
badge,
|
|
31
42
|
className = undefined,
|
|
@@ -35,11 +46,10 @@ const Badge = ({
|
|
|
35
46
|
children,
|
|
36
47
|
style
|
|
37
48
|
}) => {
|
|
38
|
-
|
|
39
|
-
const size$1 = sizeProp === size.Size.MEDIUM ? size.Size.SMALL : sizeProp;
|
|
49
|
+
const size = mapLegacySize[sizeProp] ?? sizeProp;
|
|
40
50
|
const classes = clsx.clsx('tw-badge', {
|
|
41
51
|
[`tw-badge-border-${border}`]: border,
|
|
42
|
-
[`tw-badge-${size
|
|
52
|
+
[`tw-badge-${size}`]: size
|
|
43
53
|
}, className);
|
|
44
54
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
45
55
|
"aria-label": ariaLabel,
|
package/build/badge/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\n\n/**\n * @deprecated Use `
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n */\n size?: DeprecatedSizes | BadgeAssetsProps['size'];\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n 16: Size.SMALL,\n 24: Size.LARGE,\n // medium is no longer exists, so we map it to small\n [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n style,\n}: BadgeProps) => {\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes} style={style}>\n <div className=\"tw-badge__children\">{children}</div>\n <div className=\"tw-badge__content\">{badge}</div>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAMA,aAAa,GAAG;EACpB,EAAE,EAAEC,SAAI,CAACC,KAAK;EACd,EAAE,EAAED,SAAI,CAACE,KAAK;AACd;EACA,CAACC,MAAM,CAACH,SAAI,CAACI,MAAM,CAAC,GAAGJ,SAAI,CAACC,KAAAA;CAC7B,CAAA;AAED;AACA;AACA;;AAEG;AACGI,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGV,SAAI,CAACC,KAAK;EAC3BU,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvBC,QAAQ;AACRC,EAAAA,KAAAA;AAAK,CACM,KAAI;AACf,EAAA,MAAMP,IAAI,GAAGV,aAAa,CAACW,QAAQ,CAAC,IAAIA,QAAQ,CAAA;AAChD,EAAA,MAAMO,OAAO,GAAWC,SAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBP,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYL,SAAU;AAACP,IAAAA,SAAS,EAAEU,OAAQ;AAACD,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,gBAC3DK,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;KAAc,CACnD,eAAAK,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAAET,KAAAA;AAAK,KAAM,CACjD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
|
package/build/badge/Badge.mjs
CHANGED
|
@@ -24,6 +24,17 @@ import 'react-intl';
|
|
|
24
24
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
25
25
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
26
26
|
|
|
27
|
+
const mapLegacySize = {
|
|
28
|
+
16: Size.SMALL,
|
|
29
|
+
24: Size.LARGE,
|
|
30
|
+
// medium is no longer exists, so we map it to small
|
|
31
|
+
[String(Size.MEDIUM)]: Size.SMALL
|
|
32
|
+
};
|
|
33
|
+
// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.
|
|
34
|
+
// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.
|
|
35
|
+
/**
|
|
36
|
+
* @deprecated Use `<AvatarView badge={..} />` instead.
|
|
37
|
+
*/
|
|
27
38
|
const Badge = ({
|
|
28
39
|
badge,
|
|
29
40
|
className = undefined,
|
|
@@ -33,8 +44,7 @@ const Badge = ({
|
|
|
33
44
|
children,
|
|
34
45
|
style
|
|
35
46
|
}) => {
|
|
36
|
-
|
|
37
|
-
const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;
|
|
47
|
+
const size = mapLegacySize[sizeProp] ?? sizeProp;
|
|
38
48
|
const classes = clsx('tw-badge', {
|
|
39
49
|
[`tw-badge-border-${border}`]: border,
|
|
40
50
|
[`tw-badge-${size}`]: size
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\n\n/**\n * @deprecated Use `
|
|
1
|
+
{"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n */\n size?: DeprecatedSizes | BadgeAssetsProps['size'];\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n 16: Size.SMALL,\n 24: Size.LARGE,\n // medium is no longer exists, so we map it to small\n [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n style,\n}: BadgeProps) => {\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes} style={style}>\n <div className=\"tw-badge__children\">{children}</div>\n <div className=\"tw-badge__content\">{badge}</div>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAMA,aAAa,GAAG;EACpB,EAAE,EAAEC,IAAI,CAACC,KAAK;EACd,EAAE,EAAED,IAAI,CAACE,KAAK;AACd;EACA,CAACC,MAAM,CAACH,IAAI,CAACI,MAAM,CAAC,GAAGJ,IAAI,CAACC,KAAAA;CAC7B,CAAA;AAED;AACA;AACA;;AAEG;AACGI,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGV,IAAI,CAACC,KAAK;EAC3BU,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvBC,QAAQ;AACRC,EAAAA,KAAAA;AAAK,CACM,KAAI;AACf,EAAA,MAAMP,IAAI,GAAGV,aAAa,CAACW,QAAQ,CAAC,IAAIA,QAAQ,CAAA;AAChD,EAAA,MAAMO,OAAO,GAAWC,IAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBP,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYL,SAAU;AAACP,IAAAA,SAAS,EAAEU,OAAQ;AAACD,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,gBAC3DK,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;KAAc,CACnD,eAAAK,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAAET,KAAAA;AAAK,KAAM,CACjD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -5,29 +5,6 @@ var art = require('@wise/art');
|
|
|
5
5
|
var Circle = require('../common/circle/Circle.js');
|
|
6
6
|
var Image = require('../image/Image.js');
|
|
7
7
|
var icons = require('@transferwise/icons');
|
|
8
|
-
require('../common/theme.js');
|
|
9
|
-
require('../common/direction.js');
|
|
10
|
-
require('../common/propsValues/control.js');
|
|
11
|
-
require('../common/propsValues/breakpoint.js');
|
|
12
|
-
var size = require('../common/propsValues/size.js');
|
|
13
|
-
require('../common/propsValues/typography.js');
|
|
14
|
-
require('../common/propsValues/width.js');
|
|
15
|
-
require('../common/propsValues/type.js');
|
|
16
|
-
require('../common/propsValues/dateMode.js');
|
|
17
|
-
require('../common/propsValues/monthFormat.js');
|
|
18
|
-
require('../common/propsValues/position.js');
|
|
19
|
-
require('../common/propsValues/layouts.js');
|
|
20
|
-
require('../common/propsValues/status.js');
|
|
21
|
-
require('../common/propsValues/sentiment.js');
|
|
22
|
-
require('../common/propsValues/profileType.js');
|
|
23
|
-
require('../common/propsValues/variant.js');
|
|
24
|
-
require('../common/propsValues/scroll.js');
|
|
25
|
-
require('../common/propsValues/markdownNodeType.js');
|
|
26
|
-
require('../common/fileType.js');
|
|
27
|
-
require('clsx');
|
|
28
|
-
require('react');
|
|
29
|
-
require('react-intl');
|
|
30
|
-
require('../common/closeButton/CloseButton.messages.js');
|
|
31
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
32
9
|
|
|
33
10
|
function BadgeAssets({
|
|
@@ -36,30 +13,28 @@ function BadgeAssets({
|
|
|
36
13
|
imgSrc,
|
|
37
14
|
icon = null,
|
|
38
15
|
type = 'action',
|
|
39
|
-
size
|
|
16
|
+
size
|
|
40
17
|
}) {
|
|
41
|
-
// map to old size (sm, lg) to new ones (numeric)
|
|
42
|
-
const size$1 = sizeProp === size.Size.LARGE ? 24 : 16;
|
|
43
18
|
if (status) {
|
|
44
19
|
return /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
|
|
45
20
|
sentiment: status,
|
|
46
|
-
size: size
|
|
21
|
+
size: size
|
|
47
22
|
});
|
|
48
23
|
}
|
|
49
24
|
if (flagCode) {
|
|
50
25
|
return /*#__PURE__*/jsxRuntime.jsx(Circle, {
|
|
51
|
-
size: size
|
|
26
|
+
size: size,
|
|
52
27
|
fixedSize: true,
|
|
53
28
|
enableBorder: true,
|
|
54
29
|
children: /*#__PURE__*/jsxRuntime.jsx(art.Flag, {
|
|
55
30
|
code: flagCode,
|
|
56
|
-
intrinsicSize: size
|
|
31
|
+
intrinsicSize: size
|
|
57
32
|
})
|
|
58
33
|
});
|
|
59
34
|
}
|
|
60
35
|
if (imgSrc) {
|
|
61
36
|
return /*#__PURE__*/jsxRuntime.jsx(Circle, {
|
|
62
|
-
size: size
|
|
37
|
+
size: size,
|
|
63
38
|
fixedSize: true,
|
|
64
39
|
enableBorder: true,
|
|
65
40
|
children: /*#__PURE__*/jsxRuntime.jsx(Image.default, {
|
|
@@ -70,7 +45,7 @@ function BadgeAssets({
|
|
|
70
45
|
}
|
|
71
46
|
if (['action', 'reference'].includes(type)) {
|
|
72
47
|
return /*#__PURE__*/jsxRuntime.jsx(Circle, {
|
|
73
|
-
size: size
|
|
48
|
+
size: size,
|
|
74
49
|
fixedSize: true,
|
|
75
50
|
style: {
|
|
76
51
|
backgroundColor: type === 'action' ? 'var(--color-interactive-accent)' : 'var(--color-background-neutral)'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeAssets.js","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import StatusIcon, { StatusIconProps } from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport Circle
|
|
1
|
+
{"version":3,"file":"BadgeAssets.js","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import StatusIcon, { StatusIconProps } from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { Plus } from '@transferwise/icons';\n\nexport type Props = {\n status?: StatusIconProps['sentiment'];\n flagCode?: string;\n imgSrc?: string;\n icon?: React.ReactNode;\n type?: 'action' | 'reference';\n size?: 16 | 24;\n};\n\n/**\n * Common pre-built badge variants.\n */\nexport default function BadgeAssets({\n status,\n flagCode,\n imgSrc,\n icon = null,\n type = 'action',\n size,\n}: Props) {\n if (status) {\n return <StatusIcon sentiment={status} size={size} />;\n }\n if (flagCode) {\n return (\n <Circle size={size} fixedSize enableBorder>\n <Flag code={flagCode} intrinsicSize={size} />\n </Circle>\n );\n }\n if (imgSrc) {\n return (\n <Circle size={size} fixedSize enableBorder>\n <Image src={imgSrc} alt=\"\" />\n </Circle>\n );\n }\n if (['action', 'reference'].includes(type)) {\n return (\n <Circle\n size={size}\n fixedSize\n style={{\n backgroundColor:\n type === 'action'\n ? 'var(--color-interactive-accent)'\n : 'var(--color-background-neutral)',\n }}\n >\n {icon ?? <Plus />}\n </Circle>\n );\n }\n return null;\n}\n"],"names":["BadgeAssets","status","flagCode","imgSrc","icon","type","size","_jsx","StatusIcon","sentiment","Circle","fixedSize","enableBorder","children","Flag","code","intrinsicSize","Image","src","alt","includes","style","backgroundColor","Plus"],"mappings":";;;;;;;;;AAkBwB,SAAAA,WAAWA,CAAC;EAClCC,MAAM;EACNC,QAAQ;EACRC,MAAM;AACNC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA,IAAAA;AACM,CAAA,EAAA;AACN,EAAA,IAAIL,MAAM,EAAE;IACV,oBAAOM,cAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAER,MAAO;AAACK,MAAAA,IAAI,EAAEA,IAAAA;AAAK,MAAG,CAAA;AACtD,GAAA;AACA,EAAA,IAAIJ,QAAQ,EAAE;IACZ,oBACEK,cAAA,CAACG,MAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,cAAA,CAACO,QAAI,EAAA;AAACC,QAAAA,IAAI,EAAEb,QAAS;AAACc,QAAAA,aAAa,EAAEV,IAAAA;OACvC,CAAA;AAAA,KAAQ,CAAC,CAAA;AAEb,GAAA;AACA,EAAA,IAAIH,MAAM,EAAE;IACV,oBACEI,cAAA,CAACG,MAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,cAAA,CAACU,aAAK,EAAA;AAACC,QAAAA,GAAG,EAAEf,MAAO;AAACgB,QAAAA,GAAG,EAAC,EAAA;OAC1B,CAAA;AAAA,KAAQ,CAAC,CAAA;AAEb,GAAA;EACA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACf,IAAI,CAAC,EAAE;IAC1C,oBACEE,cAAA,CAACG,MAAM,EAAA;AACLJ,MAAAA,IAAI,EAAEA,IAAK;MACXK,SAAS,EAAA,IAAA;AACTU,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EACbjB,IAAI,KAAK,QAAQ,GACb,iCAAiC,GACjC,iCAAA;OACN;AAAAQ,MAAAA,QAAA,EAEDT,IAAI,iBAAIG,cAAA,CAACgB,UAAI;AAAG,KACX,CAAC,CAAA;AAEb,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb;;;;"}
|
|
@@ -3,29 +3,6 @@ import { Flag } from '@wise/art';
|
|
|
3
3
|
import Circle from '../common/circle/Circle.mjs';
|
|
4
4
|
import Image from '../image/Image.mjs';
|
|
5
5
|
import { Plus } from '@transferwise/icons';
|
|
6
|
-
import '../common/theme.mjs';
|
|
7
|
-
import '../common/direction.mjs';
|
|
8
|
-
import '../common/propsValues/control.mjs';
|
|
9
|
-
import '../common/propsValues/breakpoint.mjs';
|
|
10
|
-
import { Size } from '../common/propsValues/size.mjs';
|
|
11
|
-
import '../common/propsValues/typography.mjs';
|
|
12
|
-
import '../common/propsValues/width.mjs';
|
|
13
|
-
import '../common/propsValues/type.mjs';
|
|
14
|
-
import '../common/propsValues/dateMode.mjs';
|
|
15
|
-
import '../common/propsValues/monthFormat.mjs';
|
|
16
|
-
import '../common/propsValues/position.mjs';
|
|
17
|
-
import '../common/propsValues/layouts.mjs';
|
|
18
|
-
import '../common/propsValues/status.mjs';
|
|
19
|
-
import '../common/propsValues/sentiment.mjs';
|
|
20
|
-
import '../common/propsValues/profileType.mjs';
|
|
21
|
-
import '../common/propsValues/variant.mjs';
|
|
22
|
-
import '../common/propsValues/scroll.mjs';
|
|
23
|
-
import '../common/propsValues/markdownNodeType.mjs';
|
|
24
|
-
import '../common/fileType.mjs';
|
|
25
|
-
import 'clsx';
|
|
26
|
-
import 'react';
|
|
27
|
-
import 'react-intl';
|
|
28
|
-
import '../common/closeButton/CloseButton.messages.mjs';
|
|
29
6
|
import { jsx } from 'react/jsx-runtime';
|
|
30
7
|
|
|
31
8
|
function BadgeAssets({
|
|
@@ -34,10 +11,8 @@ function BadgeAssets({
|
|
|
34
11
|
imgSrc,
|
|
35
12
|
icon = null,
|
|
36
13
|
type = 'action',
|
|
37
|
-
size
|
|
14
|
+
size
|
|
38
15
|
}) {
|
|
39
|
-
// map to old size (sm, lg) to new ones (numeric)
|
|
40
|
-
const size = sizeProp === Size.LARGE ? 24 : 16;
|
|
41
16
|
if (status) {
|
|
42
17
|
return /*#__PURE__*/jsx(StatusIcon, {
|
|
43
18
|
sentiment: status,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeAssets.mjs","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import StatusIcon, { StatusIconProps } from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport Circle
|
|
1
|
+
{"version":3,"file":"BadgeAssets.mjs","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import StatusIcon, { StatusIconProps } from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { Plus } from '@transferwise/icons';\n\nexport type Props = {\n status?: StatusIconProps['sentiment'];\n flagCode?: string;\n imgSrc?: string;\n icon?: React.ReactNode;\n type?: 'action' | 'reference';\n size?: 16 | 24;\n};\n\n/**\n * Common pre-built badge variants.\n */\nexport default function BadgeAssets({\n status,\n flagCode,\n imgSrc,\n icon = null,\n type = 'action',\n size,\n}: Props) {\n if (status) {\n return <StatusIcon sentiment={status} size={size} />;\n }\n if (flagCode) {\n return (\n <Circle size={size} fixedSize enableBorder>\n <Flag code={flagCode} intrinsicSize={size} />\n </Circle>\n );\n }\n if (imgSrc) {\n return (\n <Circle size={size} fixedSize enableBorder>\n <Image src={imgSrc} alt=\"\" />\n </Circle>\n );\n }\n if (['action', 'reference'].includes(type)) {\n return (\n <Circle\n size={size}\n fixedSize\n style={{\n backgroundColor:\n type === 'action'\n ? 'var(--color-interactive-accent)'\n : 'var(--color-background-neutral)',\n }}\n >\n {icon ?? <Plus />}\n </Circle>\n );\n }\n return null;\n}\n"],"names":["BadgeAssets","status","flagCode","imgSrc","icon","type","size","_jsx","StatusIcon","sentiment","Circle","fixedSize","enableBorder","children","Flag","code","intrinsicSize","Image","src","alt","includes","style","backgroundColor","Plus"],"mappings":";;;;;;;AAkBwB,SAAAA,WAAWA,CAAC;EAClCC,MAAM;EACNC,QAAQ;EACRC,MAAM;AACNC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA,IAAAA;AACM,CAAA,EAAA;AACN,EAAA,IAAIL,MAAM,EAAE;IACV,oBAAOM,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAER,MAAO;AAACK,MAAAA,IAAI,EAAEA,IAAAA;AAAK,MAAG,CAAA;AACtD,GAAA;AACA,EAAA,IAAIJ,QAAQ,EAAE;IACZ,oBACEK,GAAA,CAACG,MAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,GAAA,CAACO,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEb,QAAS;AAACc,QAAAA,aAAa,EAAEV,IAAAA;OACvC,CAAA;AAAA,KAAQ,CAAC,CAAA;AAEb,GAAA;AACA,EAAA,IAAIH,MAAM,EAAE;IACV,oBACEI,GAAA,CAACG,MAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,GAAA,CAACU,KAAK,EAAA;AAACC,QAAAA,GAAG,EAAEf,MAAO;AAACgB,QAAAA,GAAG,EAAC,EAAA;OAC1B,CAAA;AAAA,KAAQ,CAAC,CAAA;AAEb,GAAA;EACA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACf,IAAI,CAAC,EAAE;IAC1C,oBACEE,GAAA,CAACG,MAAM,EAAA;AACLJ,MAAAA,IAAI,EAAEA,IAAK;MACXK,SAAS,EAAA,IAAA;AACTU,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EACbjB,IAAI,KAAK,QAAQ,GACb,iCAAiC,GACjC,iCAAA;OACN;AAAAQ,MAAAA,QAAA,EAEDT,IAAI,iBAAIG,GAAA,CAACgB,IAAI;AAAG,KACX,CAAC,CAAA;AAEb,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb;;;;"}
|