DCOS-54459: feat(tabs): add tabs component (#338)

DCOS-54459: feat(tabs): add tabs component

package.json

@@ -42,6 +42,7 @@
   "typings": "dist/packages/index",
   "dependencies": {
     "@types/chartist": "^0.9.46",
+    "@types/react-tabs": "^2.3.1",
     "chartist": "^0.11.0",
     "downshift": "3.2.10",
     "emotion": "9.2.12",
@@ -54,6 +55,7 @@
     "react-delegate-component": "1.0.0",
     "react-draggable": "3.2.1",
     "react-emotion": "9.2.12",
+    "react-tabs": "^3.0.0",
     "react-toggled": "1.2.7",
     "react-transition-group": "2.5.0",
     "react-virtualized": "9.20.1",

packages/index.ts

@@ -60,5 +60,6 @@ export { Tooltip } from "./tooltip";
 export { Typeahead } from "./typeahead";
 export { UIKitThemeProvider } from "./themes";
 export { Legacy };
+export { TabItem, TabTitle, Tabs } from "./tabs";
 
 injectGlobalCss();

packages/tabs/README.md

@@ -0,0 +1,31 @@
+# Tabs Name
+
+State of the Tabs is controlled with in the component.
+
+Example Component:
+
+```JS
+class Example extends React.Component<{}, Partial<{ selectedIndex: number }>> {
+  state = { selectedIndex: 0 };
+  handleSelect = selectedIndex => {
+    this.setState({ selectedIndex });
+  };
+  render() {
+    const { selectedIndex } = this.state;
+    return (
+      <Tabs selectedIndex={selectedIndex} onSelect={this.handleSelect}>
+        <TabItem>
+          <TabTitle>Tab 1 Name</TabTitle>
+          First tab Content
+        </TabItem>
+        <TabItem>
+          <TabTitle>Tab 2 Name</TabTitle>
+          Second Tab Content
+        </TabItem>
+      </Tabs>
+    );
+  }
+}
+```
+
+Under the hood we are using [react-tabs](https://github.com/reactjs/react-tabs)