hof 20.0.0-beta.12 → 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) {
@@ -303,7 +306,7 @@ module.exports = function (options) {
         invalid: this.errors && this.errors[key] && opts.required,
         label: t(fieldLabel || 'fields.' + key + '.label'),
         selected: selected,
-        className: classNames(field) || 'block-label',
+        className: classNames(field) || 'govuk-label govuk-checkboxes__label',
         child: field.child,
         renderChild: renderChild.bind(this)
       });

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/frontend/themes/gov-uk/styles/govuk.scss

@@ -14,8 +14,7 @@ $path: "/public/images/" !default;
 
 // Govuk frontend
 // https://github.com/alphagov/govuk-frontend-docs
-// @import "node_modules/govuk-frontend/govuk/all";
-@import "../../../../node_modules/govuk-frontend/govuk/all";
+@import "node_modules/govuk-frontend/govuk/all";
 
 // Custom
 @import "base";

package/package.json

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

package/sandbox/assets/scss/app.scss

@@ -1,6 +1,5 @@
 
 @import "../../../frontend/themes/gov-uk/styles/govuk";
-@import "../../../node_modules/govuk-frontend/govuk/all";
 
 //autocomplete styling
 .tt-menu {

package/sandbox/package.json

@@ -15,6 +15,7 @@
   },
   "author": "",
   "dependencies": {
+    "govuk-frontend": "3.14",
     "jquery": "^3.6.0",
     "sass": "^1.53.0",
     "typeahead-aria": "^1.0.4"

package/sandbox/server.js

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

package/sandbox/yarn.lock

@@ -287,6 +287,11 @@ got@^9.6.0:
     to-readable-stream "^1.0.0"
     url-parse-lax "^3.0.0"
 
+govuk-frontend@3.14:
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/govuk-frontend/-/govuk-frontend-3.14.0.tgz#d3a9c54437c08f5188f87b1f4480ba60e95c8eb6"
+  integrity sha512-y7FTuihCSA8Hty+e9h0uPhCoNanCAN+CLioNFlPmlbeHXpbi09VMyxTcH+XfnMPY4Cp++7096v0rLwwdapTXnA==
+
 graceful-fs@^4.1.2:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"