From f73ec4b812de6cfc1d5fa0897e904751fadd5d25 Mon Sep 17 00:00:00 2001
From: Alexandre Lara <allexandrelara@gmail.com>
Date: Thu, 23 Mar 2023 15:52:12 -0300
Subject: [PATCH 1/6] Add Skeleton component

---
 assets/js/base/components/skeleton/index.tsx  | 22 +++++++++++++++++++
 assets/js/base/components/skeleton/style.scss | 19 ++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 assets/js/base/components/skeleton/index.tsx
 create mode 100644 assets/js/base/components/skeleton/style.scss

diff --git a/assets/js/base/components/skeleton/index.tsx b/assets/js/base/components/skeleton/index.tsx
new file mode 100644
index 00000000000..6249d108bab
--- /dev/null
+++ b/assets/js/base/components/skeleton/index.tsx
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export interface SkeletonProps {
+	numberOfLines?: number;
+}
+
+export const Skeleton = ( {
+	numberOfLines = 1,
+}: SkeletonProps ): JSX.Element => {
+	const skeletonLines = Array( numberOfLines ).fill(
+		<span
+			className="wc-block-components-skeleton-text-line"
+			aria-hidden="true"
+		/>
+	);
+	return (
+		<div className="wc-block-components-skeleton">{ skeletonLines }</div>
+	);
+};
diff --git a/assets/js/base/components/skeleton/style.scss b/assets/js/base/components/skeleton/style.scss
new file mode 100644
index 00000000000..18aa7c24e34
--- /dev/null
+++ b/assets/js/base/components/skeleton/style.scss
@@ -0,0 +1,19 @@
+.wc-block-components-skeleton {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	width: 100%;
+
+}
+
+.wc-block-components-skeleton-text-line {
+	height: 0.8em;
+	width: 100%;
+	position: relative;
+	background: $gray-200;
+	border-radius: 2em;
+
+	&:last-child {
+		width: 80%;
+	}
+  }

From d2f6be51c61877ab8a096b8838670a47275327a3 Mon Sep 17 00:00:00 2001
From: Alexandre Lara <allexandrelara@gmail.com>
Date: Thu, 23 Mar 2023 15:52:46 -0300
Subject: [PATCH 2/6] Replace notice with skeleton on Add to Cart Form block

---
 .../product-elements/add-to-cart-form/edit.tsx  | 17 ++++-------------
 .../add-to-cart-form/editor.scss                |  3 ++-
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx b/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
index e8c5c92f8b0..91a88c9abbb 100644
--- a/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
+++ b/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
@@ -3,7 +3,9 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { Button, Disabled, Notice } from '@wordpress/components';
+import { Button, Disabled } from '@wordpress/components';
+import { Skeleton } from '@woocommerce/base-components/skeleton';
+
 /**
  * Internal dependencies
  */
@@ -19,19 +21,8 @@ const Edit = () => {
 
 	return (
 		<div { ...blockProps }>
+			<Skeleton numberOfLines={ 3 } />
 			<Disabled>
-				<Notice
-					className={ 'wc-block-add-to-cart-form__notice' }
-					status={ 'warning' }
-					isDismissible={ false }
-				>
-					<p>
-						{ __(
-							'Customers will see product add-to-cart options displayed here, dependent on the product type.',
-							'woo-gutenberg-products-block'
-						) }
-					</p>
-				</Notice>
 				<input
 					type={ 'number' }
 					value={ '1' }
diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss b/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
index c45cef71e54..af108639462 100644
--- a/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
+++ b/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
@@ -1,6 +1,7 @@
 .wc-block-add-to-cart-form {
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
+	row-gap: $default-block-margin;
 }
 
 .wc-block-add-to-cart-form__notice.components-notice {

From 877b97ad53afdeac53a0879dfef02c71f707cbcd Mon Sep 17 00:00:00 2001
From: Alexandre Lara <allexandrelara@gmail.com>
Date: Thu, 23 Mar 2023 18:09:47 -0300
Subject: [PATCH 3/6] Fix css lint error

---
 assets/js/base/components/skeleton/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/base/components/skeleton/style.scss b/assets/js/base/components/skeleton/style.scss
index 18aa7c24e34..1f90808d705 100644
--- a/assets/js/base/components/skeleton/style.scss
+++ b/assets/js/base/components/skeleton/style.scss
@@ -16,4 +16,4 @@
 	&:last-child {
 		width: 80%;
 	}
-  }
+}

From 41c2aa7a0f8ad56cd829f277561cc7b4770e3d52 Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Tue, 4 Apr 2023 20:00:54 +0200
Subject: [PATCH 4/6] add tooltip

---
 .../add-to-cart-form/edit.tsx                 | 44 ++++++++++++-------
 .../add-to-cart-form/editor.scss              | 16 +++----
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx b/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
index 91a88c9abbb..39ed82bfcd0 100644
--- a/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
+++ b/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
@@ -3,7 +3,7 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { Button, Disabled } from '@wordpress/components';
+import { Button, Disabled, Tooltip } from '@wordpress/components';
 import { Skeleton } from '@woocommerce/base-components/skeleton';
 
 /**
@@ -21,20 +21,34 @@ const Edit = () => {
 
 	return (
 		<div { ...blockProps }>
-			<Skeleton numberOfLines={ 3 } />
-			<Disabled>
-				<input
-					type={ 'number' }
-					value={ '1' }
-					className={ 'wc-block-add-to-cart-form__quantity' }
-				/>
-				<Button
-					variant={ 'primary' }
-					className={ 'wc-block-add-to-cart-form__button' }
-				>
-					{ __( 'Add to cart', 'woo-gutenberg-products-block' ) }
-				</Button>
-			</Disabled>
+			<Tooltip
+				text="Customer will see product add-to-cart options in this space, dependend on the product type. "
+				position="bottom right"
+			>
+				<div className="wc-block-editor-container">
+					<Skeleton numberOfLines={ 3 } />
+					<Disabled>
+						<input
+							type={ 'number' }
+							value={ '1' }
+							className={
+								'wc-block-editor-add-to-cart-form__quantity'
+							}
+						/>
+						<Button
+							variant={ 'primary' }
+							className={
+								'wc-block-editor-add-to-cart-form__button'
+							}
+						>
+							{ __(
+								'Add to cart',
+								'woo-gutenberg-products-block'
+							) }
+						</Button>
+					</Disabled>
+				</div>
+			</Tooltip>
 		</div>
 	);
 };
diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss b/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
index af108639462..540fa32dd75 100644
--- a/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
+++ b/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
@@ -1,16 +1,10 @@
-.wc-block-add-to-cart-form {
+.wc-block-editor-add-to-cart-form {
 	display: flex;
 	flex-direction: column;
 	row-gap: $default-block-margin;
 }
 
-.wc-block-add-to-cart-form__notice.components-notice {
-	margin: 10px 0;
-	color: $black;
-	max-width: 60%;
-}
-
-input.wc-block-add-to-cart-form__quantity[type="number"] {
+input.wc-block-editor-add-to-cart-form__quantity[type="number"] {
 	max-width: 50px;
 	min-height: 23px;
 	float: left;
@@ -29,3 +23,9 @@ button.components-button.wc-block-add-to-cart-form__button {
 	padding: 20px 30px;
 	border-radius: 0;
 }
+
+.wc-block-editor-container {
+	gap: 10px;
+    display: flex;
+    flex-direction: column;
+}

From 132136b38d5144c304e1142ab9aeb7c7a4c5ca72 Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Tue, 4 Apr 2023 20:03:51 +0200
Subject: [PATCH 5/6] fix css linter

---
 .../blocks/product-elements/add-to-cart-form/editor.scss      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss b/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
index 540fa32dd75..992d6b943c3 100644
--- a/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
+++ b/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
@@ -26,6 +26,6 @@ button.components-button.wc-block-add-to-cart-form__button {
 
 .wc-block-editor-container {
 	gap: 10px;
-    display: flex;
-    flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }

From 3c4a05b367201bb209a76e6140df14a6dd6de9d7 Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Wed, 5 Apr 2023 10:07:26 +0200
Subject: [PATCH 6/6] add css for change cursor

---
 .../atomic/blocks/product-elements/add-to-cart-form/editor.scss  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss b/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
index 992d6b943c3..371171a8eff 100644
--- a/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
+++ b/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
@@ -25,6 +25,7 @@ button.components-button.wc-block-add-to-cart-form__button {
 }
 
 .wc-block-editor-container {
+	cursor: help;
 	gap: 10px;
 	display: flex;
 	flex-direction: column;