setIsSocialFormOpen(!isSocialFormOpen)}
+ className={`browser-content_social_icon ${socialInfo.url ? isValidUrl(socialInfo.url) || '--invalid-url' : '--no-url' }`}
+ style={{ backgroundImage: socialInfo.image }} />
+ )
+ })
}
return (
diff --git a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss
index 9f8098106..24dd803ab 100644
--- a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss
+++ b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss
@@ -88,8 +88,11 @@ $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;
@@ -97,8 +100,14 @@ $title-browser-color: #3858E9;
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;
}
}
}
diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
new file mode 100644
index 000000000..8160d73ce
--- /dev/null
+++ b/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
+ {options.map((option) => (
))}
+
;
+};
+
+export default RadioControlSkeleton;
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss
new file mode 100644
index 000000000..b31051c56
--- /dev/null
+++ b/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;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js
new file mode 100644
index 000000000..1a14ce86f
--- /dev/null
+++ b/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 ? (
+
+ ) : (
+ <>
+ {
{rerender}
}
+ {children}
+
+ );
+};
+
+export default RadioControlStateHandler;
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/RadioControl/index.js b/src/OnboardingSPA/components/RadioControl/index.js
new file mode 100644
index 000000000..f8741d0c3
--- /dev/null
+++ b/src/OnboardingSPA/components/RadioControl/index.js
@@ -0,0 +1,2 @@
+export { default as RadioControlSkeleton } from './RadioControlSkeleton';
+export { default as RadioControlStateHandler } from './RadioControlStateHandler';
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/SocialMediaForm/index.js b/src/OnboardingSPA/components/SocialMediaForm/index.js
index 340048175..16f24265e 100644
--- a/src/OnboardingSPA/components/SocialMediaForm/index.js
+++ b/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'
)}