Release/v1.0.0 polished

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 vendor
-.DS_Store
+.DS_Store
+.vscode

src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss

@@ -9,6 +9,7 @@ $main-color-light: var(--nfd-onboarding-white);
     margin-top: 16px;
     background: $main-color-light;
     border: 0.5px solid $white-offset;
+    cursor: not-allowed;
     width: clamp(15rem, 25vw, 35rem);
     box-shadow: 0px 2px 8px 2px rgba(204, 204, 204, 0.175295);
 }

src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss

@@ -28,6 +28,7 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb);
 			height: 100%;
 			display: flex;
 			position: absolute;
+			cursor: not-allowed;
 			align-items: center;
 			flex-direction: column;
 			background-color: $main-color-grey;

src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js

@@ -27,10 +27,11 @@ const SelectableCardWithInfo = ( {
 	};
 
 	return (
-		<div
-			className={ `${ className }` }
-		>
-			<div className={ `${ className }__live-preview-container` }>
+		<div className={ `${ className }` }>
+			<div
+				className={ `${ className }__live-preview-container` }
+				onClick={ () => handleCheck( ! selected ) }
+			>
 				<LivePreview
 					styling={ styling }
 					blockGrammer={ blockGrammer }

src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/stylesheet.scss

@@ -22,9 +22,14 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 		align-items: center;
 		border: 1px solid #e3dfdf;
 
+		&:hover {
+			cursor: pointer;
+		}
+
 		.live-preview {
 
 			&__container {
+
 				&-custom {
 					width: 100%;
 					overflow: hidden;
@@ -36,4 +41,3 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 	}
 }
 
-

src/OnboardingSPA/components/Loaders/Step/stylesheet.scss

@@ -1,5 +1,6 @@
 .step-loader {
 
+	cursor: wait;
 	justify-content: space-evenly;
 
 	@media (max-width: #{($break-medium)}) {

src/OnboardingSPA/components/MiniPreview/index.js

@@ -9,7 +9,7 @@ import { translations } from '../../utils/locales/translations';
  *
  * @returns
  */
-const MiniPreview = ({ title, desc, icon, socialData }) => {
+const MiniPreview = ({ title, desc, icon, socialData, isSocialFormOpen, setIsSocialFormOpen }) => {
 
     var iconPreview = icon == "" || icon == undefined ? content.icon : icon;
     var titlePreview = title == "" ? sprintf(__(content.title, 'wp-module-onboarding'), translations('Site')) : title;
@@ -70,13 +70,14 @@ const MiniPreview = ({ title, desc, icon, socialData }) => {
     }
 
     function socialIconList() {
-        var socialIconList = []
-        socialDataset.map( (socialInfo) => {
-                !socialInfo.url ||
-                socialIconList.push(
-                    <div key={socialInfo.image} className={`browser-content_social_icon ${isValidUrl(socialInfo.url) || 'invalid-url' }`} style={{ backgroundImage: socialInfo.image }} />)
-        })
-        return socialIconList;
+        return socialDataset.map( (socialInfo) => {
+            return (
+                <div key={socialInfo.image} 
+                    onClick={(e) => setIsSocialFormOpen(!isSocialFormOpen)}
+                    className={`browser-content_social_icon ${socialInfo.url ? isValidUrl(socialInfo.url) || '--invalid-url' : '--no-url' }`} 
+                    style={{ backgroundImage: socialInfo.image }} />
+                )
+            })
     }
 
     return (

src/OnboardingSPA/components/MiniPreview/stylesheet.scss

@@ -88,17 +88,26 @@ $title-browser-color: #3858E9;
         justify-content: flex-start;
 
         &_icon{
+            opacity: 1;
             width: 24px;
             height: 24px;
+            filter: none;
+            cursor: pointer;
             text-align: center;
             padding-right: 6px;
             background-position: center;
             background-repeat: no-repeat;
             background-clip: padding-box;
             transition: opacity 0.4s ease-in-out;
 
-            &.invalid-url {
-                opacity: 0.8;
+            &.--no-url {
+                opacity: 0.5;
+                filter: grayscale(1);
+            }
+
+            &.--invalid-url {
+                opacity: 0.75;
+                filter: none;
             }
         }
     }

src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js

@@ -0,0 +1,14 @@
+/**
+ * Renders Skeletons for Radio Control.
+ *
+ * @param {number} options       The options to be renedered
+ *
+ */
+const RadioControlSkeleton = ({ options }) => {
+
+    return <div className="radio-control-skeleton">
+            {options.map((option) => (<div className="radio-control-skeleton-item" />))}
+        </div>;
+};
+
+export default RadioControlSkeleton;

src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss

@@ -0,0 +1,22 @@
+/*COLOR VARIABLES*/
+$white-offset: rgb(224, 224, 224);
+$main-color-light: var(--nfd-onboarding-white);
+
+.radio-control {
+
+    &-main {
+        animation: fadeIn 300ms ease-in;
+    }
+
+    &-skeleton {
+        margin: 30px;
+
+        &-item {
+            height: 32px;
+            margin: 12px;
+            padding: 10px;
+            background: transparent;
+        }
+    }
+
+}

src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from '@wordpress/element';
+import RadioControlSkeleton from '../RadioControlSkeleton';
+
+/**
+ * A State Handler to manage Radio Control
+ *
+ * @param {number} options           The options to be renedered.
+ * @param {string} children          The children to be rendered out.
+ * @param {number} watch             The variable to be awaited for to be fetched.
+ *
+ */
+const RadioControlStateHandler = ({ options, watch, children }) => {
+    const [rerender, doRerender] = useState(0);
+
+    useEffect(() => doRerender(1), [watch]);
+
+    return !watch ? (
+        <RadioControlSkeleton options={options} />
+    ) : (
+        <>
+            {<div style={{ display: 'none' }}>{rerender}</div>}
+            {children}
+        </>
+    );
+};
+
+export default RadioControlStateHandler;

src/OnboardingSPA/components/RadioControl/index.js

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

src/OnboardingSPA/components/SocialMediaForm/index.js

@@ -4,8 +4,7 @@ import { useState, useEffect } from '@wordpress/element';
 
 import Tooltip from './../Tooltip'
 
-const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials }) => {
-    const [isActive, setIsActive] = useState(false);
+const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials, isSocialFormOpen, setIsSocialFormOpen }) => {
     const [facebook, setFacebook] = useState("");
     const [twitter, setTwitter] = useState("");
     const [instagram, setInstagram] = useState("");
@@ -105,11 +104,10 @@ const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials }) => {
             }
         }
 
-        setDataAndActiveErrorState( data, activeError);        
+        setDataAndActiveErrorState(data, socialInput, activeError);        
     }
 
-    const setDataAndActiveErrorState = (data, activeError) => {
-
+    const setDataAndActiveErrorState = (data, socialInput, activeError) => {
         if (!data){
             var activeErrorFiltered = activeError.filter(function (item) {
                 return item !== socialInput
@@ -131,7 +129,7 @@ const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials }) => {
     const checkValidUrlDebounce = _.debounce(checkValidUrl, 1000);
 
     const handleAccordion = (e) => {
-        setIsActive(!isActive);
+        setIsSocialFormOpen(!isSocialFormOpen);
     }
 
     const handleChange = (e) => {
@@ -222,9 +220,9 @@ const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials }) => {
                         'wp-module-onboarding'
                     )}
                 </div>
-                <div className={`social-form__top-row_icon ${isActive ? 'social-form__top-row_icon_opened' : ''}`}></div>
+                <div className={`social-form__top-row_icon ${isSocialFormOpen ? 'social-form__top-row_icon_opened' : ''}`}></div>
             </div>
-            <form className={isActive ? 'social-form__main-active' : 'social-form__main-hidden'} onSubmit={(e) => { handleSubmit(e) }}>
+            <form className={isSocialFormOpen ? 'social-form__main-active' : 'social-form__main-hidden'} onSubmit={(e) => { handleSubmit(e) }}>
                 {buildSocialBoxes()}
             </form>
         </div>

src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js

@@ -1,7 +1,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
+import { useState, useEffect, useRef } from '@wordpress/element';
 
 import content from './content.json';
 import TextInput from '../../../components/TextInput';
@@ -19,6 +19,7 @@ import { translations } from '../../../utils/locales/translations';
  * @return
  */
 const BasicInfoForm = () => {
+	const socialMediaRef = useRef(null);
 	const [ isError, setIsError ] = useState( false );
 	const [ flowData, setFlowData ] = useState();
 	const [ isLoaded, setisLoaded ] = useState( false );
@@ -29,6 +30,7 @@ const BasicInfoForm = () => {
 	const [ siteLogo, setSiteLogo ] = useState( 0 );
 	const [ socialData, setSocialData ] = useState( '' );
 	const [ isValidSocials, setIsValidSocials ] = useState( false );
+	const [ isSocialFormOpen, setIsSocialFormOpen ] = useState( false );
 
 	const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore );
 	const { editEntityRecord } = useDispatch( coreStore );
@@ -64,6 +66,11 @@ const BasicInfoForm = () => {
 		return dataToSave;
 	}
 
+	useEffect(() => {
+		if(isSocialFormOpen) 
+			socialMediaRef.current.scrollIntoView();
+	}, [isSocialFormOpen]);
+
 	useEffect( () => {
 		async function getFlowData() {
 			const socialDataAPI = await getSettings();
@@ -183,11 +190,13 @@ const BasicInfoForm = () => {
 						textValue={ siteDesc }
 						textValueSetter={ setSiteDesc }
 					/>
-					<div>
+					<div ref={socialMediaRef}>
 						<SocialMediaForm
 							socialData={ socialData }
 							setSocialData={ setSocialData }
+							isSocialFormOpen={ isSocialFormOpen }
 							setIsValidSocials={ setIsValidSocials }
+							setIsSocialFormOpen={ setIsSocialFormOpen }
 						/>
 					</div>
 				</div>
@@ -201,6 +210,8 @@ const BasicInfoForm = () => {
 						title={ siteTitle }
 						desc={ siteDesc }
 						socialData={ socialData }
+						isSocialFormOpen={ isSocialFormOpen } 
+						setIsSocialFormOpen={ setIsSocialFormOpen }
 					/>
 				</div>
 			</div>