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', () => {