From dba7a7e82c7bfd2b25985fff1a84ca7016b41da2 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 13 May 2022 17:08:12 +0100 Subject: [PATCH 1/2] Allow for unlinked service names in header MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 2 +- src/govuk/components/header/_index.scss | 3 +++ src/govuk/components/header/header.yaml | 4 ++++ src/govuk/components/header/template.njk | 12 +++++++++--- src/govuk/components/header/template.test.js | 16 +++++++++++++--- 5 files changed, 30 insertions(+), 7 deletions(-) diff --git a/app/app.test.js b/app/app.test.js index 02d77cf13c..7388e4a1b6 100644 --- a/app/app.test.js +++ b/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) }) diff --git a/src/govuk/components/header/_index.scss b/src/govuk/components/header/_index.scss index 8d116eb89e..336fa28b45 100644 --- a/src/govuk/components/header/_index.scss +++ b/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); diff --git a/src/govuk/components/header/header.yaml b/src/govuk/components/header/header.yaml index 9cdb478abb..b8c5e1c462 100644 --- a/src/govuk/components/header/header.yaml +++ b/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: diff --git a/src/govuk/components/header/template.njk b/src/govuk/components/header/template.njk index 96dbed671a..915bcbbff4 100644 --- a/src/govuk/components/header/template.njk +++ b/src/govuk/components/header/template.njk @@ -49,9 +49,15 @@ {% if params.serviceName or params.navigation %}
{% if params.serviceName %} - - {{ params.serviceName }} - + {% if params.serviceUrl %} + + {{ params.serviceName }} + + {% else%} + + {{ params.serviceName }} + + {% endif %} {% endif %} {% if params.navigation %}