Added tappable version of ListItems

Also added a clickHandler example story

src/components/List/ListItem.js

@@ -1,15 +1,25 @@
 import React from 'react';
 import classNames from 'classnames';
+import Tappable from 'react-tappable';
 
 const ListItem = (props) => {
+  const { clickHandler = false, ...rest } = props;
   const cx = classNames({
     'topcoat-list__item': true,
   });
-  return (
-    <li className={ cx } { ...props }>
+  const item = clickHandler
+    ? (<Tappable
+      component="li"
+      onTap={ clickHandler }
+      className={ cx }
+      { ...rest }
+    >
       { props.children }
-    </li>
-  );
+    </Tappable>)
+    : (<li className={ cx } { ...rest }>
+      { props.children }
+    </li>);
+  return item;
 };
 
 ListItem.displayName = 'ListItem';

src/components/List/stories/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { action, storiesOf } from '@kadira/storybook';
 
 import { List, ListContainer, ListHeader, ListItem } from '../';
 
@@ -14,6 +14,22 @@ storiesOf('List', module)
       </ListContainer>
     </List>
   ))
+  .addWithInfo('clickHandler', () => (
+    <List>
+      <ListHeader>Header</ListHeader>
+      <ListContainer>
+        <ListItem clickHandler={ action('tapped one') }>
+          List Item One
+        </ListItem>
+        <ListItem clickHandler={ action('tapped two') }>
+          List Item Two
+        </ListItem>
+        <ListItem clickHandler={ action('tapped three') }>
+          List Item Three
+        </ListItem>
+      </ListContainer>
+    </List>
+  ))
   .addWithInfo('no header', () => (
     <List>
       <ListContainer>