Add TabNav component

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;
+}

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 },
+    ],
+  },
+};

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;

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,
 };

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,
 };