Merge pull request #1921 from alphagov/custom-html-links

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.

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,26 @@ 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:
+    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>

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 %}

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

@@ -142,13 +142,34 @@ 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('<em>Navigation item 1</em>')
+    })
+
+    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')
       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'])