npm - hof - Versions diffs - 21.0.0-instrumentation-beta.0 → 21.0.0 - Mend

hof 21.0.0-instrumentation-beta.0 → 21.0.0

Files changed (115) hide show

package/frontend/govuk-template/build/govuk_template.html ADDED Viewed

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--[if lt IE 9]><html class="lte-ie8" lang="{{ htmlLang }}"><![endif]-->
+<!--[if gt IE 8]><!--><html lang="{{ htmlLang }}" class="govuk-template"><!--<![endif]-->
+  <head>
+    <meta charset="utf-8" />
+    <title>{{ pageTitle }}</title>
+    {{{ head }}}
+    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{assetPath}}images/favicon.ico" type="image/x-icon">
+      <link rel="mask-icon" href="{{assetPath}}images/govuk-mask-icon.svg" color="#0b0c0c">
+      <link rel="apple-touch-icon" sizes="180x180" href="{{assetPath}}images/govuk-apple-touch-icon-180x180.png">
+      <link rel="apple-touch-icon" sizes="167x167" href="{{assetPath}}images/govuk-apple-touch-icon-167x167.png">
+      <link rel="apple-touch-icon" sizes="152x152" href="{{assetPath}}images/govuk-apple-touch-icon-152x152.png">
+      <link rel="apple-touch-icon" href="{{assetPath}}images/govuk-apple-touch-icon.png">
+    <meta name="theme-color" content="#0b0c0c" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:image" content="{{assetPath}}images/opengraph-image.png">
+  </head>
+  <body class="{{ bodyClasses }} govuk-template__body  js-enabled" >
+    <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+    <div id="global-cookie-message" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet="">
+       {{{ cookieMessage }}}
+    </div>
+	{{{ bodyStart }}}
+    <header role="banner" id="govuk-header" class="{{{ headerClass }}}">
+      <div class="govuk-header__container govuk-width-container">
+          <div class="govuk-header__logo">
+            <a href="{{{ homepageUrl }}}" title="{{ logoLinkTitle }}" id="logo" class="govuk-header__link govuk-header__link--homepage" target="_blank" data-module="track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
+			<span class="govuk-header__logotype">
+				<!--[if gt IE 8]><!-->
+          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg\" viewBox="0 0 32 30" height="30" width="32">
+            <path fill="currentColor" fill-rule="evenodd"    d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8\"></path>
+          </svg>
+          <!--<![endif]-->
+          <!--[if IE 8]>
+          <img src="{{ assetPath }}images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
+          <![endif]-->
+			</span>
+				<span class="govuk-header__logotype-text">
+				  {{{ globalHeaderText }}}
+				</span>
+            </a>
+          </div>
+          {{{ insideHeader }}}
+        {{{ propositionHeader }}}
+      </div>
+    </header>
+    {{{ afterHeader }}}
+    {{{ content }}}
+    <footer class="govuk-footer" id="footer" role="contentinfo">
+      <div class="govuk-width-container">
+        {{{ footerTop }}}
+        <div class="govuk-footer__meta">
+          <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+		        <h2 class="govuk-visually-hidden">Support links</h2>
+            {{{ footerSupportLinks }}}
+			      <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+                <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
+            </svg>
+			      <span class="govuk-footer__licence-description">{{{ licenceMessage }}}</span>
+          </div>
+          <div class="govuk-footer__meta-item">
+            <a class="govuk-footer__link govuk-footer__copyright-logo" id="copyright-logo" target="_blank" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">{{{ crownCopyrightMessage }}}</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+    <div id="global-app-error" class="app-error hidden"></div>
+    {{{ bodyEnd }}}
+    <script {{#nonce}}nonce="{{nonce}}"{{/nonce}}>if (typeof window.GOVUK === 'undefined') document.body.className = document.body.className.replace('js-enabled', '');</script>
+  </body>
+</html>

package/frontend/govuk-template/build/index.js CHANGED Viewed

@@ -12,12 +12,12 @@ function addNonceValueAttributeToInlineScripts(compiledTemplateString) {
 }
 module.exports = () => {
-  const template = require.resolve('govuk_template_mustache/views/layouts/govuk_template.html');
+  const template = require.resolve('./govuk_template.html');
   const govukTemplate = fs.readFileSync(template, { encoding: 'utf-8' });
   const compiledTemplate = Hogan.compile(govukTemplate).render(govukConfig);
   const parsedTemplate = addNonceValueAttributeToInlineScripts(compiledTemplate);
-  const output = path.resolve(__dirname, '../govuk_template.html');
+  const output = path.resolve(__dirname, '../govuk_template_generated.html');
   fs.writeFileSync(output, parsedTemplate, { encoding: 'utf-8' });
 };

package/frontend/govuk-template/govuk_template_generated.html ADDED Viewed

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--[if lt IE 9]><html class="lte-ie8" lang="{{htmlLang}}"><![endif]-->
+<!--[if gt IE 8]><!--><html lang="{{htmlLang}}" class="govuk-template"><!--<![endif]-->
+  <head>
+    <meta charset="utf-8" />
+    <title>{{$pageTitle}}{{/pageTitle}}</title>
+    {{$head}}{{/head}}
+    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{govukAssetPath}}images/favicon.ico" type="image/x-icon">
+      <link rel="mask-icon" href="{{govukAssetPath}}images/govuk-mask-icon.svg" color="#0b0c0c">
+      <link rel="apple-touch-icon" sizes="180x180" href="{{govukAssetPath}}images/govuk-apple-touch-icon-180x180.png">
+      <link rel="apple-touch-icon" sizes="167x167" href="{{govukAssetPath}}images/govuk-apple-touch-icon-167x167.png">
+      <link rel="apple-touch-icon" sizes="152x152" href="{{govukAssetPath}}images/govuk-apple-touch-icon-152x152.png">
+      <link rel="apple-touch-icon" href="{{govukAssetPath}}images/govuk-apple-touch-icon.png">
+    <meta name="theme-color" content="#0b0c0c" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:image" content="{{govukAssetPath}}images/opengraph-image.png">
+  </head>
+  <body class="{{$bodyClasses}}{{/bodyClasses}} govuk-template__body  js-enabled" >
+    <script {{#nonce}}nonce="{{nonce}}"{{/nonce}}>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+    <div id="global-cookie-message" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet="">
+       {{$cookieMessage}}{{/cookieMessage}}
+    </div>
+	{{$bodyStart}}{{/bodyStart}}
+    <header role="banner" id="govuk-header" class="{{$headerClass}}{{/headerClass}}">
+      <div class="govuk-header__container govuk-width-container">
+          <div class="govuk-header__logo">
+            <a href="{{$homepageUrl}}https://www.gov.uk{{/homepageUrl}}" title="{{$logoLinkTitle}}Go to the GOV.UK homepage{{/logoLinkTitle}}" id="logo" class="govuk-header__link govuk-header__link--homepage" target="_blank" data-module="track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
+			<span class="govuk-header__logotype">
+				<!--[if gt IE 8]><!-->
+          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg\" viewBox="0 0 32 30" height="30" width="32">
+            <path fill="currentColor" fill-rule="evenodd"    d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8\"></path>
+          </svg>
+          <!--<![endif]-->
+          <!--[if IE 8]>
+          <img src="{{govukAssetPath}}images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
+          <![endif]-->
+			</span>
+				<span class="govuk-header__logotype-text">
+				  {{$globalHeaderText}}GOV.UK{{/globalHeaderText}}
+				</span>
+            </a>
+          </div>
+          {{$insideHeader}}{{/insideHeader}}
+        {{$propositionHeader}}{{/propositionHeader}}
+      </div>
+    </header>
+    {{$afterHeader}}{{/afterHeader}}
+    {{$main}}{{/main}}
+    <footer class="govuk-footer" id="footer" role="contentinfo">
+      <div class="govuk-width-container">
+        {{$footerTop}}{{/footerTop}}
+        <div class="govuk-footer__meta">
+          <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+		        <h2 class="govuk-visually-hidden">Support links</h2>
+            {{$footerSupportLinks}}{{/footerSupportLinks}}
+			      <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+                <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
+            </svg>
+			      <span class="govuk-footer__licence-description">{{$licenceMessage}}All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" id="open-government-licence" class="govuk-footer__link" target="_blank" rel="license">Open Government Licence v3.0</a>, except where otherwise stated{{/licenceMessage}}</span>
+          </div>
+          <div class="govuk-footer__meta-item">
+            <a class="govuk-footer__link govuk-footer__copyright-logo" id="copyright-logo" target="_blank" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">{{$crownCopyrightMessage}}© Crown copyright{{/crownCopyrightMessage}}</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+    <div id="global-app-error" class="app-error hidden"></div>
+    {{$bodyEnd}}{{/bodyEnd}}
+    <script  {{#nonce}}nonce="{{nonce}}"{{/nonce}}>if (typeof window.GOVUK === 'undefined') document.body.className = document.body.className.replace('js-enabled', '');</script>
+  </body>
+</html>

package/frontend/govuk-template/index.js CHANGED Viewed

@@ -5,18 +5,18 @@ const servestatic = require('serve-static');
 const Router = require('express').Router;
 const buildTemplateLayout = require('./build');
-const basedir = path.dirname(require.resolve('govuk_template_mustache/package.json'));
+const basedir = path.dirname(require.resolve('govuk-frontend/package.json'));
 const setup = (opts, router) => {
   buildTemplateLayout();
   const options = opts || {};
-  options.path = options.path || '/govuk-assets';
+  options.path = options.path || '/assets';
-  router.use(options.path, servestatic(path.join(basedir, './assets'), options));
+  router.use(options.path, servestatic(path.join(basedir, './govuk/assets'), options));
   router.use((req, res, next) => {
     res.locals.govukAssetPath = req.baseUrl + options.path + '/';
     res.locals.partials = res.locals.partials || {};
-    res.locals.partials['govuk-template'] = path.resolve(__dirname, './govuk_template');
+    res.locals.partials['govuk-template'] = path.resolve(__dirname, './govuk_template_generated');
     next();
   });

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

@@ -12,11 +12,13 @@ const renderer = require('./render');
 const PANELMIXIN = 'partials/mixins/panel';
 const PARTIALS = [
   'partials/forms/input-text-group',
+  'partials/forms/input-text-date',
   'partials/forms/input-submit',
   'partials/forms/select',
   'partials/forms/checkbox',
   'partials/forms/textarea-group',
-  'partials/forms/option-group'
+  'partials/forms/option-group',
+  'partials/forms/checkbox-group'
 ];
 // This returns a middleware that places mixins against the `res.locals` object.
@@ -40,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';
   }
@@ -191,6 +202,7 @@ module.exports = function (options) {
       const lKey = getTranslationKey(field, key, 'label');
       const hint = conditionalTranslate(hKey);
       const required = isRequired(field);
+      const labelClassName = classNames(field, 'labelClassName');
       const autocomplete = field.autocomplete || extension.autocomplete;
       return Object.assign({}, extension, {
@@ -199,18 +211,22 @@ module.exports = function (options) {
         type: extension.type || type(field),
         value: this.values && this.values[key],
         label: t(lKey),
-        labelClassName: classNames(field, 'labelClassName') || 'form-label',
-        formGroupClassName: classNames(field, 'formGroupClassName') || extension.formGroupClassName || 'form-group',
+        labelClassName: labelClassName ? `govuk-label ${labelClassName}` : 'govuk-label',
+        formGroupClassName: classNames(field, 'formGroupClassName') || extension.formGroupClassName || 'govuk-form-group',
         hint: hint,
         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,
         autocomplete: autocomplete,
         child: field.child,
+        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)
       });
     }
@@ -219,7 +235,8 @@ module.exports = function (options) {
       opts = opts || {};
       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) {
@@ -236,7 +253,10 @@ module.exports = function (options) {
         legend: t(legendValue),
         legendClassName: legendClassName,
         role: opts.type === 'radio' ? 'radiogroup' : 'group',
-        ariaRequired: opts.type === 'radio',
+        isPageHeading: field.isPageHeading,
+        isWarning: field.isWarning,
+        warning: t(warningValue),
+        detail: detail ? detail : '',
         hint: conditionalTranslate(getTranslationKey(field, key, 'hint')),
         options: _.map(field.options, function (obj) {
           let selected = false;
@@ -245,6 +265,7 @@ module.exports = function (options) {
           let toggle;
           let child;
           let optionHint;
+          let useHintText;
           if (typeof obj === 'string') {
             value = obj;
@@ -255,6 +276,7 @@ module.exports = function (options) {
             label = obj.label || 'fields.' + key + '.options.' + obj.value + '.label';
             toggle = obj.toggle;
             child = obj.child;
+            useHintText = obj.useHintText;
             optionHint = obj.hint || 'fields.' + key + '.options.' + obj.value + '.hint';
           }
@@ -270,9 +292,10 @@ module.exports = function (options) {
             value: value,
             type: opts.type,
             selected: selected,
+            radioOption: opts.type === 'radio',
             toggle: toggle,
             child: child,
-            optionHint: conditionalTranslate(optionHint) || ''
+            optionHint: useHintText ? optionHint : conditionalTranslate(optionHint) || ''
           };
         }, this),
         className: classNames(field),
@@ -296,8 +319,9 @@ 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) || 'block-label',
+        className: classNames(field) || 'govuk-label govuk-checkboxes__label',
         child: field.child,
         renderChild: renderChild.bind(this)
       });
@@ -355,7 +379,7 @@ module.exports = function (options) {
         }
       },
       'checkbox-group': {
-        path: 'partials/forms/option-group',
+        path: 'partials/forms/checkbox-group',
         renderWith: optionGroup,
         options: {
           type: 'checkbox'
@@ -425,16 +449,21 @@ module.exports = function (options) {
                 year: autocomplete + '-year'
               };
             }
+            const isThisRequired = field.validate ? field.validate.indexOf('required') > -1 : false;
+            const formGroupClassName = (field.formGroup && field.formGroup.className) ? field.formGroup.className : '';
+            const classNameDay = (field.controlsClass && field.controlsClass.day) ? field.controlsClass.day : 'govuk-date-input__input govuk-input--width-2';
+            const classNameMonth = (field.controlsClass && field.controlsClass.month) ? field.controlsClass.month : 'govuk-date-input__input govuk-input--width-2';
+            const classNameYear = (field.controlsClass && field.controlsClass.year) ? field.controlsClass.year : 'govuk-date-input__input govuk-input--width-4';
             const parts = [];
             if (isExact) {
-              const dayPart = compiled['partials/forms/input-text-group'].render(inputText.call(this, key + '-day', { pattern: '[0-9]*', min: 1, max: 31, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.day }));
+              const dayPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-day', { pattern: '[0-9]*', min: 1, max: 31, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.day, formGroupClassName, className: classNameDay, isThisRequired }));
               parts.push(dayPart);
             }
-            const monthPart = compiled['partials/forms/input-text-group'].render(inputText.call(this, key + '-month', { pattern: '[0-9]*', min: 1, max: 12, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.month }));
-            const yearPart = compiled['partials/forms/input-text-group'].render(inputText.call(this, key + '-year', { pattern: '[0-9]*', maxlength: 4, hintId: key + '-hint', date: true, formGroupClassName: 'form-group-year', autocomplete: autocomplete.year }));
+            const monthPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-month', { pattern: '[0-9]*', min: 1, max: 12, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.month, formGroupClassName, className: classNameMonth, isThisRequired }));
+            const yearPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-year', { pattern: '[0-9]*', maxlength: 4, hintId: key + '-hint', date: true, autocomplete: autocomplete.year, formGroupClassName, className: classNameYear, isThisRequired }));
             return parts.concat(monthPart, yearPart).join('\n');
           };

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

@@ -0,0 +1,47 @@
+<div id="{{key}}-group" class="govuk-form-group{{#className}} {{className}} {{/className}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
+    <fieldset class="govuk-fieldset" {{#hint}} aria-describedby="{{key}}-hint"{{/hint}}>
+        <legend class="govuk-fieldset__legend {{#isPageHeading}}govuk-fieldset__legend--l{{/isPageHeading}}{{#legendClassName}} {{legendClassName}}{{/legendClassName}}">
+            {{#isPageHeading}}<h1 class="govuk-fieldset__heading">{{/isPageHeading}}
+                {{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}}
+        </span>
+        {{/error}}
+        {{{detail}}}
+		<div class="govuk-checkboxes" data-module="govuk-checkboxes">
+        {{#options}}
+        <div class="govuk-checkboxes__item">
+            <input
+				class="govuk-checkboxes__input"
+                type="{{type}}"
+                name="{{key}}"
+                id="{{key}}-{{value}}"
+                value="{{value}}"
+                {{#toggle}} data-toggle="{{toggle}}"{{/toggle}}
+                {{#selected}} checked="checked"{{/selected}}
+                {{^error}}{{#optionHint}} aria-describedby="{{key}}-{{value}}-hint"{{/optionHint}}{{^optionHint}}{{#hint}} aria-describedby="{{key}}-hint"{{/hint}}{{/optionHint}}{{/error}}
+                {{#error}} aria-describedby="{{key}}-error" aria-invalid="true"{{/error}}
+            >
+            <label class="govuk-label govuk-checkboxes__label" for="{{key}}-{{value}}">
+                {{{label}}}
+                {{#optionHint}}<div id="{{key}}-{{value}}-item-hint" class="govuk-hint">{{optionHint}}</div>{{/optionHint}}
+            </label>
+        </div>
+        {{#renderChild}}{{/renderChild}}
+        {{/options}}
+		</div>
+    </fieldset>
+</div>

package/frontend/template-mixins/partials/forms/checkbox.html CHANGED Viewed

@@ -1,11 +1,16 @@
-<div id="{{key}}-group" class="form-group{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} validation-error{{/error}}">
-    {{#error}}<p class="error-message" aria-hidden="true">{{error.message}}</p>{{/error}}
-    <div class="multiple-choice">
-        <input type="checkbox" id="{{key}}" name="{{key}}" value="true" aria-required="{{required}}"{{#error}} aria-invalid="true"{{/error}}{{^error}}{{#toggle}} data-toggle="{{toggle}}"{{/toggle}}{{#selected}} checked="checked"{{/selected}}{{/error}}>
+<div id="{{key}}-group" class="govuk-form-group {{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
+    {{#error}}<p class="govuk-error-message" aria-hidden="true">{{error.message}}</p>{{/error}}
+    <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" type="checkbox" id="{{key}}" name="{{key}}" value="true" aria-required="{{required}}"{{#error}} aria-invalid="true"{{/error}}{{^error}}{{#toggle}} data-toggle="{{toggle}}"{{/toggle}}{{#selected}} checked="checked"{{/selected}}{{/error}}>
         <label for="{{key}}" class="{{#className}}{{className}} {{/className}}{{#invalid}}invalid-input{{/invalid}}">
             {{{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>

package/frontend/template-mixins/partials/forms/input-submit.html CHANGED Viewed

	@@ -1 +1 @@
1	- <input type="submit" {{#id}}id="{{id}}"{{/id}} value="{{{value}}}" class="button">
1	+ <input type="submit" {{#id}}id="{{id}}"{{/id}} value="{{{value}}}" class="govuk-button">

package/frontend/template-mixins/partials/forms/input-text-date.html ADDED Viewed

@@ -0,0 +1,37 @@
+<div class="govuk-date-input__item">
+    <div id="{{id}}-group" class="{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}">
+      <label for="{{id}}" class="{{labelClassName}}">
+          <span class="label-text">{{{label}}}</span>
+      </label>
+      {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{hint}}</span>{{/hint}}
+      {{#renderChild}}{{/renderChild}}
+          {{#attributes}}
+              {{#prefix}}
+                  <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
+              {{/prefix}}
+          {{/attributes}}
+          <input
+              type="{{type}}"
+              name="{{id}}"
+              id="{{id}}"
+              class="govuk-input{{#className}} {{className}}{{/className}}{{#error}} govuk-input--error{{/error}}"
+              aria-required="{{required}}"
+              {{#value}} value="{{value}}"{{/value}}
+              {{#min}} min="{{min}}"{{/min}}
+              {{#max}} max="{{max}}"{{/max}}
+              {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
+              {{#pattern}} pattern="{{pattern}}"{{/pattern}}
+              {{#hintId}} aria-describedby="{{hintId}}"{{/hintId}}
+              {{#error}} aria-invalid="true"{{/error}}
+              {{#autocomplete}} autocomplete="{{autocomplete}}"{{/autocomplete}}
+              {{#attributes}}
+                  {{attribute}}="{{value}}"
+              {{/attributes}}
+          >
+          {{#attributes}}
+              {{#suffix}}
+                  <div class="govuk-input__prefix" aria-hidden="true">{{suffix}}</div>
+              {{/suffix}}
+          {{/attributes}}
+    </div>
+</div>

package/frontend/template-mixins/partials/forms/input-text-group.html CHANGED Viewed

@@ -1,11 +1,16 @@
-<div id="{{id}}-group" class="form-group{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{^date}}{{#error}} validation-error{{/error}}{{/date}}">
-    <label for="{{id}}" class="{{labelClassName}}">
-        <span class="label-text">{{{label}}}</span>
-        {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="form-hint">{{hint}}</span>{{/hint}}
-        {{^date}}{{#error}}<span class="error-message">{{error.message}}</span>{{/error}}{{/date}}
-    </label>
+<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}}}
+      </label>
+    {{#isPageHeading}}</h1>{{/isPageHeading}}
+    {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{hint}}</span>{{/hint}}
+    {{#error}}
+      <p class="govuk-error-message">
+        <span class="govuk-visually-hidden">Error:</span> {{error.message}}
+      </p>
+    {{/error}}
     {{#renderChild}}{{/renderChild}}
-    <div class="govuk-input__wrapper">
+    {{#isPrefixOrSuffix}}<div class="govuk-input__wrapper">{{/isPrefixOrSuffix}}
         {{#attributes}}
             {{#prefix}}
                 <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
@@ -15,7 +20,7 @@
             type="{{type}}"
             name="{{id}}"
             id="{{id}}"
-            class="form-control{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}"
+            class="{{^className}}govuk-input{{/className}}{{#className}}{{className}}{{/className}}{{#error}} govuk-input--error{{/error}}"
             aria-required="{{required}}"
             {{#value}} value="{{value}}"{{/value}}
             {{#min}} min="{{min}}"{{/min}}
@@ -31,8 +36,8 @@
         >
         {{#attributes}}
             {{#suffix}}
-                <div class="govuk-input__prefix" aria-hidden="true">{{suffix}}</div>
+                <div class="govuk-input__suffix" aria-hidden="true">{{suffix}}</div>
             {{/suffix}}
         {{/attributes}}
-    </div>
+    {{#isPrefixOrSuffix}}</div>{{/isPrefixOrSuffix}}
 </div>