Add "disabled" prop and Preact support to Tabs component (#265)

CMSgov · Jun 28, 2018 · 5675f0b · 5675f0b
1 parent d3d9228
commit 5675f0b
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 10 deletions.
diff --git a/packages/core/dist/components/Tabs/Tab.js b/packages/core/dist/components/Tabs/Tab.js
@@ -72,12 +72,13 @@ var Tab = exports.Tab = function (_React$PureComponent) {
         'a',
         {
           'aria-selected': String(this.props.selected),
+          'aria-disabled': String(this.props.disabled),
           'aria-controls': this.props.panelId,
           className: classes,
           href: this.href,
           id: this.props.id,
-          onClick: this.handleClick,
-          onKeyDown: this.handleKeyDown,
+          onClick: this.props.disabled ? undefined : this.handleClick,
+          onKeyDown: this.props.disabled ? undefined : this.handleKeyDown,
           role: 'tab',
           ref: function ref(tab) {
             _this2.tab = tab;
@@ -127,7 +128,8 @@ Tab.propTypes = {
    * The `id` of the associated `TabPanel`. Used for the `aria-controls` attribute.
    */
   panelId: _propTypes2.default.string.isRequired,
-  selected: _propTypes2.default.bool
+  selected: _propTypes2.default.bool,
+  disabled: _propTypes2.default.bool
 };
 
 exports.default = Tab;
diff --git a/packages/core/dist/components/Tabs/TabPanel.js b/packages/core/dist/components/Tabs/TabPanel.js
@@ -31,6 +31,7 @@ function TabPanel(props) {
     {
       'aria-labelledby': props.tabId,
       'aria-hidden': String(!props.selected),
+      'aria-disabled': String(props.disabled),
       className: classes,
       id: props.id,
       role: 'tabpanel'
@@ -54,6 +55,7 @@ TabPanel.propTypes = {
    */
   id: _propTypes2.default.string.isRequired,
   selected: _propTypes2.default.bool,
+  disabled: _propTypes2.default.bool,
   /* eslint-disable react/no-unused-prop-types */
   /**
    * The associated tab's label. Only applicable when the panel is a

diff --git a/packages/core/dist/components/Tabs/Tabs.css b/packages/core/dist/components/Tabs/Tabs.css
diff --git a/packages/core/dist/components/Tabs/Tabs.js b/packages/core/dist/components/Tabs/Tabs.js
@@ -78,7 +78,8 @@ function panelTabId(panel) {
  * @return {Boolean} Is this a TabPanel component?
  */
 function isTabPanel(child) {
-  return child != null && child.type === _TabPanel2.default;
+  // Preact doesn't support child.type, React doesn't support child.nodeName
+  return child != null && (child.type === _TabPanel2.default || child.nodeName && child.nodeName.prototype && child.nodeName.prototype.displayName === 'TabPanel');
 }
 
 /**
@@ -205,6 +206,7 @@ var Tabs = exports.Tabs = function (_React$PureComponent) {
           {
             className: panel.props.tabClassName,
             href: panel.props.tabHref,
+            disabled: panel.props.disabled,
             id: panelTabId(panel),
             key: panel.key,
             onClick: _this3.handleTabClick,

diff --git a/packages/core/dist/index.css b/packages/core/dist/index.css
diff --git a/packages/core/src/components/Tabs/Tab.jsx b/packages/core/src/components/Tabs/Tab.jsx
@@ -33,12 +33,13 @@ export class Tab extends React.PureComponent {
     return (
       <a
         aria-selected={String(this.props.selected)}
+        aria-disabled={String(this.props.disabled)}
         aria-controls={this.props.panelId}
         className={classes}
         href={this.href}
         id={this.props.id}
-        onClick={this.handleClick}
-        onKeyDown={this.handleKeyDown}
+        onClick={this.props.disabled ? undefined : this.handleClick}
+        onKeyDown={this.props.disabled ? undefined : this.handleKeyDown}
         role="tab"
         ref={tab => {
           this.tab = tab;
@@ -86,7 +87,8 @@ Tab.propTypes = {
    * The `id` of the associated `TabPanel`. Used for the `aria-controls` attribute.
    */
   panelId: PropTypes.string.isRequired,
-  selected: PropTypes.bool
+  selected: PropTypes.bool,
+  disabled: PropTypes.bool
 };
 
 export default Tab;
diff --git a/packages/core/src/components/Tabs/Tab.test.jsx b/packages/core/src/components/Tabs/Tab.test.jsx
@@ -42,6 +42,16 @@ describe('Tab', function() {
     expect(onClickMock.mock.calls[0][3]).toBe(`#${data.props.panelId}`);
   });
 
+  it("doesn't call onClick when disabled", () => {
+    const onClickMock = jest.fn();
+    const data = shallowRender({ onClick: onClickMock, disabled: true });
+
+    data.wrapper.simulate('click');
+    data.wrapper.simulate('onKeyDown');
+
+    expect(onClickMock.mock.calls.length).toBe(0);
+  });
+
   it('is selected', () => {
     const wrapper = shallowRender({ selected: true }).wrapper;
     expect(wrapper.prop('aria-selected')).toBe('true');

diff --git a/packages/core/src/components/Tabs/TabPanel.jsx b/packages/core/src/components/Tabs/TabPanel.jsx
@@ -13,6 +13,7 @@ export function TabPanel(props) {
     <div
       aria-labelledby={props.tabId}
       aria-hidden={String(!props.selected)}
+      aria-disabled={String(props.disabled)}
       className={classes}
       id={props.id}
       role="tabpanel"
@@ -37,6 +38,7 @@ TabPanel.propTypes = {
    */
   id: PropTypes.string.isRequired,
   selected: PropTypes.bool,
+  disabled: PropTypes.bool,
   /* eslint-disable react/no-unused-prop-types */
   /**
    * The associated tab's label. Only applicable when the panel is a

diff --git a/packages/core/src/components/Tabs/Tabs.example.jsx b/packages/core/src/components/Tabs/Tabs.example.jsx
@@ -54,6 +54,9 @@ ReactDOM.render(
         <li>Congressional pay raises</li>
       </ol>
     </TabPanel>
+    <TabPanel id="disabled" tab="Disabled" disabled>
+      You should not see this.
+    </TabPanel>
   </Tabs>,
   document.getElementById('js-example')
 );
diff --git a/packages/core/src/components/Tabs/Tabs.jsx b/packages/core/src/components/Tabs/Tabs.jsx
@@ -46,7 +46,14 @@ function panelTabId(panel) {
  * @return {Boolean} Is this a TabPanel component?
  */
 function isTabPanel(child) {
-  return child != null && child.type === TabPanel;
+  // Preact doesn't support child.type, React doesn't support child.nodeName
+  return (
+    child != null &&
+    (child.type === TabPanel ||
+      (child.nodeName &&
+        child.nodeName.prototype &&
+        child.nodeName.prototype.displayName === 'TabPanel'))
+  );
 }
 
 /**
@@ -150,6 +157,7 @@ export class Tabs extends React.PureComponent {
         <Tab
           className={panel.props.tabClassName}
           href={panel.props.tabHref}
+          disabled={panel.props.disabled}
           id={panelTabId(panel)}
           key={panel.key}
           onClick={this.handleTabClick}

diff --git a/packages/core/src/components/Tabs/Tabs.scss b/packages/core/src/components/Tabs/Tabs.scss
@@ -149,6 +149,21 @@ Style guide: components.tabs.react-tab
     }
   }
 
+  &[aria-disabled='true'] {
+    background-color: $color-gray-lighter;
+    border-color: $color-gray-lighter;
+    color: $color-gray-dark;
+    pointer-events: none;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $color-gray-lighter;
+      border-color: $color-gray-lighter;
+      color: $color-gray-dark;
+    }
+  }
+
   &:focus,
   &:hover {
     color: $color-primary;