Merge pull request #77 from NHSDigital/sass-updates

Update NHS.UK frontend, migrate to Sass modules, update Node.js

Author: colinrotherham

.nvmrc

@@ -1 +1 @@
-20
+lts/jod

app/assets/sass/_button-group.scss

@@ -1,3 +1,6 @@
+@use 'nhsuk-frontend/packages/core/settings' as *;
+@use 'nhsuk-frontend/packages/core/tools' as *;
+
 // Adapted from https://github.com/alphagov/govuk-frontend/blob/5786234c2fc2e89e2b6a925211ca1cfd38fda146/packages/govuk-frontend/src/govuk/objects/_button-group.scss#L3
 
 // Button groups can be used to group buttons and links together as a group.
@@ -18,8 +21,6 @@
 
   $link-spacing: nhsuk-spacing(1);
 
-  @include nhsuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);
-
   // Flexbox is used to center-align links on mobile, align everything along
   // the baseline on tablet and above, and to removes extra whitespace that
   // we'd get between the buttons and links because they're inline-blocks.
@@ -32,20 +33,22 @@
   flex-direction: column;
   align-items: center;
 
+  @include nhsuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);
+
   // Give links within the button group the same font-size and line-height
   // as buttons.
   //
   // Because we want the focus state to be tight around the link text, we use
   // margins where the buttons would use padding.
   .nhsuk-link {
-    @include nhsuk-font($size: 19, $line-height: 19px);
     display: inline-block;
     // Prevent links overflowing their container in IE10/11 because of bug
     // with align-items: center
     max-width: 100%;
     margin-top: $link-spacing;
     margin-bottom: $link-spacing + $vertical-gap;
     text-align: center;
+    @include nhsuk-font($size: 19, $line-height: 19px);
   }
 
   // Reduce the bottom margin to the size of the vertical gap (accommodating
@@ -56,7 +59,7 @@
 
   // On tablet and above, we also introduce a 'column gap' between the
   // buttons and links in each row and left align links
-  @include govuk-media-query($from: tablet) {
+  @include nhsuk-media-query($from: tablet) {
     // Cancel out the column gap for the last item in each row
     margin-right: ($horizontal-gap * -1);
 

app/assets/sass/_misc.scss

@@ -1,3 +1,6 @@
+@use 'nhsuk-frontend/packages/core/settings' as *;
+@use 'nhsuk-frontend/packages/core/tools' as *;
+
 .app-mammogram-image--placeholder {
   background-color: black;
   width: 75px;

app/assets/sass/_typography.scss

@@ -1,3 +1,7 @@
+@use 'nhsuk-frontend/packages/core/settings' as *;
+@use 'nhsuk-frontend/packages/core/styles/typography' as *;
+@use 'nhsuk-frontend/packages/core/tools' as *;
+
 h1 {
   @extend %nhsuk-heading-l;
 }

app/assets/sass/components/_count.scss

@@ -1,11 +1,13 @@
-.app-count {
-  @include nhsuk-font(16);
+@use 'nhsuk-frontend/packages/core/settings' as *;
+@use 'nhsuk-frontend/packages/core/tools' as *;
 
+.app-count {
   background-color: rgba($color_nhsuk-grey-4, 0.5);
   border-radius: nhsuk-spacing(3);
   display: inline-block;
   min-width: nhsuk-spacing(5);
   padding-left: nhsuk-spacing(2);
   padding-right: nhsuk-spacing(2);
   text-align: center;
+  @include nhsuk-font(16);
 }

app/assets/sass/components/_dark-mode.scss

@@ -1,15 +1,18 @@
+@use 'nhsuk-frontend/packages/core/settings' as *;
+@use 'nhsuk-frontend/packages/core/tools' as *;
+
 $app-dark-mode-blue: #348de0;
 $app-dark-mode-background: #1C1C1C;
-$app-dark-mode-background-secondary: tint($app-dark-mode-background, 10%);
+$app-dark-mode-background-secondary: nhsuk-tint($app-dark-mode-background, 10%);
 $app-dark-mode-white: #E8E8E8;
 $app-dark-mode-text-colour: $app-dark-mode-white;
-$app-dark-mode-text-colour-secondary: shade($app-dark-mode-text-colour, 30%);
+$app-dark-mode-text-colour-secondary: nhsuk-shade($app-dark-mode-text-colour, 30%);
 
 // Links
 $app-dark-mode-link-color: $app-dark-mode-blue;
-$app-dark-mode-link-hover-color: tint($color_nhsuk-dark-pink, 50%);
-$app-dark-mode-link-active-color: shade($app-dark-mode-link-color, 20%);
-$app-dark-mode-link-visited-color: tint($color_nhsuk-purple, 50%);
+$app-dark-mode-link-hover-color: nhsuk-tint($color_nhsuk-dark-pink, 50%);
+$app-dark-mode-link-active-color: nhsuk-shade($app-dark-mode-link-color, 20%);
+$app-dark-mode-link-visited-color: nhsuk-tint($color_nhsuk-purple, 50%);
 
 // Paul's colours
 $app-dark-mode-link-color: #348de0;

app/assets/sass/components/_forward-link.scss

@@ -1,3 +1,6 @@
+@use 'nhsuk-frontend/packages/core/settings' as *;
+@use 'nhsuk-frontend/packages/core/tools' as *;
+
 ////
 /// Back link component
 ///
@@ -13,22 +16,21 @@
   margin-top: nhsuk-spacing(3);
   line-height: 1; // [5]
 
-  @include mq($from: tablet) {
+  @include nhsuk-media-query($from: tablet) {
     margin-top: nhsuk-spacing(4);
   }
 }
 
 .app-forward-link__link {
-  @include nhsuk-typography-responsive(16);
-  @include nhsuk-link-style-default;
-
   background: none;
   border: 0;
   cursor: pointer;
   display: inline-block;
   padding: 0 16px 0 0; // [1]
   position: relative;
   text-decoration: none;
+  @include nhsuk-link-style-default;
+  @include nhsuk-font-size(16);
 
   .nhsuk-icon__chevron-right {
     height: 24px;
@@ -37,7 +39,7 @@
     top: -1px; // [3]
     width: 24px;
 
-    @include mq($from: tablet) {
+    @include nhsuk-media-query($from: tablet) {
       top: 0; // [3]
     }
   }

app/assets/sass/components/_header-organisation.scss

@@ -1,11 +1,15 @@
+@use 'nhsuk-frontend/packages/core/settings' as *;
+@use 'nhsuk-frontend/packages/core/tools' as *;
+@use 'header' as *;
+
 /**
  * Organisation header variant
  */
 
 .nhsuk-header--organisation {
   .nhsuk-header__link {
-    @include nhsuk-link-style-header;
     display: block;
+    @include nhsuk-link-style-header;
 
     &:focus {
       .nhsuk-organisation-name,
@@ -19,20 +23,19 @@
     height: 24px;
     width: 60px;
 
-    @include mq($from: tablet) {
+    @include nhsuk-media-query($from: tablet) {
       height: 32px;
       width: 80px;
     }
   }
 }
 
 .nhsuk-organisation-name {
-  @include nhsuk-font(22, $line-height: 1.1);
   color: $color_nhsuk-white;
   display: block;
-  font-weight: bold;
+  @include nhsuk-font(22, $line-height: 1.1, $weight: bold);
 
-  @include mq($media-type: print) {
+  @include nhsuk-media-query($media-type: print) {
     color: $nhsuk-print-text-color;
   }
 }
@@ -42,12 +45,11 @@
 }
 
 .nhsuk-organisation-descriptor {
-  @include nhsuk-font(14);
   color: $color_nhsuk-white;
   display: block;
-  font-weight: bold;
+  @include nhsuk-font(14, $weight: bold);
 
-  @include mq($media-type: print) {
+  @include nhsuk-media-query($media-type: print) {
     color: $color_nhsuk-blue;
   }
 }