From cb3a6b053383e3f8e6a376160a27020f564e5dfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 10 Sep 2018 11:35:56 -0300
Subject: [PATCH] Adding TabContent, TabPane

---
 src/core/client/ui/components/Tabs/Tab.mdx    | 52 +++++++++++++++++++
 src/core/client/ui/components/Tabs/Tab.tsx    | 22 ++++++--
 src/core/client/ui/components/Tabs/TabBar.tsx |  6 ++-
 .../client/ui/components/Tabs/TabContent.tsx  |  8 +++
 .../client/ui/components/Tabs/TabPane.css     |  0
 .../client/ui/components/Tabs/TabPane.tsx     | 40 ++++++++++++++
 6 files changed, 124 insertions(+), 4 deletions(-)
 create mode 100644 src/core/client/ui/components/Tabs/Tab.mdx
 create mode 100644 src/core/client/ui/components/Tabs/TabPane.css

diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx
new file mode 100644
index 000000000..add6f01cf
--- /dev/null
+++ b/src/core/client/ui/components/Tabs/Tab.mdx
@@ -0,0 +1,52 @@
+---
+name: Tab
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import HorizontalGutter from '../HorizontalGutter'
+
+
+import TabBar from './TabBar'
+import Tab from './Tab'
+
+
+# Tab
+
+## 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>
diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index 32509b75f..f1f8e245a 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -13,14 +13,22 @@ export interface TabBarProps {
    */
   classes: typeof styles;
 
-  tabId: number;
+  tabId: string;
   active: boolean;
   color: string;
   onTabClick?: () => void;
 }
 
 const TabBar: StatelessComponent<TabBarProps> = props => {
-  const { className, classes, children, tabId, active, color } = props;
+  const {
+    className,
+    classes,
+    children,
+    tabId,
+    active,
+    color,
+    onTabClick,
+  } = props;
 
   const rootClassName = cn(
     classes.root,
@@ -33,7 +41,15 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
   );
 
   return (
-    <li className={rootClassName} key={tabId}>
+    <li
+      className={rootClassName}
+      key={tabId}
+      id={`${tabId}-tab`}
+      role="tab"
+      onClick={onTabClick}
+      aria-controls={tabId}
+      aria-selected={active}
+    >
       {children}
     </li>
   );
diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
index 6aef2e6a8..8bb3d18f1 100644
--- a/src/core/client/ui/components/Tabs/TabBar.tsx
+++ b/src/core/client/ui/components/Tabs/TabBar.tsx
@@ -55,7 +55,11 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
       })
   );
 
-  return <ul className={rootClassName}>{tabs}</ul>;
+  return (
+    <ul className={rootClassName} role="tablist">
+      {tabs}
+    </ul>
+  );
 };
 
 TabBar.defaultProps = {
diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx
index e69de29bb..50653284d 100644
--- a/src/core/client/ui/components/Tabs/TabContent.tsx
+++ b/src/core/client/ui/components/Tabs/TabContent.tsx
@@ -0,0 +1,8 @@
+import React, { StatelessComponent } from "react";
+
+const TabContent: StatelessComponent<{}> = props => {
+  const { children } = props;
+  return <>{children}</>;
+};
+
+export default TabContent;
diff --git a/src/core/client/ui/components/Tabs/TabPane.css b/src/core/client/ui/components/Tabs/TabPane.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/core/client/ui/components/Tabs/TabPane.tsx b/src/core/client/ui/components/Tabs/TabPane.tsx
index e69de29bb..e24560f33 100644
--- a/src/core/client/ui/components/Tabs/TabPane.tsx
+++ b/src/core/client/ui/components/Tabs/TabPane.tsx
@@ -0,0 +1,40 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./TabPane.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: string;
+  hidden: boolean;
+}
+
+const TabContent: StatelessComponent<TabBarProps> = props => {
+  const { className, classes, children, tabId, hidden } = props;
+
+  const rootClassName = cn(classes.root, className);
+
+  return (
+    <section
+      className={rootClassName}
+      key={tabId}
+      id={tabId}
+      role="tabpanel"
+      aria-labelledby="foo-tab"
+      hidden={hidden}
+    >
+      {children}
+    </section>
+  );
+};
+
+const enhanced = withStyles(styles)(TabContent);
+export default enhanced;