ref(ui) Update based on review feedback and add storybook

docs-ui/components/navTabs.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+import {withInfo} from '@storybook/addon-info';
+
+import NavTabs from 'app/components/navTabs';
+
+storiesOf('NavTabs', module)
+  .add(
+    'default',
+    withInfo('NavTabs')(() => {
+      return (
+        <NavTabs>
+          <li className="active">
+            <a href="#">link one</a>
+          </li>
+          <li>
+            <a href="#">link two</a>
+          </li>
+        </NavTabs>
+      );
+    })
+  )
+  .add(
+    'underlined',
+    withInfo('NavTabs with bottom border applied')(() => {
+      return (
+        <NavTabs underlined={true}>
+          <li className="active">
+            <a href="#">link one</a>
+          </li>
+          <li>
+            <a href="#">link two</a>
+          </li>
+        </NavTabs>
+      );
+    })
+  );

src/sentry/static/sentry/app/components/navTabs.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 function NavTabs(props) {
-  let {children, underlined, ...tabProps} = props;
-  let className = 'nav nav-tabs' + (underlined ? ' border-bottom' : '');
-  return (
-    <ul className={className} {...tabProps}>
-      {children}
-    </ul>
-  );
+  let {underlined, ...tabProps} = props;
+  let className = classnames('nav nav-tabs', {'border-bottom': underlined});
+  return <ul className={className} {...tabProps} />;
 }
 
 NavTabs.propTypes = {