From 5567e8e682fd6e4e159e10b2ca4d34a6d8ed5c16 Mon Sep 17 00:00:00 2001
From: Teemu Taskula <teemu.taskula@aalto.fi>
Date: Wed, 4 Oct 2017 14:18:06 +0300
Subject: [PATCH] docs(tabs): added documentation for tabs component

---
 docs/src/components/Sidemenu.js       |  1 +
 docs/src/components/Utilities.js      | 52 +++++++++++++++++++++++++--
 docs/src/components/codeSnippets.js   | 38 ++++++++++++++++++++
 docs/src/components/compProperties.js |  9 +++++
 4 files changed, 98 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/Sidemenu.js b/docs/src/components/Sidemenu.js
index 51efb31..283a346 100644
--- a/docs/src/components/Sidemenu.js
+++ b/docs/src/components/Sidemenu.js
@@ -69,6 +69,7 @@ class Sidemenu extends Component {
         <MenuItem to='/utilities#outsidereactor'>OutsideReactor</MenuItem>
         <MenuItem to='/utilities#placeholder'>PlaceholderRows</MenuItem>
         <MenuItem to='/utilities#spinner'>Spinner</MenuItem>
+        <MenuItem to='/utilities#tabs'>Tabs</MenuItem>
         <MenuItem to='/utilities#tooltip'>Tooltip</MenuItem>
 
         <Gutter vertical />
diff --git a/docs/src/components/Utilities.js b/docs/src/components/Utilities.js
index 8fe3304..5d638f3 100644
--- a/docs/src/components/Utilities.js
+++ b/docs/src/components/Utilities.js
@@ -15,6 +15,7 @@ import {
   PlaceholderRows,
   OutsideReactor,
   Modal,
+  Tabs,
 } from 'react-components-kit';
 
 import Properties from './common/Properties';
@@ -28,6 +29,7 @@ import {
   outsideReactorExample,
   placeholderExample,
   modalExample,
+  tabsExample,
 } from './codeSnippets';
 
 import {
@@ -38,6 +40,7 @@ import {
   placeholderProperties,
   outsideReactorProperties,
   modalProperties,
+  tabsProperties,
 } from './compProperties';
 
 class Utilities extends Component {
@@ -75,7 +78,7 @@ class Utilities extends Component {
     return (
       <div>
         <Heading>Utilities</Heading>
-    
+        
         <Heading h2 id='badge'>Badge</Heading>
     
         <Layout align='center'>
@@ -276,7 +279,52 @@ class Utilities extends Component {
         </Layout>
     
         <Divider />
-    
+
+        <Heading h2>Tabs</Heading>
+        <Layout>
+          <Tabs>
+            <Tabs.Panel label='Tab label 1'>
+              <Heading h4>Tab content 1</Heading>
+              <p>
+                Disrupt minimum viable product pivot waterfall is so 2000 and
+                late viral long shadow cortado SpaceTeam unicorn venture
+                capital pivot intuitive innovate. Disrupt sticky note user
+                centered design Steve Jobs ideate user story responsive.
+              </p>
+            </Tabs.Panel>
+            <Tabs.Panel label='Tab label 2'>
+              <Heading h4>Tab content 2</Heading>
+              <p>
+                Pair programming workflow co-working workflow piverate paradigm
+                hacker SpaceTeam. Quantitative vs. qualitative iterate
+                human-centered design bootstrapping user centered design
+                ideate driven physical computing quantitative vs. qualitative.
+              </p>
+            </Tabs.Panel>
+            <Tabs.Panel label='Tab label 3'>
+              <Heading h4>Tab content 3</Heading>
+              <p>
+                Pitch deck quantitative vs. qualitative long shadow driven fund
+                fund quantitative vs. qualitative. Pitch deck intuitive agile
+                bootstrapping hacker SpaceTeam piverate personas user centered
+                design affordances viral driven. Ship it sticky note
+                bootstrapping earned media thought leader responsive waterfall
+                is so 2000 and late human-centered design.
+              </p>
+            </Tabs.Panel>
+          </Tabs>
+        </Layout>
+
+        <Layout>
+          <CodeBlock code={tabsExample} />
+        </Layout>
+
+        <Layout>
+          <Properties properties={tabsProperties} />
+        </Layout>
+
+        <Divider />
+
         <Heading h2>Tooltip</Heading>
         <Layout>
           <Layout.Box>
diff --git a/docs/src/components/codeSnippets.js b/docs/src/components/codeSnippets.js
index b99f282..43d8509 100644
--- a/docs/src/components/codeSnippets.js
+++ b/docs/src/components/codeSnippets.js
@@ -443,3 +443,41 @@ class Example extends Component {
   }
 }
 `;
+
+export const tabsExample = `
+import { Tabs } from 'react-components-kit';
+
+const Example = () => (
+  <Tabs>
+    <Tabs.Panel label='Tab label 1'>
+      <Heading h4>Tab content 1</Heading>
+      <p>
+        Disrupt minimum viable product pivot waterfall is so 2000 and
+        late viral long shadow cortado SpaceTeam unicorn venture
+        capital pivot intuitive innovate. Disrupt sticky note user
+        centered design Steve Jobs ideate user story responsive.
+      </p>
+    </Tabs.Panel>
+    <Tabs.Panel label='Tab label 2'>
+      <Heading h4>Tab content 2</Heading>
+      <p>
+        Pair programming workflow co-working workflow piverate paradigm
+        hacker SpaceTeam. Quantitative vs. qualitative iterate
+        human-centered design bootstrapping user centered design
+        ideate driven physical computing quantitative vs. qualitative.
+      </p>
+    </Tabs.Panel>
+    <Tabs.Panel label='Tab label 3'>
+      <Heading h4>Tab content 3</Heading>
+      <p>
+        Pitch deck quantitative vs. qualitative long shadow driven fund
+        fund quantitative vs. qualitative. Pitch deck intuitive agile
+        bootstrapping hacker SpaceTeam piverate personas user centered
+        design affordances viral driven. Ship it sticky note
+        bootstrapping earned media thought leader responsive waterfall
+        is so 2000 and late human-centered design.
+      </p>
+    </Tabs.Panel>
+  </Tabs>
+);
+`;
diff --git a/docs/src/components/compProperties.js b/docs/src/components/compProperties.js
index 34bf116..e6f43d3 100644
--- a/docs/src/components/compProperties.js
+++ b/docs/src/components/compProperties.js
@@ -543,4 +543,13 @@ export const modalProperties = [
   },
 ];
 
+export const tabsProperties = [
+  {
+    name: 'tabBreak',
+    type: 'string',
+    defaultVal: '768px',
+    description: 'A valid css value for max-width in media query (px, em etc)',
+  },
+];
+
 /* eslint-enable max-len */