Mini-cart: add the option to change the style between 'Outline' and '…

…Fill' in all the buttons (#8835)

* Render inner buttons on the frontend

* Add deprecation to the buttons

* Fix lint and inline save

* Remove commented out code and fix condition

* Change migrate condition

* Add styles outline and fill styles to cart and checkout buttons

* Add fill and outline styles to the start shopping button

* Refactor variants

* Remove imports

* Add classname default value

---------

Co-authored-by: Manish Menaria <[email protected]>

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json

@@ -24,6 +24,17 @@
 			}
 		}
 	},
+	"styles": [
+		{
+			"name": "fill",
+			"label": "Fill"
+		},
+		{
+			"name": "outline",
+			"label": "Outline",
+			"isDefault": true
+		}
+	],
 	"parent": [ "woocommerce/mini-cart-footer-block" ],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx

@@ -10,6 +10,7 @@ import { useColorProps } from '@woocommerce/base-hooks';
  * Internal dependencies
  */
 import { defaultCartButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 type MiniCartCartButtonBlockProps = {
 	cartButtonLabel?: string;
@@ -37,7 +38,7 @@ const Block = ( {
 			) }
 			style={ { ...colorProps.style } }
 			href={ CART_URL }
-			variant="outlined"
+			variant={ getVariant( className, 'outlined' ) }
 		>
 			{ cartButtonLabel || defaultCartButtonLabel }
 		</Button>

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx

@@ -8,6 +8,7 @@ import EditableButton from '@woocommerce/editor-components/editable-button';
  * Internal dependencies
  */
 import { defaultCartButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 export const Edit = ( {
 	attributes,
@@ -25,7 +26,7 @@ export const Edit = ( {
 		<EditableButton
 			{ ...blockProps }
 			className="wc-block-mini-cart__footer-cart"
-			variant="outlined"
+			variant={ getVariant( blockProps.className, 'outlined' ) }
 			value={ cartButtonLabel }
 			placeholder={ defaultCartButtonLabel }
 			onChange={ ( content ) => {

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json

@@ -24,7 +24,20 @@
 			}
 		}
 	},
-	"parent": [ "woocommerce/mini-cart-footer-block" ],
+	"styles": [
+		{
+			"name": "fill",
+			"label": "Fill",
+			"isDefault": true
+		},
+		{
+			"name": "outline",
+			"label": "Outline"
+		}
+	],
+	"parent": [
+		"woocommerce/mini-cart-footer-block"
+	],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx

@@ -10,6 +10,7 @@ import { useColorProps } from '@woocommerce/base-hooks';
  * Internal dependencies
  */
 import { defaultCheckoutButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 type MiniCartCheckoutButtonBlockProps = {
 	checkoutButtonLabel?: string;
@@ -35,6 +36,7 @@ const Block = ( {
 				colorProps.className,
 				'wc-block-mini-cart__footer-checkout'
 			) }
+			variant={ getVariant( className, 'contained' ) }
 			style={ { ...colorProps.style } }
 			href={ CHECKOUT_URL }
 		>

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx

@@ -3,11 +3,13 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 import EditableButton from '@woocommerce/editor-components/editable-button';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import { defaultCheckoutButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 export const Edit = ( {
 	attributes,
@@ -24,7 +26,11 @@ export const Edit = ( {
 	return (
 		<EditableButton
 			{ ...blockProps }
-			className="wc-block-mini-cart__footer-checkout"
+			className={ classNames(
+				'wc-block-mini-cart__footer-checkout',
+				blockProps.className
+			) }
+			variant={ getVariant( blockProps.className, 'contained' ) }
 			value={ checkoutButtonLabel }
 			placeholder={ defaultCheckoutButtonLabel }
 			onChange={ ( content ) => {

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/block.json

@@ -24,6 +24,17 @@
 			}
 		}
 	},
+	"styles": [
+		{
+			"name": "fill",
+			"label": "Fill",
+			"isDefault": true
+		},
+		{
+			"name": "outline",
+			"label": "Outline"
+		}
+	],
 	"parent": [ "woocommerce/empty-mini-cart-contents-block" ],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/block.tsx

@@ -9,6 +9,7 @@ import classNames from 'classnames';
  * Internal dependencies
  */
 import { defaultStartShoppingButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 type MiniCartShoppingButtonBlockProps = {
 	className: string;
@@ -30,6 +31,7 @@ const Block = ( {
 					className,
 					'wc-block-mini-cart__shopping-button'
 				) }
+				variant={ getVariant( className, 'contained' ) }
 				href={ SHOP_URL }
 			>
 				{ startShoppingButtonLabel || defaultStartShoppingButtonLabel }

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx

@@ -8,6 +8,7 @@ import EditableButton from '@woocommerce/editor-components/editable-button';
  * Internal dependencies
  */
 import { defaultStartShoppingButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 export const Edit = ( {
 	attributes,
@@ -33,6 +34,7 @@ export const Edit = ( {
 						startShoppingButtonLabel: content,
 					} );
 				} }
+				variant={ getVariant( blockProps.className, 'contained' ) }
 			/>
 		</div>
 	);

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/utils.ts

@@ -0,0 +1,16 @@
+type Variant = 'text' | 'contained' | 'outlined';
+
+export const getVariant = (
+	className = '',
+	defaultVariant: Variant
+): Variant => {
+	if ( className.includes( 'is-style-outline' ) ) {
+		return 'outlined';
+	}
+
+	if ( className.includes( 'is-style-fill' ) ) {
+		return 'contained';
+	}
+
+	return defaultVariant;
+};