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

Revert "Re-introduce govuk checkboxes"

Browse Source
This commit is contained in:
Tom Byers
2020-07-15 13:41:34 +01:00
committed by GitHub
parent 86f70ae9fa
commit dfcddb757e
33 changed files with 404 additions and 923 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/collapsibleCheckboxes.js
View File

@@ -5,7 +5,7 @@
function Summary (module) {
this.module = module;
this.$el = module.$formGroup.find('.selection-summary').first();
this.$el = module.$formGroup.find('.selection-summary');
this.fieldLabel = module.fieldLabel;
this.total = module.total;
this.addContent();
@@ -25,7 +25,6 @@
if (this.fieldLabel === 'folder') { this.$text.addClass('selection-summary__text--folders'); }
this.$el.append(this.$text);
this.module.$formGroup.find('.govuk-hint').remove();
};
Summary.prototype.update = function(selection) {
let template;
@@ -87,13 +86,12 @@
.focus();
};
CollapsibleCheckboxes.prototype.start = function(component) {
this.$component = $(component);
this.$formGroup = this.$component.find('.govuk-form-group').first();
this.$fieldset = this.$formGroup.find('fieldset').first();
this.$formGroup = $(component);
this.$fieldset = this.$formGroup.find('fieldset');
this.$checkboxes = this.$fieldset.find('input[type=checkbox]');
this.fieldLabel = this.$component.data('fieldLabel');
this.fieldLabel = this.$formGroup.data('fieldLabel');
this.total = this.$checkboxes.length;
this.legendText = this.$fieldset.find('legend').first().text().trim();
this.legendText = this.$fieldset.find('legend').text().trim();
this.expanded = false;
this.addHeadingHideLegend();
@@ -115,7 +113,7 @@
};
CollapsibleCheckboxes.prototype.getSelection = function() { return this.$checkboxes.filter(':checked').length; };
CollapsibleCheckboxes.prototype.addHeadingHideLegend = function() {
const headingLevel = this.$component.data('heading-level') || '2';
const headingLevel = this.$formGroup.data('heading-level') || '2';
this.$heading = $(`<h${headingLevel} class="heading-small">${this.legendText}</h${headingLevel}>`);
this.$fieldset.before(this.$heading);

28
app/assets/stylesheets/components/checkboxes.scss
View File

@@ -1,7 +1,3 @@
// Taken from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/_checkboxes.scss
$govuk-touch-target-size: 44px;
$govuk-checkboxes-size: 40px;
.selection-summary {
.selection-summary__text {
@@ -69,30 +65,6 @@ $govuk-checkboxes-size: 40px;
}
.govuk-form-group--nested {
$border-thickness: $govuk-touch-target-size - $govuk-checkboxes-size;
$border-indent: $govuk-touch-target-size / 2;
position: relative;
// To equalise the spacing between the line and the top/bottom of
// the radio
margin-top: govuk-spacing(1) + ($border-thickness / 2);
margin-bottom: govuk-spacing(1) * -1;
padding-left: govuk-spacing(2) + 2;
&:before {
content: "";
position: absolute;
bottom: 0;
left: $border-indent * -1;
width: $border-thickness;
height: 100%;
background: $govuk-border-colour;
}
}
.selection-content {
margin-bottom: govuk-spacing(4);

53
app/assets/stylesheets/components/message.scss
View File

@@ -24,13 +24,10 @@
}
}
$govuk-checkboxes-size: 40px;
$govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
$message-type-bottom-spacing: govuk-spacing(4);
.message {
&-name {
@include bold-24;
margin: 0;
a {
@@ -66,20 +63,37 @@ $message-type-bottom-spacing: govuk-spacing(4);
}
&-type {
color: $govuk-secondary-text-colour;
margin: 0 0 $message-type-bottom-spacing 0;
padding-left: 0;
color: $secondary-text-colour;
margin: 0 0 govuk-spacing(4) 0;
pointer-events: none;
}
}
#template-list {
margin-top: govuk-spacing(6);
&.top-gutter-5px {
margin-top: 5px;
}
}
.template-list {
&-item {
&-with-checkbox {
padding-left: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right;
position: relative;
padding-left: govuk-spacing(9);
.multiple-choice {
position: absolute;
left: 0;
}
}
&-hidden-by-default {
@@ -109,29 +123,6 @@ $message-type-bottom-spacing: govuk-spacing(4);
}
&-label {
position: absolute;
left: 0;
width: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right;
height: 100%;
padding: 0;
}
// Fix for GOVUK Frontend selector with high precendence
// https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/hint/_hint.scss
&-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl)+.template-list-item-hint {
margin-bottom: $message-type-bottom-spacing;
}
&-hint {
padding-left: 0;
}
}
&-folder,
&-template {
@include govuk-font($size: 24, $weight: bold, $line-height: 1.25);
}
&-folder {

1
app/assets/stylesheets/govuk-frontend/_all.scss
View File

@@ -26,7 +26,6 @@ $govuk-assets-path: "/static/";
@import 'components/button/_button';
@import 'components/details/_details';
@import 'components/radios/_radios';
@import 'components/checkboxes/_checkboxes';
@import "utilities/all";
@import "overrides/all";

321
app/main/forms.py
View File

@@ -3,7 +3,7 @@ from datetime import datetime, timedelta
from itertools import chain
import pytz
from flask import Markup, render_template, request
from flask import request
from flask_login import current_user
from flask_wtf import FlaskForm as Form
from flask_wtf.file import FileAllowed
@@ -17,7 +17,6 @@ from notifications_utils.recipients import (
normalise_phone_number,
validate_phone_number,
)
from werkzeug.utils import cached_property
from wtforms import (
BooleanField,
DateField,
@@ -38,6 +37,7 @@ from wtforms import (
)
from wtforms.fields.html5 import EmailField, SearchField, TelField
from wtforms.validators import URL, DataRequired, Length, Optional, Regexp
from wtforms.widgets import CheckboxInput, ListWidget
from app import format_thousands
from app.main.validators import (
@@ -113,6 +113,11 @@ def get_next_days_until(until):
]
class MultiCheckboxField(SelectMultipleField):
widget = ListWidget(prefix_label=False)
option_widget = CheckboxInput()
class RadioField(WTFormsRadioField):
def __init__(
@@ -313,16 +318,13 @@ class RadioFieldWithNoneOption(FieldWithNoneOption, RadioField):
class NestedFieldMixin:
def children(self):
# start map with root option as a single child entry
child_map = {None: [option for option in self
if option.data == self.NONE_OPTION_VALUE]}
# add entries for all other children
for option in self:
# assign all options with a NONE_OPTION_VALUE (not always None) to the None key
if option.data == self.NONE_OPTION_VALUE:
child_ids = [
folder['id'] for folder in self.all_template_folders
@@ -338,47 +340,6 @@ class NestedFieldMixin:
return child_map
# to be used as the only version of .children once radios are converted
@cached_property
def _children(self):
return self.children()
def get_items_from_options(self, field):
items = []
for option in self._children[None]:
item = self.get_item_from_option(option)
if option.data in self._children:
item['children'] = self.render_children(field.name, option.label.text, self._children[option.data])
items.append(item)
return items
def render_children(self, name, label, options):
params = {
"name": name,
"fieldset": {
"legend": {
"text": label,
"classes": "govuk-visually-hidden"
}
},
"formGroup": {
"classes": "govuk-form-group--nested"
},
"asList": True,
"items": []
}
for option in options:
item = self.get_item_from_option(option)
if len(self._children[option.data]):
item['children'] = self.render_children(name, option.label.text, self._children[option.data])
params['items'].append(item)
return render_template('forms/fields/checkboxes/template.njk', params=params)
class NestedRadioField(RadioFieldWithNoneOption, NestedFieldMixin):
pass
@@ -527,215 +488,12 @@ class RegisterUserFromOrgInviteForm(StripWhitespaceForm):
auth_type = HiddenField('auth_type', validators=[DataRequired()])
class govukCheckboxesMixin:
def extend_params(self, params, extensions):
items = None
param_items = len(params['items']) if 'items' in params else 0
# split items off from params to make it a pure dict
if 'items' in extensions:
items = extensions['items']
del extensions['items']
# merge dicts
params.update(extensions)
# merge items
if items:
if 'items' not in params:
params['items'] = items
else:
for idx, _item in enumerate(items):
if idx >= param_items:
params['items'].append(items[idx])
else:
params['items'][idx].update(items[idx])
PermissionsAbstract = type("PermissionsAbstract", (StripWhitespaceForm,), {
permission: BooleanField(label) for permission, label in permissions
})
class govukCheckboxField(govukCheckboxesMixin, BooleanField):
def __init__(self, label='', validators=None, param_extensions=None, **kwargs):
super(govukCheckboxField, self).__init__(label, validators, false_values=None, **kwargs)
self.param_extensions = param_extensions
# self.__call__ renders the HTML for the field by:
# 1. delegating to self.meta.render_field which
# 2. calls field.widget
# this bypasses that by making self.widget a method with the same interface as widget.__call__
def widget(self, field, param_extensions=None, **kwargs):
# error messages
error_message = None
if field.errors:
error_message = {
"attributes": {
"data-module": "track-error",
"data-error-type": field.errors[0],
"data-error-label": field.name
},
"text": " ".join(field.errors).strip()
}
params = {
'name': field.name,
'errorMessage': error_message,
'items': [
{
"name": field.name,
"id": field.id,
"text": field.label.text,
"value": 'y',
"checked": field.data
}
]
}
# extend default params with any sent in during instantiation
if self.param_extensions:
self.extend_params(params, self.param_extensions)
# add any sent in though use in templates
if param_extensions:
self.extend_params(params, param_extensions)
return Markup(
render_template('forms/fields/checkboxes/macro.njk', params=params))
# based on work done by @richardjpope: https://github.com/richardjpope/recourse/blob/master/recourse/forms.py#L6
class govukCheckboxesField(govukCheckboxesMixin, SelectMultipleField):
render_as_list = False
def __init__(self, label='', validators=None, param_extensions=None, **kwargs):
super(govukCheckboxesField, self).__init__(label, validators, **kwargs)
self.param_extensions = param_extensions
def get_item_from_option(self, option):
return {
"name": option.name,
"id": option.id,
"text": option.label.text,
"value": str(option.data), # to protect against non-string types like uuids
"checked": option.checked
}
def get_items_from_options(self, field):
return [self.get_item_from_option(option) for option in field]
def extend_params(self, params, extensions):
items = None
param_items = len(params['items']) if 'items' in params else 0
# split items off from params to make it a pure dict
if 'items' in extensions:
items = extensions['items']
del extensions['items']
# merge dicts
params.update(extensions)
# merge items
if items:
if 'items' not in params:
params['items'] = items
else:
for idx, _item in enumerate(items):
if idx >= param_items:
params['items'].append(items[idx])
else:
params['items'][idx].update(items[idx])
# self.__call__ renders the HTML for the field by:
# 1. delegating to self.meta.render_field which
# 2. calls field.widget
# this bypasses that by making self.widget a method with the same interface as widget.__call__
def widget(self, field, param_extensions=None, **kwargs):
# error messages
error_message = None
if field.errors:
error_message = {
"attributes": {
"data-module": "track-error",
"data-error-type": field.errors[0],
"data-error-label": field.name
},
"text": " ".join(field.errors).strip()
}
# returns either a list or a hierarchy of lists
# depending on how get_items_from_options is implemented
items = self.get_items_from_options(field)
params = {
'name': field.name,
"fieldset": {
"attributes": {"id": field.name},
"legend": {
"text": field.label.text,
"classes": "govuk-fieldset__legend--s"
}
},
"asList": self.render_as_list,
'errorMessage': error_message,
'items': items
}
# extend default params with any sent in during instantiation
if self.param_extensions:
self.extend_params(params, self.param_extensions)
# add any sent in though use in templates
if param_extensions:
self.extend_params(params, param_extensions)
return Markup(
render_template('forms/fields/checkboxes/macro.njk', params=params))
# Extends fields using the govukCheckboxesField interface to wrap their render in HTML needed by the collapsible JS
class govukCollapsibleCheckboxesMixin:
def __init__(self, label='', validators=None, field_label='', param_extensions=None, **kwargs):
super(govukCollapsibleCheckboxesMixin, self).__init__(label, validators, param_extensions, **kwargs)
self.field_label = field_label
def widget(self, field, **kwargs):
# add a blank hint to act as an ARIA live-region
if self.param_extensions is not None:
self.param_extensions.update(
{"hint": {"html": "<div class=\"selection-summary\" role=\"region\" aria-live=\"polite\"></div>"}})
else:
self.param_extensions = \
{"hint": {"html": "<div class=\"selection-summary\" role=\"region\" aria-live=\"polite\"></div>"}}
# wrap the checkboxes HTML in the HTML needed by the collapisble JS
return Markup(
f'<div class="selection-wrapper"'
f' data-module="collapsible-checkboxes"'
f' data-field-label="{self.field_label}">'
f' {super(govukCollapsibleCheckboxesMixin, self).widget(field, **kwargs)}'
f'</div>'
)
class govukCollapsibleCheckboxesField(govukCollapsibleCheckboxesMixin, govukCheckboxesField):
pass
# govukCollapsibleCheckboxesMixin adds an ARIA live-region to the hint and wraps the render in HTML needed by the
# collapsible JS
# NestedFieldMixin puts the items into a tree hierarchy, pre-rendering the sub-trees of the top-level items
class govukCollapsibleNestedCheckboxesField(govukCollapsibleCheckboxesMixin, NestedFieldMixin, govukCheckboxesField):
NONE_OPTION_VALUE = None
render_as_list = True
class PermissionsForm(StripWhitespaceForm):
class PermissionsForm(PermissionsAbstract):
def __init__(self, all_template_folders=None, *args, **kwargs):
super().__init__(*args, **kwargs)
self.folder_permissions.choices = []
@@ -745,9 +503,7 @@ class PermissionsForm(StripWhitespaceForm):
(item['id'], item['name']) for item in ([{'name': 'Templates', 'id': None}] + all_template_folders)
]
folder_permissions = govukCollapsibleNestedCheckboxesField(
'Folders this team member can see',
field_label='folder')
folder_permissions = NestedCheckboxesField('Folders this team member can see')
login_authentication = RadioField(
'Sign in using',
@@ -759,23 +515,21 @@ class PermissionsForm(StripWhitespaceForm):
validators=[DataRequired()]
)
permissions_field = govukCheckboxesField(
'Permssions',
choices=[
(value, label) for value, label in permissions
],
param_extensions={
"hint": {"text": "All team members can see sent messages."}
}
)
@property
def permissions(self):
return {role for role in roles.keys() if self[role].data is True}
@property
def permissions_fields(self):
return (getattr(self, permission) for permission, _ in permissions)
@classmethod
def from_user(cls, user, service_id, **kwargs):
return cls(
**kwargs,
**{
"permissions_field": [
role for role in roles.keys() if user.has_permission_for_service(service_id, role)]
role: user.has_permission_for_service(service_id, role)
for role in roles.keys()
},
login_authentication=user.auth_type
)
@@ -1347,7 +1101,7 @@ class ServiceContactDetailsForm(StripWhitespaceForm):
class ServiceReplyToEmailForm(StripWhitespaceForm):
email_address = email_address(label='Reply-to email address', gov_user=False)
is_default = govukCheckboxField("Make this email address the default")
is_default = BooleanField("Make this email address the default")
class ServiceSmsSenderForm(StripWhitespaceForm):
@@ -1361,11 +1115,11 @@ class ServiceSmsSenderForm(StripWhitespaceForm):
DoesNotStartWithDoubleZero(),
]
)
is_default = govukCheckboxField("Make this text message sender the default")
is_default = BooleanField("Make this text message sender the default")
class ServiceEditInboundNumberForm(StripWhitespaceForm):
is_default = govukCheckboxField("Make this text message sender the default")
is_default = BooleanField("Make this text message sender the default")
class ServiceLetterContactBlockForm(StripWhitespaceForm):
@@ -1375,7 +1129,7 @@ class ServiceLetterContactBlockForm(StripWhitespaceForm):
NoCommasInPlaceHolders()
]
)
is_default = govukCheckboxField("Set as your default address")
is_default = BooleanField("Set as your default address")
def validate_letter_contact_block(self, field):
line_count = field.data.strip().count('\n')
@@ -1541,7 +1295,7 @@ class GuestList(StripWhitespaceForm):
class DateFilterForm(StripWhitespaceForm):
start_date = DateField("Start Date", [validators.optional()])
end_date = DateField("End Date", [validators.optional()])
include_from_test_key = govukCheckboxField("Include test keys")
include_from_test_key = BooleanField("Include test keys", default="checked", false_values={"N"})
class RequiredDateFilterForm(StripWhitespaceForm):
@@ -1853,9 +1607,7 @@ class TemplateFolderForm(StripWhitespaceForm):
(item.id, item.name) for item in all_service_users
]
users_with_permission = govukCollapsibleCheckboxesField(
'Team members who can see this folder',
field_label='folder')
users_with_permission = MultiCheckboxField('Team members who can see this folder')
name = StringField('Folder name', validators=[DataRequired(message='Cannot be empty')])
@@ -1960,18 +1712,9 @@ class TemplateAndFoldersSelectionForm(Form):
return self.move_to_new_folder_name.data
return None
templates_and_folders = govukCheckboxesField(
'Choose templates or folders',
validators=[required_for_ops('move-to-new-folder', 'move-to-existing-folder')],
choices=[], # added to keep order of arguments, added properly in __init__
param_extensions={
"fieldset": {
"legend": {
"classes": "govuk-visually-hidden"
}
}
}
)
templates_and_folders = MultiCheckboxField('Choose templates or folders', validators=[
required_for_ops('move-to-new-folder', 'move-to-existing-folder')
])
# if no default set, it is set to None, which process_data transforms to '__NONE__'
# this means '__NONE__' (self.ALL_TEMPLATES option) is selected when no form data has been submitted
# set default to empty string so process_data method doesn't perform any transformation
@@ -2070,13 +1813,11 @@ class AcceptAgreementForm(StripWhitespaceForm):
class BroadcastAreaForm(StripWhitespaceForm):
areas = govukCheckboxesField('Choose areas to broadcast to')
areas = MultiCheckboxField('Choose areas to broadcast to')
def __init__(self, choices, *args, **kwargs):
super().__init__(*args, **kwargs)
self.areas.choices = choices
self.areas.render_as_list = True
self.areas.param_extensions = {'fieldset': {'legend': {'classes': 'govuk-visually-hidden'}}}
@classmethod
def from_library(cls, library):

4
app/main/views/manage_users.py
View File

@@ -63,7 +63,7 @@ def invite_user(service_id):
current_user.id,
service_id,
email_address,
set(form.permissions_field.data),
form.permissions,
form.login_authentication.data,
form.folder_permissions.data,
)
@@ -102,7 +102,7 @@ def edit_user_permissions(service_id, user_id):
if form.validate_on_submit():
user.set_permissions(
service_id,
permissions=set(form.permissions_field.data),
permissions=form.permissions,
folder_permissions=form.folder_permissions.data,
)
if service_has_email_auth:

6
app/main/views/platform_admin.py
View File

@@ -168,11 +168,9 @@ def platform_admin_services():
# Default to True if the user hasn’t done any filtering,
# otherwise respect their choice
form.include_from_test_key.data = True
include_from_test_key = form.include_from_test_key.data
api_args = {'detailed': True,
'only_active': False, # specifically DO get inactive services
'include_from_test_key': include_from_test_key,
'include_from_test_key': form.include_from_test_key.data,
}
if form.start_date.data:
@@ -186,7 +184,7 @@ def platform_admin_services():
return render_template(
'views/platform-admin/services.html',
include_from_test_key=include_from_test_key,
include_from_test_key=form.include_from_test_key.data,
form=form,
services=list(format_stats_by_service(services)),
page_title='{} services'.format(

46
app/templates/components/checkbox.html Normal file
View File

@@ -0,0 +1,46 @@
{% from "components/select-input.html" import select_nested, select %}
{% macro checkbox(
field,
hint=False,
width='2-3'
) %}
<div class="multiple-choice">
{{ checkbox_input(field.id, field.name, field.data) }}
<label for="{{ field.id }}">
{{ field.label.text }}
{% if hint %}
<div class="hint">
{{ hint }}
</div>
{% endif %}
</label>
</div>
{% endmacro %}
{% macro checkboxes_nested(field, child_map, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text") %}
{{ select_nested(field, child_map, hint, disable, option_hints, hide_legend, collapsible_opts, legend_style, input="checkbox") }}
{% endmacro %}
{% macro checkboxes(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}) %}
{{ select(field, hint, disable, option_hints, hide_legend, collapsible_opts, input="checkbox") }}
{% endmacro %}
{% macro checkbox_input(id, name, data=None, value="y") %}
<input
id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ value }}"
{% if data %}
checked
{% endif %}
>
{% endmacro %}
{% macro unlabelled_checkbox(id, name, data=None, value="y") %}
<div class="multiple-choice">
{{ checkbox_input(id, name, data, value) }}
<label></label>
</div>
{% endmacro %}

4
app/templates/forms/fields/checkboxes/macro.njk
View File

@@ -1,4 +0,0 @@
{%- macro govukCheckboxes(params) %}
{%- include "./template.njk" -%}
{%- endmacro %}
{{ govukCheckboxes(params) }}

136
app/templates/forms/fields/checkboxes/template.njk
View File

@@ -1,136 +0,0 @@
{% from "components/error-message/macro.njk" import govukErrorMessage -%}
{% from "components/fieldset/macro.njk" import govukFieldset %}
{% from "components/hint/macro.njk" import govukHint %}
{% from "components/label/macro.njk" import govukLabel %}
{#- Copied from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/template.njk
Changes:
- `classes` option added to `item` allow custom classes on the `.govuk-checkboxes__item` element
- `classes` option added to `item.hint` allow custom classes on the `.govuk-hint` element (added to GOVUK Frontend in v3.5.0 - remove when we update)
- `asList` option added the root `params` object to allow setting of the `.govuk-checkboxes` and `.govuk-checkboxes__item` element types
- `children` option added to `item` allowing the sending in of prerendered child checkboxes (allowing the creation of tree structures through recursion) -#}
{#- If an id 'prefix' is not passed, fall back to using the name attribute
instead. We need this for error messages and hints as well -#}
{% set idPrefix = params.idPrefix if params.idPrefix else params.name %}
{#- a record of other elements that we need to associate with the input using
aria-describedby – for example hints or error messages -#}
{% set describedBy = params.describedBy if params.describedBy else "" %}
{% if params.fieldset.describedBy %}
{% set describedBy = params.fieldset.describedBy %}
{% endif %}
{#- set the types of element used for the checkboxes and their group based on
whether asList is set -#}
{% if params.asList %}
{% set groupElement = 'ul' %}
{% set groupItemElement = 'li' %}
{% else %}
{% set groupElement = 'div' %}
{% set groupItemElement = 'div' %}
{% endif %}
{% set isConditional = false %}
{% for item in params.items %}
{% if item.conditional %}
{% set isConditional = true %}
{% endif %}
{% endfor %}
{#- fieldset is false by default -#}
{% set hasFieldset = true if params.fieldset else false %}
{#- Capture the HTML so we can optionally nest it in a fieldset -#}
{% set innerHtml %}
{% if params.hint %}
{% set hintId = idPrefix + '-hint' %}
{% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
{{ govukHint({
id: hintId,
classes: params.hint.classes,
attributes: params.hint.attributes,
html: params.hint.html,
text: params.hint.text
}) | indent(2) | trim }}
{% endif %}
{% if params.errorMessage %}
{% set errorId = idPrefix + '-error' %}
{% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
{{ govukErrorMessage({
id: errorId,
classes: params.errorMessage.classes,
attributes: params.errorMessage.attributes,
html: params.errorMessage.html,
text: params.errorMessage.text,
visuallyHiddenText: params.errorMessage.visuallyHiddenText
}) | indent(2) | trim }}
{% endif %}
<{{ groupElement }} class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
{%- if isConditional %} data-module="checkboxes"{% endif -%}>
{% for item in params.items %}
{% set id = item.id if item.id else idPrefix + "-" + loop.index %}
{% set name = item.name if item.name else params.name %}
{% set conditionalId = "conditional-" + id %}
{% set hasHint = true if item.hint.text or item.hint.html %}
{% set itemHintId = id + "-item-hint" if hasHint else "" %}
{% set itemDescribedBy = describedBy if not hasFieldset else "" %}
{% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
<{{ groupItemElement }} class="govuk-checkboxes__item {%- if item.classes %} {{ item.classes }}{% endif %}">
{%- if item.before %}{{ item.before }}{% endif -%}
<input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
{{-" checked" if item.checked }}
{{-" disabled" if item.disabled }}
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
{{ govukLabel({
html: item.html,
text: item.text,
classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
attributes: item.label.attributes,
for: id
}) | indent(6) | trim }}
{%- if hasHint %}
{{ govukHint({
id: itemHintId,
classes: 'govuk-checkboxes__hint' + (' ' + item.hint.classes if item.hint.classes),
attributes: item.hint.attributes,
html: item.hint.html,
text: item.hint.text
}) | indent(6) | trim }}
{%- endif %}
{%- if item.children %}
{{ item.children | safe }}
{%- endif %}
{% if params.asList and item.conditional %}
<div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
{{ item.conditional.html | safe }}
</div>
{% endif %}
{%- if item.after %}{{ item.after }}{% endif -%}
</{{ groupItemElement }}>
{% if not params.asList and item.conditional %}
<div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
{{ item.conditional.html | safe }}
</div>
{% endif %}
{% endfor %}
</{{ groupElement }}>
{% endset -%}
<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
{% if params.fieldset %}
{% call govukFieldset({
describedBy: describedBy,
classes: params.fieldset.classes,
attributes: params.fieldset.attributes,
legend: params.fieldset.legend
}) %}
{{ innerHtml | trim | safe }}
{% endcall %}
{% else %}
{{ innerHtml | trim | safe }}
{% endif %}
</div>

5
app/templates/views/broadcast/areas.html
View File

@@ -1,5 +1,6 @@
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import sticky_page_footer %}
{% from "components/checkbox.html" import checkboxes %}
{% from "components/form.html" import form_wrapper %}
{% from "components/live-search.html" import live_search %}
@@ -16,10 +17,10 @@
back_link=url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
)}}
{{ live_search(target_selector='.govuk-checkboxes__item', show=show_search_form, form=search_form, label='Search by name') }}
{{ live_search(target_selector='.multiple-choice', show=show_search_form, form=search_form, label='Search by name') }}
{% call form_wrapper() %}
{{ form.areas }}
{{ checkboxes(form.areas, hide_legend=True) }}
{{ sticky_page_footer('Add to broadcast') }}
{% endcall %}

1
app/templates/views/invite-user.html
View File

@@ -1,4 +1,5 @@
{% extends "withnav_template.html" %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}

15
app/templates/views/manage-users/permissions.html
View File

@@ -1,9 +1,20 @@
{% from "components/checkbox.html" import checkbox, checkboxes_nested %}
{% from "components/radios.html" import radio, radios, conditional_radio_panel %}
{{ form.permissions_field }}
<fieldset class="form-group">
<legend class="form-label heading-small">
Permissions
</legend>
<span class="hint">
All team members can see sent messages.
</span>
{% for field in form.permissions_fields %}
{{ checkbox(field) }}
{% endfor %}
</fieldset>
{% if form.folder_permissions.all_template_folders %}
{{ form.folder_permissions }}
{{ checkboxes_nested(form.folder_permissions, form.folder_permissions.children(), hide_legend=True, collapsible_opts={ 'field': 'folder' }) }}
{% elif user and user.platform_admin %}
<p class="bottom-gutter">
Platform admin users can access all template folders.

1
app/templates/views/platform-admin/_base_template.html
View File

@@ -1,5 +1,6 @@
{% extends "withoutnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/page-footer.html" import page_footer %}

4
app/templates/views/platform-admin/services.html
View File

@@ -1,5 +1,6 @@
{% extends "views/platform-admin/_base_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/big-number.html" import big_number, big_number_with_status %}
{% from "components/message-count-label.html" import message_count_label %}
@@ -69,7 +70,8 @@
{% call form_wrapper(method="get") %}
{{ textbox(form.start_date, hint="Enter start date in format YYYY-MM-DD") }}
{{ textbox(form.end_date, hint="Enter end date in format YYYY-MM-DD") }}
{{ form.include_from_test_key }}
{{ checkbox(form.include_from_test_key) }}
</br>
{{ govukButton({ "text": "Filter" }) }}
{% endcall %}
{% endset %}

5
app/templates/views/service-settings/email-reply-to/_verify-updates.html
View File

@@ -1,5 +1,6 @@
{% from "components/banner.html" import banner, banner_wrapper %}
{% from "components/textbox.html" import textbox %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}
{% from "components/button/macro.njk" import govukButton %}
@@ -54,7 +55,9 @@
hint='This should be a shared inbox managed by your team, not your own email address'
) }}
{% if not first_email_address and not existing_is_default %}
{{ form.is_default }}
<div class="form-group">
{{ checkbox(form.is_default) }}
</div>
{% endif %}
{{ page_footer('Try again') }}
{% endcall %}

5
app/templates/views/service-settings/email-reply-to/add.html
View File

@@ -1,5 +1,6 @@
{% extends "withnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}
@@ -23,7 +24,9 @@
safe_error_message=True
) }}
{% if not first_email_address %}
{{ form.is_default }}
<div class="form-group">
{{ checkbox(form.is_default) }}
</div>
{% endif %}
{{ page_footer('Add') }}
{% endcall %}

5
app/templates/views/service-settings/email-reply-to/edit.html
View File

@@ -1,6 +1,7 @@
{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/textbox.html" import textbox %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}
@@ -28,7 +29,9 @@
</p>
{{ page_footer('Save') }}
{% else %}
{{ form.is_default }}
<div class="form-group">
{{ checkbox(form.is_default) }}
</div>
{{ page_footer(
'Save',
delete_link=url_for('.service_confirm_delete_email_reply_to', service_id=current_service.id, reply_to_email_id=reply_to_email_address_id),

1
app/templates/views/service-settings/email-reply-to/verify.html
View File

@@ -1,5 +1,6 @@
{% extends "withnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}

5
app/templates/views/service-settings/letter-contact/add.html
View File

@@ -1,5 +1,6 @@
{% extends "withnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}
@@ -26,7 +27,9 @@
highlight_placeholders=True
) }}
{% if not first_contact_block %}
{{ form.is_default }}
<div class="form-group">
{{ checkbox(form.is_default) }}
</div>
{% endif %}
{{ page_footer('Add') }}
{% endcall %}

5
app/templates/views/service-settings/letter-contact/edit.html
View File

@@ -1,5 +1,6 @@
{% extends "withnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}
@@ -30,7 +31,9 @@
This is currently your default address for {{ current_service.name }}.
</p>
{% else %}
{{ form.is_default }}
<div class="form-group">
{{ checkbox(form.is_default) }}
</div>
{% endif %}
{{ page_footer(

5
app/templates/views/service-settings/sms-sender/add.html
View File

@@ -1,5 +1,6 @@
{% extends "withnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}
@@ -22,7 +23,9 @@
hint='Up to 11 characters, letters, numbers and spaces only'
) }}
{% if not first_sms_sender %}
{{ form.is_default }}
<div class="form-group">
{{ checkbox(form.is_default) }}
</div>
{% endif %}
{{ page_footer('Save') }}
{% endcall %}

5
app/templates/views/service-settings/sms-sender/edit.html
View File

@@ -1,6 +1,7 @@
{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/textbox.html" import textbox %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}
@@ -34,7 +35,9 @@
</p>
{{ page_footer('Save') }}
{% else %}
{{ form.is_default }}
<div class="form-group">
{{ checkbox(form.is_default) }}
</div>
{% if inbound_number %}
{{ page_footer('Save') }}
{% else %}

1
app/templates/views/support/form.html
View File

@@ -1,4 +1,5 @@
{% extends "withoutnav_template.html" %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import sticky_page_footer %}
{% from "components/page-header.html" import page_header %}

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

@@ -1,15 +1,13 @@
{% from "components/checkbox.html" import unlabelled_checkbox %}
{% from "components/message-count-label.html" import folder_contents_count, message_count_label %}
{% macro format_item_name(name, separators=True) -%}
{% macro format_item_name(name) -%}
{%- if name is string -%}
{{- name -}}
{%- else -%}
{%- for part in name -%}
{{- format_item_name(part, separators) -}}
{%- if not loop.last -%}
{%- if separators %}
<span class="message-name-separator"></span>{%- else %} {% endif -%}
{% endif -%}
{{- format_item_name(part) -}}
{%- if not loop.last %} <span class="message-name-separator"></span> {% endif -%}
{%- endfor -%}
{% endif %}
{%- endmacro %}
@@ -23,69 +21,37 @@
{% endif %}
</p>
{% else %}
<nav id="template-list" class="{{ 'govuk-!-margin-top-1' if (not show_template_nav and not show_search_box) else 'govuk-!margin-top-6' }}">
{% set checkboxes_data = [] %}
<nav id="template-list" class="{{ 'top-gutter-5px' if (not show_template_nav and not show_search_box) else '' }}">
{% for item in template_list %}
{% 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">
{{- 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">
<span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
</a>
{% else %}
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-template">
<span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
</a>
<div class="template-list-item {% if current_user.has_permissions('manage_templates') %}template-list-item-with-checkbox{% endif %} {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
{% if current_user.has_permissions('manage_templates') %}
{{ unlabelled_checkbox(
id='templates-or-folder-{}'.format(item.id),
name='templates_and_folders',
data=templates_and_folders_form.is_selected(item.id),
value=item.id,
) }}
{% endif %}
{% endset %}
{% set label_content %}
<span class="govuk-visually-hidden">
{%- for ancestor in item.ancestors %}{{ format_item_name(ancestor.name, separators=False) }} {% endfor -%}
{{ format_item_name(item.name, separators=False) -}}
</span>
{% endset %}
{% set item_meta %}
<span id="{{ item.id }}-item-hint" class="govuk-hint govuk-checkboxes__hint template-list-item-hint">
<h2 class="message-name">
{% 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">
{{- 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">
<span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
</a>
{% else %}
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-template">
<span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
</a>
{% endif %}
</h2>
<p class="message-type">
{{ item.hint }}
</span>
{% endset %}
{# create the item config now to include the label content -#}
{# TODO: "attributes": { "aria-describedby": item.id ~ "-hint" } needs to be added but govuk-frontend-jinja doesn't currently support this -#}
{% set checkbox_config = {
"html": label_content,
"label": {
"classes": "template-list-item-label",
},
"id": "templates-or-folder-" ~ item.id,
"classes": "template-list-item template-list-item-with-checkbox {}".format(
"template-list-item-hidden-by-default" if item.ancestors else "template-list-item-without-ancestors"),
"after": item_link_content ~ item_meta
} %}
{% set _ = checkboxes_data.append(checkbox_config) %}
{% if not current_user.has_permissions('manage_templates') %}
<div class="template-list-item {%- if item.ancestors %} template-list-item-hidden-by-default {%- else %} template-list-item-without-ancestors{%- endif %}">
<h2 class="message-name">
{{ item_link_content }}
</h2>
<p class="message-type govuk-!-margin-bottom-4">
{{ item.hint }}
</p>
</div>
{% endif %}
</p>
</div>
{% endfor %}
{% if current_user.has_permissions('manage_templates') %}
{{ templates_and_folders_form.templates_and_folders(param_extensions={ "items": checkboxes_data }) }}
{% endif %}
</nav>
{% endif %}

3
app/templates/views/templates/manage-template-folder.html
View File

@@ -1,6 +1,7 @@
{% extends "withnav_template.html" %}
{% from "components/folder-path.html" import folder_path, page_title_folder_path %}
{% from "components/textbox.html" import textbox %}
{% from "components/checkbox.html" import checkbox, checkboxes %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}
@@ -25,7 +26,7 @@
{% call form_wrapper(action=url_for('main.manage_template_folder', service_id=current_service.id, template_folder_id=template_folder_id)) %}
{{ textbox(form.name, width='1-1') }}
{% if current_user.has_permissions("manage_service") and form.users_with_permission.all_service_users %}
{{ form.users_with_permission }}
{{ checkboxes(form.users_with_permission, collapsible_opts={ 'field': 'team member' }) }}
{% endif %}
{{ page_footer(

1
app/templates/views/two-factor.html
View File

@@ -1,5 +1,6 @@
{% extends "withoutnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/checkbox.html" import checkbox %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}