change stacking and wording

nhsuk · Aug 24, 2023 · c28459c · c28459c
1 parent 26ca6f6
commit c28459c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/app/components/input/error-and-prefix-and-suffix.njk b/app/components/input/error-and-prefix-and-suffix.njk
@@ -22,7 +22,7 @@
             "prefix": "£",
             "suffix": "per item",
             "errorMessage": {
-              "text": "Error message goes here"
+              "text": "Enter a cost per item, in pounds"
             }
           }) }}
         </div>

diff --git a/app/components/input/prefix-and-suffix.njk b/app/components/input/prefix-and-suffix.njk
@@ -12,12 +12,12 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ input({
             "label": {
-              "text": "How old are you?"
+              "text": "What is the cost per item, in pounds??"
             },
             "id": "input-with-prefix-and-suffix",
             "name": "test-name-6",
-            "prefix": "I'm",
-            "suffix": "years old"
+            "prefix": "£",
+            "suffix": "per item"
           }) }}
         </div>
       </div>

diff --git a/app/components/input/suffix.njk b/app/components/input/suffix.njk
@@ -12,7 +12,7 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ input({
             "label": {
-              "text": "Weight"
+              "text": "What is the weight in kilograms?"
             },
             "id": "input-with-suffix",
             "name": "test-name-5",

diff --git a/packages/components/input/_input.scss b/packages/components/input/_input.scss
@@ -79,6 +79,10 @@
 
 .nhsuk-input__wrapper {
   display: flex;
+
+  @include mq($until: mobile) {
+    display: block;
+  }
 }
 
 .nhsuk-input__prefix,
@@ -97,16 +101,32 @@
   text-align: center;
   white-space: nowrap;
 
+  @include mq($until: mobile) {
+    display: block;
+    height: 100%;
+    white-space: normal;
+  }
+
   @include mq($until: tablet) {
     line-height: 1.6;
     font-size: 1.1875rem;
   }
 }
 
 .nhsuk-input__prefix {
-  border-right: 0;
+  @include mq($until: mobile) {
+    border-bottom: 0;
+  }
+  @include mq($from: mobile) {
+    border-right: 0;
+  }  
 }
 
 .nhsuk-input__suffix {
-  border-left: 0;
+  @include mq($until: mobile) {
+    border-top: 0;
+  }
+  @include mq($from: mobile) {
+    border-left: 0;
+  }
 }