Better Component Design

src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/index.js

@@ -0,0 +1,28 @@
+import { OptionItem } from '../';
+import { memo } from '@wordpress/element';
+
+const CardWithOptions = ( { title, options, selection, callback } ) => {
+	const buildOptions = () => {
+		return options.map( ( data, idx ) => {
+			return (
+				<OptionItem
+					key={ idx }
+					idx={ idx }
+					title={ data.title }
+					desc={ data.desc }
+					isSelected={ data.key === selection }
+					callback={ callback }
+				/>
+			);
+		} );
+	};
+
+	return (
+		<div className={ 'nfd-sg-card' }>
+			<div className={ 'nfd-sg-card__title' }>{ title }</div>
+			<div className={ 'nfd-sg-card__data' }>{ buildOptions() }</div>
+		</div>
+	);
+};
+
+export default memo( CardWithOptions );

src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/stylesheet.scss

@@ -0,0 +1,32 @@
+$background-color: var(--nfd-onboarding-card-background);
+
+.nfd-sg-card {
+
+	margin: 8px;
+	max-width: 90vw;
+	padding: 24px 16px;
+	border-radius: 12px;
+	background-color: $background-color;
+	width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
+	box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-primary-rgb), $alpha: 0.05);
+
+	@media (max-width: #{ ($break-large) }) {
+		margin: 12px;
+		padding: 12px 6px;
+	}
+
+	&__title {
+		color: var(--nfd-onboarding-primary);
+		margin: 16px;
+		line-height: 1.5;
+		font-size: 18px;
+		text-align: center;
+		margin-bottom: 30px;
+		font-weight: 400;
+		letter-spacing: 1.5;
+	}
+
+	&__data {
+		margin: 12px;
+	}
+}

src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/index.js

@@ -0,0 +1,46 @@
+import classNames from 'classnames';
+import { memo } from '@wordpress/element';
+import { Icon, chevronRight } from '@wordpress/icons';
+
+const OptionItem = ( { idx, title, desc, isSelected, callback } ) => {
+	return (
+		<div
+			key={ idx }
+			role="button"
+			tabIndex={ 0 }
+			className={ 'nfd-sg-card__data__option' }
+			onClick={ () => {
+				if ( callback && typeof callback === 'function' ) {
+					callback( idx + 1 );
+				}
+			} }
+			onKeyDown={ () => {
+				if ( callback && typeof callback === 'function' ) {
+					callback( idx + 1 );
+				}
+			} }
+		>
+			<div
+				className={ classNames(
+					'nfd-sg-card__data__option__wrapper',
+					isSelected && 'nfd-sg-card__data__option__wrapper--selected'
+				) }
+			>
+				<div className={ 'nfd-sg-card__data__option__left' }>
+					<div className={ 'nfd-sg-card__data__option__left_top' }>
+						{ title }
+					</div>
+					<div className={ 'nfd-sg-card__data__option__left_bottom' }>
+						{ desc }
+					</div>
+				</div>
+				<Icon
+					className={ 'nfd-sg-card__data__option__right' }
+					icon={ chevronRight }
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default memo( OptionItem );

src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/stylesheet.scss

@@ -0,0 +1,47 @@
+$background-color: var(--nfd-onboarding-card-background);
+
+.nfd-sg-card__data__option {
+
+	&__wrapper {
+		display: flex;
+		cursor: pointer;
+		margin: 16px 4px;
+		align-items: center;
+		border-radius: 8px;
+		padding: 16px 12px 16px 12px;
+		justify-content: space-between;
+		transition: background-color 400ms ease-in-out;
+
+		&--selected {
+			background-color: var(--nfd-onboarding-hover);
+		}
+	}
+
+	&:not(:last-child) {
+		border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
+	}
+
+	&__left_top {
+		color: var(--nfd-onboarding-primary);
+		font-size: 15px;
+		font-weight: 500;
+		margin-bottom: 7px;
+		line-height: 24px;
+	}
+
+	&__left_bottom {
+		color: rgba(var(--nfd-onboarding-primary-rgb), 0.7);
+
+		font-size: 14px;
+		font-weight: 300;
+	}
+
+	&__right {
+		fill: var(--nfd-onboarding-primary);
+		transition: all 200ms ease-in-out;
+
+		&:hover {
+			transform: scale(1.1);
+		}
+	}
+}

src/OnboardingSPA/components/CardWithOptionsTemplate/index.js

@@ -0,0 +1,2 @@
+export { default as OptionItem } from './OptionItem';
+export { default as CardWithOptions } from './CardWithOptions';

src/OnboardingSPA/steps/SiteGen/Experience/contents.js

@@ -11,28 +11,24 @@ const getContents = () => {
 				key: 1,
 				title: __( 'Beginner', 'wp-module-onboarding' ),
 				desc: __(
-					'First time here, where am I?',
+					'First time building a website using WordPress',
 					'wp-module-onboarding'
 				),
 			},
 			{
 				key: 2,
-				title: __( 'Used it some', 'wp-module-onboarding' ),
+				title: __( 'Intermediate', 'wp-module-onboarding' ),
 				desc: __(
-					"I'll ask for help when I need it",
+					'I’ve built a few sites for myself or others',
 					'wp-module-onboarding'
 				),
 			},
 			{
 				key: 3,
 				title: __( 'Expert', 'wp-module-onboarding' ),
-				desc: __(
-					"Stay out of my way, I know what I'm doing",
-					'wp-module-onboarding'
-				),
+				desc: __( 'I do this frequently', 'wp-module-onboarding' ),
 			},
 		],
-		skip: __( 'Skip', 'wp-module-onboarding' ),
 	};
 };
 

src/OnboardingSPA/steps/SiteGen/Experience/index.js

@@ -5,7 +5,7 @@ import getContents from './contents';
 import { HEADER_SITEGEN } from '../../../../constants';
 import { store as nfdOnboardingStore } from '../../../store';
 import CommonLayout from '../../../components/Layouts/Common';
-import CardWithOptions from '../../../components/CardWithOptions';
+import { CardWithOptions } from '../../../components/CardWithOptionsTemplate';
 import SiteGenLoader from '../../../components/Loaders/SiteGenLoader';
 import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi';
 
@@ -62,7 +62,6 @@ const SiteGenExperience = () => {
 					<CardWithOptions
 						title={ content.heading }
 						options={ content.options }
-						skip={ content.skip }
 						selection={ selection }
 						callback={ checkAndNavigate }
 					/>

src/OnboardingSPA/styles/app.scss

@@ -56,7 +56,8 @@
 @import "../components/TextInput/TextInputSiteGen/stylesheet";
 @import "../components/ToggleDarkMode/stylesheet";
 @import "../components/Button/NextButtonSiteGen/stylesheet";
-@import "../components/CardWithOptions/stylesheet";
+@import "../components/CardWithOptionsTemplate/OptionItem/stylesheet";
+@import "../components/CardWithOptionsTemplate/CardWithOptions/stylesheet";
 @import "../components/Loaders/SiteGenLoader/stylesheet";
 @import "../components/Footer/stylesheet";
 @import "../components/LivePreview/SiteGenCard/stylesheet";