1
1
import { Meta , Story } from '@storybook/react/types-6-0' ;
2
2
import React , { useState } from 'react' ;
3
- import { Box } from 'rebass' ;
3
+ import { Box , Flex } from 'rebass' ;
4
4
import Labeling from '../typography/labeling' ;
5
- import EmbeddedTabs , { Props } from './EmbeddedTabs' ;
5
+ import EmbeddedTabs , {
6
+ EmbeddedTabsProps ,
7
+ ControlledEmbeddedTabsProps ,
8
+ } from '.' ;
9
+ import Button from '../button' ;
10
+ import Subtitle from '../typography/subtitle' ;
6
11
7
12
export default {
8
13
title : 'Quartz/EmbeddedTabs' ,
9
14
component : EmbeddedTabs ,
15
+ subcomponents : { Controlled : EmbeddedTabs . Controlled } ,
10
16
} as Meta ;
11
17
12
- const argTypes = {
13
- tabs : {
14
- required : true ,
15
- description : 'A list of tab items.' ,
16
- } ,
17
- initialTab : {
18
- required : false ,
19
- description : 'The initial tab to be selected.' ,
20
- default : 0 ,
21
- } ,
22
- onTabChange : {
23
- description : 'Callback to be called when a tab is selected.' ,
24
- required : false
25
- } ,
26
- } ;
27
-
28
18
const tabs = [
29
19
{
30
20
title : 'Validation Reports' ,
@@ -41,7 +31,7 @@ const tabs = [
41
31
} ,
42
32
] ;
43
33
44
- const Template : Story < Props > = ( props ) => {
34
+ export const Uncontrolled : Story < EmbeddedTabsProps > = ( props ) => {
45
35
const [ activeTab , setActiveTab ] = useState ( props . initialTab ?? 0 ) ;
46
36
47
37
return (
@@ -54,10 +44,51 @@ const Template: Story<Props> = (props) => {
54
44
) ;
55
45
} ;
56
46
57
- export const Default = Template . bind ( { } ) ;
47
+ export const Controlled : Story < ControlledEmbeddedTabsProps > = ( props ) => {
48
+ const [ activeTab , setActiveTab ] = useState ( 0 ) ;
49
+
50
+ return (
51
+ < Box width = "700px" >
52
+ < EmbeddedTabs . Controlled
53
+ { ...props }
54
+ activeTab = { activeTab }
55
+ onTabChange = { setActiveTab }
56
+ />
57
+ < Box mt = { 3 } >
58
+ < Labeling bold >
59
+ This component is controlled. Active tab: { tabs [ activeTab ] . title } { ' ' }
60
+ </ Labeling >
61
+ < Flex mt = { 2 } sx = { { gap : '10px' } } >
62
+ < Button onClick = { ( ) => setActiveTab ( 2 ) } > Jump to Statistics</ Button >
63
+ < Button onClick = { ( ) => setActiveTab ( 1 ) } > Jump to Results</ Button >
64
+ </ Flex >
65
+ </ Box >
66
+ </ Box >
67
+ ) ;
68
+ } ;
58
69
59
- Default . args = {
70
+ const args = {
60
71
tabs,
61
72
} ;
62
73
63
- Default . argTypes = argTypes ;
74
+ const argTypes = {
75
+ tabs : {
76
+ required : true ,
77
+ description : 'A list of tab items.' ,
78
+ } ,
79
+ initialTab : {
80
+ required : false ,
81
+ description : 'The initial tab to be selected.' ,
82
+ default : 0 ,
83
+ } ,
84
+ onTabChange : {
85
+ description : 'Callback to be called when a tab is selected.' ,
86
+ required : false ,
87
+ } ,
88
+ } ;
89
+
90
+ Uncontrolled . args = args ;
91
+ Uncontrolled . argTypes = argTypes ;
92
+
93
+ Controlled . args = args ;
94
+ Controlled . argTypes = argTypes ;
0 commit comments