fix(Tab): add missing disabled prop (#2234)

Refs #1293.

src/components/Tab/Tab.js

@@ -37,6 +37,11 @@ export default class Tab extends React.Component {
      */
     handleTabKeyDown: PropTypes.func,
 
+    /**
+     * Whether your Tab is disabled.
+     */
+    disabled: PropTypes.bool,
+
     /**
      * Provide a string that represents the `href` of the Tab
      */
@@ -114,6 +119,7 @@ export default class Tab extends React.Component {
       handleTabClick,
       handleTabAnchorFocus, // eslint-disable-line
       handleTabKeyDown,
+      disabled,
       href,
       index,
       label,
@@ -125,11 +131,10 @@ export default class Tab extends React.Component {
       ...other
     } = this.props;
 
-    const classes = classNames(
-      `${prefix}--tabs__nav-item`,
-      { [`${prefix}--tabs__nav-item--selected`]: selected },
-      className
-    );
+    const classes = classNames(className, `${prefix}--tabs__nav-item`, {
+      [`${prefix}--tabs__nav-item--disabled`]: disabled,
+      [`${prefix}--tabs__nav-item--selected`]: selected,
+    });
 
     const anchorProps = {
       className: `${prefix}--tabs__nav-link`,

src/components/Tabs/Tabs-story.js

@@ -9,7 +9,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { withKnobs, number, text } from '@storybook/addon-knobs';
+import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
 import Tabs from '../Tabs';
 import Tab from '../Tab';
 import TabsSkeleton from '../Tabs/Tabs.Skeleton';
@@ -36,6 +36,7 @@ const props = {
     ),
   }),
   tab: () => ({
+    disabled: boolean('Disabled (disabled in <Tab>)', false),
     href: text('The href for tab (href in <Tab>)', '#'),
     role: text('ARIA role (role in <Tab>)', 'presentation'),
     tabIndex: number('Tab index (tabIndex in <Tab>)', 0),