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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1471,6 +1471,8 @@ To render a specific fields in your templates use the mixin name (matching those
1471
1471
  - `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.
1472
1472
  - `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"`.
1473
1473
  - `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.
1474
+ - `isPageHeading`: Applicable to `checkbox` and `radio` controls. Sets the legend as the page heading on single page questions.
1475
+ - `isWarning`: Applicable to `checkbox` and `radio` controls. Allows warning text to be placed after page headings on single page questions if required.
1474
1476
 
1475
1477
 
1476
1478
  # HOF-template-partials
@@ -224,6 +224,7 @@ module.exports = function (options) {
224
224
  const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
225
225
  const legend = field.legend;
226
226
  const detail = field.detail;
227
+ const warningValue = 'fields.' + key + '.warning';
227
228
  let legendClassName;
228
229
  let legendValue = 'fields.' + key + '.legend';
229
230
  if (legend) {
@@ -241,6 +242,8 @@ module.exports = function (options) {
241
242
  legendClassName: legendClassName,
242
243
  role: opts.type === 'radio' ? 'radiogroup' : 'group',
243
244
  isPageHeading: field.isPageHeading,
245
+ isWarning: field.isWarning,
246
+ warning: t(warningValue),
244
247
  detail: detail ? detail : '',
245
248
  hint: conditionalTranslate(getTranslationKey(field, key, 'hint')),
246
249
  options: _.map(field.options, function (obj) {
@@ -5,6 +5,15 @@
5
5
  {{legend}}
6
6
  {{#isPageHeading}}</h1>{{/isPageHeading}}
7
7
  </legend>
8
+ {{#isWarning}}
9
+ <div class="govuk-warning-text">
10
+ <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
11
+ <strong class="govuk-warning-text__text">
12
+ <span class="govuk-warning-text__assistive">Warning</span>
13
+ {{warning}}
14
+ </strong>
15
+ </div>
16
+ {{/isWarning}}
8
17
  {{#hint}}<div id="{{key}}-hint" class="govuk-hint">{{hint}}</div>{{/hint}}
9
18
  {{#error}}
10
19
  <p id="{{key}}-error" class="govuk-error-message">
@@ -5,6 +5,15 @@
5
5
  {{legend}}
6
6
  {{#isPageHeading}}</h1>{{/isPageHeading}}
7
7
  </legend>
8
+ {{#isWarning}}
9
+ <div class="govuk-warning-text">
10
+ <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
11
+ <strong class="govuk-warning-text__text">
12
+ <span class="govuk-warning-text__assistive">Warning</span>
13
+ {{warning}}
14
+ </strong>
15
+ </div>
16
+ {{/isWarning}}
8
17
  {{#hint}}<div id="{{key}}-hint" class="govuk-hint">{{hint}}</div>{{/hint}}
9
18
  {{#error}}<p id="{{key}}-error" class="govuk-error-message"><span class="govuk-visually-hidden">Error:</span> {{error.message}}</p>{{/error}}
10
19
  {{{detail}}}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "hof",
3
3
  "description": "A bootstrap for HOF projects",
4
- "version": "20.0.0-beta.14",
4
+ "version": "20.0.0-beta.15",
5
5
  "license": "MIT",
6
6
  "main": "index.js",
7
7
  "author": "HomeOffice",
package/sandbox/server.js CHANGED
@@ -13,6 +13,5 @@ bootstrap({
13
13
  active: true
14
14
  }
15
15
  },
16
- getAccessibility: true,
17
- "port": 8082
16
+ getAccessibility: true
18
17
  });