From 26ca6f6c030b2e05cfe6bda4d74773c4a6fe935e Mon Sep 17 00:00:00 2001 From: roshaanbajwa Date: Tue, 22 Aug 2023 16:40:34 +0100 Subject: [PATCH 1/3] 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/3] 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/3] 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 {