Merge branch 'main' of https://github.com/GSA/notifications-admin into 2123-back-button-context

This commit is contained in:
Jonathan Bobel
2025-04-25 10:27:25 -04:00
30 changed files with 553 additions and 192 deletions

View File

@@ -11,6 +11,12 @@
{% include "components/head.html" %}
</head>
<body class="usa-template__body {{ bodyClasses }}">
<div id="upload-status-live"
class="usa-sr-only"
aria-live="assertive"
tabindex="-1"
role="status">
</div>
<script nonce="{{ csp_nonce() }}">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
{% block bodyStart %}
{% block extra_javascripts_before_body %}

View File

@@ -4,10 +4,6 @@
{% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None, context=None, action=None, id=None, thing=None) %}
<div
class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'
{% if type == 'dangerous' %}
role='group'
tabindex='-1'
{% endif %}
{% if id %}
id={{ id }}
{% endif %}

View File

@@ -27,17 +27,21 @@
</label>
{{ field(**{
'class': 'file-upload-field',
'id': field.name,
'accept': allowed_file_extensions|format_list_items('.{item}')|join(',')|e
}) }}
<label class="file-upload-button usa-button" for="{{ field.name }}">
{{ button_text }}
</label>
<button type="button"
class="usa-button file-upload-button"
data-module="upload-trigger"
data-file-input-id="{{ field.name }}">
{{ button_text }}
</button>
{% if alternate_link and alternate_link_text %}
<span class="file-upload-alternate-link">
or <a class="usa-link" href="{{ alternate_link }}">{{ alternate_link_text }}</a>
</span>
{% endif %}
<label class="file-upload-filename" for="{{ field.name }}"></label>
<span class="file-upload-filename" aria-live="polite"></span>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
{{ usaButton({ "text": "Submit", "classes": "file-upload-submit" }) }}
</form>

View File

@@ -5,7 +5,6 @@
highlight_placeholders=False,
autofocus=False,
autosize=False,
colour_preview=False,
help_link=None,
help_link_text=None,
width='2-3',
@@ -13,58 +12,82 @@
safe_error_message=False,
rows=8,
extra_form_group_classes='',
placeholder=''
placeholder='',
input_id=None
) %}
{% set field_id = kwargs.id if kwargs.id is defined else field.id %}
{% set described_by = '' %}
{% if hint %}{% set described_by = described_by + field_id ~ '-hint' %}{% endif %}
{% if field.errors %}
{% if described_by %}{% set described_by = described_by + ' ' %}{% endif %}
{% set described_by = described_by + field_id ~ '-error' %}
{% endif %}
<div
class="usa-form-group{% if field.errors %} usa-form-group--error{% endif %} {{ extra_form_group_classes }}"
data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}"
>
<label class="usa-label" for="{{ field.name }}">
{% if label %}
{{ label }}
{% else %}
{{ field.label.text }}
{% endif %}
<label class="usa-label" for="{{ field_id }}">
{{ label or field.label.text }}
</label>
{% if hint %}
<div class="usa-hint">
<div class="usa-hint" id="{{ field_id }}-hint">
{{ hint }}
</div>
{% endif %}
{% if field.errors %}
<span id="{{ field.name}}-error" class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}" tabindex="-1" aria-live="assertive" role="alert">
<span id="{{ field_id }}-error" class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}" tabindex="-1" aria-live="assertive" role="alert">
<span class="usa-sr-only">Error:</span>
{% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
{% if not safe_error_message %}
{{ field.errors[0] }}
{% else %}
{{ field.errors[0] | safe }}
{% endif %}
</span>
{% endif %}
{%
if highlight_placeholders or autosize
%}
{% if highlight_placeholders or autosize %}
{% set field_class = 'usa-textarea form-control-{} textbox-highlight-textbox'.format(width) %}
{% else %}
{% set field_class = 'form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else '') %}
{% set field_class = 'usa-input' %}
{% endif %}
{%
set field_class = 'form-control ' + field_class + (
' form-control-error' if field.errors else ''
)
%}
{{ field(
class=field_class,
data_module='enhanced-textbox' if highlight_placeholders or autosize else '',
data_highlight_placeholders='true' if highlight_placeholders else 'false',
rows=rows|string,
placeholder=placeholder,
aria_describedby=field.name+"-error",
required='required' if required else None,
**kwargs
) }}
{% set field_class = 'form-control ' ~ field_class ~ (' form-control-error' if field.errors else '') %}
{% if autosize or highlight_placeholders %}
<textarea
id="{{ field_id }}"
name="{{ field.name }}"
class="{{ field_class }}"
rows="{{ rows }}"
placeholder="{{ placeholder }}"
aria-describedby="{{ described_by.strip() }}"
{% if field.flags.required %}required{% endif %}
data-module="enhanced-textbox"
data-highlight-placeholders="true"
>{{ field._value() }}</textarea>
{% else %}
{% set input_type = 'tel' if 'phone' in field.label.text else 'text' %}
<input
id="{{ field_id }}"
name="{{ field.name }}"
type="{{ input_type }}"
class="{{ field_class }}"
value="{{ field._value() }}"
placeholder="{{ placeholder }}"
aria-describedby="{{ described_by.strip() }}"
{% if field.flags.required %}required{% endif %}
/>
{% endif %}
{% if suffix %}
<span>{{ suffix }}</span>
{% endif %}
{% if help_link and help_link_text %}
<p class="textbox-help-link">
<a class="usa-link" href='{{ help_link }}'>{{ help_link_text }}</a>
<a class="usa-link" href="{{ help_link }}">{{ help_link_text }}</a>
</p>
{% endif %}
</div>

View File

@@ -20,7 +20,11 @@ Error
{% block maincolumn_content %}
<div class="">
{# Alert for users of AT #}
<span id="upload-error" class="usa-sr-only">File upload failed</span>
{% call banner_wrapper(type='dangerous') %}
{% if recipients.too_many_rows %}
@@ -150,7 +154,7 @@ Error
) }}
{% endif %}
</div>
<a href="#content" class="usa-link back-to-top-link">Back to top</a>
<a href="#content" class="usa-link back-to-top-link display-block margin-top-2">Back to top</a>
</div>
{% endif %}

View File

@@ -21,6 +21,8 @@
{{ template|string }}
<div class="bottom-gutter-3-2">
{# Alert for users of AT #}
<span id="upload-success" class="usa-sr-only">File uploaded successfully</span>
<form method="post" enctype="multipart/form-data" action="{{url_for('main.preview_job', service_id=current_service.id, template_id=template_id, upload_id=upload_id)}}" class='page-footer'>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
{% if choose_time_form %}

View File

@@ -16,6 +16,8 @@
{% block maincolumn_content %}
<div class="">
{# Alert for users of AT #}
<span id="upload-failed" class="usa-sr-only">File upload failed</span>
{% call banner_wrapper(type='dangerous') %}
{% if row_errors|length == 1 %}
<div class="usa-alert usa-alert--error" role="alert">

View File

@@ -1,6 +1,7 @@
{% extends "withnav_template.html" %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/textbox.html" import textbox %}
{% from "components/form.html" import form_wrapper %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}
@@ -38,10 +39,19 @@
data_force_focus=True
) %}
<div class="grid-row">
{% set extra_class = "extra-tracking" if form.placeholder_value.label.text == "phone number" else "" %}
{% set placeholder_id = "phone number" if form.placeholder_value.label.text == "phone number" else "" %}
<div class="grid-col-12 {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
{{ form.placeholder_value(param_extensions={"classes": "", "id": "phone-number"}) }}
{% set is_phone_number = form.placeholder_value.label.text == "phone number" %}
{% set label_text = "Country code and phone number" if current_placeholder == "phone number" else current_placeholder %}
{% set hint_text = "For example: +18885551234" if is_phone_number else None %}
{% set extra_class = "extra-tracking" if is_phone_number else "" %}
<div class="grid-col-12 {{ extra_class }}">
{{ textbox(
form.placeholder_value,
label=label_text,
hint=hint_text,
extra_form_group_classes=extra_class,
param_extensions={"id": "phone-number", "classes": ""}
) }}
</div>
{% if skip_link or link_to_upload %}
<div class="grid-col-12 margin-top-1">

View File

@@ -71,13 +71,14 @@
show_errors=False
)}}
</div>
<span id="upload-status-live" class="usa-sr-only" role="status" aria-live="polite" aria-atomic="true"></span>
<h2 class="font-body-lg">A spreadsheet is available to use</h2>
<div class="spreadsheet" data-module="fullscreen-table">
{% call(item, row_number) list_table(
example,
caption="Example",
caption="Example spreadsheet",
caption_visible=False,
field_headings=[''] + column_headings
) %}