Basic Tab usage

src/core/client/ui/components/Tabs/Tab.css

@@ -0,0 +1,42 @@
+.root {
+  box-sizing: border-box;
+  list-style: none;
+  padding: var(--spacing-unit);
+  display: inline-flex;
+  margin-bottom: -1px;
+}
+
+.root.primary {
+  background: #f2f2f2;
+  color: #787d80;
+  border: 1px solid #979797;
+  border-left-width: 0;
+  padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2);
+
+  &:first-child {
+    border-left-width: 1px;
+    border-top-left-radius: var(--round-corners);
+  }
+
+  &:last-child {
+    border-top-right-radius: var(--round-corners);
+  }
+
+  &.active {
+    background-color: var(--palette-common-white);
+    color: var(--palette-common-black);
+    border-bottom-color: white;
+    border-top-width: 5px;
+    border-top-color: #3498db;
+  }
+}
+
+.secondary {
+  border-bottom: 1px solid #e0e0e0;
+  padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2);
+
+  &.active {
+    font-weight: bold;
+    border-bottom: 3px solid #0277bd;
+  }
+}

src/core/client/ui/components/Tabs/Tab.tsx

@@ -0,0 +1,43 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./Tab.css";
+
+export interface TabBarProps {
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+
+  tabId: number;
+  active: boolean;
+  color: string;
+  onTabClick?: () => void;
+}
+
+const TabBar: StatelessComponent<TabBarProps> = props => {
+  const { className, classes, children, tabId, active, color } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.primary]: color === "primary",
+      [classes.secondary]: color === "secondary",
+      [classes.active]: active,
+    },
+    className
+  );
+
+  return (
+    <li className={rootClassName} key={tabId}>
+      {children}
+    </li>
+  );
+};
+
+const enhanced = withStyles(styles)(TabBar);
+export default enhanced;

src/core/client/ui/components/Tabs/TabBar.css

@@ -0,0 +1,13 @@
+.root {
+  display: flex;
+  padding: 0;
+  margin: 0;
+}
+
+.primary {
+  border-bottom: 1px solid #787d80;
+}
+
+.secondary {
+  border-bottom: 1px solid #e0e0e0;
+}

src/core/client/ui/components/Tabs/TabBar.mdx

@@ -0,0 +1,52 @@
+---
+name: TabBar
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import HorizontalGutter from '../HorizontalGutter'
+
+
+import TabBar from './TabBar'
+import Tab from './Tab'
+
+
+# TabBar
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+
+    <TabBar defaultActiveId="one">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+
+    <TabBar defaultActiveId="one" activeId="second">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+
+    <TabBar defaultActiveId="one" activeId="three">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+
+  </HorizontalGutter>
+</Playground>
+
+## Secondary Color
+<Playground>
+  <HorizontalGutter>
+
+    <TabBar defaultActiveId="one" color="secondary">
+      <Tab tabId="one">Tab one</Tab>
+      <Tab tabId="second">Active Tab</Tab>
+      <Tab tabId="three">Tab Three</Tab>
+    </TabBar>
+
+  </HorizontalGutter>
+</Playground>

src/core/client/ui/components/Tabs/TabBar.tsx

@@ -0,0 +1,66 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./TabBar.css";
+
+export interface TabBarProps {
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+
+  color: "primary" | "secondary";
+  activeId?: string;
+  defaultActiveId?: string;
+  onChange?: (activeId: string) => void;
+  onTabClick?: () => void;
+}
+
+const TabBar: StatelessComponent<TabBarProps> = props => {
+  const {
+    className,
+    classes,
+    children,
+    onTabClick,
+    activeId,
+    color,
+    defaultActiveId,
+  } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    [
+      {
+        [classes.primary]: color === "primary",
+        [classes.secondary]: color === "secondary",
+      },
+    ],
+    className
+  );
+
+  const tabs = React.Children.toArray(children).map(
+    (child: React.ReactElement<any>, index: number) =>
+      React.cloneElement(child, {
+        tabId: index,
+        active:
+          defaultActiveId && !activeId
+            ? child.props.tabId === defaultActiveId
+            : child.props.tabId === activeId,
+        color,
+        onTabClick,
+      })
+  );
+
+  return <ul className={rootClassName}>{tabs}</ul>;
+};
+
+TabBar.defaultProps = {
+  color: "primary",
+};
+
+const enhanced = withStyles(styles)(TabBar);
+export default enhanced;

src/core/client/ui/components/Tabs/index.ts

@@ -0,0 +1 @@
+export { default } from "./TabBar";