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/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/components/input/error-and-prefix-and-suffix.njk b/app/components/input/error-and-prefix-and-suffix.njk new file mode 100644 index 000000000..8242fe5d9 --- /dev/null +++ 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 %} + +
+
+ +
+
+ {{ 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" + } + }) }} +
+
+ +
+
+ +{% 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..7ec69a33e --- /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": "What is the cost per item, in pounds?" + }, + "id": "input-with-prefix-and-suffix", + "name": "test-name-6", + "prefix": "£", + "suffix": "per item" + }) }} +
+
+ +
+
+ +{% 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..456e3308a --- /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": "What is the weight in kilograms?" + }, + "id": "input-with-suffix", + "name": "test-name-5", + "suffix": "kg" + }) }} +
+
+ +
+
+ +{% endblock %} diff --git a/app/pages/about.njk b/app/pages/about.njk index fee589e16..a9e51a38f 100644 --- a/app/pages/about.njk +++ b/app/pages/about.njk @@ -29,7 +29,7 @@

Get in touch

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.

- + {% endblock %} diff --git a/app/pages/examples.njk b/app/pages/examples.njk index 444de1a6c..0a179088f 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -94,6 +94,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/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%; diff --git a/packages/components/input/_input.scss b/packages/components/input/_input.scss index e4907f455..10454788b 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,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 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 #}