Improvements to core profiler checkbox UX (#50151)

* Fix border and vertical align

* Changelog

* Add toggle event to plugin card

* Add test

* Fix double invocation and simplified onChange

* Fix unintended optional parameter change

plugins/woocommerce-admin/client/core-profiler/components/plugin-card/plugin-card.scss

@@ -11,6 +11,14 @@
 	align-items: flex-start;
 	flex: 0 0 48%;
 
+	&:hover {
+		cursor: pointer;
+	}
+
+	&.is-installed:hover {
+		cursor: initial;
+	}
+
 	@include breakpoint( "<782px" ) {
 		width: 100%;
 		padding: 16px;

plugins/woocommerce-admin/client/core-profiler/components/plugin-card/plugin-card.tsx

@@ -16,7 +16,7 @@ export const PluginCard = ( {
 	installed = false,
 	icon,
 	title,
-	onChange,
+	onChange = () => {},
 	checked = false,
 	description,
 	learnMoreLink,
@@ -32,13 +32,20 @@ export const PluginCard = ( {
 	learnMoreLink?: ReactNode;
 } ) => {
 	return (
-		<div className="woocommerce-profiler-plugins-plugin-card">
+		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+		<div
+			className={ clsx( 'woocommerce-profiler-plugins-plugin-card', {
+				'is-installed': installed,
+			} ) }
+			onClick={ onChange }
+		>
 			<div className="woocommerce-profiler-plugin-card-top">
 				{ ! installed && (
 					<CheckboxControl
 						className="core-profiler__checkbox"
 						checked={ checked }
-						onChange={ onChange ? onChange : () => {} }
+						onChange={ onChange }
+						onClick={ ( e ) => e.stopPropagation() }
 					/>
 				) }
 				{ icon }

plugins/woocommerce-admin/client/core-profiler/components/plugin-card/test/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent } from '@testing-library/react';
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { PluginCard } from '../plugin-card';
+
+describe( 'PluginCard', () => {
+	it( 'should trigger onChange when title and description is clicked', () => {
+		const onChange = jest.fn();
+		const { queryByText } = render(
+			<PluginCard
+				installed={ false }
+				onChange={ onChange }
+				checked={ false }
+				icon={ null }
+				title={ 'Plugin title' }
+				description={ 'Plugin description' }
+				learnMoreLink={ null }
+			/>
+		);
+		const title = queryByText( 'Plugin title' );
+		const description = queryByText( 'Plugin description' );
+		expect( title ).toBeInTheDocument();
+		expect( description ).toBeInTheDocument();
+		if ( title ) fireEvent.click( title );
+		if ( description ) fireEvent.click( description );
+		expect( onChange ).toHaveBeenCalledTimes( 2 );
+	} );
+} );

plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx

@@ -174,7 +174,7 @@ export const Plugins = ( {
 					{ context.pluginsAvailable.map( ( plugin ) => {
 						const learnMoreLink = plugin.learn_more_link ? (
 							<Link
-								onClick={ () => {
+								onClick={ ( e ) => {
 									sendEvent( {
 										type: 'PLUGINS_LEARN_MORE_LINK_CLICKED',
 										payload: {
@@ -183,6 +183,7 @@ export const Plugins = ( {
 												plugin.learn_more_link ?? '',
 										},
 									} );
+									e.stopPropagation();
 								} }
 								href={ plugin.learn_more_link }
 								target="_blank"

plugins/woocommerce-admin/client/core-profiler/shared.scss

@@ -9,18 +9,24 @@
 	.components-checkbox-control__input-container {
 		width: 16px;
 		height: 16px;
+		align-self: center;
 	}
 
 	.components-checkbox-control__input[type="checkbox"] {
 		width: 16px !important;
 		height: 16px !important;
+		border-color: #757575;
+
+		&:checked {
+			border-color: transparent;
+		}
 	}
 
 	svg.components-checkbox-control__checked {
 		width: 20px;
 		height: 20px;
 
-		@include breakpoint( "<600px" ) {
+		@include breakpoint("<600px") {
 			width: 16px;
 			height: 16px;
 		}

plugins/woocommerce/changelog/fix-50112-ux-improvements-core-profiler-checkbox

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix core profiler checkbox vertical alignment and border color