@salutejs/plasma-new-hope 0.239.0-canary.1696.12711678920.0 → 0.239.0-canary.1699.12742131493.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/cjs/components/Avatar/Avatar.js +3 -39
- package/cjs/components/Avatar/Avatar.js.map +1 -1
- package/cjs/components/Avatar/Avatar.styles.js +1 -32
- package/cjs/components/Avatar/Avatar.styles.js.map +1 -1
- package/cjs/components/Avatar/Avatar.styles_1gd252x.css +5 -0
- package/cjs/components/Avatar/Avatar.tokens.js +2 -41
- package/cjs/components/Avatar/Avatar.tokens.js.map +1 -1
- package/cjs/components/NumberInput/NumberInput.js +9 -3
- package/cjs/components/NumberInput/NumberInput.js.map +1 -1
- package/cjs/components/NumberInput/ui/Input/Input.js +12 -6
- package/cjs/components/NumberInput/ui/Input/Input.js.map +1 -1
- package/cjs/components/NumberInput/utils/index.js +8 -0
- package/cjs/components/NumberInput/utils/index.js.map +1 -1
- package/cjs/index.css +5 -8
- package/emotion/cjs/components/Avatar/Avatar.js +4 -39
- package/emotion/cjs/components/Avatar/Avatar.styles.js +10 -29
- package/emotion/cjs/components/Avatar/Avatar.template-doc.mdx +0 -54
- package/emotion/cjs/components/Avatar/Avatar.tokens.js +2 -41
- package/emotion/cjs/components/Avatar/utils/index.js +1 -15
- package/emotion/cjs/components/NumberInput/NumberInput.js +9 -3
- package/emotion/cjs/components/NumberInput/ui/Input/Input.js +12 -6
- package/emotion/cjs/components/NumberInput/utils/index.js +9 -2
- package/emotion/cjs/examples/plasma_b2c/components/Avatar/Avatar.config.js +7 -25
- package/emotion/cjs/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +1 -134
- package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +1 -0
- package/emotion/cjs/examples/plasma_web/components/Avatar/Avatar.config.js +7 -25
- package/emotion/cjs/examples/plasma_web/components/Avatar/Avatar.stories.tsx +1 -134
- package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +1 -0
- package/emotion/es/components/Avatar/Avatar.js +6 -41
- package/emotion/es/components/Avatar/Avatar.styles.js +10 -29
- package/emotion/es/components/Avatar/Avatar.template-doc.mdx +0 -54
- package/emotion/es/components/Avatar/Avatar.tokens.js +2 -41
- package/emotion/es/components/Avatar/utils/index.js +1 -14
- package/emotion/es/components/NumberInput/NumberInput.js +9 -3
- package/emotion/es/components/NumberInput/ui/Input/Input.js +13 -7
- package/emotion/es/components/NumberInput/utils/index.js +8 -1
- package/emotion/es/examples/plasma_b2c/components/Avatar/Avatar.config.js +7 -25
- package/emotion/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +1 -134
- package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +1 -0
- package/emotion/es/examples/plasma_web/components/Avatar/Avatar.config.js +7 -25
- package/emotion/es/examples/plasma_web/components/Avatar/Avatar.stories.tsx +1 -134
- package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +1 -0
- package/es/components/Avatar/Avatar.js +4 -40
- package/es/components/Avatar/Avatar.js.map +1 -1
- package/es/components/Avatar/Avatar.styles.js +2 -30
- package/es/components/Avatar/Avatar.styles.js.map +1 -1
- package/es/components/Avatar/Avatar.styles_1gd252x.css +5 -0
- package/es/components/Avatar/Avatar.tokens.js +2 -41
- package/es/components/Avatar/Avatar.tokens.js.map +1 -1
- package/es/components/NumberInput/NumberInput.js +9 -3
- package/es/components/NumberInput/NumberInput.js.map +1 -1
- package/es/components/NumberInput/ui/Input/Input.js +13 -7
- package/es/components/NumberInput/ui/Input/Input.js.map +1 -1
- package/es/components/NumberInput/utils/index.js +8 -1
- package/es/components/NumberInput/utils/index.js.map +1 -1
- package/es/index.css +5 -8
- package/package.json +2 -2
- package/styled-components/cjs/components/Avatar/Avatar.js +3 -38
- package/styled-components/cjs/components/Avatar/Avatar.styles.js +2 -18
- package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +0 -54
- package/styled-components/cjs/components/Avatar/Avatar.tokens.js +2 -41
- package/styled-components/cjs/components/Avatar/utils/index.js +1 -15
- package/styled-components/cjs/components/NumberInput/NumberInput.js +9 -3
- package/styled-components/cjs/components/NumberInput/ui/Input/Input.js +12 -6
- package/styled-components/cjs/components/NumberInput/utils/index.js +9 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Avatar/Avatar.config.js +4 -22
- package/styled-components/cjs/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +1 -134
- package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +1 -0
- package/styled-components/cjs/examples/plasma_web/components/Avatar/Avatar.config.js +4 -22
- package/styled-components/cjs/examples/plasma_web/components/Avatar/Avatar.stories.tsx +1 -134
- package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +1 -0
- package/styled-components/es/components/Avatar/Avatar.js +5 -40
- package/styled-components/es/components/Avatar/Avatar.styles.js +2 -18
- package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +0 -54
- package/styled-components/es/components/Avatar/Avatar.tokens.js +2 -41
- package/styled-components/es/components/Avatar/utils/index.js +1 -14
- package/styled-components/es/components/NumberInput/NumberInput.js +9 -3
- package/styled-components/es/components/NumberInput/ui/Input/Input.js +13 -7
- package/styled-components/es/components/NumberInput/utils/index.js +8 -1
- package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.config.js +4 -22
- package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +1 -134
- package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx +1 -0
- package/styled-components/es/examples/plasma_web/components/Avatar/Avatar.config.js +4 -22
- package/styled-components/es/examples/plasma_web/components/Avatar/Avatar.stories.tsx +1 -134
- package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx +1 -0
- package/types/components/Avatar/Avatar.d.ts +21 -3
- package/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/types/components/Avatar/Avatar.styles.d.ts +0 -59
- package/types/components/Avatar/Avatar.styles.d.ts.map +1 -1
- package/types/components/Avatar/Avatar.tokens.d.ts +0 -37
- package/types/components/Avatar/Avatar.tokens.d.ts.map +1 -1
- package/types/components/Avatar/Avatar.types.d.ts +2 -47
- package/types/components/Avatar/Avatar.types.d.ts.map +1 -1
- package/types/components/Avatar/utils/index.d.ts +0 -1
- package/types/components/Avatar/utils/index.d.ts.map +1 -1
- package/types/components/Badge/Badge.types.d.ts +21 -8
- package/types/components/Badge/Badge.types.d.ts.map +1 -1
- package/types/components/Counter/Counter.d.ts +12 -2
- package/types/components/Counter/Counter.d.ts.map +1 -1
- package/types/components/Counter/Counter.types.d.ts +2 -1
- package/types/components/Counter/Counter.types.d.ts.map +1 -1
- package/types/components/NumberInput/NumberInput.d.ts.map +1 -1
- package/types/components/NumberInput/NumberInput.types.d.ts +5 -0
- package/types/components/NumberInput/NumberInput.types.d.ts.map +1 -1
- package/types/components/NumberInput/ui/Input/Input.d.ts +1 -0
- package/types/components/NumberInput/ui/Input/Input.d.ts.map +1 -1
- package/types/components/NumberInput/ui/Input/Input.types.d.ts +1 -0
- package/types/components/NumberInput/ui/Input/Input.types.d.ts.map +1 -1
- package/types/components/NumberInput/utils/index.d.ts +1 -0
- package/types/components/NumberInput/utils/index.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Avatar/Avatar.config.d.ts +0 -18
- package/types/examples/plasma_b2c/components/Avatar/Avatar.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Avatar/Avatar.d.ts +6 -138
- package/types/examples/plasma_b2c/components/Avatar/Avatar.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.d.ts +48 -8
- package/types/examples/plasma_b2c/components/Badge/Badge.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Counter/Counter.d.ts +6 -1
- package/types/examples/plasma_b2c/components/Counter/Counter.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/NumberInput/NumberInput.d.ts +2 -0
- package/types/examples/plasma_b2c/components/NumberInput/NumberInput.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Avatar/Avatar.config.d.ts +0 -18
- package/types/examples/plasma_web/components/Avatar/Avatar.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Avatar/Avatar.d.ts +6 -138
- package/types/examples/plasma_web/components/Avatar/Avatar.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Badge/Badge.d.ts +48 -8
- package/types/examples/plasma_web/components/Badge/Badge.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Counter/Counter.d.ts +6 -1
- package/types/examples/plasma_web/components/Counter/Counter.d.ts.map +1 -1
- package/types/examples/plasma_web/components/NumberInput/NumberInput.d.ts +2 -0
- package/types/examples/plasma_web/components/NumberInput/NumberInput.d.ts.map +1 -1
- package/cjs/components/Avatar/Avatar.styles_131qvfx.css +0 -8
- package/cjs/components/Avatar/utils/index.js +0 -21
- package/cjs/components/Avatar/utils/index.js.map +0 -1
- package/es/components/Avatar/Avatar.styles_131qvfx.css +0 -8
- package/es/components/Avatar/utils/index.js +0 -17
- package/es/components/Avatar/utils/index.js.map +0 -1
@@ -1,4 +1,3 @@
|
|
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';
|
@@ -7,11 +6,6 @@ import { argTypesFromConfig, WithTheme } from '../../../_helpers';
|
|
7
6
|
|
8
7
|
import { Avatar, mergedConfig } from './Avatar';
|
9
8
|
|
10
|
-
const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
|
11
|
-
const extraType = ['', 'badge', 'counter'];
|
12
|
-
const counterViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
13
|
-
const badgeViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
14
|
-
|
15
9
|
const meta: Meta<typeof Avatar> = {
|
16
10
|
title: 'b2c/Data Display/Avatar',
|
17
11
|
decorators: [WithTheme],
|
@@ -19,69 +13,12 @@ const meta: Meta<typeof Avatar> = {
|
|
19
13
|
argTypes: {
|
20
14
|
...argTypesFromConfig(mergedConfig),
|
21
15
|
status: { control: 'select', options: ['active', 'inactive'] },
|
22
|
-
type: {
|
23
|
-
control: 'select',
|
24
|
-
options: extraType,
|
25
|
-
if: { arg: 'hasExtra', truthy: true },
|
26
|
-
},
|
27
|
-
extraPlacement: {
|
28
|
-
control: 'select',
|
29
|
-
options: extraPlacements,
|
30
|
-
if: { arg: 'hasExtra', truthy: true },
|
31
|
-
},
|
32
|
-
counterView: {
|
33
|
-
control: 'select',
|
34
|
-
options: counterViews,
|
35
|
-
if: { arg: 'type', eq: 'counter' },
|
36
|
-
},
|
37
|
-
count: {
|
38
|
-
control: 'number',
|
39
|
-
if: { arg: 'type', eq: 'counter' },
|
40
|
-
},
|
41
|
-
maxCount: {
|
42
|
-
control: 'number',
|
43
|
-
if: { arg: 'type', eq: 'counter' },
|
44
|
-
},
|
45
|
-
badgeView: {
|
46
|
-
control: 'select',
|
47
|
-
options: badgeViews,
|
48
|
-
if: { arg: 'type', eq: 'badge' },
|
49
|
-
},
|
50
|
-
text: {
|
51
|
-
control: 'text',
|
52
|
-
if: { arg: 'type', eq: 'badge' },
|
53
|
-
},
|
54
|
-
customColor: {
|
55
|
-
control: 'color',
|
56
|
-
if: { arg: 'type', eq: 'badge' },
|
57
|
-
},
|
58
|
-
customBackgroundColor: {
|
59
|
-
control: 'color',
|
60
|
-
if: { arg: 'type', eq: 'badge' },
|
61
|
-
},
|
62
|
-
pilled: {
|
63
|
-
control: 'boolean',
|
64
|
-
if: { arg: 'type', eq: 'badge' },
|
65
|
-
},
|
66
16
|
},
|
67
17
|
};
|
68
18
|
|
69
19
|
export default meta;
|
70
20
|
|
71
|
-
type
|
72
|
-
enableContentLeft: boolean;
|
73
|
-
enableContentRight: boolean;
|
74
|
-
};
|
75
|
-
type Story = StoryObj<StoryProps>;
|
76
|
-
|
77
|
-
const BellIcon = (props) => (
|
78
|
-
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
79
|
-
<path
|
80
|
-
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"
|
81
|
-
fill="currentColor"
|
82
|
-
/>
|
83
|
-
</svg>
|
84
|
-
);
|
21
|
+
type Story = StoryObj<ComponentProps<typeof Avatar>>;
|
85
22
|
|
86
23
|
export const Default: Story = {
|
87
24
|
args: {
|
@@ -90,56 +27,10 @@ export const Default: Story = {
|
|
90
27
|
name: 'Иван Фадеев',
|
91
28
|
url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
|
92
29
|
isScalable: false,
|
93
|
-
hasExtra: false,
|
94
|
-
extraPlacement: 'top-right',
|
95
|
-
type: undefined,
|
96
|
-
counterView: 'accent',
|
97
|
-
count: 3,
|
98
|
-
maxCount: 10,
|
99
|
-
badgeView: 'accent',
|
100
|
-
text: '31',
|
101
|
-
pilled: true,
|
102
|
-
enableContentLeft: false,
|
103
|
-
enableContentRight: false,
|
104
30
|
},
|
105
31
|
argTypes: {
|
106
|
-
enableContentLeft: {
|
107
|
-
control: { type: 'boolean' },
|
108
|
-
if: { arg: 'type', eq: 'badge' },
|
109
|
-
},
|
110
|
-
enableContentRight: {
|
111
|
-
control: { type: 'boolean' },
|
112
|
-
if: { arg: 'type', eq: 'badge' },
|
113
|
-
},
|
114
32
|
...disableProps(['focused']),
|
115
33
|
},
|
116
|
-
render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
|
117
|
-
const iconSize = () => {
|
118
|
-
switch (size) {
|
119
|
-
case 'xxl':
|
120
|
-
return '1rem';
|
121
|
-
case 'm':
|
122
|
-
return '0.625rem';
|
123
|
-
default:
|
124
|
-
return '0.75rem';
|
125
|
-
}
|
126
|
-
};
|
127
|
-
|
128
|
-
return (
|
129
|
-
<>
|
130
|
-
<Avatar
|
131
|
-
contentLeft={enableContentLeft ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
|
132
|
-
contentRight={
|
133
|
-
!enableContentLeft && enableContentRight ? (
|
134
|
-
<BellIcon width={iconSize()} height={iconSize()} />
|
135
|
-
) : undefined
|
136
|
-
}
|
137
|
-
size={size}
|
138
|
-
{...rest}
|
139
|
-
/>
|
140
|
-
</>
|
141
|
-
);
|
142
|
-
},
|
143
34
|
};
|
144
35
|
|
145
36
|
export const Accessibility: Story = {
|
@@ -151,14 +42,6 @@ export const Accessibility: Story = {
|
|
151
42
|
size: 'xxl',
|
152
43
|
status: 'active',
|
153
44
|
focused: true,
|
154
|
-
hasExtra: false,
|
155
|
-
extraPlacement: 'top-right',
|
156
|
-
type: undefined,
|
157
|
-
counterView: 'accent',
|
158
|
-
count: 3,
|
159
|
-
maxCount: 10,
|
160
|
-
badgeView: 'accent',
|
161
|
-
text: '31',
|
162
45
|
},
|
163
46
|
};
|
164
47
|
|
@@ -172,14 +55,6 @@ export const AccessibilityWithURL: Story = {
|
|
172
55
|
focused: true,
|
173
56
|
name: 'Микула Селянинович',
|
174
57
|
url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
|
175
|
-
hasExtra: false,
|
176
|
-
extraPlacement: 'top-right',
|
177
|
-
type: undefined,
|
178
|
-
counterView: 'accent',
|
179
|
-
count: 3,
|
180
|
-
maxCount: 10,
|
181
|
-
badgeView: 'accent',
|
182
|
-
text: '31',
|
183
58
|
},
|
184
59
|
};
|
185
60
|
|
@@ -192,13 +67,5 @@ export const AccessibilityWithCustomText: Story = {
|
|
192
67
|
status: 'inactive',
|
193
68
|
focused: true,
|
194
69
|
customText: 'ФИО',
|
195
|
-
hasExtra: false,
|
196
|
-
extraPlacement: 'top-right',
|
197
|
-
type: undefined,
|
198
|
-
counterView: 'accent',
|
199
|
-
count: 3,
|
200
|
-
maxCount: 10,
|
201
|
-
badgeView: 'accent',
|
202
|
-
text: '31',
|
203
70
|
},
|
204
71
|
};
|