aboutsummaryrefslogtreecommitdiffstats
path: root/stories/react/Tabs.stories.js
blob: 74f163c5cf7aed5d9e74b4760cd5f0a71c765f51 (plain)
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
import React from 'react';
import Examples from './utils/Examples.js';
import {default as TabsComp} from '../../src/react/Tabs.js';
import Tab from '../../src/react/Tab.js';
import HTMLTabsHeader from '../../components/tabs/tabs-header.html';
import HTMLTabsDisabled from '../../components/tabs/tabs-disabled.html';
import HTMLTabsMenu from '../../components/tabs/tabs-menu.html';

let examples = {
	'Menu Tabs': {
		jsx: <TabsComp type='menu' activeTab='1' onTabClick={(tabId) => {console.log(tabId);}}>
			<Tab title='tab 1' tabId='1'>
				<div>This is the active tab content</div>
			</Tab>
			<Tab title='tab 2' tabId='2' />
			<Tab title='tab 3' tabId='3' />
		</TabsComp>,
		html: HTMLTabsMenu
	},
	'Header Tabs': {
		jsx: <TabsComp type='header' activeTab='1' onTabClick={(tabId) => {console.log(tabId);}}>
			<Tab title='tab 1' tabId='1'>
				<div>This is the active tab content</div>
			</Tab>
			<Tab title='tab 2' tabId='2' />
			<Tab title='tab 3' tabId='3' />
		</TabsComp>,
		html: HTMLTabsHeader
	},
	'Disabled Tabs': {
		jsx: (
			<TabsComp type='header' activeTab='1' onTabClick={(tabId) => {console.log(tabId);}}>
				<Tab title='tab 1' tabId='1'>
					<div>This is the active tab content</div>
				</Tab>
				<Tab title='tab 2' tabId='2' disabled/>
				<Tab title='tab 3' tabId='3' disabled/>
			</TabsComp>
		),
		html: HTMLTabsDisabled
	}
};

const Tabs = () => (
	<Examples examples={examples} />
);

export default Tabs;