Merge 8854d52 into 2865ce1

vtex-apps · Oct 14, 2019 · 817b8f1 · 817b8f1
2 parents 2865ce1 + 8854d52
commit 817b8f1
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- ImagePlaceholder to flexible `product-sumary-image`.
 
 ## [2.37.1] - 2019-10-14
 ### Fixed

diff --git a/react/components/ProductSummaryImage/ImagePlaceholder.js b/react/components/ProductSummaryImage/ImagePlaceholder.js
@@ -0,0 +1,40 @@
+import React from 'react'
+
+const ImagePlaceholder = ({ cssHandle }) => (
+  <div className="relative">
+    <div className={`${cssHandle} absolute w-100 h-100 contain bg-center`} />
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 512 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      data-testid="image-placeholder"
+    >
+      <rect width="512" height="512" fill="#F2F2F2" />
+      <rect
+        x="183.857"
+        y="180.2"
+        width="144.286"
+        height="150.474"
+        stroke="#CACBCC"
+        strokeWidth="2"
+      />
+      <path d="M183.78 303.688H328.214" stroke="#CACBCC" strokeWidth="2" />
+      <path
+        d="M205.082 279.563L223.599 240.507L242.116 260.035L269.892 220.979L306.926 279.563H205.082Z"
+        stroke="#CACBCC"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M252.225 213.939C252.225 219.822 247.66 224.52 242.114 224.52C236.569 224.52 232.004 219.822 232.004 213.939C232.004 208.057 236.569 203.359 242.114 203.359C247.66 203.359 252.225 208.057 252.225 213.939Z"
+        stroke="#CACBCC"
+        strokeWidth="2"
+      />
+    </svg>
+  </div>
+)
+
+export default ImagePlaceholder
diff --git a/react/components/ProductSummaryImage/ProductImage.js b/react/components/ProductSummaryImage/ProductImage.js
@@ -6,6 +6,7 @@ import classNames from 'classnames'
 import { useDevice } from 'vtex.device-detector'
 import { useResponsiveValues } from 'vtex.responsive-values'
 import { useCssHandles, applyModifiers } from 'vtex.css-handles'
+import ImagePlaceholder from './ImagePlaceholder'
 
 import { useProductSummary } from 'vtex.product-summary-context/ProductSummaryContext'
 
@@ -116,11 +117,7 @@ const ProductImageContent = ({
   if (!sku || hasError) {
     return (
       <div className={containerClassname}>
-        <ImagePlaceholder
-          width={width}
-          height={height}
-          handle={handles.productImage}
-        />
+        <ImagePlaceholder cssHandle={handles.productImage} />
       </div>
     )
   }
@@ -185,15 +182,6 @@ const ProductImageContent = ({
   )(img)
 }
 
-const ImagePlaceholder = ({ width, height, handle }) => (
-  <div style={{ width, height }}>
-    <div
-      className={`${handle} absolute w-100 h-100 contain bg-center`}
-      data-testid="image-placeholder"
-    />
-  </div>
-)
-
 const ProductImage = ({
   showBadge,
   badgeText,

diff --git a/react/legacy/components/ProductImage.js b/react/legacy/components/ProductImage.js
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types'
 import { CollectionBadges, DiscountBadge } from 'vtex.store-components'
 import classNames from 'classnames'
 
+import ImagePlaceholder from '../../components/ProductSummaryImage/ImagePlaceholder'
+
 import { productShape } from '../../utils/propTypes'
 
 import productSummary from '../../productSummary.css'
@@ -31,44 +33,6 @@ const maybeCollection = ({ productClusters }) => shouldShow => component => {
   return component
 }
 
-const ImagePlaceholder = () => (
-  <div className="relative">
-    <div
-      className={`${productSummary.imagePlaceholder} absolute w-100 h-100 contain bg-center`}
-    />
-    <svg
-      width="100%"
-      height="100%"
-      viewBox="0 0 512 512"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      data-testid="image-placeholder"
-    >
-      <rect width="512" height="512" fill="#F2F2F2" />
-      <rect
-        x="183.857"
-        y="180.2"
-        width="144.286"
-        height="150.474"
-        stroke="#CACBCC"
-        strokeWidth="2"
-      />
-      <path d="M183.78 303.688H328.214" stroke="#CACBCC" strokeWidth="2" />
-      <path
-        d="M205.082 279.563L223.599 240.507L242.116 260.035L269.892 220.979L306.926 279.563H205.082Z"
-        stroke="#CACBCC"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M252.225 213.939C252.225 219.822 247.66 224.52 242.114 224.52C236.569 224.52 232.004 219.822 232.004 213.939C232.004 208.057 236.569 203.359 242.114 203.359C247.66 203.359 252.225 208.057 252.225 213.939Z"
-        stroke="#CACBCC"
-        strokeWidth="2"
-      />
-    </svg>
-  </div>
-)
 const ProductImage = ({
   product,
   showBadge,
@@ -78,7 +42,7 @@ const ProductImage = ({
 }) => {
   const [error, setError] = useState(false)
   if (!path(['sku', 'image', 'imageUrl'], product) || error) {
-    return <ImagePlaceholder />
+    return <ImagePlaceholder cssHandle={productSummary.imagePlaceholder} />
   }
 
   const {