Make everything Usable

newfold-labs · Nov 3, 2023 · e297da4 · e297da4
1 parent 79b922f
commit e297da4
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 23 deletions.
diff --git a/src/SiteGenSPA/components/CardWithOptions/index.js b/src/SiteGenSPA/components/CardWithOptions/index.js
@@ -1,13 +1,21 @@
 import { addThemeSuffix } from '../../utils/helper';
 import { Icon, chevronRight } from '@wordpress/icons';
 
-const CardWithOptions = ( { title, options, skip } ) => {
+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(
@@ -48,7 +56,17 @@ const CardWithOptions = ( { title, options, skip } ) => {
 			<div className={ addThemeSuffix( 'nfd-sg-card__data' ) }>
 				{ buildOptions() }
 			</div>
-			<div className={ addThemeSuffix( 'nfd-sg-card__skip' ) }>
+			<div
+				role="button"
+				tabIndex={ 0 }
+				className={ addThemeSuffix( 'nfd-sg-card__skip' ) }
+				onClick={ () => {
+					setSelection( -1 );
+				} }
+				onKeyDown={ () => {
+					setSelection( -1 );
+				} }
+			>
 				{ skip }
 			</div>
 		</div>

diff --git a/src/SiteGenSPA/components/Loader/index.js b/src/SiteGenSPA/components/Loader/index.js
@@ -4,12 +4,18 @@ import { useEffect, useState } from '@wordpress/element';
 
 const Loader = () => {
 	let statusIdx = 0;
-	const percentage = 70;
 	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 );
@@ -25,15 +31,23 @@ const Loader = () => {
 				{ content.title }
 			</div>
 			<div className={ addThemeSuffix( 'nfd-sg-loader__progress' ) }>
-				<div
-					className={ addThemeSuffix( 'nfd-sg-loader__progress_bg' ) }
-				/>
 				<div
 					className={ addThemeSuffix(
-						'nfd-sg-loader__progress_bar'
+						'nfd-sg-loader__progress_bars'
 					) }
-					style={ { width: `${ 60 * percentage * 0.01 }vw` } }
-				/>
+				>
+					<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' ) }

diff --git a/src/SiteGenSPA/components/Loader/stylesheet.scss b/src/SiteGenSPA/components/Loader/stylesheet.scss
@@ -19,28 +19,36 @@
 	&__progress {
 		display: flex;
 		margin: 20px 60px;
-		position: relative;
 		align-items: center;
 		justify-content: center;
 
 		@media (max-width: #{ ($break-small) }) {
 			margin: 20px 30px;
 		}
 
-		&_bg {
-			height: 6px;
-			width: 80%;
-			border-radius: 6px;
-			background-color: #353a40;
-		}
+		&_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: 80%;
-			border-radius: 6px;
-			position: absolute;
-			background-color: #0060f0;
+			&_bar {
+				top: 0;
+				height: 6px;
+				max-width: 100%;
+				border-radius: 6px;
+				position: absolute;
+				background-color: #0060f0;
+				transition: width 2s ease-in-out;
+			}
 		}
 	}
 
@@ -54,6 +62,17 @@
 	}
 }
 
+@keyframes bar {
+
+	0% {
+		width: 0%;
+	}
+
+	100% {
+		width: 100%;
+	}
+}
+
 @keyframes anim {
 
 	0% {

diff --git a/src/SiteGenSPA/steps/ExperienceLevel/index.js b/src/SiteGenSPA/steps/ExperienceLevel/index.js
@@ -3,9 +3,17 @@ import Loader from '../../components/Loader';
 import { addThemeSuffix } from '../../utils/helper';
 import CommonLayout from '../../../Shared/Layouts/Common';
 import CardWithOptions from '../../components/CardWithOptions';
+import { useEffect, useState } from '@wordpress/element';
 
 const ExperienceLevel = () => {
 	const content = getContents();
+	// Index of the selection user makes
+	const [ selection, setSelection ] = useState();
+
+	useEffect( () => {
+		// undefined => not selected, 0-2 => Selections, -1 => Skip
+		// console.log( 'Selection changed to', selection );
+	}, [ selection ] );
 
 	return (
 		<CommonLayout isCentered>
@@ -15,6 +23,7 @@ const ExperienceLevel = () => {
 					title={ content.heading }
 					options={ content.options }
 					skip={ content.skip }
+					setSelection={ setSelection }
 				/>
 			</div>
 		</CommonLayout>