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

updated design examples for suffix and prefix
nhsuk · Oct 2, 2023 · 52a09e2 · 52a09e2
2 parents 8b4d4d3 + 1a7f683
commit 52a09e2
Show file tree

Hide file tree

Showing 50 changed files with 251 additions and 35 deletions.
diff --git a/CHANGELOG.md b/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**

diff --git a/app/components/input/autocomplete.njk b/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>

diff --git a/app/components/input/custom-width.njk b/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",

diff --git a/app/components/input/error-and-prefix-and-suffix.njk b/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"
             }

diff --git a/app/components/input/error.njk b/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"
             }

diff --git a/app/components/input/hint.njk b/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>

diff --git a/app/components/input/prefix-and-suffix.njk b/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>

diff --git a/app/components/input/prefix.njk b/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>

diff --git a/app/components/input/suffix.njk b/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>

diff --git a/package.json b/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",