Experience Level Screen

src/SiteGenSPA/components/CardWithOptions/index.js

@@ -0,0 +1,76 @@
+import { addThemeSuffix } from '../../utils/helper';
+import { Icon, chevronRight } from '@wordpress/icons';
+
+const CardWithOptions = ( { title, options, skip, setSelection } ) => {
+	const buildOptions = () => {
+		return options.map( ( data, idx ) => {
+			return (
+				<div
+					key={ idx }
+					role="button"
+					tabIndex={ 0 }
+					className={ addThemeSuffix( 'nfd-sg-card__data__option' ) }
+					onClick={ () => {
+						setSelection( idx );
+					} }
+					onKeyDown={ () => {
+						setSelection( idx );
+					} }
+				>
+					<div
+						className={ addThemeSuffix(
+							'nfd-sg-card__data__option__left'
+						) }
+					>
+						<div
+							className={ addThemeSuffix(
+								'nfd-sg-card__data__option__left_top'
+							) }
+						>
+							{ data.title }
+						</div>
+						<div
+							className={ addThemeSuffix(
+								'nfd-sg-card__data__option__left_bottom'
+							) }
+						>
+							{ data.desc }
+						</div>
+					</div>
+					<Icon
+						className={ addThemeSuffix(
+							'nfd-sg-card__data__option__right'
+						) }
+						icon={ chevronRight }
+					/>
+				</div>
+			);
+		} );
+	};
+
+	return (
+		<div className={ addThemeSuffix( 'nfd-sg-card' ) }>
+			<div className={ addThemeSuffix( 'nfd-sg-card__title' ) }>
+				{ title }
+			</div>
+			<div className={ addThemeSuffix( 'nfd-sg-card__data' ) }>
+				{ buildOptions() }
+			</div>
+			<div
+				role="button"
+				tabIndex={ 0 }
+				className={ addThemeSuffix( 'nfd-sg-card__skip' ) }
+				onClick={ () => {
+					setSelection( -1 );
+				} }
+				onKeyDown={ () => {
+					setSelection( -1 );
+				} }
+			>
+				{ skip }
+			</div>
+		</div>
+	);
+};
+
+export default CardWithOptions;

src/SiteGenSPA/components/CardWithOptions/stylesheet.scss

@@ -0,0 +1,77 @@
+.nfd-sg-card {
+
+	margin: 8px;
+	max-width: 90vw;
+	padding: 24px 12px;
+	border-radius: 12px;
+	background-color: #1e2327;
+	width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
+	box-shadow: 3px 3px 5px rgba($color: #000, $alpha: 0.2);
+
+	&__title {
+		color: #fff;
+		margin: 16px;
+		line-height: 2;
+		font-size: 18px;
+		text-align: center;
+		margin-bottom: 30px;
+		letter-spacing: 1.5px;
+	}
+
+	&__data {
+		margin: 12px;
+
+		&__option {
+			display: flex;
+			cursor: pointer;
+			margin: 16px 4px;
+			align-items: center;
+			border-radius: 4px 4px 0 0;
+			padding: 16px 12px 20px 12px;
+			justify-content: space-between;
+			transition: background-color 400ms ease-in-out;
+
+			&:not(:last-child) {
+				border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
+			}
+
+			&:hover {
+				background-color: #262c30;
+			}
+
+			&__left_top {
+				color: #fff;
+				font-size: 16px;
+				font-weight: 500;
+				padding-bottom: 12px;
+			}
+
+			&__left_bottom {
+				color: #fff;
+				font-size: 14px;
+				font-weight: 300;
+			}
+
+			&__right {
+				fill: #fff;
+				transition: all 200ms ease-in-out;
+
+				&:hover {
+					transform: scale(1.1);
+				}
+			}
+		}
+	}
+
+	&__skip {
+		cursor: pointer;
+		text-align: end;
+		margin: 0 20px 6px 20px;
+		color: rgba(255, 255, 255, 0.6);
+		transition: color 200ms ease-in-out;
+
+		&:hover {
+			color: #fff;
+		}
+	}
+}

src/SiteGenSPA/components/Loader/contents.js

@@ -0,0 +1,32 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		title: __( 'Building Website', 'wp-module-onboarding' ),
+		status: [
+			{
+				title: __( 'Generating Website', 'wp-module-onboarding' ),
+			},
+			{
+				title: __( 'Finding Font Pairings', 'wp-module-onboarding' ),
+			},
+			{
+				title: __(
+					'Building Custom Color Palettes',
+					'wp-module-onboarding'
+				),
+			},
+			{
+				title: __( 'Populating Images', 'wp-module-onboarding' ),
+			},
+			{
+				title: __( 'Finalizing Previews', 'wp-module-onboarding' ),
+			},
+			{
+				title: __( 'Packaging Website', 'wp-module-onboarding' ),
+			},
+		],
+	};
+};
+
+export default getContents;

src/SiteGenSPA/components/Loader/index.js

@@ -0,0 +1,59 @@
+import getContents from './contents';
+import { addThemeSuffix } from '../../utils/helper';
+import { useEffect, useState } from '@wordpress/element';
+
+const Loader = () => {
+	let statusIdx = 0;
+	const content = getContents();
+	const [ percentage, setPercentage ] = useState( 0 );
+	const [ status, setStatus ] = useState( content.status[ statusIdx ].title );
+
+	const checkStatus = async () => {
+		// Make fake API Call to get the status.
+		if ( percentage !== 100 ) setPercentage( ( t ) => t + 10 );
+	};
+
+	useEffect( () => {
+		const statusTimer = setInterval( () => {
+			checkStatus();
+			statusIdx += 1;
+			if ( statusIdx === content.status.length ) statusIdx = 0;
+			setStatus( content.status[ statusIdx ].title );
+		}, 3000 );
+		return () => {
+			clearInterval( statusTimer );
+		};
+	}, [] );
+
+	return (
+		<div className={ addThemeSuffix( 'nfd-sg-loader' ) }>
+			<div className={ addThemeSuffix( 'nfd-sg-loader__title' ) }>
+				{ content.title }
+			</div>
+			<div className={ addThemeSuffix( 'nfd-sg-loader__progress' ) }>
+				<div
+					className={ addThemeSuffix(
+						'nfd-sg-loader__progress_bars'
+					) }
+				>
+					<div
+						className={ addThemeSuffix(
+							'nfd-sg-loader__progress_bars_bg'
+						) }
+					/>
+					<div
+						className={ addThemeSuffix(
+							'nfd-sg-loader__progress_bars_bar'
+						) }
+						style={ { width: `${ percentage }%` } }
+					/>
+				</div>
+			</div>
+			<div
+				className={ addThemeSuffix( 'nfd-sg-loader__status' ) }
+			>{ `${ status }...` }</div>
+		</div>
+	);
+};
+
+export default Loader;

src/SiteGenSPA/components/Loader/stylesheet.scss

@@ -0,0 +1,93 @@
+.nfd-sg-loader {
+
+	margin: 8px;
+	max-width: 90vw;
+	padding: 16px 12px;
+	border-radius: 12px;
+	background-color: #1e2327;
+	width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
+	box-shadow: 3px 3px 5px rgba($color: #000, $alpha: 0.2);
+
+	&__title {
+		color: #fff;
+		line-height: 2;
+		font-size: 18px;
+		text-align: center;
+		letter-spacing: 1.5px;
+	}
+
+	&__progress {
+		display: flex;
+		margin: 20px 60px;
+		align-items: center;
+		justify-content: center;
+
+		@media (max-width: #{ ($break-small) }) {
+			margin: 20px 30px;
+		}
+
+		&_bars {
+			width: 100%;
+			display: flex;
+			position: relative;
+			align-items: center;
+			justify-content: start;
+
+			&_bg {
+				height: 6px;
+				width: 100%;
+				border-radius: 6px;
+				background-color: #353a40;
+			}
+
+			&_bar {
+				top: 0;
+				height: 6px;
+				max-width: 100%;
+				border-radius: 6px;
+				position: absolute;
+				background-color: #0060f0;
+				transition: width 2s ease-in-out;
+			}
+		}
+	}
+
+	&__status {
+		color: #fff;
+		line-height: 2;
+		font-size: 14px;
+		text-align: center;
+		letter-spacing: 1.3px;
+		animation: anim 3s ease-out infinite;
+	}
+}
+
+@keyframes bar {
+
+	0% {
+		width: 0%;
+	}
+
+	100% {
+		width: 100%;
+	}
+}
+
+@keyframes anim {
+
+	0% {
+		opacity: 0.1;
+	}
+
+	25% {
+		opacity: 1;
+	}
+
+	75% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0.1;
+	}
+}

src/SiteGenSPA/steps/ExperienceLevel/contents.js

@@ -0,0 +1,36 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		heading: __(
+			'How familiar are you with using WordPress?',
+			'wp-module-onboarding'
+		),
+		options: [
+			{
+				title: __( 'Beginner', 'wp-module-onboarding' ),
+				desc: __(
+					'First time here, where am I?',
+					'wp-module-onboarding'
+				),
+			},
+			{
+				title: __( 'Used it some', 'wp-module-onboarding' ),
+				desc: __(
+					"I'll ask for help when I need it",
+					'wp-module-onboarding'
+				),
+			},
+			{
+				title: __( 'Expert', 'wp-module-onboarding' ),
+				desc: __(
+					"Stay out of my way, I know what I'm doing",
+					'wp-module-onboarding'
+				),
+			},
+		],
+		skip: __( 'Skip', 'wp-module-onboarding' ),
+	};
+};
+
+export default getContents;