Merge pull request #451 from UKHomeOfficeForms/add-hint-property-to-c…

…heckboxes Add hint property to checkboxes to align with govuk designs
UKHomeOfficeForms · Apr 24, 2024 · 1fd32be · 1fd32be
2 parents 206376c + e723060
commit 1fd32be
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 2024-04-24, Version 20.5.0 (Stable), @mislam987
+* Add hint property to checkboxes to align with govuk design guidelines
+
 ## 2024-02-29, Version 20.4.0 (Stable), @sulthan-ahmed
 * Update version of govuk-frontend to 3.15
 - this adds the new crown for the King

diff --git a/frontend/template-mixins/mixins/template-mixins.js b/frontend/template-mixins/mixins/template-mixins.js
@@ -319,6 +319,7 @@ module.exports = function (options) {
         error: this.errors && this.errors[key],
         invalid: this.errors && this.errors[key] && opts.required,
         label: t(fieldLabel || 'fields.' + key + '.label'),
+        hint: conditionalTranslate(getTranslationKey(field, key, 'hint')),
         selected: selected,
         className: classNames(field) || 'govuk-label govuk-checkboxes__label',
         child: field.child,

diff --git a/frontend/template-mixins/partials/forms/checkbox.html b/frontend/template-mixins/partials/forms/checkbox.html
@@ -6,6 +6,11 @@
             {{{label}}}
             {{#error}}<span class="visuallyhidden">{{error.message}}</span>{{/error}}
         </label>
+        {{#hint}}
+        <div id="{{key}}-hint" class="govuk-hint govuk-checkboxes__hint">
+          {{hint}}
+        </div>
+        {{/hint}}
     </div>
     {{#renderChild}}{{/renderChild}}
 </div>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "20.4.5",
+  "version": "20.5.0",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",