Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Character count in Site Details #521

Merged
merged 12 commits into from
Apr 8, 2024
+38 −0
Merged

Character count in Site Details #521

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e701d66
Add a character count :1234:
officiallygod Mar 14, 2024
f5870cb
Using @wordpress/wordcount
officiallygod Mar 15, 2024
74aa96e
Remove `wordcount` package
officiallygod Apr 2, 2024
6583b35
Update package-lock.json
officiallygod Apr 2, 2024
b6d758b
Update package-lock.json
officiallygod Apr 2, 2024
1d373ce
Merge branch 'trunk' into add/word-count-in-details
officiallygod Apr 2, 2024
3e89ba9
Update index.js
officiallygod Apr 2, 2024
6b7f33a
Hide the count when satisfied.
officiallygod Apr 5, 2024
6bde218
CR Comments
officiallygod Apr 5, 2024
3b1a94f
Update
officiallygod Apr 5, 2024
3994651
Revert
officiallygod Apr 5, 2024
653bc99
Commit again cause apparently GitHub Broke
officiallygod Apr 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
setAnalysisScore( analysisResult );
setCustomerInputStrength( analysisResult );
setIsValidInput( analysisResult >= 2 );
}, [ customerInput ] );

Check warning on line 28 in src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

React Hook useEffect has missing dependencies: 'height', 'setCustomerInputStrength', and 'setIsValidInput'. Either include them or remove the dependency array. If 'setCustomerInputStrength' changes too often, find the parent component that defines it and wrap that definition in useCallback

const calculateAnalysisScore = ( input ) => {
/* Number of Characters in the input
Expand Down Expand Up @@ -54,6 +54,10 @@
}
};

const getRemainingCharacterCount = () => {
return Math.max( 200 - ( customerInput?.length ?? 0 ), 0 );
arunshenoy99 marked this conversation as resolved.
Show resolved Hide resolved
};

const onTextChange = ( e ) => {
e.preventDefault();
setCustomerInput( e.target.value );
Expand Down Expand Up @@ -90,6 +94,12 @@
onChange={ ( e ) => onTextChange( e ) }
/>
</div>
{
<p className={ 'nfd-sg-input-box__count' }>
{ getRemainingCharacterCount() }
officiallygod marked this conversation as resolved.
Show resolved Hide resolved
{ __( ' Characters left', 'wp-module-onboarding' ) }
officiallygod marked this conversation as resolved.
Show resolved Hide resolved
</p>
}
<div className={ 'nfd-sg-input-box_bottom' }>
{ customerInput ? (
<div className={ 'nfd-sg-input-box__info' }>
Expand Down
13 changes: 13 additions & 0 deletions src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading