Add stories for `Tabs` component (#8134)

This effectively covers the `Tab` component as well, which doesn't
really make sense to showcase on its own.

One minor change was made to the actual `Tabs` component; `children`
was marked as a required prop. It doesn't render anything sensible if
they are omitted, and it always has at least one child in our codebase.

ui/app/components/ui/tabs/tabs.component.js

@@ -8,7 +8,7 @@ export default class Tabs extends Component {
 
   static propTypes = {
     defaultActiveTabIndex: PropTypes.number,
-    children: PropTypes.node,
+    children: PropTypes.node.isRequired,
   }
 
   state = {

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

@@ -0,0 +1,57 @@
+import React from 'react'
+import Tab from './tab/tab.component'
+import Tabs from './tabs.component'
+import { number, text } from '@storybook/addon-knobs/react'
+
+export default {
+  title: 'Tabs',
+}
+
+function renderTab (id) {
+  return (
+    <Tab
+      name={text(`Tab ${id} Name`, `Tab ${id}`)}
+      key={id}
+    >
+      {text(`Tab ${id} Contents`, `Contents of Tab ${id}`)}
+    </Tab>
+  )
+}
+
+export const twoTabs = () => {
+  return (
+    <Tabs
+      defaultActiveTabIndex={number('Default Active Tab Index', 0, { min: 0 })}
+    >
+      {
+        ['A', 'B']
+          .map(renderTab)
+      }
+    </Tabs>
+  )
+}
+
+export const manyTabs = () => {
+  return (
+    <Tabs
+      defaultActiveTabIndex={number('Default Active Tab Index', 0, { min: 0 })}
+    >
+      {
+        ['A', 'B', 'C', 'D', 'E']
+          .map(renderTab)
+      }
+    </Tabs>
+  )
+}
+
+export const singleTab = () => {
+  return (
+    <Tabs>
+      <Tab
+        name={text('Name', 'Single A')}
+      >
+        {text('Contents', 'Contents of tab')}
+      </Tab>
+    </Tabs>
+  )
+}