Adding docs and changes

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

@@ -13,7 +13,7 @@
 }
 
 .root.primary {
-  background: #f2f2f2;
+  background: var(--palette-grey-lightest);
   color: var(--palette-grey-main);
   border: 1px solid var(--palette-grey-main);
   border-left-width: 0;
@@ -32,7 +32,7 @@
     background-color: var(--palette-common-white);
     color: var(--palette-common-black);
     border-bottom-color: var(--palette-common-white);
-    border-top-width: 5px;
+    border-top-width: calc(0.5 * var(--spacing-unit));
     border-top-color: var(--palette-primary-main);
   }
 }

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

@@ -1,25 +0,0 @@
----
-name: Tab
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-
-import TabBar from './TabBar'
-import Tab from './Tab'
-
-# Tab
-`Tab` component is to be used within the `TabBar` component. This renders a Tab inside the Tab Bar.s
-
-## Basic Usage
-<Playground>
-  <HorizontalGutter>
-    <TabBar defaultActiveTab="one">
-      <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

@@ -21,9 +21,9 @@ export interface TabProps {
    */
   active?: boolean;
   /**
-   * Color style variant
+   * Style variant
    */
-  color?: "primary" | "secondary";
+  variant?: "primary" | "secondary";
   /**
    * Action taken on tab click
    */
@@ -38,13 +38,13 @@ class Tab extends React.Component<TabProps> {
   };
 
   public render() {
-    const { className, classes, children, tabId, active, color } = this.props;
+    const { className, classes, children, tabId, active, variant } = this.props;
 
     const rootClassName = cn(
       classes.root,
       {
-        [classes.primary]: color === "primary",
-        [classes.secondary]: color === "secondary",
+        [classes.primary]: variant === "primary",
+        [classes.secondary]: variant === "secondary",
         [classes.active]: active,
       },
       className

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

@@ -9,5 +9,5 @@
 }
 
 .secondary {
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--palette-divider);
 }

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

@@ -1,51 +0,0 @@
----
-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 defaultActiveTab="one">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-    <TabBar defaultActiveTab="one" activeTab="second">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-    <TabBar defaultActiveTab="one" activeTab="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 defaultActiveTab="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/TabContent.mdx

@@ -1,23 +0,0 @@
----
-name: TabContent
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-import TabPane from './TabPane'
-import TabContent from './TabContent'
-
-# TabContent
-
-## Basic Use
-<Playground>
-  <HorizontalGutter>
-    <TabContent activeTab="one">
-      <TabPane tabId="one">Hola One</TabPane>
-      <TabPane tabId="two">Hola Two</TabPane>
-      <TabPane tabId="three">Hola Three</TabPane>
-    </TabContent>
-  </HorizontalGutter>
-</Playground>

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

@@ -1,23 +0,0 @@
----
-name: TabPane
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-import TabPane from './TabPane'
-import TabContent from './TabContent'
-
-# TabPane
-
-## Basic Use
-<Playground>
-  <HorizontalGutter>
-    <TabContent activeTab="one">
-      <TabPane tabId="one">Hola One</TabPane>
-      <TabPane tabId="two">Hola Two</TabPane>
-      <TabPane tabId="three">Hola Three</TabPane>
-    </TabContent>
-  </HorizontalGutter>
-</Playground>