Character count in Site Details

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;

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 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,7 +29,10 @@
 		setAnalysisScore( analysisResult );
 		setCustomerInputStrength( analysisResult );
 		setIsValidInput( analysisResult >= 2 );
+		setRemainingCharacterCount(
+			Math.max( 200 - ( customerInput?.length ?? 0 ), 0 )
+		);
 	}, [ customerInput ] );
 
 	const calculateAnalysisScore = ( input ) => {
 		/* Number of Characters in the input
@@ -90,6 +97,11 @@
 						onChange={ ( e ) => onTextChange( e ) }
 					/>
 				</div>
+				{ remainingCharacterCount > 0 && (
+					<p className={ 'nfd-sg-input-box__count' }>
+						{ content.characterCount }
+					</p>
+				) }
 				<div className={ 'nfd-sg-input-box_bottom' }>
 					{ customerInput ? (
 						<div className={ 'nfd-sg-input-box__info' }>

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;