Add non-broken fallback text when maxlength/maxwords is 0

this may become more common as we allow customising the attribute in JavaScript now.

The wording may need to be reviewed, but we should output something under the field in any case to avoid a layout shift when the JavaScript kicks in. Unfortunately, before JavaScript kicks in, we can't tell if it'll be characters or words (nor the limit)

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

@@ -269,3 +269,9 @@ examples:
       name: address
       label:
         text: Full address
+  - name: no maximum
+    data:
+      id: no-maximum
+      name: no-maximum
+      label:
+        text: Full address

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

@@ -27,7 +27,13 @@
     attributes: params.attributes
   }) }}
   {%- set fallbackHintLength = params.maxwords or params.maxlength %}
-  {%- set fallbackHintDefault = 'You can enter up to %{count} ' + ('words' if params.maxwords else 'characters') %}
+  {%- set fallbackHintDefault -%}
+    {%- if fallbackHintLength -%}
+      You can enter up to %{count} {{ ('words' if params.maxwords else 'characters') }}
+    {%- else -%}
+      You can enter a limited amount of content
+    {%- endif -%}
+  {%- endset -%}
   {{ govukHint({
     text: (params.fallbackHintText or fallbackHintDefault) | replace('%{count}', fallbackHintLength),
     id: params.id + '-info',

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

@@ -228,4 +228,13 @@ describe('Character count', () => {
       expect($component.attr('data-threshold')).toEqual('75')
     })
   })
+
+  describe('no maximum', () => {
+    it('shows an error message that does not look broken', () => {
+      const $ = render('character-count', examples['no maximum'])
+
+      const $countMessage = $('.govuk-character-count__message')
+      expect($countMessage.text()).toContain('You can enter a limited amount of content')
+    })
+  })
 })