Two working examples, primary and secondary

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

@@ -15,7 +15,7 @@ export interface TabBarProps {
 
   color: "primary" | "secondary";
 
-  activeId?: string;
+  activeTab?: string;
   defaultActiveId?: string;
 
   onChange?: (activeId: string) => void;
@@ -28,7 +28,7 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
     classes,
     children,
     onTabClick,
-    activeId,
+    activeTab,
     color,
     defaultActiveId,
   } = props;
@@ -46,13 +46,12 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
 
   const tabs = React.Children.toArray(children).map(
     (child: React.ReactElement<any>, index: number) =>
-      console.log(child) ||
       React.cloneElement(child, {
         index,
         active:
-          defaultActiveId && !activeId
+          defaultActiveId && !activeTab
             ? child.props.tabId === defaultActiveId
-            : child.props.tabId === activeId,
+            : child.props.tabId === activeTab,
         color,
         onTabClick,
       })

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

@@ -14,7 +14,7 @@ const TabContent: StatelessComponent<TabContentProps> = props => {
         )
         .map((child: React.ReactElement<any>, i) =>
           React.cloneElement(child, {
-            tabId: child.props.tabId !== undefined ? child.props.tabId : i,
+            tabId: child.props.tabId ? child.props.tabId : i,
           })
         )}
     </>

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

@@ -1,7 +1,4 @@
-import cn from "classnames";
 import React, { StatelessComponent } from "react";
-import { withStyles } from "talk-ui/hocs";
-import * as styles from "./TabPane.css";
 
 export interface TabBarProps {
   /**
@@ -9,32 +6,24 @@ export interface TabBarProps {
    */
   className?: string;
   /**
-   * Override or extend the styles applied to the component.
+   * Name of the tab
    */
-  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);
-
+const TabPane: StatelessComponent<TabBarProps> = props => {
+  const { className, children, tabId } = props;
   return (
     <section
-      className={rootClassName}
+      className={className}
       key={tabId}
       id={tabId}
       role="tabpanel"
-      aria-labelledby="foo-tab"
-      hidden={hidden}
+      aria-labelledby={`${tabId}-tab`}
     >
       {children}
     </section>
   );
 };
 
-const enhanced = withStyles(styles)(TabContent);
-export default enhanced;
+export default TabPane;

src/docs/tabs.mdx

@@ -11,15 +11,42 @@ import { Playground, PropsTable } from 'docz'
 import { Flex, TabBar, Tab, TabContent, TabPane } from '../core/client/ui/components'
 import Container from "react-with-state-props"
 
-## Simple Form
+## Primary Tabs
 <Playground>
   <Container
     state={{ activeId: "two" }}
     render={props => (
-      <TabBar activeId={props.activeId} onTabClick={(id)=> props.setActiveId(id)}>
+      <div>
+      <TabBar activeTab={props.activeId} onTabClick={(id)=> props.setActiveId(id)}>
         <Tab tabId="one">One</Tab>
         <Tab tabId="two">Two</Tab>
         <Tab tabId="three">Three</Tab>
       </TabBar>
+      <TabContent activeTab={props.activeId}>
+        <TabPane tabId="one">Hola One</TabPane>
+        <TabPane tabId="two">Hola Two</TabPane>
+        <TabPane tabId="three">Hola Three</TabPane>
+      </TabContent>
+      </div>
+    )}/>
+</Playground>
+
+## Secondary Tabs
+<Playground>
+  <Container
+    state={{ activeId: "two" }}
+    render={props => (
+      <div>
+      <TabBar color="secondary" activeTab={props.activeId} onTabClick={(id)=> props.setActiveId(id)}>
+        <Tab tabId="one">One</Tab>
+        <Tab tabId="two">Two</Tab>
+        <Tab tabId="three">Three</Tab>
+      </TabBar>
+      <TabContent activeTab={props.activeId}>
+        <TabPane tabId="one">Hola One</TabPane>
+        <TabPane tabId="two">Hola Two</TabPane>
+        <TabPane tabId="three">Hola Three</TabPane>
+      </TabContent>
+      </div>
     )}/>
 </Playground>