Merge pull request #895 from nhsuk/suffix-prefix-update

updated design examples for suffix and prefix

CHANGELOG.md

@@ -1,5 +1,13 @@
 # NHS.UK frontend Changelog
 
+## 8.0.1 - 02 October 2023
+
+:wrench: **Fixes**
+
+- Updated design examples for suffix and prefix, and added backstop regression images ([PR 826](https://github.com/nhsuk/nhsuk-frontend/pull/826)).
+- Fix focus padding for the search input ([PR 896](https://github.com/nhsuk/nhsuk-frontend/pull/896)).
+- Remove card component Javascript from documentation ([PR 891](https://github.com/nhsuk/nhsuk-frontend/pull/891)).
+
 ## 8.0.0 - 28 September 2023
 
 :boom: **Breaking changes**

app/components/input/autocomplete.njk

@@ -16,7 +16,8 @@
             },
             "id": "input-with-autocomplete-attribute",
             "name": "postcode",
-            "autocomplete": "postal-code"
+            "autocomplete": "postal-code",
+            "classes": "nhsuk-input--width-5"
           }) }}
         </div>
       </div>

app/components/input/custom-width.njk

@@ -12,10 +12,11 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ input({
             "label": {
-              "text": "National insurance number"
+              "text": "National Insurance number",
+              "classes": "nhsuk-label--l"
             },
             "hint": {
-              "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+              "text": "It's on your National Insurance card, benefit letter, payslip or P60\. For example, 'QQ 12 34 56 C'."
             },
             "id": "input-width-10",
             "name": "test-width-10",

app/components/input/error-and-prefix-and-suffix.njk

@@ -12,12 +12,14 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ input({
             "label": {
-              "text": "What is the cost per item, in pounds?"
+              "text": "What is the cost per item, in pounds?",
+              "classes": "nhsuk-label--l"
             },
             "id": "input-with-error-message-and-prefix-and-suffix",
             "name": "test-name-7",
             "prefix": "£",
             "suffix": "per item",
+            "classes": "nhsuk-input--width-5",
             "errorMessage": {
               "text": "Enter a cost per item, in pounds"
             }

app/components/input/error.njk

@@ -12,13 +12,15 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ input({
             "label": {
-              "text": "National Insurance number"
+              "text": "National Insurance number",
+              "classes": "nhsuk-label--l"
             },
             "hint": {
-              "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+              "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, 'QQ 12 34 56 C'."
             },
             "id": "input-with-error-message",
             "name": "test-name-3",
+            "classes": "nhsuk-input--width-10",
             "errorMessage": {
               "text": "Error message goes here"
             }

app/components/input/hint.njk

@@ -12,13 +12,15 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ input({
             "label": {
-              "text": "National insurance number"
+              "text": "National Insurance number",
+              "classes": "nhsuk-label--l"
             },
             "hint": {
-              "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+              "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, 'QQ 12 34 56 C'."
             },
             "id": "input-with-hint-text",
-            "name": "test-name-2"
+            "name": "test-name-2",
+            "classes": "nhsuk-input--width-10"
           }) }}
         </div>
       </div>

app/components/input/prefix-and-suffix.njk

@@ -12,12 +12,15 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ input({
             "label": {
-              "text": "What is the cost per item, in pounds?"
+              "text": "What is the cost per item, in pounds?",
+              "classes": "nhsuk-label--l"
             },
             "id": "input-with-prefix-and-suffix",
             "name": "test-name-6",
             "prefix": "£",
-            "suffix": "per item"
+            "suffix": "per item", 
+            "classes": "nhsuk-input--width-5"
+
           }) }}
         </div>
       </div>

app/components/input/prefix.njk

@@ -12,11 +12,13 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ input({
             "label": {
-              "text": "What is the cost in pounds?"
+              "text": "What is the cost in pounds?",
+              "classes": "nhsuk-label--l"
             },
             "id": "input-with-prefix",
             "name": "test-name-4",
-            "prefix": "£"
+            "prefix": "£",
+            "classes": "nhsuk-input--width-5"
           }) }}
         </div>
       </div>

app/components/input/suffix.njk

@@ -12,11 +12,13 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ input({
             "label": {
-              "text": "What is the weight in kilograms?"
+              "text": "What is the weight in kilograms?",
+              "classes": "nhsuk-label--l"
             },
             "id": "input-with-suffix",
             "name": "test-name-5",
-            "suffix": "kg"
+            "suffix": "kg",
+            "classes": "nhsuk-input--width-5"
           }) }}
         </div>
       </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-frontend",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
   "scripts": {
     "prepare": "gulp bundle",