npm - hof - Versions diffs - 19.14.3 → 20.0.0-beta.3 - Mend

hof 19.14.3 → 20.0.0-beta.3

Files changed (92) hide show

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

@@ -0,0 +1,104 @@
+<!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>
+    <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">
+    {{{ head }}}
+    <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 132 97" height="30" width="36">
+            <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
+          </svg>
+          <!--<![endif]-->
+         <!--<![endif]-->
+          <!--[if IE 8]>
+          <img src="{{ assetPath }}images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
+          <![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,104 @@
+<!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>
+    <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">
+    {{$head}}{{/head}}
+    <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 132 97" height="30" width="36">
+            <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
+          </svg>
+          <!--<![endif]-->
+         <!--<![endif]-->
+          <!--[if IE 8]>
+          <img src="{{govukAssetPath}}images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
+          <![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.
@@ -191,6 +193,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,8 +202,8 @@ 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],
@@ -210,6 +213,7 @@ module.exports = function (options) {
         date: extension.date,
         autocomplete: autocomplete,
         child: field.child,
+        noHeading: field.noHeading,
         attributes: field.attributes,
         renderChild: renderChild.bind(this)
       });
@@ -219,7 +223,7 @@ 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;
       let legendClassName;
       let legendValue = 'fields.' + key + '.legend';
       if (legend) {
@@ -236,7 +240,8 @@ module.exports = function (options) {
         legend: t(legendValue),
         legendClassName: legendClassName,
         role: opts.type === 'radio' ? 'radiogroup' : 'group',
-        ariaRequired: opts.type === 'radio',
+        noHeading: field.noHeading,
+        detail: detail ? detail : '',
         hint: conditionalTranslate(getTranslationKey(field, key, 'hint')),
         options: _.map(field.options, function (obj) {
           let selected = false;
@@ -270,6 +275,7 @@ module.exports = function (options) {
             value: value,
             type: opts.type,
             selected: selected,
+            radioOption: opts.type === 'radio',
             toggle: toggle,
             child: child,
             optionHint: conditionalTranslate(optionHint) || ''
@@ -355,7 +361,7 @@ module.exports = function (options) {
         }
       },
       'checkbox-group': {
-        path: 'partials/forms/option-group',
+        path: 'partials/forms/checkbox-group',
         renderWith: optionGroup,
         options: {
           type: 'checkbox'
@@ -425,16 +431,21 @@ module.exports = function (options) {
                 year: autocomplete + '-year'
               };
             }
+            const isRequired = 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, isRequired }));
               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, isRequired }));
+            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, isRequired }));
             return parts.concat(monthPart, yearPart).join('\n');
           };

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

@@ -0,0 +1,38 @@
+<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 {{^noHeading}}govuk-fieldset__legend--l{{/noHeading}}{{#legendClassName}} {{legendClassName}}{{/legendClassName}}">
+            {{^noHeading}}<h1 class="govuk-fieldset__heading">{{/noHeading}}
+                {{legend}}
+            {{^noHeading}}</h1>{{/noHeading}}
+        </legend>
+        {{#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 govuk-radios__hint">{{optionHint}}</div>{{/optionHint}}
+            </label>
+        </div>
+        {{#renderChild}}{{/renderChild}}
+        {{/options}}
+		</div>
+    </fieldset>
+</div>

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

@@ -1,7 +1,7 @@
-<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}}

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}} invalid-input{{/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,15 @@
-<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}}">
+    {{^noHeading}}<h1 class="govuk-label-wrapper">{{/noHeading}}<label for="{{id}}" class="{{labelClassName}}">
+        {{{label}}}
+      </label>
+    {{^noHeading}}</h1>{{/noHeading}}
+    {{#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">
         {{#attributes}}
             {{#prefix}}
                 <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
@@ -15,7 +19,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}} invalid-input{{/error}}"
             aria-required="{{required}}"
             {{#value}} value="{{value}}"{{/value}}
             {{#min}} min="{{min}}"{{/min}}
@@ -34,5 +38,4 @@
                 <div class="govuk-input__prefix" aria-hidden="true">{{suffix}}</div>
             {{/suffix}}
         {{/attributes}}
-    </div>
 </div>

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

@@ -1,27 +1,34 @@
-<div id="{{key}}-group" class="form-group{{#className}} {{className}} {{/className}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} validation-error{{/error}}">
-    <fieldset role="{{role}}"{{#ariaRequired}} aria-required="true"{{/ariaRequired}}{{#hint}} aria-describedby="{{key}}-hint"{{/hint}}>
-        <legend>
-            <span{{#legendClassName}} class="{{legendClassName}}"{{/legendClassName}}>{{legend}}</span>
-            {{#hint}}<span id="{{key}}-hint" class="form-hint">{{hint}}</span>{{/hint}}
-            {{#error}}<span id="{{key}}-error" class="error-message">{{error.message}}</span>{{/error}}
-        </legend>
-        {{#options}}
-            <label class="block-label" for="{{key}}-{{value}}">
-                <input
-                    type="{{type}}"
-                    name="{{key}}"
-                    id="{{key}}-{{value}}"
-                    value="{{value}}"
-                    required="true"
-                    {{#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}}}
-                {{#optionHint}}<span id="{{key}}-{{value}}-hint" class="form-hint">{{optionHint}}</span>{{/optionHint}}
-            </label>
-            {{#renderChild}}{{/renderChild}}
-        {{/options}}
-    </fieldset>
+<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 {{^noHeading}}govuk-fieldset__legend--l{{/noHeading}}{{#legendClassName}} {{legendClassName}}{{/legendClassName}}">
+          {{^noHeading}}<h1 class="govuk-fieldset__heading">{{/noHeading}}
+              {{legend}}
+          {{^noHeading}}</h1>{{/noHeading}}
+      </legend>
+      {{#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}}}
+  <div class="govuk-radios" data-module="govuk-radios">
+      {{#options}}
+      <div class="govuk-radios__item">
+          <input
+      class="govuk-radios__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-radios__label" for="{{key}}-{{value}}">
+              {{{label}}}
+              {{#optionHint}}<div id="{{key}}-{{value}}-item-hint" class="govuk-hint govuk-radios__hint">{{optionHint}}</div>{{/optionHint}}
+          </label>
+      </div>
+      {{#renderChild}}{{/renderChild}}
+      {{/options}}
+  </div>
+  </fieldset>
 </div>

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

@@ -1,10 +1,15 @@
-<div id="{{id}}-group" class="form-group{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} validation-error{{/error}}">
-    <label for="{{id}}" class="{{labelClassName}}">
+<div id="{{id}}-group" class="{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
+    {{^noHeading}}<h1 class="govuk-label-wrapper">{{/noHeading}}<label for="{{id}}" class="{{labelClassName}}{{^noHeading}}govuk-label--l{{/noHeading}}">
         {{{label}}}
-        {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="form-hint">{{hint}}</span>{{/hint}}
-        {{#error}}<span class="error-message">{{error.message}}</span>{{/error}}
+        {{#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}}
     </label>
-    <select id="{{id}}" class="form-control{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}" name="{{id}}" aria-required="{{required}}">
+    {{^noHeading}}</h1>{{/noHeading}}
+    <select id="{{id}}" class="govuk-select{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}" name="{{id}}" aria-required="{{required}}">
     {{#options}}
         <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
     {{/options}}

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

@@ -1,14 +1,22 @@
-<div id="{{id}}-group" class="form-group{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} validation-error{{/error}}">
-    <label for="{{id}}" class="{{labelClassName}}">
+{{#maxlength}}
+<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="{{maxlength}}">
+{{/maxlength}}
+<div id="{{id}}-group" class="{{#compound}}form-group-compound {{/compound}}{{#formGroupClassName}}{{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
+    {{^noHeading}}<h1 class="govuk-label-wrapper">{{/noHeading}}<label for="{{id}}" class="{{labelClassName}}">
         {{{label}}}
-        {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="form-hint">{{hint}}</span>{{/hint}}
-        {{#error}}<span id="{{id}}-error" class="error-message">{{error.message}}</span>{{/error}}
+        {{#error}}
+        <p id="{{id}}-error" class="govuk-error-message">
+            <span id="{{id}}-error" class="govuk-visually-hidden">Error:</span>{{error.message}}
+          </p>
+        {{/error}}
     </label>
+    {{^noHeading}}</h1>{{/noHeading}}
+    {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{hint}}</div>{{/hint}}
     {{#renderChild}}{{/renderChild}}
     <textarea
         name="{{id}}"
         id="{{id}}"
-        class="form-control{{#className}} {{className}}{{/className}} {{#maxlength}}maxlength{{/maxlength}}{{#error}} invalid-input{{/error}}"
+        class="govuk-textarea{{#className}} {{className}}{{/className}} {{#maxlength}}maxlength{{/maxlength}}{{#error}} invalid-input{{/error}}"
         aria-required="{{required}}"
         {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
         {{#attributes}}
@@ -19,5 +27,6 @@
         {{^error}}{{^hintId}}{{#maxlength}} aria-describedby="{{id}}-maxlength-hint"{{/maxlength}}{{/hintId}}{{/error}}
         {{#error}} aria-invalid="true" aria-describedby="{{id}}-error"{{/error}}
     >{{value}}</textarea>
-    {{#maxlength}}<span id="{{id}}-maxlength-hint" class="maxlength-hint form-hint" aria-live="polite">You can enter up to {{maxlength}} characters</span>{{/maxlength}}
+    {{#maxlength}}<div id="{{id}}-maxlength-hint" class="govuk-character-count__message" aria-live="polite">You have {{maxlength}} characters remaining</div>{{/maxlength}}
 </div>
+{{#maxlength}}</div>{{/maxlength}}