summaryrefslogtreecommitdiffstats
path: root/stories/react/Tabs.stories.js
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2018-05-21 20:19:48 +0000
committerGerrit Code Review <gerrit@onap.org>2018-05-21 20:19:48 +0000
commit05b37297177e8a342668c15e5d6f738b51f7aedd (patch)
treee236c96df52a13f935292db8aa73e84d0c41ad8a /stories/react/Tabs.stories.js
parent884dfb789593d2a3cc319047ab1f0215778aec9f (diff)
parent1994c98063c27a41797dec01f2ca9fcbe33ceab0 (diff)
Merge "init commit onap ui"2.0.0-ONAPbeijing2.0.0-ONAP
Diffstat (limited to 'stories/react/Tabs.stories.js')
-rw-r--r--stories/react/Tabs.stories.js48
1 files changed, 48 insertions, 0 deletions
diff --git a/stories/react/Tabs.stories.js b/stories/react/Tabs.stories.js
new file mode 100644
index 0000000..74f163c
--- /dev/null
+++ b/stories/react/Tabs.stories.js
@@ -0,0 +1,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;