diff --git a/src/OnboardingSPA/components/OrbAnimation/index.js b/src/OnboardingSPA/components/OrbAnimation/index.js index d8c1141b9..6c37536ed 100644 --- a/src/OnboardingSPA/components/OrbAnimation/index.js +++ b/src/OnboardingSPA/components/OrbAnimation/index.js @@ -1,3 +1,5 @@ +import { useEffect } from '@wordpress/element'; + const OrbAnimation = ( { height = '80px' } ) => { // Inline style to handle custom properties const logoStyle = { @@ -5,6 +7,42 @@ const OrbAnimation = ( { height = '80px' } ) => { height: `var(--wnd-ai-logo-size, ${ height })`, }; + useEffect( () => { + document + .querySelectorAll( '[data-wnd-ai-logo]' ) + .forEach( function ( input ) { + let keyIsDown = false; + let animationFrameId = null; + + const toggleClass = () => { + if ( keyIsDown ) { + document.body.classList.add( 'wnd-ai-logo-keydown' ); + } else { + document.body.classList.remove( 'wnd-ai-logo-keydown' ); + } + animationFrameId = null; + }; + + input.addEventListener( 'keydown', function () { + if ( ! keyIsDown ) { + keyIsDown = true; + if ( ! animationFrameId ) { + animationFrameId = + window.requestAnimationFrame( toggleClass ); + } + } + } ); + + input.addEventListener( 'keyup', function () { + keyIsDown = false; + if ( ! animationFrameId ) { + animationFrameId = + window.requestAnimationFrame( toggleClass ); + } + } ); + } ); + }, [] ); + return ( diff --git a/src/OnboardingSPA/components/OrbAnimation/stylesheet.scss b/src/OnboardingSPA/components/OrbAnimation/stylesheet.scss index 05264031a..fcbd77e28 100644 --- a/src/OnboardingSPA/components/OrbAnimation/stylesheet.scss +++ b/src/OnboardingSPA/components/OrbAnimation/stylesheet.scss @@ -186,12 +186,16 @@ body.wnd-ai-logo-loading .wnd-ai-logo { } /* Focus & Hover */ -body:has([data-wnd-ai-logo]:focus) .wnd-ai-logo, body:not(.wnd-ai-logo-loading) .wnd-ai-logo:hover { transform: scale(1.05); filter: brightness(1.35) saturate(1.5); } +body:has([data-wnd-ai-logo]:focus) .wnd-ai-logo { + transform: scale(1.2); + filter: brightness(1.35) saturate(1.5); +} + /* Keydown */ body.wnd-ai-logo-keydown .wnd-ai-logo.wnd-ai-logo { transform: scale(1.1); diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js index 59756e436..4675e6a9d 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js @@ -78,6 +78,7 @@ const TextInputSiteGen = ( {