Merge smaller and larger props as a single size prop for ScaledText.

Address #1650 (comment)
woocommerce · Aug 30, 2022 · 631e8fe · 631e8fe
1 parent c6908de
commit 631e8fe
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 14 deletions.
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
@@ -19,7 +19,7 @@ export default function ProductBanner( { product } ) {
 	return (
 		<div className="gla-ads-mockup__product-banner">
 			<div className="gla-ads-mockup__product-banner-info">
-				<ScaledText smaller adBadge>
+				<ScaledText size="smaller" adBadge>
 					{ product.shopName }
 				</ScaledText>
 				<Placeholder stroke="thinner" width="85" color="gray-300" />

diff --git a/js/src/components/paid-ads/campaign-preview/components/scaled-text.js b/js/src/components/paid-ads/campaign-preview/components/scaled-text.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.
 	adBadge: 'gla-ads-mockup__scaled-text--ad-badge',
 	smaller: 'gla-ads-mockup__scaled-text--smaller',
 	larger: 'gla-ads-mockup__scaled-text--larger',
@@ -17,24 +18,21 @@ const styleName = {
  *
  * @param {Object} props React props.
  * @param {boolean} [props.adBadge=false] Whether to show the 'AD' badge.
- * @param {boolean} [props.smaller] Whether to draw a smaller text size.
- * @param {boolean} [props.larger] Whether to draw a larger text size.
+ * @param {'smaller'|'default'|'larger'} [props.size='default'] Text size.
  * @param {'blue'|'gray-700'|'gray-800'} [props.color='gray-700'] Text color.
  * @param {JSX.Element} [props.children] Content to be rendered.
  */
 export default function ScaledText( {
 	adBadge = false,
-	smaller,
-	larger,
+	size = 'default',
 	color = 'gray-700',
 	children,
 } ) {
 	const className = classnames(
 		'gla-ads-mockup__scaled-text',
 		styleName[ color ],
-		adBadge && styleName.adBadge,
-		smaller && styleName.smaller,
-		larger && styleName.larger
+		styleName[ size ],
+		adBadge && styleName.adBadge
 	);
 	return <div className={ className } children={ children } />;
 }
diff --git a/js/src/components/paid-ads/campaign-preview/mockup-search.js b/js/src/components/paid-ads/campaign-preview/mockup-search.js
@@ -43,7 +43,7 @@ export default function MockupSearch( { product } ) {
 			</div>
 			<div className="gla-ads-mockup__search-card">
 				<div className="gla-ads-mockup__search-card-header">
-					<ScaledText smaller adBadge>
+					<ScaledText size="smaller" adBadge>
 						{ product.shopUrl }
 					</ScaledText>
 					<Placeholder stroke="thinner" width="79" color="blue" />

diff --git a/js/src/components/paid-ads/campaign-preview/mockup-shopping.js b/js/src/components/paid-ads/campaign-preview/mockup-shopping.js
@@ -43,11 +43,11 @@ export default function MockupShopping( { product } ) {
 			<div className="gla-ads-mockup__shopping-product">
 				<ProductCover product={ product } />
 				<div className="gla-ads-mockup__shopping-product-info">
-					<ScaledText larger color="gray-800">
+					<ScaledText size="larger" color="gray-800">
 						{ product.title }
 					</ScaledText>
 					<ScaledText color="gray-800">{ product.price }</ScaledText>
-					<ScaledText smaller>{ product.shopName }</ScaledText>
+					<ScaledText size="smaller">{ product.shopName }</ScaledText>
 				</div>
 			</div>
 		</div>

diff --git a/js/src/components/paid-ads/campaign-preview/mockup-youtube.js b/js/src/components/paid-ads/campaign-preview/mockup-youtube.js
@@ -36,19 +36,19 @@ export default function MockupYouTube( { product } ) {
 				<ProductCover product={ product } />
 				<div className="gla-ads-mockup__youtube-learn-more-row">
 					<div>
-						<ScaledText smaller color="blue">
+						<ScaledText size="smaller" color="blue">
 							{ __( 'LEARN MORE', 'google-listings-and-ads' ) }
 						</ScaledText>
 					</div>
 					<GridiconExternal size={ 10 } />
 				</div>
 				<div className="gla-ads-mockup__youtube-product-info">
-					<ScaledText larger color="gray-800">
+					<ScaledText size="larger" color="gray-800">
 						{ product.title }
 					</ScaledText>
 					<Placeholder />
 					<Placeholder width="135" />
-					<ScaledText smaller adBadge>
+					<ScaledText size="smaller" adBadge>
 						{ product.shopName }
 					</ScaledText>
 				</div>