1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React from 'react'
import { storiesOf } from '@storybook/react'
import {
   Text,
   Avatar,
   PlusIcon,
   ClearIcon,
   IconButton,
   SectionTab,
   SectionTabs,
   SectionTabList,
   SectionTabPanel,
   SectionTabPanels,
   SectionTabsListHeader
} from '@dailykit/ui'

storiesOf('Tabs', module).add('Section Tabs', () => {
   const containerStyle = { padding: '14px', textAlign: 'left' }
   const headerStyle = {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between'
   }
   const headingStyle = { fontWeight: 400 }

   return (
      <div
         style={{
            padding: 14,
            height: 'calc(100vh - 32px)',
            background: '#fff'
         }}
      >
         <SectionTabs>
            <SectionTabList>
               <SectionTab>
                  <div style={containerStyle}>
                     <Avatar withName title='Tab With Avatar' />
                  </div>
               </SectionTab>
               <SectionTab>
                  <div style={containerStyle}>
                     <header style={headerStyle}>
                        <h3 style={headingStyle}>Tab With Button</h3>
                        <IconButton type='solid'>
                           <ClearIcon size={18} />
                        </IconButton>
                     </header>
                  </div>
               </SectionTab>
               <SectionTab>
                  <div style={containerStyle}>
                     <h3 style={headingStyle}>Text only Tab</h3>
                  </div>
               </SectionTab>
            </SectionTabList>
            <SectionTabPanels>
               <SectionTabPanel>Tab with Avatar</SectionTabPanel>
               <SectionTabPanel>Tab with Button</SectionTabPanel>
               <SectionTabPanel>Text only Tab</SectionTabPanel>
            </SectionTabPanels>
         </SectionTabs>
      </div>
   )
})