WIP DO NOT MERGE BRP-92 govuk design system upgrade

apps/collection/fields/index.js

@@ -5,24 +5,21 @@ const countries = [''].concat(require('../../../assets/countries').allCountries)
 
 module.exports = {
   'collection-where-radio': {
+    isPageHeading: true,
     mixin: 'radio-group',
     validate: ['required'],
-    className: ['inline', 'form-group'],
-    legend: {
-      className: 'visuallyhidden'
-    },
+    className: ['govuk-radios--inline', 'govuk-form-group'],
     options: [{
-      value: 'Post Office',
-      toggle: 'collection-date-group'
+      value: 'Post Office'
     }, {
-      value: 'Sponsor',
-      toggle: 'collection-date-group'
+      value: 'Sponsor'
     }]
   },
   'collection-date': date('collection-date', {
     validate: ['before']
   }),
   'reason-radio': {
+    isPageHeading: true,
     mixin: 'radio-group',
     validate: ['required'],
     options: [{
@@ -53,12 +50,10 @@ module.exports = {
     },
     {
       value: 'no-brp'
-    }],
-    legend: {
-      className: 'visuallyhidden'
-    }
+    }]
   },
   'nominated-fullname': {
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     validate: ['required']
   },
   'nominated-nationality': {
@@ -68,13 +63,15 @@ module.exports = {
     hint: 'fields.nominated-nationality.hint'
   },
   'nominated-id-number': {
+    className: ['govuk-input govuk-!-width-two-thirds'],
     validate: ['required']
   },
   'nominated-date': date('nominated-date', {
     // TODO confirm with BA on over18 check 'over18' validation
     validate: ['required', 'before']
   }),
   fullname: {
+    className: ['govuk-input govuk-!-width-two-thirds'],
     validate: ['required', 'notUrl']
   },
   'date-of-birth': date('date-of-birth', {
@@ -87,6 +84,10 @@ module.exports = {
     hint: 'fields.nationality.hint'
   },
   passport: {
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     validate: ['required', 'notUrl']
+  },
+  'org-help-radio': {
+    className: ['govuk-radios--inline']
   }
 };

apps/collection/translations/src/en/fields.json

@@ -14,6 +14,8 @@
     "label": "Year"
   },
   "collection-where-radio": {
+    "legend": "From where were you asked to collect your BRP?",
+    "hint": "This could have been from a Post Office branch or a sponsor, such as your legal representative, employer, university or school.",
     "options": {
       "Post Office": {
         "label": "Post Office"
@@ -24,6 +26,7 @@
     }
   },
   "reason-radio": {
+    "legend": "Why couldn't you collect your BRP?",
     "options": {
       "under-age": {
         "legend": "I am under 18 and attempted collection without my responsible adult",

apps/collection/translations/src/en/pages.json

@@ -1,14 +1,11 @@
 {
   "reasons": {
-    "header": "Why couldn't you collect your BRP?"
   },
   "nominated": {
     "header": "Who was supposed to collect your BRP on your behalf?",
     "description": "Provide details of the person who tried to collect the BRP on your behalf"
   },
   "where": {
-    "header": "From where were you asked to collect your BRP?",
-    "description": "This could have been from a Post Office branch or a sponsor, such as your legal representative, employer, university or school.",
     "date-question": "If you have attempted to collect your BRP, when was it? (optional)"
   },
   "contact-details": {
@@ -23,7 +20,7 @@
     "subheader": "We need these details to process your request."
   },
   "check-details": {
-    "header": "Check the details you have provided",
+    "legend": "Check the details you have provided",
     "subheader": "If any information is incorrect, you can change it here.",
     "table": {
       "headers": {
@@ -46,6 +43,7 @@
     },
     "org-details-group": {
       "header": "What are your details?",
+      "subheader": "We will attempt to contact the BRP holder directly. We will only use these details to contact you if needed.",
       "type": "Type of support"
     },
     "footer": {
@@ -101,4 +99,5 @@
   "someone-else-confirmation": {
     "paragraph": "We will review the information you have provided and investigate the situation."
   }
+
 }

apps/collection/views/confirm.html

@@ -13,19 +13,10 @@
   {{> partials-navigation}}
 {{/propositionHeader}}
 
-{{$title}}
-  {{#t}}journeys.collection.pages.check-details.header{{/t}}
-{{/title}}
-
-{{$header}}
-  {{<partials-page-header}}
-    {{$page-header}}
-      {{#t}}journeys.collection.pages.check-details.header{{/t}}
-    {{/page-header}}
-  {{/partials-page-header}}
-{{/header}}
-
 {{$content}}
+
+<header><h1 class="govuk-heading-l">{{#t}}pages.check-details-error.header{{/t}}</h1></header>
+
   <p>{{#t}}journeys.collection.pages.check-details.subheader{{/t}}</p>
 
   {{<partials-form}}

apps/collection/views/contact-details.html

@@ -54,7 +54,7 @@
 
         {{#input-text}}contact-address-county{{/input-text}}
 
-        {{#input-text-code}}contact-address-postcode{{/input-text-code}}
+        {{#input-text}}contact-address-postcode{{/input-text}}
 
         <div class="notice">
           <i class="icon icon-important">

apps/collection/views/partials/collection-date.html

@@ -0,0 +1,20 @@
+<div id="{{toggle}}" class="panel-indent{{#errors.collection-date}}validation-error{{/errors.collection-date}}">
+
+    <legend class="visuallyhidden">
+      <span class="form-label-bold">{{#t}}fields.collection-date.legend{{/t}}</span>
+    </legend>
+    <fieldset>
+      {{#errors.collection-date}}
+      <span id="collection-date-error" class="error-message">
+        {{errors.collection-date.message}}
+      </span>
+    {{/errors.collection-date}}
+
+    <div class="form-group form-date">
+      <p>{{#t}}pages.where.date-question{{/t}}</p>
+      <p id="collection-date-hint" class="form-hint">{{#t}}fields.collection-date.hint{{/t}}</p>
+      {{#input-date}}collection-date{{/input-date}}
+    </div>
+    </fieldset>
+
+  </div>"

apps/collection/views/personal-details.html

@@ -17,13 +17,9 @@
     {{#t}}journeys.collection.pages.personal-details.header{{/t}}
   {{/title}}
 
-  {{$header}}
-    {{<partials-page-header}}
-      {{$page-header}}
+  {{$pageTitle}}}
         {{#t}}journeys.collection.pages.personal-details.header{{/t}}
-      {{/page-header}}
-    {{/partials-page-header}}
-  {{/header}}
+  {{/pageTitle}}
 
   {{$content}}
     <p>{{#t}}journeys.collection.pages.personal-details.subheader{{/t}}</p>

apps/collection/views/reasons.html

@@ -13,18 +13,6 @@
     {{> partials-navigation}}
   {{/propositionHeader}}
 
-  {{$title}}
-    {{#t}}pages.reasons.header{{/t}}
-  {{/title}}
-
-  {{$header}}
-    {{<partials-page-header}}
-      {{$page-header}}
-        {{#t}}pages.reasons.header{{/t}}
-      {{/page-header}}
-    {{/partials-page-header}}
-  {{/header}}
-
   {{$content}}
     {{<partials-form}}
 

apps/collection/views/where.html

@@ -13,20 +13,7 @@
     {{> partials-navigation}}
   {{/propositionHeader}}
 
-  {{$title}}
-    {{#t}}pages.where.header{{/t}}
-  {{/title}}
-
-  {{$header}}
-    {{<partials-page-header}}
-      {{$page-header}}
-        {{#t}}pages.where.header{{/t}}
-      {{/page-header}}
-    {{/partials-page-header}}
-  {{/header}}
-
   {{$content}}
-    <p>{{#t}}pages.where.description{{/t}}</p>
 
     {{<partials-form}}
 

apps/common/fields/contact-details.js

@@ -3,17 +3,22 @@
 module.exports = {
   email: {
     validate: ['required', 'email'],
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     type: 'email',
     dependent: {
       value: '',
       field: 'use-address'
     }
   },
+  phone: {
+    className: ['govuk-input', 'govuk-!-width-two-thirds']
+  },
   'use-address': {
     toggle: 'address-group'
   },
   'contact-address-house-number': {
     validate: ['required'],
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     label: 'fields.address-house-number.label',
     dependent: {
       value: 'true',
@@ -22,6 +27,7 @@ module.exports = {
   },
   'contact-address-street': {
     validate: ['required'],
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     label: 'fields.address-street.label',
     dependent: {
       value: 'true',
@@ -30,17 +36,20 @@ module.exports = {
   },
   'contact-address-town': {
     validate: ['required'],
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     label: 'fields.address-town.label',
     dependent: {
       value: 'true',
       field: 'use-address'
     }
   },
   'contact-address-county': {
-    label: 'fields.address-county.label'
+    label: 'fields.address-county.label',
+    className: ['govuk-input', 'govuk-!-width-two-thirds']
   },
   'contact-address-postcode': {
     validate: ['required'],
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     label: 'fields.address-postcode.label',
     dependent: {
       value: 'true',

apps/common/fields/organisation-details.js

@@ -3,9 +3,8 @@
 module.exports = {
   'org-help': {
     validate: ['required'],
-    className: 'inline',
+    className: ['govuk-radios--inline'],
     legend: {
-      className: 'visuallyhidden',
       value: 'pages.check-details.org-help.title'
     },
     options: [
@@ -18,13 +17,15 @@ module.exports = {
   },
   'rep-name': {
     validate: ['required', 'notUrl'],
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     dependent: {
       field: 'org-help',
       value: 'yes'
     }
   },
   'rep-email': {
     validate: ['email'],
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     dependent: {
       field: 'org-help',
       value: 'yes'

apps/common/fields/personal-details.js

@@ -4,6 +4,7 @@ const date = require('hof').components.date;
 
 module.exports = {
   fullname: {
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     validate: ['required', 'notUrl']
   },
   'date-of-birth': date('date-of-birth', {
@@ -18,6 +19,7 @@ module.exports = {
     hint: 'fields.nationality.hint'
   },
   passport: {
+    className: ['govuk-!-width-two-thirds'],
     validate: ['required', 'notUrl']
   },
   'brp-card': {

apps/correct-mistakes/fields/about-error.js

@@ -11,6 +11,7 @@ module.exports = {
     toggle: 'first-name-error-container'
   },
   'first-name-error': {
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     validate: ['required', 'notUrl'],
     dependent: {
       field: 'first-name-error-checkbox',
@@ -21,6 +22,7 @@ module.exports = {
     toggle: 'last-name-error-container'
   },
   'last-name-error': {
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     validate: ['required', 'notUrl'],
     dependent: {
       field: 'last-name-error-checkbox',
@@ -41,6 +43,7 @@ module.exports = {
     toggle: 'birth-place-error-container'
   },
   'birth-place-error': {
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     validate: ['required'],
     dependent: {
       field: 'birth-place-error-checkbox',
@@ -66,6 +69,7 @@ module.exports = {
     toggle: 'sponsor-details-error-container'
   },
   'sponsor-details-error': {
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     validate: ['required'],
     dependent: {
       field: 'sponsor-details-error-checkbox',

apps/correct-mistakes/fields/location-applied.js

@@ -2,11 +2,9 @@
 
 module.exports = {
   'location-applied': {
+    isPageHeading: true,
     validate: ['required'],
-    legend: {
-      className: 'visuallyhidden'
-    },
-    className: ['inline', 'form-group'],
+    className: ['govuk-radios--inline', 'form-group'],
     options: ['yes', 'no']
   }
 };

apps/correct-mistakes/fields/personal-details.js

@@ -2,6 +2,7 @@
 
 module.exports = {
   'brp-card': {
+    className: ['govuk-input', 'govuk-!-width-two-thirds'],
     validate: ['required', {type: 'regex', arguments: /^[a-z][a-z](\d|X)\d{6}$/gi }],
     formatter: ['uppercase'],
     hint: 'fields.brp-card.hint'