Add default message

alphagov · Oct 9, 2018 · 7b534bf · 7b534bf
1 parent 2c3a5f0
commit 7b534bf
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/src/components/character-count/__snapshots__/template.test.js.snap b/src/components/character-count/__snapshots__/template.test.js.snap
@@ -7,6 +7,12 @@ exports[`Character count when it includes a hint renders with hint 1`] = `
 >
   It&#x2019;s on your National Insurance card, benefit letter, payslip or P60. For example, &#x2018;QQ 12 34 56 C&#x2019;.
 </span>
+<span id="character-count-with-hint-info"
+      class="govuk-hint govuk-character-count__message"
+      aria-live="polite"
+>
+  You can enter up to  characters
+</span>
 
 `;
 

diff --git a/src/components/character-count/_character-count.scss b/src/components/character-count/_character-count.scss
@@ -8,6 +8,7 @@
 
 @include govuk-exports("govuk/component/character-count") {
   .govuk-character-count {
+    .govuk-form-group,
     .govuk-textarea {
       margin-bottom: govuk-spacing(1);
     }

diff --git a/src/components/character-count/template.njk b/src/components/character-count/template.njk
@@ -30,4 +30,7 @@
     errorMessage: params.errorMessage,
     attributes: params.attributes
   }) }}
+  <span id="{{ params.id }}-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
+    You can enter up to {{ params.maxlength or params.maxwords }} {{'words' if params.maxwords else 'characters' }}
+  </span>
 </div>