@salutejs/plasma-new-hope 0.114.1-canary.1333.10216082008.0 → 0.114.1-canary.1333.10249265053.0
Sign up to get free protection for your applications and to get access to all the features.
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +5 -55
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +5 -55
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +5 -55
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +5 -55
- package/package.json +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +5 -55
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +5 -55
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +5 -55
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +5 -55
@@ -25,7 +25,6 @@ type CustomStoryTabsProps = {
|
|
25
25
|
itemQuantity: number;
|
26
26
|
contentLeft: string;
|
27
27
|
contentRight: string;
|
28
|
-
stretch?: boolean;
|
29
28
|
};
|
30
29
|
|
31
30
|
const contentLeftOptions = ['none', 'icon'];
|
@@ -72,7 +71,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
72
71
|
type: 'select',
|
73
72
|
},
|
74
73
|
},
|
75
|
-
...disableProps(['itemsNumber', 'pilled', 'animated', '
|
74
|
+
...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
|
76
75
|
},
|
77
76
|
};
|
78
77
|
|
@@ -86,12 +85,13 @@ const StoryDefault = (props: StoryTabsProps) => {
|
|
86
85
|
contentLeft: contentLeftOption,
|
87
86
|
contentRight: contentRightOption,
|
88
87
|
hasDivider,
|
88
|
+
stretch,
|
89
89
|
} = props;
|
90
90
|
const items = Array(itemQuantity).fill(0);
|
91
91
|
const [index, setIndex] = useState(0);
|
92
92
|
|
93
93
|
return (
|
94
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
|
94
|
+
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
95
95
|
{items.map((_, i) => (
|
96
96
|
<TabItem
|
97
97
|
key={`item:${i}`}
|
@@ -230,6 +230,7 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
230
230
|
control: {
|
231
231
|
type: 'select',
|
232
232
|
},
|
233
|
+
if: { arg: 'stretch', truthy: false },
|
233
234
|
},
|
234
235
|
size: {
|
235
236
|
options: sizes,
|
@@ -250,58 +251,6 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
250
251
|
},
|
251
252
|
};
|
252
253
|
|
253
|
-
const StoryStretch = (props: StoryTabsProps) => {
|
254
|
-
const {
|
255
|
-
disabled,
|
256
|
-
size,
|
257
|
-
contentLeft: contentLeftOption,
|
258
|
-
contentRight: contentRightOption,
|
259
|
-
hasDivider,
|
260
|
-
stretch,
|
261
|
-
itemQuantity,
|
262
|
-
} = props;
|
263
|
-
const items = Array(itemQuantity).fill(0);
|
264
|
-
const [index, setIndex] = useState(0);
|
265
|
-
|
266
|
-
return (
|
267
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
268
|
-
{items.map((_, i) => (
|
269
|
-
<TabItem
|
270
|
-
key={`item:${i}`}
|
271
|
-
view="divider"
|
272
|
-
selected={i === index}
|
273
|
-
onClick={() => !disabled && setIndex(i)}
|
274
|
-
tabIndex={!disabled ? 0 : -1}
|
275
|
-
disabled={disabled}
|
276
|
-
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
277
|
-
contentRight={getContentRight(contentRightOption, size as Size)}
|
278
|
-
size={size}
|
279
|
-
>
|
280
|
-
{`Label${i + 1}`}
|
281
|
-
</TabItem>
|
282
|
-
))}
|
283
|
-
</Tabs>
|
284
|
-
);
|
285
|
-
};
|
286
|
-
|
287
|
-
export const Stretch: StoryObj<StoryTabsProps> = {
|
288
|
-
args: {
|
289
|
-
size: 'xs',
|
290
|
-
stretch: true,
|
291
|
-
disabled: false,
|
292
|
-
hasDivider: true,
|
293
|
-
},
|
294
|
-
argTypes: {
|
295
|
-
size: {
|
296
|
-
options: sizes,
|
297
|
-
control: {
|
298
|
-
type: 'select',
|
299
|
-
},
|
300
|
-
},
|
301
|
-
},
|
302
|
-
render: (args) => <StoryStretch {...args} />,
|
303
|
-
};
|
304
|
-
|
305
254
|
const StoryHeaderTabs = (props: StoryTabsProps) => {
|
306
255
|
const {
|
307
256
|
disabled,
|
@@ -340,6 +289,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
|
340
289
|
size: 'h5',
|
341
290
|
disabled: false,
|
342
291
|
hasDivider: true,
|
292
|
+
itemQuantity: 4,
|
343
293
|
},
|
344
294
|
argTypes: {
|
345
295
|
size: {
|
@@ -25,7 +25,6 @@ type CustomStoryTabsProps = {
|
|
25
25
|
itemQuantity: number;
|
26
26
|
contentLeft: string;
|
27
27
|
contentRight: string;
|
28
|
-
stretch?: boolean;
|
29
28
|
};
|
30
29
|
|
31
30
|
const contentLeftOptions = ['none', 'icon'];
|
@@ -72,7 +71,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
72
71
|
type: 'select',
|
73
72
|
},
|
74
73
|
},
|
75
|
-
...disableProps(['itemsNumber', 'pilled', 'animated', '
|
74
|
+
...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
|
76
75
|
},
|
77
76
|
};
|
78
77
|
|
@@ -86,12 +85,13 @@ const StoryDefault = (props: StoryTabsProps) => {
|
|
86
85
|
contentLeft: contentLeftOption,
|
87
86
|
contentRight: contentRightOption,
|
88
87
|
hasDivider,
|
88
|
+
stretch,
|
89
89
|
} = props;
|
90
90
|
const items = Array(itemQuantity).fill(0);
|
91
91
|
const [index, setIndex] = useState(0);
|
92
92
|
|
93
93
|
return (
|
94
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
|
94
|
+
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
95
95
|
{items.map((_, i) => (
|
96
96
|
<TabItem
|
97
97
|
key={`item:${i}`}
|
@@ -230,6 +230,7 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
230
230
|
control: {
|
231
231
|
type: 'select',
|
232
232
|
},
|
233
|
+
if: { arg: 'stretch', truthy: false },
|
233
234
|
},
|
234
235
|
size: {
|
235
236
|
options: sizes,
|
@@ -250,58 +251,6 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
250
251
|
},
|
251
252
|
};
|
252
253
|
|
253
|
-
const StoryStretch = (props: StoryTabsProps) => {
|
254
|
-
const {
|
255
|
-
disabled,
|
256
|
-
size,
|
257
|
-
contentLeft: contentLeftOption,
|
258
|
-
contentRight: contentRightOption,
|
259
|
-
hasDivider,
|
260
|
-
stretch,
|
261
|
-
itemQuantity,
|
262
|
-
} = props;
|
263
|
-
const items = Array(itemQuantity).fill(0);
|
264
|
-
const [index, setIndex] = useState(0);
|
265
|
-
|
266
|
-
return (
|
267
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
268
|
-
{items.map((_, i) => (
|
269
|
-
<TabItem
|
270
|
-
key={`item:${i}`}
|
271
|
-
view="divider"
|
272
|
-
selected={i === index}
|
273
|
-
onClick={() => !disabled && setIndex(i)}
|
274
|
-
tabIndex={!disabled ? 0 : -1}
|
275
|
-
disabled={disabled}
|
276
|
-
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
277
|
-
contentRight={getContentRight(contentRightOption, size as Size)}
|
278
|
-
size={size}
|
279
|
-
>
|
280
|
-
{`Label${i + 1}`}
|
281
|
-
</TabItem>
|
282
|
-
))}
|
283
|
-
</Tabs>
|
284
|
-
);
|
285
|
-
};
|
286
|
-
|
287
|
-
export const Stretch: StoryObj<StoryTabsProps> = {
|
288
|
-
args: {
|
289
|
-
size: 'xs',
|
290
|
-
stretch: true,
|
291
|
-
disabled: false,
|
292
|
-
hasDivider: true,
|
293
|
-
},
|
294
|
-
argTypes: {
|
295
|
-
size: {
|
296
|
-
options: sizes,
|
297
|
-
control: {
|
298
|
-
type: 'select',
|
299
|
-
},
|
300
|
-
},
|
301
|
-
},
|
302
|
-
render: (args) => <StoryStretch {...args} />,
|
303
|
-
};
|
304
|
-
|
305
254
|
const StoryHeaderTabs = (props: StoryTabsProps) => {
|
306
255
|
const {
|
307
256
|
disabled,
|
@@ -340,6 +289,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
|
340
289
|
size: 'h5',
|
341
290
|
disabled: false,
|
342
291
|
hasDivider: true,
|
292
|
+
itemQuantity: 4,
|
343
293
|
},
|
344
294
|
argTypes: {
|
345
295
|
size: {
|
@@ -25,7 +25,6 @@ type CustomStoryTabsProps = {
|
|
25
25
|
itemQuantity: number;
|
26
26
|
contentLeft: string;
|
27
27
|
contentRight: string;
|
28
|
-
stretch?: boolean;
|
29
28
|
};
|
30
29
|
|
31
30
|
const contentLeftOptions = ['none', 'icon'];
|
@@ -72,7 +71,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
72
71
|
type: 'select',
|
73
72
|
},
|
74
73
|
},
|
75
|
-
...disableProps(['itemsNumber', 'pilled', 'animated', '
|
74
|
+
...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
|
76
75
|
},
|
77
76
|
};
|
78
77
|
|
@@ -86,12 +85,13 @@ const StoryDefault = (props: StoryTabsProps) => {
|
|
86
85
|
contentLeft: contentLeftOption,
|
87
86
|
contentRight: contentRightOption,
|
88
87
|
hasDivider,
|
88
|
+
stretch,
|
89
89
|
} = props;
|
90
90
|
const items = Array(itemQuantity).fill(0);
|
91
91
|
const [index, setIndex] = useState(0);
|
92
92
|
|
93
93
|
return (
|
94
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
|
94
|
+
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
95
95
|
{items.map((_, i) => (
|
96
96
|
<TabItem
|
97
97
|
key={`item:${i}`}
|
@@ -230,6 +230,7 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
230
230
|
control: {
|
231
231
|
type: 'select',
|
232
232
|
},
|
233
|
+
if: { arg: 'stretch', truthy: false },
|
233
234
|
},
|
234
235
|
size: {
|
235
236
|
options: sizes,
|
@@ -250,58 +251,6 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
250
251
|
},
|
251
252
|
};
|
252
253
|
|
253
|
-
const StoryStretch = (props: StoryTabsProps) => {
|
254
|
-
const {
|
255
|
-
disabled,
|
256
|
-
size,
|
257
|
-
contentLeft: contentLeftOption,
|
258
|
-
contentRight: contentRightOption,
|
259
|
-
hasDivider,
|
260
|
-
stretch,
|
261
|
-
itemQuantity,
|
262
|
-
} = props;
|
263
|
-
const items = Array(itemQuantity).fill(0);
|
264
|
-
const [index, setIndex] = useState(0);
|
265
|
-
|
266
|
-
return (
|
267
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
268
|
-
{items.map((_, i) => (
|
269
|
-
<TabItem
|
270
|
-
key={`item:${i}`}
|
271
|
-
view="divider"
|
272
|
-
selected={i === index}
|
273
|
-
onClick={() => !disabled && setIndex(i)}
|
274
|
-
tabIndex={!disabled ? 0 : -1}
|
275
|
-
disabled={disabled}
|
276
|
-
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
277
|
-
contentRight={getContentRight(contentRightOption, size as Size)}
|
278
|
-
size={size}
|
279
|
-
>
|
280
|
-
{`Label${i + 1}`}
|
281
|
-
</TabItem>
|
282
|
-
))}
|
283
|
-
</Tabs>
|
284
|
-
);
|
285
|
-
};
|
286
|
-
|
287
|
-
export const Stretch: StoryObj<StoryTabsProps> = {
|
288
|
-
args: {
|
289
|
-
size: 'xs',
|
290
|
-
stretch: true,
|
291
|
-
disabled: false,
|
292
|
-
hasDivider: true,
|
293
|
-
},
|
294
|
-
argTypes: {
|
295
|
-
size: {
|
296
|
-
options: sizes,
|
297
|
-
control: {
|
298
|
-
type: 'select',
|
299
|
-
},
|
300
|
-
},
|
301
|
-
},
|
302
|
-
render: (args) => <StoryStretch {...args} />,
|
303
|
-
};
|
304
|
-
|
305
254
|
const StoryHeaderTabs = (props: StoryTabsProps) => {
|
306
255
|
const {
|
307
256
|
disabled,
|
@@ -340,6 +289,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
|
340
289
|
size: 'h5',
|
341
290
|
disabled: false,
|
342
291
|
hasDivider: true,
|
292
|
+
itemQuantity: 4,
|
343
293
|
},
|
344
294
|
argTypes: {
|
345
295
|
size: {
|
@@ -25,7 +25,6 @@ type CustomStoryTabsProps = {
|
|
25
25
|
itemQuantity: number;
|
26
26
|
contentLeft: string;
|
27
27
|
contentRight: string;
|
28
|
-
stretch?: boolean;
|
29
28
|
};
|
30
29
|
|
31
30
|
const contentLeftOptions = ['none', 'icon'];
|
@@ -72,7 +71,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
72
71
|
type: 'select',
|
73
72
|
},
|
74
73
|
},
|
75
|
-
...disableProps(['itemsNumber', 'pilled', 'animated', '
|
74
|
+
...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
|
76
75
|
},
|
77
76
|
};
|
78
77
|
|
@@ -86,12 +85,13 @@ const StoryDefault = (props: StoryTabsProps) => {
|
|
86
85
|
contentLeft: contentLeftOption,
|
87
86
|
contentRight: contentRightOption,
|
88
87
|
hasDivider,
|
88
|
+
stretch,
|
89
89
|
} = props;
|
90
90
|
const items = Array(itemQuantity).fill(0);
|
91
91
|
const [index, setIndex] = useState(0);
|
92
92
|
|
93
93
|
return (
|
94
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
|
94
|
+
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
95
95
|
{items.map((_, i) => (
|
96
96
|
<TabItem
|
97
97
|
key={`item:${i}`}
|
@@ -230,6 +230,7 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
230
230
|
control: {
|
231
231
|
type: 'select',
|
232
232
|
},
|
233
|
+
if: { arg: 'stretch', truthy: false },
|
233
234
|
},
|
234
235
|
size: {
|
235
236
|
options: sizes,
|
@@ -250,58 +251,6 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
250
251
|
},
|
251
252
|
};
|
252
253
|
|
253
|
-
const StoryStretch = (props: StoryTabsProps) => {
|
254
|
-
const {
|
255
|
-
disabled,
|
256
|
-
size,
|
257
|
-
contentLeft: contentLeftOption,
|
258
|
-
contentRight: contentRightOption,
|
259
|
-
hasDivider,
|
260
|
-
stretch,
|
261
|
-
itemQuantity,
|
262
|
-
} = props;
|
263
|
-
const items = Array(itemQuantity).fill(0);
|
264
|
-
const [index, setIndex] = useState(0);
|
265
|
-
|
266
|
-
return (
|
267
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
268
|
-
{items.map((_, i) => (
|
269
|
-
<TabItem
|
270
|
-
key={`item:${i}`}
|
271
|
-
view="divider"
|
272
|
-
selected={i === index}
|
273
|
-
onClick={() => !disabled && setIndex(i)}
|
274
|
-
tabIndex={!disabled ? 0 : -1}
|
275
|
-
disabled={disabled}
|
276
|
-
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
277
|
-
contentRight={getContentRight(contentRightOption, size as Size)}
|
278
|
-
size={size}
|
279
|
-
>
|
280
|
-
{`Label${i + 1}`}
|
281
|
-
</TabItem>
|
282
|
-
))}
|
283
|
-
</Tabs>
|
284
|
-
);
|
285
|
-
};
|
286
|
-
|
287
|
-
export const Stretch: StoryObj<StoryTabsProps> = {
|
288
|
-
args: {
|
289
|
-
size: 'xs',
|
290
|
-
stretch: true,
|
291
|
-
disabled: false,
|
292
|
-
hasDivider: true,
|
293
|
-
},
|
294
|
-
argTypes: {
|
295
|
-
size: {
|
296
|
-
options: sizes,
|
297
|
-
control: {
|
298
|
-
type: 'select',
|
299
|
-
},
|
300
|
-
},
|
301
|
-
},
|
302
|
-
render: (args) => <StoryStretch {...args} />,
|
303
|
-
};
|
304
|
-
|
305
254
|
const StoryHeaderTabs = (props: StoryTabsProps) => {
|
306
255
|
const {
|
307
256
|
disabled,
|
@@ -340,6 +289,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
|
340
289
|
size: 'h5',
|
341
290
|
disabled: false,
|
342
291
|
hasDivider: true,
|
292
|
+
itemQuantity: 4,
|
343
293
|
},
|
344
294
|
argTypes: {
|
345
295
|
size: {
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.114.1-canary.1333.
|
3
|
+
"version": "0.114.1-canary.1333.10249265053.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -118,5 +118,5 @@
|
|
118
118
|
"react-popper": "2.3.0",
|
119
119
|
"storeon": "3.1.5"
|
120
120
|
},
|
121
|
-
"gitHead": "
|
121
|
+
"gitHead": "1f8c25d17911e9dc3e64611c5863ff3caab168ce"
|
122
122
|
}
|
@@ -25,7 +25,6 @@ type CustomStoryTabsProps = {
|
|
25
25
|
itemQuantity: number;
|
26
26
|
contentLeft: string;
|
27
27
|
contentRight: string;
|
28
|
-
stretch?: boolean;
|
29
28
|
};
|
30
29
|
|
31
30
|
const contentLeftOptions = ['none', 'icon'];
|
@@ -72,7 +71,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
72
71
|
type: 'select',
|
73
72
|
},
|
74
73
|
},
|
75
|
-
...disableProps(['itemsNumber', 'pilled', 'animated', '
|
74
|
+
...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
|
76
75
|
},
|
77
76
|
};
|
78
77
|
|
@@ -86,12 +85,13 @@ const StoryDefault = (props: StoryTabsProps) => {
|
|
86
85
|
contentLeft: contentLeftOption,
|
87
86
|
contentRight: contentRightOption,
|
88
87
|
hasDivider,
|
88
|
+
stretch,
|
89
89
|
} = props;
|
90
90
|
const items = Array(itemQuantity).fill(0);
|
91
91
|
const [index, setIndex] = useState(0);
|
92
92
|
|
93
93
|
return (
|
94
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
|
94
|
+
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
95
95
|
{items.map((_, i) => (
|
96
96
|
<TabItem
|
97
97
|
key={`item:${i}`}
|
@@ -230,6 +230,7 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
230
230
|
control: {
|
231
231
|
type: 'select',
|
232
232
|
},
|
233
|
+
if: { arg: 'stretch', truthy: false },
|
233
234
|
},
|
234
235
|
size: {
|
235
236
|
options: sizes,
|
@@ -250,58 +251,6 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
250
251
|
},
|
251
252
|
};
|
252
253
|
|
253
|
-
const StoryStretch = (props: StoryTabsProps) => {
|
254
|
-
const {
|
255
|
-
disabled,
|
256
|
-
size,
|
257
|
-
contentLeft: contentLeftOption,
|
258
|
-
contentRight: contentRightOption,
|
259
|
-
hasDivider,
|
260
|
-
stretch,
|
261
|
-
itemQuantity,
|
262
|
-
} = props;
|
263
|
-
const items = Array(itemQuantity).fill(0);
|
264
|
-
const [index, setIndex] = useState(0);
|
265
|
-
|
266
|
-
return (
|
267
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
268
|
-
{items.map((_, i) => (
|
269
|
-
<TabItem
|
270
|
-
key={`item:${i}`}
|
271
|
-
view="divider"
|
272
|
-
selected={i === index}
|
273
|
-
onClick={() => !disabled && setIndex(i)}
|
274
|
-
tabIndex={!disabled ? 0 : -1}
|
275
|
-
disabled={disabled}
|
276
|
-
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
277
|
-
contentRight={getContentRight(contentRightOption, size as Size)}
|
278
|
-
size={size}
|
279
|
-
>
|
280
|
-
{`Label${i + 1}`}
|
281
|
-
</TabItem>
|
282
|
-
))}
|
283
|
-
</Tabs>
|
284
|
-
);
|
285
|
-
};
|
286
|
-
|
287
|
-
export const Stretch: StoryObj<StoryTabsProps> = {
|
288
|
-
args: {
|
289
|
-
size: 'xs',
|
290
|
-
stretch: true,
|
291
|
-
disabled: false,
|
292
|
-
hasDivider: true,
|
293
|
-
},
|
294
|
-
argTypes: {
|
295
|
-
size: {
|
296
|
-
options: sizes,
|
297
|
-
control: {
|
298
|
-
type: 'select',
|
299
|
-
},
|
300
|
-
},
|
301
|
-
},
|
302
|
-
render: (args) => <StoryStretch {...args} />,
|
303
|
-
};
|
304
|
-
|
305
254
|
const StoryHeaderTabs = (props: StoryTabsProps) => {
|
306
255
|
const {
|
307
256
|
disabled,
|
@@ -340,6 +289,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
|
340
289
|
size: 'h5',
|
341
290
|
disabled: false,
|
342
291
|
hasDivider: true,
|
292
|
+
itemQuantity: 4,
|
343
293
|
},
|
344
294
|
argTypes: {
|
345
295
|
size: {
|
@@ -25,7 +25,6 @@ type CustomStoryTabsProps = {
|
|
25
25
|
itemQuantity: number;
|
26
26
|
contentLeft: string;
|
27
27
|
contentRight: string;
|
28
|
-
stretch?: boolean;
|
29
28
|
};
|
30
29
|
|
31
30
|
const contentLeftOptions = ['none', 'icon'];
|
@@ -72,7 +71,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
72
71
|
type: 'select',
|
73
72
|
},
|
74
73
|
},
|
75
|
-
...disableProps(['itemsNumber', 'pilled', 'animated', '
|
74
|
+
...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
|
76
75
|
},
|
77
76
|
};
|
78
77
|
|
@@ -86,12 +85,13 @@ const StoryDefault = (props: StoryTabsProps) => {
|
|
86
85
|
contentLeft: contentLeftOption,
|
87
86
|
contentRight: contentRightOption,
|
88
87
|
hasDivider,
|
88
|
+
stretch,
|
89
89
|
} = props;
|
90
90
|
const items = Array(itemQuantity).fill(0);
|
91
91
|
const [index, setIndex] = useState(0);
|
92
92
|
|
93
93
|
return (
|
94
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
|
94
|
+
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
95
95
|
{items.map((_, i) => (
|
96
96
|
<TabItem
|
97
97
|
key={`item:${i}`}
|
@@ -230,6 +230,7 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
230
230
|
control: {
|
231
231
|
type: 'select',
|
232
232
|
},
|
233
|
+
if: { arg: 'stretch', truthy: false },
|
233
234
|
},
|
234
235
|
size: {
|
235
236
|
options: sizes,
|
@@ -250,58 +251,6 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
250
251
|
},
|
251
252
|
};
|
252
253
|
|
253
|
-
const StoryStretch = (props: StoryTabsProps) => {
|
254
|
-
const {
|
255
|
-
disabled,
|
256
|
-
size,
|
257
|
-
contentLeft: contentLeftOption,
|
258
|
-
contentRight: contentRightOption,
|
259
|
-
hasDivider,
|
260
|
-
stretch,
|
261
|
-
itemQuantity,
|
262
|
-
} = props;
|
263
|
-
const items = Array(itemQuantity).fill(0);
|
264
|
-
const [index, setIndex] = useState(0);
|
265
|
-
|
266
|
-
return (
|
267
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
268
|
-
{items.map((_, i) => (
|
269
|
-
<TabItem
|
270
|
-
key={`item:${i}`}
|
271
|
-
view="divider"
|
272
|
-
selected={i === index}
|
273
|
-
onClick={() => !disabled && setIndex(i)}
|
274
|
-
tabIndex={!disabled ? 0 : -1}
|
275
|
-
disabled={disabled}
|
276
|
-
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
277
|
-
contentRight={getContentRight(contentRightOption, size as Size)}
|
278
|
-
size={size}
|
279
|
-
>
|
280
|
-
{`Label${i + 1}`}
|
281
|
-
</TabItem>
|
282
|
-
))}
|
283
|
-
</Tabs>
|
284
|
-
);
|
285
|
-
};
|
286
|
-
|
287
|
-
export const Stretch: StoryObj<StoryTabsProps> = {
|
288
|
-
args: {
|
289
|
-
size: 'xs',
|
290
|
-
stretch: true,
|
291
|
-
disabled: false,
|
292
|
-
hasDivider: true,
|
293
|
-
},
|
294
|
-
argTypes: {
|
295
|
-
size: {
|
296
|
-
options: sizes,
|
297
|
-
control: {
|
298
|
-
type: 'select',
|
299
|
-
},
|
300
|
-
},
|
301
|
-
},
|
302
|
-
render: (args) => <StoryStretch {...args} />,
|
303
|
-
};
|
304
|
-
|
305
254
|
const StoryHeaderTabs = (props: StoryTabsProps) => {
|
306
255
|
const {
|
307
256
|
disabled,
|
@@ -340,6 +289,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
|
340
289
|
size: 'h5',
|
341
290
|
disabled: false,
|
342
291
|
hasDivider: true,
|
292
|
+
itemQuantity: 4,
|
343
293
|
},
|
344
294
|
argTypes: {
|
345
295
|
size: {
|
@@ -25,7 +25,6 @@ type CustomStoryTabsProps = {
|
|
25
25
|
itemQuantity: number;
|
26
26
|
contentLeft: string;
|
27
27
|
contentRight: string;
|
28
|
-
stretch?: boolean;
|
29
28
|
};
|
30
29
|
|
31
30
|
const contentLeftOptions = ['none', 'icon'];
|
@@ -72,7 +71,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
72
71
|
type: 'select',
|
73
72
|
},
|
74
73
|
},
|
75
|
-
...disableProps(['itemsNumber', 'pilled', 'animated', '
|
74
|
+
...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
|
76
75
|
},
|
77
76
|
};
|
78
77
|
|
@@ -86,12 +85,13 @@ const StoryDefault = (props: StoryTabsProps) => {
|
|
86
85
|
contentLeft: contentLeftOption,
|
87
86
|
contentRight: contentRightOption,
|
88
87
|
hasDivider,
|
88
|
+
stretch,
|
89
89
|
} = props;
|
90
90
|
const items = Array(itemQuantity).fill(0);
|
91
91
|
const [index, setIndex] = useState(0);
|
92
92
|
|
93
93
|
return (
|
94
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
|
94
|
+
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
95
95
|
{items.map((_, i) => (
|
96
96
|
<TabItem
|
97
97
|
key={`item:${i}`}
|
@@ -230,6 +230,7 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
230
230
|
control: {
|
231
231
|
type: 'select',
|
232
232
|
},
|
233
|
+
if: { arg: 'stretch', truthy: false },
|
233
234
|
},
|
234
235
|
size: {
|
235
236
|
options: sizes,
|
@@ -250,58 +251,6 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
250
251
|
},
|
251
252
|
};
|
252
253
|
|
253
|
-
const StoryStretch = (props: StoryTabsProps) => {
|
254
|
-
const {
|
255
|
-
disabled,
|
256
|
-
size,
|
257
|
-
contentLeft: contentLeftOption,
|
258
|
-
contentRight: contentRightOption,
|
259
|
-
hasDivider,
|
260
|
-
stretch,
|
261
|
-
itemQuantity,
|
262
|
-
} = props;
|
263
|
-
const items = Array(itemQuantity).fill(0);
|
264
|
-
const [index, setIndex] = useState(0);
|
265
|
-
|
266
|
-
return (
|
267
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
268
|
-
{items.map((_, i) => (
|
269
|
-
<TabItem
|
270
|
-
key={`item:${i}`}
|
271
|
-
view="divider"
|
272
|
-
selected={i === index}
|
273
|
-
onClick={() => !disabled && setIndex(i)}
|
274
|
-
tabIndex={!disabled ? 0 : -1}
|
275
|
-
disabled={disabled}
|
276
|
-
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
277
|
-
contentRight={getContentRight(contentRightOption, size as Size)}
|
278
|
-
size={size}
|
279
|
-
>
|
280
|
-
{`Label${i + 1}`}
|
281
|
-
</TabItem>
|
282
|
-
))}
|
283
|
-
</Tabs>
|
284
|
-
);
|
285
|
-
};
|
286
|
-
|
287
|
-
export const Stretch: StoryObj<StoryTabsProps> = {
|
288
|
-
args: {
|
289
|
-
size: 'xs',
|
290
|
-
stretch: true,
|
291
|
-
disabled: false,
|
292
|
-
hasDivider: true,
|
293
|
-
},
|
294
|
-
argTypes: {
|
295
|
-
size: {
|
296
|
-
options: sizes,
|
297
|
-
control: {
|
298
|
-
type: 'select',
|
299
|
-
},
|
300
|
-
},
|
301
|
-
},
|
302
|
-
render: (args) => <StoryStretch {...args} />,
|
303
|
-
};
|
304
|
-
|
305
254
|
const StoryHeaderTabs = (props: StoryTabsProps) => {
|
306
255
|
const {
|
307
256
|
disabled,
|
@@ -340,6 +289,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
|
340
289
|
size: 'h5',
|
341
290
|
disabled: false,
|
342
291
|
hasDivider: true,
|
292
|
+
itemQuantity: 4,
|
343
293
|
},
|
344
294
|
argTypes: {
|
345
295
|
size: {
|
@@ -25,7 +25,6 @@ type CustomStoryTabsProps = {
|
|
25
25
|
itemQuantity: number;
|
26
26
|
contentLeft: string;
|
27
27
|
contentRight: string;
|
28
|
-
stretch?: boolean;
|
29
28
|
};
|
30
29
|
|
31
30
|
const contentLeftOptions = ['none', 'icon'];
|
@@ -72,7 +71,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
72
71
|
type: 'select',
|
73
72
|
},
|
74
73
|
},
|
75
|
-
...disableProps(['itemsNumber', 'pilled', 'animated', '
|
74
|
+
...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
|
76
75
|
},
|
77
76
|
};
|
78
77
|
|
@@ -86,12 +85,13 @@ const StoryDefault = (props: StoryTabsProps) => {
|
|
86
85
|
contentLeft: contentLeftOption,
|
87
86
|
contentRight: contentRightOption,
|
88
87
|
hasDivider,
|
88
|
+
stretch,
|
89
89
|
} = props;
|
90
90
|
const items = Array(itemQuantity).fill(0);
|
91
91
|
const [index, setIndex] = useState(0);
|
92
92
|
|
93
93
|
return (
|
94
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
|
94
|
+
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
95
95
|
{items.map((_, i) => (
|
96
96
|
<TabItem
|
97
97
|
key={`item:${i}`}
|
@@ -230,6 +230,7 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
230
230
|
control: {
|
231
231
|
type: 'select',
|
232
232
|
},
|
233
|
+
if: { arg: 'stretch', truthy: false },
|
233
234
|
},
|
234
235
|
size: {
|
235
236
|
options: sizes,
|
@@ -250,58 +251,6 @@ export const Default: StoryObj<StoryTabsProps> = {
|
|
250
251
|
},
|
251
252
|
};
|
252
253
|
|
253
|
-
const StoryStretch = (props: StoryTabsProps) => {
|
254
|
-
const {
|
255
|
-
disabled,
|
256
|
-
size,
|
257
|
-
contentLeft: contentLeftOption,
|
258
|
-
contentRight: contentRightOption,
|
259
|
-
hasDivider,
|
260
|
-
stretch,
|
261
|
-
itemQuantity,
|
262
|
-
} = props;
|
263
|
-
const items = Array(itemQuantity).fill(0);
|
264
|
-
const [index, setIndex] = useState(0);
|
265
|
-
|
266
|
-
return (
|
267
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
|
268
|
-
{items.map((_, i) => (
|
269
|
-
<TabItem
|
270
|
-
key={`item:${i}`}
|
271
|
-
view="divider"
|
272
|
-
selected={i === index}
|
273
|
-
onClick={() => !disabled && setIndex(i)}
|
274
|
-
tabIndex={!disabled ? 0 : -1}
|
275
|
-
disabled={disabled}
|
276
|
-
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
277
|
-
contentRight={getContentRight(contentRightOption, size as Size)}
|
278
|
-
size={size}
|
279
|
-
>
|
280
|
-
{`Label${i + 1}`}
|
281
|
-
</TabItem>
|
282
|
-
))}
|
283
|
-
</Tabs>
|
284
|
-
);
|
285
|
-
};
|
286
|
-
|
287
|
-
export const Stretch: StoryObj<StoryTabsProps> = {
|
288
|
-
args: {
|
289
|
-
size: 'xs',
|
290
|
-
stretch: true,
|
291
|
-
disabled: false,
|
292
|
-
hasDivider: true,
|
293
|
-
},
|
294
|
-
argTypes: {
|
295
|
-
size: {
|
296
|
-
options: sizes,
|
297
|
-
control: {
|
298
|
-
type: 'select',
|
299
|
-
},
|
300
|
-
},
|
301
|
-
},
|
302
|
-
render: (args) => <StoryStretch {...args} />,
|
303
|
-
};
|
304
|
-
|
305
254
|
const StoryHeaderTabs = (props: StoryTabsProps) => {
|
306
255
|
const {
|
307
256
|
disabled,
|
@@ -340,6 +289,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
|
340
289
|
size: 'h5',
|
341
290
|
disabled: false,
|
342
291
|
hasDivider: true,
|
292
|
+
itemQuantity: 4,
|
343
293
|
},
|
344
294
|
argTypes: {
|
345
295
|
size: {
|