New tabs taken from publish-shared-components with new style

Tab/index.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HoverableText from '../HoverableText';
+import Link from '../Link';
+import {
+  curiousBlueUltraLight,
+} from '../style/color';
+import {
+  calculateStyles,
+} from '../lib/utils';
+
+const Tab = ({
+  children,
+  selected,
+  tabId,
+  onClick,
+}) => {
+  const style = calculateStyles({
+    default: {
+      display: 'inline-block',
+      padding: '0.75rem 1rem',
+      borderRadius: '4px',
+    },
+    selected: {
+      backgroundColor: curiousBlueUltraLight,
+    },
+  }, {
+    selected,
+  });
+  return (
+    <Link
+      href={'#'}
+      unstyled
+      onClick={(e) => {
+        e.preventDefault();
+        onClick(tabId);
+      }}
+    >
+      <span style={style}>
+        <HoverableText
+          color="shuttleGray"
+          hoverColor="black"
+          weight={selected ? 'bold' : null}
+        >
+          {children}
+        </HoverableText>
+      </span>
+    </Link>
+  );
+};
+
+Tab.propTypes = {
+  children: PropTypes.node,
+  selected: PropTypes.bool,
+  onClick: PropTypes.func,
+  tabId: PropTypes.string,
+};
+
+Tab.defaultProps = {
+  selected: false,
+};
+
+export default Tab;

Tab/story.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  storiesOf,
+  action,
+} from '@storybook/react';
+import { checkA11y } from 'storybook-addon-a11y';
+import Tab from './index';
+
+storiesOf('Tab')
+  .addDecorator(checkA11y)
+  .add('default', () => (
+    <Tab
+      tabId={'tabId'}
+      onClick={action('tab-click')}
+    >
+      Tab
+    </Tab>
+  ))
+  .add('selected', () => (
+    <Tab
+      tabId={'selectedTabId'}
+      onClick={action('tab-click')}
+      selected
+    >
+      Tab
+    </Tab>
+  ));

Tabs/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Tabs = ({
+  children,
+  selectedTabId,
+  onTabClick,
+}) => (
+  <div>
+    {React.Children.map(children, tab => React.cloneElement(tab, {
+      selected: selectedTabId === tab.props.tabId,
+      onClick: onTabClick,
+    }))}
+  </div>
+);
+
+Tabs.propTypes = {
+  children: PropTypes.node,
+  selectedTabId: PropTypes.string,
+  onTabClick: PropTypes.func,
+};
+
+export default Tabs;

Tabs/story.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+  storiesOf,
+  action,
+} from '@storybook/react';
+import { checkA11y } from 'storybook-addon-a11y';
+import Tabs from './index';
+import Tab from '../Tab';
+
+
+storiesOf('Tabs')
+  .addDecorator(checkA11y)
+  .add('default', () => (
+    <Tabs
+      selectedTabId={'tabId'}
+      onTabClick={action('tab-click')}
+    >
+      <Tab tabId={'tabId'}>Tab 1</Tab>
+      <Tab tabId={'tabId2'}>Tab 2</Tab>
+    </Tabs>
+  ));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bufferapp/components",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "A shared set of UI Components",
   "main": "index.js",
   "scripts": {