Change recommended ribbon to Pill

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

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"

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 />
 						) }

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 {

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(