Do not make the service name in the header a link if no serviceUrl is provided

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+### Recommended changes
+
+#### Replace deprecated `govuk-header__link--service-name` class in the header
+
+If you're not using the Nunjucks macros, replace any instances in the header of the class `govuk-header__link--service-name` with `govuk-header__service-name`.
+
+We've deprecated the `govuk-header__link--service-name` class, and will remove it in a future major release.
+
+This change was introduced in [pull request #2617: Do not make the service name in the header a link if no `serviceUrl` is provided](https://github.com/alphagov/govuk-frontend/pull/2617).
+
+### Fixes
+
+We’ve made fixes to GOV.UK Frontend in the following pull requests:
+
+- [#2617: Do not make the service name in the header a link if no `serviceUrl` is provided](https://github.com/alphagov/govuk-frontend/pull/2617)
+
 ## 4.1.0 (Feature release)
 
 ### New features

app/app.test.js

@@ -165,7 +165,7 @@ describe(`http://localhost:${PORT}`, () => {
       requestPath(templatePath, (err, res) => {
         const $ = cheerio.load(res.body)
         const $header = $('.govuk-header')
-        const $serviceName = $header.find('.govuk-header__link--service-name')
+        const $serviceName = $header.find('.govuk-header__service-name')
         expect($serviceName.html()).toContain('Nom du service')
         done(err)
       })

src/govuk/components/header/_index.scss

@@ -142,6 +142,9 @@
     }
   }
 
+  // The govuk-header__link--service-name class is deprecated - use
+  // govuk-header__service-name instead.
+  .govuk-header__service-name,
   .govuk-header__link--service-name {
     display: inline-block;
     margin-bottom: govuk-spacing(2);

src/govuk/components/header/header.yaml

@@ -101,6 +101,10 @@ examples:
     serviceName: Service Name
     serviceUrl: '/components/header'
 
+- name: with service name but no service url
+  data:
+    serviceName: Service Name
+
 - name: with navigation
   data:
     navigation:

src/govuk/components/header/template.njk

@@ -49,9 +49,15 @@
     {% if params.serviceName or params.navigation  %}
     <div class="govuk-header__content">
     {% if params.serviceName %}
-    <a href="{{ params.serviceUrl }}" class="govuk-header__link govuk-header__link--service-name">
-      {{ params.serviceName }}
-    </a>
+    {% if params.serviceUrl %}
+      <a href="{{ params.serviceUrl }}" class="govuk-header__link govuk-header__service-name">
+        {{ params.serviceName }}
+      </a>
+    {% else%}
+      <span class="govuk-header__service-name">
+        {{ params.serviceName }}
+      </span>
+    {% endif %}
     {% endif %}
     {% if params.navigation %}
     <nav aria-label="{{ params.navigationLabel | default('Menu') }}" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}">

src/govuk/components/header/template.test.js

@@ -84,17 +84,27 @@ describe('header', () => {
       const $ = render('header', examples['with service name'])
 
       const $component = $('.govuk-header')
-      const $serviceName = $component.find('.govuk-header__link--service-name')
+      const $serviceName = $component.find('.govuk-header__service-name')
       expect($serviceName.text().trim()).toEqual('Service Name')
     })
 
-    it('renders with service url', () => {
+    it('wraps the service name with a link when a url is provided', () => {
       const $ = render('header', examples['with service name'])
 
       const $component = $('.govuk-header')
-      const $serviceName = $component.find('.govuk-header__link--service-name')
+      const $serviceName = $component.find('.govuk-header__service-name')
+      expect($serviceName.get(0).tagName).toEqual('a')
       expect($serviceName.attr('href')).toEqual('/components/header')
     })
+
+    it('does not use a link when no service url is provided', () => {
+      const $ = render('header', examples['with service name but no service url'])
+
+      const $component = $('.govuk-header')
+      const $serviceName = $component.find('.govuk-header__service-name')
+      expect($serviceName.get(0).tagName).toEqual('span')
+      expect($serviceName.attr('href')).toBeUndefined()
+    })
   })
 
   describe('with navigation', () => {