Refactor variants

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;
@@ -28,10 +29,6 @@ const Block = ( {
 		return null;
 	}
 
-	const variant = className.includes( 'is-style-fill' )
-		? 'contained'
-		: 'outlined';
-
 	return (
 		<Button
 			className={ classNames(
@@ -41,7 +38,7 @@ const Block = ( {
 			) }
 			style={ { ...colorProps.style } }
 			href={ CART_URL }
-			variant={ variant }
+			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,
@@ -21,15 +22,11 @@ export const Edit = ( {
 	const blockProps = useBlockProps();
 	const { cartButtonLabel } = attributes;
 
-	const variant = blockProps.className.includes( 'is-style-fill' )
-		? 'contained'
-		: 'outlined';
-
 	return (
 		<EditableButton
 			{ ...blockProps }
 			className="wc-block-mini-cart__footer-cart"
-			variant={ variant }
+			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.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;
@@ -28,18 +29,14 @@ const Block = ( {
 		return null;
 	}
 
-	const variant = className.includes( 'is-style-outline' )
-		? 'outlined'
-		: 'contained';
-
 	return (
 		<Button
 			className={ classNames(
 				className,
 				colorProps.className,
 				'wc-block-mini-cart__footer-checkout'
 			) }
-			variant={ variant }
+			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

@@ -9,6 +9,7 @@ import classNames from 'classnames';
  * Internal dependencies
  */
 import { defaultCheckoutButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 export const Edit = ( {
 	attributes,
@@ -22,18 +23,14 @@ export const Edit = ( {
 	const blockProps = useBlockProps();
 	const { checkoutButtonLabel } = attributes;
 
-	const variant = blockProps.className.includes( 'is-style-outline' )
-		? 'outlined'
-		: 'contained';
-
 	return (
 		<EditableButton
 			{ ...blockProps }
 			className={ classNames(
 				'wc-block-mini-cart__footer-checkout',
 				blockProps.className
 			) }
-			variant={ variant }
+			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.tsx

@@ -9,6 +9,7 @@ import classNames from 'classnames';
  * Internal dependencies
  */
 import { defaultStartShoppingButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 type MiniCartShoppingButtonBlockProps = {
 	className: string;
@@ -23,18 +24,14 @@ const Block = ( {
 		return null;
 	}
 
-	const variant = className.includes( 'is-style-outline' )
-		? 'outlined'
-		: 'contained';
-
 	return (
 		<div className="wp-block-button has-text-align-center">
 			<Button
 				className={ classNames(
 					className,
 					'wc-block-mini-cart__shopping-button'
 				) }
-				variant={ variant }
+				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,
@@ -21,10 +22,6 @@ export const Edit = ( {
 	const blockProps = useBlockProps();
 	const { startShoppingButtonLabel } = attributes;
 
-	const variant = blockProps.className.includes( 'is-style-outline' )
-		? 'outlined'
-		: 'contained';
-
 	return (
 		<div className="wp-block-button aligncenter">
 			<EditableButton
@@ -37,7 +34,7 @@ export const Edit = ( {
 						startShoppingButtonLabel: content,
 					} );
 				} }
-				variant={ variant }
+				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: string,
+	defaultVariant: Variant
+): Variant => {
+	if ( className.includes( 'is-style-outline' ) ) {
+		return 'outlined';
+	}
+
+	if ( className.includes( 'is-style-fill' ) ) {
+		return 'contained';
+	}
+
+	return defaultVariant;
+};