Merge pull request #209 from appfolio/addTabs

Add Tabs
appfolio · May 10, 2017 · 3f19407 · 3f19407
2 parents a5546e3 + 64e3049
commit 3f19407
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 0 deletions.
diff --git a/.storybook/head.html b/.storybook/head.html
@@ -1,3 +1,4 @@
 <link id="theme" rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/appfolio-frontend-dev/styles/bootstrap-saffron.min.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
diff --git a/stories/Nav.js b/stories/Nav.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import { Nav, NavItem, NavLink } from '../src';
+import { number } from '@kadira/storybook-addon-knobs';
+
+const onClick = () => alert('Clicked!');
+
+storiesOf('Nav', module)
+  .addWithInfo('Tabs', () => {
+    const activeTab = number('activeTab', 1);
+    return (
+      <div>
+        <Nav tabs>
+          <NavItem>
+            <NavLink active={activeTab === 1} onClick={onClick}>
+              Receivables
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink active={activeTab === 2} onClick={onClick}>
+              Payables
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink active={activeTab === 3} onClick={onClick}>
+              Bank Accounts
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink active={activeTab === 4} onClick={onClick}>
+              Journal Entries
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink active={activeTab === 5} onClick={onClick}>
+              GL Accounts
+            </NavLink>
+          </NavItem>
+        </Nav>
+      </div>
+    );
+  })
+  .addWithInfo('Pills', () => {
+    const activeTab = number('activeTab', 1);
+    return (
+      <div>
+        <Nav pills>
+          <NavItem>
+            <NavLink active={activeTab === 1} onClick={onClick}>
+              Receivables
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink active={activeTab === 2} onClick={onClick}>
+              Payables
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink active={activeTab === 3} onClick={onClick}>
+              Bank Accounts
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink active={activeTab === 4} onClick={onClick}>
+              Journal Entries
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink active={activeTab === 5} onClick={onClick}>
+              GL Accounts
+            </NavLink>
+          </NavItem>
+        </Nav>
+      </div>
+    );
+  });
diff --git a/stories/index.js b/stories/index.js
@@ -10,6 +10,7 @@ import './Alerts';
 import './HelpBubble';
 import './LabelBadge';
 import './Modal';
+import './Nav';
 import './Progress';
 import './Table';
 import './Tooltip';