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 1/9] 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 2/9] 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 3/9] 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 4/9] 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 5/9] 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 6/9] 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 7/9] 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 8/9] 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 9/9] 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.