Store: Replace thumb placeholder with WC generic placeholder image (A…

…utomattic#21841)

* Replace thumb placeholder with WC generic placeholder

* Converts this change to a single component that accepts image props and displays the placeholder if neccessary

* Handle PR feedback:
Add optional placeholder attribute for providing a fallback
Remove extra spaces, and move product css rule out of classNames call

client/extensions/woocommerce/app/product-categories/list.js

@@ -29,6 +29,7 @@ import { getLink } from 'woocommerce/lib/nav-utils';
 import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
 import VirtualList from 'components/virtual-list';
 import { stripHTML, decodeEntities } from 'lib/formatting';
+import ImageThumb from 'woocommerce/components/image-thumb';
 
 const ITEM_HEIGHT = 70;
 
@@ -87,10 +88,6 @@ class ProductCategories extends Component {
 		}
 		const children = this.getChildren( item.id );
 		const itemId = item.id;
-		const image = item.image && item.image.src;
-		const imageClasses = classNames( 'product-categories__list-item-icon', {
-			'is-thumb-placeholder': ! image,
-		} );
 		const link = getLink( '/store/products/category/:site/' + itemId, site );
 
 		const goToLink = () => {
@@ -104,11 +101,7 @@ class ProductCategories extends Component {
 				<CompactCard key={ itemId } className="product-categories__list-item-card" onClick={ goToLink }>
 					<div className="product-categories__list-item-wrapper">
 						<div className="product-categories__list-thumb">
-							<div className={ imageClasses }>
-								<figure>
-									{ item.image && <img src={ item.image.src } /> }
-								</figure>
-							</div>
+							<ImageThumb src={ item.image && item.image.src || '' } alt="" />
 						</div>
 						<span className="product-categories__list-item-info">
 							<a href={ link }>{ item.name }</a>

client/extensions/woocommerce/app/product-categories/style.scss

@@ -22,44 +22,6 @@
 	padding: 0;
 }
 
-.product-categories__list-thumb {
-	display: inline-flex;
-	flex-direction: row;
-	align-items: center;
-	transform: translateY( 2px );
-	margin: 0px 16px 0px 16px;
-}
-
-.product-categories__list-item-icon {
-	margin-bottom: 0;
-	margin-right: 0px;
-	flex-shrink: 0;
-	position: relative;
-
-	figure {
-		width: 40px;
-		height: 40px;
-		overflow: hidden;
-
-		img {
-			position: absolute;
-			left: 50%;
-			top: 50%;
-			height: 100%;
-			width: auto;
-			transform: translate( -50%,-50% );
-		}
-	}
-
-	&.is-thumb-placeholder {
-		height: 40px;
-		min-width: 40px;
-		overflow: hidden;
-		position: relative;
-		background: $gray-light;
-	}
-}
-
 .product-categories__list-item-wrapper {
 	display: flex;
 	flex-direction: row;
@@ -78,6 +40,10 @@
 		margin-left: 24px;
 	}
 
+	.image-thumb {
+		margin: 12px 16px 0px 16px;
+	}
+
 	.count {
 		margin: 18px 0px 0px 16px;
 	}

client/extensions/woocommerce/app/products/products-list-row.js

@@ -6,25 +6,18 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import { getLink } from 'woocommerce/lib/nav-utils';
 import TableRow from 'woocommerce/components/table/table-row';
 import TableItem from 'woocommerce/components/table/table-item';
+import ImageThumb from 'woocommerce/components/image-thumb';
 
 const ProductsListRow = ( { site, product } ) => {
 	// The first returned image from the API is the featured image.
 	const featuredImage = product.images && product.images[ 0 ];
-	const imageClasses = classNames( 'products__list-image', {
-		'is-thumb-placeholder': ! featuredImage,
-	} );
-
-	const renderImage = () => (
-		<div className={ imageClasses }>{ featuredImage && <img src={ featuredImage.src } /> }</div>
-	);
 
 	const categoryNames =
 		product.categories &&
@@ -48,7 +41,7 @@ const ProductsListRow = ( { site, product } ) => {
 	return (
 		<TableRow href={ getLink( '/store/product/:site/' + product.id, site ) }>
 			<TableItem isTitle className="products__list-product">
-				{ renderImage() }
+				<ImageThumb src={ ( featuredImage && featuredImage.src ) || '' } alt="" />
 				<span className="products__list-name">{ product.name }</span>
 			</TableItem>
 			<TableItem>{ renderStock() }</TableItem>

client/extensions/woocommerce/app/products/products-list.scss

@@ -45,33 +45,19 @@
 	.is-requesting td div {
 		@include placeholder();
 		background: transparent;
+
+		.image-thumb::after {
+			display: none;
+		}
 	}
 
 	.products__list-product .table-item__cell-title {
 		display: flex;
 		align-items: center;
 	}
 
-	.products__list-image {
-		height: 40px;
-		width: 40px;
-		overflow: hidden;
-		position: relative;
+	.products__list-product .image-thumb {
 		margin-right: 16px;
-
-		&.is-thumb-placeholder {
-			background: $gray-light;
-		}
-
-		img {
-			position: absolute;
-			left: 50%;
-			top: 50%;
-			height: 100%;
-			width: auto;
-			-webkit-transform: translate( -50%, -50% );
-			transform: translate( -50%, -50% );
-		}
 	}
 
 	.is-header th {

client/extensions/woocommerce/components/image-thumb/index.js

@@ -0,0 +1,56 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const ImageThumb = ( { width, height, src, alt, placeholder, ...props } ) => {
+	const style = {
+		width,
+		height,
+		minHeight: height,
+	};
+
+	const imageClasses = classNames( 'image-thumb', {
+		hasImage: src,
+	} );
+
+	if ( ! src ) {
+		if ( placeholder ) {
+			style.backgroundImage = `url( ${ placeholder } )`;
+		}
+
+		return (
+			<div className={ imageClasses }>
+				<div className="image-thumb__placeholder" style={ style } />
+			</div>
+		);
+	}
+
+	return (
+		<div className={ imageClasses } style={ style }>
+			<img src={ src } style={ style } alt={ alt } { ...props } />
+		</div>
+	);
+};
+
+ImageThumb.propTypes = {
+	width: PropTypes.number,
+	height: PropTypes.number,
+	className: PropTypes.string,
+	src: PropTypes.string,
+	placeholder: PropTypes.string,
+	alt: PropTypes.string.isRequired,
+};
+
+ImageThumb.defaultProps = {
+	width: 40,
+	height: 40,
+	className: '',
+	src: '',
+};
+
+export default ImageThumb;

client/extensions/woocommerce/components/image-thumb/style.scss

@@ -0,0 +1,24 @@
+.image-thumb__placeholder {
+	background-size: cover;
+	background-image: url( '/calypso/images/extensions/woocommerce/image-placeholder.png' );
+	border: 1px solid $gray-light;
+}
+
+.image-thumb {
+	display: inline-block;
+	position: relative;
+
+	&.hasImage {
+		overflow: hidden;
+	}
+
+	img {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		height: 100%;
+		width: auto;
+		-webkit-transform: translate( -50%, -50% );
+		transform: translate( -50%, -50% );
+	}
+}

client/extensions/woocommerce/components/product-search/row.js

@@ -5,7 +5,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
-import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { filter, find, get, intersection, noop, reduce, uniqBy, values } from 'lodash';
 import { localize } from 'i18n-calypso';
@@ -26,6 +25,7 @@ import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
 import { getVariationsForProduct } from 'woocommerce/state/sites/product-variations/selectors';
 import { areVariationsSelected, isProductSelected, isVariableProduct } from './utils';
 import ProductVariations from './variations';
+import ImageThumb from 'woocommerce/components/image-thumb';
 
 class ProductSearchRow extends Component {
 	static propTypes = {
@@ -203,16 +203,12 @@ class ProductSearchRow extends Component {
 	};
 
 	renderInputImage( product ) {
-		let imageSrc = get( product, 'images[0].src', false );
+		let imageSrc = get( product, 'images[0].src', '' );
 		// Check for a variation image
 		if ( product.isVariation ) {
 			imageSrc = get( product.image, 'src', imageSrc );
 		}
-		const imageClasses = classNames( 'product-search__list-image', {
-			'is-thumb-placeholder': ! imageSrc,
-		} );
-
-		return <span className={ imageClasses }>{ imageSrc && <img src={ imageSrc } /> }</span>;
+		return <ImageThumb width={ 32 } height={ 32 } src={ imageSrc } alt="" />;
 	}
 
 	renderRow = product => {

client/extensions/woocommerce/components/product-search/style.scss

@@ -55,27 +55,8 @@
 				position: relative;
 			}
 
-			.product-search__list-image {
-				display: inline-block;
-				height: 32px;
-				width: 32px;
-				overflow: hidden;
-				position: relative;
+			.image-thumb {
 				margin: 0 12px 0 15px;
-
-				&.is-thumb-placeholder {
-					background: $gray-light;
-				}
-
-				img {
-					position: absolute;
-					left: 50%;
-					top: 50%;
-					height: 100%;
-					width: auto;
-					-webkit-transform: translate( -50%, -50% );
-					transform: translate( -50%, -50% );
-				}
 			}
 
 			.count {

client/extensions/woocommerce/style.scss

@@ -39,6 +39,7 @@
 	@import 'components/filtered-list/style';
 	@import 'components/form-click-to-edit-input/style';
 	@import 'components/form-dimensions-input/style';
+	@import 'components/image-thumb/style';
 	@import 'components/list/style';
 	@import 'components/location-flag/style';
 	@import 'components/order-status/style';