Use Peregrine's List component for lists

Author: jimbo

packages/venia-concept/src/components/ProductImageCarousel/thumbnailList.js

@@ -1,32 +1,21 @@
 import { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
+import { List } from '@magento/peregrine';
 
 import classify from 'src/classify';
-import List from 'src/components/List';
 import Thumbnail from './thumbnail';
 import defaultClasses from './thumbnailList.css';
 
-const getItemKey = ({ id }) => id;
-
 class ThumbnailList extends Component {
     static propTypes = {
         classes: PropTypes.shape({
             root: PropTypes.string
         }),
-        items: PropTypes.oneOfType([
-            PropTypes.instanceOf(Map),
-            PropTypes.arrayOf(PropTypes.object)
-        ])
+        items: PropTypes.arrayOf(PropTypes.object).isRequired
     };
 
     render() {
-        return (
-            <List
-                renderItem={Thumbnail}
-                getItemKey={getItemKey}
-                {...this.props}
-            />
-        );
+        return <List renderItem={Thumbnail} {...this.props} />;
     }
 }
 

packages/venia-concept/src/components/ProductOptions/swatchList.js

@@ -1,13 +1,11 @@
 import { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
+import { List } from '@magento/peregrine';
 
 import classify from 'src/classify';
-import List from 'src/components/List';
 import Swatch from './swatch';
 import defaultClasses from './swatchList.css';
 
-const getItemKey = ({ id }) => id;
-
 class SwatchList extends Component {
     static propTypes = {
         classes: PropTypes.shape({
@@ -17,9 +15,7 @@ class SwatchList extends Component {
     };
 
     render() {
-        return (
-            <List renderItem={Swatch} getItemKey={getItemKey} {...this.props} />
-        );
+        return <List renderItem={Swatch} {...this.props} />;
     }
 }
 

packages/venia-concept/src/components/ProductOptions/tileList.js

@@ -1,13 +1,11 @@
 import { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
+import { List } from '@magento/peregrine';
 
 import classify from 'src/classify';
-import List from 'src/components/List';
 import Tile from './tile';
 import defaultClasses from './tileList.css';
 
-const getItemKey = ({ id }) => id;
-
 class TileList extends Component {
     static propTypes = {
         classes: PropTypes.shape({
@@ -17,9 +15,7 @@ class TileList extends Component {
     };
 
     render() {
-        return (
-            <List renderItem={Tile} getItemKey={getItemKey} {...this.props} />
-        );
+        return <List renderItem={Tile} {...this.props} />;
     }
 }
 

packages/venia-concept/src/components/Select/select.js

@@ -1,8 +1,8 @@
 import { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
+import { List } from '@magento/peregrine';
 
 import classify from 'src/classify';
-import List from 'src/components/List';
 import Option from './option';
 import defaultClasses from './select.css';