From 1a129a235409e4fd1b94a53e37cccaa7e22db714 Mon Sep 17 00:00:00 2001
From: Ilyas Foo <foo.ilyas@gmail.com>
Date: Thu, 14 Apr 2022 10:52:12 +0800
Subject: [PATCH] Change recommended ribbon to Pill

---
 packages/js/components/CHANGELOG.md           |  1 +
 packages/js/components/src/pill/pill.js       |  5 +++--
 .../components/List/Item.js                   | 20 +++++++++++++------
 .../components/List/List.scss                 |  9 +++++++++
 .../PaymentGatewaySuggestions/test/index.js   |  2 +-
 5 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/js/components/CHANGELOG.md b/packages/js/components/CHANGELOG.md
index c0d21596f66..e7782c11e57 100644
--- a/packages/js/components/CHANGELOG.md
+++ b/packages/js/components/CHANGELOG.md
@@ -3,6 +3,7 @@
 -   Fix documentation for `TableCard` component
 -   Update dependency `@wordpress/hooks` to ^3.5.0
 -   Update dependency `@wordpress/icons` to ^8.1.0
+-   Add `className` prop for Pill component. #32605
 
 # 10.0.0
 -   Replace deprecated wp.compose.withState with wp.element.useState. #8338
diff --git a/packages/js/components/src/pill/pill.js b/packages/js/components/src/pill/pill.js
index 662bb11fa45..33f91cf9bdf 100644
--- a/packages/js/components/src/pill/pill.js
+++ b/packages/js/components/src/pill/pill.js
@@ -2,16 +2,17 @@
  * External dependencies
  */
 import { createElement } from '@wordpress/element';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import { Text } from '../experimental';
 
-export function Pill( { children } ) {
+export function Pill( { children, className } ) {
 	return (
 		<Text
-			className="woocommerce-pill"
+			className={ classnames( 'woocommerce-pill', className ) }
 			variant="caption"
 			as="span"
 			size="12"
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js
index bb327ace13e..af919e6970b 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js
@@ -4,8 +4,10 @@
 import classnames from 'classnames';
 import { Fragment } from '@wordpress/element';
 import { CardBody, CardMedia, CardDivider } from '@wordpress/components';
-import { RecommendedRibbon, SetupRequired } from '@woocommerce/onboarding';
+import { SetupRequired } from '@woocommerce/onboarding';
+import { Pill } from '@woocommerce/components';
 import { Text, useSlot } from '@woocommerce/experimental';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -42,7 +44,7 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => {
 	const hasSetup = Boolean(
 		plugins.length || requiredSettings.length || hasFills || externalLink
 	);
-	const showRecommendedRibbon = isRecommended && needsSetup;
+	const showRecommended = isRecommended && needsSetup;
 
 	const classes = classnames(
 		'woocommerce-task-payment',
@@ -61,11 +63,17 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => {
 					<img src={ image72x72 } alt={ title } />
 				</CardMedia>
 				<div className="woocommerce-task-payment__description">
-					{ showRecommendedRibbon && (
-						<RecommendedRibbon isLocalPartner={ isLocalPartner } />
-					) }
 					<Text as="h3" className="woocommerce-task-payment__title">
-						{ title }
+						<span>{ title }</span>
+						{ showRecommended && (
+							<Pill
+								className={ ! isLocalPartner && 'pill-green' }
+							>
+								{ isLocalPartner
+									? __( 'Local Partner', 'woocommerce' )
+									: __( 'Recommended', 'woocommerce' ) }
+							</Pill>
+						) }
 						{ isInstalled && needsSetup && !! plugins.length && (
 							<SetupRequired />
 						) }
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss
index cb524da6945..da05a93d13e 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss
@@ -42,6 +42,15 @@
 		color: $studio-gray-80;
 		margin-top: 0;
 		margin-bottom: $gap-smaller;
+
+		.woocommerce-pill {
+			margin-left: 8px;
+
+			&.pill-green {
+				color: #008a20;
+				border-color: #008a20;
+			}
+		}
 	}
 
 	.woocommerce-task-payment__content {
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js
index 48adc770f71..c1d710c865b 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js
@@ -146,7 +146,7 @@ describe( 'PaymentGatewaySuggestions', () => {
 		);
 
 		const paymentTitleElements = container.querySelectorAll(
-			'.woocommerce-task-payment__title'
+			'.woocommerce-task-payment__title > span:first-child'
 		);
 
 		const paymentTitles = Array.from( paymentTitleElements ).map(