initial commit

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

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { decodeEntities } from '@wordpress/html-entities';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Render the Product name.
+ *
+ * The store API runs titles through `wp_kses_post()` which removes dangerous HTML tags, so using it inside `dangerouslySetInnerHTML` is considered safe.
+ */
+export default ( {
+	className = '',
+	disabled = false,
+	name,
+	permalink = '',
+	...props
+}: {
+	className?: string;
+	disabled?: boolean;
+	name: string;
+	permalink?: string;
+} ): JSX.Element => {
+	const classes = classnames( 'wc-block-components-product-name', className );
+	return disabled ? (
+		<span
+			className={ classes }
+			{ ...props }
+			dangerouslySetInnerHTML={ {
+				__html: decodeEntities( name ),
+			} }
+		/>
+	) : (
+		<a
+			className={ classes }
+			href={ permalink }
+			{ ...props }
+			dangerouslySetInnerHTML={ {
+				__html: decodeEntities( name ),
+			} }
+		/>
+	);
+};

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

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { boolean } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import ProductName from '../';
+
+export default {
+	title: 'WooCommerce Blocks/@base-components/cart-checkout/ProductName',
+	component: ProductName,
+};
+
+export const Default = () => {
+	const disabled = boolean( 'disabled', false );
+
+	return (
+		<ProductName
+			disabled={ disabled }
+			name={ 'Test product' }
+			permalink={ '/' }
+		/>
+	);
+};

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

@@ -0,0 +1,4 @@
+.wc-block-components-product-name {
+	@include font-size(regular);
+	@include wrap-break-word();
+}

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

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductName should merge classes and props 1`] = `
+<a
+  className="wc-block-components-product-name lorem-ipsum"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "Test product",
+    }
+  }
+  href="/"
+  rel="nofollow"
+/>
+`;
+
+exports[`ProductName should not render a link if disabled is true 1`] = `
+<span
+  className="wc-block-components-product-name"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "Test product",
+    }
+  }
+/>
+`;
+
+exports[`ProductName should render a link if disabled is false 1`] = `
+<a
+  className="wc-block-components-product-name"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "Test product",
+    }
+  }
+  href="/"
+/>
+`;
+
+exports[`ProductName should render a link if disabled is not defined 1`] = `
+<a
+  className="wc-block-components-product-name"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "Test product",
+    }
+  }
+  href="/"
+/>
+`;

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

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+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" permalink="/" />
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render a link if disabled is false', () => {
+		const component = TestRenderer.create(
+			<ProductName disabled={ false } name="Test product" permalink="/" />
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render a link if disabled is not defined', () => {
+		const component = TestRenderer.create(
+			<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();
+	} );
+} );