Upgrade to govuk-frontend 5.11.0

Author: gunndabad

CHANGELOG.md

@@ -2,13 +2,21 @@
 
 ## Unreleased
 
+Targets GOV.UK Frontend v5.11.0.
+
 ### Asset hosting changes
+
 An additional call is now required to add the middleware that hosts the govuk-frontend assets.
 In your `Program.cs` file, add the following line after `var app = builder.Build();`:
 ```csharp
 app.UseGovUkFrontend();
 ```
 
+### Tag helper changes
+
+#### `<govuk-service-navigation-nav>` tag helper
+A `collapse-navigation-on-mobile` attribute has been added to control whether the service navigation is collapsed on mobile devices.
+
 ## 3.1.2
 
 ### Fixes

Directory.Build.props

@@ -5,7 +5,7 @@
     <RepoRoot>$([MSBuild]::EnsureTrailingSlash('$(MSBuildThisFileDirectory)'))</RepoRoot>
     <Nullable>enable</Nullable>
     <PackageOutputPath>$([MSBuild]::NormalizeDirectory('$(RepoRoot)', 'packages'))</PackageOutputPath>
-    <GovUkFrontendVersion>5.10.2</GovUkFrontendVersion>
+    <GovUkFrontendVersion>5.11.0</GovUkFrontendVersion>
 
     <CoreLibMinVerTagPrefix>v</CoreLibMinVerTagPrefix>
     <CoreLibMinVerMinimumMajorMinor>3.2</CoreLibMinVerMinimumMajorMinor>

README.md

@@ -1,5 +1,5 @@
 
-[![GOV.UK Design System version](https://img.shields.io/badge/GOV.UK%20Design%20System-5.10.2-brightgreen)](https://github.com/alphagov/govuk-frontend/releases/tag/v5.10.2)
+[![GOV.UK Design System version](https://img.shields.io/badge/GOV.UK%20Design%20System-5.11.0-brightgreen)](https://github.com/alphagov/govuk-frontend/releases/tag/v5.11.0)
 [![CI](https://github.com/x-govuk/govuk-frontend-aspnetcore/workflows/ci/badge.svg)](https://github.com/x-govuk/govuk-frontend-aspnetcore/actions/workflows/ci.yml)
 [![NuGet Downloads](https://img.shields.io/nuget/dt/GovUk.Frontend.AspNetCore)](https://www.nuget.org/packages/GovUk.Frontend.AspNetCore)
 

docs/components/service-navigation.md

@@ -44,6 +44,7 @@ Must be inside a `<govuk-service-navigation>` element.
 | Attribute | Type | Description |
 | --- | --- | --- |
 | `aria-label` | `string` | The text for the `aria-label` which labels the service navigation container when a service name is included. If not specified, "Service information" will be used. |
+| `collapse-navigation-on-mobile` | `bool?` | Whether the navigation should be collapsed inside a menu on mobile. If not specified, the navigation will be collapsed on mobile if there is more than one navigation item. |
 | `id` | `string` | The ID used to associate the mobile navigation toggle with the navigation menu. If not specified, `navigation` will be used. |
 | `label` | `string` | The screen reader label for the mobile navigation menu. If not specified, the value of the `menu-button-text` attribute will be used. |
 | `menu-button-label` | `string` | The screen reader label for the mobile navigation menu toggle. If not specified, the value of the `menu-button-text` attribute will be used. |

src/GovUk.Frontend.AspNetCore.Docs/GovUk.Frontend.AspNetCore.xml

@@ -12,6 +12,7 @@ public record ServiceNavigationOptions
     public TemplateString? NavigationLabel { get; set; }
     public TemplateString? NavigationId { get; set; }
     public TemplateString? NavigationClasses { get; set; }
+    public bool? CollapseNavigationOnMobile { get; set; }
     public TemplateString? ServiceName { get; set; }
     public TemplateString? ServiceUrl { get; set; }
     public IReadOnlyCollection<ServiceNavigationOptionsNavigationItem>? Navigation { get; set; }

src/GovUk.Frontend.AspNetCore/ComponentGeneration/ServiceNavigationOptions.cs

@@ -43,8 +43,8 @@
   use alongide the Tudor Crown, so don't bother with offsetting for the
   St. Edward's Crown. {% endcomment %}
   {%- capture _dotLogotype %}
-    <circle class="govuk-logo-dot" cx="227" cy="36" r="7.3"/>
-    <path d="M94.7,36.1c0,1.9.2,3.6.7,5.4.5,1.7,1.2,3.2,2.1,4.5.9,1.3,2.2,2.4,3.6,3.2,1.5.8,3.2,1.2,5.3,1.2s3.6-.3,4.9-.9c1.3-.6,2.3-1.4,3.1-2.3.8-.9,1.3-2,1.6-3,.3-1.1.5-2.1.5-3v-.4h-11v-6.6h19.5v24h-7.7v-5.4c-.5.8-1.2,1.6-2,2.3-.8.7-1.7,1.3-2.7,1.8-1,.5-2.1.9-3.3,1.2-1.2.3-2.5.4-3.8.4-3.2,0-6-.6-8.4-1.7-2.5-1.1-4.5-2.7-6.2-4.7-1.7-2-3-4.4-3.8-7.1-.9-2.7-1.3-5.6-1.3-8.7s.5-6,1.5-8.7,2.4-5.1,4.2-7.1c1.8-2,4-3.6,6.5-4.7s5.4-1.7,8.6-1.7,4,.2,5.9.7c1.8.5,3.5,1.1,5.1,2,1.5.9,2.9,1.9,4,3.2,1.2,1.2,2.1,2.6,2.8,4.1l-7.7,4.3c-.5-.9-1-1.8-1.6-2.6-.6-.8-1.3-1.5-2.2-2.1-.8-.6-1.7-1-2.8-1.4-1-.3-2.2-.5-3.5-.5-2,0-3.8.4-5.3,1.2s-2.7,1.9-3.6,3.2c-.9,1.3-1.7,2.8-2.1,4.6s-.7,3.5-.7,5.3v.3h0ZM152.9,13.7c3.2,0,6.1.6,8.7,1.7,2.6,1.2,4.7,2.7,6.5,4.7,1.8,2,3.1,4.4,4.1,7.1s1.4,5.6,1.4,8.7-.5,6-1.4,8.7c-.9,2.7-2.3,5.1-4.1,7.1s-4,3.6-6.5,4.7c-2.6,1.1-5.5,1.7-8.7,1.7s-6.1-.6-8.7-1.7c-2.6-1.1-4.7-2.7-6.5-4.7-1.8-2-3.1-4.4-4.1-7.1-.9-2.7-1.4-5.6-1.4-8.7s.5-6,1.4-8.7,2.3-5.1,4.1-7.1c1.8-2,4-3.6,6.5-4.7s5.4-1.7,8.7-1.7h0ZM152.9,50.4c1.9,0,3.6-.4,5-1.1,1.4-.7,2.7-1.7,3.6-3,1-1.3,1.7-2.8,2.2-4.5.5-1.7.8-3.6.8-5.7v-.2c0-2-.3-3.9-.8-5.7-.5-1.7-1.3-3.3-2.2-4.5-1-1.3-2.2-2.3-3.6-3-1.4-.7-3.1-1.1-5-1.1s-3.6.4-5,1.1c-1.5.7-2.7,1.7-3.6,3s-1.7,2.8-2.2,4.5c-.5,1.7-.8,3.6-.8,5.7v.2c0,2.1.3,4,.8,5.7.5,1.7,1.2,3.2,2.2,4.5,1,1.3,2.2,2.3,3.6,3,1.5.7,3.1,1.1,5,1.1ZM189.1,58l-12.3-44h9.8l8.4,32.9h.3l8.2-32.9h9.7l-12.3,44M262.9,50.4c1.3,0,2.5-.2,3.6-.6,1.1-.4,2-.9,2.8-1.7.8-.8,1.4-1.7,1.9-2.9.5-1.2.7-2.5.7-4.1V14h8.6v28.5c0,2.4-.4,4.6-1.3,6.6-.9,2-2.1,3.6-3.7,5-1.6,1.4-3.4,2.4-5.6,3.2-2.2.7-4.5,1.1-7.1,1.1s-4.9-.4-7.1-1.1c-2.2-.7-4-1.8-5.6-3.2s-2.8-3-3.7-5c-.9-2-1.3-4.1-1.3-6.6V14h8.7v27.2c0,1.6.2,2.9.7,4.1.5,1.2,1.1,2.1,1.9,2.9.8.8,1.7,1.3,2.8,1.7s2.3.6,3.6.6h0ZM288.5,14h8.7v19.1l15.5-19.1h10.8l-15.1,17.6,16.1,26.4h-10.2l-11.5-19.7-5.6,6.3v13.5h-8.7"/>
+    <circle class="govuk-logo-dot" cx="226" cy="36" r="7.3"/>
+    <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"/>
   {%- endcapture %}
 
   {%- comment %} The SVG needs `focusable="false"` so that Internet Explorer does not treat

src/GovUk.Frontend.AspNetCore/ComponentGeneration/Templates/logo.macro.liquid

@@ -31,11 +31,14 @@ data-module="govuk-service-navigation"
 
       {% comment %} Navigation {% endcomment %}
       {% assign navigationItems = params.navigation %}
+      {% assign collapseNavigationOnMobile = params.collapseNavigationOnMobile | default: (navigationItems.size > 1), allow_false: true %}
       {% if navigationItems.size > 0 or params.slots.navigationStart or params.slots.navigationEnd %}
         <nav aria-label="{{ params.navigationLabel | default: menuButtonText }}" class="govuk-service-navigation__wrapper {%- if params.navigationClasses %} {{ params.navigationClasses }}{% endif %} {{- govukAttributes(params.navigationAttributes) }}">
+          {% if collapseNavigationOnMobile %}
           <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="{{ navigationId }}" {%- if params.menuButtonLabel and params.menuButtonLabel != menuButtonText %} aria-label="{{ params.menuButtonLabel }}"{% endif %} hidden>
             {{ menuButtonText }}
           </button>
+          {% endif %}
 
           <ul class="govuk-service-navigation__list" id="{{ navigationId }}" >
 

src/GovUk.Frontend.AspNetCore/ComponentGeneration/Templates/service-navigation.liquid

@@ -10,6 +10,7 @@ internal class ServiceNavigationNavContext
     public string? MenuButtonLabel { get; set; }
     public string? Label { get; set; }
     public string? Id { get; set; }
+    public bool? CollapseNavigationOnMobile { get; set; }
     public AttributeCollection? Attributes { get; set; }
     public List<ServiceNavigationOptionsNavigationItem> Items { get; } = new();
     public string? FirstItemTagName { get; set; }

src/GovUk.Frontend.AspNetCore/TagHelpers/ServiceNavigationNavContext.cs

@@ -21,6 +21,7 @@ public class ServiceNavigationNavTagHelper : TagHelper
     //internal const string ShortTagName = ShortTagNames.Nav;
 
     private const string AriaLabelAttributeName = "aria-label";
+    private const string CollapseNavigationOnMobileAttributeName = "collapse-navigation-on-mobile";
     private const string MenuButtonTextAttributeName = "menu-button-text";
     private const string MenuButtonLabelAttributeName = "menu-button-label";
     private const string LabelAttributeName = "label";
@@ -35,6 +36,15 @@ public class ServiceNavigationNavTagHelper : TagHelper
     [HtmlAttributeName(AriaLabelAttributeName)]
     public string? AriaLabel { get; set; }
 
+    /// <summary>
+    /// Whether the navigation should be collapsed inside a menu on mobile.
+    /// </summary>
+    /// <remarks>
+    /// If not specified, the navigation will be collapsed on mobile if there is more than one navigation item.
+    /// </remarks>
+    [HtmlAttributeName(CollapseNavigationOnMobileAttributeName)]
+    public bool? CollapseNavigationOnMobile { get; set; }
+
     /// <summary>
     /// The text of the mobile navigation menu toggle.
     /// </summary>
@@ -101,6 +111,7 @@ public override async Task ProcessAsync(TagHelperContext context, TagHelperOutpu
         navContext.MenuButtonLabel = MenuButtonLabel;
         navContext.Label = Label;
         navContext.Id = Id;
+        navContext.CollapseNavigationOnMobile = CollapseNavigationOnMobile;
         navContext.Attributes = attributes;
 
         serviceNavigationContext.Nav = navContext;