@salutejs/sdds-serv 0.224.0-canary.1696.12711678920.0 → 0.224.0-canary.1699.12748300760.0
Sign up to get free protection for your applications and to get access to all the features.
- package/api/sdds-serv.api.md +61 -72
- package/components/Avatar/Avatar.config.d.ts +0 -18
- package/components/Avatar/Avatar.config.js +1 -19
- package/components/Avatar/Avatar.config.js.map +1 -1
- package/components/Avatar/Avatar.config_weecw4.css +7 -0
- package/components/Avatar/Avatar.css +7 -21
- package/components/Avatar/Avatar.d.ts +6 -138
- package/components/Badge/Badge.d.ts +48 -8
- package/components/Counter/Counter.d.ts +6 -1
- package/components/NumberInput/NumberInput.d.ts +4 -2
- package/emotion/cjs/components/Avatar/Avatar.config.js +5 -23
- package/emotion/cjs/components/Avatar/Avatar.stories.tsx +3 -120
- package/emotion/cjs/components/NumberInput/NumberInput.stories.tsx +1 -0
- package/emotion/es/components/Avatar/Avatar.config.js +5 -23
- package/emotion/es/components/Avatar/Avatar.stories.tsx +3 -120
- package/emotion/es/components/NumberInput/NumberInput.stories.tsx +1 -0
- package/es/components/Avatar/Avatar.config.js +1 -19
- package/es/components/Avatar/Avatar.config.js.map +1 -1
- package/es/components/Avatar/Avatar.config_weecw4.css +7 -0
- package/es/components/Avatar/Avatar.css +7 -21
- package/es/index.css +7 -21
- package/package.json +3 -3
- package/styled-components/cjs/components/Avatar/Avatar.config.js +5 -23
- package/styled-components/es/components/Avatar/Avatar.config.js +5 -23
- package/components/Avatar/Avatar.config_1buqzeq.css +0 -21
- package/es/components/Avatar/Avatar.config_1buqzeq.css +0 -21
|
@@ -33,6 +33,7 @@ export declare const NumberInput: import("react").FunctionComponent<import("@sal
|
|
|
33
33
|
min?: number | undefined;
|
|
34
34
|
max?: number | undefined;
|
|
35
35
|
step?: number | undefined;
|
|
36
|
+
precision?: number | undefined;
|
|
36
37
|
isLoading?: boolean | undefined;
|
|
37
38
|
loader?: import("react").ReactNode;
|
|
38
39
|
size?: string | undefined;
|
|
@@ -53,11 +54,12 @@ export declare const NumberInput: import("react").FunctionComponent<import("@sal
|
|
|
53
54
|
} & {
|
|
54
55
|
segmentation?: "clear" | undefined;
|
|
55
56
|
inputBackgroundType?: undefined;
|
|
56
|
-
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "
|
|
57
|
+
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "value"> & import("react").RefAttributes<HTMLInputElement>) | ({
|
|
57
58
|
value?: number | undefined;
|
|
58
59
|
min?: number | undefined;
|
|
59
60
|
max?: number | undefined;
|
|
60
61
|
step?: number | undefined;
|
|
62
|
+
precision?: number | undefined;
|
|
61
63
|
isLoading?: boolean | undefined;
|
|
62
64
|
loader?: import("react").ReactNode;
|
|
63
65
|
size?: string | undefined;
|
|
@@ -78,4 +80,4 @@ export declare const NumberInput: import("react").FunctionComponent<import("@sal
|
|
|
78
80
|
} & {
|
|
79
81
|
segmentation?: string | undefined;
|
|
80
82
|
inputBackgroundType?: string | undefined;
|
|
81
|
-
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "
|
|
83
|
+
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "value"> & import("react").RefAttributes<HTMLInputElement>))>;
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.config = void 0;
|
|
7
7
|
var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
|
|
8
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
9
9
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
10
10
|
var config = exports.config = {
|
|
11
11
|
defaults: {
|
|
@@ -18,32 +18,14 @@ var config = exports.config = {
|
|
|
18
18
|
},
|
|
19
19
|
size: {
|
|
20
20
|
// TODO: #1044 токены типографики в Avatar
|
|
21
|
-
xxl: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 6.25rem;\n ", ": 2rem;\n ", ": 600;\n ", ": 2rem;\n ", ": 0.75rem;\n
|
|
22
|
-
l: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 1.25rem;\n ", ": 600;\n ", ": 1.25rem;\n ", ": 0.5rem;\n
|
|
23
|
-
m: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.25rem;\n ", ": 0.875rem;\n ", ": 600;\n ", ": 0.875rem;\n ", ": 0.5rem;\n
|
|
24
|
-
s: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 0.5rem;\n ", ": 600;\n ", ": 0.5rem;\n ", ": 0.375rem;\n
|
|
21
|
+
xxl: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 6.25rem;\n ", ": 2rem;\n ", ": 600;\n ", ": 2rem;\n ", ": 0.75rem;\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize),
|
|
22
|
+
l: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 1.25rem;\n ", ": 600;\n ", ": 1.25rem;\n ", ": 0.5rem;\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize),
|
|
23
|
+
m: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.25rem;\n ", ": 0.875rem;\n ", ": 600;\n ", ": 0.875rem;\n ", ": 0.5rem;\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize),
|
|
24
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 0.5rem;\n ", ": 600;\n ", ": 0.5rem;\n ", ": 0.375rem;\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize),
|
|
25
25
|
fit: /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 100%;\n ", ": 0;\n ", ": 0;\n ", ": 0;\n ", ": 0;\n "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize)
|
|
26
26
|
},
|
|
27
27
|
focused: {
|
|
28
28
|
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.1rem;\n ", ": -0.2rem;\n ", ": var(--surface-accent);\n "])), _emotion.avatarTokens.outlineSize, _emotion.avatarTokens.outlineOffset, _emotion.avatarTokens.outlineColor)
|
|
29
|
-
},
|
|
30
|
-
badgeView: {
|
|
31
|
-
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n\n ", ": var(--text-primary);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
|
|
32
|
-
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n\n ", ": var(--text-accent);\n ", ": var(--surface-transparent-accent);\n\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
|
|
33
|
-
positive: /*#__PURE__*/(0, _emotion.css)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-positive);\n\n ", ": var(--text-positive);\n ", ": var(--surface-transparent-positive);\n\n ", ": var(--text-positive);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
|
|
34
|
-
warning: /*#__PURE__*/(0, _emotion.css)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-warning);\n\n ", ": var(--text-warning);\n ", ": var(--surface-transparent-warning);\n\n ", ": var(--text-warning);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
|
|
35
|
-
negative: /*#__PURE__*/(0, _emotion.css)(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-negative);\n\n ", ": var(--text-negative);\n ", ": var(--surface-transparent-negative);\n\n ", ": var(--text-negative);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
|
|
36
|
-
dark: /*#__PURE__*/(0, _emotion.css)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-solid-default);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-transparent-deep);\n\n ", ": var(--on-light-text-primary);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
|
|
37
|
-
light: /*#__PURE__*/(0, _emotion.css)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-dark-surface-solid-default);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-dark-surface-transparent-card);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-clear);\n "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear)
|
|
38
|
-
},
|
|
39
|
-
counterView: {
|
|
40
|
-
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
|
|
41
|
-
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
|
|
42
|
-
positive: /*#__PURE__*/(0, _emotion.css)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-positive);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
|
|
43
|
-
warning: /*#__PURE__*/(0, _emotion.css)(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-warning);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
|
|
44
|
-
negative: /*#__PURE__*/(0, _emotion.css)(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-negative);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
|
|
45
|
-
dark: /*#__PURE__*/(0, _emotion.css)(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-solid-default);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
|
|
46
|
-
light: /*#__PURE__*/(0, _emotion.css)(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-dark-surface-solid-default);\n "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground)
|
|
47
29
|
}
|
|
48
30
|
}
|
|
49
31
|
};
|
|
@@ -1,15 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { ComponentProps } from 'react';
|
|
3
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
4
3
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
|
5
4
|
|
|
6
5
|
import { Avatar } from './Avatar';
|
|
7
6
|
|
|
8
|
-
const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
|
|
9
|
-
const extraType = ['', 'badge', 'counter'];
|
|
10
|
-
const counterViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
|
11
|
-
const badgeViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
|
12
|
-
|
|
13
7
|
const meta: Meta<typeof Avatar> = {
|
|
14
8
|
title: 'Data Display/Avatar',
|
|
15
9
|
component: Avatar,
|
|
@@ -17,69 +11,12 @@ const meta: Meta<typeof Avatar> = {
|
|
|
17
11
|
view: { control: 'inline-radio', options: ['default'] },
|
|
18
12
|
size: { control: 'select', options: ['xxl', 'l', 'm', 's', 'fit'] },
|
|
19
13
|
status: { control: 'select', options: ['active', 'inactive'] },
|
|
20
|
-
type: {
|
|
21
|
-
control: 'select',
|
|
22
|
-
options: extraType,
|
|
23
|
-
if: { arg: 'hasExtra', truthy: true },
|
|
24
|
-
},
|
|
25
|
-
extraPlacement: {
|
|
26
|
-
control: 'select',
|
|
27
|
-
options: extraPlacements,
|
|
28
|
-
if: { arg: 'hasExtra', truthy: true },
|
|
29
|
-
},
|
|
30
|
-
counterView: {
|
|
31
|
-
control: 'select',
|
|
32
|
-
options: counterViews,
|
|
33
|
-
if: { arg: 'type', eq: 'counter' },
|
|
34
|
-
},
|
|
35
|
-
count: {
|
|
36
|
-
control: 'number',
|
|
37
|
-
if: { arg: 'type', eq: 'counter' },
|
|
38
|
-
},
|
|
39
|
-
maxCount: {
|
|
40
|
-
control: 'number',
|
|
41
|
-
if: { arg: 'type', eq: 'counter' },
|
|
42
|
-
},
|
|
43
|
-
badgeView: {
|
|
44
|
-
control: 'select',
|
|
45
|
-
options: badgeViews,
|
|
46
|
-
if: { arg: 'type', eq: 'badge' },
|
|
47
|
-
},
|
|
48
|
-
text: {
|
|
49
|
-
control: 'text',
|
|
50
|
-
if: { arg: 'type', eq: 'badge' },
|
|
51
|
-
},
|
|
52
|
-
customColor: {
|
|
53
|
-
control: 'color',
|
|
54
|
-
if: { arg: 'type', eq: 'badge' },
|
|
55
|
-
},
|
|
56
|
-
customBackgroundColor: {
|
|
57
|
-
control: 'color',
|
|
58
|
-
if: { arg: 'type', eq: 'badge' },
|
|
59
|
-
},
|
|
60
|
-
pilled: {
|
|
61
|
-
control: 'boolean',
|
|
62
|
-
if: { arg: 'type', eq: 'badge' },
|
|
63
|
-
},
|
|
64
14
|
},
|
|
65
15
|
};
|
|
66
16
|
|
|
67
17
|
export default meta;
|
|
68
18
|
|
|
69
|
-
type
|
|
70
|
-
enableContentLeft: boolean;
|
|
71
|
-
enableContentRight: boolean;
|
|
72
|
-
};
|
|
73
|
-
type Story = StoryObj<StoryProps>;
|
|
74
|
-
|
|
75
|
-
const BellIcon = (props) => (
|
|
76
|
-
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
|
77
|
-
<path
|
|
78
|
-
d="M11.501 21.28c1.088 0 1.978-.889 1.978-1.977H9.524c0 1.088.88 1.978 1.977 1.978zm5.933-5.932v-4.944c0-3.035-1.622-5.576-4.45-6.248v-.673c0-.82-.662-1.483-1.483-1.483-.82 0-1.483.662-1.483 1.483v.672c-2.838.673-4.45 3.204-4.45 6.25v4.943l-1.275 1.276c-.623.623-.188 1.69.692 1.69h13.022c.88 0 1.325-1.067.702-1.69l-1.275-1.276z"
|
|
79
|
-
fill="currentColor"
|
|
80
|
-
/>
|
|
81
|
-
</svg>
|
|
82
|
-
);
|
|
19
|
+
type Story = StoryObj<ComponentProps<typeof Avatar>>;
|
|
83
20
|
|
|
84
21
|
export const Default: Story = {
|
|
85
22
|
args: {
|
|
@@ -87,75 +24,21 @@ export const Default: Story = {
|
|
|
87
24
|
size: 'xxl',
|
|
88
25
|
name: 'Иван Фадеев',
|
|
89
26
|
url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
|
|
27
|
+
status: 'active',
|
|
90
28
|
isScalable: false,
|
|
91
|
-
hasExtra: false,
|
|
92
|
-
extraPlacement: 'top-right',
|
|
93
|
-
type: undefined,
|
|
94
|
-
counterView: 'accent',
|
|
95
|
-
count: 3,
|
|
96
|
-
maxCount: 10,
|
|
97
|
-
badgeView: 'accent',
|
|
98
|
-
text: '31',
|
|
99
|
-
pilled: true,
|
|
100
|
-
enableContentLeft: false,
|
|
101
|
-
enableContentRight: false,
|
|
102
29
|
},
|
|
103
30
|
argTypes: {
|
|
104
|
-
enableContentLeft: {
|
|
105
|
-
control: { type: 'boolean' },
|
|
106
|
-
if: { arg: 'type', eq: 'badge' },
|
|
107
|
-
},
|
|
108
|
-
enableContentRight: {
|
|
109
|
-
control: { type: 'boolean' },
|
|
110
|
-
if: { arg: 'type', eq: 'badge' },
|
|
111
|
-
},
|
|
112
31
|
...disableProps(['focused']),
|
|
113
32
|
},
|
|
114
|
-
render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
|
|
115
|
-
const iconSize = () => {
|
|
116
|
-
switch (size) {
|
|
117
|
-
case 'xxl':
|
|
118
|
-
return '1rem';
|
|
119
|
-
case 'm':
|
|
120
|
-
return '0.625rem';
|
|
121
|
-
default:
|
|
122
|
-
return '0.75rem';
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
return (
|
|
127
|
-
<>
|
|
128
|
-
<Avatar
|
|
129
|
-
contentLeft={enableContentLeft ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
|
|
130
|
-
contentRight={
|
|
131
|
-
!enableContentLeft && enableContentRight ? (
|
|
132
|
-
<BellIcon width={iconSize()} height={iconSize()} />
|
|
133
|
-
) : undefined
|
|
134
|
-
}
|
|
135
|
-
size={size}
|
|
136
|
-
{...rest}
|
|
137
|
-
/>
|
|
138
|
-
</>
|
|
139
|
-
);
|
|
140
|
-
},
|
|
141
33
|
};
|
|
142
34
|
|
|
143
35
|
export const Accessibility: Story = {
|
|
144
36
|
args: {
|
|
145
37
|
role: 'button',
|
|
146
|
-
name: 'Иван Фадеев',
|
|
147
38
|
tabIndex: 0,
|
|
148
39
|
view: 'default',
|
|
149
40
|
size: 'xxl',
|
|
41
|
+
name: 'Иван Фадеев',
|
|
150
42
|
status: 'active',
|
|
151
|
-
focused: true,
|
|
152
|
-
hasExtra: false,
|
|
153
|
-
extraPlacement: 'top-right',
|
|
154
|
-
type: undefined,
|
|
155
|
-
counterView: 'accent',
|
|
156
|
-
count: 3,
|
|
157
|
-
maxCount: 10,
|
|
158
|
-
badgeView: 'accent',
|
|
159
|
-
text: '31',
|
|
160
43
|
},
|
|
161
44
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
import { css, avatarTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
|
|
4
4
|
export var config = {
|
|
@@ -12,32 +12,14 @@ export var config = {
|
|
|
12
12
|
},
|
|
13
13
|
size: {
|
|
14
14
|
// TODO: #1044 токены типографики в Avatar
|
|
15
|
-
xxl: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 6.25rem;\n ", ": 2rem;\n ", ": 600;\n ", ": 2rem;\n ", ": 0.75rem;\n
|
|
16
|
-
l: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 1.25rem;\n ", ": 600;\n ", ": 1.25rem;\n ", ": 0.5rem;\n
|
|
17
|
-
m: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.25rem;\n ", ": 0.875rem;\n ", ": 600;\n ", ": 0.875rem;\n ", ": 0.5rem;\n
|
|
18
|
-
s: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 0.5rem;\n ", ": 600;\n ", ": 0.5rem;\n ", ": 0.375rem;\n
|
|
15
|
+
xxl: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 6.25rem;\n ", ": 2rem;\n ", ": 600;\n ", ": 2rem;\n ", ": 0.75rem;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
|
|
16
|
+
l: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 1.25rem;\n ", ": 600;\n ", ": 1.25rem;\n ", ": 0.5rem;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
|
|
17
|
+
m: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.25rem;\n ", ": 0.875rem;\n ", ": 600;\n ", ": 0.875rem;\n ", ": 0.5rem;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
|
|
18
|
+
s: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 0.5rem;\n ", ": 600;\n ", ": 0.5rem;\n ", ": 0.375rem;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
|
|
19
19
|
fit: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 100%;\n ", ": 0;\n ", ": 0;\n ", ": 0;\n ", ": 0;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize)
|
|
20
20
|
},
|
|
21
21
|
focused: {
|
|
22
22
|
"true": /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.1rem;\n ", ": -0.2rem;\n ", ": var(--surface-accent);\n "])), tokens.outlineSize, tokens.outlineOffset, tokens.outlineColor)
|
|
23
|
-
},
|
|
24
|
-
badgeView: {
|
|
25
|
-
"default": /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n\n ", ": var(--text-primary);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
|
|
26
|
-
accent: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n\n ", ": var(--text-accent);\n ", ": var(--surface-transparent-accent);\n\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
|
|
27
|
-
positive: /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-positive);\n\n ", ": var(--text-positive);\n ", ": var(--surface-transparent-positive);\n\n ", ": var(--text-positive);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
|
|
28
|
-
warning: /*#__PURE__*/css(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-warning);\n\n ", ": var(--text-warning);\n ", ": var(--surface-transparent-warning);\n\n ", ": var(--text-warning);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
|
|
29
|
-
negative: /*#__PURE__*/css(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-negative);\n\n ", ": var(--text-negative);\n ", ": var(--surface-transparent-negative);\n\n ", ": var(--text-negative);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
|
|
30
|
-
dark: /*#__PURE__*/css(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-solid-default);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-transparent-deep);\n\n ", ": var(--on-light-text-primary);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
|
|
31
|
-
light: /*#__PURE__*/css(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-dark-surface-solid-default);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-dark-surface-transparent-card);\n\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-clear);\n "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear)
|
|
32
|
-
},
|
|
33
|
-
counterView: {
|
|
34
|
-
"default": /*#__PURE__*/css(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
35
|
-
accent: /*#__PURE__*/css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
36
|
-
positive: /*#__PURE__*/css(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-positive);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
37
|
-
warning: /*#__PURE__*/css(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-warning);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
38
|
-
negative: /*#__PURE__*/css(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-negative);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
39
|
-
dark: /*#__PURE__*/css(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--on-light-surface-solid-default);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
40
|
-
light: /*#__PURE__*/css(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-light-text-primary);\n ", ": var(--on-dark-surface-solid-default);\n "])), tokens.counterColor, tokens.counterBackground)
|
|
41
23
|
}
|
|
42
24
|
}
|
|
43
25
|
};
|
|
@@ -1,15 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { ComponentProps } from 'react';
|
|
3
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
4
3
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
|
5
4
|
|
|
6
5
|
import { Avatar } from './Avatar';
|
|
7
6
|
|
|
8
|
-
const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
|
|
9
|
-
const extraType = ['', 'badge', 'counter'];
|
|
10
|
-
const counterViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
|
11
|
-
const badgeViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
|
12
|
-
|
|
13
7
|
const meta: Meta<typeof Avatar> = {
|
|
14
8
|
title: 'Data Display/Avatar',
|
|
15
9
|
component: Avatar,
|
|
@@ -17,69 +11,12 @@ const meta: Meta<typeof Avatar> = {
|
|
|
17
11
|
view: { control: 'inline-radio', options: ['default'] },
|
|
18
12
|
size: { control: 'select', options: ['xxl', 'l', 'm', 's', 'fit'] },
|
|
19
13
|
status: { control: 'select', options: ['active', 'inactive'] },
|
|
20
|
-
type: {
|
|
21
|
-
control: 'select',
|
|
22
|
-
options: extraType,
|
|
23
|
-
if: { arg: 'hasExtra', truthy: true },
|
|
24
|
-
},
|
|
25
|
-
extraPlacement: {
|
|
26
|
-
control: 'select',
|
|
27
|
-
options: extraPlacements,
|
|
28
|
-
if: { arg: 'hasExtra', truthy: true },
|
|
29
|
-
},
|
|
30
|
-
counterView: {
|
|
31
|
-
control: 'select',
|
|
32
|
-
options: counterViews,
|
|
33
|
-
if: { arg: 'type', eq: 'counter' },
|
|
34
|
-
},
|
|
35
|
-
count: {
|
|
36
|
-
control: 'number',
|
|
37
|
-
if: { arg: 'type', eq: 'counter' },
|
|
38
|
-
},
|
|
39
|
-
maxCount: {
|
|
40
|
-
control: 'number',
|
|
41
|
-
if: { arg: 'type', eq: 'counter' },
|
|
42
|
-
},
|
|
43
|
-
badgeView: {
|
|
44
|
-
control: 'select',
|
|
45
|
-
options: badgeViews,
|
|
46
|
-
if: { arg: 'type', eq: 'badge' },
|
|
47
|
-
},
|
|
48
|
-
text: {
|
|
49
|
-
control: 'text',
|
|
50
|
-
if: { arg: 'type', eq: 'badge' },
|
|
51
|
-
},
|
|
52
|
-
customColor: {
|
|
53
|
-
control: 'color',
|
|
54
|
-
if: { arg: 'type', eq: 'badge' },
|
|
55
|
-
},
|
|
56
|
-
customBackgroundColor: {
|
|
57
|
-
control: 'color',
|
|
58
|
-
if: { arg: 'type', eq: 'badge' },
|
|
59
|
-
},
|
|
60
|
-
pilled: {
|
|
61
|
-
control: 'boolean',
|
|
62
|
-
if: { arg: 'type', eq: 'badge' },
|
|
63
|
-
},
|
|
64
14
|
},
|
|
65
15
|
};
|
|
66
16
|
|
|
67
17
|
export default meta;
|
|
68
18
|
|
|
69
|
-
type
|
|
70
|
-
enableContentLeft: boolean;
|
|
71
|
-
enableContentRight: boolean;
|
|
72
|
-
};
|
|
73
|
-
type Story = StoryObj<StoryProps>;
|
|
74
|
-
|
|
75
|
-
const BellIcon = (props) => (
|
|
76
|
-
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
|
77
|
-
<path
|
|
78
|
-
d="M11.501 21.28c1.088 0 1.978-.889 1.978-1.977H9.524c0 1.088.88 1.978 1.977 1.978zm5.933-5.932v-4.944c0-3.035-1.622-5.576-4.45-6.248v-.673c0-.82-.662-1.483-1.483-1.483-.82 0-1.483.662-1.483 1.483v.672c-2.838.673-4.45 3.204-4.45 6.25v4.943l-1.275 1.276c-.623.623-.188 1.69.692 1.69h13.022c.88 0 1.325-1.067.702-1.69l-1.275-1.276z"
|
|
79
|
-
fill="currentColor"
|
|
80
|
-
/>
|
|
81
|
-
</svg>
|
|
82
|
-
);
|
|
19
|
+
type Story = StoryObj<ComponentProps<typeof Avatar>>;
|
|
83
20
|
|
|
84
21
|
export const Default: Story = {
|
|
85
22
|
args: {
|
|
@@ -87,75 +24,21 @@ export const Default: Story = {
|
|
|
87
24
|
size: 'xxl',
|
|
88
25
|
name: 'Иван Фадеев',
|
|
89
26
|
url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
|
|
27
|
+
status: 'active',
|
|
90
28
|
isScalable: false,
|
|
91
|
-
hasExtra: false,
|
|
92
|
-
extraPlacement: 'top-right',
|
|
93
|
-
type: undefined,
|
|
94
|
-
counterView: 'accent',
|
|
95
|
-
count: 3,
|
|
96
|
-
maxCount: 10,
|
|
97
|
-
badgeView: 'accent',
|
|
98
|
-
text: '31',
|
|
99
|
-
pilled: true,
|
|
100
|
-
enableContentLeft: false,
|
|
101
|
-
enableContentRight: false,
|
|
102
29
|
},
|
|
103
30
|
argTypes: {
|
|
104
|
-
enableContentLeft: {
|
|
105
|
-
control: { type: 'boolean' },
|
|
106
|
-
if: { arg: 'type', eq: 'badge' },
|
|
107
|
-
},
|
|
108
|
-
enableContentRight: {
|
|
109
|
-
control: { type: 'boolean' },
|
|
110
|
-
if: { arg: 'type', eq: 'badge' },
|
|
111
|
-
},
|
|
112
31
|
...disableProps(['focused']),
|
|
113
32
|
},
|
|
114
|
-
render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
|
|
115
|
-
const iconSize = () => {
|
|
116
|
-
switch (size) {
|
|
117
|
-
case 'xxl':
|
|
118
|
-
return '1rem';
|
|
119
|
-
case 'm':
|
|
120
|
-
return '0.625rem';
|
|
121
|
-
default:
|
|
122
|
-
return '0.75rem';
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
return (
|
|
127
|
-
<>
|
|
128
|
-
<Avatar
|
|
129
|
-
contentLeft={enableContentLeft ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
|
|
130
|
-
contentRight={
|
|
131
|
-
!enableContentLeft && enableContentRight ? (
|
|
132
|
-
<BellIcon width={iconSize()} height={iconSize()} />
|
|
133
|
-
) : undefined
|
|
134
|
-
}
|
|
135
|
-
size={size}
|
|
136
|
-
{...rest}
|
|
137
|
-
/>
|
|
138
|
-
</>
|
|
139
|
-
);
|
|
140
|
-
},
|
|
141
33
|
};
|
|
142
34
|
|
|
143
35
|
export const Accessibility: Story = {
|
|
144
36
|
args: {
|
|
145
37
|
role: 'button',
|
|
146
|
-
name: 'Иван Фадеев',
|
|
147
38
|
tabIndex: 0,
|
|
148
39
|
view: 'default',
|
|
149
40
|
size: 'xxl',
|
|
41
|
+
name: 'Иван Фадеев',
|
|
150
42
|
status: 'active',
|
|
151
|
-
focused: true,
|
|
152
|
-
hasExtra: false,
|
|
153
|
-
extraPlacement: 'top-right',
|
|
154
|
-
type: undefined,
|
|
155
|
-
counterView: 'accent',
|
|
156
|
-
count: 3,
|
|
157
|
-
maxCount: 10,
|
|
158
|
-
badgeView: 'accent',
|
|
159
|
-
text: '31',
|
|
160
43
|
},
|
|
161
44
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './Avatar.
|
|
1
|
+
import './Avatar.config_weecw4.css';
|
|
2
2
|
var config = {
|
|
3
3
|
defaults: {
|
|
4
4
|
view: 'default',
|
|
@@ -18,24 +18,6 @@ var config = {
|
|
|
18
18
|
},
|
|
19
19
|
focused: {
|
|
20
20
|
"true": "t12fbiph"
|
|
21
|
-
},
|
|
22
|
-
badgeView: {
|
|
23
|
-
"default": "d1v24dm1",
|
|
24
|
-
accent: "aklmhlm",
|
|
25
|
-
positive: "pts1qri",
|
|
26
|
-
warning: "wu8qekr",
|
|
27
|
-
negative: "nc00x8o",
|
|
28
|
-
dark: "d4vpurz",
|
|
29
|
-
light: "lh713v8"
|
|
30
|
-
},
|
|
31
|
-
counterView: {
|
|
32
|
-
"default": "d18xlm4d",
|
|
33
|
-
accent: "a19kwqy5",
|
|
34
|
-
positive: "p1jpkhmc",
|
|
35
|
-
warning: "w1rt05zb",
|
|
36
|
-
negative: "n18uzb5o",
|
|
37
|
-
dark: "dwmydiz",
|
|
38
|
-
light: "l84jq18"
|
|
39
21
|
}
|
|
40
22
|
}
|
|
41
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.config.js","sources":["../../../src-css/components/Avatar/Avatar.config.tsx"],"sourcesContent":["import { css, avatarTokens as tokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n defaults: {\n view: 'default',\n size: 'xxl',\n },\n variations: {\n view: {\n default: css`\n ${tokens.color}: var(--text-accent-gradient);\n ${tokens.backgroundColor}: linear-gradient(94deg, rgba(62, 121, 240, 0.2) 6.49%, rgba(39, 198, 229, 0.2) 93.51%);\n ${tokens.statusOnlineColor}: var(--surface-positive);\n ${tokens.statusOfflineColor}: var(--surface-solid-tertiary);\n ${tokens.scaleHover}: 1.02;\n ${tokens.fontFamily}: var(--plasma-typo-text-font-family);\n `,\n },\n size: {\n // TODO: #1044 токены типографики в Avatar\n xxl: css`\n ${tokens.avatarSize}: 6.25rem;\n ${tokens.fontSize}: 2rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 2rem;\n ${tokens.statusIconSize}: 0.75rem;\n\n ${tokens.badgeBorderRadius}: 0.5rem;\n ${tokens.badgeHeight}: 1.75rem;\n ${tokens.badgePadding}: 0 0.688rem;\n ${tokens.badgePaddingIconOnly}: 0 0.375rem;\n\n ${tokens.badgeFontFamily}: var(--plasma-typo-body-s-font-family);\n ${tokens.badgeFontSize}: var(--plasma-typo-body-s-font-size);\n ${tokens.badgeFontStyle}: var(--plasma-typo-body-s-font-style);\n ${tokens.badgeFontWeight}: var(--plasma-typo-body-s-font-weight);\n ${tokens.badgeLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);\n ${tokens.badgeLineHeight}: var(--plasma-typo-body-s-line-height);\n\n ${tokens.badgeLeftContentMarginLeft}: -0.063rem;\n ${tokens.badgeLeftContentMarginRight}: 0.25rem;\n\n ${tokens.badgeRightContentMarginLeft}: 0.25rem;\n ${tokens.badgeRightContentMarginRight}: -0.063rem;\n ${tokens.badgePilledBorderRadius}: 1.25rem;\n\n ${tokens.counterBorderRadius}: 1rem;\n ${tokens.counterHeight}: 1.75rem;\n ${tokens.counterPadding}: 0 0.625rem;\n ${tokens.counterFontFamily}: var(--plasma-typo-body-s-font-family);\n ${tokens.counterFontSize}: var(--plasma-typo-body-s-font-size);\n ${tokens.counterFontStyle}: var(--plasma-typo-body-s-font-style);\n ${tokens.counterFontWeight}: var(--plasma-typo-body-s-font-weight);\n ${tokens.counterLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);\n ${tokens.counterLineHeight}: var(--plasma-typo-body-s-line-height);\n `,\n l: css`\n ${tokens.avatarSize}: 3rem;\n ${tokens.fontSize}: 1.25rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 1.25rem;\n ${tokens.statusIconSize}: 0.5rem;\n\n ${tokens.extraPlacementFactor}: 2;\n\n ${tokens.badgeBorderRadius}: 0.375rem;\n ${tokens.badgeHeight}: 1.25rem;\n ${tokens.badgePadding}: 0 0.438rem;\n ${tokens.badgePaddingIconOnly}: 0 0.25rem;\n\n ${tokens.badgeFontFamily}: var(--plasma-typo-body-xxs-font-family);\n ${tokens.badgeFontSize}: var(--plasma-typo-body-xxs-font-size);\n ${tokens.badgeFontStyle}: var(--plasma-typo-body-xxs-font-style);\n ${tokens.badgeFontWeight}: var(--plasma-typo-body-xxs-font-weight);\n ${tokens.badgeLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);\n ${tokens.badgeLineHeight}: var(--plasma-typo-body-xxs-line-height);\n\n ${tokens.badgeLeftContentMarginLeft}: -0.063rem;\n ${tokens.badgeLeftContentMarginRight}: 0.125rem;\n\n ${tokens.badgeRightContentMarginLeft}: 0.125rem;\n ${tokens.badgeRightContentMarginRight}: -0.063rem;\n ${tokens.badgePilledBorderRadius}: 1.25rem;\n\n ${tokens.counterBorderRadius}: 1rem;\n ${tokens.counterHeight}: 1.25rem;\n ${tokens.counterPadding}: 0 0.375rem;\n ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family);\n ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size);\n ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style);\n ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight);\n ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);\n ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height);\n `,\n m: css`\n ${tokens.avatarSize}: 2.25rem;\n ${tokens.fontSize}: 0.875rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 0.875rem;\n ${tokens.statusIconSize}: 0.5rem;\n\n ${tokens.extraPlacementFactor}: 2;\n\n ${tokens.badgeBorderRadius}: 0.25rem;\n ${tokens.badgeHeight}: 1rem;\n ${tokens.badgePadding}: 0 0.25rem;\n ${tokens.badgePaddingIconOnly}: 0 0.188rem;\n\n ${tokens.badgeFontFamily}: var(--plasma-typo-body-xxs-font-family);\n ${tokens.badgeFontSize}: var(--plasma-typo-body-xxs-font-size);\n ${tokens.badgeFontStyle}: var(--plasma-typo-body-xxs-font-style);\n ${tokens.badgeFontWeight}: var(--plasma-typo-body-xxs-font-weight);\n ${tokens.badgeLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);\n ${tokens.badgeLineHeight}: var(--plasma-typo-body-xxs-line-height);\n\n ${tokens.badgeLeftContentMarginLeft}: -0.063rem;\n ${tokens.badgeLeftContentMarginRight}: 0.125rem;\n\n ${tokens.badgeRightContentMarginLeft}: 0.125rem;\n ${tokens.badgeRightContentMarginRight}: -0.063rem;\n ${tokens.badgePilledBorderRadius}: 1.25rem;\n\n ${tokens.counterBorderRadius}: 1rem;\n ${tokens.counterHeight}: 1rem;\n ${tokens.counterPadding}: 0 0.25rem;\n ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family);\n ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size);\n ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style);\n ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight);\n ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);\n ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height);\n `,\n s: css`\n ${tokens.avatarSize}: 1.5rem;\n ${tokens.fontSize}: 0.5rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 0.5rem;\n ${tokens.statusIconSize}: 0.375rem;\n\n ${tokens.extraPlacementFactor}: 1;\n\n ${tokens.counterBorderRadius}: 1rem;\n ${tokens.counterHeight}: 0.75rem;\n ${tokens.counterPadding}: 0 0.125rem;\n ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family);\n ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size);\n ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style);\n ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight);\n ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);\n ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height);\n `,\n fit: css`\n ${tokens.avatarSize}: 100%;\n ${tokens.fontSize}: 0;\n ${tokens.fontWeight}: 0;\n ${tokens.lineHeight}: 0;\n ${tokens.statusIconSize}: 0;\n `,\n },\n focused: {\n true: css`\n ${tokens.outlineSize}: 0.1rem;\n ${tokens.outlineOffset}: -0.2rem;\n ${tokens.outlineColor}: var(--surface-accent);\n `,\n },\n badgeView: {\n default: css`\n ${tokens.badgeColor}: var(--inverse-text-primary);\n ${tokens.badgeBackground}: var(--surface-solid-default);\n\n ${tokens.badgeColorTransparent}: var(--text-primary);\n ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-secondary);\n\n ${tokens.badgeColorClear}: var(--text-primary);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n accent: css`\n ${tokens.badgeColor}: var(--on-dark-text-primary);\n ${tokens.badgeBackground}: var(--surface-accent);\n\n ${tokens.badgeColorTransparent}: var(--text-accent);\n ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-accent);\n\n ${tokens.badgeColorClear}: var(--text-accent);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n positive: css`\n ${tokens.badgeColor}: var(--on-dark-text-primary);\n ${tokens.badgeBackground}: var(--surface-positive);\n\n ${tokens.badgeColorTransparent}: var(--text-positive);\n ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-positive);\n\n ${tokens.badgeColorClear}: var(--text-positive);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n warning: css`\n ${tokens.badgeColor}: var(--on-dark-text-primary);\n ${tokens.badgeBackground}: var(--surface-warning);\n\n ${tokens.badgeColorTransparent}: var(--text-warning);\n ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-warning);\n\n ${tokens.badgeColorClear}: var(--text-warning);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n negative: css`\n ${tokens.badgeColor}: var(--on-dark-text-primary);\n ${tokens.badgeBackground}: var(--surface-negative);\n\n ${tokens.badgeColorTransparent}: var(--text-negative);\n ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-negative);\n\n ${tokens.badgeColorClear}: var(--text-negative);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n dark: css`\n ${tokens.badgeColor}: var(--on-dark-text-primary);\n ${tokens.badgeBackground}: var(--on-light-surface-solid-default);\n\n ${tokens.badgeColorTransparent}: var(--on-dark-text-primary);\n ${tokens.badgeBackgroundTransparent}: var(--on-light-surface-transparent-deep);\n\n ${tokens.badgeColorClear}: var(--on-light-text-primary);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n light: css`\n ${tokens.badgeColor}: var(--on-light-text-primary);\n ${tokens.badgeBackground}: var(--on-dark-surface-solid-default);\n\n ${tokens.badgeColorTransparent}: var(--on-dark-text-primary);\n ${tokens.badgeBackgroundTransparent}: var(--on-dark-surface-transparent-card);\n\n ${tokens.badgeColorClear}: var(--on-dark-text-primary);\n ${tokens.badgeBackgroundClear}: var(--surface-clear);\n `,\n },\n counterView: {\n default: css`\n ${tokens.counterColor}: var(--inverse-text-primary);\n ${tokens.counterBackground}: var(--surface-solid-default);\n `,\n accent: css`\n ${tokens.counterColor}: var(--on-dark-text-primary);\n ${tokens.counterBackground}: var(--surface-accent);\n `,\n positive: css`\n ${tokens.counterColor}: var(--on-dark-text-primary);\n ${tokens.counterBackground}: var(--surface-positive);\n `,\n warning: css`\n ${tokens.counterColor}: var(--on-dark-text-primary);\n ${tokens.counterBackground}: var(--surface-warning);\n `,\n negative: css`\n ${tokens.counterColor}: var(--on-dark-text-primary);\n ${tokens.counterBackground}: var(--surface-negative);\n `,\n dark: css`\n ${tokens.counterColor}: var(--on-dark-text-primary);\n ${tokens.counterBackground}: var(--on-light-surface-solid-default);\n `,\n light: css`\n ${tokens.counterColor}: var(--on-light-text-primary);\n ${tokens.counterBackground}: var(--on-dark-surface-solid-default);\n `,\n },\n },\n};\n"],"names":["config","defaults","view","size","variations","default","xxl","l","m","s","fit","focused","true","badgeView","accent","positive","warning","negative","dark","light","counterView"],"mappings":"AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,KAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;MACFG,SAAO,EAAA,UAAA;KAQV;AACDF,IAAAA,IAAI,EAAE;AACF;AACAG,MAAAA,GAAG,EAmCF,UAAA;AACDC,MAAAA,CAAC,EAqCA,SAAA;AACDC,MAAAA,CAAC,EAqCA,UAAA;AACDC,MAAAA,CAAC,EAkBA,UAAA;AACDC,MAAAA,GAAG,EAAA,SAAA;KAON;AACDC,IAAAA,OAAO,EAAE;MACLC,MAAI,EAAA,UAAA;KAKP;AACDC,IAAAA,SAAS,EAAE;AACPR,MAAAA,SAAAA,EASC,UAAA;AACDS,MAAAA,MAAM,EASL,SAAA;AACDC,MAAAA,QAAQ,EASP,SAAA;AACDC,MAAAA,OAAO,EASN,SAAA;AACDC,MAAAA,QAAQ,EASP,SAAA;AACDC,MAAAA,IAAI,EASH,SAAA;AACDC,MAAAA,KAAK,EAAA,SAAA;KAUR;AACDC,IAAAA,WAAW,EAAE;AACTf,MAAAA,SAAAA,EAGC,UAAA;AACDS,MAAAA,MAAM,EAGL,UAAA;AACDC,MAAAA,QAAQ,EAGP,UAAA;AACDC,MAAAA,OAAO,EAGN,UAAA;AACDC,MAAAA,QAAQ,EAGP,UAAA;AACDC,MAAAA,IAAI,EAGH,SAAA;AACDC,MAAAA,KAAK,EAAA,SAAA;AAIT,KAAA;AACJ,GAAA;AACJ;;;;"}
|
|
1
|
+
{"version":3,"file":"Avatar.config.js","sources":["../../../src-css/components/Avatar/Avatar.config.tsx"],"sourcesContent":["import { css, avatarTokens as tokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n defaults: {\n view: 'default',\n size: 'xxl',\n },\n variations: {\n view: {\n default: css`\n ${tokens.color}: var(--text-accent-gradient);\n ${tokens.backgroundColor}: linear-gradient(94deg, rgba(62, 121, 240, 0.2) 6.49%, rgba(39, 198, 229, 0.2) 93.51%);\n ${tokens.statusOnlineColor}: var(--surface-positive);\n ${tokens.statusOfflineColor}: var(--surface-solid-tertiary);\n ${tokens.scaleHover}: 1.02;\n ${tokens.fontFamily}: var(--plasma-typo-text-font-family);\n `,\n },\n size: {\n // TODO: #1044 токены типографики в Avatar\n xxl: css`\n ${tokens.avatarSize}: 6.25rem;\n ${tokens.fontSize}: 2rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 2rem;\n ${tokens.statusIconSize}: 0.75rem;\n `,\n l: css`\n ${tokens.avatarSize}: 3rem;\n ${tokens.fontSize}: 1.25rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 1.25rem;\n ${tokens.statusIconSize}: 0.5rem;\n `,\n m: css`\n ${tokens.avatarSize}: 2.25rem;\n ${tokens.fontSize}: 0.875rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 0.875rem;\n ${tokens.statusIconSize}: 0.5rem;\n `,\n s: css`\n ${tokens.avatarSize}: 1.5rem;\n ${tokens.fontSize}: 0.5rem;\n ${tokens.fontWeight}: 600;\n ${tokens.lineHeight}: 0.5rem;\n ${tokens.statusIconSize}: 0.375rem;\n `,\n fit: css`\n ${tokens.avatarSize}: 100%;\n ${tokens.fontSize}: 0;\n ${tokens.fontWeight}: 0;\n ${tokens.lineHeight}: 0;\n ${tokens.statusIconSize}: 0;\n `,\n },\n focused: {\n true: css`\n ${tokens.outlineSize}: 0.1rem;\n ${tokens.outlineOffset}: -0.2rem;\n ${tokens.outlineColor}: var(--surface-accent);\n `,\n },\n },\n};\n"],"names":["config","defaults","view","size","variations","default","xxl","l","m","s","fit","focused","true"],"mappings":"AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,KAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;MACFG,SAAO,EAAA,UAAA;KAQV;AACDF,IAAAA,IAAI,EAAE;AACF;AACAG,MAAAA,GAAG,EAMF,UAAA;AACDC,MAAAA,CAAC,EAMA,SAAA;AACDC,MAAAA,CAAC,EAMA,UAAA;AACDC,MAAAA,CAAC,EAMA,UAAA;AACDC,MAAAA,GAAG,EAAA,SAAA;KAON;AACDC,IAAAA,OAAO,EAAE;MACLC,MAAI,EAAA,UAAA;AAKR,KAAA;AACJ,GAAA;AACJ;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
.d1wlf450{--plasma-avatar-color:var(--text-accent-gradient);--plasma-avatar-background:linear-gradient(94deg,rgba(62,121,240,0.2) 6.49%,rgba(39,198,229,0.2) 93.51%);--plasma-avatar-status-online-background:var(--surface-positive);--plasma-avatar-status-offline-background:var(--surface-solid-tertiary);--plasma-avatar-scale-hover:1.02;--plasma-avatar-font-family:var(--plasma-typo-text-font-family);}
|
|
2
|
+
.x1ntw407{--plasma-avatar-size:6.25rem;--plasma-avatar-font-size:2rem;--plasma-avatar-font-weight:600;--plasma-avatar-line-height:2rem;--plasma-status-icon-size:0.75rem;}
|
|
3
|
+
.l3mxzec{--plasma-avatar-size:3rem;--plasma-avatar-font-size:1.25rem;--plasma-avatar-font-weight:600;--plasma-avatar-line-height:1.25rem;--plasma-status-icon-size:0.5rem;}
|
|
4
|
+
.m1tqy9r4{--plasma-avatar-size:2.25rem;--plasma-avatar-font-size:0.875rem;--plasma-avatar-font-weight:600;--plasma-avatar-line-height:0.875rem;--plasma-status-icon-size:0.5rem;}
|
|
5
|
+
.s110gq94{--plasma-avatar-size:1.5rem;--plasma-avatar-font-size:0.5rem;--plasma-avatar-font-weight:600;--plasma-avatar-line-height:0.5rem;--plasma-status-icon-size:0.375rem;}
|
|
6
|
+
.f3cx8li{--plasma-avatar-size:100%;--plasma-avatar-font-size:0;--plasma-avatar-font-weight:0;--plasma-avatar-line-height:0;--plasma-status-icon-size:0;}
|
|
7
|
+
.t12fbiph{--plasma-avatar-outline-size:0.1rem;--plasma-avatar-outline-offset:-0.2rem;--plasma-avatar-outline-color:var(--surface-accent);}
|