hof 20.1.3 → 20.1.4

package/README.md

@@ -1530,6 +1530,7 @@ To render a specific fields in your templates use the mixin name (matching those
 - `required`: Value applied to `aria-required` HTML attribute.
 - `hint`: This adds context to the label, which it is a part of, for input text, radio groups and textarea. It is used within the input by aria-describedby for screen readers.
 - `maxlength`: Applicable to text-based fields and mapped to the `maxlength` HTML attribute.
+- `maxword`: Applicable to textarea fields.
 - `options`: Applicable to HTML `select` and `radio` controls and used to generate the items of either HTML element.
 - `selected`: Applicable to `select`, `checkbox`, and `radio` controls. Will render the selected HTML option/element selected or checked.
 - `legend`: Applicable to `radio` button controls, which are wrapped in a HTML `fieldset` with a `legend` element.

package/controller/validation/validators.js

@@ -62,6 +62,10 @@ module.exports = Validators = {
     return Validators.string(value) && (value === '' || value.length <= length);
   },
 
+  maxword(value, length) {
+    return Validators.string(value) && (value === '' || value.split(/\s+/).length <= length);
+  },
+
   exactlength(value, length) {
     return Validators.string(value) && (value === '' || value.length === length);
   },

package/frontend/template-mixins/mixins/template-mixins.js

@@ -42,6 +42,15 @@ module.exports = function (options) {
     return null;
   }
 
+  function maxword(field) {
+    const validation = field.validate || [];
+    const mw = _.findWhere(validation, { type: 'maxword' });
+    if (mw) {
+      return _.isArray(mw.arguments) ? mw.arguments[0] : mw.arguments;
+    }
+    return null;
+  }
+
   function type(field) {
     return field.type || 'text';
   }
@@ -208,6 +217,7 @@ module.exports = function (options) {
         hintId: extension.hintId || (hint ? key + '-hint' : null),
         error: this.errors && this.errors[key],
         maxlength: maxlength(field) || extension.maxlength,
+        maxword: maxword(field) || extension.maxword,
         required: required,
         pattern: extension.pattern,
         date: extension.date,
@@ -216,6 +226,7 @@ module.exports = function (options) {
         isPageHeading: field.isPageHeading,
         attributes: field.attributes,
         isPrefixOrSuffix: _.map(field.attributes, item => {if (item.prefix || item.suffix !== undefined) return true;}),
+        isMaxlengthOrMaxword: maxlength(field) || extension.maxlength || maxword(field) || extension.maxword,
         renderChild: renderChild.bind(this)
       });
     }

package/frontend/template-mixins/partials/forms/textarea-group.html

@@ -1,32 +1,35 @@
-{{#maxlength}}
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="{{maxlength}}">
-{{/maxlength}}
-<div id="{{id}}-group" class="{{#compound}}form-group-compound {{/compound}}{{#formGroupClassName}}{{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
-    {{#isPageHeading}}<h1 class="govuk-label-wrapper">{{/isPageHeading}}<label for="{{id}}" class="{{labelClassName}}{{#isPageHeading}}govuk-label--l{{/isPageHeading}}">
-        {{{label}}}
-        {{#error}} 
-        <p id="{{id}}-error" class="govuk-error-message">
-            <span id="{{id}}-error" class="govuk-visually-hidden">Error:</span>{{error.message}}
-          </p>
-        {{/error}}
-    </label>
-    {{#isPageHeading}}</h1>{{/isPageHeading}}
-    {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{hint}}</div>{{/hint}}
-    {{#renderChild}}{{/renderChild}}
-    <textarea
-        name="{{id}}"
-        id="{{id}}"
-        class="govuk-textarea{{#className}} {{className}}{{/className}} {{#maxlength}}maxlength{{/maxlength}}{{#error}} govuk-input--error{{/error}}"
-        aria-required="{{required}}"
-        {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
-        {{#attributes}}
-            {{attribute}}="{{value}}"
-        {{/attributes}}
-        {{^error}}{{#hintId}}{{#maxlength}} aria-describedby="{{id}}-maxlength-hint {{hintId}}"{{/maxlength}}{{/hintId}}{{/error}}
-        {{^error}}{{#hintId}}{{^maxlength}} aria-describedby="{{hintId}}"{{/maxlength}}{{/hintId}}{{/error}}
-        {{^error}}{{^hintId}}{{#maxlength}} aria-describedby="{{id}}-maxlength-hint"{{/maxlength}}{{/hintId}}{{/error}}
-        {{#error}} aria-invalid="true" aria-describedby="{{id}}-error"{{/error}}
-    >{{value}}</textarea>
-    {{#maxlength}}<div id="{{id}}-maxlength-hint" class="govuk-character-count__message" aria-live="polite">You have {{maxlength}} characters remaining</div>{{/maxlength}}
-</div>
-{{#maxlength}}</div>{{/maxlength}}
+{{#isMaxlengthOrMaxword}}<div class="govuk-character-count" data-module="govuk-character-count"
+    {{#maxlength}}data-maxlength="{{maxlength}}" {{/maxlength}} {{#maxword}}data-maxwords="{{maxword}}" {{/maxword}}>
+    {{/isMaxlengthOrMaxword}}
+    <div id="{{id}}-group" class="govuk-form-group {{#formGroupClassName}}{{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
+        {{#isPageHeading}}<h1 class="govuk-label-wrapper">{{/isPageHeading}}
+            <label for="{{id}}"
+                class="{{labelClassName}}{{#isPageHeading}}govuk-label--l{{/isPageHeading}}">
+                {{{label}}}
+                {{#error}}
+                <p id="{{id}}-error" class="govuk-error-message">
+                    <span id="{{id}}-error" class="govuk-visually-hidden">Error:</span>{{error.message}}
+                </p>
+                {{/error}}
+            </label>
+        {{#isPageHeading}}</h1>{{/isPageHeading}}
+        {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{hint}}</div>{{/hint}}
+        {{#renderChild}}{{/renderChild}}
+        <textarea name="{{id}}" id="{{id}}"
+            class="govuk-textarea {{#isMaxlengthOrMaxword}}govuk-js-character-count{{/isMaxlengthOrMaxword}} {{#className}}{{className}}{{/className}} {{#error}}govuk-input--error{{/error}}"
+            aria-describedby="{{id}}-info" 
+            {{#attributes}} 
+                {{attribute}}="{{value}}" 
+            {{/attributes}}
+            {{^error}}{{#hintId}}{{#maxlength}} aria-describedby="{{id}}-maxlength-hint {{hintId}}"{{/maxlength}}{{/hintId}}{{/error}}
+            {{^error}}{{#hintId}}{{^maxlength}} aria-describedby="{{hintId}}"{{/maxlength}}{{/hintId}}{{/error}}
+            {{^error}}{{^hintId}}{{#maxlength}}aria-describedby="{{id}}-maxlength-hint" {{/maxlength}}{{/hintId}}{{/error}}
+            {{#error}} aria-invalid="true" aria-describedby="{{id}}-error" {{/error}}
+            >{{value}}</textarea>
+        {{#isMaxlengthOrMaxword}}
+        <div id="{{id}}-info" class=" govuk-hint govuk-character-count__message" aria-live="polite">You have {{#maxlength}}{{maxlength}} characters{{/maxlength}}{{#maxword}}{{maxword}}
+            words{{/maxword}} remaining
+        </div>
+        {{/isMaxlengthOrMaxword}}
+    </div>
+{{#isMaxlengthOrMaxword}}</div>{{/isMaxlengthOrMaxword}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "20.1.3",
+  "version": "20.1.4",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
@@ -135,7 +135,7 @@
     "reporter": "spec",
     "require": "test/common.js",
     "recursive": "true",
-    "timeout": "6000",
+    "timeout": "7000",
     "exit": "true"
   },
   "resolutions": {

package/sandbox/apps/sandbox/fields.js

@@ -16,9 +16,6 @@ module.exports = {
   },
   name: {
     validate: ['required', 'notUrl', { type: 'maxlength', arguments: 200 }],
-    // need to remove this for the heading to go
-    labelClassName: ['govuk-label--l'],
-    isPageHeading: 'true'
   },
   'dateOfBirth': dateComponent('dateOfBirth', {
     mixin: 'input-date',
@@ -70,8 +67,6 @@ module.exports = {
     ]
   },
   email: {
-    isPageHeading: 'true',
-    labelClassName: ['govuk-label--l'],
     validate: ['required', 'email']
   },
   phone: {
@@ -95,11 +90,10 @@ module.exports = {
     mixin: 'textarea',
     // we want to ignore default formatters as we want
     // to preserve white space
-    isPageHeading: 'true',
     'ignore-defaults': true,
     // apply the other default formatters
     formatter: ['trim', 'hyphens'],
-    labelClassName: ['govuk-label--l'],
+    isPageHeading: 'true',
     // attributes here are passed to the field element
     validate: ['required', { type: 'maxlength', arguments: 10 }],
     attributes: [{
@@ -107,6 +101,21 @@ module.exports = {
       value: 8
     }]
   },
+  whatHappened: {
+    mixin: 'textarea',
+    // we want to ignore default formatters as we want
+    // to preserve white space
+    'ignore-defaults': true,
+    // apply the other default formatters
+    formatter: ['trim', 'hyphens'],
+    isPageHeading: 'true',
+    // attributes here are passed to the field element
+    validate: ['required', { type: 'maxword', arguments: 10 }],
+    attributes: [{
+      attribute: 'rows',
+      value: 8
+    }]
+  },
   appealStages: {
     mixin: 'select',
     isPageHeading: 'true',

package/sandbox/apps/sandbox/index.js

@@ -66,6 +66,10 @@ module.exports = {
     },
     '/text-input-area': {
       fields: ['complaintDetails'],
+      next: '/word-count'
+    },
+    '/word-count': {
+      fields: ['whatHappened'],
       next: '/select'
     },
     '/select':{ 

package/sandbox/apps/sandbox/sections/summary-data-sections.js

@@ -36,5 +36,8 @@ module.exports = {
   ],
   complaintDetails: [
     'complaintDetails'
+  ],
+  whatHappened: [
+    'whatHappened'
   ]
 };

package/sandbox/apps/sandbox/translations/src/en/fields.json

@@ -15,7 +15,7 @@
     }
   },
   "name": {
-    "label": "What is your full name?"
+    "label": "Full name"
   },
   "dateOfBirth": {
     "legend": "What is your date of birth?",
@@ -70,7 +70,7 @@
     } 
   },
   "email" : {
-    "label": "Enter your email address"
+    "label": "Email address"
   },
   "phone": {
     "label": "Phone number",
@@ -83,6 +83,10 @@
     "label": "Complaint details",
     "hint": "Briefly summarise your complaint. Include anything that can help our investigation."
   },
+  "whatHappened": {
+    "label": "What happened",
+    "hint": "Briefly summarise what happened."
+  },
   "countrySelect": {
     "label": "Which country are you based in?",
     "hint": "Start to type the country name and options will appear"

package/sandbox/apps/sandbox/translations/src/en/pages.json

@@ -10,6 +10,12 @@
     "header": "What is your address in the UK?",
     "intro": "If you have no fixed address, enter an address where we can contact you."
   },
+  "name": {
+    "header": "What is your full name?"
+  },
+  "email": {
+    "header": "Enter your email address"
+  },
   "phone-number": {
     "header": "Enter your phone number"
   },
@@ -36,6 +42,9 @@
       },
       "complaintDetails": {
         "header": "Complaint details"
+      },
+      "whatHappened": {
+        "header": "What happened"
       }
     }
   },

package/sandbox/apps/sandbox/translations/src/en/validation.json

@@ -44,6 +44,10 @@
     "default": "Enter details about why you are making a complaint",
     "maxlength": "Keep to the {{maxlength}} character limit"
   },
+  "whatHappened": {
+    "default": "Enter details about what happened",
+    "maxword": "Keep to the {{maxword}} word limit"
+  },
   "appealStages": {
     "required": "Select an appeal stage from the list"
   }