mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-09 19:04:33 -04:00
Removed all govuk css (#2814)
* Removed all govuk css * Updated reference files * Removing govuk js * Fixed casing for modules, removed unused page * Got more reference images * Updated template page * Removed govuk padding util * Updated hint to uswds hint * More govuk cleanup * Commiting backstopjs ref files * Fixed all unit tests that broke due to brittleness around govuk styling * Added new ref images * Final removal of govuk * Officially removed all govuk references * Updated reference file * Updated link to button * UI modernization * Cleanup * removed govuk escaping tests since they are no longer needed * Fix CodeQL security issue in escapeElementName function - Escape backslashes first before other special characters - Prevents potential double-escaping vulnerability - Addresses CodeQL alert about improper string escaping * Found more govuk removal. Fixed unit tests * Add missing pipeline check to pre-commit * updated test * Updated e2e test * More update to e2e test * Fixed another e2e test * Simple PR comments addressed * More updates * Updated backstop ref files * Refactored folder selection for non-admins * Updated redundant line * Updated tests to include correct mocks * Added more ref files * Addressing carlos comments * Addressing Carlo comments, cleanup of window initing * More cleanup and addressing carlo comments * Fixing a11 scan * Fixed a few issues with javascript * Fixed for pr * Fixing e2e tests * Tweaking e2e test * Added more ref files and cleaned up urls.js * Fixed bug with creating new template * Removed brittle test - addressed code ql comment * e2e race condition fix * More e2e test fixes * Updated e2e tests to not wait for text sent * Updated test to not wait for button click response * Made tear down more resilent if staging is down * reverted e2e test to what was working before main merge * Updated backstopRef images * Updated gulp to include job-polling differently
This commit is contained in:
Alex Janousek
@@ -1,73 +0,0 @@
|
||||
// JS Module used to combine all the JS modules used in the application into a single entry point,
|
||||
// a bit like `app/__init__` in the Flask app.
|
||||
//
|
||||
// When processed by a bundler, this is turned into a Immediately Invoked Function Expression (IIFE)
|
||||
// The IIFE format allows it to run in browsers that don't support JS Modules.
|
||||
//
|
||||
// Exported items will be added to the window.GOVUK namespace.
|
||||
// For example, `export { Frontend }` will assign `Frontend` to `window.Frontend`
|
||||
|
||||
// GOVUK Frontend modules
|
||||
import Header from 'govuk-frontend/components/header/header';
|
||||
import Details from 'govuk-frontend/components/details/details';
|
||||
import Button from 'govuk-frontend/components/button/button';
|
||||
import Radios from 'govuk-frontend/components/radios/radios';
|
||||
|
||||
// Modules from 3rd party vendors
|
||||
|
||||
/**
|
||||
* TODO: Ideally this would be a NodeList.prototype.forEach polyfill
|
||||
* This seems to fail in IE8, requires more investigation.
|
||||
* See: https://github.com/imagitama/nodelist-foreach-polyfill
|
||||
*/
|
||||
function nodeListForEach(nodes, callback) {
|
||||
if (window.NodeList.prototype.forEach) {
|
||||
return nodes.forEach(callback)
|
||||
}
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
callback.call(window, nodes[i], i, nodes);
|
||||
}
|
||||
}
|
||||
|
||||
// Copy of the initAll function from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/all.js
|
||||
// except it only includes, and initialises, the components used by this application.
|
||||
function initAll(options) {
|
||||
// Set the options to an empty object by default if no options are passed.
|
||||
options = typeof options !== 'undefined' ? options : {}
|
||||
|
||||
// Allow the user to initialise US Frontend in only certain sections of the page
|
||||
// Defaults to the entire document if nothing is set.
|
||||
var scope = typeof options.scope !== 'undefined' ? options.scope : document
|
||||
|
||||
// Find all buttons with [role=button] on the scope to enhance.
|
||||
new Button(scope).init()
|
||||
|
||||
// Find all global details elements to enhance.
|
||||
var $details = scope.querySelectorAll('details')
|
||||
nodeListForEach($details, function ($detail) {
|
||||
new Details($detail).init()
|
||||
})
|
||||
|
||||
// Find first header module to enhance.
|
||||
var $toggleButton = scope.querySelector('[data-module="header"]')
|
||||
new Header($toggleButton).init()
|
||||
|
||||
var $radios = scope.querySelectorAll('[data-module="radios"]')
|
||||
nodeListForEach($radios, function ($radio) {
|
||||
new Radios($radio).init()
|
||||
})
|
||||
}
|
||||
|
||||
// Create separate namespace for GOVUK Frontend.
|
||||
var Frontend = {
|
||||
"Header": Header,
|
||||
"Details": Details,
|
||||
"Button": Button,
|
||||
"initAll": initAll
|
||||
}
|
||||
|
||||
// The exported object will be assigned to window.GOVUK in our production code
|
||||
// (bundled into an IIFE by RollupJS)
|
||||
export {
|
||||
Frontend
|
||||
}
|
||||
4
app/assets/javascripts/modules/init.js
Normal file
4
app/assets/javascripts/modules/init.js
Normal file
@@ -0,0 +1,4 @@
|
||||
// Initialize the NotifyModules namespace
|
||||
// This file MUST be loaded first in the build to ensure window.NotifyModules exists
|
||||
// before any other modules try to use it
|
||||
window.NotifyModules = window.NotifyModules || {};
|
||||
154
app/assets/javascripts/modules/show-hide-content.js
Normal file
154
app/assets/javascripts/modules/show-hide-content.js
Normal file
@@ -0,0 +1,154 @@
|
||||
(function (window) {
|
||||
'use strict';
|
||||
|
||||
var $ = window.jQuery;
|
||||
|
||||
function ShowHideContent () {
|
||||
var self = this;
|
||||
|
||||
var selectors = {
|
||||
namespace: 'ShowHideContent',
|
||||
radio: '[data-target] > input[type="radio"]',
|
||||
checkbox: '[data-target] > input[type="checkbox"]'
|
||||
};
|
||||
|
||||
function initToggledContent () {
|
||||
var $control = $(this);
|
||||
var $content = getToggledContent($control);
|
||||
|
||||
if ($content.length) {
|
||||
$control.attr('aria-controls', $content.attr('id'));
|
||||
$control.attr('aria-expanded', 'false');
|
||||
$content.attr('aria-hidden', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
function getToggledContent ($control) {
|
||||
try {
|
||||
var id = $control.attr('aria-controls');
|
||||
|
||||
if (!id) {
|
||||
id = $control.closest('[data-target]').data('target');
|
||||
}
|
||||
|
||||
if (!id || !/^[\w-]+$/.test(id)) {
|
||||
console.warn('Invalid element ID:', id);
|
||||
return $();
|
||||
}
|
||||
|
||||
return $('#' + id);
|
||||
} catch (error) {
|
||||
console.error('Error getting toggled content:', error);
|
||||
return $();
|
||||
}
|
||||
}
|
||||
|
||||
function showToggledContent ($control, $content) {
|
||||
if ($content.hasClass('display-none')) {
|
||||
$content.removeClass('display-none');
|
||||
$content.attr('aria-hidden', 'false');
|
||||
|
||||
if ($control.attr('aria-controls')) {
|
||||
$control.attr('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function hideToggledContent ($control, $content) {
|
||||
$content.addClass('display-none');
|
||||
$content.attr('aria-hidden', 'true');
|
||||
|
||||
if ($control.attr('aria-controls')) {
|
||||
$control.attr('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
function handleRadioContent ($control, $content) {
|
||||
var selector = selectors.radio + '[name=' + escapeElementName($control.attr('name')) + ']';
|
||||
var $radios = $(selector);
|
||||
|
||||
$radios.each(function () {
|
||||
hideToggledContent($(this), getToggledContent($(this)));
|
||||
});
|
||||
|
||||
showToggledContent($control, $content);
|
||||
}
|
||||
|
||||
function handleCheckboxContent ($control, $content) {
|
||||
if ($control.is(':checked')) {
|
||||
showToggledContent($control, $content);
|
||||
} else {
|
||||
hideToggledContent($control, $content);
|
||||
}
|
||||
}
|
||||
|
||||
function escapeElementName (str) {
|
||||
// First escape backslashes, then escape other special characters
|
||||
// This prevents double-escaping issues identified by CodeQL
|
||||
return str
|
||||
? str.replace(/\\/g, '\\\\').replace(/([!"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g, '\\$1')
|
||||
: str;
|
||||
}
|
||||
|
||||
function setupHandlers () {
|
||||
var $controls = $(selectors.radio + ', ' + selectors.checkbox);
|
||||
|
||||
$(selectors.radio).on('click.' + selectors.namespace, function () {
|
||||
handleRadioContent($(this), getToggledContent($(this)));
|
||||
});
|
||||
|
||||
$(selectors.checkbox).on('click.' + selectors.namespace, function () {
|
||||
handleCheckboxContent($(this), getToggledContent($(this)));
|
||||
});
|
||||
if ($controls.filter(':checked').length) {
|
||||
$controls.filter(':checked').each(function () {
|
||||
var $control = $(this);
|
||||
var $content = getToggledContent($control);
|
||||
|
||||
if ($control.is('[type=radio]')) {
|
||||
handleRadioContent($control, $content);
|
||||
} else {
|
||||
handleCheckboxContent($control, $content);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
self.destroy = function () {
|
||||
var $controls = $(selectors.radio + ', ' + selectors.checkbox);
|
||||
|
||||
$controls.each(function () {
|
||||
var $control = $(this);
|
||||
var $content = getToggledContent($control);
|
||||
|
||||
$control.removeAttr('aria-controls aria-expanded');
|
||||
$content.removeAttr('aria-hidden');
|
||||
});
|
||||
|
||||
$(selectors.radio).off('.' + selectors.namespace);
|
||||
$(selectors.checkbox).off('.' + selectors.namespace);
|
||||
};
|
||||
|
||||
self.init = function () {
|
||||
try {
|
||||
$(selectors.radio + ', ' + selectors.checkbox).each(initToggledContent);
|
||||
setupHandlers();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error initializing show-hide content:', error);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
ShowHideContent.prototype.start = function (element) {
|
||||
try {
|
||||
var instance = new ShowHideContent();
|
||||
instance.init(element);
|
||||
} catch (error) {
|
||||
console.error('Failed to start show-hide content module:', error);
|
||||
}
|
||||
};
|
||||
|
||||
window.NotifyModules.ShowHideContent = ShowHideContent;
|
||||
|
||||
})(window);
|
||||
60
app/assets/javascripts/modules/uswds-modules.js
Normal file
60
app/assets/javascripts/modules/uswds-modules.js
Normal file
@@ -0,0 +1,60 @@
|
||||
(function (window) {
|
||||
'use strict';
|
||||
|
||||
var $ = window.jQuery;
|
||||
|
||||
window.NotifyModules.moduleSystem = {
|
||||
find: function (container) {
|
||||
container = container || $('body');
|
||||
|
||||
var modules;
|
||||
var moduleSelector = '[data-module]';
|
||||
|
||||
modules = container.find(moduleSelector);
|
||||
|
||||
if (container.is(moduleSelector)) {
|
||||
modules = modules.add(container);
|
||||
}
|
||||
|
||||
return modules;
|
||||
},
|
||||
|
||||
start: function (container) {
|
||||
var modules = this.find(container);
|
||||
|
||||
for (var i = 0, l = modules.length; i < l; i++) {
|
||||
try {
|
||||
var module;
|
||||
var element = $(modules[i]);
|
||||
var type = this.camelCaseAndCapitalise(element.data('module'));
|
||||
var started = element.data('module-started');
|
||||
|
||||
if (typeof window.NotifyModules[type] === 'function' && !started) {
|
||||
module = new window.NotifyModules[type]();
|
||||
if (module.start) {
|
||||
module.start(element);
|
||||
}
|
||||
element.data('module-started', true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize module:', type || 'unknown', error);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
camelCaseAndCapitalise: function (string) {
|
||||
return this.capitaliseFirstLetter(this.camelCase(string));
|
||||
},
|
||||
|
||||
camelCase: function (string) {
|
||||
return string.replace(/-([a-z])/g, function (g) {
|
||||
return g.charAt(1).toUpperCase();
|
||||
});
|
||||
},
|
||||
|
||||
capitaliseFirstLetter: function (string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
}
|
||||
};
|
||||
|
||||
})(window);
|
||||
Reference in New Issue
Block a user