Update components to be compatible with NHUSK-FrontEnd library v10

NHSUKFrontendRazor/ViewComponents/RadioListViewComponent.cs

@@ -5,7 +5,6 @@
 
     using Microsoft.AspNetCore.Mvc;
     using NHSUKFrontendRazor.ViewModels;
-    using NHSUKFrontendRazor.ViewModels;
 
     public class RadioListViewComponent : ViewComponent
     {
@@ -24,18 +23,17 @@ public IViewComponentResult Invoke(
         {
             var model = ViewData.Model;
             var property = model.GetType().GetProperty(aspFor);
-            var errorMessages = ViewData.ModelState[property?.Name]?.Errors.Select(e => e.ErrorMessage) ??
-                                new string[] { };
+            var errorMessages = ViewData.ModelState[property?.Name]?.Errors.Select(e => e.ErrorMessage) ?? new string[] { };
 
-            var radiosList = radios.Where(x=>x.Label != optionalRadio).Select(
+            var radiosList = radios.Where(x => x.Label != optionalRadio).Select(
                 r => new RadiosItemViewModel(
                     r.Value,
                     r.Label,
                     IsSelectedRadio(aspFor, r, populateWithCurrentValues),
                     r.HintText
                 )
             );
-            
+
 
             var viewModel = new RadiosViewModel(
                 aspFor,
@@ -64,4 +62,4 @@ private bool IsSelectedRadio(string aspFor, RadiosItemViewModel radioItem, bool
             return populateWithCurrentValue && value != null && value.Equals(radioItem.Value);
         }
     }
-}
+}

NHSUKFrontendRazor/ViewComponents/SkipLinkViewComponent.cs

@@ -1,6 +1,5 @@
 namespace NHSUKFrontendRazor.ViewComponents
 {
-    using System.Collections.Generic;
     using Microsoft.AspNetCore.Mvc;
     using NHSUKFrontendRazor.ViewModels;
 
@@ -10,10 +9,10 @@ namespace NHSUKFrontendRazor.ViewComponents
     public class SkipLinkViewComponent : ViewComponent
     {
         public IViewComponentResult Invoke(
-            string maincContentID,
+            string mainContentID,
             string text = "Skip to main content")
         {
-            var model = new SkipLinkViewModel(maincContentID, text);
+            var model = new SkipLinkViewModel(mainContentID, text);
 
             return View(model);
         }

NHSUKFrontendRazor/ViewModels/SkipLinkViewModel.cs

@@ -5,20 +5,20 @@ public class SkipLinkViewModel
         /// <summary>
         /// Initializes a new instance of the <see cref="SkipLinkViewModel"/> class.
         /// </summary>
-        /// <param name="maincContentID">The ID of the main content element to which the skip link will navigate.</param>
+        /// <param name="mainContentID">The ID of the main content element to which the skip link will navigate.</param>
         /// <param name="text">The text to be displayed for the skip link.</param>
         public SkipLinkViewModel(
-            string maincContentID,
+            string mainContentID,
             string text)
         {
-            MaincContentID = maincContentID;
+            MainContentID = mainContentID;
             Text = text;
         }
 
         /// <summary>
         /// Gets or sets the ID of the main content element to which the skip link will navigate.
         /// </summary>
-        public string MaincContentID { get; set; }
+        public string MainContentID { get; set; }
 
         /// <summary>
         /// Gets or sets the text to be displayed for the skip link.

NHSUKFrontendRazor/Views/Shared/Components/ActionLink/Default.cshtml

@@ -1,12 +1,9 @@
 @using NHSUKFrontendRazor.ViewModels
 @model LinkViewModel
 
-<div class="nhsuk-action-link">
-  <a class="nhsuk-action-link__link" asp-controller="@Model.AspController" asp-action="@Model.AspAction" asp-all-route-data="@Model.AspAllRouteData">
-    <svg class="nhsuk-icon nhsuk-icon__arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
-      <path d="M0 0h24v24H0z" fill="none"></path>
-      <path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z"></path>
+<a class="nhsuk-action-link" asp-controller="@Model.AspController" asp-action="@Model.AspAction" asp-all-route-data="@Model.AspAllRouteData">
+    <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+        <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
     </svg>
     <span class="nhsuk-action-link__text">@Model.LinkText</span>
-  </a>
-</div>
+</a>

NHSUKFrontendRazor/Views/Shared/Components/BackLink/Default.cshtml

@@ -1,11 +1,6 @@
 @using NHSUKFrontendRazor.ViewModels
 @model LinkViewModel
 
-<div class="nhsuk-back-link">
-  <a class="nhsuk-back-link__link" asp-controller="@Model.AspController" asp-action="@Model.AspAction" asp-all-route-data="@Model.AspAllRouteData">
-    <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
-      <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
-    </svg>
+<a class="nhsuk-back-link" asp-controller="@Model.AspController" asp-action="@Model.AspAction" asp-all-route-data="@Model.AspAllRouteData">
     @Model.LinkText
-  </a>
-</div>
+</a>

NHSUKFrontendRazor/Views/Shared/Components/Breadcrumbs/Default.cshtml

@@ -8,7 +8,7 @@
     <ol class="nhsuk-breadcrumb__list">
         @foreach (var link in Model.Links)
         {
-            <li class="nhsuk-breadcrumb__item">
+            <li class="nhsuk-breadcrumb__list-item">
                 @if (link == lastLink)
                 {
                     @link.Title
@@ -23,12 +23,9 @@
 
     @if (Model.Links.Count > 0)
     {
-        <p class="nhsuk-breadcrumb__back">
-            <a class="nhsuk-breadcrumb__backlink" asp-controller="@lastLink.aspController" asp-action="@lastLink.aspAction" asp-all-route-data="@lastLink.aspRouteData">
-                <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
-                @lastLink.Title
-            </a>
-        </p>
+        <a class="nhsuk-back-link" asp-controller="@lastLink.aspController" asp-action="@lastLink.aspAction" asp-all-route-data="@lastLink.aspRouteData">
+            @lastLink.Title
+        </a>
     }
 
-</nav>
+</nav>

NHSUKFrontendRazor/Views/Shared/Components/Card/Default.cshtml

@@ -40,13 +40,9 @@
 
         @if (Model.HasArrow == true)
         {
-            <svg class="nhsuk-icon" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
-                <circle cx="13.333" cy="13.333" r="13.333" fill="" />
-                <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
-                    <path d="M15.438 13l-3.771 3.771" />
-                    <path data-name="Path" d="M11.667 9.229L15.438 13" />
-                </g>
+            <svg class="nhsuk-icon nhsuk-icon--chevron-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+                <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z"></path>
             </svg>
         }
     </div>
-</div>
+</div>

NHSUKFrontendRazor/Views/Shared/Components/Checkboxes/Default.cshtml

@@ -17,9 +17,9 @@
             </div>
         }
         @if (
-        Model.Required
-        && Model.Checkboxes.Where(x => x.Value).Count() == 0
-        )
+                Model.Required
+                && Model.Checkboxes.Where(x => x.Value).Count() == 0
+                )
         {
             <div class="nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
                 <span class="error-message--margin-bottom-1 nhsuk-error-message">
@@ -28,7 +28,7 @@
             </div>
         }
 
-        <div class="nhsuk-checkboxes">
+        <div class="nhsuk-checkboxes" data-module="nhsuk-checkboxes">
             @foreach (var checkbox in Model.Checkboxes)
             {
                 if (!string.IsNullOrWhiteSpace(Model.Class))
@@ -45,4 +45,4 @@
             }
         </div>
     </fieldset>
-</div>
+</div>

NHSUKFrontendRazor/Views/Shared/Components/DoDontList/Default.cshtml

@@ -9,20 +9,19 @@
             <li>
                 @if (Model.IsDo)
                 {
-                    <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" width="34" height="34">
-                        <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12" stroke="#007f3b"></path>
+                    <svg class="nhsuk-icon nhsuk-icon--tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+                        <path d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z" />
                     </svg>
                 }
                 else
                 {
-                    <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-                        <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z" fill="#d5281b"></path>
-                        <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z" fill="#d5281b"></path>
+                    <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+                        <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z" />
                     </svg>
                 }
 
                 @rule
             </li>
         }
     </ul>
-</div>
+</div>

NHSUKFrontendRazor/Views/Shared/Components/Footer/Default.cshtml

@@ -1,29 +1,29 @@
 @using NHSUKFrontendRazor.ViewModels
 @model FooterViewModel
 
-<footer role="contentinfo">
-    <div class="nhsuk-footer-container">
-        <div class="nhsuk-width-container">
-            <h2 class="nhsuk-u-visually-hidden">Support links</h2>
-            <div class="nhsuk-footer">
-
-                @foreach (var group in Model.FooterGroupList)
+<footer class="nhsuk-footer" role="contentinfo">
+    <div class="nhsuk-width-container">
+        @(Model.IsVerticallyAligned ? "" : Html.Raw("<div class='nhsuk-footer__navigation nhsuk-grid-row'>"))
+        @foreach (var group in Model.FooterGroupList)
+        {
+            @(Model.IsVerticallyAligned ? "" : Html.Raw("<div class='nhsuk-grid-column-one-quarter'>"))
+            @(group.IsMeta? Html.Raw("<div class='nhsuk-footer__meta'><h2 class='nhsuk-u-visually-hidden'>Support links</h2>") : "")
+            <ul class="nhsuk-footer__list">
+                @foreach (var item in group.FooterItemList)
                 {
-                    <ul class="nhsuk-footer__list @(group.IsMeta ? "nhsuk-footer__meta" : "")">
-                        @foreach (var item in group.FooterItemList)
-                        {
-                            <li class="nhsuk-footer__list-item @(Model.IsVerticallyAligned ? "" : "nhsuk-footer-default__list-item")">
-                                <a class="nhsuk-footer__list-item-link" asp-controller="@item.AspController" asp-action="@item.AspAction" asp-all-route-data="@item.AspRouteData">@item.Title</a>
-                            </li>
-                        }
-                    </ul>
+                    <li class="nhsuk-footer__list-item">
+                        <a class="nhsuk-footer__list-item-link" asp-controller="@item.AspController" asp-action="@item.AspAction" asp-all-route-data="@item.AspRouteData">@item.Title</a>
+                    </li>
                 }
-            </div>
-
-            <div>
-                <p class="nhsuk-footer__copyright">@Model.Copyright</p>
-            </div>
+            </ul>
+            @(group.IsMeta? Html.Raw("</div>") : "")
+            @(Model.IsVerticallyAligned ? "" : Html.Raw("</div>"))
+        }
+        @(Model.IsVerticallyAligned ? "" : Html.Raw("</div>"))
 
+        <div class="nhsuk-footer__meta">
+            <p class="nhsuk-body-s">@Model.Copyright</p>
         </div>
+
     </div>
-</footer>
+</footer>

NHSUKFrontendRazor/Views/Shared/Components/Pagination/Default.cshtml

@@ -8,12 +8,12 @@
             <li class="nhsuk-pagination-item--previous">
                 @if (Model.CurrentPage > 0)
                 {
-                    <a class="nhsuk-pagination__link nhsuk-pagination__link--previous" href="@Model.PreviousUrl">
+                    <a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="@Model.PreviousUrl">
                         <span class="nhsuk-pagination__title">Previous</span>
                         <span class="nhsuk-u-visually-hidden">:</span>
                         <span class="nhsuk-pagination__page">@(Model.CurrentPage - 1) of @Model.TotalPage</span>
-                        <svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
-                            <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"></path>
+                        <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+                            <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z" />
                         </svg>
                     </a>
                 }
@@ -25,13 +25,12 @@
                         <span class="nhsuk-pagination__title">Next</span>
                         <span class="nhsuk-u-visually-hidden">:</span>
                         <span class="nhsuk-pagination__page">@(Model.CurrentPage + 1) of @Model.TotalPage</span>
-                        <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
-                            <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z">
-                            </path>
+                        <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+                            <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z" />
                         </svg>
                     </a>
                 }
             </li>
         </ul>
     </nav>
-}
+}

NHSUKFrontendRazor/Views/Shared/Components/RadioList/Default.cshtml

@@ -48,7 +48,7 @@
             </div>
         }
 
-        <div class="nhsuk-radios">
+        <div class="nhsuk-radios" data-module="nhsuk-radios">
             @foreach (var (radio, index) in Model.Radios.Select((r, i) => (r, i)))
             {
                 counter = index;
@@ -63,9 +63,9 @@
                                    type="radio"
                                    value="@radio.Value"
                                    aria-describedby="@(!string.IsNullOrEmpty(radio.HintText) ? $"{radio.Value}-item-hint" : string.Empty)"
-                                   data-val-required="@(Model.Required ? Model.RequiredClientSideErrorMessage : "")"
+                                   data-val-required="@(Model.Required? Model.RequiredClientSideErrorMessage: "")"
                                    data-val="@(Model.Required ? "true" : "false")"
-                            @(radio.Selected ? "checked" : string.Empty) />
+                                   @(radio.Selected ? "checked" : string.Empty) />
                             <label class="nhsuk-label nhsuk-radios__label" for="@radioId">
                                 @radio.Label
                             </label>
@@ -87,9 +87,9 @@
                                type="radio"
                                value="@radio.Value"
                                aria-describedby="@(!string.IsNullOrEmpty(radio.HintText) ? $"{radio.Value}-item-hint" : string.Empty)"
-                               data-val-required="@(Model.Required ? Model.RequiredClientSideErrorMessage : "")"
+                               data-val-required="@(Model.Required? Model.RequiredClientSideErrorMessage: "")"
                                data-val="@(Model.Required ? "true" : "false")"
-                        @(radio.Selected ? "checked" : string.Empty) />
+                               @(radio.Selected ? "checked" : string.Empty) />
                         <label class="nhsuk-label nhsuk-radios__label" for="@radioId">
                             @radio.Label
                         </label>
@@ -114,9 +114,9 @@
                            type="radio"
                            value="@Model.OptionalRadio.Value"
                            aria-describedby="@(!string.IsNullOrEmpty(Model.OptionalRadio.HintText) ? $"{Model.OptionalRadio.Value}-item-hint" : string.Empty)"
-                           data-val-required="@(Model.Required ? Model.RequiredClientSideErrorMessage : "")"
+                           data-val-required="@(Model.Required? Model.RequiredClientSideErrorMessage: "")"
                            data-val="@(Model.Required ? "true" : "false")"
-                    @(Model.OptionalRadio.Selected ? "checked" : string.Empty) />
+                           @(Model.OptionalRadio.Selected ? "checked" : string.Empty) />
                     <label class="nhsuk-label nhsuk-radios__label" for="@radioId">
                         @Model.OptionalRadio.Label
                     </label>
@@ -146,4 +146,4 @@
             });
         };
     </script>
-</div>
+</div>

NHSUKFrontendRazor/Views/Shared/Components/SkipLink/Default.cshtml

@@ -1,4 +1,4 @@
 @using NHSUKFrontendRazor.ViewModels
 @model SkipLinkViewModel
 
-<a class="nhsuk-skip-link" href="@Model.MaincContentID">@Model.Text</a>
+<a class="nhsuk-skip-link" data-module="nhsuk-skip-link" href="@Model.MainContentID">@Model.Text</a>