Tabs component & story

package.json

@@ -50,6 +50,7 @@
     "lodash": "^4.17.4",
     "object-path": "^0.11.4",
     "react": "^16.2.0",
+    "react-collapse": "^4.0.3",
     "react-dom": "^16.2.0",
     "react-i18next": "^7.3.1",
     "react-mortal": "^3.0.1",

src/components/base/Tabs/index.js

@@ -0,0 +1,50 @@
+// @flow
+
+import React, { Fragment } from 'react'
+import { Collapse } from 'react-collapse'
+import styled from 'styled-components'
+
+import type { Element } from 'react'
+
+import Box, { Tabbable } from 'components/base/Box'
+
+const Tab = styled(Tabbable).attrs({
+  flex: 1,
+  pb: 1,
+  align: 'center',
+  justify: 'center',
+})`
+  border-bottom: 2px solid transparent;
+  border-bottom-color: ${p => (p.isActive ? p.theme.colors.blue : '')};
+  color: ${p => (p.isActive ? p.theme.colors.blue : p.theme.colors.steel)};
+  font-weight: ${p => (p.isActive ? 'bold' : '')};
+  margin-bottom: -1px;
+  outline: none;
+`
+
+type Item = {
+  key: string | number,
+  title: string | Element<any>,
+  render: () => Element<any>,
+}
+
+type Props = {
+  items: Array<Item>,
+  index: number,
+  onTabClick: number => void,
+}
+
+const Tabs = ({ items, index, onTabClick }: Props) => (
+  <Fragment>
+    <Box horizontal borderBottom borderWidth={1} borderColor="argile">
+      {items.map((item, i) => (
+        <Tab key={item.key} isActive={index === i} onClick={() => onTabClick(i)}>
+          {item.title}
+        </Tab>
+      ))}
+    </Box>
+    {items[index] && <Collapse isOpened>{items[index].render()}</Collapse>}
+  </Fragment>
+)
+
+export default Tabs

src/components/base/Tabs/stories.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { number } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/react'
+
+import Tabs from 'components/base/Tabs'
+
+const stories = storiesOf('Tabs', module)
+
+stories.add('basic', () => (
+  <Tabs
+    index={number('index', 0)}
+    onTabClick={action('onTabClick')}
+    items={[
+      {
+        key: 'first',
+        title: 'first tab',
+        render: () => <div>{'first tab content'}</div>,
+      },
+      {
+        key: 'second',
+        title: 'second tab',
+        render: () => <div>{'second tab content'}</div>,
+      },
+    ]}
+  />
+))

src/styles/theme.js

@@ -6,6 +6,7 @@ export default {
     white: '#ffffff',
 
     argile: '#eeeeee',
+    blue: '#6193ff',
     cream: '#f9f9f9',
     grenade: '#ea2e49',
     lead: '#999999',

yarn.lock

@@ -7164,6 +7164,12 @@ rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@^1.1.7, rc@^1.2.1:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-collapse@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/react-collapse/-/react-collapse-4.0.3.tgz#b96de959ed0092a43534630b599a4753dd76d543"
+  dependencies:
+    prop-types "^15.5.8"
+
 react-color@^2.11.4:
   version "2.13.8"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.13.8.tgz#bcc58f79a722b9bfc37c402e68cd18f26970aee4"