Make radioSelect use GOVUK Frontend radios

Includes changing the code so that the radios
aren't split into two columns in the HTML present
when the page loads. This layout is now added by
the JS.
This commit is contained in:
Tom Byers
2021-01-26 15:43:59 +00:00
parent 8e3aeea9a0
commit 31b344d6b4
4 changed files with 34 additions and 35 deletions

View File

@@ -10,9 +10,9 @@
'initial': Hogan.compile(`
{{#showNowAsDefault}}
<div class="radio-select__column">
<div class="multiple-choice js-multiple-choice">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label class="block-label js-block-label" for="{{name}}-0">Now</label>
<div class="govuk-radios__item">
<input class="govuk-radios__input" checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label class="govuk-label govuk-radios__label" for="{{name}}-0">Now</label>
</div>
</div>
{{/showNowAsDefault}}
@@ -25,17 +25,17 @@
'choose': Hogan.compile(`
{{#showNowAsDefault}}
<div class="radio-select__column">
<div class="multiple-choice js-multiple-choice js-initial-option">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label for="{{name}}-0">Now</label>
<div class="govuk-radios__item">
<input class="govuk-radios__input" checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label class="govuk-label govuk-radios__label" for="{{name}}-0">Now</label>
</div>
</div>
{{/showNowAsDefault}}
<div class="radio-select__column">
{{#choices}}
<div class="multiple-choice js-multiple-choice js-option">
<input type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
<label for="{{id}}">{{label}}</label>
<div class="govuk-radios__item js-option">
<input class="govuk-radios__input" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
<label class="govuk-label govuk-radios__label" for="{{id}}">{{label}}</label>
</div>
{{/choices}}
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--done' aria-expanded='true' value='Done' />
@@ -44,17 +44,17 @@
'chosen': Hogan.compile(`
{{#showNowAsDefault}}
<div class="radio-select__column">
<div class="multiple-choice js-multiple-choice js-initial-option">
<input id="{{name}}-0" name="{{name}}" type="radio" value="">
<label for="{{name}}-0">Now</label>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label class="govuk-label govuk-radios__label" for="{{name}}-0">Now</label>
</div>
</div>
{{/showNowAsDefault}}
<div class="radio-select__column">
{{#choices}}
<div class="multiple-choice js-multiple-choice">
<input checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
<label for="{{id}}">{{label}}</label>
<div class="govuk-radios__item">
<input class="govuk-radios__input" checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
<label class="govuk-label govuk-radios__label" for="{{id}}">{{label}}</label>
</div>
{{/choices}}
</div>