Develop/feature/td 6227 update nhsuk frontend npm package to version 10

.gitignore

@@ -514,3 +514,12 @@ DigitalLearningSolutions.Web/Views/Shared/Components/TextArea/Default.cshtml
 DigitalLearningSolutions.Web/Views/Shared/Components/TextInput/Default.cshtml
 /DigitalLearningSolutions.Web/appsettings.Test.json
 /DigitalLearningSolutions.Web/web.config
+/DigitalLearningSolutions.Web/wwwroot/assets/images/favicon.ico
+/DigitalLearningSolutions.Web/wwwroot/assets/images/favicon.svg
+/DigitalLearningSolutions.Web/wwwroot/assets/images/nhsuk-icon-180.png
+/DigitalLearningSolutions.Web/wwwroot/assets/images/nhsuk-icon-192.png
+/DigitalLearningSolutions.Web/wwwroot/assets/images/nhsuk-icon-512.png
+/DigitalLearningSolutions.Web/wwwroot/assets/images/nhsuk-icon-mask.svg
+/DigitalLearningSolutions.Web/wwwroot/assets/images/nhsuk-opengraph-image.png
+/DigitalLearningSolutions.Web/wwwroot/assets/manifest.json
+/DigitalLearningSolutions.Web/publish-local

DigitalLearningSolutions.Web/Scripts/index.d.ts

@@ -1,23 +1,23 @@
-declare module 'nhse-tel-frontend/packages/components/header/header' {
+declare module 'nhsuk-frontend/dist/nhsuk/components/header/header' {
   export default function Header(): void;
 }
 
-declare module 'nhse-tel-frontend/packages/components/skip-link/skip-link' {
+declare module 'nhsuk-frontend/dist/nhsuk/components/skip-link/skip-link' {
   export default function SkipLink(): void;
 }
 
-declare module 'nhse-tel-frontend/packages/components/details/details' {
+declare module 'nhsuk-frontend/dist/nhsuk/components/details/details' {
   export default function Details(): void;
 }
 
-declare module 'nhse-tel-frontend/packages/components/radios/radios' {
+declare module 'nhsuk-frontend/dist/nhsuk/components/radios/radios' {
   export default function Radios(): void;
 }
 
-declare module 'nhse-tel-frontend/packages/components/checkboxes/checkboxes' {
+declare module 'nhsuk-frontend/dist/nhsuk/components/checkboxes/checkboxes' {
   export default function Checkboxes(): void;
 }
 
-declare module 'nhse-tel-frontend/packages/components/card/card' {
+declare module 'nhsuk-frontend/dist/nhsuk/components/card/card' {
   export default function Card(): void;
 }

DigitalLearningSolutions.Web/Scripts/nhsuk.ts

@@ -1,23 +1,11 @@
 // Components
-import Header from 'nhse-tel-frontend/packages/components/header/header';
-import SkipLink from 'nhse-tel-frontend/packages/components/skip-link/skip-link';
-import Details from 'nhse-tel-frontend/packages/components/details/details';
-import Radios from 'nhse-tel-frontend/packages/components/radios/radios';
-import Checkboxes from 'nhse-tel-frontend/packages/components/checkboxes/checkboxes';
+import { initAll } from 'nhsuk-frontend';
 
 // Polyfills
-import 'nhse-tel-frontend/packages/polyfills';
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
 // Initialize components
-document.addEventListener(
-  'DOMContentLoaded',
-  () => {
-    Details();
-    Header();
-    SkipLink();
-    Radios();
-    Checkboxes();
-  },
-);
+document.addEventListener('DOMContentLoaded', () => {
+  initAll();
+});

DigitalLearningSolutions.Web/Scripts/searchSortFilterAndPaginate/searchSortFilterAndPaginate.ts

@@ -1,4 +1,3 @@
-import Details from 'nhse-tel-frontend/packages/components/details/details';
 import _ from 'lodash';
 import {
   setUpFilter, filterSearchableElements, IAppliedFilterTag,
@@ -235,8 +234,6 @@ export class SearchSortFilterAndPaginate {
     searchableElements.forEach(
       (searchableElement) => searchableElementsContainer.appendChild(searchableElement.element),
     );
-    // This is required to polyfill the new elements in IE
-    Details();
   }
 
   updateResultCountAndPageNumber(count: number): void {

DigitalLearningSolutions.Web/Scripts/spec/learningMenu/fullscreen.spec.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { JSDOM } from 'jsdom';
 import { exitFullscreen, enterFullscreen } from '../../learningMenu/fullscreen';
-
 describe('enterFullscreen', () => {
   it('should show the exit fullscreen button', () => {
     // Given

DigitalLearningSolutions.Web/Scripts/trackingSystem/addNewCentreCourseSelectCourse.ts

@@ -1,5 +1,4 @@
 import * as _ from 'lodash';
-import Details from 'nhse-tel-frontend/packages/components/details/details';
 import {
   ISearchableData,
   ISearchableElement,
@@ -112,8 +111,6 @@ function displaySearchableElements(searchableElements: ISearchableElement[]): vo
   searchableElementsContainer.selectedIndex = selectedElement
     ? searchableElements.indexOf(selectedElement) + 1 : 0;
 
-  // This is required to polyfill the new elements in IE
-  Details();
 }
 
 function getCategoryAndTopicFilterStringAndUpdateHiddenInputs() {

DigitalLearningSolutions.Web/Styles/frameworks/comments.scss

@@ -1,15 +1,15 @@
-@use "nhse-tel-frontend/packages/core/all" as *;
+@use "nhsuk-frontend/dist/nhsuk/core/all" as *;
 
 .nhsuk-card.comment {
   border-width: medium;
 }
 
 .nhsuk-card.comment.comment-mine {
-  border-color: $color_nhsuk-green;
+  border-color: nhsuk-colour("green");
 }
 
 .nhsuk-card.comment.comment-other {
-  border-color: $color_nhsuk-blue;
+  border-color: nhsuk-colour("blue");
 }
 
 .heading-xxs {
@@ -18,7 +18,7 @@
 
 .heading-light {
   font-weight: 200;
-  color: $color_nhsuk-grey-1;
+  color: nhsuk-colour("grey-1");
 }
 
 .grid-column-ninety {

DigitalLearningSolutions.Web/Styles/frameworks/frameworksShared.scss

@@ -1,4 +1,4 @@
-@use "nhse-tel-frontend/packages/core/all" as *;
+@use "nhsuk-frontend/dist/nhsuk/core/all" as *;
 @use "../shared/headingButtons" as *;
 @use "../shared/searchableElements/searchableElements" as *;
 $nhs-dark-grey: #425563;
@@ -80,7 +80,7 @@ $nhs-dark-grey: #425563;
 button.nhsuk-pagination__link, a.nhsuk-pagination__link {
   border: none;
   background-color: transparent;
-  color: $nhsuk-link-color;
+  color: $nhsuk-link-colour;
   display: flex;
   // Since IE is bad at drawing boxes the correct size
   overflow: visible;
@@ -96,11 +96,11 @@ button.nhsuk-pagination__link, a.nhsuk-pagination__link {
   }
 
   &:hover {
-    color: $nhsuk-link-hover-color;
+    color: $nhsuk-link-hover-colour;
   }
 
   &:active {
-    color: $nhsuk-link-active-color;
+    color: $nhsuk-link-active-colour;
   }
 }
 
@@ -144,7 +144,7 @@ ol.hee-fwservice--framework-progress-bar {
     width: 150px; // hacky way to make the line the right size
     .hee-fwservice--framework-progress-marker {
       position: relative;
-      border: 2px solid $color_nhsuk-blue;
+      border: 2px solid nhsuk-colour("blue");
       border-radius: 50%;
       width: 2rem;
       height: 2rem;
@@ -154,7 +154,7 @@ ol.hee-fwservice--framework-progress-bar {
       .hee-fwservice--framework-progress-marker::before {
         content: '';
         width: 120px;
-        border-top: 1px solid $color_nhsuk-blue;
+        border-top: 1px solid nhsuk-colour("blue");
         position: absolute;
         top: 50%;
         left: 100%;
@@ -171,8 +171,8 @@ ol.hee-fwservice--framework-progress-bar {
 
     .hee-fwservice--framework-progress-marker {
       font-weight: normal;
-      color: $color_nhsuk-white;
-      background-color: $color_nhsuk-blue;
+      color: nhsuk-colour("white");
+      background-color: nhsuk-colour("blue");
     }
   }
 }
@@ -182,7 +182,7 @@ ul.no-decs {
 }
 
 .hee-fwservice--framework-structure {
-  background-color: $color_nhsuk-white;
+  background-color: nhsuk-colour("white");
   display: block;
   padding: 24px;
   margin-bottom: 24px;

DigitalLearningSolutions.Web/Styles/home/Policies.scss

@@ -1,4 +1,4 @@
-@use "nhse-tel-frontend/packages/core/all" as *;
+@use "nhsuk-frontend/dist/nhsuk/core/all" as *;
 
 .custom-ordered-list {
   list-style: none;

DigitalLearningSolutions.Web/Styles/home/brands.scss

@@ -1,4 +1,4 @@
-@use "nhse-tel-frontend/packages/core/all" as *;
+@use "nhsuk-frontend/dist/nhsuk/core/all" as *;
 @use "../shared/cardWithButtons";
 @use "../shared/searchableElements/searchableElements";
 
@@ -12,7 +12,7 @@
 
 .brands__top-horizontal-dash {
   @include mq($until: tablet) {
-    border-top: 1px solid $nhsuk-border-color;
+    border-top: 1px solid $nhsuk-border-colour;
     margin-top: nhsuk-spacing(3);
   }
 }
@@ -24,8 +24,8 @@
 }
 
 .header-row {
-  border-top: 1px solid $nhsuk-border-color;
-  border-bottom: 1px solid $nhsuk-border-color;
+  border-top: 1px solid $nhsuk-border-colour;
+  border-bottom: 1px solid $nhsuk-border-colour;
   margin-top: nhsuk-spacing(3);
   margin-bottom: nhsuk-spacing(3);
   display: flex;
@@ -44,7 +44,7 @@
 }
 
 .value-row {
-  border-bottom: 1px solid $nhsuk-border-color;
+  border-bottom: 1px solid $nhsuk-border-colour;
   margin-bottom: nhsuk-spacing(3);
   display: flex;
 

DigitalLearningSolutions.Web/Styles/home/learningContent.scss

@@ -1,4 +1,4 @@
-@use "nhse-tel-frontend/packages/core/all" as *;
+@use "nhsuk-frontend/dist/nhsuk/core/all" as *;
 
 .learning-content-item {
   margin-bottom: 72px;
@@ -47,7 +47,7 @@
 
 .learning-content-item__image-box {
   box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
-  background: $color_nhsuk-white;
+  background: nhsuk-colour("white");
   border-radius: 4px;
   padding: 8px;
   height: fit-content;
@@ -71,18 +71,18 @@
 
 .see-more-link {
   &:visited {
-    color: $nhsuk-link-visited-color;
+    color: $nhsuk-link-visited-colour;
   }
 
   &:link {
-    color: $nhsuk-link-color;
+    color: $nhsuk-link-colour;
   }
 
   &:hover {
-    color: $nhsuk-link-hover-color;
+    color: $nhsuk-link-hover-colour;
   }
 
   &:active {
-    color: $nhsuk-link-active-color;
+    color: $nhsuk-link-active-colour;
   }
 }

DigitalLearningSolutions.Web/Styles/home/products.scss

@@ -1,4 +1,4 @@
-@use "nhse-tel-frontend/packages/core/all" as *;
+@use "nhsuk-frontend/dist/nhsuk/core/all" as *;
 
 .product {
   margin-bottom: 72px;

DigitalLearningSolutions.Web/Styles/home/welcome.scss

@@ -1,4 +1,4 @@
-@use "nhse-tel-frontend/packages/core/all" as *;
+@use "nhsuk-frontend/dist/nhsuk/core/all" as *;
 
 .welcome-page-button-container {
   margin-bottom: 32px;
@@ -26,9 +26,9 @@
 }
 
 .auth-button--blue {
-    background-color: $color_nhsuk-blue;
+    background-color: nhsuk-colour("blue");
 }
 
 .auth-button--blue:hover {
-    background-color: darken($color_nhsuk-blue, 5%);
+    background-color: darken(nhsuk-colour("blue"), 5%);
 }