Skip to content

Commit 5835a2c

Browse files
kevwhitt-heekevwhitt-hee
committed
Updates NHS view components package to latest version
1 parent bc79e0b commit 5835a2c

File tree

10 files changed

+463
-278
lines changed

10 files changed

+463
-278
lines changed

‎DigitalLearningSolutions.Web/DigitalLearningSolutions.Web.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
</PackageReference>
8080
<PackageReference Include="Microsoft.VisualStudio.Web.BrowserLink" Version="2.2.0" />
8181
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="6.0.16" />
82-
<PackageReference Include="NHSUKViewComponents.Web" Version="1.0.13" />
82+
<PackageReference Include="NHSUKViewComponents.Web" Version="1.0.24" />
8383
<PackageReference Include="Npm" Version="3.5.2" />
8484
<PackageReference Include="Serilog.AspNetCore" Version="7.0.0" />
8585
<PackageReference Include="Serilog.Sinks.MSSqlServer" Version="6.3.0" />

‎DigitalLearningSolutions.Web/Views/Shared/Components/Checkboxes/Default.cshtml‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,17 @@
3131
<div class="nhsuk-checkboxes">
3232
@foreach (var checkbox in Model.Checkboxes)
3333
{
34-
<partial name="_CheckboxItem" model="checkbox" />
34+
if (!string.IsNullOrWhiteSpace(Model.Class))
35+
{
36+
<div class="@Model.Class">
37+
<partial name="_CheckboxItem" model="checkbox" />
38+
</div>
39+
}
40+
else
41+
{
42+
<partial name="_CheckboxItem" model="checkbox" />
43+
}
44+
3545
}
3646
</div>
3747
</fieldset>

‎DigitalLearningSolutions.Web/Views/Shared/Components/DateInput/Default.cshtml‎

Lines changed: 85 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,70 +2,96 @@
22
@model DateInputViewModel
33

44
@{
5-
var errorCss = Model.HasError ? "nhsuk-form-group--error" : "";
6-
var dayErrorCss = Model.HasDayError ? "nhsuk-input--error" : "";
7-
var monthErrorCss = Model.HasMonthError ? "nhsuk-input--error" : "";
8-
var yearErrorCss = Model.HasYearError ? "nhsuk-input--error" : "";
5+
var errorCss = Model.HasError ? "nhsuk-form-group--error" : "";
6+
var dayErrorCss = Model.HasDayError ? "nhsuk-input--error" : "";
7+
var monthErrorCss = Model.HasMonthError ? "nhsuk-input--error" : "";
8+
var yearErrorCss = Model.HasYearError ? "nhsuk-input--error" : "";
9+
var hintTextLine = string.Empty;
910
}
1011

1112
<div class="@Model.CssClass @errorCss" id="@Model.Id">
12-
<fieldset class="nhsuk-fieldset" aria-describedby="@Model.Id-hint" role="group">
13-
<legend class="nhsuk-fieldset__legend nhsuk-label">
14-
@Model.Label
15-
</legend>
16-
@if (Model.HintTextLines != null) {
17-
@foreach (var hintText in Model.HintTextLines) {
18-
<div class="nhsuk-hint">
19-
@hintText
20-
</div>
21-
}
22-
}
13+
<fieldset class="nhsuk-fieldset" aria-describedby="@Model.Id-hint" role="group">
14+
<legend class="nhsuk-fieldset__legend nhsuk-label">
15+
@if (Model.IsPageHeading.GetValueOrDefault() == true)
16+
{
17+
<h1>
18+
@Model.Label
19+
</h1>
20+
}
21+
else
22+
{
23+
@Model.Label
24+
}
25+
</legend>
2326

24-
@if (Model.HasError) {
25-
@foreach (var message in Model.ErrorMessages) {
26-
<span class="error-message--margin-bottom-1 nhsuk-error-message">
27-
<span class="nhsuk-u-visually-hidden">Error:</span> @message
28-
</span>
29-
}
30-
}
27+
@if (Model.HintTextLines != null)
28+
{
29+
@foreach (var hintText in Model.HintTextLines)
30+
{
31+
hintTextLine = hintText;
32+
}
33+
}
3134

32-
<div class="nhsuk-date-input">
33-
<div class="nhsuk-date-input__item">
34-
<div class="nhsuk-form-group">
35-
<label class="nhsuk-label" for="@Model.DayId">Day</label>
36-
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2 @dayErrorCss"
37-
id="@Model.DayId"
38-
name="@Model.DayId"
39-
value="@Model.DayValue"
40-
type="text"
41-
pattern="[0-9]*"
42-
inputmode="numeric" />
43-
</div>
44-
</div>
45-
<div class="nhsuk-date-input__item">
46-
<div class="nhsuk-form-group">
47-
<label class="nhsuk-label" for="@Model.MonthId">Month</label>
48-
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2 @monthErrorCss"
49-
id="@Model.MonthId"
50-
name="@Model.MonthId"
51-
value="@Model.MonthValue"
52-
type="text"
53-
pattern="[0-9]*"
54-
inputmode="numeric" />
35+
<div class="nhsuk-hint" id="@Model.Id-hint">
36+
@hintTextLine
5537
</div>
56-
</div>
57-
<div class="nhsuk-date-input__item">
58-
<div class="nhsuk-form-group">
59-
<label class="nhsuk-label" for="@Model.YearId">Year</label>
60-
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-3 @yearErrorCss"
61-
id="@Model.YearId"
62-
name="@Model.YearId"
63-
value="@Model.YearValue"
64-
type="text"
65-
pattern="[0-9]*"
66-
inputmode="numeric" />
38+
39+
@if (Model.HasError)
40+
{
41+
@foreach (var message in Model.ErrorMessages)
42+
{
43+
<span class="error-message--margin-bottom-1 nhsuk-error-message">
44+
<span class="nhsuk-u-visually-hidden">Error:</span> @message
45+
</span>
46+
}
47+
}
48+
49+
<div class="nhsuk-date-input">
50+
<div class="nhsuk-date-input__item">
51+
<div class="nhsuk-form-group">
52+
<label class="nhsuk-label" for="@Model.DayId">Day</label>
53+
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2 @dayErrorCss"
54+
id="@Model.DayId"
55+
name="@Model.DayId"
56+
value="@Model.DayValue"
57+
type="number"
58+
pattern="[0-9]*"
59+
min="1"
60+
max="31"
61+
step="1"
62+
inputmode="numeric" />
63+
</div>
64+
</div>
65+
<div class="nhsuk-date-input__item">
66+
<div class="nhsuk-form-group">
67+
<label class="nhsuk-label" for="@Model.MonthId">Month</label>
68+
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2 @monthErrorCss"
69+
id="@Model.MonthId"
70+
name="@Model.MonthId"
71+
value="@Model.MonthValue"
72+
type="number"
73+
pattern="[0-9]*"
74+
min="1"
75+
max="12"
76+
step="1"
77+
inputmode="numeric" />
78+
</div>
79+
</div>
80+
<div class="nhsuk-date-input__item">
81+
<div class="nhsuk-form-group">
82+
<label class="nhsuk-label" for="@Model.YearId">Year</label>
83+
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-3 @yearErrorCss"
84+
id="@Model.YearId"
85+
name="@Model.YearId"
86+
value="@Model.YearValue"
87+
type="number"
88+
pattern="[0-9]*"
89+
min="1900"
90+
max="9999"
91+
step="1"
92+
inputmode="numeric" />
93+
</div>
94+
</div>
6795
</div>
68-
</div>
69-
</div>
70-
</fieldset>
96+
</fieldset>
7197
</div>

‎DigitalLearningSolutions.Web/Views/Shared/Components/DateRangeInput/Default.cshtml‎

Lines changed: 42 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,52 @@
11
@using NHSUKViewComponents.Web.ViewModels
22
@model DateRangeInputViewModel
3+
@{
4+
var hintText = string.Empty;
5+
var endCheckboxhintText = string.Empty;
6+
}
37

48
<div id="@Model.Id">
5-
<fieldset class="nhsuk-fieldset" aria-describedby="@Model.Id-hint" role="group">
6-
<legend class="nhsuk-fieldset__legend nhsuk-label nhsuk-heading-m">
7-
@Model.Label
8-
</legend>
9-
@if (Model.HintText != null)
10-
{
11-
<div class="nhsuk-hint" id="@Model.Id-hint">
12-
@Html.Raw(Model.HintText)
13-
</div>
14-
}
9+
<fieldset class="nhsuk-fieldset" aria-describedby="@Model.Id-hint" role="group">
10+
<legend class="nhsuk-fieldset__legend nhsuk-label nhsuk-heading-m">
11+
@Model.Label
12+
</legend>
1513

16-
<partial name="Components/DateInput/Default" model="Model.StartDateModel" />
17-
<div class="nhsuk-checkboxes nhsuk-checkboxes--conditional">
18-
<div class="nhsuk-checkboxes__item">
19-
<input class="nhsuk-checkboxes__input"
20-
type="checkbox"
21-
id="@Model.EndDateCheckbox.Id"
22-
name="@Model.EndDateCheckbox.Name"
23-
aria-describedby="@Model.EndDateCheckbox.Id-item-hint"
24-
value="true"
25-
aria-controls="conditional-end-date"
26-
aria-expanded="@(Model.EndDateCheckbox.Value ? "true" : "false")"
27-
@(Model.EndDateCheckbox.Value ? "checked" : string.Empty) />
28-
<label class="nhsuk-label nhsuk-checkboxes__label" for="@Model.EndDateCheckbox.Id">
29-
Set end date
30-
</label>
31-
@if (Model.EndDateCheckbox.HintText != null)
14+
@if (Model.HintText != null)
3215
{
33-
<div class="nhsuk-hint nhsuk-checkboxes__hint" id="@Model.EndDateCheckbox.Id-item-hint">
34-
@Model.EndDateCheckbox.HintText
35-
</div>
16+
hintText = Model.HintText;
3617
}
37-
</div>
3818

39-
<partial name="Components/DateInput/Default" model="Model.EndDateModel" />
40-
</div>
19+
<div class="nhsuk-hint" id="@Model.Id-hint">
20+
@hintText
21+
</div>
4122

42-
</fieldset>
23+
<partial name="Components/DateInput/Default" model="Model.StartDateModel" />
24+
<div class="nhsuk-checkboxes nhsuk-checkboxes--conditional">
25+
<div class="nhsuk-checkboxes__item">
26+
<input class="nhsuk-checkboxes__input"
27+
type="checkbox"
28+
id="@Model.EndDateCheckbox.Id"
29+
name="@Model.EndDateCheckbox.Name"
30+
aria-describedby="@Model.EndDateCheckbox.Id-item-hint"
31+
value="true"
32+
aria-controls="conditional-end-date"
33+
aria-expanded="@(Model.EndDateCheckbox.Value ? "true" : "false")"
34+
@(Model.EndDateCheckbox.Value ? "checked" : string.Empty) />
35+
<label class="nhsuk-label nhsuk-checkboxes__label" for="@Model.EndDateCheckbox.Id">
36+
Set end date
37+
</label>
38+
39+
@if (Model.EndDateCheckbox.HintText != null)
40+
{
41+
endCheckboxhintText = @Model.EndDateCheckbox.HintText;
42+
}
43+
<div class="nhsuk-hint nhsuk-checkboxes__hint" id="@Model.EndDateCheckbox.Id-item-hint">
44+
@endCheckboxhintText
45+
</div>
46+
</div>
47+
48+
<partial name="Components/DateInput/Default" model="Model.EndDateModel" />
49+
</div>
50+
51+
</fieldset>
4352
</div>

‎DigitalLearningSolutions.Web/Views/Shared/Components/ErrorSummary/Default.cshtml‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,36 @@
11
@using NHSUKViewComponents.Web.ViewModels
22
@model ErrorSummaryViewModel
33

4-
<div class="nhsuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1">
5-
<h2 class="nhsuk-error-summary__title" id="error-summary-title">
6-
There is a problem
7-
</h2>
8-
<div class="nhsuk-error-summary__body">
9-
<ul class="nhsuk-list nhsuk-error-summary__list">
10-
@foreach (var item in Model.Errors)
11-
{
12-
<li>
13-
<a href="#@item.Key">@item.ErrorMessage</a>
14-
</li>
15-
}
16-
</ul>
17-
</div>
18-
</div>
4+
@if (Model.Errors.Any())
5+
{
6+
<div class="nhsuk-error-summary nhsuk-u-reading-width" aria-labelledby="error-summary-title" role="alert" tabindex="-1">
7+
<h2 class="nhsuk-error-summary__title" id="error-summary-title">
8+
There is a problem
9+
</h2>
10+
<div class="nhsuk-error-summary__body">
11+
<ul class="nhsuk-list nhsuk-error-summary__list">
12+
@foreach (var item in Model.Errors.OrderBy(x => x.Key))
13+
{
14+
if (!string.IsNullOrWhiteSpace(item.ErrorMessage))
15+
{
16+
<li>
17+
<a href="#@item.Key">@item.ErrorMessage</a>
18+
</li>
19+
}
20+
}
21+
</ul>
22+
</div>
23+
</div>
24+
}
25+
else
26+
{
27+
<div class="nhsuk-error-summary validation-summary-errors validation-summary-valid nhsuk-u-reading-width" data-valmsg-summary="true" aria-labelledby="error-summary-title" role="alert" tabindex="-1">
28+
<h2 class="nhsuk-error-summary__title" id="error-summary-title">
29+
There is a problem
30+
</h2>
31+
<div class="nhsuk-error-summary__body">
32+
<ul class="nhsuk-list nhsuk-error-summary__list">
33+
</ul>
34+
</div>
35+
</div>
36+
}

‎DigitalLearningSolutions.Web/Views/Shared/Components/NumericInput/Default.cshtml‎

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,46 @@
1-
@using NHSUKViewComponents.Web.ViewModels
1+
@using NHSUKViewComponents.Web.ViewModels
22
@using NHSUKViewComponents.Web.Helpers
33
@model NumericInputViewModel
44
<div class="nhsuk-form-group @(Model.HasError ? "nhsuk-form-group--error" : "")">
5-
<label class="nhsuk-label" for="@Model.Id">
6-
@Model.Label
7-
</label>
8-
@if (Model.HintText != null)
9-
{
10-
<div class="nhsuk-hint" id="@Model.Name-hint">
11-
@Html.Raw(Model.HintText)
12-
</div>
13-
}
14-
@if (Model.HasError)
15-
{
16-
<div id="@Model.Name-error" class="nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
17-
@foreach (var errorMessage in Model.ErrorMessages)
18-
{
19-
<span class="error-message--margin-bottom-1 nhsuk-error-message">
20-
<span class="nhsuk-u-visually-hidden">Error:</span> @errorMessage
21-
</span>
22-
}
23-
</div>
24-
}
25-
<input class="nhsuk-input @Model.Class @(Model.HasError ? "nhsuk-input--error" : "")"
26-
id="@Model.Id"
27-
name="@Model.Name"
28-
value="@Model.Value"
29-
type="@Model.Type"
30-
pattern="[0-9]*"
31-
inputmode="numeric"
32-
aria-invalid="@(Model.HasError ? "true" : null)"
33-
aria-describedby="@ViewComponentDynamicAttributeHelper.GetAriaDescribedByAttribute(Model.Name, Model.HasError, Model.HintText)"
34-
aria-required="@(Model.Required ? "true" : "false" )" />
5+
<label class="nhsuk-label" for="@Model.Id">
6+
@Model.Label
7+
</label>
8+
@if (Model.HintText != null)
9+
{
10+
<div class="nhsuk-hint" id="@Model.Name-hint">
11+
@Html.Raw(Model.HintText)
12+
</div>
13+
}
14+
@if (Model.HasError)
15+
{
16+
<div id="@Model.Name-error" class="nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
17+
@foreach (var errorMessage in Model.ErrorMessages)
18+
{
19+
<span class="error-message--margin-bottom-1 nhsuk-error-message">
20+
<span class="nhsuk-u-visually-hidden">Error:</span> @errorMessage
21+
</span>
22+
}
23+
</div>
24+
}
25+
26+
@if(!Model.HasError)
27+
{
28+
<div data-valmsg-for="@Model.Name" data-valmsg-replace="true" class="nhsuk-error-message field-validation-valid nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
29+
</div>
30+
}
31+
32+
<input class="nhsuk-input @Model.Class @(Model.HasError ? "nhsuk-input--error" : "")"
33+
id="@Model.Id"
34+
name="@Model.Name"
35+
value="@Model.Value"
36+
type="@Model.Type"
37+
pattern="[0-9]*"
38+
inputmode="numeric"
39+
aria-invalid="@(Model.HasError ? "true" : null)"
40+
aria-describedby="@ViewComponentDynamicAttributeHelper.GetAriaDescribedByAttribute(Model.Name, Model.HasError, Model.HintText)"
41+
aria-required="@(Model.Required ? "true" : "false" )"
42+
data-val-regex-pattern="[0-9]*"
43+
data-val-required="@(Model.Required ? Model.RequiredClientSideErrorMessage : "" )"
44+
data-val-regex="@Model.RegularExClientSideErrorMessage"
45+
data-val="@(Model.Required ? "true" : "false" )" />
3546
</div>

0 commit comments

Comments
 (0)