tabs story changes (#15147)

ui/components/ui/tabs/tabs.stories.js

@@ -1,35 +1,48 @@
 import React from 'react';
-import { text } from '@storybook/addon-knobs';
 import Tab from './tab/tab.component';
 import Tabs from './tabs.component';
 
 export default {
   title: 'Components/UI/Tabs',
   id: __filename,
+  argTypes: {
+    tabs: {
+      control: 'object',
+      name: 'Tabs',
+    },
+    defaultActiveTabName: {
+      control: {
+        type: 'text',
+      },
+    },
+    onTabClick: { action: 'onTabClick' },
+  },
+  args: {
+    tabs: [
+      { name: 'Tab A', content: 'Tab A Content' },
+      { name: 'Tab B', content: 'Tab B Content' },
+      { name: 'Tab C', content: 'Tab C Content' },
+    ],
+  },
 };
 
-function renderTab(id) {
+function renderTab({ name, content }, index) {
   return (
-    <Tab name={text(`Tab ${id} Name`, `Tab ${id}`)} key={id}>
+    <Tab name={name} key={name + index}>
-      {text(`Tab ${id} Contents`, `Contents of Tab ${id}`)}
+      {content}
     </Tab>
   );
 }
 
-export const TwoTabs = () => {
+export const DefaultStory = (args) => {
-  return <Tabs>{['A', 'B'].map(renderTab)}</Tabs>;
-};
-
-export const ManyTabs = () => {
-  return <Tabs>{['A', 'B', 'C', 'D', 'E'].map(renderTab)}</Tabs>;
-};
-
-export const SingleTab = () => {
   return (
-    <Tabs>
+    <Tabs
-      <Tab name={text('Name', 'Single A')}>
+      defaultActiveTabName={args.defaultActiveTabName}
-        {text('Contents', 'Contents of tab')}
+      onTabClick={args.onTabClick}
-      </Tab>
+    >
+      {args.tabs.map((tabProps, i) => renderTab(tabProps, i))}
     </Tabs>
   );
 };
+
+DefaultStory.storyName = 'Default';