Allow for unlinked service names in header

The header macro currently assumes that if there is a serviceName then there will always be a serviceUrl. If no serviceUrl is provided then the service name is wrapped with a link with an empty `href` attribute.

There’s not always a logical place to link the service name in the header to, so it makes sense to allow for service names that don’t link anywhere.

Update the macro so that when serviceUrl is omitted from the options a span is used to wrap the service name rather than a link.

As the current class used on the service name is a modifier for links (`govuk-header__link--service-name`) but will not be used on a link in this context, rename it to `govuk-header__service-name` to make it more generic.

Keep the old class name around as an alias to prevent this being a breaking change, but mark it as deprecated.

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