hof 20.0.0-beta.1 → 20.0.0-beta.4

package/components/date/index.js

@@ -40,6 +40,7 @@ const conditionalTranslate = (key, translate) => {
 };
 
 const getLegendClassName = field => field && field.legend && field.legend.className || '';
+const getNoHeading = field => field && field.noHeading || '';
 
 module.exports = (key, opts) => {
   if (!key) {
@@ -113,8 +114,9 @@ module.exports = (key, opts) => {
     const legend = conditionalTranslate(`fields.${key}.legend`, req.translate);
     const hint = conditionalTranslate(`fields.${key}.hint`, req.translate);
     const legendClassName = getLegendClassName(options);
+    const noHeading = getNoHeading(options);
     const error = req.form.errors && req.form.errors[key];
-    res.render(template, { key, legend, legendClassName, hint, error }, (err, html) => {
+    res.render(template, { key, legend, legendClassName, noHeading, hint, error }, (err, html) => {
       if (err) {
         next(err);
       } else {

package/components/date/templates/date.html

@@ -1,9 +1,9 @@
 <div class="govuk-form-group {{#error}}govuk-form-group--error{{/error}}">
 <fieldset id="{{key}}-group" class="govuk-fieldset{{#className}} {{className}}{{/className}}" role="group">
-  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l{{#legendClassName}} {{legendClassName}}{{/legendClassName}}">
-    <h1 class="govuk-fieldset__heading">
+  <legend class="govuk-fieldset__legend {{^noHeading}}govuk-fieldset__legend--l{{/noHeading}}{{#legendClassName}} {{legendClassName}}{{/legendClassName}}">
+    {{^noHeading}}<h1 class="govuk-fieldset__heading">{{/noHeading}}
       {{legend}}
-    </h1>
+    {{^noHeading}}</h1>{{/noHeading}}
   </legend>
     {{#hint}}
       <span id="{{key}}-hint" class="govuk-hint">{{hint}}</span>

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

@@ -240,7 +240,6 @@ 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')),
@@ -276,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) || ''

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

@@ -1,6 +1,6 @@
 <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 govuk-fieldset__legend--l{{#legendClassName}} {{legendClassName}}{{/legendClassName}}">
+        <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}}

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

@@ -19,7 +19,7 @@
             type="{{type}}"
             name="{{id}}"
             id="{{id}}"
-            class="govuk-input{{#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}}

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

@@ -1,6 +1,6 @@
 <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 govuk-fieldset__legend--l{{#legendClassName}} {{legendClassName}}{{/legendClassName}}">
+      <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}}

package/frontend/template-mixins/partials/mixins/panel.html

@@ -1,5 +1,5 @@
-<div id="{{toggle}}-panel" class="reveal js-hidden">
-    <div class="govuk-inset-text">
-        {{#renderMixin}}{{/renderMixin}}
-    </div>
+<div id="{{toggle}}-panel"
+  class="{{#radioOption}}govuk-radios__conditional govuk-radios__conditional--hidden{{/radioOption}}
+  {{^radioOption}}govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden{{/radioOption}}">
+  {{#renderMixin}}{{/renderMixin}}
 </div>

package/frontend/themes/gov-uk/styles/_cookie-banner.scss

@@ -10,7 +10,6 @@
 }
 
 #cookie-banner {
-  max-width: 960px;
   margin: 0 15px;
   p {
     margin: 0;
@@ -62,3 +61,54 @@
     height: fit-content;
   }
 }
+
+// the following are additional hof specific govuk cookie banner styling
+.govuk-banner--success {
+  border-color: #00703c;
+  color: #00703c;
+}
+
+.govuk-banner {
+  border: 5px solid #1d70b8;
+  font-size: 0;
+  margin-bottom: 30px;
+  padding: 10px;
+}
+
+.govuk-banner__icon{
+  display: inline-block;
+}
+
+.govuk-banner__message {
+  font-family: "GDS Transport", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.25;
+  color: #0b0c0c;
+  display: block;
+  overflow: hidden;
+  display: inline-block;
+  margin-left: 10px;
+}
+
+.govuk-banner__assistive {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+  }
+
+.cookie-table-holder > table > tbody > tr > td:first-child{
+  font-weight:bold;
+}
+
+.js-enabled #global-cookie-message {
+  display: none;
+}

package/lib/settings.js

@@ -7,7 +7,21 @@ const hoganExpressStrict = require('hogan-express-strict');
 const expressPartialTemplates = require('express-partial-templates');
 const bodyParser = require('body-parser');
 
-module.exports = (app, config) => {
+const filterEmptyViews = (views) => {
+  return views.filter(view => dirExists(view))
+}
+
+const dirExists = (dir) => {
+  try {
+    if (fs.existsSync(dir)) {
+      return true;
+    }
+  } catch(err) {
+    throw new Error(`${err}: Cannot check if the directory path exists`)
+  }
+}
+
+module.exports = async (app, config) => {
   const viewEngine = config.viewEngine || 'html';
 
   app.use((req, res, next) => {
@@ -17,7 +31,8 @@ module.exports = (app, config) => {
 
   app.use(config.theme());
 
-  const viewPaths = [].concat(config.theme.views);
+  const filteredViews = filterEmptyViews(config.theme.views)
+  const viewPaths = [].concat(filteredViews);
   app.set('view engine', viewEngine);
   app.enable('view cache');
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "20.0.0-beta.1",
+  "version": "20.0.0-beta.4",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
@@ -57,7 +57,7 @@
     "findup": "^0.1.5",
     "glob": "^7.2.0",
     "govuk-elements-sass": "^3.1.3",
-    "govuk-frontend": "3.14",
+    "govuk-frontend": "^4.1.0",
     "govuk_template_mustache": "^0.26.0",
     "helmet": "^3.22.0",
     "hogan-express-strict": "^0.5.4",

package/sandbox/.env

@@ -1 +1 @@
-GA_TAG=UA-215558609-1
+// GA_TAG=UA-215558609-1

package/sandbox/apps/sandbox/fields.js

@@ -8,9 +8,9 @@ module.exports = {
   'landing-page-radio': {
     mixin: 'radio-group',
     validate: ['required'],
-    legend: {
-      className: 'visuallyhidden'
-    },
+    noHeading: true,
+    // Design system says to avoid in-line unless it's two options,
+    // so just added as an example below but by default it isn't
     className: ['govuk-radios--inline'],
     options: ['basic-form', 'complex-form', 'build-your-own-form']
   },
@@ -20,6 +20,7 @@ module.exports = {
     // noHeading: 'true'
   },
   'dateOfBirth': dateComponent('dateOfBirth', {
+    // noHeading: 'true',
     controlType: 'date-input',
     validate: [
       'required',
@@ -28,23 +29,28 @@ module.exports = {
     ]
   }),
   building: {
+    noHeading: 'true',
     validate: ['required', 'notUrl', { type: 'maxlength', arguments: 100 }]
   },
   street: {
+    noHeading: 'true',
     validate: ['notUrl', { type: 'maxlength', arguments: 50 }],
     labelClassName: 'visuallyhidden'
   },
   townOrCity: {
+    noHeading: 'true',
     validate: ['required', 'notUrl',
       { type: 'regex', arguments: /^([^0-9]*)$/ },
       { type: 'maxlength', arguments: 100 }
     ]
   },
   postcode: {
+    noHeading: 'true',
     validate: ['required', 'postcode'],
     formatter: ['removespaces', 'uppercase']
   },
   incomeTypes: {
+    // noHeading: 'true',
     mixin: 'checkbox-group',
     labelClassName: 'visuallyhidden',
     validate: ['required'],
@@ -57,11 +63,9 @@ module.exports = {
     ]
   },
   countryOfHearing: {
+    // noHeading: 'true',
     mixin: 'radio-group',
     validate: ['required'],
-    legend: {
-      className: 'visuallyhidden'
-    },
     options: [
       'englandAndWales',
       'scotland',
@@ -69,6 +73,8 @@ module.exports = {
     ]
   },
   email: {
+    // noHeading: 'true',
+    labelClassName: ['govuk-label--l'],
     validate: ['required', 'email']
   },
   phone: {

package/sandbox/apps/sandbox/translations/en/default.json

@@ -2,6 +2,7 @@
   "fields": {
     "landing-page-radio": {
       "legend": "Which form would you like to explore?",
+      "hint": "Choose one of the options below and press continue.",
       "options": {
         "basic-form": {
           "label": "Basic form"
@@ -56,7 +57,7 @@
       }
     },
     "countryOfHearing": {
-      "label": "Country of hearing",
+      "legend": "What country was the appeal lodged?",
       "options": {
         "englandAndWales": {
           "label": "England and Wales"
@@ -70,7 +71,7 @@
       }
     },
     "email": {
-      "label": "Email address"
+      "label": "Enter your email address"
     },
     "phone": {
       "label": "Phone number",
@@ -103,8 +104,7 @@
   },
   "pages": {
     "landing-page": {
-      "header": "Landing page",
-      "intro": "Choose one of the options below and press continue."
+      "header": "Landing page"
     },
     "build-your-own-form": {
       "title": "Build your own form",
@@ -114,15 +114,6 @@
       "header": "What is your address in the UK?",
       "intro": "If you have no fixed address, enter an address where we can contact you."
     },
-    "checkboxes": {
-      "header": "Where does your money come from each month?"
-    },
-    "radio": {
-      "header": "What country was the appeal lodged?"
-    },
-    "email": {
-      "header": "Enter your email address"
-    },
     "phone-number": {
       "header": "Enter your phone number"
     },

package/sandbox/apps/sandbox/translations/src/en/fields.json

@@ -1,6 +1,7 @@
 {
   "landing-page-radio": {
     "legend": "Which form would you like to explore?",
+    "hint": "Choose one of the options below and press continue.",
     "options": {
       "basic-form": {
         "label": "Basic form"
@@ -55,7 +56,7 @@
     }
   },
   "countryOfHearing": {
-    "label": "Country of hearing",
+    "legend": "What country was the appeal lodged?",
     "options": {
       "englandAndWales": {
         "label": "England and Wales"
@@ -69,7 +70,7 @@
     } 
   },
   "email" : {
-    "label": "Email address"
+    "label": "Enter your email address"
   },
   "phone": {
     "label": "Phone number",

package/sandbox/apps/sandbox/translations/src/en/pages.json

@@ -1,7 +1,6 @@
 {
   "landing-page": {
-    "header": "Landing page",
-    "intro": "Choose one of the options below and press continue."
+    "header": "Landing page"
   },
   "build-your-own-form": {
     "title": "Build your own form",
@@ -11,15 +10,6 @@
     "header": "What is your address in the UK?",
     "intro": "If you have no fixed address, enter an address where we can contact you."
   },
-  "checkboxes": {
-    "header": "Where does your money come from each month?"
-  },
-  "radio": {
-    "header": "What country was the appeal lodged?"
-  },
-  "email": {
-    "header": "Enter your email address"
-  },
   "phone-number": {
     "header": "Enter your phone number"
   },
@@ -55,4 +45,4 @@
     "subheader": "What happens next",
     "content": "We’ll contact you with the decision of your application or if we need more information from you."
   }
-}
+}

package/sandbox/assets/scss/app.scss

@@ -77,7 +77,3 @@
 .js-enabled #global-cookie-message {
   display: none;
 }
-  
-#cookie-banner {
-  max-width: none;
-}

package/sandbox/public/css/app.css

@@ -2239,7 +2239,6 @@ strong {
 }
 
 #cookie-banner {
-  max-width: 960px;
   margin: 0 15px;
 }
 #cookie-banner p {
@@ -2294,6 +2293,56 @@ strong {
   height: fit-content;
 }
 
+.govuk-banner--success {
+  border-color: #00703c;
+  color: #00703c;
+}
+
+.govuk-banner {
+  border: 5px solid #1d70b8;
+  font-size: 0;
+  margin-bottom: 30px;
+  padding: 10px;
+}
+
+.govuk-banner__icon {
+  display: inline-block;
+}
+
+.govuk-banner__message {
+  font-family: "GDS Transport", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.25;
+  color: #0b0c0c;
+  display: block;
+  overflow: hidden;
+  display: inline-block;
+  margin-left: 10px;
+}
+
+.govuk-banner__assistive {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+}
+
+.cookie-table-holder > table > tbody > tr > td:first-child {
+  font-weight: bold;
+}
+
+.js-enabled #global-cookie-message {
+  display: none;
+}
+
 #cookie-settings .js-enabled {
   display: none;
 }
@@ -9392,8 +9441,4 @@ x:-moz-any-link {
 
 .js-enabled #global-cookie-message {
   display: none;
-}
-
-#cookie-banner {
-  max-width: none;
 }