Merge branch 'main' into new-header-footer

nhsuk · Sep 27, 2023 · 30ae453 · 30ae453
2 parents 2345f86 + d9abd95
commit 30ae453
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # NHS.UK frontend Changelog
 
+:wrench: **Fixes**
+
+- Fix vertical alignment of primary card icon
+
 ## 7.1.0 - 21 August 2023
 
 :new: **New features**

diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ Read our [contributing guidelines](CONTRIBUTING.md) to contribute to NHS.UK fron
 
 ## Get in touch
 
-NHS.UK frontend is maintained by NHS Digital. [Email us](mailto:[email protected]), open a [GitHub issue](https://github.com/nhsuk/nhsuk-frontend/issues/new) or get in touch on the [NHS digital service manual Slack workspace](https://join.slack.com/t/nhs-service-manual/shared_invite/enQtNTIyOTEyNjU3NDkyLTk4NDQ3YzkwYzk1Njk5YjAxYTI5YTVkZmUxMGQ0ZjA3NjMyM2ZkNjBlMWMxODVjZjYzNzg1ZmU4MWY1NmE2YzE).
+NHS.UK frontend is maintained by NHS England. [Email us](mailto:[email protected]), open a [GitHub issue](https://github.com/nhsuk/nhsuk-frontend/issues/new) or get in touch on the [NHS digital service manual Slack workspace](https://join.slack.com/t/nhs-service-manual/shared_invite/enQtNTIyOTEyNjU3NDkyLTk4NDQ3YzkwYzk1Njk5YjAxYTI5YTVkZmUxMGQ0ZjA3NjMyM2ZkNjBlMWMxODVjZjYzNzg1ZmU4MWY1NmE2YzE).
 
 ## Licence
 

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,31 @@
+{% 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?"
+            },
+            "id": "input-with-error-message-and-prefix-and-suffix",
+            "name": "test-name-7",
+            "prefix": "£",
+            "suffix": "per item",
+            "errorMessage": {
+              "text": "Enter a cost per item, in pounds"
+            }
+          }) }}
+        </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": "What is the cost per item, in pounds?"
+            },
+            "id": "input-with-prefix-and-suffix",
+            "name": "test-name-6",
+            "prefix": "£",
+            "suffix": "per item"
+          }) }}
+        </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": "What is the weight in kilograms?"
+            },
+            "id": "input-with-suffix",
+            "name": "test-name-5",
+            "suffix": "kg"
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/pages/about.njk b/app/pages/about.njk
@@ -29,7 +29,7 @@
 
     <h2>Get in touch</h2>
     <p>NHS.UK frontend is actively maintained by a team at NHS England, you can <a href="mailto:[email protected]">email us</a> or get in touch on the <a href="https://join.slack.com/t/nhs-service-manual/shared_invite/enQtNTIyOTEyNjU3NDkyLTk4NDQ3YzkwYzk1Njk5YjAxYTI5YTVkZmUxMGQ0ZjA3NjMyM2ZkNjBlMWMxODVjZjYzNzg1ZmU4MWY1NmE2YzE">NHS digital service manual Slack workspace</a>.</p>
-    
+
   </div>
 
 {% endblock %}
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -94,6 +94,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/card/card.scss b/packages/components/card/card.scss
@@ -286,7 +286,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
   .nhsuk-icon {
     display: block;
     fill: $color_nhsuk-blue;
-    margin-top: -nhsuk-spacing(2);
+    margin-top: -(nhsuk-spacing(2));
     position: absolute;
     right: nhsuk-spacing(4);
     top: 50%;

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,59 @@
 .nhsuk-input--width-2 {
   max-width: 5.4ex;
 }
+
+// Suffix and prefix
+
+.nhsuk-input__wrapper {
+  display: flex;
+
+  @include mq($until: mobile) {
+    display: block;
+  }
+}
+
+.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: mobile) {
+    display: block;
+    height: 100%;
+    white-space: normal;
+  }
+
+  @include mq($until: tablet) {
+    line-height: 1.6;
+    font-size: 1.1875rem;
+  }
+}
+
+.nhsuk-input__prefix {
+  @include mq($until: mobile) {
+    border-bottom: 0;
+  }
+  @include mq($from: mobile) {
+    border-right: 0;
+  }
+}
+
+.nhsuk-input__suffix {
+  @include mq($until: mobile) {
+    border-top: 0;
+  }
+  @include mq($from: mobile) {
+    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 #}