Adding TabContent, TabPane

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>

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>
   );

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 = {

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;

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;