hof 20.0.0-beta.14 → 20.0.0-beta.15

package/README.md

@@ -1471,6 +1471,8 @@ To render a specific fields in your templates use the mixin name (matching those
 - `toggle`: Can be used to toggle the display of the HTML element with a matching `id`. See [hof-frontend-toolkit](https://github.com/UKHomeOfficeForms/hof-frontend-toolkit/blob/master/assets/javascript/progressive-reveal.js) for details.
 - `attributes`: A hash of key/value pairs applicable to a HTML `textarea` field. Each key/value is assigned as an attribute of the `textarea`. For example `spellcheck="true"`.
 - `child`: Render a child partial beneath each option in an `optionGroup`. Accepts a custom mustache template string, a custom partial in the format `partials/{your-partial-name}`, `'html'` which is used to specify the html for the field has already been prerendered, such as in [hof-component-date](https://github.com/UKHomeOfficeForms/hof-component-date) or a template mixin key which will be rendered within a panel element partial.
+- `isPageHeading`: Applicable to `checkbox` and `radio` controls. Sets the legend as the page heading on single page questions.
+- `isWarning`: Applicable to `checkbox` and `radio` controls. Allows warning text to be placed after page headings on single page questions if required.
 
 
 # HOF-template-partials

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

@@ -224,6 +224,7 @@ module.exports = function (options) {
       const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
       const legend = field.legend;
       const detail = field.detail;
+      const warningValue = 'fields.' + key + '.warning';
       let legendClassName;
       let legendValue = 'fields.' + key + '.legend';
       if (legend) {
@@ -241,6 +242,8 @@ module.exports = function (options) {
         legendClassName: legendClassName,
         role: opts.type === 'radio' ? 'radiogroup' : 'group',
         isPageHeading: field.isPageHeading,
+        isWarning: field.isWarning,
+        warning: t(warningValue),
         detail: detail ? detail : '',
         hint: conditionalTranslate(getTranslationKey(field, key, 'hint')),
         options: _.map(field.options, function (obj) {

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

@@ -5,6 +5,15 @@
                 {{legend}}
             {{#isPageHeading}}</h1>{{/isPageHeading}}
         </legend>
+        {{#isWarning}}
+        <div class="govuk-warning-text">
+            <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+            <strong class="govuk-warning-text__text">
+              <span class="govuk-warning-text__assistive">Warning</span>
+             {{warning}}
+            </strong>
+          </div>
+        {{/isWarning}}
         {{#hint}}<div id="{{key}}-hint" class="govuk-hint">{{hint}}</div>{{/hint}}
         {{#error}}
         <p id="{{key}}-error" class="govuk-error-message">

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

@@ -5,6 +5,15 @@
               {{legend}}
           {{#isPageHeading}}</h1>{{/isPageHeading}}
       </legend>
+      {{#isWarning}}
+        <div class="govuk-warning-text">
+            <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+            <strong class="govuk-warning-text__text">
+              <span class="govuk-warning-text__assistive">Warning</span>
+             {{warning}}
+            </strong>
+          </div>
+        {{/isWarning}}
       {{#hint}}<div id="{{key}}-hint" class="govuk-hint">{{hint}}</div>{{/hint}}
       {{#error}}<p id="{{key}}-error" class="govuk-error-message"><span class="govuk-visually-hidden">Error:</span> {{error.message}}</p>{{/error}}
       {{{detail}}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "20.0.0-beta.14",
+  "version": "20.0.0-beta.15",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",

package/sandbox/server.js

@@ -13,6 +13,5 @@ bootstrap({
       active: true
     }
   },
-  getAccessibility: true,
-  "port": 8082
+  getAccessibility: true
 });