WEBDEV-7287 Add character counter to review form (#22)

* Tidy up styles to match original form

* Switch to ia-styles package and continue tidying styles

* Build out char counter

* Update copy

* Add localization

* Extract submit button disabling logic

* Remove unused if-check

* Also disable submisison if subject or review is empty

* Tidy up following CR

* Move font size declaration out of component

* TEMP - remove new tests to identify failure point

* Appease linter

* Re-add new tests

Author: rebecca-shoptaw

demo/app-root.ts

@@ -44,6 +44,9 @@ export class AppRoot extends LitElement {
   @state()
   private showErrors: boolean = false;
 
+  @state()
+  private useCharCounts: boolean = true;
+
   render() {
     return html`${!this.recaptchaManager
         ? html`<button
@@ -61,14 +64,19 @@ export class AppRoot extends LitElement {
         ${!this.bypassRecaptcha ? 'Bypass' : 'Enable'} ReCaptcha
       </button>
       <button @click=${() => (this.showErrors = !this.showErrors)}>
-        ${this.showErrors ? 'Hide' : 'Show'} Pre-filled Errors
+        ${this.showErrors ? 'Hide' : 'Show'} pre-filled errors
+      </button>
+      <button @click=${() => (this.useCharCounts = !this.useCharCounts)}>
+        ${this.useCharCounts ? 'Remove' : 'Use'} char count limits
       </button>
       <div class="container">
         <ia-review-form
           .identifier=${'goody'}
           .oldReview=${this.mockOldReview}
           .recaptchaManager=${this.recaptchaManager}
           .prefilledErrors=${this.showErrors ? this.errors : []}
+          .maxSubjectLength=${this.useCharCounts ? 100 : undefined}
+          .maxBodyLength=${this.useCharCounts ? 1000 : undefined}
           ?bypassRecaptcha=${this.bypassRecaptcha}
         ></ia-review-form>
       </div>`;
@@ -78,6 +86,7 @@ export class AppRoot extends LitElement {
     .container {
       max-width: 750px;
       margin: 10px auto;
+      font-size: 1.4rem;
     }
   `;
 }

package-lock.json

@@ -68,6 +68,7 @@
     ]
   },
   "dependencies": {
+    "@internetarchive/ia-styles": "^1.0.0",
     "@internetarchive/metadata-service": "^1.0.3",
     "@internetarchive/recaptcha-manager": "^1.0.0",
     "@lit/localize": "^0.12.2",