Merge markup from Product Title atomic block and ProductName component (https://github.com/woocommerce/woocommerce-blocks/pull/3562)

* Merge markup from ProductTitle atomic block and ProductName component

* Add test

* Remove duplicate decodeEntities call

* Minor improvements

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/block.js

@@ -3,7 +3,6 @@
  */
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { decodeEntities } from '@wordpress/html-entities';
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
@@ -12,6 +11,7 @@ import { getColorClassName, getFontSizeClass } from '@wordpress/block-editor';
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import { gatedStyledText } from '@woocommerce/atomic-utils';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
+import ProductName from '@woocommerce/base-components/product-name';
 
 /**
  * Internal dependencies
@@ -79,8 +79,6 @@ export const Block = ( {
 		);
 	}
 
-	const productName = decodeEntities( product.name );
-
 	return (
 		// @ts-ignore
 		<TagName
@@ -94,33 +92,19 @@ export const Block = ( {
 				}
 			) }
 		>
-			{ productLink ? (
-				<a
-					href={ product.permalink }
-					rel="nofollow"
-					className={ classnames( {
-						[ titleClasses ]: isFeaturePluginBuild(),
-					} ) }
-					style={ gatedStyledText( {
-						color: customColor,
-						fontSize: customFontSize,
-					} ) }
-				>
-					{ productName }
-				</a>
-			) : (
-				<span
-					className={ classnames( {
-						[ titleClasses ]: isFeaturePluginBuild(),
-					} ) }
-					style={ gatedStyledText( {
-						color: customColor,
-						fontSize: customFontSize,
-					} ) }
-				>
-					{ productName }
-				</span>
-			) }
+			<ProductName
+				className={ classnames( {
+					[ titleClasses ]: isFeaturePluginBuild(),
+				} ) }
+				disabled={ ! productLink }
+				name={ product.name }
+				permalink={ product.permalink }
+				rel={ productLink ? 'nofollow' : null }
+				style={ gatedStyledText( {
+					color: customColor,
+					fontSize: customFontSize,
+				} ) }
+			/>
 		</TagName>
 	);
 };

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js

@@ -8,7 +8,6 @@ export { default as ProductImage } from './product-image';
 export { default as ProductLowStockBadge } from './product-low-stock-badge';
 export { default as ProductSummary } from './product-summary';
 export { default as ProductMetadata } from './product-metadata';
-export { default as ProductName } from './product-name';
 export { default as ProductSaleBadge } from './product-sale-badge';
 export { default as ProductVariationData } from './product-variation-data';
 export { default as ReturnToCartButton } from './return-to-cart-button';

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js

@@ -5,12 +5,12 @@ import { __, sprintf } from '@wordpress/i18n';
 import { getCurrency } from '@woocommerce/base-utils';
 import Label from '@woocommerce/base-components/label';
 import ProductPrice from '@woocommerce/base-components/product-price';
+import ProductName from '@woocommerce/base-components/product-name';
 import {
 	ProductBackorderBadge,
 	ProductImage,
 	ProductLowStockBadge,
 	ProductMetadata,
-	ProductName,
 } from '@woocommerce/base-components/cart-checkout';
 import PropTypes from 'prop-types';
 import Dinero from 'dinero.js';
@@ -60,8 +60,8 @@ const OrderSummaryItem = ( { cartItem } ) => {
 				<div className="wc-block-components-order-summary-item__header">
 					<ProductName
 						disabled={ isProductHiddenFromCatalog }
-						permalink={ permalink }
 						name={ name }
+						permalink={ permalink }
 					/>
 					<ProductPrice
 						currency={ currency }

plugins/woocommerce-blocks/assets/js/base/components/product-name/index.js

@@ -3,27 +3,36 @@
  */
 import PropTypes from 'prop-types';
 import { decodeEntities } from '@wordpress/html-entities';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-const ProductName = ( { name, permalink, disabled = false } ) => {
+const ProductName = ( {
+	className = '',
+	disabled = false,
+	name,
+	permalink = '',
+	...props
+} ) => {
+	const classes = classnames( 'wc-block-components-product-name', className );
 	return disabled ? (
-		<span className="wc-block-components-product-name">
+		<span className={ classes } { ...props }>
 			{ decodeEntities( name ) }
 		</span>
 	) : (
-		<a className="wc-block-components-product-name" href={ permalink }>
+		<a className={ classes } href={ permalink } { ...props }>
 			{ decodeEntities( name ) }
 		</a>
 	);
 };
 
 ProductName.propTypes = {
+	className: PropTypes.string,
 	disabled: PropTypes.bool,
-	name: PropTypes.string,
+	name: PropTypes.string.isRequired,
 	permalink: PropTypes.string,
 };
 

plugins/woocommerce-blocks/assets/js/base/components/product-name/style.scss

@@ -1,6 +1,4 @@
 .wc-block-components-product-name {
 	@include font-size(regular);
 	@include wrap-break-word();
-	display: block;
-	max-width: max-content;
 }

plugins/woocommerce-blocks/assets/js/base/components/product-name/test/__snapshots__/index.js.snap

@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ProductName should merge classes and props 1`] = `
+<a
+  className="wc-block-components-product-name lorem-ipsum"
+  href="/"
+  rel="nofollow"
+>
+  Test product
+</a>
+`;
+
 exports[`ProductName should not render a link if disabled is true 1`] = `
 <span
   className="wc-block-components-product-name"
@@ -11,6 +21,7 @@ exports[`ProductName should not render a link if disabled is true 1`] = `
 exports[`ProductName should render a link if disabled is false 1`] = `
 <a
   className="wc-block-components-product-name"
+  href="/"
 >
   Test product
 </a>
@@ -19,6 +30,7 @@ exports[`ProductName should render a link if disabled is false 1`] = `
 exports[`ProductName should render a link if disabled is not defined 1`] = `
 <a
   className="wc-block-components-product-name"
+  href="/"
 >
   Test product
 </a>

plugins/woocommerce-blocks/assets/js/base/components/product-name/test/index.js

@@ -11,7 +11,7 @@ import ProductName from '..';
 describe( 'ProductName', () => {
 	test( 'should not render a link if disabled is true', () => {
 		const component = TestRenderer.create(
-			<ProductName disabled={ true } name={ 'Test product' } />
+			<ProductName disabled={ true } name="Test product" permalink="/" />
 		);
 
 		expect( component.toJSON() ).toMatchSnapshot();
@@ -19,7 +19,7 @@ describe( 'ProductName', () => {
 
 	test( 'should render a link if disabled is false', () => {
 		const component = TestRenderer.create(
-			<ProductName disabled={ false } name={ 'Test product' } />
+			<ProductName disabled={ false } name="Test product" permalink="/" />
 		);
 
 		expect( component.toJSON() ).toMatchSnapshot();
@@ -27,7 +27,20 @@ describe( 'ProductName', () => {
 
 	test( 'should render a link if disabled is not defined', () => {
 		const component = TestRenderer.create(
-			<ProductName name={ 'Test product' } />
+			<ProductName name="Test product" permalink="/" />
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should merge classes and props', () => {
+		const component = TestRenderer.create(
+			<ProductName
+				className="lorem-ipsum"
+				name="Test product"
+				permalink="/"
+				rel="nofollow"
+			/>
 		);
 
 		expect( component.toJSON() ).toMatchSnapshot();

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js

@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import QuantitySelector from '@woocommerce/base-components/quantity-selector';
 import ProductPrice from '@woocommerce/base-components/product-price';
+import ProductName from '@woocommerce/base-components/product-name';
 import { getCurrency } from '@woocommerce/base-utils';
 import { useStoreCartItemQuantity } from '@woocommerce/base-hooks';
 import { Icon, trash } from '@woocommerce/icons';
@@ -14,7 +15,6 @@ import {
 	ProductImage,
 	ProductLowStockBadge,
 	ProductMetadata,
-	ProductName,
 	ProductSaleBadge,
 } from '@woocommerce/base-components/cart-checkout';
 import Dinero from 'dinero.js';
@@ -116,9 +116,9 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 			</td>
 			<td className="wc-block-cart-item__product">
 				<ProductName
-					permalink={ permalink }
-					name={ name }
 					disabled={ isPendingDelete || isProductHiddenFromCatalog }
+					name={ name }
+					permalink={ permalink }
 				/>
 				{ showBackorderBadge ? (
 					<ProductBackorderBadge />

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss

@@ -74,6 +74,10 @@ table.wc-block-cart-items {
 				display: none;
 			}
 		}
+		.wc-block-components-product-name {
+			display: block;
+			max-width: max-content;
+		}
 		.wc-block-cart-item__total {
 			@include font-size(regular);
 			text-align: right;