<FileTabs />

README.md

@@ -3,6 +3,54 @@ React Native Tipsi custom UI elements
 
 ## Components
 
+### `<ColoredTabs />`
+
+Customizable colored tabs.
+
+#### ColoredTabs Props
+
+| Name | Desc | Type | Default
+| --- | --- | --- | --- |
+| `selected` | id of selected tab.  | String | `first tab`
+| `onPress` | Handle press on tab action. Receive id of selected tab as argument. | Function | `() => {}`
+
+
+#### ColoredTabs.Item Props
+
+| Name | Desc | Type | Default
+| --- | --- | --- | --- |
+| `title` | Text of tab. | String | `undefined`
+| `color` | Color of tab | String | `#82909d`
+| `id` | Tab id. This id will passed to `onPress` for identify action. | String | `undefined`
+| `active` | Show item as active  | Boolean | `false`
+| `onPress` | Handle press action | Function | `() => {}`
+
+#### Example
+
+
+```js
+import React, { PureComponent } from 'react'
+import { ColoredTabs } from 'tipsi-ui-kit'
+
+class Example extends PureComponent {
+  handlePress = id => console.log(`Tab with id ${id} is clicked!`)
+
+  const Example = () => (
+    <ColoredTabs onPress={this.handlePress}>
+      <ColoredTabs.Item id="0" title="One" color="crimson" />
+      <ColoredTabs.Item id="1" title="Two" color="orange" />
+      <ColoredTabs.Item id="2" title="Three" color="chartreuse" />
+      <ColoredTabs.Item id="3" title="Four" color="dodgerblue" />
+    </ColoredTabs>
+  )
+}
+```
+
+#### Preview
+
+![tabs_ios](https://cloud.githubusercontent.com/assets/4946753/22029399/1f3905c2-dce3-11e6-8c83-5142fdeb4351.png)
+![tabs_android](https://cloud.githubusercontent.com/assets/4946753/22029396/1af713e6-dce3-11e6-8f1a-64e4706bf581.png)
+
 ### `<Dash />`
 
 Component to draw customisable dashed lines

__tests__/e2e/09_FileTabs.test.js

@@ -0,0 +1,46 @@
+import test from 'tape-async'
+import helper from 'tipsi-appium-helper'
+
+const { driver, select, idFromXPath } = helper
+
+test('<FileTabs />', async (t) => {
+  const tabsGroupId = select({
+    ios: idFromXPath(`//
+      XCUIElementTypeScrollView[1]/*/*/
+      XCUIElementTypeOther[2]/XCUIElementTypeOther[1]
+    `),
+    android: idFromXPath(`//
+      android.widget.ScrollView[1]/android.view.View[1]/android.view.View[1]
+    `),
+  })
+  const tagItemId = select({
+    ios: idFromXPath(`
+      ${tabsGroupId}/XCUIElementTypeOther[tabId]
+    `),
+    android: idFromXPath(`
+      ${tabsGroupId}/android.view.View[tabId]
+    `),
+  })
+
+  try {
+    await helper.openExampleFor('<FileTabs />')
+
+    for (const tabId of [1, 2, 3, 4]) {
+      const currentTabId = select({
+        ios: tagItemId.replace('tabId', tabId),
+        android: tagItemId.replace('tabId', tabId + 1),
+      })
+      await driver.waitForVisible(currentTabId, 20000)
+      await driver.click(currentTabId)
+
+      t.pass(`tab ${tabId} clicked`)
+    }
+
+    t.pass('<FileTabs /> example should be visible')
+  } catch (error) {
+    await helper.screenshot()
+    await helper.source()
+
+    throw error
+  }
+})