Add disabled dropdown item feature & add its test cases & update docs

components/dropdown/Dropdown.js

@@ -152,9 +152,12 @@ const factory = (Input) => {
 
     renderValue = (item, idx) => {
       const { theme } = this.props;
-      const className = item.value === this.props.value ? theme.selected : null;
+      const className = classnames({
+        [theme.selected]: item.value === this.props.value,
+        [theme.disabled]: item.disabled
+      });
       return (
-        <li key={idx} className={className} onClick={this.handleSelect.bind(this, item.value)}>
+        <li key={idx} className={className} onClick={!item.disabled ? this.handleSelect.bind(this, item.value) : null}>
           {this.props.template ? this.props.template(item) : item.label}
         </li>
       );

components/dropdown/__test__/index.spec.js

@@ -0,0 +1,44 @@
+import expect from 'expect';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {
+  renderIntoDocument,
+  scryRenderedDOMComponentsWithClass,
+  Simulate
+} from 'react-addons-test-utils';
+import sinon from 'sinon';
+import theme from '../theme.scss';
+import Dropdown, { Dropdown as RawDropdown } from '../Dropdown';
+
+
+describe('Dropdown', function () {
+  describe('#renderValue', function () {
+    const source = [
+      { value: 'EN-gb', label: 'England' },
+      { value: 'ES-es', label: 'Spain', disabled: true },
+      { value: 'TH-th', label: 'Thailand', disabled: true },
+      { value: 'EN-en', label: 'USA'}
+    ];
+    it('renders dropdown item with disabled style', function () {
+      const tree = renderIntoDocument(<Dropdown theme={theme} source={source} />);
+      const disabled = scryRenderedDOMComponentsWithClass(tree, theme.disabled);
+      expect(disabled.length).toEqual(2);
+    });
+    it('does not call onChange callback when disabled dorpdown item is clicked', function () {
+      const spy = sinon.spy();
+      const tree = renderIntoDocument(<Dropdown
+        theme={theme}
+        source={source}
+        value={source[0].value}
+        onChange={spy}
+      />);
+      const disabled = scryRenderedDOMComponentsWithClass(tree, theme.disabled);
+      expect(spy.called).toEqual(false);
+      Simulate.click(disabled[0]);
+      expect(spy.called).toEqual(false);
+      const selected = scryRenderedDOMComponentsWithClass(tree, theme.selected);
+      Simulate.click(selected[0]);
+      expect(spy.called).toEqual(true);
+    });
+  });
+});

components/dropdown/_config.scss

@@ -1,6 +1,7 @@
 $dropdown-color-white: $color-white !default;
 $dropdown-color-primary: $color-primary !default;
 $dropdown-color-primary-contrast: $color-primary-contrast !default;
+$dropdown-color-disabled: rgba($color-black, 0.26) !default;
 $dropdown-value-hover-background: $palette-grey-200 !default;
 $dropdown-overflow-max-height: 45vh !default;
 $dropdown-value-border-radius: .2 * $unit !default;

components/dropdown/theme.scss

@@ -128,11 +128,15 @@
     padding: $unit;
     overflow: hidden;
     cursor: pointer;
-    &:hover {
+    &:hover:not(.disabled) {
       background-color: $dropdown-value-hover-background;
     }
     &.selected {
       color: $dropdown-color-primary;
     }
+    &.disabled {
+      color: $dropdown-color-disabled;
+      cursor: not-allowed;
+    }
   }
 }

docs/app/components/layout/main/modules/examples/dropdown_example_1.txt

@@ -1,17 +1,28 @@
 class DropdownTest extends React.Component {
   state = {
-    selected: 3
+    albumSelected: 3,
+    countrySelected: 'ES-es'
   };
 
   albums = [
     { value: 1, artist: 'Radiohead', album: 'In Rainbows', img: 'http://www.clasesdeperiodismo.com/wp-content/uploads/2012/02/radiohead-in-rainbows.png' },
     { value: 2, artist: 'QOTSA', album: 'Sons for the Deaf', img: 'http://static.musictoday.com/store/bands/93/product_large/MUDD6669.JPG' },
     { value: 3, artist: 'Kendrick Lamar', album: 'Good Kid Maad City', img: 'https://cdn.shopify.com/s/files/1/0131/9332/products/0bd4b1846ba3890f574810dbeddddf8c.500x500x1_grande.png?v=1425070323' },
-    { value: 4, artist: 'Pixies', album: 'Doolittle', img: 'http://www.resident-music.com/image/cache/data/Emilys_Packshots/Pixies/Pixies_Doolittlke-500x500.jpg' }
+    { value: 4, artist: 'Pixies', album: 'Doolittle', img: 'http://www.resident-music.com/image/cache/data/Emilys_Packshots/Pixies/Pixies_Doolittlke-500x500.jpg', disabled: true }
+  ];
+  countries = [
+    { value: 'EN-gb', label: 'England' },
+    { value: 'ES-es', label: 'Spain'},
+    { value: 'TH-th', label: 'Thailand', disabled: true },
+    { value: 'EN-en', label: 'USA'}
   ];
 
-  handleChange = (value) => {
-    this.setState({selected: value});
+  handleAlbumChange = (value) => {
+    this.setState({albumSelected: value});
+  };
+
+  handleCountryChange = (value) => {
+    this.setState({countrySelected: value});
   };
 
   customItem (item) {
@@ -48,14 +59,21 @@ class DropdownTest extends React.Component {
 
   render () {
     return (
-      <Dropdown
-        auto={false}
-        source={this.albums}
-        onChange={this.handleChange}
-        label='Select your favorite album'
-        template={this.customItem}
-        value={this.state.selected}
-      />
+      <div>
+        <Dropdown
+          auto={false}
+          source={this.albums}
+          onChange={this.handleAlbumChange}
+          label='Select your favorite album'
+          template={this.customItem}
+          value={this.state.albumSelected}
+        />
+        <Dropdown
+          source={this.countries}
+          onChange={this.handleCountryChange}
+          value={this.state.countrySelected}
+        />
+      </div>
     );
   }
 }