darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2025-12-10 15:13:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2518 from GSA/2514-remove-colourPreview-js

Browse Source 
2514 - Removing colourPreview.js
This commit is contained in:
ccostino
2025-05-01 09:27:51 -04:00
committed by GitHub
parent 2adb87dfe4 232c6cb9e1
commit 02023aa775
3 changed files with 0 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/assets/javascripts/colourPreview.js
View File

@@ -1,29 +0,0 @@
(function(Modules) {
"use strict";
let isSixDigitHex = value => value.match(/^#[0-9A-F]{6}$/i);
let colourOrWhite = value => isSixDigitHex(value) ? value : '#FFFFFF';
Modules.ColourPreview = function() {
this.start = component => {
this.$input = $(component);
this.$input.closest('.usa-form-group').append(
this.$preview = $('<span class="textbox-colour-preview"></span>')
);
this.$input
.on('input', this.update)
.trigger('input');
};
this.update = () => this.$preview.css(
'background', colourOrWhite(this.$input.val())
);
};
})(window.GOVUK.Modules);

1
gulpfile.js
View File

@@ -69,7 +69,6 @@ const javascripts = () => {
paths.src + 'javascripts/errorTracking.js',
paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
paths.src + 'javascripts/fullscreenTable.js',
paths.src + 'javascripts/colourPreview.js',
paths.src + 'javascripts/templateFolderForm.js',
paths.src + 'javascripts/collapsibleCheckboxes.js',
paths.src + 'javascripts/radioSlider.js',

139
tests/javascripts/colourPreview.test.js
View File

@@ -1,139 +0,0 @@
const helpers = require('./support/helpers.js');
beforeAll(() => {
require('../../app/assets/javascripts/colourPreview.js');
});
afterAll(() => {
require('./support/teardown.js');
});
describe('Colour preview', () => {
let field;
let textbox;
let swatchEl;
beforeEach(() => {
// set up DOM
document.body.innerHTML = `
<div class="usa-form-group">
<label class="govuk-form-label" for="colour">
Colour
</label>
<input class="govuk-input govuk-input--width-6" id="colour" name="colour" rows="8" type="text" value="" data-module="colour-preview">
</div>`;
field = document.querySelector('.usa-form-group');
textbox = document.querySelector('input[type=text]');
});
afterEach(() => {
document.body.innerHTML = '';
});
describe("When the page loads", () => {
test("It should add a swatch element for the preview", () => {
// start the module
window.GOVUK.modules.start();
swatchEl = document.querySelector('.textbox-colour-preview');
expect(swatchEl).not.toBeNull();
});
test("If the textbox is empty it should make the swatch white", () => {
// start the module
window.GOVUK.modules.start();
swatchEl = document.querySelector('.textbox-colour-preview');
// textbox defaults to empty
// colours are output in RGB
expect(swatchEl.style.background).toEqual('rgb(255, 255, 255)');
});
test("If the textbox has a value which is a hex code it should add that colour to the swatch", () => {
textbox.setAttribute('value', '#00FF00');
// start the module
window.GOVUK.modules.start();
swatchEl = document.querySelector('.textbox-colour-preview');
// colours are output in RGB
expect(swatchEl.style.background).toEqual('rgb(0, 255, 0)');
});
test("If the textbox has a value which isn't a hex code it should make the swatch white", () => {
textbox.setAttribute('value', 'green');
// start the module
window.GOVUK.modules.start();
swatchEl = document.querySelector('.textbox-colour-preview');
// colours are output in RGB
expect(swatchEl.style.background).toEqual('rgb(255, 255, 255)');
});
});
describe("When input is added to the textbox", () => {
beforeEach(() => {
// start the module
window.GOVUK.modules.start();
swatchEl = document.querySelector('.textbox-colour-preview');
});
test("If the textbox is empty it should make the swatch white", () => {
helpers.triggerEvent(document.querySelector('input[type=text]'), 'input');
// textbox defaults to empty
expect(swatchEl.style.background).toEqual('rgb(255, 255, 255)');
});
test("If the textbox has a value which is a hex code it should add that colour to the swatch", () => {
textbox.setAttribute('value', '#00FF00');
helpers.triggerEvent(document.querySelector('input[type=text]'), 'input');
// textbox defaults to empty
expect(swatchEl.style.background).toEqual('rgb(0, 255, 0)');
});
test("If the textbox has a value which isn't a hex code it should make the swatch white", () => {
textbox.setAttribute('value', 'green');
helpers.triggerEvent(document.querySelector('input[type=text]'), 'input');
// textbox defaults to empty
expect(swatchEl.style.background).toEqual('rgb(255, 255, 255)');
});
});
});