Changes

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

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React from "react";
+import React, { ReactNode } from "react";
 import { withStyles } from "talk-ui/hocs";
 import * as styles from "./Tab.css";
 
@@ -19,11 +19,11 @@ export interface TabProps {
   /**
    * Active status
    */
-  active: boolean;
+  active?: boolean;
   /**
    * Color style variant
    */
-  color: "primary" | "secondary";
+  color?: "primary" | "secondary";
   /**
    * Action taken on tab click
    */

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

@@ -0,0 +1,16 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import Tab from "./Tab";
+import TabBar from "./TabBar";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(
+    <TabBar activeTab="one">
+      <Tab tabId="one">One</Tab>
+      <Tab tabId="two">Two</Tab>
+      <Tab tabId="three">Three</Tab>
+    </TabBar>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});

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

@@ -15,7 +15,7 @@ export interface TabBarProps {
   /**
    * Color style variant
    */
-  color: "primary" | "secondary";
+  color?: "primary" | "secondary";
   /**
    * Active tab id/name
    */