From 142395a19b4bd9cc93dcc387255e32c4303fc021 Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Tue, 18 Aug 2020 18:20:11 +0100
Subject: [PATCH 1/3] Make it possible to exclude link from header nav

Currently if you don't pass a `href` the navigation item link won't render when
using the header macro. This PR changes the navigation link to render
without the link wrapper if `item.text` or `item.html` is set but `href`
isn't.

We would expect this to be mainly useful for rendering a form for instance
for adding a log out button. The team will need to style any enclosed form
elements or buttons correctly.
---
 src/govuk/components/header/header.yaml      | 21 +++++++++++++++++++-
 src/govuk/components/header/template.njk     | 10 +++++++---
 src/govuk/components/header/template.test.js | 14 +++++++++++++
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/govuk/components/header/header.yaml b/src/govuk/components/header/header.yaml
index 4cb7c2c87e..1e30bf4dfd 100644
--- a/src/govuk/components/header/header.yaml
+++ b/src/govuk/components/header/header.yaml
@@ -35,7 +35,7 @@ params:
   - name: href
     type: string
     required: false
-    description: Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item.
+    description: Url of the navigation item anchor.
   - name: active
     type: boolean
     required: false
@@ -233,6 +233,15 @@ examples:
       - href: '#3'
         html: <em>Navigation item 3</em>
 
+- name: navigation item with text without link
+  data:
+    serviceName: Service Name
+    serviceUrl: '/components/header'
+    navigation:
+      - text: Navigation item 1
+      - text: Navigation item 2
+      - text: Navigation item 3
+
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
 - name: attributes
   hidden: true
@@ -257,3 +266,13 @@ examples:
         attributes:
           data-attribute: my-attribute
           data-attribute-2: my-attribute-2
+- name: navigation item with html without link
+  hidden: true
+  data:
+    serviceName: Service Name
+    serviceUrl: '/components/header'
+    navigation:
+      - html: <em>Navigation item 1</em>
+        active: true
+      - html: <em>Navigation item 2</em>
+      - html: <em>Navigation item 3</em>
diff --git a/src/govuk/components/header/template.njk b/src/govuk/components/header/template.njk
index 0b31f33948..f8494664f2 100644
--- a/src/govuk/components/header/template.njk
+++ b/src/govuk/components/header/template.njk
@@ -64,11 +64,15 @@
     <nav>
       <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="{{ params.navigationLabel | default('Top Level Navigation') }}">
         {% for item in params.navigation %}
-          {% if item.href and (item.text or item.html) %}
+          {% if item.text or item.html %}
             <li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
-              <a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+              {% if item.href %}
+                <a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+              {% endif %}
                 {{ item.html | safe if item.html else item.text }}
-              </a>
+              {% if item.href %}
+                </a>
+              {% endif %}
             </li>
           {% endif %}
         {% endfor %}
diff --git a/src/govuk/components/header/template.test.js b/src/govuk/components/header/template.test.js
index 874b5ed4e2..a73d2c6b68 100644
--- a/src/govuk/components/header/template.test.js
+++ b/src/govuk/components/header/template.test.js
@@ -149,6 +149,20 @@ describe('header', () => {
       expect($navigationLink.html()).toContain('<em>Navigation item 1</em>')
     })
 
+    it('renders navigation item with text without a link', () => {
+      const $ = render('header', examples['navigation item with text without link'])
+
+      const $navigationItem = $('.govuk-header__navigation-item')
+      expect($navigationItem.html().trim()).toEqual('Navigation item 1')
+    })
+
+    it('renders navigation item with html without a link', () => {
+      const $ = render('header', examples['navigation item with html without link'])
+
+      const $navigationItem = $('.govuk-header__navigation-item')
+      expect($navigationItem.html()).toContain('<em>Navigation item 1</em>')
+    })
+
     it('renders navigation item anchor with attributes', () => {
       const $ = render('header', examples['navigation item with attributes'])
 

From 41e25bf33013dcab11eb7edbc65bd4fba1267604 Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Tue, 18 Aug 2020 19:41:42 +0100
Subject: [PATCH 2/3] Update changelog

---
 CHANGELOG.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 714ed7bee7..61c3e45fa8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,28 @@ This was added in [pull request #1925: Generate fixtures.json files for componen
 
 This was added in [pull request #1918: Add new brand colour for FCDO](https://github.com/alphagov/govuk-frontend/pull/1918).
 
+#### Render header navigation item without a link
+
+You can now render navigation items using the header macro without wrapping them in a link.
+
+You can do this by setting `text` or `html` and not setting `href`.
+
+For example:
+
+```javascript
+{{ govukHeader({
+  navigation: [
+    {
+      html: '<form method="post" action="url.com">
+              <input type="submit" class="app-logout-button-style" value="Log out" />
+            </form>'
+    }
+  ]
+}) }}
+```
+
+This was added in [pull request # 1921: Make it possible to exclude link from header navigation item](https://github.com/alphagov/govuk-frontend/pull/1921).
+
 #### Set navigation and mobile menu labels of the header with new options
 
 You can now customise the `aria-label` attributes of the navigation and mobile menu of the header component using the new `navigationLabel` and `menuButtonLabel` options.

From f3d5aaf2a44556b6bd3391aba49caa4f3650bc13 Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Wed, 2 Sep 2020 18:49:18 +0100
Subject: [PATCH 3/3] Improve existing test coverage for navigation item

---
 src/govuk/components/header/header.yaml      | 13 +++++++++++++
 src/govuk/components/header/template.test.js |  9 ++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/govuk/components/header/header.yaml b/src/govuk/components/header/header.yaml
index 1e30bf4dfd..b33e97e223 100644
--- a/src/govuk/components/header/header.yaml
+++ b/src/govuk/components/header/header.yaml
@@ -266,6 +266,19 @@ examples:
         attributes:
           data-attribute: my-attribute
           data-attribute-2: my-attribute-2
+- name: navigation item with html as text
+  hidden: true
+  data:
+    serviceName: Service Name
+    serviceUrl: '/components/header'
+    navigation:
+      - href: '#1'
+        text: <em>Navigation item 1</em>
+        active: true
+      - href: '#2'
+        text: <em>Navigation item 2</em>
+      - href: '#3'
+        text: <em>Navigation item 3</em>
 - name: navigation item with html without link
   hidden: true
   data:
diff --git a/src/govuk/components/header/template.test.js b/src/govuk/components/header/template.test.js
index a73d2c6b68..e09c40cc30 100644
--- a/src/govuk/components/header/template.test.js
+++ b/src/govuk/components/header/template.test.js
@@ -142,7 +142,14 @@ describe('header', () => {
       expect($activeItem.hasClass('govuk-header__navigation-item--active'))
     })
 
-    it('renders navigation item with html', () => {
+    it('allows navigation item text to be passed whilst escaping HTML entities', () => {
+      const $ = render('header', examples['navigation item with html as text'])
+
+      const $navigationLink = $('.govuk-header__navigation-item a')
+      expect($navigationLink.html()).toContain('&lt;em&gt;Navigation item 1&lt;/em&gt;')
+    })
+
+    it('allows navigation item HTML to be passed un-escaped', () => {
       const $ = render('header', examples['navigation item with html'])
 
       const $navigationLink = $('.govuk-header__navigation-item a')