TabNavHorizontal component

src/components/TabNavHorizontal/TabNavHorizontal.css

@@ -0,0 +1,82 @@
+@import '../../marketplace.css';
+
+.root {
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+}
+
+.darkSkin {
+  background-color: var(--matterColor);
+}
+
+.tab {
+  margin-left: 16px;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  @media (--viewportLarge) {
+    margin-left: 24px;
+  }
+}
+
+.link {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+
+  /* Font */
+  @apply --marketplaceTabNavHorizontalFontStyles;
+
+  color: var(--matterColor);
+  padding-bottom: 10px;
+
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  border-bottom-color: transparent;
+
+  transition: var(--transitionStyleButton);
+
+  &:hover {
+    text-decoration: none;
+    color: var(--matterColorDark);
+  }
+
+  @media (--viewportMedium) {
+    border-bottom-width: 3px;
+    padding-bottom: 13px;
+  }
+}
+
+.selectedLink {
+  border-bottom-color: var(--matterColorDark);
+  color: var(--matterColorDark);
+}
+
+.disabled {
+  pointer-events: none;
+  color: var(--matterColorAnti);
+  text-decoration: none;
+}
+
+/* Dark skin */
+.linkDarkSkin {
+  color: var(--matterColorAnti);
+
+  &:hover {
+    color: var(--matterColorLight);
+  }
+}
+
+.selectedLinkDarkSkin {
+  border-bottom-color: var(--matterColorLight);
+  color: var(--matterColorLight);
+}
+
+.disabledDarkSkin {
+  color: var(--matterColorDark);
+  opacity: 0.3;
+}

src/components/TabNavHorizontal/TabNavHorizontal.example.js

@@ -0,0 +1,17 @@
+import TabNavHorizontal from './TabNavHorizontal';
+
+const selfLinkProps = {
+  name: 'StyleguideComponent',
+  params: { component: 'TabNavHorizontal' },
+};
+
+export const Empty = {
+  component: TabNavHorizontal,
+  props: {
+    tabs: [
+      { text: 'Normal', linkProps: selfLinkProps },
+      { text: 'Selected', linkProps: selfLinkProps, selected: true },
+    ],
+  },
+  group: 'navigation',
+};

src/components/TabNavHorizontal/TabNavHorizontal.js

@@ -0,0 +1,79 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+import { NamedLink } from '../../components';
+
+import css from './TabNavHorizontal.css';
+
+export const LIGHT_SKIN = 'light';
+export const DARK_SKIN = 'dark';
+
+const Tab = props => {
+  const { className, disabled, text, selected, linkProps, isDark } = props;
+  const darkSkinClasses = isDark
+    ? classNames(css.linkDarkSkin, {
+        [css.selectedLinkDarkSkin]: selected,
+        [css.disabledDarkSkin]: disabled,
+      })
+    : null;
+
+  const linkClasses = classNames(
+    css.link,
+    {
+      [css.selectedLink]: selected,
+      [css.disabled]: disabled,
+    },
+    darkSkinClasses
+  );
+
+  return (
+    <div className={className}>
+      <NamedLink className={linkClasses} {...linkProps}>{text}</NamedLink>
+    </div>
+  );
+};
+
+Tab.defaultProps = { className: null, disabled: false, selected: false };
+
+const { arrayOf, bool, node, object, oneOf, string } = PropTypes;
+
+Tab.propTypes = {
+  className: string,
+  text: node.isRequired,
+  disabled: bool,
+  selected: bool,
+  linkProps: object.isRequired,
+  isDark: bool.isRequired,
+};
+
+const TabNavHorizontal = props => {
+  const { className, rootClassName, tabRootClassName, tabs, skin } = props;
+  const isDark = skin === DARK_SKIN;
+  const classes = classNames(rootClassName || css.root, { [css.darkSkin]: isDark }, className);
+  const tabClasses = tabRootClassName || css.tab;
+  return (
+    <nav className={classes}>
+      {tabs.map((tab, index) => {
+        const key = typeof tab.text === 'string' ? tab.text : index;
+        return <Tab key={key} className={tabClasses} {...tab} isDark={isDark} />;
+      })}
+    </nav>
+  );
+};
+
+TabNavHorizontal.defaultProps = {
+  className: null,
+  rootClassName: null,
+  tabRootClassName: null,
+  tabClassName: null,
+  skin: LIGHT_SKIN,
+};
+
+TabNavHorizontal.propTypes = {
+  className: string,
+  rootClassName: string,
+  tabRootClassName: string,
+  tabs: arrayOf(object).isRequired,
+  skin: oneOf([LIGHT_SKIN, DARK_SKIN]),
+};
+
+export default TabNavHorizontal;

src/components/index.js

@@ -50,6 +50,7 @@ import SelectField from './SelectField/SelectField';
 import StripeBankAccountTokenInputField
   from './StripeBankAccountTokenInputField/StripeBankAccountTokenInputField';
 import TabNav from './TabNav/TabNav';
+import TabNavHorizontal from './TabNavHorizontal/TabNavHorizontal';
 import Tabs from './Tabs/Tabs';
 import TextInputField from './TextInputField/TextInputField';
 import Topbar from './Topbar/Topbar';
@@ -113,6 +114,7 @@ export {
   SelectField,
   StripeBankAccountTokenInputField,
   TabNav,
+  TabNavHorizontal,
   Tabs,
   TextInputField,
   Topbar,

src/marketplaceFonts.css

@@ -240,4 +240,12 @@
       line-height: 32px;
     }
   }
+
+  --marketplaceTabNavHorizontalFontStyles {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+    font-weight: var(--fontWeightMedium);
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0;
+  }
 }