darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-06 03:13:42 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fixing the issue of the template area buttons not working

Browse Source
This commit is contained in:
Jonathan Bobel
2023-06-15 15:15:37 -04:00
parent c059be553a
commit 86cf2ab836
5 changed files with 49 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/javascripts/templateFolderForm.js
View File

@@ -82,7 +82,7 @@
this.render();
}
this.$form.on('click', 'button.usa-button', (event) => this.actionButtonClicked(event));
this.$form.on('click', 'button.usa-button--event', (event) => this.actionButtonClicked(event));
this.$form.on('change', 'input[type=checkbox]', () => this.templateFolderCheckboxChanged());
};
@@ -91,7 +91,7 @@
$.each(this.states.filter(state => 'description' in state), (idx, state) => {
id = `${state.key}__description`;
description = `<p class="govuk-visually-hidden" id="${id}">${state.description}</p>`;
description = `<p class="usa-sr-only" id="${id}">${state.description}</p>`;
state.$el
.prepend(description)
.attr('aria-describedby', id);
@@ -149,7 +149,7 @@
this.makeButton = (text, opts) => {
let $btn = $('<a href=""></a>')
.html(text)
.addClass('usa-link font-body-sm margin-left-1 js-cancel')
.addClass('usa-link js-cancel')
// isn't set if cancelSelector is undefined
.data('target', opts.cancelSelector || undefined)
.attr('tabindex', '0')
@@ -162,7 +162,7 @@
});
if (opts.hasOwnProperty('nonvisualText')) {
$btn.append(`<span class="govuk-visually-hidden"> ${opts.nonvisualText}</span>`);
$btn.append(`<span class="usa-sr-only"> ${opts.nonvisualText}</span>`);
}
return $btn;
@@ -299,10 +299,10 @@
this.nothingSelectedButtons = $(`
<div id="nothing_selected">
<div class="js-stick-at-bottom-when-scrolling">
<button class="usa-button" value="add-new-template" aria-expanded="false">
<button class="usa-button usa-button--event" value="add-new-template" aria-expanded="false">
New template
</button>
<button class="usa-button" value="add-new-folder" aria-expanded="false">New folder</button>
<button class="usa-button usa-button--event" value="add-new-folder" aria-expanded="false">New folder</button>
<div class="template-list-selected-counter">
<span class="template-list-selected-counter__count" aria-hidden="true">
${this.selectionStatus.default}
@@ -315,10 +315,10 @@
this.itemsSelectedButtons = $(`
<div id="items_selected">
<div class="js-stick-at-bottom-when-scrolling">
<button class="usa-button" value="move-to-existing-folder" aria-expanded="false">
Move<span class="govuk-visually-hidden"> selection to folder</span>
<button class="usa-button usa-button--event" value="move-to-existing-folder" aria-expanded="false">
Move<span class="usa-sr-only"> selection to folder</span>
</button>
<button class="usa-button" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
<button class="usa-button usa-button--event" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
<div class="template-list-selected-counter" aria-hidden="true">
<span class="template-list-selected-counter__count" aria-hidden="true">
${this.selectionStatus.selected(1)}

27
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -134,3 +134,30 @@ td.table-empty-message {
.sub-content .banner-dangerous h1 {
margin-top: 0;
}
.template-list-item-without-ancestors .template-list-folder:active,
.template-list-item-without-ancestors .template-list-folder:active::before,
.template-list-item-without-ancestors .template-list-folder:focus,
.template-list-item-without-ancestors .template-list-folder:focus::before,
.template-list-item-without-ancestors .template-list-template:active,
.template-list-item-without-ancestors .template-list-template:active::before,
.template-list-item-without-ancestors .template-list-template:focus,
.template-list-item-without-ancestors .template-list-template:focus::before {
background-color: transparent;
box-shadow: none;
}
.folder-heading a.folder-heading-folder,
.folder-heading-folder,
.template-list-folder {
background-image: none;
padding-left: 0;
text-indent: 0;
&:hover {
color: color("blue-warm-70v");
}
}
.template-list-item-without-ancestors a.template-list-folder:first-of-type {
text-indent: 0;
}

4
app/templates/components/folder-path.html
View File

@@ -17,12 +17,12 @@
{% else %}
{% if folder.id %}
{% if current_user.has_template_folder_permission(folder) %}
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type, template_folder_id=folder.id) }}" class="govuk-link govuk-link--no-visited-state folder-heading-folder {% if loop.index < (loop.length - 1) %}folder-heading-folder-truncated{% endif %}" title="{{ folder.name }}">{{ folder.name }}</a>
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type, template_folder_id=folder.id) }}" class="usa-link folder-heading-folder {% if loop.index < (loop.length - 1) %}folder-heading-folder-truncated{% endif %}" title="{{ folder.name }}">{{ folder.name }}</a>
{% else %}
<span class="folder-heading-folder">{{ folder.name }}</span>
{% endif %}
{% else %}
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type) }}" title="Templates" class="govuk-link govuk-link--no-visited-state {% if loop.length > 2 %}folder-heading-folder-root-truncated{% endif %}">Templates</a>
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type) }}" title="Templates" class="usa-link {% if loop.length > 2 %}folder-heading-folder-root-truncated{% endif %}">Templates</a>
{% endif %}
{% if not loop.last %}{{ folder_path_separator() }}{% endif %}
{% endif %}

6
app/templates/views/templates/_template_list.html
View File

@@ -32,12 +32,12 @@
{% set item_link_content %}
{% for ancestor in item.ancestors %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="usa-link template-list-folder">
{{- format_item_name(ancestor.name) -}}
</a> <span class="message-name-separator"></span>
{% endfor %}
{% if item.is_folder %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}" class="usa-link template-list-folder">
<span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
</a>
{% else %}
@@ -60,7 +60,7 @@
{% endset %}
{% set item_meta %}
<span id="{{ item.id }}-item-hint" class="govuk-hint govuk-checkboxes__hint template-list-item-hint">
<span id="{{ item.id }}-item-hint" class="usa-hint template-list-item-hint">
{{ item.hint }}
</span>
{% endset %}

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

@@ -392,8 +392,8 @@ describe('TemplateFolderForm', () => {
const cancelLink = formControls.querySelector('.js-cancel');
expect(cancelLink).not.toBeNull();
expect(cancelLink.querySelector('.govuk-visually-hidden')).not.toBeNull();
expect(cancelLink.querySelector('.govuk-visually-hidden').textContent.trim()).toEqual('new template');
expect(cancelLink.querySelector('.usa-sr-only')).not.toBeNull();
expect(cancelLink.querySelector('.usa-sr-only').textContent.trim()).toEqual('new template');
});
@@ -520,8 +520,8 @@ describe('TemplateFolderForm', () => {
const cancelLink = formControls.querySelector('.js-cancel');
expect(cancelLink).not.toBeNull();
expect(cancelLink.querySelector('.govuk-visually-hidden')).not.toBeNull();
expect(cancelLink.querySelector('.govuk-visually-hidden').textContent.trim()).toEqual('new folder');
expect(cancelLink.querySelector('.usa-sr-only')).not.toBeNull();
expect(cancelLink.querySelector('.usa-sr-only').textContent.trim()).toEqual('new folder');
});
@@ -742,8 +742,8 @@ describe('TemplateFolderForm', () => {
const cancelLink = formControls.querySelector('.js-cancel');
expect(cancelLink).not.toBeNull();
expect(cancelLink.querySelector('.govuk-visually-hidden')).not.toBeNull();
expect(cancelLink.querySelector('.govuk-visually-hidden').textContent.trim()).toEqual('move to folder');
expect(cancelLink.querySelector('.usa-sr-only')).not.toBeNull();
expect(cancelLink.querySelector('.usa-sr-only').textContent.trim()).toEqual('move to folder');
});
@@ -844,8 +844,8 @@ describe('TemplateFolderForm', () => {
const cancelLink = formControls.querySelector('.js-cancel');
expect(cancelLink).not.toBeNull();
expect(cancelLink.querySelector('.govuk-visually-hidden')).not.toBeNull();
expect(cancelLink.querySelector('.govuk-visually-hidden').textContent.trim()).toEqual('move to new folder');
expect(cancelLink.querySelector('.usa-sr-only')).not.toBeNull();
expect(cancelLink.querySelector('.usa-sr-only').textContent.trim()).toEqual('move to new folder');
});