@salutejs/plasma-new-hope 0.163.0-dev.0 → 0.163.1-canary.1476.11275359231.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map +1 -1
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +29 -16
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +29 -16
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +29 -16
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +29 -16
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +29 -16
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +29 -16
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +29 -16
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +29 -16
@@ -50,6 +50,8 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
50
50
|
};
|
51
51
|
|
52
52
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
53
|
+
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
54
|
+
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
53
55
|
|
54
56
|
const meta: Meta<StoryTabsProps> = {
|
55
57
|
title: 'plasma_b2c/Tabs',
|
@@ -79,7 +81,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
79
81
|
|
80
82
|
export default meta;
|
81
83
|
|
82
|
-
const StoryHorizontalDefault = (props:
|
84
|
+
const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
83
85
|
const {
|
84
86
|
disabled,
|
85
87
|
itemQuantity,
|
@@ -134,7 +136,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
|
134
136
|
);
|
135
137
|
};
|
136
138
|
|
137
|
-
const StoryHorizontalScroll = (props:
|
139
|
+
const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
138
140
|
const {
|
139
141
|
disabled,
|
140
142
|
itemQuantity,
|
@@ -144,18 +146,13 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
144
146
|
contentRight: contentRightOption,
|
145
147
|
hasDivider,
|
146
148
|
helperText,
|
149
|
+
width,
|
147
150
|
} = props;
|
148
151
|
const items = Array(itemQuantity).fill(0);
|
149
152
|
const [index, setIndex] = useState(0);
|
150
153
|
|
151
154
|
return (
|
152
|
-
<Tabs
|
153
|
-
clip={clip}
|
154
|
-
view={hasDivider ? 'divider' : 'clear'}
|
155
|
-
disabled={disabled}
|
156
|
-
size={size}
|
157
|
-
style={{ width: '15rem' }}
|
158
|
-
>
|
155
|
+
<Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
|
159
156
|
{items.map((_, i) => {
|
160
157
|
if (helperText !== '') {
|
161
158
|
return (
|
@@ -195,7 +192,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
195
192
|
);
|
196
193
|
};
|
197
194
|
|
198
|
-
const StoryHorizontalShowAll = (props:
|
195
|
+
const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
199
196
|
const {
|
200
197
|
disabled,
|
201
198
|
itemQuantity,
|
@@ -282,13 +279,15 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
|
282
279
|
);
|
283
280
|
};
|
284
281
|
|
285
|
-
export const HorizontalTabs: StoryObj<
|
282
|
+
export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
286
283
|
args: {
|
287
284
|
size: 'xs',
|
288
285
|
disabled: false,
|
289
286
|
hasDivider: true,
|
290
287
|
helperText: '',
|
291
288
|
itemQuantity: 8,
|
289
|
+
stretch: false,
|
290
|
+
width: '15rem',
|
292
291
|
},
|
293
292
|
argTypes: {
|
294
293
|
contentLeft: {
|
@@ -310,6 +309,12 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
|
310
309
|
},
|
311
310
|
if: { arg: 'stretch', truthy: false },
|
312
311
|
},
|
312
|
+
width: {
|
313
|
+
control: {
|
314
|
+
type: 'text',
|
315
|
+
},
|
316
|
+
if: { arg: 'clip', eq: 'scroll' },
|
317
|
+
},
|
313
318
|
size: {
|
314
319
|
options: sizes,
|
315
320
|
control: {
|
@@ -329,7 +334,7 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
|
329
334
|
},
|
330
335
|
};
|
331
336
|
|
332
|
-
const StoryVerticalDefault = (props:
|
337
|
+
const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
333
338
|
const {
|
334
339
|
disabled,
|
335
340
|
itemQuantity,
|
@@ -385,7 +390,7 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
|
|
385
390
|
);
|
386
391
|
};
|
387
392
|
|
388
|
-
const StoryVerticalScroll = (props:
|
393
|
+
const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
389
394
|
const {
|
390
395
|
disabled,
|
391
396
|
itemQuantity,
|
@@ -395,6 +400,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
395
400
|
contentRight: contentRightOption,
|
396
401
|
hasDivider,
|
397
402
|
helperText,
|
403
|
+
height,
|
398
404
|
} = props;
|
399
405
|
const items = Array(itemQuantity).fill(0);
|
400
406
|
const [index, setIndex] = useState(0);
|
@@ -405,8 +411,8 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
405
411
|
size={size as Size}
|
406
412
|
disabled={disabled}
|
407
413
|
clip={clip}
|
408
|
-
style={{ height: '10rem' }}
|
409
414
|
hasDivider={hasDivider}
|
415
|
+
style={{ height }}
|
410
416
|
>
|
411
417
|
{items.map((_, i) => {
|
412
418
|
if (helperText !== '') {
|
@@ -449,7 +455,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
449
455
|
);
|
450
456
|
};
|
451
457
|
|
452
|
-
const StoryVerticalShowAll = (props:
|
458
|
+
const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
453
459
|
const {
|
454
460
|
disabled,
|
455
461
|
itemQuantity,
|
@@ -537,7 +543,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
|
537
543
|
);
|
538
544
|
};
|
539
545
|
|
540
|
-
export const VerticalTabs: StoryObj<
|
546
|
+
export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
541
547
|
args: {
|
542
548
|
size: 'xs',
|
543
549
|
disabled: false,
|
@@ -545,6 +551,7 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
545
551
|
itemQuantity: 8,
|
546
552
|
orientation: 'vertical',
|
547
553
|
helperText: '',
|
554
|
+
height: '10rem',
|
548
555
|
},
|
549
556
|
argTypes: {
|
550
557
|
contentLeft: {
|
@@ -577,6 +584,12 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
577
584
|
disable: true,
|
578
585
|
},
|
579
586
|
},
|
587
|
+
height: {
|
588
|
+
control: {
|
589
|
+
type: 'text',
|
590
|
+
},
|
591
|
+
if: { arg: 'clip', eq: 'scroll' },
|
592
|
+
},
|
580
593
|
},
|
581
594
|
render: (args) => {
|
582
595
|
switch (args.clip) {
|
@@ -50,6 +50,8 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
50
50
|
};
|
51
51
|
|
52
52
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
53
|
+
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
54
|
+
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
53
55
|
|
54
56
|
const meta: Meta<StoryTabsProps> = {
|
55
57
|
title: 'plasma_web/Tabs',
|
@@ -79,7 +81,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
79
81
|
|
80
82
|
export default meta;
|
81
83
|
|
82
|
-
const StoryHorizontalDefault = (props:
|
84
|
+
const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
83
85
|
const {
|
84
86
|
disabled,
|
85
87
|
itemQuantity,
|
@@ -134,7 +136,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
|
134
136
|
);
|
135
137
|
};
|
136
138
|
|
137
|
-
const StoryHorizontalScroll = (props:
|
139
|
+
const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
138
140
|
const {
|
139
141
|
disabled,
|
140
142
|
itemQuantity,
|
@@ -144,18 +146,13 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
144
146
|
contentRight: contentRightOption,
|
145
147
|
hasDivider,
|
146
148
|
helperText,
|
149
|
+
width,
|
147
150
|
} = props;
|
148
151
|
const items = Array(itemQuantity).fill(0);
|
149
152
|
const [index, setIndex] = useState(0);
|
150
153
|
|
151
154
|
return (
|
152
|
-
<Tabs
|
153
|
-
clip={clip}
|
154
|
-
view={hasDivider ? 'divider' : 'clear'}
|
155
|
-
disabled={disabled}
|
156
|
-
size={size}
|
157
|
-
style={{ width: '15rem' }}
|
158
|
-
>
|
155
|
+
<Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
|
159
156
|
{items.map((_, i) => {
|
160
157
|
if (helperText !== '') {
|
161
158
|
return (
|
@@ -195,7 +192,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
195
192
|
);
|
196
193
|
};
|
197
194
|
|
198
|
-
const StoryHorizontalShowAll = (props:
|
195
|
+
const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
199
196
|
const {
|
200
197
|
disabled,
|
201
198
|
itemQuantity,
|
@@ -282,13 +279,15 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
|
282
279
|
);
|
283
280
|
};
|
284
281
|
|
285
|
-
export const HorizontalTabs: StoryObj<
|
282
|
+
export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
286
283
|
args: {
|
287
284
|
size: 'xs',
|
288
285
|
disabled: false,
|
289
286
|
hasDivider: true,
|
290
287
|
helperText: '',
|
291
288
|
itemQuantity: 8,
|
289
|
+
stretch: false,
|
290
|
+
width: '15rem',
|
292
291
|
},
|
293
292
|
argTypes: {
|
294
293
|
contentLeft: {
|
@@ -310,6 +309,12 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
|
310
309
|
},
|
311
310
|
if: { arg: 'stretch', truthy: false },
|
312
311
|
},
|
312
|
+
width: {
|
313
|
+
control: {
|
314
|
+
type: 'text',
|
315
|
+
},
|
316
|
+
if: { arg: 'clip', eq: 'scroll' },
|
317
|
+
},
|
313
318
|
size: {
|
314
319
|
options: sizes,
|
315
320
|
control: {
|
@@ -329,7 +334,7 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
|
329
334
|
},
|
330
335
|
};
|
331
336
|
|
332
|
-
const StoryVerticalDefault = (props:
|
337
|
+
const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
333
338
|
const {
|
334
339
|
disabled,
|
335
340
|
itemQuantity,
|
@@ -385,7 +390,7 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
|
|
385
390
|
);
|
386
391
|
};
|
387
392
|
|
388
|
-
const StoryVerticalScroll = (props:
|
393
|
+
const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
389
394
|
const {
|
390
395
|
disabled,
|
391
396
|
itemQuantity,
|
@@ -395,6 +400,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
395
400
|
contentRight: contentRightOption,
|
396
401
|
hasDivider,
|
397
402
|
helperText,
|
403
|
+
height,
|
398
404
|
} = props;
|
399
405
|
const items = Array(itemQuantity).fill(0);
|
400
406
|
const [index, setIndex] = useState(0);
|
@@ -405,8 +411,8 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
405
411
|
size={size as Size}
|
406
412
|
disabled={disabled}
|
407
413
|
clip={clip}
|
408
|
-
style={{ height: '10rem' }}
|
409
414
|
hasDivider={hasDivider}
|
415
|
+
style={{ height }}
|
410
416
|
>
|
411
417
|
{items.map((_, i) => {
|
412
418
|
if (helperText !== '') {
|
@@ -449,7 +455,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
449
455
|
);
|
450
456
|
};
|
451
457
|
|
452
|
-
const StoryVerticalShowAll = (props:
|
458
|
+
const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
453
459
|
const {
|
454
460
|
disabled,
|
455
461
|
itemQuantity,
|
@@ -537,7 +543,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
|
537
543
|
);
|
538
544
|
};
|
539
545
|
|
540
|
-
export const VerticalTabs: StoryObj<
|
546
|
+
export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
541
547
|
args: {
|
542
548
|
size: 'xs',
|
543
549
|
disabled: false,
|
@@ -545,6 +551,7 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
545
551
|
itemQuantity: 8,
|
546
552
|
orientation: 'vertical',
|
547
553
|
helperText: '',
|
554
|
+
height: '10rem',
|
548
555
|
},
|
549
556
|
argTypes: {
|
550
557
|
contentLeft: {
|
@@ -577,6 +584,12 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
577
584
|
disable: true,
|
578
585
|
},
|
579
586
|
},
|
587
|
+
height: {
|
588
|
+
control: {
|
589
|
+
type: 'text',
|
590
|
+
},
|
591
|
+
if: { arg: 'clip', eq: 'scroll' },
|
592
|
+
},
|
580
593
|
},
|
581
594
|
render: (args) => {
|
582
595
|
switch (args.clip) {
|
@@ -83,7 +83,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
|
|
83
83
|
});
|
84
84
|
firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
|
85
85
|
block: 'nearest',
|
86
|
-
inline: '
|
86
|
+
inline: 'start'
|
87
87
|
});
|
88
88
|
}, [disabled, scrollRef, refs]);
|
89
89
|
var onNext = useCallback(function () {
|
@@ -101,7 +101,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
|
|
101
101
|
});
|
102
102
|
lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
|
103
103
|
block: 'nearest',
|
104
|
-
inline: '
|
104
|
+
inline: 'end'
|
105
105
|
});
|
106
106
|
}, [disabled, scrollRef, refs]);
|
107
107
|
var PreviousButton = useMemo(function () {
|
@@ -76,7 +76,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
|
|
76
76
|
return tabStartY < scrollTop;
|
77
77
|
});
|
78
78
|
firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
|
79
|
-
block: '
|
79
|
+
block: 'start',
|
80
80
|
inline: 'nearest'
|
81
81
|
});
|
82
82
|
}, [disabled, scrollRef, refs]);
|
@@ -94,7 +94,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
|
|
94
94
|
return tabEndY > scrollBottom;
|
95
95
|
});
|
96
96
|
lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
|
97
|
-
block: '
|
97
|
+
block: 'end',
|
98
98
|
inline: 'nearest'
|
99
99
|
});
|
100
100
|
}, [disabled, scrollRef, refs]);
|
@@ -50,6 +50,8 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
50
50
|
};
|
51
51
|
|
52
52
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
53
|
+
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
54
|
+
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
53
55
|
|
54
56
|
const meta: Meta<StoryTabsProps> = {
|
55
57
|
title: 'plasma_b2c/Tabs',
|
@@ -79,7 +81,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
79
81
|
|
80
82
|
export default meta;
|
81
83
|
|
82
|
-
const StoryHorizontalDefault = (props:
|
84
|
+
const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
83
85
|
const {
|
84
86
|
disabled,
|
85
87
|
itemQuantity,
|
@@ -134,7 +136,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
|
134
136
|
);
|
135
137
|
};
|
136
138
|
|
137
|
-
const StoryHorizontalScroll = (props:
|
139
|
+
const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
138
140
|
const {
|
139
141
|
disabled,
|
140
142
|
itemQuantity,
|
@@ -144,18 +146,13 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
144
146
|
contentRight: contentRightOption,
|
145
147
|
hasDivider,
|
146
148
|
helperText,
|
149
|
+
width,
|
147
150
|
} = props;
|
148
151
|
const items = Array(itemQuantity).fill(0);
|
149
152
|
const [index, setIndex] = useState(0);
|
150
153
|
|
151
154
|
return (
|
152
|
-
<Tabs
|
153
|
-
clip={clip}
|
154
|
-
view={hasDivider ? 'divider' : 'clear'}
|
155
|
-
disabled={disabled}
|
156
|
-
size={size}
|
157
|
-
style={{ width: '15rem' }}
|
158
|
-
>
|
155
|
+
<Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
|
159
156
|
{items.map((_, i) => {
|
160
157
|
if (helperText !== '') {
|
161
158
|
return (
|
@@ -195,7 +192,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
195
192
|
);
|
196
193
|
};
|
197
194
|
|
198
|
-
const StoryHorizontalShowAll = (props:
|
195
|
+
const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
199
196
|
const {
|
200
197
|
disabled,
|
201
198
|
itemQuantity,
|
@@ -282,13 +279,15 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
|
282
279
|
);
|
283
280
|
};
|
284
281
|
|
285
|
-
export const HorizontalTabs: StoryObj<
|
282
|
+
export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
286
283
|
args: {
|
287
284
|
size: 'xs',
|
288
285
|
disabled: false,
|
289
286
|
hasDivider: true,
|
290
287
|
helperText: '',
|
291
288
|
itemQuantity: 8,
|
289
|
+
stretch: false,
|
290
|
+
width: '15rem',
|
292
291
|
},
|
293
292
|
argTypes: {
|
294
293
|
contentLeft: {
|
@@ -310,6 +309,12 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
|
310
309
|
},
|
311
310
|
if: { arg: 'stretch', truthy: false },
|
312
311
|
},
|
312
|
+
width: {
|
313
|
+
control: {
|
314
|
+
type: 'text',
|
315
|
+
},
|
316
|
+
if: { arg: 'clip', eq: 'scroll' },
|
317
|
+
},
|
313
318
|
size: {
|
314
319
|
options: sizes,
|
315
320
|
control: {
|
@@ -329,7 +334,7 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
|
329
334
|
},
|
330
335
|
};
|
331
336
|
|
332
|
-
const StoryVerticalDefault = (props:
|
337
|
+
const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
333
338
|
const {
|
334
339
|
disabled,
|
335
340
|
itemQuantity,
|
@@ -385,7 +390,7 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
|
|
385
390
|
);
|
386
391
|
};
|
387
392
|
|
388
|
-
const StoryVerticalScroll = (props:
|
393
|
+
const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
389
394
|
const {
|
390
395
|
disabled,
|
391
396
|
itemQuantity,
|
@@ -395,6 +400,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
395
400
|
contentRight: contentRightOption,
|
396
401
|
hasDivider,
|
397
402
|
helperText,
|
403
|
+
height,
|
398
404
|
} = props;
|
399
405
|
const items = Array(itemQuantity).fill(0);
|
400
406
|
const [index, setIndex] = useState(0);
|
@@ -405,8 +411,8 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
405
411
|
size={size as Size}
|
406
412
|
disabled={disabled}
|
407
413
|
clip={clip}
|
408
|
-
style={{ height: '10rem' }}
|
409
414
|
hasDivider={hasDivider}
|
415
|
+
style={{ height }}
|
410
416
|
>
|
411
417
|
{items.map((_, i) => {
|
412
418
|
if (helperText !== '') {
|
@@ -449,7 +455,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
449
455
|
);
|
450
456
|
};
|
451
457
|
|
452
|
-
const StoryVerticalShowAll = (props:
|
458
|
+
const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
453
459
|
const {
|
454
460
|
disabled,
|
455
461
|
itemQuantity,
|
@@ -537,7 +543,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
|
537
543
|
);
|
538
544
|
};
|
539
545
|
|
540
|
-
export const VerticalTabs: StoryObj<
|
546
|
+
export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
541
547
|
args: {
|
542
548
|
size: 'xs',
|
543
549
|
disabled: false,
|
@@ -545,6 +551,7 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
545
551
|
itemQuantity: 8,
|
546
552
|
orientation: 'vertical',
|
547
553
|
helperText: '',
|
554
|
+
height: '10rem',
|
548
555
|
},
|
549
556
|
argTypes: {
|
550
557
|
contentLeft: {
|
@@ -577,6 +584,12 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
577
584
|
disable: true,
|
578
585
|
},
|
579
586
|
},
|
587
|
+
height: {
|
588
|
+
control: {
|
589
|
+
type: 'text',
|
590
|
+
},
|
591
|
+
if: { arg: 'clip', eq: 'scroll' },
|
592
|
+
},
|
580
593
|
},
|
581
594
|
render: (args) => {
|
582
595
|
switch (args.clip) {
|
@@ -50,6 +50,8 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
50
50
|
};
|
51
51
|
|
52
52
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
53
|
+
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
54
|
+
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
53
55
|
|
54
56
|
const meta: Meta<StoryTabsProps> = {
|
55
57
|
title: 'plasma_web/Tabs',
|
@@ -79,7 +81,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
79
81
|
|
80
82
|
export default meta;
|
81
83
|
|
82
|
-
const StoryHorizontalDefault = (props:
|
84
|
+
const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
83
85
|
const {
|
84
86
|
disabled,
|
85
87
|
itemQuantity,
|
@@ -134,7 +136,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
|
134
136
|
);
|
135
137
|
};
|
136
138
|
|
137
|
-
const StoryHorizontalScroll = (props:
|
139
|
+
const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
138
140
|
const {
|
139
141
|
disabled,
|
140
142
|
itemQuantity,
|
@@ -144,18 +146,13 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
144
146
|
contentRight: contentRightOption,
|
145
147
|
hasDivider,
|
146
148
|
helperText,
|
149
|
+
width,
|
147
150
|
} = props;
|
148
151
|
const items = Array(itemQuantity).fill(0);
|
149
152
|
const [index, setIndex] = useState(0);
|
150
153
|
|
151
154
|
return (
|
152
|
-
<Tabs
|
153
|
-
clip={clip}
|
154
|
-
view={hasDivider ? 'divider' : 'clear'}
|
155
|
-
disabled={disabled}
|
156
|
-
size={size}
|
157
|
-
style={{ width: '15rem' }}
|
158
|
-
>
|
155
|
+
<Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
|
159
156
|
{items.map((_, i) => {
|
160
157
|
if (helperText !== '') {
|
161
158
|
return (
|
@@ -195,7 +192,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
195
192
|
);
|
196
193
|
};
|
197
194
|
|
198
|
-
const StoryHorizontalShowAll = (props:
|
195
|
+
const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
199
196
|
const {
|
200
197
|
disabled,
|
201
198
|
itemQuantity,
|
@@ -282,13 +279,15 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
|
282
279
|
);
|
283
280
|
};
|
284
281
|
|
285
|
-
export const HorizontalTabs: StoryObj<
|
282
|
+
export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
286
283
|
args: {
|
287
284
|
size: 'xs',
|
288
285
|
disabled: false,
|
289
286
|
hasDivider: true,
|
290
287
|
helperText: '',
|
291
288
|
itemQuantity: 8,
|
289
|
+
stretch: false,
|
290
|
+
width: '15rem',
|
292
291
|
},
|
293
292
|
argTypes: {
|
294
293
|
contentLeft: {
|
@@ -310,6 +309,12 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
|
310
309
|
},
|
311
310
|
if: { arg: 'stretch', truthy: false },
|
312
311
|
},
|
312
|
+
width: {
|
313
|
+
control: {
|
314
|
+
type: 'text',
|
315
|
+
},
|
316
|
+
if: { arg: 'clip', eq: 'scroll' },
|
317
|
+
},
|
313
318
|
size: {
|
314
319
|
options: sizes,
|
315
320
|
control: {
|
@@ -329,7 +334,7 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
|
329
334
|
},
|
330
335
|
};
|
331
336
|
|
332
|
-
const StoryVerticalDefault = (props:
|
337
|
+
const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
333
338
|
const {
|
334
339
|
disabled,
|
335
340
|
itemQuantity,
|
@@ -385,7 +390,7 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
|
|
385
390
|
);
|
386
391
|
};
|
387
392
|
|
388
|
-
const StoryVerticalScroll = (props:
|
393
|
+
const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
389
394
|
const {
|
390
395
|
disabled,
|
391
396
|
itemQuantity,
|
@@ -395,6 +400,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
395
400
|
contentRight: contentRightOption,
|
396
401
|
hasDivider,
|
397
402
|
helperText,
|
403
|
+
height,
|
398
404
|
} = props;
|
399
405
|
const items = Array(itemQuantity).fill(0);
|
400
406
|
const [index, setIndex] = useState(0);
|
@@ -405,8 +411,8 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
405
411
|
size={size as Size}
|
406
412
|
disabled={disabled}
|
407
413
|
clip={clip}
|
408
|
-
style={{ height: '10rem' }}
|
409
414
|
hasDivider={hasDivider}
|
415
|
+
style={{ height }}
|
410
416
|
>
|
411
417
|
{items.map((_, i) => {
|
412
418
|
if (helperText !== '') {
|
@@ -449,7 +455,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
449
455
|
);
|
450
456
|
};
|
451
457
|
|
452
|
-
const StoryVerticalShowAll = (props:
|
458
|
+
const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
453
459
|
const {
|
454
460
|
disabled,
|
455
461
|
itemQuantity,
|
@@ -537,7 +543,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
|
537
543
|
);
|
538
544
|
};
|
539
545
|
|
540
|
-
export const VerticalTabs: StoryObj<
|
546
|
+
export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
541
547
|
args: {
|
542
548
|
size: 'xs',
|
543
549
|
disabled: false,
|
@@ -545,6 +551,7 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
545
551
|
itemQuantity: 8,
|
546
552
|
orientation: 'vertical',
|
547
553
|
helperText: '',
|
554
|
+
height: '10rem',
|
548
555
|
},
|
549
556
|
argTypes: {
|
550
557
|
contentLeft: {
|
@@ -577,6 +584,12 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
577
584
|
disable: true,
|
578
585
|
},
|
579
586
|
},
|
587
|
+
height: {
|
588
|
+
control: {
|
589
|
+
type: 'text',
|
590
|
+
},
|
591
|
+
if: { arg: 'clip', eq: 'scroll' },
|
592
|
+
},
|
580
593
|
},
|
581
594
|
render: (args) => {
|
582
595
|
switch (args.clip) {
|