From 72801baf976c5e8fa53a1ff33af5b9b15d4f2e6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <aljullu@gmail.com>
Date: Fri, 3 Apr 2020 15:22:56 +0200
Subject: [PATCH] Switch 'Try reloading the page' from links to buttons
 (https://github.com/woocommerce/woocommerce-blocks/pull/2105)

* Switch 'Reload page' from links to buttons

* Rename class to wp-block-link-button

* Remove no longer needed CSS property
---
 .../assets/css/abstracts/_mixins.scss         |  2 ++
 .../woocommerce-blocks/assets/css/style.scss  |  4 +++-
 .../js/blocks/cart-checkout/cart/frontend.js  | 12 ++++++----
 .../cart-checkout/cart/full-cart/style.scss   |  3 ---
 .../blocks/cart-checkout/checkout/frontend.js | 22 ++++++++++++-------
 5 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss b/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
index acbb85ede8f..1e9f9967010 100644
--- a/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
+++ b/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
@@ -90,8 +90,10 @@
 	padding: 0;
 	border: 0;
 
+	color: inherit;
 	font-size: inherit;
 	font-weight: normal;
+	text-decoration: underline;
 
 	background: transparent;
 	&:hover {
diff --git a/plugins/woocommerce-blocks/assets/css/style.scss b/plugins/woocommerce-blocks/assets/css/style.scss
index 389b2efdf04..7ae3bd7dddb 100644
--- a/plugins/woocommerce-blocks/assets/css/style.scss
+++ b/plugins/woocommerce-blocks/assets/css/style.scss
@@ -1 +1,3 @@
-/* Moved */
+.wc-block-link-button {
+	@include link-button();
+}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/frontend.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/frontend.js
index c8161e19dd8..d6028812d78 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/frontend.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/frontend.js
@@ -24,6 +24,8 @@ import FullCart from './full-cart';
 import blockAttributes from './attributes';
 import renderFrontend from '../../../utils/render-frontend.js';
 
+const reloadPage = () => void window.location.reload( true );
+
 /**
  * Renders the frontend block within the cart provider.
  */
@@ -92,13 +94,15 @@ const getErrorBoundaryProps = () => {
 		header: __( 'Something went wrong…', 'woo-gutenberg-products-block' ),
 		text: __experimentalCreateInterpolateElement(
 			__(
-				'The cart has encountered an unexpected error. <a>Try reloading the page</a>. If the error persists, please get in touch with us so we can assist.',
+				'The cart has encountered an unexpected error. <button>Try reloading the page</button>. If the error persists, please get in touch with us so we can assist.',
 				'woo-gutenberg-products-block'
 			),
 			{
-				a: (
-					// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid
-					<a href="javascript:window.location.reload(true)" />
+				button: (
+					<button
+						className="wp-block-link-button"
+						onClick={ reloadPage }
+					/>
 				),
 			}
 		),
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
index e863832b8ba..f0929774092 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
@@ -70,9 +70,6 @@ table.wc-block-cart-items {
 				margin-top: 0.5em;
 				text-transform: none;
 				white-space: nowrap;
-				// Temporary - this is not yet a link or "link button".
-				// May not be needed when remove is hooked up to API properly.
-				text-decoration: underline;
 			}
 			.wc-block-cart-item__remove-icon {
 				@include link-button;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js
index 54aa532f854..140a73feec7 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js
@@ -23,6 +23,8 @@ import blockAttributes from './attributes';
 import renderFrontend from '../../../utils/render-frontend.js';
 import EmptyCart from './empty-cart/index.js';
 
+const reloadPage = () => void window.location.reload( true );
+
 /**
  * Wrapper component for the checkout block.
  *
@@ -49,13 +51,15 @@ const CheckoutFrontend = ( props ) => {
 					) }
 					text={ __experimentalCreateInterpolateElement(
 						__(
-							'The checkout has encountered an unexpected error. <a>Try reloading the page</a>. If the error persists, please get in touch with us so we can assist.',
+							'The checkout has encountered an unexpected error. <button>Try reloading the page</button>. If the error persists, please get in touch with us so we can assist.',
 							'woo-gutenberg-products-block'
 						),
 						{
-							a: (
-								// eslint-disable-next-line jsx-a11y/anchor-has-content
-								<a href="." />
+							button: (
+								<button
+									className="wp-block-link-button"
+									onClick={ reloadPage }
+								/>
 							),
 						}
 					) }
@@ -109,13 +113,15 @@ const getErrorBoundaryProps = () => {
 		header: __( 'Something went wrong…', 'woo-gutenberg-products-block' ),
 		text: __experimentalCreateInterpolateElement(
 			__(
-				'The checkout has encountered an unexpected error. <a>Try reloading the page</a>. If the error persists, please get in touch with us so we can assist.',
+				'The checkout has encountered an unexpected error. <button>Try reloading the page</button>. If the error persists, please get in touch with us so we can assist.',
 				'woo-gutenberg-products-block'
 			),
 			{
-				a: (
-					// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid
-					<a href="javascript:window.location.reload(true)" />
+				button: (
+					<button
+						className="wp-block-link-button"
+						onClick={ reloadPage }
+					/>
 				),
 			}
 		),