feat(Tab): adds component.

e2e/__tests__/tab.test.js

@@ -0,0 +1,12 @@
+import { baisy } from '../setup/TestSuiter';
+
+
+const SUITES = [
+  baisy.suite('Components/Tab', 'common'),
+];
+
+
+SUITES.map(suite => {
+  it(suite.getTestName(), suite.testStory, 20000);
+});
+

src/components/Tab/Tab.js

@@ -0,0 +1,19 @@
+// @flow
+
+import React from 'react';
+
+import { TabOuter } from './Tab.theme';
+
+type TabProps = {
+  children: React$Node,
+  className?: string,
+};
+
+const Tab = ({ children, ...rest }: TabProps) => (
+  <TabOuter { ...rest }>
+    { children }
+  </TabOuter>
+);
+
+export { Tab };
+

src/components/Tab/Tab.stories.js

@@ -0,0 +1,22 @@
+// @flow
+
+import React from 'react';
+import { css } from 'react-emotion';
+
+export default (asStory: *) => {
+  asStory('Components/Tab', module, (story, { Tab, Row }) => {
+    story
+      .add('common', () => (
+        <div className={ css`background-color: #F4F7F9` }>
+          <Row gap="xs" offsetX="lg" offsetY="lg">
+            <Tab tagName="div" className="active">
+              Active Tab
+            </Tab>
+            <Tab tagName="div">
+              Inactive Tab
+            </Tab>
+          </Row>
+        </div>
+      ));
+  });
+};

src/components/Tab/Tab.theme.js

@@ -0,0 +1,34 @@
+import { createThemeTag } from '../../theme/createThemeTag';
+
+const name = 'tab';
+
+const [TabOuter, themeTabOuter] = createThemeTag(name, () => ({
+  root: {
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '32px',
+    padding: '6px 12px',
+    fontSize: '14px',
+    lineHeight: '20px',
+    color: '#323C47',
+    borderRadius: '5px 5px 0 0',
+    backgroundColor: '#FFFFFF',
+    cursor: 'pointer',
+
+    '&:not(.active)': {
+      opacity: 0.7,
+      borderRadius: '5px 5px 0 0',
+    },
+  },
+}));
+
+const theme = {
+  ...themeTabOuter,
+};
+
+export {
+  TabOuter,
+  theme,
+};
+

src/components/Tab/index.js

@@ -0,0 +1,5 @@
+// @flow
+
+export { Tab } from './Tab';
+export { theme } from './Tab.theme';
+

src/components/components.js

@@ -53,4 +53,5 @@ export { NoData } from './NoData';
 export { Pagination } from './Pagination';
 export { Indicator } from './Indicator';
 export { Divider } from './Divider';
+export { Tab } from './Tab';
 

src/components/theme.js

@@ -43,6 +43,7 @@ import { theme as tooltipTheme } from './Tooltip';
 import { theme as topBarTheme } from './TopBar';
 import { theme as treeSelectTheme } from './TreeSelect';
 import { theme as dividerTheme } from './Divider';
+import { theme as tabTheme } from './Tab';
 
 
 export const theme = {
@@ -89,4 +90,5 @@ export const theme = {
   ...topBarTheme,
   ...treeSelectTheme,
   ...dividerTheme,
+  ...tabTheme,
 };