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 01/22] 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 2cb944207840c070de95e716c7c5e05dc93fe7ad Mon Sep 17 00:00:00 2001
From: Vanita Barrett <vanita.barrett@digital.cabinet-office.gov.uk>
Date: Thu, 3 Sep 2020 15:15:22 +0100
Subject: [PATCH 02/22] Change header menu button label

Change header menu button label from "Show or Hide Top Level Navigation" to "Show or hide navigation menu"
Change menu label from "Top Level Navigation" to "Navigation menu"
---
 src/govuk/components/header/header.yaml      | 4 ++--
 src/govuk/components/header/template.njk     | 4 ++--
 src/govuk/components/header/template.test.js | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/govuk/components/header/header.yaml b/src/govuk/components/header/header.yaml
index 4cb7c2c87e..c1a78835ce 100644
--- a/src/govuk/components/header/header.yaml
+++ b/src/govuk/components/header/header.yaml
@@ -51,11 +51,11 @@ params:
 - name: navigationLabel
   type: string
   required: false
-  description: Text for the `aria-label` attribute of the navigation. Defaults to "Top Level Navigation".
+  description: Text for the `aria-label` attribute of the navigation. Defaults to "Navigation menu".
 - name: menuButtonLabel
   type: string
   required: false
-  description: Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to "Show or hide Top Level Navigation".
+  description: Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to "Show or hide navigation menu".
 - name: containerClasses
   type: string
   required: false
diff --git a/src/govuk/components/header/template.njk b/src/govuk/components/header/template.njk
index 0b31f33948..d9a364d877 100644
--- a/src/govuk/components/header/template.njk
+++ b/src/govuk/components/header/template.njk
@@ -60,9 +60,9 @@
     </a>
     {% endif %}
     {% if params.navigation %}
-    <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide Top Level Navigation') }}">Menu</button>
+    <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide navigation menu') }}">Menu</button>
     <nav>
-      <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="{{ params.navigationLabel | default('Top Level Navigation') }}">
+      <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="{{ params.navigationLabel | default('Navigation menu') }}">
         {% for item in params.navigation %}
           {% if item.href and (item.text or item.html) %}
             <li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
diff --git a/src/govuk/components/header/template.test.js b/src/govuk/components/header/template.test.js
index 874b5ed4e2..f90f945550 100644
--- a/src/govuk/components/header/template.test.js
+++ b/src/govuk/components/header/template.test.js
@@ -123,7 +123,7 @@ describe('header', () => {
       const $component = $('.govuk-header')
       const $list = $component.find('ul.govuk-header__navigation')
 
-      expect($list.attr('aria-label')).toEqual('Top Level Navigation')
+      expect($list.attr('aria-label')).toEqual('Navigation menu')
     })
 
     it('allows navigation label to be customised', () => {
@@ -170,7 +170,7 @@ describe('header', () => {
 
         const $button = $('.govuk-header__menu-button')
 
-        expect($button.attr('aria-label')).toEqual('Show or hide Top Level Navigation')
+        expect($button.attr('aria-label')).toEqual('Show or hide navigation menu')
       })
       it('allows label to be customised', () => {
         const $ = render('header', examples['with custom menu button label'])

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 03/22] 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 04/22] 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')

From 01c9c9cbe5b7a84088581a8b20c195dbe819655a Mon Sep 17 00:00:00 2001
From: Vanita Barrett <vanita.barrett@digital.cabinet-office.gov.uk>
Date: Thu, 3 Sep 2020 16:29:27 +0100
Subject: [PATCH 05/22] Add to Changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 714ed7bee7..8ce0d24170 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,13 @@ For example:
 
 This was added in [pull request #1905: Set navigation and mobile menu labels of the header component with new options](https://github.com/alphagov/govuk-frontend/pull/1905).
 
+### Fixes
+
+We’ve made fixes to GOV.UK Frontend in the following pull requests:
+
+- [#1943: Change header menu button label](https://github.com/alphagov/govuk-frontend/pull/1943)
+
+
 ## 3.8.1 (Fix release)
 
 ### Fixes

From 790c2eb46ab22f708826736579bec669c9bd2d6b Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Thu, 3 Sep 2020 09:34:31 +0100
Subject: [PATCH 06/22] Use (polyfilled) classList.toggle function

---
 src/govuk/components/header/header.js | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/govuk/components/header/header.js b/src/govuk/components/header/header.js
index 85caddb7d9..e019f05236 100644
--- a/src/govuk/components/header/header.js
+++ b/src/govuk/components/header/header.js
@@ -1,5 +1,6 @@
 import '../../vendor/polyfills/Function/prototype/bind'
 import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
+import '../../vendor/polyfills/Element/prototype/classList'
 
 function Header ($module) {
   this.$module = $module
@@ -22,19 +23,6 @@ Header.prototype.init = function () {
   $toggleButton.addEventListener('click', this.handleClick.bind(this))
 }
 
-/**
-* Toggle class
-* @param {object} node element
-* @param {string} className to toggle
-*/
-Header.prototype.toggleClass = function (node, className) {
-  if (node.className.indexOf(className) > 0) {
-    node.className = node.className.replace(' ' + className, '')
-  } else {
-    node.className += ' ' + className
-  }
-}
-
 /**
 * An event handler for click event on $toggleButton
 * @param {object} event event
@@ -46,8 +34,8 @@ Header.prototype.handleClick = function (event) {
 
   // If a button with aria-controls, handle click
   if ($toggleButton && $target) {
-    this.toggleClass($target, 'govuk-header__navigation--open')
-    this.toggleClass($toggleButton, 'govuk-header__menu-button--open')
+    $target.classList.toggle('govuk-header__navigation--open')
+    $toggleButton.classList.toggle('govuk-header__menu-button--open')
 
     $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true')
     $target.setAttribute('aria-hidden', $target.getAttribute('aria-hidden') === 'false')

From 453c47cff60e0bf1fe4e0208b89be7e2c1c1ef79 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Thu, 3 Sep 2020 09:45:54 +0100
Subject: [PATCH 07/22] Define visibility once and sync state together

'Flipping' the different state attributes individually allows for them to get out of sync with each other.

Instead, define the visible 'state' once, based on the return value from classList.toggle (true if the `--open` modifier is now present, false if it's removed) and set the other attributes based on this.
---
 src/govuk/components/header/header.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/govuk/components/header/header.js b/src/govuk/components/header/header.js
index e019f05236..11e0d39727 100644
--- a/src/govuk/components/header/header.js
+++ b/src/govuk/components/header/header.js
@@ -34,11 +34,12 @@ Header.prototype.handleClick = function (event) {
 
   // If a button with aria-controls, handle click
   if ($toggleButton && $target) {
-    $target.classList.toggle('govuk-header__navigation--open')
-    $toggleButton.classList.toggle('govuk-header__menu-button--open')
+    var isVisible = $target.classList.toggle('govuk-header__navigation--open')
 
-    $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true')
-    $target.setAttribute('aria-hidden', $target.getAttribute('aria-hidden') === 'false')
+    $toggleButton.classList.toggle('govuk-header__menu-button--open', isVisible)
+
+    $toggleButton.setAttribute('aria-expanded', isVisible)
+    $target.setAttribute('aria-hidden', !isVisible)
   }
 }
 

From 760ad181cd15cc908a9a6aa06635fa81174f1828 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Thu, 3 Sep 2020 10:52:21 +0100
Subject: [PATCH 08/22] Fix typo in comment

---
 src/govuk/components/header/header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/govuk/components/header/header.js b/src/govuk/components/header/header.js
index 11e0d39727..9fd4281d28 100644
--- a/src/govuk/components/header/header.js
+++ b/src/govuk/components/header/header.js
@@ -1,5 +1,5 @@
 import '../../vendor/polyfills/Function/prototype/bind'
-import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
+import '../../vendor/polyfills/Event' // addEventListener and event.target normalization
 import '../../vendor/polyfills/Element/prototype/classList'
 
 function Header ($module) {

From 18771ce405032414bb1d3bfb322590f72fe367f2 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Thu, 3 Sep 2020 11:33:33 +0100
Subject: [PATCH 09/22] Expose aria attributes when initialising

Expose the hidden / collapsed state of the navigation on page load, rather than only after the menu button to be interacted with for the first time.

Find the menu button and menu when the module is initialised and store them in the instance so we can easily sync them without having to pass references to the button and menu between functions.

Add tests to check the aria state of the menu and menu button when the page is first loaded.
---
 src/govuk/components/header/header.js      | 65 ++++++++++++----------
 src/govuk/components/header/header.test.js | 25 +++++++++
 2 files changed, 61 insertions(+), 29 deletions(-)

diff --git a/src/govuk/components/header/header.js b/src/govuk/components/header/header.js
index 9fd4281d28..84eb54f8d3 100644
--- a/src/govuk/components/header/header.js
+++ b/src/govuk/components/header/header.js
@@ -1,46 +1,53 @@
-import '../../vendor/polyfills/Function/prototype/bind'
-import '../../vendor/polyfills/Event' // addEventListener and event.target normalization
+import '../../vendor/polyfills/Event'
 import '../../vendor/polyfills/Element/prototype/classList'
+import '../../vendor/polyfills/Function/prototype/bind'
 
 function Header ($module) {
   this.$module = $module
+  this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle')
+  this.$menu = this.$menuButton && $module.querySelector(
+    '#' + this.$menuButton.getAttribute('aria-controls')
+  )
 }
 
+/**
+ * Initialise header
+ *
+ * Check for the presence of the header, menu and menu button – if any are
+ * missing then there's nothing to do so return early.
+ */
 Header.prototype.init = function () {
-  // Check for module
-  var $module = this.$module
-  if (!$module) {
-    return
-  }
-
-  // Check for button
-  var $toggleButton = $module.querySelector('.govuk-js-header-toggle')
-  if (!$toggleButton) {
+  if (!this.$module || !this.$menuButton || !this.$menu) {
     return
   }
 
-  // Handle $toggleButton click events
-  $toggleButton.addEventListener('click', this.handleClick.bind(this))
+  this.syncState(this.$menu.classList.contains('govuk-header__navigation--open'))
+  this.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind(this))
 }
 
 /**
-* An event handler for click event on $toggleButton
-* @param {object} event event
-*/
-Header.prototype.handleClick = function (event) {
-  var $module = this.$module
-  var $toggleButton = event.target || event.srcElement
-  var $target = $module.querySelector('#' + $toggleButton.getAttribute('aria-controls'))
-
-  // If a button with aria-controls, handle click
-  if ($toggleButton && $target) {
-    var isVisible = $target.classList.toggle('govuk-header__navigation--open')
-
-    $toggleButton.classList.toggle('govuk-header__menu-button--open', isVisible)
+ * Sync menu state
+ *
+ * Sync the menu button class and the accessible state of the menu and the menu
+ * button with the visible state of the menu
+ *
+ * @param {boolean} isVisible Whether the menu is currently visible
+ */
+Header.prototype.syncState = function (isVisible) {
+  this.$menuButton.classList.toggle('govuk-header__menu-button--open', isVisible)
+  this.$menuButton.setAttribute('aria-expanded', isVisible)
+  this.$menu.setAttribute('aria-hidden', !isVisible)
+}
 
-    $toggleButton.setAttribute('aria-expanded', isVisible)
-    $target.setAttribute('aria-hidden', !isVisible)
-  }
+/**
+ * Handle menu button click
+ *
+ * When the menu button is clicked, change the visibility of the menu and then
+ * sync the accessibility state and menu button state
+ */
+Header.prototype.handleMenuButtonClick = function () {
+  var isVisible = this.$menu.classList.toggle('govuk-header__navigation--open')
+  this.syncState(isVisible)
 }
 
 export default Header
diff --git a/src/govuk/components/header/header.test.js b/src/govuk/components/header/header.test.js
index c99dc58f34..4cac9aa592 100644
--- a/src/govuk/components/header/header.test.js
+++ b/src/govuk/components/header/header.test.js
@@ -31,6 +31,31 @@ describe('/components/header', () => {
     })
 
     describe('when JavaScript is available', () => {
+      describe('when no navigation is present', () => {
+        it('exits gracefully with no errors', async () => {
+          // Errors logged to the console will cause this test to fail
+          await page.goto(baseUrl + '/components/header/preview', { waitUntil: 'load' })
+        })
+      })
+
+      describe('on page load', () => {
+        beforeAll(async () => {
+          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+        })
+
+        it('exposes the hidden state of the menu using aria-hidden', async () => {
+          const ariaHidden = await page.$eval('.govuk-header__navigation', el => el.getAttribute('aria-hidden'))
+
+          expect(ariaHidden).toBe('true')
+        })
+
+        it('exposes the collapsed state of the menu button using aria-expanded', async () => {
+          const ariaExpanded = await page.$eval('.govuk-header__menu-button', el => el.getAttribute('aria-expanded'))
+
+          expect(ariaExpanded).toBe('false')
+        })
+      })
+
       describe('when menu button is pressed', () => {
         it('should indicate the open state of the toggle button', async () => {
           await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })

From a35849b5c4b124e626316a9b01ff7894b0d66140 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Thu, 3 Sep 2020 11:50:30 +0100
Subject: [PATCH 10/22] Update existing tests

- Perform navigations once in a beforeAll, rather than in every test individually
- Use page.$eval rather than page.evaluate
- Re-format to avoid long lines
- Improve test descriptions
---
 src/govuk/components/header/header.test.js | 193 +++++++++++----------
 1 file changed, 103 insertions(+), 90 deletions(-)

diff --git a/src/govuk/components/header/header.test.js b/src/govuk/components/header/header.test.js
index 4cac9aa592..a8a7544c4e 100644
--- a/src/govuk/components/header/header.test.js
+++ b/src/govuk/components/header/header.test.js
@@ -7,133 +7,146 @@ const PORT = configPaths.ports.test
 
 const baseUrl = 'http://localhost:' + PORT
 
-beforeAll(async (done) => {
-  await page.emulate(iPhone)
-  done()
-})
+describe('Header navigation', () => {
+  beforeAll(async (done) => {
+    await page.emulate(iPhone)
+    done()
+  })
 
-describe('/components/header', () => {
-  describe('/components/header/with-navigation/preview', () => {
-    describe('when JavaScript is unavailable or fails', () => {
-      beforeAll(async () => {
-        await page.setJavaScriptEnabled(false)
+  describe('when JavaScript is unavailable or fails', () => {
+    beforeAll(async () => {
+      await page.setJavaScriptEnabled(false)
+      await page.goto(`${baseUrl}/components/header/with-navigation/preview`, {
+        waitUntil: 'load'
       })
+    })
 
-      afterAll(async () => {
-        await page.setJavaScriptEnabled(true)
-      })
+    afterAll(async () => {
+      await page.setJavaScriptEnabled(true)
+    })
 
-      it('falls back to making the navigation visible', async () => {
-        await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
-        const isContentVisible = await page.waitForSelector('.govuk-header__navigation', { visible: true, timeout: 1000 })
-        expect(isContentVisible).toBeTruthy()
+    it('shows the navigation', async () => {
+      await expect(page).toMatchElement('.govuk-header__navigation', {
+        visible: true,
+        timeout: 1000
       })
     })
+  })
 
-    describe('when JavaScript is available', () => {
-      describe('when no navigation is present', () => {
-        it('exits gracefully with no errors', async () => {
-          // Errors logged to the console will cause this test to fail
-          await page.goto(baseUrl + '/components/header/preview', { waitUntil: 'load' })
+  describe('when JavaScript is available', () => {
+    describe('when no navigation is present', () => {
+      it('exits gracefully with no errors', async () => {
+        // Errors logged to the console will cause this test to fail
+        await page.goto(`${baseUrl}/components/header/preview`, {
+          waitUntil: 'load'
         })
       })
+    })
 
-      describe('on page load', () => {
-        beforeAll(async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
-        })
-
-        it('exposes the hidden state of the menu using aria-hidden', async () => {
-          const ariaHidden = await page.$eval('.govuk-header__navigation', el => el.getAttribute('aria-hidden'))
-
-          expect(ariaHidden).toBe('true')
-        })
-
-        it('exposes the collapsed state of the menu button using aria-expanded', async () => {
-          const ariaExpanded = await page.$eval('.govuk-header__menu-button', el => el.getAttribute('aria-expanded'))
-
-          expect(ariaExpanded).toBe('false')
+    describe('on page load', () => {
+      beforeAll(async () => {
+        await page.goto(`${baseUrl}/components/header/with-navigation/preview`, {
+          waitUntil: 'load'
         })
       })
 
-      describe('when menu button is pressed', () => {
-        it('should indicate the open state of the toggle button', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+      it('exposes the hidden state of the menu using aria-hidden', async () => {
+        const ariaHidden = await page.$eval('.govuk-header__navigation',
+          el => el.getAttribute('aria-hidden')
+        )
 
-          await page.click('.govuk-js-header-toggle')
-
-          const toggleButtonIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').classList.contains('govuk-header__menu-button--open'))
-          expect(toggleButtonIsOpen).toBeTruthy()
-        })
+        expect(ariaHidden).toBe('true')
+      })
 
-        it('should indicate the expanded state of the toggle button using aria-expanded', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+      it('exposes the collapsed state of the menu button using aria-expanded', async () => {
+        const ariaExpanded = await page.$eval('.govuk-header__menu-button',
+          el => el.getAttribute('aria-expanded')
+        )
 
-          await page.click('.govuk-js-header-toggle')
+        expect(ariaExpanded).toBe('false')
+      })
+    })
 
-          const toggleButtonAriaExpanded = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').getAttribute('aria-expanded'))
-          expect(toggleButtonAriaExpanded).toBe('true')
+    describe('when menu button is pressed', () => {
+      beforeAll(async () => {
+        await page.goto(`${baseUrl}/components/header/with-navigation/preview`, {
+          waitUntil: 'load'
         })
+        await page.click('.govuk-js-header-toggle')
+      })
 
-        it('should indicate the open state of the navigation', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+      it('adds the --open modifier class to the menu, making it visible', async () => {
+        const hasOpenClass = await page.$eval('.govuk-header__navigation',
+          el => el.classList.contains('govuk-header__navigation--open')
+        )
 
-          await page.click('.govuk-js-header-toggle')
+        expect(hasOpenClass).toBeTruthy()
+      })
 
-          const navigationIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').classList.contains('govuk-header__navigation--open'))
-          expect(navigationIsOpen).toBeTruthy()
-        })
+      it('adds the --open modifier class to the menu button', async () => {
+        const hasOpenClass = await page.$eval('.govuk-header__menu-button',
+          el => el.classList.contains('govuk-header__menu-button--open')
+        )
 
-        it('should indicate the visible state of the navigation using aria-hidden', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+        expect(hasOpenClass).toBeTruthy()
+      })
 
-          await page.click('.govuk-js-header-toggle')
+      it('exposes the visible state of the menu using aria-hidden', async () => {
+        const ariaHidden = await page.$eval('.govuk-header__navigation',
+          el => el.getAttribute('aria-hidden')
+        )
 
-          const navigationAriaHidden = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').getAttribute('aria-hidden'))
-          expect(navigationAriaHidden).toBe('false')
-        })
+        expect(ariaHidden).toBe('false')
       })
 
-      describe('when menu button is pressed twice', () => {
-        it('should indicate the open state of the toggle button', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+      it('exposes the expanded state of the menu button using aria-expanded', async () => {
+        const ariaExpanded = await page.$eval('.govuk-header__menu-button',
+          el => el.getAttribute('aria-expanded')
+        )
 
-          await page.click('.govuk-js-header-toggle')
-          await page.click('.govuk-js-header-toggle')
+        expect(ariaExpanded).toBe('true')
+      })
+    })
 
-          const toggleButtonIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').classList.contains('govuk-header__menu-button--open'))
-          expect(toggleButtonIsOpen).toBeFalsy()
+    describe('when menu button is pressed twice', () => {
+      beforeAll(async () => {
+        await page.goto(`${baseUrl}/components/header/with-navigation/preview`, {
+          waitUntil: 'load'
         })
+        await page.click('.govuk-js-header-toggle')
+        await page.click('.govuk-js-header-toggle')
+      })
 
-        it('should indicate the expanded state of the toggle button using aria-expanded', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
-
-          await page.click('.govuk-js-header-toggle')
-          await page.click('.govuk-js-header-toggle')
+      it('removes the --open modifier class from the menu, hiding it', async () => {
+        const hasOpenClass = await page.$eval('.govuk-header__navigation',
+          el => el.classList.contains('govuk-header__navigation--open')
+        )
 
-          const toggleButtonAriaExpanded = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').getAttribute('aria-expanded'))
-          expect(toggleButtonAriaExpanded).toBe('false')
-        })
+        expect(hasOpenClass).toBeFalsy()
+      })
 
-        it('should indicate the open state of the navigation', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+      it('removes the --open modifier class from the menu button', async () => {
+        const hasOpenClass = await page.$eval('.govuk-header__menu-button',
+          el => el.classList.contains('govuk-header__menu-button--open')
+        )
 
-          await page.click('.govuk-js-header-toggle')
-          await page.click('.govuk-js-header-toggle')
+        expect(hasOpenClass).toBeFalsy()
+      })
 
-          const navigationIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').classList.contains('govuk-header__navigation--open'))
-          expect(navigationIsOpen).toBeFalsy()
-        })
+      it('exposes the hidden state of the menu using aria-hidden', async () => {
+        const ariaHidden = await page.$eval('.govuk-header__navigation',
+          el => el.getAttribute('aria-hidden')
+        )
 
-        it('should indicate the visible state of the navigation using aria-hidden', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+        expect(ariaHidden).toBe('true')
+      })
 
-          await page.click('.govuk-js-header-toggle')
-          await page.click('.govuk-js-header-toggle')
+      it('exposes the collapsed state of the menu button using aria-expanded', async () => {
+        const ariaExpanded = await page.$eval('.govuk-header__menu-button',
+          el => el.getAttribute('aria-expanded')
+        )
 
-          const navigationAriaHidden = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').getAttribute('aria-hidden'))
-          expect(navigationAriaHidden).toBe('true')
-        })
+        expect(ariaExpanded).toBe('false')
       })
     })
   })

From 4e770596354f4c1011e021af972e29a060097c66 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Thu, 3 Sep 2020 15:35:10 +0100
Subject: [PATCH 11/22] Document in CHANGELOG

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a2bb241891..255b89fc4f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -55,7 +55,7 @@ This was added in [pull request #1905: Set navigation and mobile menu labels of
 We’ve made fixes to GOV.UK Frontend in the following pull requests:
 
 - [#1943: Change header menu button label](https://github.com/alphagov/govuk-frontend/pull/1943)
-
+- [#1942: Set aria-expanded and aria-hidden attributes on header menu button and menu when page loads](https://github.com/alphagov/govuk-frontend/pull/1942)
 
 ## 3.8.1 (Fix release)
 

From 02eaf042a8123563697bb57c7717a60a97d4846a Mon Sep 17 00:00:00 2001
From: Simon Whatley <simonwhatley@gmail.com>
Date: Fri, 22 May 2020 21:12:06 +0100
Subject: [PATCH 12/22] Add prefix and suffix

---
 src/govuk/components/input/_index.scss  |  52 +++++++++++
 src/govuk/components/input/input.yaml   | 114 +++++++++++++++++++++++-
 src/govuk/components/input/template.njk |  37 ++++++--
 3 files changed, 194 insertions(+), 9 deletions(-)

diff --git a/src/govuk/components/input/_index.scss b/src/govuk/components/input/_index.scss
index 17632e077d..3809f06ab3 100644
--- a/src/govuk/components/input/_index.scss
+++ b/src/govuk/components/input/_index.scss
@@ -91,4 +91,56 @@
     max-width: 5.4ex;
   }
 
+  .govuk-input__wrapper {
+    display: flex;
+    display: -ms-flexbox; // sass-lint:disable-line no-duplicate-properties
+
+    .govuk-input {
+      display: inline-block;
+      flex: 0 1 auto;
+    }
+
+    .govuk-input:focus {
+      z-index: 1; // increase z-index on focus so it appears over the suffix
+    }
+  }
+
+  .govuk-input__prefix,
+  .govuk-input__suffix {
+    @include govuk-font($size: 19);
+
+    box-sizing: border-box;
+    display: inline-block;
+    width: auto;
+
+    min-width: 40px;
+    @if $govuk-typography-use-rem {
+      min-width: govuk-px-to-rem(40px);
+    }
+
+    height: 40px;
+    @if $govuk-typography-use-rem {
+      height: govuk-px-to-rem(40px);
+    }
+    margin-top: 0;
+
+    padding: govuk-spacing(1);
+
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+
+    text-align: center;
+    white-space: nowrap;
+    cursor: default; // emphasise non-editable status of prefixes and suffixes
+
+  }
+
+  .govuk-input__prefix {
+    border-right: 0;
+  }
+
+  .govuk-input__suffix {
+    border-left: 0;
+  }
+
 }
diff --git a/src/govuk/components/input/input.yaml b/src/govuk/components/input/input.yaml
index b917dea526..fd44dc1f2c 100644
--- a/src/govuk/components/input/input.yaml
+++ b/src/govuk/components/input/input.yaml
@@ -38,6 +38,48 @@ params:
   required: false
   description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
   isComponent: true
+- name: prefix
+  type: object
+  required: false
+  description: Options for the prefix tag.
+  params:
+    - name: text
+      type: string
+      required: true
+      description: Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the prefix tag
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the prefix tag.
+- name: suffix
+  type: object
+  required: false
+  description: Options for the suffix tag.
+  params:
+    - name: text
+      type: string
+      required: true
+      description: Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the suffix tag
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the suffix tag.
 - name: formGroup
   type: object
   required: false
@@ -203,6 +245,77 @@ examples:
       type: text
       spellcheck: false
 
+  - name: with prefix element
+    data:
+      label:
+        text: Amount, in pounds
+      id: input-with-prefix-element
+      name: amount
+      type: number
+      classes: govuk-input--width-10
+      prefix:
+        text: £
+  - name: with prefix and error elements
+    data:
+      label:
+        text: Amount, in pounds
+      id: input-with-prefix-element-with-error
+      name: amount
+      type: number
+      classes: govuk-input--width-10
+      errorMessage:
+        text: Enter an amount in pounds
+      prefix:
+        text: £
+  - name: with suffix element
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix-element
+      name: weight
+      type: number
+      classes: govuk-input--width-10
+      suffix:
+        text: kg
+  - name: with suffix and error elements
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix-element-with-error
+      name: weight
+      type: number
+      classes: govuk-input--width-10
+      errorMessage:
+        text: Enter a weight in kilograms
+      suffix:
+        text: kg
+  - name: with prefix and suffix elements
+    data:
+      label:
+        text: Cost per item, in pounds
+      id: input-with-prefix-suffix-elements
+      name: cost
+      type: number
+      classes: govuk-input--width-10
+      prefix:
+        text: £
+      suffix:
+        text: per item
+  - name: with prefix, suffix and error elements
+    data:
+      label:
+        text: Cost per item, in pounds
+      id: input-with-prefix-suffix-elements-with-error
+      name: cost
+      type: number
+      classes: govuk-input--width-10
+      errorMessage:
+        text: Enter a cost per item in pounds
+      prefix:
+        text: £
+      suffix:
+        text: per item
+
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: classes
     hidden: true
@@ -256,4 +369,3 @@ examples:
     hidden: true
     data:
       inputmode: decimal
-
diff --git a/src/govuk/components/input/template.njk b/src/govuk/components/input/template.njk
index 25dcb50883..fca7ab2bda 100644
--- a/src/govuk/components/input/template.njk
+++ b/src/govuk/components/input/template.njk
@@ -5,6 +5,18 @@
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
+
+{%- set inputTag %}
+<input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
+{%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
+{%- if params.value %} value="{{ params.value}}"{% endif %}
+{%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+{%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
+{%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
+{%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+{% endset -%}
+
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ govukLabel({
     html: params.label.html,
@@ -37,12 +49,21 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
-  {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
-  {%- if params.value %} value="{{ params.value}}"{% endif %}
-  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
-  {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
-  {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+{%- if params.prefix or params.suffix %}<div class="govuk-input__wrapper">{% endif -%}
+{%- if params.prefix %}
+  {%- if params.prefix.html | length or params.prefix.text | length %}
+    <span class="govuk-input__prefix {{- ' ' + params.prefix.classes if params.prefix.classes }}" aria-hidden="true" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{- params.prefix.html | safe if params.prefix.html else params.prefix.text -}}
+    </span>
+  {% endif -%}
+{% endif -%}
+{{- inputTag | safe -}}
+{%- if params.suffix %}
+  {%- if params.suffix.html | length or params.suffix.text | length %}
+    <span class="govuk-input__suffix {{- ' ' + params.suffix.classes if params.suffix.classes }}" aria-hidden="true" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{- params.suffix.html | safe if params.suffix.html else params.suffix.text -}}
+    </span>
+  {% endif -%}
+{% endif -%}
+{%- if params.prefix or params.suffix %}</div>{% endif %}
 </div>

From 0430f7c7e3df94dacf6a3379492330c84ee3a022 Mon Sep 17 00:00:00 2001
From: Simon Whatley <simonwhatley@gmail.com>
Date: Fri, 3 Jul 2020 13:44:51 +0100
Subject: [PATCH 13/22] Updates following working group review

---
 src/govuk/components/input/_index.scss  | 7 +++++++
 src/govuk/components/input/template.njk | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/govuk/components/input/_index.scss b/src/govuk/components/input/_index.scss
index 3809f06ab3..d1f075ad12 100644
--- a/src/govuk/components/input/_index.scss
+++ b/src/govuk/components/input/_index.scss
@@ -8,6 +8,7 @@
 
     box-sizing: border-box;
     width: 100%;
+    min-width: 0;
     height: 40px;
     @if $govuk-typography-use-rem {
       height: govuk-px-to-rem(40px);
@@ -129,10 +130,16 @@
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
     background-color: govuk-colour("light-grey", $legacy: "grey-3");
 
+    @include govuk-media-query($until: tablet) {
+      line-height: 1.6;
+    }
+
     text-align: center;
     white-space: nowrap;
     cursor: default; // emphasise non-editable status of prefixes and suffixes
 
+    flex: 0 0 auto;
+
   }
 
   .govuk-input__prefix {
diff --git a/src/govuk/components/input/template.njk b/src/govuk/components/input/template.njk
index fca7ab2bda..4cc2aa0948 100644
--- a/src/govuk/components/input/template.njk
+++ b/src/govuk/components/input/template.njk
@@ -52,7 +52,7 @@
 {%- if params.prefix or params.suffix %}<div class="govuk-input__wrapper">{% endif -%}
 {%- if params.prefix %}
   {%- if params.prefix.html | length or params.prefix.text | length %}
-    <span class="govuk-input__prefix {{- ' ' + params.prefix.classes if params.prefix.classes }}" aria-hidden="true" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+    <span class="govuk-input__prefix {{- ' ' + params.prefix.classes if params.prefix.classes }}" aria-hidden="true" {%- for attribute, value in params.prefix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
       {{- params.prefix.html | safe if params.prefix.html else params.prefix.text -}}
     </span>
   {% endif -%}
@@ -60,7 +60,7 @@
 {{- inputTag | safe -}}
 {%- if params.suffix %}
   {%- if params.suffix.html | length or params.suffix.text | length %}
-    <span class="govuk-input__suffix {{- ' ' + params.suffix.classes if params.suffix.classes }}" aria-hidden="true" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+    <span class="govuk-input__suffix {{- ' ' + params.suffix.classes if params.suffix.classes }}" aria-hidden="true" {%- for attribute, value in params.suffix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
       {{- params.suffix.html | safe if params.suffix.html else params.suffix.text -}}
     </span>
   {% endif -%}

From 6472ca53ad6cfd6c5013a1fb0aebe383209d09a1 Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Wed, 19 Aug 2020 15:24:23 +0100
Subject: [PATCH 14/22] Swap <span> elements for <div> elements

Doing this makes it possible to include block level elements inside
the prefix/suffix containers.
---
 src/govuk/components/input/template.njk | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/govuk/components/input/template.njk b/src/govuk/components/input/template.njk
index 4cc2aa0948..e3b7197bf2 100644
--- a/src/govuk/components/input/template.njk
+++ b/src/govuk/components/input/template.njk
@@ -52,17 +52,17 @@
 {%- if params.prefix or params.suffix %}<div class="govuk-input__wrapper">{% endif -%}
 {%- if params.prefix %}
   {%- if params.prefix.html | length or params.prefix.text | length %}
-    <span class="govuk-input__prefix {{- ' ' + params.prefix.classes if params.prefix.classes }}" aria-hidden="true" {%- for attribute, value in params.prefix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+    <div class="govuk-input__prefix {{- ' ' + params.prefix.classes if params.prefix.classes }}" aria-hidden="true" {%- for attribute, value in params.prefix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
       {{- params.prefix.html | safe if params.prefix.html else params.prefix.text -}}
-    </span>
+    </div>
   {% endif -%}
 {% endif -%}
 {{- inputTag | safe -}}
 {%- if params.suffix %}
   {%- if params.suffix.html | length or params.suffix.text | length %}
-    <span class="govuk-input__suffix {{- ' ' + params.suffix.classes if params.suffix.classes }}" aria-hidden="true" {%- for attribute, value in params.suffix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+    <div class="govuk-input__suffix {{- ' ' + params.suffix.classes if params.suffix.classes }}" aria-hidden="true" {%- for attribute, value in params.suffix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
       {{- params.suffix.html | safe if params.suffix.html else params.suffix.text -}}
-    </span>
+    </div>
   {% endif -%}
 {% endif -%}
 {%- if params.prefix or params.suffix %}</div>{% endif %}

From e86c00c663269f3a65873d1eccf5617f7e9a5e3f Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Tue, 1 Sep 2020 11:31:17 +0100
Subject: [PATCH 15/22] Tidy up (template, scss, yaml)

- Remove browser prefix styles as these will be added by
auto-prefixer.
- Remove redundant margin-top on prefix and display-inline-block
on input
- Make all examples use type=text as both prices and weights can
contain decimal points
---
 src/govuk/components/input/_index.scss  | 20 +++++----------
 src/govuk/components/input/input.yaml   | 29 ++++++++++-----------
 src/govuk/components/input/template.njk | 34 +++++++++++--------------
 3 files changed, 34 insertions(+), 49 deletions(-)

diff --git a/src/govuk/components/input/_index.scss b/src/govuk/components/input/_index.scss
index d1f075ad12..d250a7d511 100644
--- a/src/govuk/components/input/_index.scss
+++ b/src/govuk/components/input/_index.scss
@@ -8,7 +8,6 @@
 
     box-sizing: border-box;
     width: 100%;
-    min-width: 0;
     height: 40px;
     @if $govuk-typography-use-rem {
       height: govuk-px-to-rem(40px);
@@ -94,15 +93,14 @@
 
   .govuk-input__wrapper {
     display: flex;
-    display: -ms-flexbox; // sass-lint:disable-line no-duplicate-properties
 
     .govuk-input {
-      display: inline-block;
       flex: 0 1 auto;
     }
 
     .govuk-input:focus {
-      z-index: 1; // increase z-index on focus so it appears over the suffix
+      // Hack to stop focus style being overlapped by the suffix
+      z-index: 1;
     }
   }
 
@@ -112,34 +110,29 @@
 
     box-sizing: border-box;
     display: inline-block;
-    width: auto;
-
     min-width: 40px;
     @if $govuk-typography-use-rem {
       min-width: govuk-px-to-rem(40px);
     }
-
     height: 40px;
     @if $govuk-typography-use-rem {
       height: govuk-px-to-rem(40px);
     }
-    margin-top: 0;
 
     padding: govuk-spacing(1);
-
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
     background-color: govuk-colour("light-grey", $legacy: "grey-3");
 
+    text-align: center;
     @include govuk-media-query($until: tablet) {
       line-height: 1.6;
     }
-
-    text-align: center;
     white-space: nowrap;
-    cursor: default; // emphasise non-editable status of prefixes and suffixes
 
-    flex: 0 0 auto;
+    // Emphasise non-editable status of prefixes and suffixes
+    cursor: default;
 
+    flex: 0 0 auto;
   }
 
   .govuk-input__prefix {
@@ -149,5 +142,4 @@
   .govuk-input__suffix {
     border-left: 0;
   }
-
 }
diff --git a/src/govuk/components/input/input.yaml b/src/govuk/components/input/input.yaml
index fd44dc1f2c..9c0c0b622b 100644
--- a/src/govuk/components/input/input.yaml
+++ b/src/govuk/components/input/input.yaml
@@ -41,7 +41,7 @@ params:
 - name: prefix
   type: object
   required: false
-  description: Options for the prefix tag.
+  description: Options for the prefix element.
   params:
     - name: text
       type: string
@@ -54,15 +54,15 @@ params:
     - name: classes
       type: string
       required: false
-      description: Classes to add to the prefix tag
+      description: Classes to add to the prefix.
     - name: attributes
       type: object
       required: false
-      description: HTML attributes (for example data attributes) to add to the prefix tag.
+      description: HTML attributes (for example data attributes) to add to the prefix element.
 - name: suffix
   type: object
   required: false
-  description: Options for the suffix tag.
+  description: Options for the suffix element.
   params:
     - name: text
       type: string
@@ -75,11 +75,11 @@ params:
     - name: classes
       type: string
       required: false
-      description: Classes to add to the suffix tag
+      description: Classes to add to the suffix element.
     - name: attributes
       type: object
       required: false
-      description: HTML attributes (for example data attributes) to add to the suffix tag.
+      description: HTML attributes (for example data attributes) to add to the suffix element.
 - name: formGroup
   type: object
   required: false
@@ -251,7 +251,6 @@ examples:
         text: Amount, in pounds
       id: input-with-prefix-element
       name: amount
-      type: number
       classes: govuk-input--width-10
       prefix:
         text: £
@@ -259,21 +258,22 @@ examples:
     data:
       label:
         text: Amount, in pounds
-      id: input-with-prefix-element-with-error
+      id: input-with-prefix-element
       name: amount
-      type: number
       classes: govuk-input--width-10
       errorMessage:
         text: Enter an amount in pounds
       prefix:
         text: £
-  - name: with suffix element
+        attributes:
+          data-attribute: value
+
+  - name: with suffix
     data:
       label:
         text: Weight, in kilograms
-      id: input-with-suffix-element
+      id: input-with-suffix
       name: weight
-      type: number
       classes: govuk-input--width-10
       suffix:
         text: kg
@@ -283,7 +283,6 @@ examples:
         text: Weight, in kilograms
       id: input-with-suffix-element-with-error
       name: weight
-      type: number
       classes: govuk-input--width-10
       errorMessage:
         text: Enter a weight in kilograms
@@ -293,9 +292,8 @@ examples:
     data:
       label:
         text: Cost per item, in pounds
-      id: input-with-prefix-suffix-elements
+      id: input-with-prefix-suffix
       name: cost
-      type: number
       classes: govuk-input--width-10
       prefix:
         text: £
@@ -307,7 +305,6 @@ examples:
         text: Cost per item, in pounds
       id: input-with-prefix-suffix-elements-with-error
       name: cost
-      type: number
       classes: govuk-input--width-10
       errorMessage:
         text: Enter a cost per item in pounds
diff --git a/src/govuk/components/input/template.njk b/src/govuk/components/input/template.njk
index e3b7197bf2..11dd50c013 100644
--- a/src/govuk/components/input/template.njk
+++ b/src/govuk/components/input/template.njk
@@ -5,18 +5,6 @@
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
-
-{%- set inputTag %}
-<input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
-{%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
-{%- if params.value %} value="{{ params.value}}"{% endif %}
-{%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-{%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
-{%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
-{%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-{% endset -%}
-
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ govukLabel({
     html: params.label.html,
@@ -49,21 +37,29 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
+
 {%- if params.prefix or params.suffix %}<div class="govuk-input__wrapper">{% endif -%}
-{%- if params.prefix %}
-  {%- if params.prefix.html | length or params.prefix.text | length %}
+
+  {%- if params.prefix.text or params.prefix.html %}
     <div class="govuk-input__prefix {{- ' ' + params.prefix.classes if params.prefix.classes }}" aria-hidden="true" {%- for attribute, value in params.prefix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
       {{- params.prefix.html | safe if params.prefix.html else params.prefix.text -}}
     </div>
   {% endif -%}
-{% endif -%}
-{{- inputTag | safe -}}
-{%- if params.suffix %}
-  {%- if params.suffix.html | length or params.suffix.text | length %}
+
+  <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
+  {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
+  {%- if params.value %} value="{{ params.value}}"{% endif %}
+  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
+  {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
+  {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+
+  {%- if params.suffix.text or params.suffix.html %}
     <div class="govuk-input__suffix {{- ' ' + params.suffix.classes if params.suffix.classes }}" aria-hidden="true" {%- for attribute, value in params.suffix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
       {{- params.suffix.html | safe if params.suffix.html else params.suffix.text -}}
     </div>
   {% endif -%}
-{% endif -%}
+
 {%- if params.prefix or params.suffix %}</div>{% endif %}
 </div>

From d70af32a3f2b6d4d158c4c0c606772ae03f1afc6 Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Tue, 1 Sep 2020 11:15:12 +0100
Subject: [PATCH 16/22] Add template tests and examples for them

---
 src/govuk/components/input/input.yaml       |  91 +++++++++++--
 src/govuk/components/input/template.test.js | 138 ++++++++++++++++++++
 2 files changed, 215 insertions(+), 14 deletions(-)

diff --git a/src/govuk/components/input/input.yaml b/src/govuk/components/input/input.yaml
index 9c0c0b622b..f5f9f16ca2 100644
--- a/src/govuk/components/input/input.yaml
+++ b/src/govuk/components/input/input.yaml
@@ -245,7 +245,37 @@ examples:
       type: text
       spellcheck: false
 
-  - name: with prefix element
+  - name: with prefix
+    data:
+      label:
+        text: Amount, in pounds
+      id: input-with-prefix
+      name: amount
+      classes: govuk-input--width-10
+      prefix:
+        text: £
+  - name: with prefix with html as text
+    hidden: true
+    data:
+      label:
+        text: Amount, in pounds
+      id: input-with-prefix
+      name: amount
+      classes: govuk-input--width-10
+      prefix:
+        text: <span>£</span>
+  - name: with prefix with html
+    hidden: true
+    data:
+      label:
+        html: Amount, in pounds
+      id: input-with-prefix
+      name: amount
+      classes: govuk-input--width-10
+      prefix:
+        html: <span>£</span>
+  - name: with prefix with classes
+    hidden: true
     data:
       label:
         text: Amount, in pounds
@@ -254,15 +284,15 @@ examples:
       classes: govuk-input--width-10
       prefix:
         text: £
-  - name: with prefix and error elements
+        classes: app-input__prefix--custom-modifier
+  - name: with prefix with attributes
+    hidden: true
     data:
       label:
         text: Amount, in pounds
       id: input-with-prefix-element
       name: amount
       classes: govuk-input--width-10
-      errorMessage:
-        text: Enter an amount in pounds
       prefix:
         text: £
         attributes:
@@ -277,18 +307,51 @@ examples:
       classes: govuk-input--width-10
       suffix:
         text: kg
-  - name: with suffix and error elements
+  - name: with suffix with html as text
+    hidden: true
     data:
       label:
         text: Weight, in kilograms
-      id: input-with-suffix-element-with-error
+      id: input-with-suffix
       name: weight
       classes: govuk-input--width-10
-      errorMessage:
-        text: Enter a weight in kilograms
       suffix:
-        text: kg
-  - name: with prefix and suffix elements
+        text: <span>kg</span>
+  - name: with suffix with html
+    hidden: true
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix
+      name: weight
+      classes: govuk-input--width-10
+      suffix:
+        html: <span>kg</span>
+  - name: with suffix with classes
+    hidden: true
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix
+      name: weight
+      classes: govuk-input--width-10
+      suffix:
+        html: <span>kg</span>
+        classes: app-input__suffix--custom-modifier
+  - name: with suffix with attributes
+    hidden: true
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix
+      name: weight
+      classes: govuk-input--width-10
+      suffix:
+        html: <span>kg</span>
+        attributes:
+          data-attribute: value
+
+  - name: with prefix and suffix
     data:
       label:
         text: Cost per item, in pounds
@@ -299,19 +362,19 @@ examples:
         text: £
       suffix:
         text: per item
-  - name: with prefix, suffix and error elements
+  - name: with prefix and suffix and error
     data:
       label:
         text: Cost per item, in pounds
-      id: input-with-prefix-suffix-elements-with-error
+      id: input-with-prefix-suffix
       name: cost
       classes: govuk-input--width-10
-      errorMessage:
-        text: Enter a cost per item in pounds
       prefix:
         text: £
       suffix:
         text: per item
+      errorMessage:
+        text: Error message goes here
 
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: classes
diff --git a/src/govuk/components/input/template.test.js b/src/govuk/components/input/template.test.js
index d750956280..099a433505 100644
--- a/src/govuk/components/input/template.test.js
+++ b/src/govuk/components/input/template.test.js
@@ -99,6 +99,13 @@ describe('Input', () => {
       const $formGroup = $('.govuk-form-group')
       expect($formGroup.hasClass('extra-class')).toBeTruthy()
     })
+
+    it('doesn\'t render the input wrapper', () => {
+      const $ = render('input', examples.default)
+
+      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
+      expect($wrapper.length).toBeFalsy()
+    })
   })
 
   describe('when it includes a hint', () => {
@@ -281,4 +288,135 @@ describe('Input', () => {
       expect($component.attr('inputmode')).toEqual('decimal')
     })
   })
+
+  describe('when it includes a prefix', () => {
+    it('renders the input wrapper', () => {
+      const $ = render('input', examples['with prefix'])
+
+      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
+      expect($wrapper.length).toBeTruthy()
+    })
+
+    it('renders the prefix inside the wrapper', () => {
+      const $ = render('input', examples['with prefix'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+      expect($prefix.length).toBeTruthy()
+    })
+
+    it('renders the text in the prefix', () => {
+      const $ = render('input', examples['with prefix'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+
+      expect($prefix.html()).toEqual('&#xA3;')
+    })
+
+    it('allows prefix text to be passed whilst escaping HTML entities', () => {
+      const $ = render('input', examples['with prefix with html as text'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+
+      expect($prefix.html()).toEqual('&lt;span&gt;&#xA3;&lt;/span&gt;')
+    })
+
+    it('allows prefix HTML to be passed un-escaped', () => {
+      const $ = render('input', examples['with prefix with html'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+
+      expect($prefix.html()).toEqual('<span>&#xA3;</span>')
+    })
+
+    it('hides the prefix from screen readers using the aria-hidden attribute', () => {
+      const $ = render('input', examples['with prefix'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+      expect($prefix.attr('aria-hidden')).toEqual('true')
+    })
+
+    it('renders with classes', () => {
+      const $ = render('input', examples['with prefix with classes'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+      expect($prefix.hasClass('app-input__prefix--custom-modifier')).toBeTruthy()
+    })
+
+    it('renders with attributes', () => {
+      const $ = render('input', examples['with prefix with attributes'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+      expect($prefix.attr('data-attribute')).toEqual('value')
+    })
+  })
+
+  describe('when it includes a suffix', () => {
+    it('renders the input wrapper', () => {
+      const $ = render('input', examples['with suffix'])
+
+      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
+      expect($wrapper.length).toBeTruthy()
+    })
+
+    it('renders the suffix inside the wrapper', () => {
+      const $ = render('input', examples['with suffix'])
+
+      const $suffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix')
+      expect($suffix.length).toBeTruthy()
+    })
+
+    it('renders the text in the prefix', () => {
+      const $ = render('input', examples['with prefix'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+
+      expect($prefix.html()).toEqual('&#xA3;')
+    })
+
+    it('allows suffix text to be passed whilst escaping HTML entities', () => {
+      const $ = render('input', examples['with suffix with html as text'])
+
+      const $suffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix')
+
+      expect($suffix.html()).toEqual('&lt;span&gt;kg&lt;/span&gt;')
+    })
+
+    it('allows suffix HTML to be passed un-escaped', () => {
+      const $ = render('input', examples['with suffix with html'])
+
+      const $suffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix')
+
+      expect($suffix.html()).toEqual('<span>kg</span>')
+    })
+
+    it('hides the suffix from screen readers using the aria-hidden attribute', () => {
+      const $ = render('input', examples['with suffix'])
+
+      const $suffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix')
+      expect($suffix.attr('aria-hidden')).toEqual('true')
+    })
+
+    it('renders with classes', () => {
+      const $ = render('input', examples['with suffix with classes'])
+
+      const $suffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix')
+      expect($suffix.hasClass('app-input__suffix--custom-modifier')).toBeTruthy()
+    })
+
+    it('renders with attributes', () => {
+      const $ = render('input', examples['with suffix with attributes'])
+
+      const $suffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix')
+      expect($suffix.attr('data-attribute')).toEqual('value')
+    })
+  })
+
+  describe('when it includes both a prefix and a suffix', () => {
+    it('renders the prefix before the suffix', () => {
+      const $ = render('input', examples['with prefix and suffix'])
+
+      const $prefixBeforeSuffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix ~ .govuk-input__suffix')
+      expect($prefixBeforeSuffix.length).toBeTruthy()
+    })
+  })
 })

From 111cc2e83d74fb9aa1f207a971f77f6d3b1e34c3 Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Tue, 1 Sep 2020 11:17:06 +0100
Subject: [PATCH 17/22] Split prefix/suffix onto own line on narrow screens

Implement design from https://github.com/alphagov/govuk-frontend/issues/1915#issuecomment-677705663

This ensures that especially on zooming in the input remains visible.

Remove height restriction to ensure that longer prefix/suffix can wrap
instead of overflowing container.

Add an example to demonstrate text wrapping behaviour.
---
 src/govuk/components/input/_index.scss | 32 ++++++++++++++++++++++++--
 src/govuk/components/input/input.yaml  | 11 +++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/govuk/components/input/_index.scss b/src/govuk/components/input/_index.scss
index d250a7d511..f164dec111 100644
--- a/src/govuk/components/input/_index.scss
+++ b/src/govuk/components/input/_index.scss
@@ -102,6 +102,16 @@
       // Hack to stop focus style being overlapped by the suffix
       z-index: 1;
     }
+
+    // Split prefix/suffix onto separate lines on narrow screens
+    @include govuk-media-query($until: mobile) {
+      display: block;
+
+      .govuk-input {
+        // Set max-width to override potential width override class on the input
+        max-width: 100%;
+      }
+    }
   }
 
   .govuk-input__prefix,
@@ -133,13 +143,31 @@
     cursor: default;
 
     flex: 0 0 auto;
+
+    // Split prefix/suffix onto separate lines on narrow screens
+    @include govuk-media-query($until: mobile) {
+      display: block;
+      height: 100%;
+      white-space: normal;
+    }
   }
 
   .govuk-input__prefix {
-    border-right: 0;
+    @include govuk-media-query($until: mobile) {
+      border-bottom: 0;
+    }
+    @include govuk-media-query($from: mobile) {
+      border-right: 0;
+    }
   }
 
+  // Split prefix/suffix onto separate lines on narrow screens
   .govuk-input__suffix {
-    border-left: 0;
+    @include govuk-media-query($until: mobile) {
+      border-top: 0;
+    }
+    @include govuk-media-query($from: mobile) {
+      border-left: 0;
+    }
   }
 }
diff --git a/src/govuk/components/input/input.yaml b/src/govuk/components/input/input.yaml
index f5f9f16ca2..75f98739d4 100644
--- a/src/govuk/components/input/input.yaml
+++ b/src/govuk/components/input/input.yaml
@@ -362,6 +362,17 @@ examples:
         text: £
       suffix:
         text: per item
+  - name: with prefix and long suffix
+    data:
+      label:
+        text: Cost per item, in pounds, per household member
+      id: input-with-prefix-suffix
+      name: cost
+      classes: govuk-input--width-10
+      prefix:
+        text: £
+      suffix:
+        text: per household member
   - name: with prefix and suffix and error
     data:
       label:

From f011cbba2d0c13d5cd08e07d19f187af2d88f547 Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Thu, 27 Aug 2020 17:32:46 +0100
Subject: [PATCH 18/22] Improve rendering on IE8

IE8 doesn't support flex so the prefix, suffix and input weren't aligned.

This commit stops the removal of prefix/suffix borders on IE8 to make the
elements look less 'broken'.

There is still a gap between the elements on IE8 which is acceptable
as we only functionally support IE8.
---
 src/govuk/components/input/_index.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/govuk/components/input/_index.scss b/src/govuk/components/input/_index.scss
index f164dec111..50e2659fe7 100644
--- a/src/govuk/components/input/_index.scss
+++ b/src/govuk/components/input/_index.scss
@@ -157,7 +157,9 @@
       border-bottom: 0;
     }
     @include govuk-media-query($from: mobile) {
-      border-right: 0;
+      @include govuk-not-ie8 {
+        border-right: 0;
+      }
     }
   }
 
@@ -167,7 +169,9 @@
       border-top: 0;
     }
     @include govuk-media-query($from: mobile) {
-      border-left: 0;
+      @include govuk-not-ie8 {
+        border-left: 0;
+      }
     }
   }
 }

From e23594f0641b8cac8c572f2ef500bd89f37a5a16 Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Tue, 1 Sep 2020 19:12:24 +0100
Subject: [PATCH 19/22] Add an example using a width modifier

Remove width modifiers from other examples to keep them focused
on the prefix/suffix functionality.

Reorganise examples. We're not going to enforce the ordering of examples
but for now going with the convention of placing the hidden examples at
the end of the yaml.
---
 src/govuk/components/input/input.yaml | 182 +++++++++++++-------------
 1 file changed, 91 insertions(+), 91 deletions(-)

diff --git a/src/govuk/components/input/input.yaml b/src/govuk/components/input/input.yaml
index 75f98739d4..9daffe5478 100644
--- a/src/govuk/components/input/input.yaml
+++ b/src/govuk/components/input/input.yaml
@@ -251,52 +251,8 @@ examples:
         text: Amount, in pounds
       id: input-with-prefix
       name: amount
-      classes: govuk-input--width-10
-      prefix:
-        text: £
-  - name: with prefix with html as text
-    hidden: true
-    data:
-      label:
-        text: Amount, in pounds
-      id: input-with-prefix
-      name: amount
-      classes: govuk-input--width-10
-      prefix:
-        text: <span>£</span>
-  - name: with prefix with html
-    hidden: true
-    data:
-      label:
-        html: Amount, in pounds
-      id: input-with-prefix
-      name: amount
-      classes: govuk-input--width-10
-      prefix:
-        html: <span>£</span>
-  - name: with prefix with classes
-    hidden: true
-    data:
-      label:
-        text: Amount, in pounds
-      id: input-with-prefix-element
-      name: amount
-      classes: govuk-input--width-10
       prefix:
         text: £
-        classes: app-input__prefix--custom-modifier
-  - name: with prefix with attributes
-    hidden: true
-    data:
-      label:
-        text: Amount, in pounds
-      id: input-with-prefix-element
-      name: amount
-      classes: govuk-input--width-10
-      prefix:
-        text: £
-        attributes:
-          data-attribute: value
 
   - name: with suffix
     data:
@@ -304,52 +260,8 @@ examples:
         text: Weight, in kilograms
       id: input-with-suffix
       name: weight
-      classes: govuk-input--width-10
       suffix:
         text: kg
-  - name: with suffix with html as text
-    hidden: true
-    data:
-      label:
-        text: Weight, in kilograms
-      id: input-with-suffix
-      name: weight
-      classes: govuk-input--width-10
-      suffix:
-        text: <span>kg</span>
-  - name: with suffix with html
-    hidden: true
-    data:
-      label:
-        text: Weight, in kilograms
-      id: input-with-suffix
-      name: weight
-      classes: govuk-input--width-10
-      suffix:
-        html: <span>kg</span>
-  - name: with suffix with classes
-    hidden: true
-    data:
-      label:
-        text: Weight, in kilograms
-      id: input-with-suffix
-      name: weight
-      classes: govuk-input--width-10
-      suffix:
-        html: <span>kg</span>
-        classes: app-input__suffix--custom-modifier
-  - name: with suffix with attributes
-    hidden: true
-    data:
-      label:
-        text: Weight, in kilograms
-      id: input-with-suffix
-      name: weight
-      classes: govuk-input--width-10
-      suffix:
-        html: <span>kg</span>
-        attributes:
-          data-attribute: value
 
   - name: with prefix and suffix
     data:
@@ -357,7 +269,6 @@ examples:
         text: Cost per item, in pounds
       id: input-with-prefix-suffix
       name: cost
-      classes: govuk-input--width-10
       prefix:
         text: £
       suffix:
@@ -368,7 +279,6 @@ examples:
         text: Cost per item, in pounds, per household member
       id: input-with-prefix-suffix
       name: cost
-      classes: govuk-input--width-10
       prefix:
         text: £
       suffix:
@@ -379,13 +289,23 @@ examples:
         text: Cost per item, in pounds
       id: input-with-prefix-suffix
       name: cost
-      classes: govuk-input--width-10
       prefix:
         text: £
       suffix:
         text: per item
       errorMessage:
         text: Error message goes here
+  - name: with prefix and suffix and width modifier
+    data:
+      label:
+        text: Cost per item, in pounds
+      id: input-with-prefix-suffix
+      name: cost
+      classes: govuk-input--width-5
+      prefix:
+        text: £
+      suffix:
+        text: per item
 
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: classes
@@ -440,3 +360,83 @@ examples:
     hidden: true
     data:
       inputmode: decimal
+
+  - name: with prefix with html as text
+    hidden: true
+    data:
+      label:
+        text: Amount, in pounds
+      id: input-with-prefix
+      name: amount
+      prefix:
+        text: <span>£</span>
+  - name: with prefix with html
+    hidden: true
+    data:
+      label:
+        html: Amount, in pounds
+      id: input-with-prefix
+      name: amount
+      prefix:
+        html: <span>£</span>
+  - name: with prefix with classes
+    hidden: true
+    data:
+      label:
+        text: Amount, in pounds
+      id: input-with-prefix-element
+      name: amount
+      prefix:
+        text: £
+        classes: app-input__prefix--custom-modifier
+  - name: with prefix with attributes
+    hidden: true
+    data:
+      label:
+        text: Amount, in pounds
+      id: input-with-prefix-element
+      name: amount
+      prefix:
+        text: £
+        attributes:
+          data-attribute: value
+
+  - name: with suffix with html as text
+    hidden: true
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix
+      name: weight
+      suffix:
+        text: <span>kg</span>
+  - name: with suffix with html
+    hidden: true
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix
+      name: weight
+      suffix:
+        html: <span>kg</span>
+  - name: with suffix with classes
+    hidden: true
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix
+      name: weight
+      suffix:
+        html: <span>kg</span>
+        classes: app-input__suffix--custom-modifier
+  - name: with suffix with attributes
+    hidden: true
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix
+      name: weight
+      suffix:
+        html: <span>kg</span>
+        attributes:
+          data-attribute: value

From 0a31856213e332c9e36846cd13caf6f91a129a29 Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Wed, 2 Sep 2020 11:53:19 +0100
Subject: [PATCH 20/22] Update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 255b89fc4f..7390b8b4d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,27 @@
 
 ### New features
 
+#### Add prefix and suffix for text input
+
+You can now add a prefix or suffix element to the text input to help users enter things like currencies and measurements.
+
+For example:
+
+```javascript
+{{ govukInput({
+  label: {
+    text: "Amount, in pounds"
+  },
+  prefix: {
+    text: "£"
+  }
+}) }}
+```
+
+You shouldn't rely on prefixes or suffixes alone because people who use a screen reader won't see them. You should add any specific type of information you need to the input label or hint text as well.
+
+This was added in [pull request #1816: Add input prefix and suffix](https://github.com/alphagov/govuk-frontend/pull/1816).
+
 #### Add HTML test fixtures
 You can use our test fixtures to check you're outputting the same HTML that GOV.UK Frontend uses.
 

From b2447151694a97ddca876c883904ebbf2ff81790 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Mon, 7 Sep 2020 15:43:32 +0100
Subject: [PATCH 21/22] Add print styles for the panel component

Because the panel component is currently white text on a green background, it prints without the background with with light grey text (at least in Chrome).

Add print styles to remove the background, set the text colour to black and add a border (like we do when colours are overridden).
---
 src/govuk/components/panel/_index.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/govuk/components/panel/_index.scss b/src/govuk/components/panel/_index.scss
index 58496d70c5..6054d6691f 100644
--- a/src/govuk/components/panel/_index.scss
+++ b/src/govuk/components/panel/_index.scss
@@ -20,6 +20,12 @@
   .govuk-panel--confirmation {
     color: govuk-colour("white");
     background: govuk-colour("green", $legacy: "turquoise");
+
+    @include govuk-media-query($media-type: print) {
+      border-color: currentColor;
+      color: $govuk-print-text-colour;
+      background: none;
+    }
   }
 
   .govuk-panel__title {

From 95044b1440dc2f76824fa931c8d0576adace2e6d Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Mon, 7 Sep 2020 15:50:33 +0100
Subject: [PATCH 22/22] Document in changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 255b89fc4f..f9f9a70d47 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -56,6 +56,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests:
 
 - [#1943: Change header menu button label](https://github.com/alphagov/govuk-frontend/pull/1943)
 - [#1942: Set aria-expanded and aria-hidden attributes on header menu button and menu when page loads](https://github.com/alphagov/govuk-frontend/pull/1942)
+- [#1947 Add print styles for the panel component](https://github.com/alphagov/govuk-frontend/pull/1947)
 
 ## 3.8.1 (Fix release)