Make Character Count use hint component for message and allow custom …

CHANGELOG.md

@@ -4,6 +4,12 @@
 
 ### New features
 
+#### Add classes to the character count component's count message
+
+If you're using Nunjucks, you can now add classes to the character count component's count message using the `countMessage.classes` option.
+
+- [Pull request #1650: Make Character Count use hint component for message and allow custom classes to be added](https://github.com/alphagov/govuk-frontend/pull/1650)
+
 ### Fixes
 
 - [Pull request #1655: Ensure components use public `govuk-media-query` mixin](https://github.com/alphagov/govuk-frontend/pull/1655).

src/govuk/components/character-count/__snapshots__/template.test.js.snap

@@ -10,7 +10,7 @@ exports[`Character count when it includes a hint renders with hint 1`] = `
       class="govuk-hint govuk-character-count__message"
       aria-live="polite"
 >
-  You can enter up to  characters
+  You can enter up to 10 characters
 </span>
 `;
 

src/govuk/components/character-count/character-count.yaml

@@ -59,7 +59,15 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the textarea.
-
+- name: countMessage
+  type: object
+  required: false
+  description: Options for the count message
+  params:
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the count message
 
 examples:
   - name: default

src/govuk/components/character-count/template.njk

@@ -1,4 +1,5 @@
 {% from "../textarea/macro.njk" import govukTextarea %}
+{% from "../hint/macro.njk" import govukHint %}
 
 <div class="govuk-character-count" data-module="govuk-character-count"
 {%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %}
@@ -24,7 +25,12 @@
     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>
+  {{ govukHint({
+    text: 'You can enter up to ' + (params.maxlength or params.maxwords) + (' words' if params.maxwords else ' characters'),
+    id: params.id + '-info',
+    classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes),
+    attributes: {
+      'aria-live': 'polite'
+    }
+  }) }}
 </div>

src/govuk/components/character-count/template.test.js

@@ -95,10 +95,61 @@ describe('Character count', () => {
     })
   })
 
+  describe('count message', () => {
+    it('renders with the amount of characters expected', () => {
+      const $ = render('character-count', {
+        maxlength: 10
+      })
+
+      const $countMessage = $('.govuk-character-count__message')
+      expect($countMessage.text()).toContain('You can enter up to 10 characters')
+    })
+    it('renders with the amount of words expected', () => {
+      const $ = render('character-count', {
+        maxwords: 10
+      })
+
+      const $countMessage = $('.govuk-character-count__message')
+      expect($countMessage.text()).toContain('You can enter up to 10 words')
+    })
+    it('is associated with the textarea', () => {
+      const $ = render('character-count', {
+        maxlength: 10
+      })
+
+      const $textarea = $('.govuk-js-character-count')
+      const $countMessage = $('.govuk-character-count__message')
+
+      const hintId = new RegExp(
+        WORD_BOUNDARY + $countMessage.attr('id') + WORD_BOUNDARY
+      )
+
+      expect($textarea.attr('aria-describedby'))
+        .toMatch(hintId)
+    })
+    it('renders with custom classes', () => {
+      const $ = render('character-count', {
+        countMessage: {
+          classes: 'app-custom-count-message'
+        }
+      })
+
+      const $countMessage = $('.govuk-character-count__message')
+      expect($countMessage.hasClass('app-custom-count-message')).toBeTruthy()
+    })
+    it('renders with aria live set to polite', () => {
+      const $ = render('character-count', {})
+
+      const $countMessage = $('.govuk-character-count__message')
+      expect($countMessage.attr('aria-live')).toEqual('polite')
+    })
+  })
+
   describe('when it includes a hint', () => {
     it('renders with hint', () => {
       const $ = render('character-count', {
         id: 'character-count-with-hint',
+        maxlength: 10,
         hint: {
           text: 'It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.'
         }