Skip to content

TD-1855: Optional radio and checkbox item css #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 5, 2023
Merged

TD-1855: Optional radio and checkbox item css #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions NHSUKViewComponents.Web/ViewComponents/CheckboxesViewComponent.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ public IViewComponentResult Invoke(
bool populateWithCurrentValues,
string? errormessage,
string? hintText,
bool required
bool required,
string cssClass = default
)
{
var checkboxList = checkboxes.Select(
Expand All @@ -32,7 +33,8 @@ bool required
string.IsNullOrEmpty(hintText) ? null : hintText,
errormessage,
checkboxList,
required
required,
string.IsNullOrEmpty(cssClass) ? null : cssClass
);

return View(viewModel);
Expand Down
12 changes: 10 additions & 2 deletions NHSUKViewComponents.Web/ViewComponents/RadioListViewComponent.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,15 @@ public IViewComponentResult Invoke(
bool populateWithCurrentValues,
string hintText,
bool required,
string? requiredClientSideErrorMessage = default
string? requiredClientSideErrorMessage = default,
string cssClass = default
)
{
var model = ViewData.Model;
var property = model.GetType().GetProperty(aspFor);
var errorMessages = ViewData.ModelState[property?.Name]?.Errors.Select(e => e.ErrorMessage) ??
new string[] { };

var radiosList = radios.Select(
r => new RadiosItemViewModel(
r.Value,
Expand All @@ -32,8 +38,10 @@ public IViewComponentResult Invoke(
label,
string.IsNullOrEmpty(hintText) ? null : hintText,
radiosList,
errorMessages,
required,
string.IsNullOrEmpty(requiredClientSideErrorMessage) ? null : requiredClientSideErrorMessage
string.IsNullOrEmpty(requiredClientSideErrorMessage) ? null : requiredClientSideErrorMessage,
string.IsNullOrEmpty(cssClass) ? null : cssClass
);

return View(viewModel);
Expand Down
6 changes: 5 additions & 1 deletion NHSUKViewComponents.Web/ViewModels/CheckboxesViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,24 @@ public CheckboxesViewModel(
string? hintText,
string? errormessage,
IEnumerable<CheckboxItemViewModel> checkboxes,
bool required = false
bool required = false,
string? cssClass = default
)
{
Label = label;
HintText = hintText;
Checkboxes = checkboxes;
ErrorMessage = errormessage;
Required = required;
Class = cssClass;
}

public string Label { get; set; }

public string? HintText { get; set; }

public string? Class { get; set; }

public string? ErrorMessage { get; set; }

public IEnumerable<CheckboxItemViewModel> Checkboxes { get; set; }
Expand Down
12 changes: 11 additions & 1 deletion NHSUKViewComponents.Web/ViewModels/RadiosViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
namespace NHSUKViewComponents.Web.ViewModels
{
using System.Collections.Generic;
using System.Linq;

public class RadiosViewModel
{
Expand All @@ -9,23 +10,32 @@ public RadiosViewModel(
string label,
string hintText,
IEnumerable<RadiosItemViewModel> radios,
IEnumerable<string> errorMessages,
bool required,
string? requiredClientSideErrorMessage = default
string? requiredClientSideErrorMessage = default,
string? cssClass = default
)
{
var errorMessageList = errorMessages.ToList();
AspFor = aspFor;
Label = !required && !label.EndsWith("(optional)") ? label + " (optional)" : label;
HintText = hintText;
Radios = radios;
ErrorMessages = errorMessageList;
HasError = errorMessageList.Any();
Required = required;
RequiredClientSideErrorMessage = requiredClientSideErrorMessage;
Class = cssClass;
}

public string AspFor { get; set; }

public string Label { get; set; }

public string HintText { get; set; }
public string? Class { get; set; }
public IEnumerable<string> ErrorMessages { get; set; }
public readonly bool HasError;

public IEnumerable<RadiosItemViewModel> Radios { get; set; }
public bool Required { get; set; }
Expand Down
12 changes: 11 additions & 1 deletion NHSUKViewComponents.Web/Views/Shared/Components/Checkboxes/Default.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,17 @@
<div class="nhsuk-checkboxes">
@foreach (var checkbox in Model.Checkboxes)
{
<partial name="_CheckboxItem" model="checkbox" />
if (!string.IsNullOrWhiteSpace(Model.Class))
{
<div class="@Model.Class">
<partial name="_CheckboxItem" model="checkbox" />
</div>
}
else
{
<partial name="_CheckboxItem" model="checkbox" />
}

}
</div>
</fieldset>
Expand Down
135 changes: 88 additions & 47 deletions NHSUKViewComponents.Web/Views/Shared/Components/RadioList/Default.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,55 +3,96 @@

@model RadiosViewModel

<div class="nhsuk-form-group">

<fieldset class="nhsuk-fieldset" aria-describedby="@Model.Label.RemoveWhitespace()-hint">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
<label class="nhsuk-fieldset__heading">
@Model.Label
</label>
</legend>

@if (Model.HintText != null)
{
<div class="nhsuk-hint" id="@Model.Label.RemoveWhitespace()-hint">
@Html.Raw(Model.HintText)
</div>
}

@if (Model.Required)
{
<div class="nhsuk-form-group @(Model.HasError ? "nhsuk-form-group--error" : "")">

<fieldset class="nhsuk-fieldset" aria-describedby="@Model.Label.RemoveWhitespace()-hint">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
<label class="nhsuk-fieldset__heading">
@Model.Label
</label>
</legend>

@if (Model.HintText != null)
{
<div class="nhsuk-hint" id="@Model.Label.RemoveWhitespace()-hint">
@Html.Raw(Model.HintText)
</div>
}

@if (Model.HasError)
{
<div id="@Model.AspFor-error" class="nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
@foreach (var errorMessage in Model.ErrorMessages)
{
<span class="error-message--margin-bottom-1 nhsuk-error-message">
<span class="nhsuk-u-visually-hidden">Error:</span> @errorMessage
</span>
}
</div>
}

@if (Model.Required && !Model.HasError)
{
<div data-valmsg-for="@Model.AspFor" data-valmsg-replace="true" class="nhsuk-error-message field-validation-valid nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
</div>
}

<div class="nhsuk-radios" aria-required="@(Model.Required ? "true" : "false" )">
@foreach (var (radio, index) in Model.Radios.Select((r, i) => (r, i)))
{
var radioId = $"{radio.Value}-{index}";
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input"
id="@radioId"
name="@Model.AspFor"
type="radio"
value="@radio.Value"
aria-describedby="@radio.Value-item-hint"
data-val-required="@(Model.Required ? Model.RequiredClientSideErrorMessage : "" )"
data-val="@(Model.Required ? "true" : "false" )"
@(radio.Selected ? "checked" : string.Empty) />
<label class="nhsuk-label nhsuk-radios__label" for="@radioId">
@radio.Label
</label>
@if (radio.HintText != null)
{
<div class="nhsuk-hint nhsuk-radios__hint" id="@radio.Value-item-hint">
@radio.HintText
</div>
}
</div>
}
}

<div class="nhsuk-radios" aria-required="@(Model.Required ? "true" : "false" )">
@foreach (var (radio, index) in Model.Radios.Select((r, i) => (r, i)))
{
var radioId = $"{radio.Value}-{index}";
if (!string.IsNullOrWhiteSpace(Model.Class))
{
<div class="@Model.Class">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input"
id="@radioId"
name="@Model.AspFor"
type="radio"
value="@radio.Value"
aria-describedby="@radio.Value-item-hint"
data-val-required="@(Model.Required ? Model.RequiredClientSideErrorMessage : "" )"
data-val="@(Model.Required ? "true" : "false" )"
@(radio.Selected ? "checked" : string.Empty) />
<label class="nhsuk-label nhsuk-radios__label" for="@radioId">
@radio.Label
</label>
@if (radio.HintText != null)
{
<div class="nhsuk-hint nhsuk-radios__hint" id="@radio.Value-item-hint">
@radio.HintText
</div>
}
</div>
</div>
}
else
{
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input"
id="@radioId"
name="@Model.AspFor"
type="radio"
value="@radio.Value"
aria-describedby="@radio.Value-item-hint"
data-val-required="@(Model.Required ? Model.RequiredClientSideErrorMessage : "" )"
data-val="@(Model.Required ? "true" : "false" )"
@(radio.Selected ? "checked" : string.Empty) />
<label class="nhsuk-label nhsuk-radios__label" for="@radioId">
@radio.Label
</label>
@if (radio.HintText != null)
{
<div class="nhsuk-hint nhsuk-radios__hint" id="@radio.Value-item-hint">
@radio.HintText
</div>
}
</div>
}

</div>
</fieldset>
}

</div>
</fieldset>

</div>