Add optional Welsh language support to the Character Count component

package/components/character-count/macro-options.json

@@ -79,5 +79,11 @@
         "type": "object",
         "required": false,
         "description": "HTML attributes (for example data attributes) to add to the textarea."
+    },
+    {
+        "name": "welsh",
+        "type": "boolean",
+        "required": false,
+        "description": "If set to true the count message is displayed in Welsh (default is in English)."
     }
 ]

src/components/character-count/README.md

@@ -27,7 +27,9 @@ Find out when to use the character count component in your service in the [GOV.U
     </div>
 
       <span id="more-detail-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 characters
+
+          You can enter up to 10 characters
+
       </span>
     </div>
 
@@ -65,7 +67,9 @@ Find out when to use the character count component in your service in the [GOV.U
     </div>
 
       <span id="with-hint-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 characters
+
+          You can enter up to 10 characters
+
       </span>
     </div>
 
@@ -105,7 +109,9 @@ Find out when to use the character count component in your service in the [GOV.U
     </div>
 
       <span id="with-default-value-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 100 characters
+
+          You can enter up to 100 characters
+
       </span>
     </div>
 
@@ -147,7 +153,9 @@ Find out when to use the character count component in your service in the [GOV.U
     </div>
 
       <span id="exceeding-characters-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 characters
+
+          You can enter up to 10 characters
+
       </span>
     </div>
 
@@ -185,7 +193,9 @@ Find out when to use the character count component in your service in the [GOV.U
     </div>
 
       <span id="custom-rows-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 characters
+
+          You can enter up to 10 characters
+
       </span>
     </div>
 
@@ -223,7 +233,9 @@ Find out when to use the character count component in your service in the [GOV.U
     </div>
 
       <span id="textarea-with-page-heading-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 characters
+
+          You can enter up to 10 characters
+
       </span>
     </div>
 
@@ -258,7 +270,9 @@ Find out when to use the character count component in your service in the [GOV.U
     </div>
 
       <span id="word-count-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 words
+
+          You can enter up to 10 words
+
       </span>
     </div>
 
@@ -292,7 +306,9 @@ Find out when to use the character count component in your service in the [GOV.U
     </div>
 
       <span id="with-threshold-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 characters
+
+          You can enter up to 10 characters
+
       </span>
     </div>
 
@@ -310,6 +326,84 @@ Find out when to use the character count component in your service in the [GOV.U
       }
     }) }}
 
+### Character count (Cymraeg)
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/(Cymraeg)/preview)
+
+#### Markup
+
+    <div class="govuk-character-count" data-module="character-count" data-maxlength="10" data-welsh="true">
+
+    <div class="govuk-form-group">
+      <h1 class="govuk-label-wrapper">
+        <label class="govuk-label" for="textarea-in-welsh">
+          Cyfeiriad llawn
+        </label>
+
+      </h1>
+
+      <textarea class="govuk-textarea js-character-count " id="textarea-in-welsh" name="address-in-welsh" rows="5"></textarea>
+    </div>
+
+      <span id="textarea-in-welsh-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
+
+          Mi cewch cofnodi fyny at 10 cymeriad
+
+      </span>
+    </div>
+
+#### Macro
+
+    {% from "character-count/macro.njk" import govukCharacterCount %}
+
+    {{ govukCharacterCount({
+      "id": "textarea-in-welsh",
+      "name": "address-in-welsh",
+      "maxlength": 10,
+      "welsh": true,
+      "label": {
+        "text": "Cyfeiriad llawn",
+        "isPageHeading": true
+      }
+    }) }}
+
+### Character count with word count (Cymraeg)
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-word-count-(Cymraeg)/preview)
+
+#### Markup
+
+    <div class="govuk-character-count" data-module="character-count" data-maxwords="10" data-welsh="true">
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="word-count-in-welsh">
+        Cyfeiriad llawn
+      </label>
+
+      <textarea class="govuk-textarea js-character-count " id="word-count-in-welsh" name="word-count-in-welsh" rows="5"></textarea>
+    </div>
+
+      <span id="word-count-in-welsh-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
+
+          Mi cewch cofnodi fyny at 10 gair
+
+      </span>
+    </div>
+
+#### Macro
+
+    {% from "character-count/macro.njk" import govukCharacterCount %}
+
+    {{ govukCharacterCount({
+      "id": "word-count-in-welsh",
+      "name": "word-count-in-welsh",
+      "maxwords": 10,
+      "welsh": true,
+      "label": {
+        "text": "Cyfeiriad llawn"
+      }
+    }) }}
+
 ## Requirements
 
 ### Build tool configuration

src/components/character-count/character-count.js

@@ -9,7 +9,8 @@ function CharacterCount ($module) {
 
 CharacterCount.prototype.defaults = {
   characterCountAttribute: 'data-maxlength',
-  wordCountAttribute: 'data-maxwords'
+  wordCountAttribute: 'data-maxwords',
+  welshAttribute: 'data-welsh'
 }
 
 // Initialize component
@@ -26,12 +27,26 @@ CharacterCount.prototype.init = function () {
 
   // Determine the limit attribute (characters or words)
   var countAttribute = this.defaults.characterCountAttribute
+  var units = 'characters'
   if (this.options.maxwords) {
     countAttribute = this.defaults.wordCountAttribute
+    units = 'words'
   }
 
   // Save the element limit
   this.maxLength = $module.getAttribute(countAttribute)
+  this.rawUnderLimitMessage = 'You have ? ' + units + ' remaining'
+  this.rawOverLimitMessage = 'You have ? ' + units + ' too many'
+
+  if ($module.getAttribute(this.defaults.welshAttribute)) {
+    units = 'cymeriad'
+    if (this.options.maxwords) {
+      units = 'gair'
+    }
+
+    this.rawUnderLimitMessage = 'Mae ganddoch ? ' + units + ' yn weddill'
+    this.rawOverLimitMessage = 'Mae ganddoch ? ' + units + ' yn ormod'
+  }
 
   // Check for limit
   if (!this.maxLength) {
@@ -138,6 +153,8 @@ CharacterCount.prototype.updateCountMessage = function () {
   var currentLength = this.count(countElement.value)
   var maxLength = this.maxLength
   var remainingNumber = maxLength - currentLength
+  var rawUnderLimitMessage = this.rawUnderLimitMessage
+  var rawOverLimitMessage = this.rawOverLimitMessage
 
   // Set threshold if presented in options
   var thresholdPercent = options.threshold ? options.threshold : 0
@@ -160,18 +177,8 @@ CharacterCount.prototype.updateCountMessage = function () {
   }
 
   // Update message
-  var charVerb = 'remaining'
-  var charNoun = 'character'
-  var displayNumber = remainingNumber
-  if (options.maxwords) {
-    charNoun = 'word'
-  }
-  charNoun = charNoun + ((remainingNumber === -1 || remainingNumber === 1) ? '' : 's')
-
-  charVerb = (remainingNumber < 0) ? 'too many' : 'remaining'
-  displayNumber = Math.abs(remainingNumber)
-
-  countMessage.innerHTML = 'You have ' + displayNumber + ' ' + charNoun + ' ' + charVerb
+  var displayNumber = Math.abs(remainingNumber)
+  countMessage.innerHTML = remainingNumber < 0 ? rawOverLimitMessage.replace('?', displayNumber) : rawUnderLimitMessage.replace('?', displayNumber)
 }
 
 CharacterCount.prototype.handleFocus = function () {

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

@@ -135,3 +135,22 @@ examples:
       threshold: 75
       label:
         text: Full address
+
+  - name: (Cymraeg)
+    data:
+      id: textarea-in-welsh
+      name: address-in-welsh
+      maxlength: 10
+      welsh: true
+      label:
+        text: Cyfeiriad llawn
+        isPageHeading: true
+
+  - name: with word count (Cymraeg)
+    data:
+      id: word-count-in-welsh
+      name: word-count-in-welsh
+      maxwords: 10
+      welsh: true
+      label:
+        text: Cyfeiriad llawn

src/components/character-count/template.njk

@@ -6,7 +6,8 @@
 <div class="govuk-character-count" data-module="character-count"
 {%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %}
 {%- if params.threshold %} data-threshold="{{ params.threshold }}"{% endif %}
-{%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}>
+{%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}
+{%- if params.welsh %} data-welsh="{{ params.welsh }}"{% endif %}>
   {{ govukTextarea({
     id: params.id,
     name: params.name,
@@ -27,6 +28,10 @@
     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' }}
+    {% if params.welsh %}
+      Mi cewch cofnodi fyny at {{ params.maxlength or params.maxwords }} {{'gair' if params.maxwords else 'cymeriad' }}
+    {% else %}
+      You can enter up to {{ params.maxlength or params.maxwords }} {{'words' if params.maxwords else 'characters' }}
+    {% endif %}
   </span>
 </div>

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

@@ -156,6 +156,18 @@ describe('Character count', () => {
     })
   })
 
+  describe('when it is set to Welsh', () => {
+    it('renders with welsh data attribute', () => {
+      const $ = render('character-count', {
+        id: 'character-count-in-welsh',
+        welsh: true
+      })
+
+      const $component = $('.govuk-character-count')
+      expect($component.attr('data-welsh')).toEqual('true')
+    })
+  })
+
   describe('with dependant components', () => {
     it('have correct nesting order', () => {
       const $ = render('character-count', {