darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-27 01:18:29 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3781 from alphagov/add-govuk-radios-7

Browse Source 
Add GOVUK radios [part 7]
This commit is contained in:
Tom Byers
2021-02-02 11:40:53 +00:00
committed by GitHub
parent 8e66be6619 31b344d6b4
commit 0cedf39992
4 changed files with 34 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/assets/javascripts/radioSelect.js
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>

2
app/main/forms.py
View File

@@ -1485,7 +1485,7 @@ class ChooseTimeForm(StripWhitespaceForm):
]
self.scheduled_for.categories = get_next_days_until(get_furthest_possible_scheduled_time())
scheduled_for = RadioField(
scheduled_for = GovukRadiosField(
'When should Notify send these messages?',
default='',
)

13
app/templates/views/check/ok.html
View File

@@ -1,6 +1,5 @@
{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/radios.html" import radio_select %}
{% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
{% from "components/page-header.html" import page_header %}
{% from "components/button/macro.njk" import govukButton %}
@@ -36,10 +35,14 @@
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="hidden" name="contact_list_id" value="{{ request.args.get('contact_list_id', '') }}" />
{% if choose_time_form and template.template_type != 'letter' %}
{{ radio_select(
choose_time_form.scheduled_for,
wrapping_class='bottom-gutter-2-3'
) }}
{{ choose_time_form.scheduled_for(param_extensions={
'formGroup': {'classes': 'bottom-gutter-2-3'},
'attributes': {
'data-module': 'radio-select',
'data-categories': choose_time_form.scheduled_for.categories|join(','),
'data-show-now-as-default': 'true'
}
}) }}
{% endif %}
{% if (template.template_type != 'letter' or not request.args.from_test) and not letter_too_long %}
{% set button_text %}

24
tests/javascripts/radioSelect.test.js
View File

@@ -71,9 +71,9 @@ describe('RadioSelect', () => {
const num = idx + 1;
result +=
`<div class="multiple-choice">
<input id="scheduled_for-${num}" name="scheduled_for" type="radio" value="2019-05-${dayAsNumber}T${hour}:00:00.459156">
<label for="scheduled_for-${num}">
`<div class="govuk-radios__item">
<input class="govuk-radios__input" id="scheduled_for-${num}" name="scheduled_for" type="radio" value="2019-05-${dayAsNumber}T${hour}:00:00.459156">
<label class="govuk-label govuk-radios__label" for="scheduled_for-${num}">
${day} at ${hourLabel}
</label>
</div>`;
@@ -101,21 +101,17 @@ describe('RadioSelect', () => {
When should Notify send these messages?
</legend>
<div class="radio-select" data-module="radio-select" data-categories="${CATEGORIES.join(',')}" data-show-now-as-default="true">
<div class="radio-select__column">
<div class="multiple-choice">
<input checked="" id="scheduled_for-0" name="scheduled_for" type="radio" value="">
<label for="scheduled_for-0">
Now
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" checked="" id="scheduled_for-0" name="scheduled_for" type="radio" value="">
<label class="govuk-label govuk-radios__label" for="scheduled_for-0">
Now
</label>
</div>
<div class="radio-select__column">
${options()}
</div>
</div>
</fieldset>`;
originalOptionsForAllCategories = Array.from(document.querySelectorAll('.radio-select__column:nth-child(2) .multiple-choice'))
originalOptionsForAllCategories = Array.from(document.querySelectorAll('.govuk-radios__item:not(:first-of-type)'))
.map(option => getDataFromOption(option));
});
@@ -215,7 +211,7 @@ describe('RadioSelect', () => {
test("show the options for it, with the right label and value", () => {
// check options this reveals against those originally in the page for this category
const options = document.querySelectorAll('.radio-select__column:nth-child(2) .multiple-choice');
const options = document.querySelectorAll('.radio-select__column:nth-child(2) .govuk-radios__item');
const optionsThatMatchOriginals = Array.from(options).filter((option, idx) => {
const optionData = getDataFromOption(option);