Merge be9ab06 into 5490ba1

src/components/List/ListItem/ListItem.js

@@ -7,11 +7,11 @@ import styles from './ListItem.scss';
 const { block, elem } = bem({
     name: 'ListItem',
     classnames: styles,
-    propsToMods: ['isSelected', 'onClick']
+    propsToMods: ['isSelected', 'onClick', 'disabled']
 });
 
 const ListItem = props => {
-    const { children, isSelected, onClick, ...rest } = props;
+    const { children, isSelected, onClick, disabled, ...rest } = props;
     const customBlockMod = { clickable: typeof onClick === 'function' };
 
     return (
@@ -31,16 +31,19 @@ ListItem.displayName = 'ListItem';
 ListItem.propTypes = {
     /** List Items */
     children: PropTypes.node,
+    /** A function to be called if the item is clicked */
+    onClick: PropTypes.func,
     /** Formats this item as selected  */
     isSelected: PropTypes.bool,
-    /** A function to be called if the item is clicked */
-    onClick: PropTypes.func
+    /** Format this item as disabled */
+    disabled: PropTypes.bool
 };
 
 ListItem.defaultProps = {
     children: null,
     isSelected: false,
-    onClick: null
+    onClick: null,
+    disabled: false
 };
 
 export default ListItem;

src/components/List/ListItem/ListItem.scss

@@ -18,4 +18,8 @@
     &--clickable {
         cursor: pointer;
     }
+
+    &--disabled:hover {
+        background-color: var(--color-background);
+    }
 }

src/components/List/__tests__/__snapshots__/List.spec.js.snap

@@ -9,6 +9,7 @@ exports[`List component should render List correctly 1`] = `
   >
     <ListItem
       className="List__item"
+      disabled={false}
       isSelected={false}
       key=".0"
       onClick={null}
@@ -38,6 +39,7 @@ exports[`List component should render List correctly 1`] = `
     </ListItem>
     <ListItem
       className="List__item"
+      disabled={false}
       isSelected={false}
       key=".1"
       onClick={null}

stories/List.js

@@ -25,6 +25,9 @@ storiesOf('List', module)
             <ListItem isSelected={boolean('Select item', true)}>
                 <Text inline>Item selectable via props</Text>
             </ListItem>
+            <ListItem disabled={boolean('Disable item', true)}>
+                <Text inline>Disabled item</Text>
+            </ListItem>
             <ListItem
                 onClick={e => {
                     e.preventDefault();