updated design examples

nhsuk · Sep 21, 2023 · 22af022 · 22af022
1 parent d9abd95
commit 22af022
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 17 deletions.
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,13 +12,12 @@
         <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",
             "classes": "nhsuk-input--width-10"
           }) }}
         </div>

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>