@salutejs/plasma-new-hope 0.114.1-canary.1333.10211221618.0 → 0.114.1-canary.1333.10216082008.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Tabs/ui/Tabs/Tabs.css +4 -4
- package/cjs/components/Tabs/ui/Tabs/Tabs.js +2 -1
- package/cjs/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
- package/cjs/components/Tabs/ui/Tabs/Tabs.styles.js +1 -1
- package/cjs/components/Tabs/ui/Tabs/Tabs.styles.js.map +1 -1
- package/cjs/components/Tabs/ui/Tabs/{Tabs.styles_106qhdc.css → Tabs.styles_z4dnzh.css} +1 -1
- package/cjs/index.css +4 -4
- package/emotion/cjs/components/Tabs/ui/Tabs/Tabs.js +2 -1
- package/emotion/cjs/components/Tabs/ui/Tabs/Tabs.styles.js +8 -8
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/TabItem.config.js +15 -15
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +53 -27
- package/emotion/cjs/examples/plasma_web/components/Tabs/TabItem.config.js +15 -15
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +53 -27
- package/emotion/es/components/Tabs/ui/Tabs/Tabs.js +2 -1
- package/emotion/es/components/Tabs/ui/Tabs/Tabs.styles.js +8 -8
- package/emotion/es/examples/plasma_b2c/components/Tabs/TabItem.config.js +15 -15
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +53 -27
- package/emotion/es/examples/plasma_web/components/Tabs/TabItem.config.js +15 -15
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +53 -27
- package/es/components/Tabs/ui/Tabs/Tabs.css +4 -4
- package/es/components/Tabs/ui/Tabs/Tabs.js +2 -1
- package/es/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
- package/es/components/Tabs/ui/Tabs/Tabs.styles.js +1 -1
- package/es/components/Tabs/ui/Tabs/Tabs.styles.js.map +1 -1
- package/es/components/Tabs/ui/Tabs/{Tabs.styles_106qhdc.css → Tabs.styles_z4dnzh.css} +1 -1
- package/es/index.css +4 -4
- package/package.json +2 -2
- package/styled-components/cjs/components/Tabs/ui/Tabs/Tabs.js +2 -1
- package/styled-components/cjs/components/Tabs/ui/Tabs/Tabs.styles.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/TabItem.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +53 -27
- package/styled-components/cjs/examples/plasma_web/components/Tabs/TabItem.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +53 -27
- package/styled-components/es/components/Tabs/ui/Tabs/Tabs.js +2 -1
- package/styled-components/es/components/Tabs/ui/Tabs/Tabs.styles.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Tabs/TabItem.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +53 -27
- package/styled-components/es/examples/plasma_web/components/Tabs/TabItem.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +53 -27
- package/types/components/Tabs/ui/Tabs/Tabs.styles.d.ts.map +1 -1
@@ -18,8 +18,11 @@ const clips = ['none', 'scroll', 'showAll'];
|
|
18
18
|
const sizes = ['xs', 's', 'm', 'l'] as const;
|
19
19
|
const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
|
20
20
|
|
21
|
+
type Size = typeof sizes[number];
|
22
|
+
|
21
23
|
type CustomStoryTabsProps = {
|
22
24
|
hasDivider: boolean;
|
25
|
+
itemQuantity: number;
|
23
26
|
contentLeft: string;
|
24
27
|
contentRight: string;
|
25
28
|
stretch?: boolean;
|
@@ -28,15 +31,20 @@ type CustomStoryTabsProps = {
|
|
28
31
|
const contentLeftOptions = ['none', 'icon'];
|
29
32
|
const contentRightOptions = ['none', 'text', 'counter', 'icon'];
|
30
33
|
|
31
|
-
const getContentLeft = (contentLeftOption: string) =>
|
32
|
-
|
34
|
+
const getContentLeft = (contentLeftOption: string, size: Size) => {
|
35
|
+
const iconSize = size === 'xs' ? 'xs' : 's';
|
36
|
+
return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
|
37
|
+
};
|
38
|
+
|
39
|
+
const getContentRight = (contentRightOption: string, size: Size) => {
|
40
|
+
const iconSize = size === 'xs' ? 'xs' : 's';
|
41
|
+
const counterSize = size === 'xs' ? 'xxs' : 'xs';
|
33
42
|
|
34
|
-
const getContentRight = (contentRightOption: string) => {
|
35
43
|
switch (contentRightOption) {
|
36
44
|
case 'icon':
|
37
|
-
return <IconMic size=
|
45
|
+
return <IconMic size={iconSize} color="inherit" />;
|
38
46
|
case 'counter':
|
39
|
-
return <Counter count={1} view="positive" />;
|
47
|
+
return <Counter size={counterSize} count={1} view="positive" />;
|
40
48
|
case 'text':
|
41
49
|
return <div>Text</div>;
|
42
50
|
default:
|
@@ -71,8 +79,15 @@ const meta: Meta<StoryTabsProps> = {
|
|
71
79
|
export default meta;
|
72
80
|
|
73
81
|
const StoryDefault = (props: StoryTabsProps) => {
|
74
|
-
const {
|
75
|
-
|
82
|
+
const {
|
83
|
+
disabled,
|
84
|
+
itemQuantity,
|
85
|
+
size,
|
86
|
+
contentLeft: contentLeftOption,
|
87
|
+
contentRight: contentRightOption,
|
88
|
+
hasDivider,
|
89
|
+
} = props;
|
90
|
+
const items = Array(itemQuantity).fill(0);
|
76
91
|
const [index, setIndex] = useState(0);
|
77
92
|
|
78
93
|
return (
|
@@ -85,8 +100,8 @@ const StoryDefault = (props: StoryTabsProps) => {
|
|
85
100
|
onClick={() => !disabled && setIndex(i)}
|
86
101
|
tabIndex={!disabled ? 0 : -1}
|
87
102
|
disabled={disabled}
|
88
|
-
contentLeft={getContentLeft(contentLeftOption)}
|
89
|
-
contentRight={getContentRight(contentRightOption)}
|
103
|
+
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
104
|
+
contentRight={getContentRight(contentRightOption, size as Size)}
|
90
105
|
size={size}
|
91
106
|
>
|
92
107
|
{`Label${i + 1}`}
|
@@ -99,13 +114,14 @@ const StoryDefault = (props: StoryTabsProps) => {
|
|
99
114
|
const StoryScroll = (props: StoryTabsProps) => {
|
100
115
|
const {
|
101
116
|
disabled,
|
117
|
+
itemQuantity,
|
102
118
|
clip,
|
103
119
|
size,
|
104
120
|
contentLeft: contentLeftOption,
|
105
121
|
contentRight: contentRightOption,
|
106
122
|
hasDivider,
|
107
123
|
} = props;
|
108
|
-
const items = Array(
|
124
|
+
const items = Array(itemQuantity).fill(0);
|
109
125
|
const [index, setIndex] = useState(0);
|
110
126
|
|
111
127
|
return (
|
@@ -124,8 +140,8 @@ const StoryScroll = (props: StoryTabsProps) => {
|
|
124
140
|
onClick={() => !disabled && setIndex(i)}
|
125
141
|
tabIndex={!disabled ? 0 : -1}
|
126
142
|
disabled={disabled}
|
127
|
-
contentLeft={getContentLeft(contentLeftOption)}
|
128
|
-
contentRight={getContentRight(contentRightOption)}
|
143
|
+
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
144
|
+
contentRight={getContentRight(contentRightOption, size as Size)}
|
129
145
|
size={size}
|
130
146
|
>
|
131
147
|
{`Label${i + 1}`}
|
@@ -138,21 +154,22 @@ const StoryScroll = (props: StoryTabsProps) => {
|
|
138
154
|
const StoryShowAll = (props: StoryTabsProps) => {
|
139
155
|
const {
|
140
156
|
disabled,
|
157
|
+
itemQuantity,
|
141
158
|
clip,
|
142
159
|
size,
|
143
160
|
contentLeft: contentLeftOption,
|
144
161
|
contentRight: contentRightOption,
|
145
162
|
hasDivider,
|
146
163
|
} = props;
|
147
|
-
const
|
148
|
-
const items = Array(
|
164
|
+
const maxItemQuantity = 3;
|
165
|
+
const items = Array(itemQuantity).fill(0);
|
149
166
|
const [index, setIndex] = useState(0);
|
150
167
|
|
151
|
-
const visibleItems = items.slice(0,
|
152
|
-
const otherItems = items.slice(
|
168
|
+
const visibleItems = items.slice(0, maxItemQuantity);
|
169
|
+
const otherItems = items.slice(maxItemQuantity);
|
153
170
|
|
154
171
|
const dropdownItems = otherItems.map((_, i) => {
|
155
|
-
const itemIndex =
|
172
|
+
const itemIndex = maxItemQuantity + i;
|
156
173
|
|
157
174
|
return {
|
158
175
|
label: `Label${itemIndex + 1}`,
|
@@ -170,8 +187,8 @@ const StoryShowAll = (props: StoryTabsProps) => {
|
|
170
187
|
onClick={() => !disabled && setIndex(i)}
|
171
188
|
tabIndex={!disabled ? 0 : -1}
|
172
189
|
disabled={disabled}
|
173
|
-
contentLeft={getContentLeft(contentLeftOption)}
|
174
|
-
contentRight={getContentRight(contentRightOption)}
|
190
|
+
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
191
|
+
contentRight={getContentRight(contentRightOption, size as Size)}
|
175
192
|
size={size}
|
176
193
|
>
|
177
194
|
{`Label${i + 1}`}
|
@@ -180,7 +197,7 @@ const StoryShowAll = (props: StoryTabsProps) => {
|
|
180
197
|
{dropdownItems.length > 0 && (
|
181
198
|
<div style={{ marginLeft: '1.75rem' }}>
|
182
199
|
<Dropdown
|
183
|
-
size={size as
|
200
|
+
size={size as Size}
|
184
201
|
items={dropdownItems}
|
185
202
|
onItemSelect={(item) => setIndex(item.value as number)}
|
186
203
|
>
|
@@ -205,6 +222,7 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
205
222
|
size: 'xs',
|
206
223
|
disabled: false,
|
207
224
|
hasDivider: true,
|
225
|
+
itemQuantity: 8,
|
208
226
|
},
|
209
227
|
argTypes: {
|
210
228
|
clip: {
|
@@ -240,8 +258,9 @@ const StoryStretch = (props: StoryTabsProps) => {
|
|
240
258
|
contentRight: contentRightOption,
|
241
259
|
hasDivider,
|
242
260
|
stretch,
|
261
|
+
itemQuantity,
|
243
262
|
} = props;
|
244
|
-
const items = Array(
|
263
|
+
const items = Array(itemQuantity).fill(0);
|
245
264
|
const [index, setIndex] = useState(0);
|
246
265
|
|
247
266
|
return (
|
@@ -254,8 +273,8 @@ const StoryStretch = (props: StoryTabsProps) => {
|
|
254
273
|
onClick={() => !disabled && setIndex(i)}
|
255
274
|
tabIndex={!disabled ? 0 : -1}
|
256
275
|
disabled={disabled}
|
257
|
-
contentLeft={getContentLeft(contentLeftOption)}
|
258
|
-
contentRight={getContentRight(contentRightOption)}
|
276
|
+
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
277
|
+
contentRight={getContentRight(contentRightOption, size as Size)}
|
259
278
|
size={size}
|
260
279
|
>
|
261
280
|
{`Label${i + 1}`}
|
@@ -284,8 +303,15 @@ export const Stretch: StoryObj<StoryTabsProps> = {
|
|
284
303
|
};
|
285
304
|
|
286
305
|
const StoryHeaderTabs = (props: StoryTabsProps) => {
|
287
|
-
const {
|
288
|
-
|
306
|
+
const {
|
307
|
+
disabled,
|
308
|
+
itemQuantity,
|
309
|
+
size,
|
310
|
+
contentLeft: contentLeftOption,
|
311
|
+
contentRight: contentRightOption,
|
312
|
+
hasDivider,
|
313
|
+
} = props;
|
314
|
+
const items = Array(itemQuantity).fill(0);
|
289
315
|
const [index, setIndex] = useState(0);
|
290
316
|
|
291
317
|
return (
|
@@ -298,8 +324,8 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
|
|
298
324
|
onClick={() => !disabled && setIndex(i)}
|
299
325
|
tabIndex={!disabled ? 0 : -1}
|
300
326
|
disabled={disabled}
|
301
|
-
contentLeft={getContentLeft(contentLeftOption)}
|
302
|
-
contentRight={getContentRight(contentRightOption)}
|
327
|
+
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
328
|
+
contentRight={getContentRight(contentRightOption, size as Size)}
|
303
329
|
size={size}
|
304
330
|
>
|
305
331
|
{`Label${i + 1}`}
|