diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/contents.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/contents.js new file mode 100644 index 000000000..b23be3f56 --- /dev/null +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/contents.js @@ -0,0 +1,13 @@ +import { __, sprintf } from '@wordpress/i18n'; + +const getContents = ( characterCount ) => { + return { + characterCount: sprintf( + /* translators: 1: characterCount */ + __( '%d Characters left', 'wp-module-onboarding' ), + characterCount + ), + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js index 122876aa8..e2651ce7e 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js @@ -1,6 +1,7 @@ import classNames from 'classnames'; import { __ } from '@wordpress/i18n'; import { useRef, useEffect, useState, memo } from '@wordpress/element'; +import getContents from './contents'; const TextInputSiteGen = ( { hint, @@ -16,6 +17,9 @@ const TextInputSiteGen = ( { const textareaRef = useRef( null ); const [ analysisScore, setAnalysisScore ] = useState( 0 ); const [ inputText, setInputText ] = useState( 'nfd-sg-input-box__field' ); + const [ remainingCharacterCount, setRemainingCharacterCount ] = + useState( 0 ); + const content = getContents( remainingCharacterCount ); useEffect( () => { textareaRef.current.style.height = height; @@ -25,6 +29,9 @@ const TextInputSiteGen = ( { setAnalysisScore( analysisResult ); setCustomerInputStrength( analysisResult ); setIsValidInput( analysisResult >= 2 ); + setRemainingCharacterCount( + Math.max( 200 - ( customerInput?.length ?? 0 ), 0 ) + ); }, [ customerInput ] ); const calculateAnalysisScore = ( input ) => { @@ -90,6 +97,11 @@ const TextInputSiteGen = ( { onChange={ ( e ) => onTextChange( e ) } /> + { remainingCharacterCount > 0 && ( +

+ { content.characterCount } +

+ ) }
{ customerInput ? (
diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss index edc1a6f30..030a010de 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss @@ -33,6 +33,19 @@ $selected-detail: #1de082; } } + &__count { + margin: 3px; + text-align: end; + font-size: 0.87rem; + animation: fadeIn 100ms ease-in; + color: var(--nfd-onboarding-primary); + + @media (prefers-reduced-motion) { + animation: none !important; + } + } + + &__hint { font-weight: 300; font-size: 0.87rem;