added relevant input examples

nhsuk · Aug 22, 2023 · 26ca6f6 · 26ca6f6
1 parent 630540f
commit 26ca6f6
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 12 deletions.
diff --git a/app/components/input/error-and-prefix-and-suffix.njk b/app/components/input/error-and-prefix-and-suffix.njk
@@ -0,0 +1,34 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Input with error message, prefix and suffix' %}
+{% from 'components/input/macro.njk' import input %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ input({
+            "label": {
+              "text": "What is the cost per item, in pounds?"
+            },
+            "hint": {
+              "text": "Divide the total cost, in pounds, by the number of items."
+            },
+            "id": "input-with-error-message-and-prefix-and-suffix",
+            "name": "test-name-7",
+            "prefix": "£",
+            "suffix": "per item",
+            "errorMessage": {
+              "text": "Error message goes here"
+            }
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/components/input/prefix-and-suffix.njk b/app/components/input/prefix-and-suffix.njk
@@ -0,0 +1,28 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Input with prefix and suffix' %}
+{% from 'components/input/macro.njk' import input %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ input({
+            "label": {
+              "text": "How old are you?"
+            },
+            "id": "input-with-prefix-and-suffix",
+            "name": "test-name-6",
+            "prefix": "I'm",
+            "suffix": "years old"
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/components/input/prefix.njk b/app/components/input/prefix.njk
@@ -0,0 +1,27 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Input with prefix' %}
+{% from 'components/input/macro.njk' import input %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ input({
+            "label": {
+              "text": "What is the cost in pounds?"
+            },
+            "id": "input-with-prefix",
+            "name": "test-name-4",
+            "prefix": "£"
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/components/input/suffix.njk b/app/components/input/suffix.njk
@@ -0,0 +1,27 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Input with suffix' %}
+{% from 'components/input/macro.njk' import input %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ input({
+            "label": {
+              "text": "Weight"
+            },
+            "id": "input-with-suffix",
+            "name": "test-name-5",
+            "suffix": "kg"
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -92,6 +92,10 @@
     <li><a href="../components/input/hint.html">Input with hint text</a></li>
     <li><a href="../components/input/error.html">Input with error message</a></li>
     <li><a href="../components/input/custom-width.html">Input with width modifier</a></li>
+    <li><a href="../components/input/prefix.html">Input with prefix</a></li>
+    <li><a href="../components/input/suffix.html">Input with suffix</a></li>
+    <li><a href="../components/input/prefix-and-suffix.html">Input with prefix and suffix</a></li>
+    <li><a href="../components/input/error-and-prefix-and-suffix.html">Input with error message, prefix and suffix</a></li>
     <li><a href="../components/inset-text/index.html">Inset text</a></li>
     <li><a href="../components/label/index.html">Label</a></li>
     <li><a href="../components/label/bold.html">Label with bold text</a></li>

diff --git a/packages/components/input/_input.scss b/packages/components/input/_input.scss
@@ -12,7 +12,6 @@
 
 .nhsuk-input {
   @include nhsuk-font(19);
-
   -moz-appearance: none; /* 1 */
   -webkit-appearance: none; /* 1 */
   appearance: none; /* 1 */
@@ -75,3 +74,39 @@
 .nhsuk-input--width-2 {
   max-width: 5.4ex;
 }
+
+// Suffix and prefix
+
+.nhsuk-input__wrapper {
+  display: flex;
+}
+
+.nhsuk-input__prefix,
+.nhsuk-input__suffix {
+  @include nhsuk-font($size: 19);
+
+  background-color: $color_nhsuk-grey-4;
+  border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color;
+  box-sizing: border-box;
+  cursor: default; // emphasises non-editable status of prefixes and suffixes
+  display: inline-block;
+  flex: 0 0 auto;
+  height: 40px;
+  min-width: nhsuk-px-to-rem(40px);
+  padding: nhsuk-spacing(1);
+  text-align: center;
+  white-space: nowrap;
+
+  @include mq($until: tablet) {
+    line-height: 1.6;
+    font-size: 1.1875rem;
+  }
+}
+
+.nhsuk-input__prefix {
+  border-right: 0;
+}
+
+.nhsuk-input__suffix {
+  border-left: 0;
+}
diff --git a/packages/components/input/template.njk b/packages/components/input/template.njk
@@ -37,14 +37,26 @@
     text: params.errorMessage.text
   }) | indent(2) | trim -}}
 {% endif %}
-  <input class="nhsuk-input
-  {%- if params.classes %} {{ params.classes }}{% endif %}
-  {%- if params.errorMessage %} nhsuk-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 %}>
-</div>
+{%- if params.prefix or params.suffix %}
+  <div class="nhsuk-input__wrapper">
+{% endif %}
+    {%- if params.prefix %}
+    <div class="nhsuk-input__prefix" aria-hidden="true">{{ params.prefix }}</div>
+    {% endif %}
+    <input class="nhsuk-input
+    {%- if params.classes %} {{ params.classes }}{% endif %}
+    {%- if params.errorMessage %} nhsuk-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 %}
+    <div class="nhsuk-input__suffix" aria-hidden="true">{{ params.suffix }}</div>
+    {% endif %}
+{%- if params.prefix or params.suffix %}
+</div> {# close nhsuk-input__wrapper #}
+{% endif %}
+</div> {# close nhsuk-form-group #}