From 4c562a6b8eec3cc2efed94a168d49821be22d443 Mon Sep 17 00:00:00 2001
From: "Soare Robert Daniel (Mac 2023)" <soare.robert.daniel@protonmail.com>
Date: Thu, 19 Dec 2024 15:24:54 +0200
Subject: [PATCH] refactor: show Select on card selection, add highlight on
 hover

---
 onboarding/src/Components/Sites.js           | 13 ++++++++--
 onboarding/src/Components/StarterSiteCard.js | 27 ++++++++++++++++++--
 onboarding/src/scss/_starter-site-card.scss  |  8 +++++-
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/onboarding/src/Components/Sites.js b/onboarding/src/Components/Sites.js
index 35fe27cc..4827d716 100644
--- a/onboarding/src/Components/Sites.js
+++ b/onboarding/src/Components/Sites.js
@@ -7,6 +7,7 @@ import Fuse from 'fuse.js/dist/fuse.min';
 
 const Sites = ( { getSites, editor, category, searchQuery } ) => {
 	const [ maxShown, setMaxShown ] = useState( 9 );
+	const [ selectedStarterSite, setSelectedSite ] = useState('');
 	const { sites = {} } = getSites;
 
 	const getFilteredSites = () => {
@@ -60,13 +61,21 @@ const Sites = ( { getSites, editor, category, searchQuery } ) => {
 	const getBuilders = () => Object.keys( sites );
 
 	const allData = getFilteredSites();
-
 	return (
 		<>
 			{ allData.length ? (
 				<div className="ob-sites is-grid">
 					{ allData.slice( 0, maxShown ).map( ( site, index ) => {
-						return <StarterSiteCard key={ index } data={ site } />;
+						return (
+							<StarterSiteCard
+								key={ index }
+								data={ site }
+								isSelected={ selectedStarterSite === site?.slug }
+								toggleSelectedSite={() => {
+									setSelectedSite( site.slug === selectedStarterSite ? '' : site.slug );
+								}}
+							/>
+						);
 					} ) }
 
 					<VizSensor
diff --git a/onboarding/src/Components/StarterSiteCard.js b/onboarding/src/Components/StarterSiteCard.js
index 25bae0b1..b48a6027 100644
--- a/onboarding/src/Components/StarterSiteCard.js
+++ b/onboarding/src/Components/StarterSiteCard.js
@@ -4,6 +4,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { track } from '../utils/rest';
+import classNames from 'classnames';
 
 const StarterSiteCard = ( {
 	data,
@@ -11,6 +12,8 @@ const StarterSiteCard = ( {
 	handleNextStep,
 	trackingId,
 	editor,
+	isSelected,
+	toggleSelectedSite
 } ) => {
 	const { upsell, screenshot, title, category, query } = data;
 
@@ -36,7 +39,9 @@ const StarterSiteCard = ( {
 
 	return (
 		<div className="ss-card-wrap">
-			<div className="ss-card">
+			<div
+				className="ss-card"
+			>
 				{ upsell && (
 					<span className="ss-badge">
 						<span>
@@ -45,7 +50,25 @@ const StarterSiteCard = ( {
 					</span>
 				) }
 
-				<div className="ss-actions">
+				<div
+					className={
+						classNames('ss-actions', {
+							'card-selected': isSelected
+						})
+					}
+					role="button"
+					tabIndex={0}
+					onClick={(e) => {
+						e.preventDefault();
+						toggleSelectedSite();
+					}}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.preventDefault();
+							toggleSelectedSite();
+						}
+					}}
+				>
 					<Button
 						isPrimary
 						className="ob-button"
diff --git a/onboarding/src/scss/_starter-site-card.scss b/onboarding/src/scss/_starter-site-card.scss
index 3d01cdc9..ae270d55 100644
--- a/onboarding/src/scss/_starter-site-card.scss
+++ b/onboarding/src/scss/_starter-site-card.scss
@@ -5,8 +5,14 @@
   overflow: hidden;
   margin-bottom: 14px;
   position: relative;
+  border: 2px solid transparent;
 
-  &:hover, &:focus-within {
+  &:hover {
+    border: 2px solid #3498db;
+    transition: all 0.3s ease;
+  }
+
+  &:focus-within, .card-selected {
     .ss-actions {
       opacity: 1;
     }