From 26ca6f6c030b2e05cfe6bda4d74773c4a6fe935e Mon Sep 17 00:00:00 2001 From: roshaanbajwa Date: Tue, 22 Aug 2023 16:40:34 +0100 Subject: [PATCH 1/7] added relevant input examples --- .../input/error-and-prefix-and-suffix.njk | 34 +++++++++++++++++ app/components/input/prefix-and-suffix.njk | 28 ++++++++++++++ app/components/input/prefix.njk | 27 ++++++++++++++ app/components/input/suffix.njk | 27 ++++++++++++++ app/pages/examples.njk | 4 ++ packages/components/input/_input.scss | 37 ++++++++++++++++++- packages/components/input/template.njk | 34 +++++++++++------ 7 files changed, 179 insertions(+), 12 deletions(-) create mode 100644 app/components/input/error-and-prefix-and-suffix.njk create mode 100644 app/components/input/prefix-and-suffix.njk create mode 100644 app/components/input/prefix.njk create mode 100644 app/components/input/suffix.njk diff --git a/app/components/input/error-and-prefix-and-suffix.njk b/app/components/input/error-and-prefix-and-suffix.njk new file mode 100644 index 000000000..64168f26b --- /dev/null +++ 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 %} + +
+
+ +
+
+ {{ 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" + } + }) }} +
+
+ +
+
+ +{% endblock %} diff --git a/app/components/input/prefix-and-suffix.njk b/app/components/input/prefix-and-suffix.njk new file mode 100644 index 000000000..fae92d0a8 --- /dev/null +++ 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 %} + +
+
+ +
+
+ {{ input({ + "label": { + "text": "How old are you?" + }, + "id": "input-with-prefix-and-suffix", + "name": "test-name-6", + "prefix": "I'm", + "suffix": "years old" + }) }} +
+
+ +
+
+ +{% endblock %} diff --git a/app/components/input/prefix.njk b/app/components/input/prefix.njk new file mode 100644 index 000000000..952093a09 --- /dev/null +++ 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 %} + +
+
+ +
+
+ {{ input({ + "label": { + "text": "What is the cost in pounds?" + }, + "id": "input-with-prefix", + "name": "test-name-4", + "prefix": "£" + }) }} +
+
+ +
+
+ +{% endblock %} diff --git a/app/components/input/suffix.njk b/app/components/input/suffix.njk new file mode 100644 index 000000000..c3d2b2102 --- /dev/null +++ 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 %} + +
+
+ +
+
+ {{ input({ + "label": { + "text": "Weight" + }, + "id": "input-with-suffix", + "name": "test-name-5", + "suffix": "kg" + }) }} +
+
+ +
+
+ +{% endblock %} diff --git a/app/pages/examples.njk b/app/pages/examples.njk index f4683e0e5..5af86285f 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -92,6 +92,10 @@
  • Input with hint text
  • Input with error message
  • Input with width modifier
    • +
  • Input with prefix
    • +
  • Input with suffix
    • +
  • Input with prefix and suffix
    • +
  • Input with error message, prefix and suffix
  • Inset text
  • Label
  • Label with bold text
    • diff --git a/packages/components/input/_input.scss b/packages/components/input/_input.scss index e4907f455..c3ae94a47 100644 --- 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 index 61a9fec09..481cf9244 100644 --- a/packages/components/input/template.njk +++ b/packages/components/input/template.njk @@ -37,14 +37,26 @@ text: params.errorMessage.text }) | indent(2) | trim -}} {% endif %} - - +{%- if params.prefix or params.suffix %} +
    +{% endif %} + {%- if params.prefix %} + + {% endif %} + + {%- if params.suffix %} + + {% endif %} +{%- if params.prefix or params.suffix %} +
    {# close nhsuk-input__wrapper #} +{% endif %} + {# close nhsuk-form-group #} From c28459c2af42d3080da7c644db852ef1277fbfac Mon Sep 17 00:00:00 2001 From: roshaanbajwa Date: Thu, 24 Aug 2023 15:34:12 +0100 Subject: [PATCH 2/7] change stacking and wording --- .../input/error-and-prefix-and-suffix.njk | 2 +- app/components/input/prefix-and-suffix.njk | 6 ++--- app/components/input/suffix.njk | 2 +- packages/components/input/_input.scss | 24 +++++++++++++++++-- 4 files changed, 27 insertions(+), 7 deletions(-) diff --git a/app/components/input/error-and-prefix-and-suffix.njk b/app/components/input/error-and-prefix-and-suffix.njk index 64168f26b..1c3117ef0 100644 --- 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" } }) }} diff --git a/app/components/input/prefix-and-suffix.njk b/app/components/input/prefix-and-suffix.njk index fae92d0a8..ff5f2f930 100644 --- a/app/components/input/prefix-and-suffix.njk +++ b/app/components/input/prefix-and-suffix.njk @@ -12,12 +12,12 @@
    {{ 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" }) }}
    diff --git a/app/components/input/suffix.njk b/app/components/input/suffix.njk index c3d2b2102..456e3308a 100644 --- a/app/components/input/suffix.njk +++ b/app/components/input/suffix.njk @@ -12,7 +12,7 @@
    {{ 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 index c3ae94a47..d740e2939 100644 --- 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,6 +101,12 @@ 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; @@ -104,9 +114,19 @@ } .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; + } } From 6ed134e7fdcb3277f0cee5638499c4e580c84b28 Mon Sep 17 00:00:00 2001 From: roshaanbajwa Date: Thu, 24 Aug 2023 15:43:53 +0100 Subject: [PATCH 3/7] prettier --- packages/components/input/_input.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/input/_input.scss b/packages/components/input/_input.scss index d740e2939..10454788b 100644 --- a/packages/components/input/_input.scss +++ b/packages/components/input/_input.scss @@ -119,7 +119,7 @@ } @include mq($from: mobile) { border-right: 0; - } + } } .nhsuk-input__suffix { From 3e7fb0570e1e3d13913b1e66bb866fe66dcae7e3 Mon Sep 17 00:00:00 2001 From: Roshaan Bajwa <119668404+roshaanbajwa@users.noreply.github.com> Date: Wed, 30 Aug 2023 15:34:02 +0100 Subject: [PATCH 4/7] remove hint --- app/components/input/error-and-prefix-and-suffix.njk | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/components/input/error-and-prefix-and-suffix.njk b/app/components/input/error-and-prefix-and-suffix.njk index 1c3117ef0..8242fe5d9 100644 --- a/app/components/input/error-and-prefix-and-suffix.njk +++ b/app/components/input/error-and-prefix-and-suffix.njk @@ -14,9 +14,6 @@ "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": "£", From fed6ec757cb34a85ba67cf35688f9c61e0c196f5 Mon Sep 17 00:00:00 2001 From: Roshaan Bajwa <119668404+roshaanbajwa@users.noreply.github.com> Date: Wed, 30 Aug 2023 15:37:43 +0100 Subject: [PATCH 5/7] typo --- app/components/input/prefix-and-suffix.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/input/prefix-and-suffix.njk b/app/components/input/prefix-and-suffix.njk index ff5f2f930..7ec69a33e 100644 --- a/app/components/input/prefix-and-suffix.njk +++ b/app/components/input/prefix-and-suffix.njk @@ -12,7 +12,7 @@
    {{ input({ "label": { - "text": "What is the cost per item, in pounds??" + "text": "What is the cost per item, in pounds?" }, "id": "input-with-prefix-and-suffix", "name": "test-name-6", From f2fd8acde3701a8da6e2165f7edef0c6c67871be Mon Sep 17 00:00:00 2001 From: roshaanbajwa Date: Thu, 7 Sep 2023 10:58:59 +0100 Subject: [PATCH 6/7] change NHS Digital wording to NHS England --- README.md | 2 +- app/pages/about.njk | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5ae79f099..092377e01 100644 --- 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:service-manual@nhs.net), 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:service-manual@nhs.net), 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/pages/about.njk b/app/pages/about.njk index 5bb9401f0..f68bdb90a 100644 --- a/app/pages/about.njk +++ b/app/pages/about.njk @@ -28,7 +28,7 @@

    Please see our contributing guidelines on how to set up the project locally and contribute changes to NHS.UK frontend.

    Get in touch

    -

    NHS.UK frontend is actively maintained by a team at NHS Digital, you can email us or get in touch on the NHS digital service manual Slack workspace. +

    NHS.UK frontend is actively maintained by a team at NHS England, you can email us or get in touch on the NHS digital service manual Slack workspace.

    From 970a25cac1d412b3bafb51193592d4b46583890b Mon Sep 17 00:00:00 2001 From: Mike Monteith Date: Fri, 8 Sep 2023 16:35:10 +0100 Subject: [PATCH 7/7] Fix invalid scss This bug is causing the chevron to be misaligned vertically --- CHANGELOG.md | 4 ++++ packages/components/card/card.scss | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 15cc29e83..8a289f578 100644 --- 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/packages/components/card/card.scss b/packages/components/card/card.scss index dcded513e..6769522ab 100644 --- 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%;