Merge thinnest, thinner, and thicker props as a single stroke prop fo…

…r Placeholder and adjust some values of them to align with visual design. Address #1650 (comment)
woocommerce · Aug 30, 2022 · c6908de · c6908de
1 parent 656aeb9
commit c6908de
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 38 deletions.
diff --git a/js/src/components/paid-ads/campaign-preview/components/placeholder.js b/js/src/components/paid-ads/campaign-preview/components/placeholder.js
@@ -4,6 +4,7 @@
 import classnames from 'classnames';
 
 const styleName = {
+	default: false, // The default style is pre-defined doesn't and need to set another class name.
 	thinnest: 'gla-ads-mockup__placeholder--thinnest',
 	thinner: 'gla-ads-mockup__placeholder--thinner',
 	thicker: 'gla-ads-mockup__placeholder--thicker',
@@ -19,25 +20,19 @@ const styleName = {
  * Renders a placeholder to draw a line.
  *
  * @param {Object} props React props.
- * @param {boolean} [props.thinnest] Whether to draw a thinnest placeholder.
- * @param {boolean} [props.thinner] Whether to draw a thinner placeholder.
- * @param {boolean} [props.thicker] Whether to draw a thicker placeholder.
  * @param {string} [props.width] Placeholder width style, 100% by default. It will be px if the unit is omitted.
  * @param {'blue'|'gray-100'|'gray-200'|'gray-300'|'gray-400'|'gray-500'} [props.color='gray-100'] Placeholder color.
+ * @param {'thinnest'|'thinner'|'default'|'thicker'} [props.stroke='default'] Placeholder stroke size.
  */
 export default function Placeholder( {
-	thinnest,
-	thinner,
-	thicker,
 	width,
 	color = 'gray-100',
+	stroke = 'default',
 } ) {
 	const className = classnames(
 		'gla-ads-mockup__placeholder',
 		styleName[ color ],
-		thinnest && styleName.thinnest,
-		thinner && styleName.thinner,
-		thicker && styleName.thicker
+		styleName[ stroke ]
 	);
 
 	let style;

diff --git a/js/src/components/paid-ads/campaign-preview/components/product-banner.js b/js/src/components/paid-ads/campaign-preview/components/product-banner.js
@@ -22,9 +22,9 @@ export default function ProductBanner( { product } ) {
 				<ScaledText smaller adBadge>
 					{ product.shopName }
 				</ScaledText>
-				<Placeholder thinner width="85" />
-				<Placeholder thinner width="65" />
-				<Placeholder thinner width="27" color="blue" />
+				<Placeholder stroke="thinner" width="85" color="gray-300" />
+				<Placeholder stroke="thinner" width="65" color="gray-300" />
+				<Placeholder stroke="thinner" width="27" color="blue" />
 			</div>
 			<ShopLogo product={ product } />
 		</div>

diff --git a/js/src/components/paid-ads/campaign-preview/components/search-bar.js b/js/src/components/paid-ads/campaign-preview/components/search-bar.js
@@ -26,9 +26,9 @@ export default function SearchBar( { hideMenu = false } ) {
 				className="gla-ads-mockup__search-bar-menu"
 				hidden={ hideMenu }
 			>
-				<Placeholder thinnest color="gray-400" />
-				<Placeholder thinnest color="gray-400" />
-				<Placeholder thinnest color="gray-400" />
+				<Placeholder stroke="thinnest" color="gray-400" />
+				<Placeholder stroke="thinnest" color="gray-400" />
+				<Placeholder stroke="thinnest" color="gray-400" />
 			</div>
 		</div>
 	);

diff --git a/js/src/components/paid-ads/campaign-preview/mockup-display.js b/js/src/components/paid-ads/campaign-preview/mockup-display.js
@@ -25,10 +25,10 @@ export default function MockupDisplay( { product } ) {
 	return (
 		<div className="gla-ads-mockup gla-ads-mockup-display">
 			<div className="gla-ads-mockup__display-placeholders">
-				<Placeholder thinner color="gray-300" />
-				<Placeholder thinner color="gray-300" width="146" />
-				<Placeholder thinner color="gray-300" width="149" />
-				<Placeholder thinner color="gray-300" width="135" />
+				<Placeholder stroke="thinner" color="gray-300" />
+				<Placeholder stroke="thinner" color="gray-300" width="146" />
+				<Placeholder stroke="thinner" color="gray-300" width="149" />
+				<Placeholder stroke="thinner" color="gray-300" width="135" />
 			</div>
 			<div className="gla-ads-mockup__display-product">
 				<div className="gla-ads-mockup__display-product-locator">
@@ -45,7 +45,7 @@ export default function MockupDisplay( { product } ) {
 						<GridiconChevronRight size={ 16 } />
 					</div>
 				</div>
-				<Placeholder thinner color="gray-500" />
+				<Placeholder stroke="thinner" color="gray-500" />
 			</div>
 			<div className="gla-ads-mockup__display-placeholders">
 				<Placeholder />

diff --git a/js/src/components/paid-ads/campaign-preview/mockup-gmail.js b/js/src/components/paid-ads/campaign-preview/mockup-gmail.js
@@ -14,9 +14,9 @@ import gmailLogoURL from './images/gmail-logo.svg';
 function MailItem() {
 	return (
 		<div className="gla-ads-mockup__mail-item">
-			<Placeholder thinner color="gray-200" width="65" />
-			<Placeholder thinner color="gray-200" />
-			<Placeholder thinner width="122" />
+			<Placeholder stroke="thinner" color="gray-200" width="65" />
+			<Placeholder stroke="thinner" color="gray-200" />
+			<Placeholder stroke="thinner" width="122" />
 		</div>
 	);
 }

diff --git a/js/src/components/paid-ads/campaign-preview/mockup-search.js b/js/src/components/paid-ads/campaign-preview/mockup-search.js
@@ -35,18 +35,18 @@ export default function MockupSearch( { product } ) {
 			</div>
 			<SearchBar hideMenu />
 			<div className="gla-ads-mockup__search-keywords">
-				<Placeholder width="30" thicker color="gray-500" />
-				<Placeholder width="42" thicker />
-				<Placeholder width="32" thicker />
-				<Placeholder width="45" thicker />
-				<Placeholder width="30" thinner color="gray-500" />
+				<Placeholder width="30" stroke="thicker" color="gray-500" />
+				<Placeholder width="42" stroke="thicker" />
+				<Placeholder width="32" stroke="thicker" />
+				<Placeholder width="45" stroke="thicker" />
+				<Placeholder width="30" stroke="thinner" color="gray-500" />
 			</div>
 			<div className="gla-ads-mockup__search-card">
 				<div className="gla-ads-mockup__search-card-header">
 					<ScaledText smaller adBadge>
 						{ product.shopUrl }
 					</ScaledText>
-					<Placeholder thinner width="79" color="blue" />
+					<Placeholder stroke="thinner" width="79" color="blue" />
 				</div>
 				<Flex justfy="space-between" align="stretch">
 					<div className="gla-ads-mockup__search-card-placeholders">
@@ -62,8 +62,8 @@ export default function MockupSearch( { product } ) {
 			</div>
 			<div className="gla-ads-mockup__search-card">
 				<div className="gla-ads-mockup__search-card-placeholders">
-					<Placeholder thinner width="79" color="gray-400" />
-					<Placeholder thinner color="gray-300" />
+					<Placeholder stroke="thinner" width="79" color="gray-400" />
+					<Placeholder stroke="thinner" color="gray-300" />
 					<Placeholder width="122" />
 					<Placeholder width="108" />
 					<Placeholder width="100" />
@@ -72,7 +72,7 @@ export default function MockupSearch( { product } ) {
 			</div>
 			<div className="gla-ads-mockup__search-card">
 				<div className="gla-ads-mockup__search-card-placeholders">
-					<Placeholder thinner width="79" color="gray-400" />
+					<Placeholder stroke="thinner" width="79" color="gray-400" />
 				</div>
 			</div>
 		</div>

diff --git a/js/src/components/paid-ads/campaign-preview/mockup-shopping.js b/js/src/components/paid-ads/campaign-preview/mockup-shopping.js
@@ -25,8 +25,8 @@ export default function MockupShopping( { product } ) {
 	return (
 		<div className="gla-ads-mockup">
 			<div className="gla-ads-mockup__tab-list">
-				<Placeholder thicker />
-				<Placeholder thicker />
+				<Placeholder stroke="thicker" />
+				<Placeholder stroke="thicker" />
 				<div className="gla-ads-mockup__tab-item-with-logo">
 					<img
 						height="30"
@@ -36,9 +36,9 @@ export default function MockupShopping( { product } ) {
 							'google-listings-and-ads'
 						) }
 					/>
-					<Placeholder thinner color="gray-500" />
+					<Placeholder stroke="thinner" color="gray-500" />
 				</div>
-				<Placeholder thicker />
+				<Placeholder stroke="thicker" />
 			</div>
 			<div className="gla-ads-mockup__shopping-product">
 				<ProductCover product={ product } />

diff --git a/js/src/components/paid-ads/campaign-preview/mockup-youtube.js b/js/src/components/paid-ads/campaign-preview/mockup-youtube.js
@@ -46,8 +46,8 @@ export default function MockupYouTube( { product } ) {
 					<ScaledText larger color="gray-800">
 						{ product.title }
 					</ScaledText>
-					<Placeholder thicker />
-					<Placeholder thicker width="135" />
+					<Placeholder />
+					<Placeholder width="135" />
 					<ScaledText smaller adBadge>
 						{ product.shopName }
 					</ScaledText>