Skip to content

Commit e81834e

Browse files
colinrotherhamcolinrotherham
authored
Merge pull request #1660 from nhsuk/component-search-input
[v10] Add search input component
2 parents ebec00e + 1c78f1c commit e81834e

24 files changed

Lines changed: 965 additions & 35 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,26 @@ Note: This release was created from the `support/10.x` branch.
66

77
### :new: **New features**
88

9+
#### New search input component
10+
11+
We've added a new [search input component](https://service-manual.nhs.uk/design-system/components/search-input).
12+
13+
To use the `searchInput` Nunjucks macro in your service:
14+
15+
```njk
16+
{{ searchInput({
17+
label: {
18+
text: "Find session"
19+
},
20+
name: "search",
21+
width: 10
22+
}) }}
23+
```
24+
25+
If you are not using Nunjucks macros, use the HTML markup from the [search input examples in the NHS digital service manual](https://service-manual.nhs.uk/design-system/components/search-input).
26+
27+
This change was introduced in [pull request #1660: Add search input component](https://github.com/nhsuk/nhsuk-frontend/pull/1660).
28+
929
#### Add date input `day`, `month` and `year` options
1030

1131
We've updated the date input component to add individual `day`, `month` and `year` Nunjucks options.

‎packages/nhsuk-frontend-review/src/examples/form-alignment.njk‎

Lines changed: 73 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -31,50 +31,105 @@
3131
<form method="post" novalidate>
3232
{% call fieldset({
3333
legend: {
34-
text: "Input and icon button",
34+
text: "Search input",
3535
size: "m"
3636
}
3737
}) %}
38-
{{ input({
38+
{{ searchInput({
3939
label: {
40-
text: "Product order number"
40+
text: "Search patients by NHS number",
41+
classes: "nhsuk-u-visually-hidden"
4142
},
42-
name: "example-input-button-1",
43-
id: "example-input-button-1",
44-
type: "search",
43+
placeholder: "NHS number",
44+
name: "example-search-1",
45+
id: "example-search-1",
46+
classes: "nhsuk-u-width-full",
47+
formGroup: {
48+
classes: "nhsuk-u-width-one-half"
49+
},
50+
button: false
51+
}) }}
52+
53+
{{ searchInput({
54+
label: {
55+
text: "Search patients by NHS number",
56+
classes: "nhsuk-u-visually-hidden"
57+
},
58+
placeholder: "NHS number",
59+
name: "example-search-2",
60+
id: "example-search-2",
61+
classes: "nhsuk-u-width-full",
62+
formGroup: {
63+
classes: "nhsuk-u-width-one-half"
64+
}
65+
}) }}
66+
67+
{{ searchInput({
68+
label: {
69+
text: "Search patients by NHS number",
70+
classes: "nhsuk-u-visually-hidden"
71+
},
72+
placeholder: "NHS number",
73+
name: "example-search-3",
74+
id: "example-search-3",
75+
classes: "nhsuk-u-width-full",
76+
large: true,
77+
formGroup: {
78+
classes: "nhsuk-u-width-one-half"
79+
}
80+
}) }}
81+
82+
{{ searchInput({
83+
label: {
84+
text: 'Search patients by NHS number',
85+
classes: 'nhsuk-u-visually-hidden'
86+
},
87+
placeholder: 'NHS number',
88+
name: "example-search-4",
89+
id: "example-search-4",
4590
classes: "nhsuk-u-width-full",
4691
formGroup: {
4792
classes: "nhsuk-u-width-one-half",
4893
afterInput: {
4994
html: button({
50-
text: "Find",
51-
icon: "search",
95+
text: "Advanced search",
96+
variant: "secondary",
5297
small: true
5398
})
5499
}
55100
}
56101
}) }}
57102

58-
{{ input({
103+
{{ searchInput({
59104
label: {
60-
text: "Product order number"
105+
text: 'Search patients by NHS number',
106+
classes: 'nhsuk-u-visually-hidden'
61107
},
62-
name: "example-input-button-2",
63-
id: "example-input-button-2",
64-
type: "search",
108+
placeholder: 'NHS number',
109+
name: "example-search-5",
110+
id: "example-search-5",
65111
classes: "nhsuk-u-width-full",
112+
large: true,
66113
formGroup: {
67114
classes: "nhsuk-u-width-one-half",
68115
afterInput: {
69116
html: button({
70-
ariaLabel: "Find",
71-
icon: "search",
72-
small: true
117+
text: "Advanced search",
118+
variant: "secondary"
73119
})
74120
}
75121
}
76122
}) }}
123+
{% endcall %}
124+
</form>
77125

126+
<form method="post" novalidate>
127+
{% call fieldset({
128+
legend: {
129+
text: "Input and icon button",
130+
size: "m"
131+
}
132+
}) %}
78133
{{ input({
79134
label: {
80135
text: "Product order number"
@@ -173,8 +228,8 @@
173228
label: {
174229
text: "NHS number"
175230
},
176-
name: "example-input",
177-
id: "example-input",
231+
name: "example-input-1",
232+
id: "example-input-1",
178233
classes: "nhsuk-u-width-full",
179234
code: true,
180235
inputmode: "numeric",

‎packages/nhsuk-frontend-review/src/layouts/page.njk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
{% from "nhsuk/components/panel/macro.njk" import panel %}
3434
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}
3535
{% from "nhsuk/components/radios/macro.njk" import radios %}
36+
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}
3637
{% from "nhsuk/components/select/macro.njk" import select %}
3738
{% from "nhsuk/components/skip-link/macro.njk" import skipLink %}
3839
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}

‎packages/nhsuk-frontend/src/nhsuk/components/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
@forward "date-input";
2323
@forward "file-upload";
2424
@forward "password-input";
25+
@forward "search-input";
2526

2627
// Content presentation
2728
@forward "code";

‎packages/nhsuk-frontend/src/nhsuk/components/action-link/_index.scss‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,6 @@
5151
.nhsuk-icon {
5252
position: absolute;
5353
left: -$_small-icon-spacing;
54-
// stylelint-disable-next-line declaration-no-important
55-
fill: nhsuk-colour("green") !important;
5654

5755
@include nhsuk-media-query($from: tablet) {
5856
left: -$_large-icon-spacing;
@@ -64,6 +62,21 @@
6462
&:focus .nhsuk-icon {
6563
// stylelint-disable-next-line declaration-no-important
6664
fill: $nhsuk-focus-text-colour !important;
65+
66+
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
67+
// stylelint-disable-next-line declaration-no-important
68+
fill: highlight !important;
69+
}
70+
}
71+
72+
&:not(:focus) .nhsuk-icon,
73+
&:not(:focus):hover .nhsuk-icon,
74+
&:not(:focus):active .nhsuk-icon {
75+
fill: nhsuk-colour("green");
76+
77+
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
78+
fill: buttontext;
79+
}
6780
}
6881
}
6982

@@ -74,9 +87,14 @@
7487
text-decoration: none; // [4]
7588
}
7689

77-
&:not(:focus) .nhsuk-icon {
78-
// stylelint-disable-next-line declaration-no-important
79-
fill: $nhsuk-reverse-text-colour !important;
90+
&:not(:focus) .nhsuk-icon,
91+
&:not(:focus):hover .nhsuk-icon,
92+
&:not(:focus):active .nhsuk-icon {
93+
fill: $nhsuk-reverse-text-colour;
94+
95+
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
96+
fill: buttontext;
97+
}
8098
}
8199
}
82100
}

‎packages/nhsuk-frontend/src/nhsuk/components/button/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,7 @@ $button-shadow-size: $nhsuk-button-shadow-size;
188188
);
189189
}
190190

191+
.nhsuk-button--brand,
191192
.nhsuk-button--login {
192193
@include nhsuk-button-style(
193194
$button-colour: $nhsuk-login-button-colour,

‎packages/nhsuk-frontend/src/nhsuk/components/button/macro-options.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const options = {
7979
type: 'string',
8080
required: false,
8181
description:
82-
'Optional variant of button – `"login"`, `"reverse"`, `"secondary"`, `"secondary-solid"` or `"warning"`.',
82+
'Optional variant of button – `"brand"`, `"login"`, `"reverse"`, `"secondary"`, `"secondary-solid"` or `"warning"`.',
8383
released: '10.4.0'
8484
},
8585
small: {

‎packages/nhsuk-frontend/src/nhsuk/components/button/template.njk‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@
88
{%- set classNames = "nhsuk-button" -%}
99

1010
{%- if variant and
11-
variant in ["login", "reverse", "secondary", "secondary-solid", "warning"] and (
11+
variant in ["brand", "login", "reverse", "secondary", "secondary-solid", "warning"] and (
1212
not params.classes or (
13+
not "nhsuk-button--brand" in params.classes and
1314
not "nhsuk-button--login" in params.classes and
1415
not "nhsuk-button--reverse" in params.classes and
1516
not "nhsuk-button--secondary" in params.classes and

‎packages/nhsuk-frontend/src/nhsuk/components/card/_index.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,10 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
236236
&:has(.nhsuk-card__heading a:hover) .nhsuk-icon,
237237
&:has(.nhsuk-card__link:hover) .nhsuk-icon {
238238
fill: $nhsuk-link-hover-colour;
239+
240+
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
241+
fill: linktext;
242+
}
239243
}
240244

241245
&:active,
@@ -249,6 +253,10 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
249253
&:has(.nhsuk-card__heading a:active) .nhsuk-icon,
250254
&:has(.nhsuk-card__link:active) .nhsuk-icon {
251255
fill: $nhsuk-link-active-colour;
256+
257+
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
258+
fill: activetext;
259+
}
252260
}
253261
}
254262

@@ -553,6 +561,10 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
553561

554562
fill: $nhsuk-link-colour;
555563
@include nhsuk-responsive-spacing(5, "right");
564+
565+
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
566+
fill: buttontext;
567+
}
556568
}
557569
}
558570

0 commit comments

Comments
 (0)