From 325c182fb42b02d8518cdb6fe7c3a66dce5ed247 Mon Sep 17 00:00:00 2001
From: Andrei Firsov <andrei.firsov@8base.com>
Date: Tue, 13 Aug 2019 16:19:44 +0300
Subject: [PATCH] feat(Tab): adds component.

---
 ...b-test-js-components-tab-common-1-snap.png | Bin 0 -> 4309 bytes
 e2e/__tests__/tab.test.js                     |  12 +++++++
 src/components/Tab/Tab.js                     |  19 ++++++++++
 src/components/Tab/Tab.stories.js             |  22 ++++++++++++
 src/components/Tab/Tab.theme.js               |  34 ++++++++++++++++++
 src/components/Tab/index.js                   |   5 +++
 src/components/components.js                  |   1 +
 src/components/theme.js                       |   2 ++
 8 files changed, 95 insertions(+)
 create mode 100644 e2e/__tests__/__image_snapshots__/tab-test-js-components-tab-common-1-snap.png
 create mode 100644 e2e/__tests__/tab.test.js
 create mode 100644 src/components/Tab/Tab.js
 create mode 100644 src/components/Tab/Tab.stories.js
 create mode 100644 src/components/Tab/Tab.theme.js
 create mode 100644 src/components/Tab/index.js

diff --git a/e2e/__tests__/__image_snapshots__/tab-test-js-components-tab-common-1-snap.png b/e2e/__tests__/__image_snapshots__/tab-test-js-components-tab-common-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e132d828d53f510957ce6451d10c4298da14df5
GIT binary patch
literal 4309
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

literal 0
HcmV?d00001

diff --git a/e2e/__tests__/tab.test.js b/e2e/__tests__/tab.test.js
new file mode 100644
index 00000000..6d3ae4b6
--- /dev/null
+++ b/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);
+});
+
diff --git a/src/components/Tab/Tab.js b/src/components/Tab/Tab.js
new file mode 100644
index 00000000..f78a3acf
--- /dev/null
+++ b/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 };
+
diff --git a/src/components/Tab/Tab.stories.js b/src/components/Tab/Tab.stories.js
new file mode 100644
index 00000000..2ce19464
--- /dev/null
+++ b/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>
+      ));
+  });
+};
diff --git a/src/components/Tab/Tab.theme.js b/src/components/Tab/Tab.theme.js
new file mode 100644
index 00000000..8b064d84
--- /dev/null
+++ b/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,
+};
+
diff --git a/src/components/Tab/index.js b/src/components/Tab/index.js
new file mode 100644
index 00000000..789bf04e
--- /dev/null
+++ b/src/components/Tab/index.js
@@ -0,0 +1,5 @@
+// @flow
+
+export { Tab } from './Tab';
+export { theme } from './Tab.theme';
+
diff --git a/src/components/components.js b/src/components/components.js
index 25008dcb..a468c393 100644
--- a/src/components/components.js
+++ b/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';
 
diff --git a/src/components/theme.js b/src/components/theme.js
index f070fcfb..f1779be9 100644
--- a/src/components/theme.js
+++ b/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,
 };