Add Tabs documentation page

appearhere · Oct 5, 2017 · ffa59b6 · ffa59b6
1 parent accade3
commit ffa59b6
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 0 deletions.
diff --git a/styleguide/components/Navigation/Navigation.js b/styleguide/components/Navigation/Navigation.js
@@ -198,6 +198,17 @@ const Navigation = ({ className, onLinkClick }) => (
             Panels
           </NavLink>
         </li>
+        <li className={ css.linkListItem }>
+          <NavLink
+            exact
+            activeClassName={ css.linkActive }
+            className={ css.link }
+            to="/patterns/tabs"
+            onClick={ onLinkClick }
+          >
+            Tabs
+          </NavLink>
+        </li>
         <li className={ css.linkListItem }>
           <NavLink
             exact

diff --git a/styleguide/screens/Patterns/Patterns.js b/styleguide/screens/Patterns/Patterns.js
@@ -13,6 +13,7 @@ import Markdown from './Markdown/Markdown';
 import Medallion from './Medallion/Medallion';
 import Pagination from './Pagination/Pagination';
 import Panels from './Panels/Panels';
+import Tabs from './Tabs/Tabs';
 import TabBar from './TabBar/TabBar';
 
 const Patterns = () => (
@@ -29,6 +30,7 @@ const Patterns = () => (
     <Route path="/patterns/medallion" component={ Medallion } />
     <Route path="/patterns/pagination" component={ Pagination } />
     <Route path="/patterns/panels" component={ Panels } />
+    <Route path="/patterns/tabs" component={ Tabs } />
     <Route path="/patterns/tab-bar" component={ TabBar } />
   </Switch>
 );

diff --git a/styleguide/screens/Patterns/Tabs/Tabs.js b/styleguide/screens/Patterns/Tabs/Tabs.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import cx from 'classnames';
+import dedent from 'dedent';
+
+import Specimen from '../../../components/Specimen/Specimen';
+import { D, H, T, A, C } from '../../../components/Scaffold/Scaffold';
+
+import Tabs from '../../../../components/Tabs/Tabs';
+import Tab from '../../../../components/Tabs/Tab';
+
+import m from '../../../../globals/modifiers.css';
+
+const TabsDocumentation = () => (
+  <div>
+    <H level={ 1 }>Loader</H>
+    <T elm="p" className={ cx(m.mtr, m.largeI, m.demi) }>
+      <C>Tabs</C> provide an easy way to navigate between views on a single page,
+      where content is related. For cases when you need page level tabs,
+      <A href="/patterns/tab-bar">TabBar</A>.
+    </T>
+    <D>
+      <Specimen
+        classNames={ {
+          specimenContainer: m.par,
+        } }
+        code={ dedent`
+          <Tabs>
+            <Tab label="One">
+              Barry Chuckle
+            </Tab>
+            <Tab label="Two">
+              Paul Chuckle
+            </Tab>
+          </Tabs>
+        ` }
+      >
+        <Tabs>
+          <Tab label="One">
+            Barry Chuckle
+          </Tab>
+          <Tab label="Two">
+            Paul Chuckle
+          </Tab>
+        </Tabs>
+      </Specimen>
+    </D>
+  </div>
+);
+
+export default TabsDocumentation;
diff --git a/styleguide/screens/Patterns/Tabs/Tabs.test.js b/styleguide/screens/Patterns/Tabs/Tabs.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import Tabs from './Tabs';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  render(<Tabs />, div);
+});