Tabs can have ids

src/components/TabNav/TabNav.js

@@ -6,14 +6,14 @@ import { NamedLink } from '../../components';
 import css from './TabNav.css';
 
 const Tab = props => {
-  const { className, disabled, text, selected, linkProps } = props;
+  const { className, id, disabled, text, selected, linkProps } = props;
   const linkClasses = classNames(css.link, {
     [css.selectedLink]: selected,
     [css.disabled]: disabled,
   });
 
   return (
-    <div className={className}>
+    <div id={id} className={className}>
       <NamedLink className={linkClasses} {...linkProps}>
         {text}
       </NamedLink>
@@ -26,6 +26,7 @@ Tab.defaultProps = { className: null, disabled: false, selected: false };
 const { arrayOf, bool, node, object, string } = PropTypes;
 
 Tab.propTypes = {
+  id: string.isRequired,
   className: string,
   text: node.isRequired,
   disabled: bool,
@@ -40,8 +41,8 @@ const TabNav = props => {
   return (
     <nav className={classes}>
       {tabs.map((tab, index) => {
-        const key = typeof tab.text === 'string' ? tab.text : index;
-        return <Tab key={key} className={tabClasses} {...tab} />;
+        const id = typeof tab.id === 'string' ? tab.id : `${index}`;
+        return <Tab key={id} id={id} className={tabClasses} {...tab} />;
       })}
     </nav>
   );

src/components/Tabs/Tabs.example.js

@@ -20,13 +20,13 @@ const selfLinkProps = {
 const TabsWrapper = () => {
   return (
     <Tabs>
-      <TestPanel tabLabel="Description" tabLinkProps={selfLinkProps}>
+      <TestPanel tabId="Description" tabLabel="Description" tabLinkProps={selfLinkProps}>
         Description form stuff
       </TestPanel>
-      <TestPanel selected tabLabel="Location" tabLinkProps={selfLinkProps}>
+      <TestPanel selected tabId="Location" tabLabel="Location" tabLinkProps={selfLinkProps}>
         Location form stuff
       </TestPanel>
-      <TestPanel tabLabel="Price" tabLinkProps={selfLinkProps} disabled>
+      <TestPanel tabId="Price" tabLabel="Price" tabLinkProps={selfLinkProps} disabled>
         Price form stuff
       </TestPanel>
     </Tabs>

src/components/Tabs/Tabs.js

@@ -28,18 +28,20 @@ const Tabs = props => {
   const classes = classNames(rootClasses, className);
 
   const tabNavTabs = React.Children.map(children, child => {
-    const { tabLabel, tabLinkProps } = child.props;
+    const { tabId, tabLabel, tabLinkProps } = child.props;
 
     // Child components need to have TabNav props included
-    if (!tabLabel || !tabLinkProps) {
+    if (!tabId || !tabLabel || !tabLinkProps) {
       throw new Error(
         `Tabs component: a child component is missing required props.
+        tabId: (${tabId})
         tabLabel: (${tabLabel})
         tabLinkProps: (${tabLinkProps})`
       );
     }
 
     return {
+      id: tabId,
       text: child.props.tabLabel,
       linkProps: child.props.tabLinkProps,
       disabled: child.props.disabled,