From daa00699bb9b3d0f7688c7ac87b87127a3979b94 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Mon, 8 May 2017 13:47:48 +0300
Subject: [PATCH] Add TabNav component

---
 src/components/TabNav/TabNav.css        | 19 +++++++++++
 src/components/TabNav/TabNav.example.js | 16 +++++++++
 src/components/TabNav/TabNav.js         | 45 +++++++++++++++++++++++++
 src/components/index.js                 |  2 ++
 src/examples.js                         |  4 ++-
 5 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 src/components/TabNav/TabNav.css
 create mode 100644 src/components/TabNav/TabNav.example.js
 create mode 100644 src/components/TabNav/TabNav.js

diff --git a/src/components/TabNav/TabNav.css b/src/components/TabNav/TabNav.css
new file mode 100644
index 00000000..e68e40a6
--- /dev/null
+++ b/src/components/TabNav/TabNav.css
@@ -0,0 +1,19 @@
+.tab {
+  float: left;
+  margin-left: 1rem;
+  font-size: 20px;
+  letter-spacing: -0.5px;
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
+.link {
+  text-decoration: none;
+}
+
+.selected {
+  font-weight: bold;
+  text-decoration: underline;
+}
diff --git a/src/components/TabNav/TabNav.example.js b/src/components/TabNav/TabNav.example.js
new file mode 100644
index 00000000..eba655cf
--- /dev/null
+++ b/src/components/TabNav/TabNav.example.js
@@ -0,0 +1,16 @@
+import TabNav from './TabNav';
+
+const selfLinkProps = {
+  name: 'StyleguideComponent',
+  params: { component: 'TabNav' },
+};
+
+export const Empty = {
+  component: TabNav,
+  props: {
+    tabs: [
+      { text: 'Normal', linkProps: selfLinkProps },
+      { text: 'Selected', linkProps: selfLinkProps, selected: true },
+    ],
+  },
+};
diff --git a/src/components/TabNav/TabNav.js b/src/components/TabNav/TabNav.js
new file mode 100644
index 00000000..a9e480a9
--- /dev/null
+++ b/src/components/TabNav/TabNav.js
@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+import { NamedLink } from '../../components';
+
+import css from './TabNav.css';
+
+const Tab = props => {
+  const { text, selected, linkProps } = props;
+  const classes = classNames(css.tab, {
+    [css.selected]: selected,
+  });
+  return (
+    <div className={classes}>
+      <NamedLink className={css.link} {...linkProps}>{text}</NamedLink>
+    </div>
+  );
+};
+
+Tab.defaultProps = { selected: false };
+
+const { arrayOf, object, string, bool } = PropTypes;
+
+Tab.propTypes = {
+  text: string.isRequired,
+  selected: bool,
+  linkProps: object.isRequired,
+};
+
+const TabNav = props => {
+  const { className, tabs } = props;
+  return (
+    <nav className={className}>
+      {tabs.map(tab => <Tab key={tab.text} {...tab} />)}
+    </nav>
+  );
+};
+
+TabNav.defaultProps = { className: '' };
+
+TabNav.propTypes = {
+  className: string,
+  tabs: arrayOf(object).isRequired,
+};
+
+export default TabNav;
diff --git a/src/components/index.js b/src/components/index.js
index d44f0645..8896e316 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -32,6 +32,7 @@ import RoutesProvider from './RoutesProvider/RoutesProvider';
 import SaleDetailsPanel from './SaleDetailsPanel/SaleDetailsPanel';
 import SearchResultsPanel from './SearchResultsPanel/SearchResultsPanel';
 import StripeBankAccountToken from './StripeBankAccountToken/StripeBankAccountToken';
+import TabNav from './TabNav/TabNav';
 import ValidationError from './ValidationError/ValidationError';
 
 export {
@@ -71,5 +72,6 @@ export {
   SaleDetailsPanel,
   SearchResultsPanel,
   StripeBankAccountToken,
+  TabNav,
   ValidationError,
 };
diff --git a/src/examples.js b/src/examples.js
index 480a03b0..1e5d240d 100644
--- a/src/examples.js
+++ b/src/examples.js
@@ -13,6 +13,7 @@ import * as LocationAutocompleteInput
 import * as PaginationLinks from './components/PaginationLinks/PaginationLinks.example';
 import * as StripeBankAccountToken
   from './components/StripeBankAccountToken/StripeBankAccountToken.example';
+import * as TabNav from './components/TabNav/TabNav.example';
 
 // containers
 import * as BookingDatesForm from './containers/BookingDatesForm/BookingDatesForm.example';
@@ -36,7 +37,6 @@ export {
   CurrencyInput,
   DateInput,
   EditListingForm,
-  SearchForm,
   ListingCard,
   LocationAutocompleteInput,
   LoginForm,
@@ -46,7 +46,9 @@ export {
   NamedLink,
   PaginationLinks,
   PasswordForgottenForm,
+  SearchForm,
   SignupForm,
   StripeBankAccountToken,
   StripePaymentForm,
+  TabNav,
 };