Customer Details Screen

src/SiteGenSPA/components/AIHeading/index.js

@@ -0,0 +1,14 @@
+import { addThemeSuffix } from '../../utils/helper';
+
+const AIHeading = ( { title } ) => {
+	return (
+		<div className={ addThemeSuffix( 'ai-heading' ) }>
+			<div className={ addThemeSuffix( 'ai-heading--icon' ) } />
+			<div className={ addThemeSuffix( 'ai-heading--title' ) }>
+				{ title }
+			</div>
+		</div>
+	);
+};
+
+export default AIHeading;

src/SiteGenSPA/components/AIHeading/stylesheet.scss

@@ -0,0 +1,27 @@
+.ai-heading {
+
+	display: flex;
+	margin-bottom: 20px;
+	align-items: center;
+
+	&--icon {
+		width: 50px;
+		margin: 4px;
+		height: 50px;
+		background-size: 200%;
+		background-position: center;
+		background-repeat: no-repeat;
+		background-image: var(--ai-logo);
+	}
+
+	&--title {
+		margin: 10px;
+		line-height: 1.5;
+		font-weight: 500;
+		font-size: 1.4rem;
+
+		&--dark {
+			color: #fff;
+		}
+	}
+}

src/SiteGenSPA/components/Navigation/NextButton/index.js

@@ -0,0 +1,23 @@
+import { __ } from '@wordpress/i18n';
+import { addThemeSuffix } from '../../../utils/helper';
+import { Icon, chevronRight } from '@wordpress/icons';
+
+const NextButton = ( { callback } ) => {
+	return (
+		<div
+			role="button"
+			tabIndex={ 0 }
+			onClick={ () => callback() }
+			onKeyDown={ () => callback() }
+			className={ addThemeSuffix( 'nfd-sg-next-btn' ) }
+		>
+			{ __( 'Next', 'wp-module-onboarding' ) }
+			<Icon
+				className={ addThemeSuffix( 'nfd-sg-next-btn--icon' ) }
+				icon={ chevronRight }
+			/>
+		</div>
+	);
+};
+
+export default NextButton;

src/SiteGenSPA/components/Navigation/NextButton/stylesheet.scss

@@ -0,0 +1,36 @@
+.nfd-sg-next-btn {
+	height: 20px;
+	width: 60px;
+	color: #fff;
+	padding: 16px;
+	display: flex;
+	font-size: 1rem;
+	cursor: pointer;
+	padding-left: 24px;
+	align-items: center;
+	border-radius: 8px;
+	justify-content: center;
+	background-color: #000;
+	transition: all 300ms ease-in-out;
+
+	&--icon {
+		fill: #fff;
+
+		&--dark {
+			fill: #000;
+		}
+	}
+
+	&:hover {
+		box-shadow: 5px 5px rgba($color: #000, $alpha: 0.1);
+	}
+
+	&--dark {
+		color: #000;
+		background-color: #fff;
+
+		&:hover {
+			box-shadow: 5px 5px rgba($color: #fff, $alpha: 0.1);
+		}
+	}
+}

src/SiteGenSPA/components/SiteGenInterfaceSkeleton/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { addThemeSuffix } from '../../utils/helper';
 import { forwardRef, useEffect, useContext } from '@wordpress/element';
 // eslint-disable-next-line  @wordpress/no-unsafe-wp-apis
 import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
@@ -99,7 +100,11 @@ function SiteGenInterfaceSkeleton(
 						{ progressbar }
 					</div>
 				) }
-				<div className="nfd-sg-interface-skeleton__body">
+				<div
+					className={ addThemeSuffix(
+						'nfd-sg-interface-skeleton__body'
+					) }
+				>
 					{ !! header && (
 						<div
 							className="nfd-sg-interface-skeleton__header"

src/SiteGenSPA/components/SiteGenInterfaceSkeleton/style.scss

@@ -53,8 +53,8 @@ html.nfd-sg-interface-skeleton__html-container {
 		flex-direction: column;
 
 		// Even on Mobile, we choose to scroll this element on its own.
-		// This helps enable a fixed-to-top toolbar that makes the editing experience
-		// on Mobile Safari usable.
+		// This helps enable a fixed-to-top toolbar that
+		// makes the editing experience on Mobile Safari usable.
 		// Unfortunately an issue still exists where if you swipe the top toolbar
 		// or beyond the bottom of the page when the soft keyboard is showing,
 		// you scroll the body element and can scroll the toolbar out of view.
@@ -70,7 +70,7 @@ html.nfd-sg-interface-skeleton__html-container {
 		// but if/when it is added, it should take care of the issue.
 		// See also: https://drafts.csswg.org/css-overscroll/
 		overscroll-behavior-y: none;
-		background: linear-gradient(to bottom left, #110c2d, #39122a, #060918);
+		background: #fff;
 
 		// Footer overlap prevention
 		.has-footer & {
@@ -79,6 +79,10 @@ html.nfd-sg-interface-skeleton__html-container {
 				padding-bottom: 24px + 1px;
 			}
 		}
+
+		&--dark {
+			background: linear-gradient(to bottom left, #110c2d, #39122a, #060918);
+		}
 	}
 
 	.nfd-sg-interface-skeleton__content {
@@ -94,8 +98,8 @@ html.nfd-sg-interface-skeleton__html-container {
 		// The sidebar should scroll independently, so enable scroll here also.
 		overflow: auto;
 
-		// On Safari iOS on smaller viewports lack of a z-index causes the background
-		// to "bleed" through the header.
+		// On Safari iOS on smaller viewports lack of a
+		// z-index causes the background to "bleed" through the header.
 		// See https://github.com/WordPress/gutenberg/issues/32631
 		z-index: 20;
 	}
@@ -170,7 +174,7 @@ html.nfd-sg-interface-skeleton__html-container {
 
 	.nfd-sg-interface-skeleton__actions {
 		z-index: 100000;
-		position: fixed !important; // Need to override the default relative positioning
+		position: fixed !important; // Need to override the default
 		top: -9999em;
 		bottom: auto;
 		left: auto;

src/SiteGenSPA/components/TextInput/index.js

@@ -0,0 +1,98 @@
+import classNames from 'classnames';
+import { addThemeSuffix } from '../../utils/helper';
+import { useRef, useEffect, useState, memo } from '@wordpress/element';
+
+const TextInput = ( {
+	hint,
+	height,
+	placeholder,
+	customerInput,
+	setCustomerInput,
+} ) => {
+	const textareaRef = useRef( null );
+	const [ inputText, setInputText ] = useState( 'nfd-sg-input-box__field' );
+
+	useEffect( () => {
+		textareaRef.current.style.height = height;
+		const scrollHeight = textareaRef.current.scrollHeight;
+		textareaRef.current.style.height = scrollHeight + 'px';
+	}, [ customerInput ] );
+
+	const calculateDetail = ( num ) => {
+		const selectedButton = addThemeSuffix(
+			'nfd-sg-input-box__info-icon--selected'
+		);
+		switch ( num ) {
+			case 1:
+				if ( customerInput?.length > 30 ) return selectedButton;
+				break;
+			case 2:
+				if ( customerInput?.length > 60 ) return selectedButton;
+				break;
+			case 3:
+				if ( customerInput?.length > 100 ) return selectedButton;
+		}
+	};
+
+	const onTextChange = ( e ) => {
+		e.preventDefault();
+		setCustomerInput( e.target.value );
+		setInputText( 'nfd-sg-input-box__field' );
+	};
+
+	return (
+		<div className={ addThemeSuffix( 'nfd-sg-input' ) }>
+			<label htmlFor={ inputText }>
+				<div className={ addThemeSuffix( 'nfd-sg-input-box' ) }>
+					<textarea
+						type="text"
+						className={ addThemeSuffix( inputText ) }
+						ref={ textareaRef }
+						style={ { height: '47px' } }
+						placeholder={ placeholder }
+						value={ customerInput }
+						onChange={ ( e ) => onTextChange( e ) }
+					/>
+				</div>
+				{ customerInput ? (
+					<div
+						className={ addThemeSuffix( 'nfd-sg-input-box__info' ) }
+					>
+						<div
+							className={ addThemeSuffix(
+								'nfd-sg-input-box__info-text'
+							) }
+						>
+							Detail
+						</div>
+						<div
+							className={ classNames(
+								addThemeSuffix( 'nfd-sg-input-box__info-icon' ),
+								calculateDetail( 1 )
+							) }
+						/>
+						<div
+							className={ classNames(
+								addThemeSuffix( 'nfd-sg-input-box__info-icon' ),
+								calculateDetail( 2 )
+							) }
+						/>
+						<div
+							className={ classNames(
+								addThemeSuffix( 'nfd-sg-input-box__info-icon' ),
+								calculateDetail( 3 )
+							) }
+						/>
+					</div>
+				) : (
+					<p className={ addThemeSuffix( 'nfd-sg-input-box__hint' ) }>
+						{ hint }
+					</p>
+				) }
+			</label>
+		</div>
+	);
+};
+
+const TextInputMemo = memo( TextInput );
+export default TextInputMemo;

src/SiteGenSPA/components/TextInput/stylesheet.scss

@@ -0,0 +1,78 @@
+$border: #d6d6d6;
+$letter-spacing: 0.5px;
+
+.nfd-sg-input {
+	margin-top: 25px;
+	margin-bottom: 25px;
+	width: 100% !important;
+
+	&-box {
+		margin-bottom: 10px;
+		border-bottom: 2px solid $border;
+
+		&__field {
+			padding-top: 10px;
+			font-size: 1.5rem;
+			background: transparent;
+			letter-spacing: $letter-spacing;
+
+			width: 100%;
+			resize: none;
+			border: none;
+			max-height: 150px;
+
+			&--dark {
+				color: #fff;
+			}
+
+			&:focus {
+				box-shadow: none;
+			}
+		}
+
+		&__hint {
+			margin-top: 30px;
+			font-weight: 300;
+			font-size: 0.87rem;
+			padding: 0 1.5px;
+			letter-spacing: $letter-spacing;
+
+			&--dark {
+				color: #fff;
+			}
+		}
+
+		&__info {
+			display: flex;
+			margin-top: 30px;
+			align-items: center;
+
+			&-text {
+				margin: 3px;
+				margin-right: 8px;
+				font-size: 0.87rem;
+
+				&--dark {
+					color: #fff;
+				}
+			}
+
+			&-icon {
+				width: 10px;
+				height: 6px;
+				margin: 3px;
+				border-radius: 6px;
+				background-color: #000;
+
+				&--dark {
+					background-color: #fff;
+				}
+
+				&--selected {
+					background-color: #1de082;
+				}
+			}
+		}
+	}
+
+}

src/SiteGenSPA/steps/CustomerDetail/contents.js

@@ -0,0 +1,17 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		heading: __(
+			'Tell me some details about the site you want created?',
+			'wp-module-onboarding'
+		),
+		inputPlaceholder: __(
+			'I want a site for my company that sells…',
+			'wp-module-onboarding'
+		),
+		inputHint: __( 'The more detail the better', 'wp-module-onboarding' ),
+	};
+};
+
+export default getContents;