Upgrade to NHS frontend v10 (#443)

Visible changes:

* added new account section to the header for account page and sign out
links
* small design tweaks to the logo in the header (size and hover/active
states)

Other changes:

* remove custom Button group css (this has been added upstream)
* remove custom CSS for showing which section in the navigation is
active (this has been added upstream)
* update paths to NHS Frontend
* change how the JavaScript is initialised

---------

Co-authored-by: Colin Rotherham <[email protected]>

Author: frankieroberto

app.js

@@ -52,8 +52,11 @@ const appViews = [
   path.join(__dirname, 'app/views/'),
   path.join(__dirname, 'lib/example-templates/'),
   path.join(__dirname, 'lib/prototype-admin/'),
-  path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),
-  path.join(__dirname, 'node_modules/nhsuk-frontend/packages/macros'),
+  path.join(__dirname, 'lib/templates/'),
+  path.join(__dirname, 'node_modules/nhsuk-frontend/dist/nhsuk/components'),
+  path.join(__dirname, 'node_modules/nhsuk-frontend/dist/nhsuk/macros'),
+  path.join(__dirname, 'node_modules/nhsuk-frontend/dist/nhsuk'),
+  path.join(__dirname, 'node_modules/nhsuk-frontend/dist'),
   path.join(__dirname, 'app/components/'),
 ];
 
@@ -161,7 +164,7 @@ app.set('trust proxy', 1);
 // Middleware to serve static assets
 app.use(express.static(path.join(__dirname, 'public')));
 app.use('/nhsuk-frontend', express.static(path.join(__dirname, 'node_modules/nhsuk-frontend/packages')));
-app.use('/nhsuk-frontend', express.static(path.join(__dirname, 'node_modules/nhsuk-frontend/dist')));
+app.use('/nhsuk-frontend', express.static(path.join(__dirname, 'node_modules/nhsuk-frontend/dist/nhsuk')));
 
 // Use custom application routes
 app.use('/', routes);

app/assets/sass/components/_button-group.scss

@@ -74,5 +74,5 @@
 
 .app-body--error {
   font-weight: bold;
-  color: $nhsuk-error-color;
+  color: $nhsuk-error-colour;
 }

app/assets/sass/components/_button.scss

@@ -1,6 +1,6 @@
 .app-feedback-panel {
-  background-color: $color_nhsuk-white;
-  border-color: $color_nhsuk-blue;
+  background-color: nhsuk-colour("white");
+  border-color: nhsuk-colour("blue");
   border-width: nhsuk-spacing(1);
   border-style: solid;
   padding: nhsuk-spacing(4);

app/assets/sass/components/_feedback-panel.scss

@@ -1,36 +1,16 @@
-
-// Makes all navigation items from this one on right-aligned
-//
-// A bit of a hack - possibly they should be in 2 separate lists?
-.app-header__navigation-item--right-aligned {
-  margin-left: auto;
-}
-
-// Bump the border-bottom size up from 4px to 6px
-// - this gives the 'current' item more visual weight
-.nhsuk-header__navigation-link,
-.nhsuk-header__navigation-link:active,
-.nhsuk-header__navigation-link:focus {
-  border-bottom-width: 6px;
-}
-
-// A style to highlight the current section the user is in
-.app-header__navigation-link--current,
-.app-header__navigation-item--current a {
+// Remove default underline from link
+.app-header__navigation--no-underline .nhsuk-header__navigation-link {
   text-decoration: none;
-  border-bottom-color: $nhsuk-border-color;
 }
 
-// Temporary mockup until this has been released
-.app-header__account-item {
-  background-color: #004b93;
-  padding: 3px 15px;
-  border-radius: 5px;
+// Add underline back to just the label in the link
+.app-header__navigation--no-underline .nhsuk-header__navigation-link .app-header__navigation-link-label {
+  text-decoration: underline;
 }
 
-.app-header__account-item .nhsuk-header__navigation-link {
-  padding-top: 0px;
-  padding-bottom: 0px;
+// Remove underline from the label in the link on hover
+.app-header__navigation--no-underline .nhsuk-header__navigation-link:hover .app-header__navigation-link-label {
+  text-decoration: none;
 }
 
 
@@ -48,7 +28,7 @@
 .app-count {
   background-color: rgba(0, 47, 92, 0.4);
   border-radius: nhsuk-spacing(3);
-  color: $color_nhsuk-white;
+  color: nhsuk-colour("white");
   display: inline-block;
   min-width: nhsuk-spacing(5);
   padding-left: nhsuk-spacing(2);

app/assets/sass/components/_header.scss

@@ -3,6 +3,6 @@
 // ==========================================================================
 
 .nhsuk-list--border li {
-  border-bottom: 1px solid $color_nhsuk-grey-4;
+  border-bottom: 1px solid nhsuk-colour("grey-4");
   padding: 8px 0 16px;
 }

app/assets/sass/components/_list-border.scss

@@ -3,7 +3,7 @@
 // ==========================================================================
 
 .nhsuk-related-nav {
-  border-top: 1px solid $nhsuk-border-color;
+  border-top: 1px solid $nhsuk-border-colour;
 
   @include nhsuk-media-query($until: desktop) {
     margin-top: nhsuk-spacing(7);

app/assets/sass/components/_related-nav.scss

@@ -1,4 +1,4 @@
 .app-summary__explanation {
   margin-top: nhsuk-spacing(2);
-  color: $nhsuk-secondary-text-color;
+  color: $nhsuk-secondary-text-colour;
 }

app/assets/sass/components/_summary-list.scss

@@ -20,11 +20,11 @@ table {
 
 .app-table__cell--border-right,
 .app-table__header--border-right {
-  border-right: 2px solid $color_nhsuk-grey-4;
+  border-right: 2px solid nhsuk-colour("grey-4");
 }
 
 .app-table__header--border-top {
-  border-top: 2px solid $color_nhsuk-grey-4;
+  border-top: 2px solid nhsuk-colour("grey-4");
 }
 
 .app-table__cell--padding-left,

app/assets/sass/components/_table.scss

@@ -2,7 +2,11 @@
 // This is like the nhsuk-tag--blue variant,
 // but without the darker border.
 .app-tag--header {
-  background-color: nhsuk-tint($color_nhsuk-blue, 80%);
-  border-color: nhsuk-tint($color_nhsuk-blue, 80%);
-  color: nhsuk-shade($color_nhsuk-blue, 30%);
+  background-color: nhsuk-tint(nhsuk-colour("blue"), 80%);
+  border-color: nhsuk-tint(nhsuk-colour("blue"), 80%);
+  color: nhsuk-shade(nhsuk-colour("blue"), 30%);
+
+  // Reduce padding slightly from 4px to 3px so it fits in the navigation item
+  padding-top: 3px;
+  padding-bottom: 3px;
 }