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

Radio buttons and list edits

Browse Source
This commit is contained in:
Jonathan Bobel
2023-08-25 15:31:44 -04:00
parent 8b3807da3c
commit 8ab550a22f
35 changed files with 2430 additions and 14966 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tests/javascripts/collapsibleCheckboxes.test.js
View File

@@ -22,7 +22,7 @@ describe('Collapsible fieldset', () => {
result += `<li class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="${id}" name="folder-permissions" type="checkbox" value="${id}">
<label class="govuk-label govuk-checkboxes__label" for="${id}">
<label class="usa-radio__label govuk-checkboxes__label" for="${id}">
Folder ${id}
</label>
</li>`;

2
tests/javascripts/listEntry.test.js
View File

@@ -50,7 +50,7 @@ describe("List entry", () => {
result += `
<div class="list-entry">
<div class="usa-form-group">
<label for="domains-${idx + 1}" class="govuk-label govuk-input--numbered__label">
<label for="domains-${idx + 1}" class="usa-radio__label govuk-input--numbered__label">
<span class="usa-sr-only">domain number </span>${idx + 1}.
</label>
<input type="text" name="domains-${idx + 1}" id="domains-${idx + 1}" class="govuk-input govuk-input--numbered " autocomplete="off">

14
tests/javascripts/liveSearch.test.js
View File

@@ -64,7 +64,7 @@ describe('Live search', () => {
// set up DOM
document.body.innerHTML = `
<div class="live-search js-header" data-module="live-search" data-targets=".govuk-radios__item">
<div class="live-search js-header" data-module="live-search" data-targets=".usa-radio">
<div class="form-group">
<label class="form-label" for="search">
${searchLabelText}
@@ -92,7 +92,7 @@ describe('Live search', () => {
// start the module
window.GOVUK.modules.start();
const listItems = list.querySelectorAll('.govuk-radios__item');
const listItems = list.querySelectorAll('.usa-radio');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
expect(listItemsShowing.length).toEqual(listItems.length);
@@ -107,7 +107,7 @@ describe('Live search', () => {
// start the module
window.GOVUK.modules.start();
const listItems = list.querySelectorAll('.govuk-radios__item');
const listItems = list.querySelectorAll('.usa-radio');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
expect(listItemsShowing.length).toEqual(2);
@@ -123,7 +123,7 @@ describe('Live search', () => {
// start the module
window.GOVUK.modules.start();
const listItems = list.querySelectorAll('.govuk-radios__item');
const listItems = list.querySelectorAll('.usa-radio');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
expect(listItemsShowing.length).toEqual(1);
@@ -162,7 +162,7 @@ describe('Live search', () => {
searchTextbox.value = '';
helpers.triggerEvent(searchTextbox, 'input');
const listItems = list.querySelectorAll('.govuk-radios__item');
const listItems = list.querySelectorAll('.usa-radio');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
expect(listItemsShowing.length).toEqual(listItems.length);
@@ -181,7 +181,7 @@ describe('Live search', () => {
searchTextbox.value = 'Home';
helpers.triggerEvent(searchTextbox, 'input');
const listItems = list.querySelectorAll('.govuk-radios__item');
const listItems = list.querySelectorAll('.usa-radio');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
expect(listItemsShowing.length).toEqual(1);
@@ -200,7 +200,7 @@ describe('Live search', () => {
searchTextbox.value = 'Department for';
helpers.triggerEvent(searchTextbox, 'input');
const listItems = list.querySelectorAll('.govuk-radios__item');
const listItems = list.querySelectorAll('.usa-radio');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
expect(listItemsShowing.length).toEqual(2);

2
tests/javascripts/previewPane.test.js
View File

@@ -65,7 +65,7 @@ describe('Preview pane', () => {
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div data-module="autofocus">
<div class="live-search js-header" data-module="live-search" data-targets=".govuk-radios__item">
<div class="live-search js-header" data-module="live-search" data-targets=".usa-radio">
<div class="form-group">
<label class="form-label" for="search">
Search branding styles by name

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

@@ -71,9 +71,9 @@ describe('RadioSelect', () => {
const num = idx + 1;
result +=
`<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}">
`<div class="usa-radio">
<input class="usa-radio__input" id="scheduled_for-${num}" name="scheduled_for" type="radio" value="2019-05-${dayAsNumber}T${hour}:00:00.459156">
<label class="usa-radio__label" for="scheduled_for-${num}">
${day} at ${hourLabel}
</label>
</div>`;
@@ -101,9 +101,9 @@ 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="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">
<div class="usa-radio">
<input class="usa-radio__input" checked="" id="scheduled_for-0" name="scheduled_for" type="radio" value="">
<label class="usa-radio__label" for="scheduled_for-0">
Now
</label>
</div>
@@ -111,7 +111,7 @@ describe('RadioSelect', () => {
</div>
</fieldset>`;
originalOptionsForAllCategories = Array.from(document.querySelectorAll('.govuk-radios__item:not(:first-of-type)'))
originalOptionsForAllCategories = Array.from(document.querySelectorAll('.usa-radio:not(:first-of-type)'))
.map(option => getDataFromOption(option));
});
@@ -211,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) .govuk-radios__item');
const options = document.querySelectorAll('.radio-select__column:nth-child(2) .usa-radio');
const optionsThatMatchOriginals = Array.from(options).filter((option, idx) => {
const optionData = getDataFromOption(option);

6
tests/javascripts/support/helpers/html.js
View File

@@ -8,9 +8,9 @@ function getRadios (fields, name) {
const id = field.id || `${name}-${count}`;
return `
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="${id}" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
<label class="govuk-label govuk-radios__label" for="${id}">
<div class="usa-radio">
<input class="usa-radio__input" id="${id}" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
<label class="usa-radio__label" for="${id}">
${field.label}
</label>
</div>`;