@transferwise/components 46.82.1 → 46.83.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/avatarLayout/AvatarLayout.js +111 -0
- package/build/avatarLayout/AvatarLayout.js.map +1 -0
- package/build/avatarLayout/AvatarLayout.mjs +109 -0
- package/build/avatarLayout/AvatarLayout.mjs.map +1 -0
- package/build/button/Button.js +1 -1
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +1 -1
- package/build/button/Button.mjs.map +1 -1
- package/build/i18n/commonMessages/Button.messages.js.map +1 -0
- package/build/i18n/commonMessages/Button.messages.mjs.map +1 -0
- package/build/i18n/es.json +5 -0
- package/build/i18n/es.json.js +5 -0
- package/build/i18n/es.json.js.map +1 -1
- package/build/i18n/es.json.mjs +5 -0
- package/build/i18n/es.json.mjs.map +1 -1
- package/build/i18n/pl.json +5 -0
- package/build/i18n/pl.json.js +5 -0
- package/build/i18n/pl.json.js.map +1 -1
- package/build/i18n/pl.json.mjs +5 -0
- package/build/i18n/pl.json.mjs.map +1 -1
- package/build/i18n/ro.json +5 -0
- package/build/i18n/ro.json.js +5 -0
- package/build/i18n/ro.json.js.map +1 -1
- package/build/i18n/ro.json.mjs +5 -0
- package/build/i18n/ro.json.mjs.map +1 -1
- package/build/index.js +2 -0
- package/build/index.js.map +1 -1
- package/build/index.mjs +1 -0
- package/build/index.mjs.map +1 -1
- package/build/main.css +30 -0
- package/build/styles/avatarLayout/AvatarLayout.css +30 -0
- package/build/styles/main.css +30 -0
- package/build/types/avatarLayout/AvatarLayout.d.ts +11 -0
- package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -0
- package/build/types/avatarLayout/index.d.ts +3 -0
- package/build/types/avatarLayout/index.d.ts.map +1 -0
- package/build/types/i18n/commonMessages/Button.messages.d.ts.map +1 -0
- package/build/types/index.d.ts +2 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/index.d.ts +3 -0
- package/build/types/primitives/PrimitiveAnchor/index.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts +14 -0
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +21 -0
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveAnchor/src/index.d.ts +3 -0
- package/build/types/primitives/PrimitiveAnchor/src/index.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveButton/index.d.ts +3 -0
- package/build/types/primitives/PrimitiveButton/index.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts +14 -0
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts +21 -0
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveButton/src/index.d.ts +3 -0
- package/build/types/primitives/PrimitiveButton/src/index.d.ts.map +1 -0
- package/build/types/primitives/index.d.ts +6 -0
- package/build/types/primitives/index.d.ts.map +1 -0
- package/build/types/primitives/types.d.ts +34 -0
- package/build/types/primitives/types.d.ts.map +1 -0
- package/build/types/test-utils/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/avatarLayout/AvatarLayout.css +30 -0
- package/src/avatarLayout/AvatarLayout.less +39 -0
- package/src/avatarLayout/AvatarLayout.story.tsx +277 -0
- package/src/avatarLayout/AvatarLayout.tsx +91 -0
- package/src/avatarLayout/index.ts +2 -0
- package/src/button/Button.spec.tsx +1 -1
- package/src/button/Button.tsx +1 -1
- package/src/i18n/es.json +5 -0
- package/src/i18n/pl.json +5 -0
- package/src/i18n/ro.json +5 -0
- package/src/index.ts +2 -0
- package/src/main.css +30 -0
- package/src/main.less +1 -0
- package/src/primitives/PrimitiveAnchor/index.ts +2 -0
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +122 -0
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +28 -0
- package/src/primitives/PrimitiveAnchor/src/index.ts +6 -0
- package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +77 -0
- package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +169 -0
- package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +95 -0
- package/src/primitives/PrimitiveButton/index.ts +2 -0
- package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +131 -0
- package/src/primitives/PrimitiveButton/src/PrimitiveButton.types.ts +28 -0
- package/src/primitives/PrimitiveButton/src/index.ts +6 -0
- package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +73 -0
- package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +230 -0
- package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +114 -0
- package/src/primitives/index.ts +14 -0
- package/src/primitives/types.ts +40 -0
- package/src/test-utils/index.tsx +1 -0
- package/build/button/Button.messages.js.map +0 -1
- package/build/button/Button.messages.mjs.map +0 -1
- package/build/types/button/Button.messages.d.ts.map +0 -1
- /package/build/{button → i18n/commonMessages}/Button.messages.js +0 -0
- /package/build/{button → i18n/commonMessages}/Button.messages.mjs +0 -0
- /package/build/types/{button → i18n/commonMessages}/Button.messages.d.ts +0 -0
- /package/src/{button → i18n/commonMessages}/Button.messages.ts +0 -0
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var clsx = require('clsx');
|
|
4
|
+
var AvatarView = require('../avatarView/AvatarView.js');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
|
|
7
|
+
function AvatarLayout({
|
|
8
|
+
avatars = [],
|
|
9
|
+
orientation = 'horizontal',
|
|
10
|
+
size = 48,
|
|
11
|
+
className,
|
|
12
|
+
interactive,
|
|
13
|
+
...restProps
|
|
14
|
+
}) {
|
|
15
|
+
const isDiagonal = orientation === 'diagonal';
|
|
16
|
+
const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;
|
|
17
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
18
|
+
className: clsx.clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className),
|
|
19
|
+
style: {
|
|
20
|
+
// @ts-expect-error CSS custom props allowed
|
|
21
|
+
'--np-avatar-layout-size': `${size}px`,
|
|
22
|
+
'--np-avatar-size': `${avatarSize}px`,
|
|
23
|
+
'--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`
|
|
24
|
+
},
|
|
25
|
+
...restProps,
|
|
26
|
+
children: avatars.length < 2 || size === 16 && isDiagonal ? null : avatars.map(({
|
|
27
|
+
asset,
|
|
28
|
+
style,
|
|
29
|
+
...avatar
|
|
30
|
+
}, index) => /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
31
|
+
className: clsx.clsx({
|
|
32
|
+
[`np-avatar-layout-${orientation}-child`]: index !== 0
|
|
33
|
+
}, {
|
|
34
|
+
[`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1
|
|
35
|
+
}),
|
|
36
|
+
children: /*#__PURE__*/jsxRuntime.jsx(AvatarView, {
|
|
37
|
+
...avatar,
|
|
38
|
+
size: avatarSize,
|
|
39
|
+
style: {
|
|
40
|
+
...(isDiagonal && {
|
|
41
|
+
'--circle-size': `${avatarSize}px`,
|
|
42
|
+
'--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,
|
|
43
|
+
'--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`
|
|
44
|
+
}),
|
|
45
|
+
...style
|
|
46
|
+
},
|
|
47
|
+
interactive: interactive,
|
|
48
|
+
children: asset
|
|
49
|
+
})
|
|
50
|
+
}, index))
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
/** Diagonal layout have custom sizes for avatar, font and icon */
|
|
54
|
+
const DIAGONAL_LAYOUT_STYLE_CONFIG = {
|
|
55
|
+
// Diagonal layout doesn't support 16 size
|
|
56
|
+
16: {
|
|
57
|
+
avatarSize: undefined,
|
|
58
|
+
offset: undefined,
|
|
59
|
+
fontSize: undefined,
|
|
60
|
+
iconSize: undefined
|
|
61
|
+
},
|
|
62
|
+
24: {
|
|
63
|
+
avatarSize: 15,
|
|
64
|
+
offset: 2.5,
|
|
65
|
+
fontSize: 8,
|
|
66
|
+
iconSize: 11.25
|
|
67
|
+
},
|
|
68
|
+
32: {
|
|
69
|
+
avatarSize: 20,
|
|
70
|
+
offset: 2.5,
|
|
71
|
+
fontSize: 12,
|
|
72
|
+
iconSize: 15
|
|
73
|
+
},
|
|
74
|
+
40: {
|
|
75
|
+
avatarSize: 24,
|
|
76
|
+
offset: 4.5,
|
|
77
|
+
fontSize: 12,
|
|
78
|
+
iconSize: 18
|
|
79
|
+
},
|
|
80
|
+
48: {
|
|
81
|
+
avatarSize: 30,
|
|
82
|
+
offset: 3.5,
|
|
83
|
+
fontSize: 14,
|
|
84
|
+
iconSize: 16.87
|
|
85
|
+
},
|
|
86
|
+
56: {
|
|
87
|
+
avatarSize: 34,
|
|
88
|
+
offset: 5,
|
|
89
|
+
fontSize: 14,
|
|
90
|
+
iconSize: 19.12
|
|
91
|
+
},
|
|
92
|
+
72: {
|
|
93
|
+
avatarSize: 44,
|
|
94
|
+
offset: 6,
|
|
95
|
+
fontSize: 22,
|
|
96
|
+
iconSize: 22
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
/** Horizontal layout have custom offset between avatars */
|
|
100
|
+
const HORIZONTAL_LAYOUT_OFFSET = {
|
|
101
|
+
16: 2,
|
|
102
|
+
24: 2,
|
|
103
|
+
32: 4,
|
|
104
|
+
40: 4,
|
|
105
|
+
48: 4,
|
|
106
|
+
56: 5,
|
|
107
|
+
72: 5
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
module.exports = AvatarLayout;
|
|
111
|
+
//# sourceMappingURL=AvatarLayout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarLayout.js","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n AvatarViewProps,\n 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n avatars: SingleAvatarType[];\n orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n AvatarViewProps,\n 'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n avatars = [],\n orientation = 'horizontal',\n size = 48,\n className,\n interactive,\n ...restProps\n}: Props) {\n const isDiagonal = orientation === 'diagonal';\n const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n return (\n <div\n className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n style={{\n // @ts-expect-error CSS custom props allowed\n '--np-avatar-layout-size': `${size}px`,\n '--np-avatar-size': `${avatarSize}px`,\n '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n }}\n {...restProps}\n >\n {avatars.length < 2 || (size === 16 && isDiagonal)\n ? null\n : avatars.map(({ asset, style, ...avatar }, index) => (\n <div\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n className={clsx(\n { [`np-avatar-layout-${orientation}-child`]: index !== 0 },\n { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },\n )}\n >\n <AvatarView\n {...avatar}\n size={avatarSize as Props['size']}\n style={{\n ...(isDiagonal && {\n '--circle-size': `${avatarSize}px`,\n '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n }),\n ...style,\n }}\n interactive={interactive}\n >\n {asset}\n </AvatarView>\n </div>\n ))}\n </div>\n );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n // Diagonal layout doesn't support 16 size\n 16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n 24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n 32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n 40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n 48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n 56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n 72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n 16: 2,\n 24: 2,\n 32: 4,\n 40: 4,\n 48: 4,\n 56: 5,\n 72: 5,\n};\n"],"names":["AvatarLayout","avatars","orientation","size","className","interactive","restProps","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","_jsx","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","children","length","map","asset","avatar","index","AvatarView","iconSize","fontSize","undefined"],"mappings":"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"}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { clsx } from 'clsx';
|
|
2
|
+
import AvatarView from '../avatarView/AvatarView.mjs';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
function AvatarLayout({
|
|
6
|
+
avatars = [],
|
|
7
|
+
orientation = 'horizontal',
|
|
8
|
+
size = 48,
|
|
9
|
+
className,
|
|
10
|
+
interactive,
|
|
11
|
+
...restProps
|
|
12
|
+
}) {
|
|
13
|
+
const isDiagonal = orientation === 'diagonal';
|
|
14
|
+
const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;
|
|
15
|
+
return /*#__PURE__*/jsx("div", {
|
|
16
|
+
className: clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className),
|
|
17
|
+
style: {
|
|
18
|
+
// @ts-expect-error CSS custom props allowed
|
|
19
|
+
'--np-avatar-layout-size': `${size}px`,
|
|
20
|
+
'--np-avatar-size': `${avatarSize}px`,
|
|
21
|
+
'--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`
|
|
22
|
+
},
|
|
23
|
+
...restProps,
|
|
24
|
+
children: avatars.length < 2 || size === 16 && isDiagonal ? null : avatars.map(({
|
|
25
|
+
asset,
|
|
26
|
+
style,
|
|
27
|
+
...avatar
|
|
28
|
+
}, index) => /*#__PURE__*/jsx("div", {
|
|
29
|
+
className: clsx({
|
|
30
|
+
[`np-avatar-layout-${orientation}-child`]: index !== 0
|
|
31
|
+
}, {
|
|
32
|
+
[`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1
|
|
33
|
+
}),
|
|
34
|
+
children: /*#__PURE__*/jsx(AvatarView, {
|
|
35
|
+
...avatar,
|
|
36
|
+
size: avatarSize,
|
|
37
|
+
style: {
|
|
38
|
+
...(isDiagonal && {
|
|
39
|
+
'--circle-size': `${avatarSize}px`,
|
|
40
|
+
'--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,
|
|
41
|
+
'--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`
|
|
42
|
+
}),
|
|
43
|
+
...style
|
|
44
|
+
},
|
|
45
|
+
interactive: interactive,
|
|
46
|
+
children: asset
|
|
47
|
+
})
|
|
48
|
+
}, index))
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
/** Diagonal layout have custom sizes for avatar, font and icon */
|
|
52
|
+
const DIAGONAL_LAYOUT_STYLE_CONFIG = {
|
|
53
|
+
// Diagonal layout doesn't support 16 size
|
|
54
|
+
16: {
|
|
55
|
+
avatarSize: undefined,
|
|
56
|
+
offset: undefined,
|
|
57
|
+
fontSize: undefined,
|
|
58
|
+
iconSize: undefined
|
|
59
|
+
},
|
|
60
|
+
24: {
|
|
61
|
+
avatarSize: 15,
|
|
62
|
+
offset: 2.5,
|
|
63
|
+
fontSize: 8,
|
|
64
|
+
iconSize: 11.25
|
|
65
|
+
},
|
|
66
|
+
32: {
|
|
67
|
+
avatarSize: 20,
|
|
68
|
+
offset: 2.5,
|
|
69
|
+
fontSize: 12,
|
|
70
|
+
iconSize: 15
|
|
71
|
+
},
|
|
72
|
+
40: {
|
|
73
|
+
avatarSize: 24,
|
|
74
|
+
offset: 4.5,
|
|
75
|
+
fontSize: 12,
|
|
76
|
+
iconSize: 18
|
|
77
|
+
},
|
|
78
|
+
48: {
|
|
79
|
+
avatarSize: 30,
|
|
80
|
+
offset: 3.5,
|
|
81
|
+
fontSize: 14,
|
|
82
|
+
iconSize: 16.87
|
|
83
|
+
},
|
|
84
|
+
56: {
|
|
85
|
+
avatarSize: 34,
|
|
86
|
+
offset: 5,
|
|
87
|
+
fontSize: 14,
|
|
88
|
+
iconSize: 19.12
|
|
89
|
+
},
|
|
90
|
+
72: {
|
|
91
|
+
avatarSize: 44,
|
|
92
|
+
offset: 6,
|
|
93
|
+
fontSize: 22,
|
|
94
|
+
iconSize: 22
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
/** Horizontal layout have custom offset between avatars */
|
|
98
|
+
const HORIZONTAL_LAYOUT_OFFSET = {
|
|
99
|
+
16: 2,
|
|
100
|
+
24: 2,
|
|
101
|
+
32: 4,
|
|
102
|
+
40: 4,
|
|
103
|
+
48: 4,
|
|
104
|
+
56: 5,
|
|
105
|
+
72: 5
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
export { AvatarLayout as default };
|
|
109
|
+
//# sourceMappingURL=AvatarLayout.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarLayout.mjs","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n AvatarViewProps,\n 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n avatars: SingleAvatarType[];\n orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n AvatarViewProps,\n 'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n avatars = [],\n orientation = 'horizontal',\n size = 48,\n className,\n interactive,\n ...restProps\n}: Props) {\n const isDiagonal = orientation === 'diagonal';\n const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n return (\n <div\n className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n style={{\n // @ts-expect-error CSS custom props allowed\n '--np-avatar-layout-size': `${size}px`,\n '--np-avatar-size': `${avatarSize}px`,\n '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n }}\n {...restProps}\n >\n {avatars.length < 2 || (size === 16 && isDiagonal)\n ? null\n : avatars.map(({ asset, style, ...avatar }, index) => (\n <div\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n className={clsx(\n { [`np-avatar-layout-${orientation}-child`]: index !== 0 },\n { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },\n )}\n >\n <AvatarView\n {...avatar}\n size={avatarSize as Props['size']}\n style={{\n ...(isDiagonal && {\n '--circle-size': `${avatarSize}px`,\n '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n }),\n ...style,\n }}\n interactive={interactive}\n >\n {asset}\n </AvatarView>\n </div>\n ))}\n </div>\n );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n // Diagonal layout doesn't support 16 size\n 16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n 24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n 32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n 40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n 48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n 56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n 72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n 16: 2,\n 24: 2,\n 32: 4,\n 40: 4,\n 48: 4,\n 56: 5,\n 72: 5,\n};\n"],"names":["AvatarLayout","avatars","orientation","size","className","interactive","restProps","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","_jsx","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","children","length","map","asset","avatar","index","AvatarView","iconSize","fontSize","undefined"],"mappings":"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"}
|
package/build/button/Button.js
CHANGED
|
@@ -26,7 +26,7 @@ require('@transferwise/icons');
|
|
|
26
26
|
require('../common/closeButton/CloseButton.messages.js');
|
|
27
27
|
var jsxRuntime = require('react/jsx-runtime');
|
|
28
28
|
var ProcessIndicator = require('../processIndicator/ProcessIndicator.js');
|
|
29
|
-
var Button_messages = require('
|
|
29
|
+
var Button_messages = require('../i18n/commonMessages/Button.messages.js');
|
|
30
30
|
var classMap = require('./classMap.js');
|
|
31
31
|
var legacyUtils = require('./legacyUtils/legacyUtils.js');
|
|
32
32
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\nexport type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: Props,\n reference,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: Props['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={reference}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
|
package/build/button/Button.mjs
CHANGED
|
@@ -24,7 +24,7 @@ import '@transferwise/icons';
|
|
|
24
24
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
25
25
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
26
26
|
import ProcessIndicator from '../processIndicator/ProcessIndicator.mjs';
|
|
27
|
-
import messages from '
|
|
27
|
+
import messages from '../i18n/commonMessages/Button.messages.mjs';
|
|
28
28
|
import { typeClassMap, priorityClassMap } from './classMap.mjs';
|
|
29
29
|
import { logDeprecationNotices, establishNewType, establishNewPriority } from './legacyUtils/legacyUtils.mjs';
|
|
30
30
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\nexport type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: Props,\n reference,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: Props['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={reference}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.messages.js","sources":["../../../src/i18n/commonMessages/Button.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n loadingAriaLabel: {\n id: 'neptune.Button.loadingAriaLabel',\n defaultMessage: 'loading',\n description: 'Description of button while loading',\n },\n});\n"],"names":["defineMessages","loadingAriaLabel","id"],"mappings":";;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,gBAAgB,EAAE;IAChBC,EAAE,EAAA,iCAAA;AAGH,GAAA;AACF,CAAA,CAAC;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.messages.mjs","sources":["../../../src/i18n/commonMessages/Button.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n loadingAriaLabel: {\n id: 'neptune.Button.loadingAriaLabel',\n defaultMessage: 'loading',\n description: 'Description of button while loading',\n },\n});\n"],"names":["defineMessages","loadingAriaLabel","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,gBAAgB,EAAE;IAChBC,EAAE,EAAA,iCAAA;AAGH,GAAA;AACF,CAAA,CAAC;;;;"}
|
package/build/i18n/es.json
CHANGED
|
@@ -35,6 +35,11 @@
|
|
|
35
35
|
"neptune.Summary.statusDone": "Apartado listo",
|
|
36
36
|
"neptune.Summary.statusNotDone": "Apartado a completar",
|
|
37
37
|
"neptune.Summary.statusPending": "Apartado pendiente",
|
|
38
|
+
"neptune.Table.actionHeader": "Acción",
|
|
39
|
+
"neptune.Table.emptyData": "No se han encontrado resultados",
|
|
40
|
+
"neptune.Table.loaded": "Los datos de la tabla se han cargado",
|
|
41
|
+
"neptune.Table.loading": "Los datos de la tabla se están cargando",
|
|
42
|
+
"neptune.Table.refreshPage": "Actualizar página",
|
|
38
43
|
"neptune.Upload.csButtonText": "¿Quieres subir otro archivo?",
|
|
39
44
|
"neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
|
|
40
45
|
"neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
|
package/build/i18n/es.json.js
CHANGED
|
@@ -37,6 +37,11 @@ var es = {
|
|
|
37
37
|
"neptune.Summary.statusDone": "Apartado listo",
|
|
38
38
|
"neptune.Summary.statusNotDone": "Apartado a completar",
|
|
39
39
|
"neptune.Summary.statusPending": "Apartado pendiente",
|
|
40
|
+
"neptune.Table.actionHeader": "Acción",
|
|
41
|
+
"neptune.Table.emptyData": "No se han encontrado resultados",
|
|
42
|
+
"neptune.Table.loaded": "Los datos de la tabla se han cargado",
|
|
43
|
+
"neptune.Table.loading": "Los datos de la tabla se están cargando",
|
|
44
|
+
"neptune.Table.refreshPage": "Actualizar página",
|
|
40
45
|
"neptune.Upload.csButtonText": "¿Quieres subir otro archivo?",
|
|
41
46
|
"neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
|
|
42
47
|
"neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"es.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"es.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/es.json.mjs
CHANGED
|
@@ -35,6 +35,11 @@ var es = {
|
|
|
35
35
|
"neptune.Summary.statusDone": "Apartado listo",
|
|
36
36
|
"neptune.Summary.statusNotDone": "Apartado a completar",
|
|
37
37
|
"neptune.Summary.statusPending": "Apartado pendiente",
|
|
38
|
+
"neptune.Table.actionHeader": "Acción",
|
|
39
|
+
"neptune.Table.emptyData": "No se han encontrado resultados",
|
|
40
|
+
"neptune.Table.loaded": "Los datos de la tabla se han cargado",
|
|
41
|
+
"neptune.Table.loading": "Los datos de la tabla se están cargando",
|
|
42
|
+
"neptune.Table.refreshPage": "Actualizar página",
|
|
38
43
|
"neptune.Upload.csButtonText": "¿Quieres subir otro archivo?",
|
|
39
44
|
"neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
|
|
40
45
|
"neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"es.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"es.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/pl.json
CHANGED
|
@@ -35,6 +35,11 @@
|
|
|
35
35
|
"neptune.Summary.statusDone": "Czynność wykonana",
|
|
36
36
|
"neptune.Summary.statusNotDone": "Czynność do wykonania",
|
|
37
37
|
"neptune.Summary.statusPending": "Czynność oczekująca",
|
|
38
|
+
"neptune.Table.actionHeader": "Akcja",
|
|
39
|
+
"neptune.Table.emptyData": "Nie znaleziono wyników",
|
|
40
|
+
"neptune.Table.loaded": "Wczytano dane tabeli",
|
|
41
|
+
"neptune.Table.loading": "Wczytywanie danych tabeli",
|
|
42
|
+
"neptune.Table.refreshPage": "Odśwież stronę",
|
|
38
43
|
"neptune.Upload.csButtonText": "Prześlij kolejny plik?",
|
|
39
44
|
"neptune.Upload.csFailureText": "Przesyłanie nie powiodło się. Proszę spróbować ponownie",
|
|
40
45
|
"neptune.Upload.csSuccessText": "Przesyłanie zakończone!",
|
package/build/i18n/pl.json.js
CHANGED
|
@@ -37,6 +37,11 @@ var pl = {
|
|
|
37
37
|
"neptune.Summary.statusDone": "Czynność wykonana",
|
|
38
38
|
"neptune.Summary.statusNotDone": "Czynność do wykonania",
|
|
39
39
|
"neptune.Summary.statusPending": "Czynność oczekująca",
|
|
40
|
+
"neptune.Table.actionHeader": "Akcja",
|
|
41
|
+
"neptune.Table.emptyData": "Nie znaleziono wyników",
|
|
42
|
+
"neptune.Table.loaded": "Wczytano dane tabeli",
|
|
43
|
+
"neptune.Table.loading": "Wczytywanie danych tabeli",
|
|
44
|
+
"neptune.Table.refreshPage": "Odśwież stronę",
|
|
40
45
|
"neptune.Upload.csButtonText": "Prześlij kolejny plik?",
|
|
41
46
|
"neptune.Upload.csFailureText": "Przesyłanie nie powiodło się. Proszę spróbować ponownie",
|
|
42
47
|
"neptune.Upload.csSuccessText": "Przesyłanie zakończone!",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pl.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pl.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/pl.json.mjs
CHANGED
|
@@ -35,6 +35,11 @@ var pl = {
|
|
|
35
35
|
"neptune.Summary.statusDone": "Czynność wykonana",
|
|
36
36
|
"neptune.Summary.statusNotDone": "Czynność do wykonania",
|
|
37
37
|
"neptune.Summary.statusPending": "Czynność oczekująca",
|
|
38
|
+
"neptune.Table.actionHeader": "Akcja",
|
|
39
|
+
"neptune.Table.emptyData": "Nie znaleziono wyników",
|
|
40
|
+
"neptune.Table.loaded": "Wczytano dane tabeli",
|
|
41
|
+
"neptune.Table.loading": "Wczytywanie danych tabeli",
|
|
42
|
+
"neptune.Table.refreshPage": "Odśwież stronę",
|
|
38
43
|
"neptune.Upload.csButtonText": "Prześlij kolejny plik?",
|
|
39
44
|
"neptune.Upload.csFailureText": "Przesyłanie nie powiodło się. Proszę spróbować ponownie",
|
|
40
45
|
"neptune.Upload.csSuccessText": "Przesyłanie zakończone!",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pl.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pl.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/ro.json
CHANGED
|
@@ -35,6 +35,11 @@
|
|
|
35
35
|
"neptune.Summary.statusDone": "Finalizat",
|
|
36
36
|
"neptune.Summary.statusNotDone": "De făcut",
|
|
37
37
|
"neptune.Summary.statusPending": "În așteptare",
|
|
38
|
+
"neptune.Table.actionHeader": "Acțiune",
|
|
39
|
+
"neptune.Table.emptyData": "Nu s-a găsit niciun rezultat",
|
|
40
|
+
"neptune.Table.loaded": "Datele din tabel au fost încărcate",
|
|
41
|
+
"neptune.Table.loading": "Datele din tabel se încarcă",
|
|
42
|
+
"neptune.Table.refreshPage": "Reîncarcă pagina",
|
|
38
43
|
"neptune.Upload.csButtonText": "Încarci un alt fișier?",
|
|
39
44
|
"neptune.Upload.csFailureText": "Încărcare eșuată. Te rugăm să încerci din nou",
|
|
40
45
|
"neptune.Upload.csSuccessText": "Încărcare completă!",
|
package/build/i18n/ro.json.js
CHANGED
|
@@ -37,6 +37,11 @@ var ro = {
|
|
|
37
37
|
"neptune.Summary.statusDone": "Finalizat",
|
|
38
38
|
"neptune.Summary.statusNotDone": "De făcut",
|
|
39
39
|
"neptune.Summary.statusPending": "În așteptare",
|
|
40
|
+
"neptune.Table.actionHeader": "Acțiune",
|
|
41
|
+
"neptune.Table.emptyData": "Nu s-a găsit niciun rezultat",
|
|
42
|
+
"neptune.Table.loaded": "Datele din tabel au fost încărcate",
|
|
43
|
+
"neptune.Table.loading": "Datele din tabel se încarcă",
|
|
44
|
+
"neptune.Table.refreshPage": "Reîncarcă pagina",
|
|
40
45
|
"neptune.Upload.csButtonText": "Încarci un alt fișier?",
|
|
41
46
|
"neptune.Upload.csFailureText": "Încărcare eșuată. Te rugăm să încerci din nou",
|
|
42
47
|
"neptune.Upload.csSuccessText": "Încărcare completă!",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ro.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ro.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/ro.json.mjs
CHANGED
|
@@ -35,6 +35,11 @@ var ro = {
|
|
|
35
35
|
"neptune.Summary.statusDone": "Finalizat",
|
|
36
36
|
"neptune.Summary.statusNotDone": "De făcut",
|
|
37
37
|
"neptune.Summary.statusPending": "În așteptare",
|
|
38
|
+
"neptune.Table.actionHeader": "Acțiune",
|
|
39
|
+
"neptune.Table.emptyData": "Nu s-a găsit niciun rezultat",
|
|
40
|
+
"neptune.Table.loaded": "Datele din tabel au fost încărcate",
|
|
41
|
+
"neptune.Table.loading": "Datele din tabel se încarcă",
|
|
42
|
+
"neptune.Table.refreshPage": "Reîncarcă pagina",
|
|
38
43
|
"neptune.Upload.csButtonText": "Încarci un alt fișier?",
|
|
39
44
|
"neptune.Upload.csFailureText": "Încărcare eșuată. Te rugăm să încerci din nou",
|
|
40
45
|
"neptune.Upload.csSuccessText": "Încărcare completă!",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ro.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ro.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.js
CHANGED
|
@@ -9,6 +9,7 @@ var Alert = require('./alert/Alert.js');
|
|
|
9
9
|
var avatarTypes = require('./avatar/avatarTypes.js');
|
|
10
10
|
var Avatar = require('./avatar/Avatar.js');
|
|
11
11
|
var AvatarView = require('./avatarView/AvatarView.js');
|
|
12
|
+
var AvatarLayout = require('./avatarLayout/AvatarLayout.js');
|
|
12
13
|
var AvatarWrapper = require('./avatarWrapper/AvatarWrapper.js');
|
|
13
14
|
var Badge = require('./badge/Badge.js');
|
|
14
15
|
var StatusIcon = require('./statusIcon/StatusIcon.js');
|
|
@@ -152,6 +153,7 @@ Object.defineProperty(exports, "AvatarType", {
|
|
|
152
153
|
});
|
|
153
154
|
exports.Avatar = Avatar;
|
|
154
155
|
exports.AvatarView = AvatarView;
|
|
156
|
+
exports.avatarLayout = AvatarLayout;
|
|
155
157
|
exports.AvatarWrapper = AvatarWrapper;
|
|
156
158
|
exports.Badge = Badge;
|
|
157
159
|
exports.StatusIcon = StatusIcon;
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.mjs
CHANGED
|
@@ -7,6 +7,7 @@ export { default as Alert, AlertArrowPosition } from './alert/Alert.mjs';
|
|
|
7
7
|
export { AvatarType } from './avatar/avatarTypes.mjs';
|
|
8
8
|
export { default as Avatar } from './avatar/Avatar.mjs';
|
|
9
9
|
export { default as AvatarView } from './avatarView/AvatarView.mjs';
|
|
10
|
+
export { default as avatarLayout } from './avatarLayout/AvatarLayout.mjs';
|
|
10
11
|
export { default as AvatarWrapper } from './avatarWrapper/AvatarWrapper.mjs';
|
|
11
12
|
export { default as Badge } from './badge/Badge.mjs';
|
|
12
13
|
export { default as StatusIcon } from './statusIcon/StatusIcon.mjs';
|
package/build/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/main.css
CHANGED
|
@@ -505,6 +505,36 @@ div.critical-comms .critical-comms-body {
|
|
|
505
505
|
.np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
|
|
506
506
|
box-shadow: none;
|
|
507
507
|
}
|
|
508
|
+
.np-avatar-layout {
|
|
509
|
+
display: inline-flex;
|
|
510
|
+
--np-avatar-layout-size: 48px;
|
|
511
|
+
--np-avatar-size: 32px;
|
|
512
|
+
}
|
|
513
|
+
.np-avatar-layout-diagonal {
|
|
514
|
+
width: var(--np-avatar-layout-size);
|
|
515
|
+
height: var(--np-avatar-layout-size);
|
|
516
|
+
}
|
|
517
|
+
.np-avatar-layout-diagonal-mask {
|
|
518
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
519
|
+
mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
520
|
+
}
|
|
521
|
+
.np-avatar-layout-diagonal-child {
|
|
522
|
+
margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
|
|
523
|
+
margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
|
|
524
|
+
}
|
|
525
|
+
.np-avatar-layout-horizontal {
|
|
526
|
+
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset) - 2px);
|
|
527
|
+
height: var(--np-avatar-layout-size);
|
|
528
|
+
}
|
|
529
|
+
.np-avatar-layout-horizontal-mask {
|
|
530
|
+
-webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
531
|
+
mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
532
|
+
-webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
533
|
+
mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
534
|
+
}
|
|
535
|
+
.np-avatar-layout-horizontal-child {
|
|
536
|
+
margin-left: calc(var(--np-avatar-offset) * -1);
|
|
537
|
+
}
|
|
508
538
|
.tw-badge {
|
|
509
539
|
position: relative;
|
|
510
540
|
display: inline-block;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.np-avatar-layout {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
--np-avatar-layout-size: 48px;
|
|
4
|
+
--np-avatar-size: 32px;
|
|
5
|
+
}
|
|
6
|
+
.np-avatar-layout-diagonal {
|
|
7
|
+
width: var(--np-avatar-layout-size);
|
|
8
|
+
height: var(--np-avatar-layout-size);
|
|
9
|
+
}
|
|
10
|
+
.np-avatar-layout-diagonal-mask {
|
|
11
|
+
-webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
12
|
+
mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
13
|
+
}
|
|
14
|
+
.np-avatar-layout-diagonal-child {
|
|
15
|
+
margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
|
|
16
|
+
margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
|
|
17
|
+
}
|
|
18
|
+
.np-avatar-layout-horizontal {
|
|
19
|
+
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset) - 2px);
|
|
20
|
+
height: var(--np-avatar-layout-size);
|
|
21
|
+
}
|
|
22
|
+
.np-avatar-layout-horizontal-mask {
|
|
23
|
+
-webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
24
|
+
mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
25
|
+
-webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
26
|
+
mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
|
|
27
|
+
}
|
|
28
|
+
.np-avatar-layout-horizontal-child {
|
|
29
|
+
margin-left: calc(var(--np-avatar-offset) * -1);
|
|
30
|
+
}
|