2554 - Adding cancel button to Send Message flow

app/templates/base.html

@@ -140,7 +140,7 @@
         <dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timeLeft">
           <div class="usa-modal__content">
             <div class="usa-modal__main">
-              <h2 class="usa-modal__heading" id="sessionTimerHeading">
+              <h2 class="usa-modal__heading font-body-lg" id="sessionTimerHeading">
                 Your session will end soon.
                 <span class="usa-sr-only">Please choose to extend your session or sign out. Your session will expire in 5 minutes or less.</span>
               </h2>
@@ -176,7 +176,7 @@
       {% block extra_javascripts %}
       {% endblock %}
       <script type="text/javascript" src="{{ asset_url('javascripts/all.js') }}"></script>
-      <script type="text/javascript" src="{{ asset_url('js/uswds.min.js') }}"></script>
+      <script src="{{ asset_url('js/uswds.min.js') }}"></script>
     {% endblock %}
   </body>
 </html>

app/templates/components/components/button/template.njk

@@ -1,5 +1,4 @@
 {# Determine type of element to use, if not explicitly set -#}
-
 {% if params.element %}
   {% set element = params.element | lower %}
 {% else %}
@@ -10,26 +9,35 @@
   {% endif %}
 {% endif %}
 
-{#- Define common attributes that we can use across all element types #}
-
+{# Define common attributes to use across all element types -#}
 {%- set commonAttributes %} class="usa-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} usa-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
 
-{#- Define common attributes we can use for both button and input types #}
-
+{# Define attributes for button/input -#}
 {%- set buttonAttributes %}{% if params.name %} name="{{ params.name | trim }}"{% endif %} type="{{ params.type if params.type else 'submit' }}"{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}{% endset %}
 
-{#- Actually create a button... or a link! #}
-
-{%- if element == 'a' %}
-<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
+{# Auto-append .dot-anim span for Send/Schedule buttons -#}
+{%- set isSendOrSchedule = params.name and (params.name | lower == 'send' or params.name | lower == 'schedule') -%}
+{%- set textContent %}
   {{ params.html | safe if params.html else params.text }}
-</a>
+  {%- if isSendOrSchedule -%}<span class="dot-anim" aria-hidden="true"></span>{%- endif -%}
+{%- endset %}
 
-{%- elseif element == 'button' %}
-<button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }} {% if params.disabled %}disabled{% endif %}>
-  {{ params.html | safe if params.html else params.text }}
-</button>
+{# Render the appropriate element -#}
+{% if element == 'a' %}
+  <a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{ commonAttributes | safe }}>
+    {{ textContent | safe }}
+  </a>
 
-{%- elseif element == 'input' %}
-<input value="{{ params.text }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-{%- endif %}
+{% elseif element == 'button' %}
+  <button
+    {% if params.value %} value="{{ params.value }}"{% endif %}
+    {{ buttonAttributes | safe }}
+    {{ commonAttributes | safe }}
+    {% if params.disabled %}disabled{% endif %}
+  >
+    {{ textContent | safe }}
+  </button>
+
+{% elseif element == 'input' %}
+  <input value="{{ params.text }}" {{ buttonAttributes | safe }} {{ commonAttributes | safe }}>
+{% endif %}

app/templates/views/check/ok.html

@@ -27,7 +27,7 @@
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
       {% if choose_time_form %}
         {{ choose_time_form.scheduled_for(param_extensions={
-          'formGroup': {'classes': 'bottom-gutter-2-3'},
+          'formGroup': {'classes': ''},
           'attributes': {
             'data-module': 'radio-select',
             'data-categories': choose_time_form.scheduled_for.categories|join(','),
@@ -39,7 +39,7 @@
       {% set button_text %}
         Preview
       {% endset %}
-      {{ usaButton({ "text": button_text }) }}
+      {{ usaButton({ "text": "button_text", "classes": "margin-top-4" }) }}
 
     </form>
   </div>

app/templates/views/notifications/check.html

@@ -55,7 +55,7 @@
       {% if not error %}
         {% if choose_time_form %}
           {{ choose_time_form.scheduled_for(param_extensions={
-            'formGroup': {'classes': 'bottom-gutter-2-3'},
+            'formGroup': {'classes': ''},
             'attributes': {
               'data-module': 'radio-select',
               'data-categories': choose_time_form.scheduled_for.categories|join(','),
@@ -66,8 +66,8 @@
         {% set button_text %}
         Preview
         {% endset %}
-        {{ usaButton({ "text": button_text }) }}
-      {% endif %}
+        {{ usaButton({ "text": button_text, "classes": "margin-top-2" }) }}
+        {% endif %}
     </form>
   </div>
 

app/templates/views/notifications/preview.html

@@ -76,7 +76,7 @@
         help='3' if help else 0
       )}}" class='page-footer'>
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-      <h3>Does everything look good?</h3>
+      <h3 class="margin-bottom-">Does everything look good?</h3>
       {% if not error %}
         {% set button_text %}
           {{ "Schedule" if scheduled_for else 'Send'}}
@@ -84,9 +84,54 @@
         {{ usaButton({
           "text": button_text,
           "name": button_text
-         }) }}
+        }) }}
+        {{ usaButton({
+          "text": "Cancel",
+          "name": "Cancel",
+          "classes": "usa-button--secondary",
+          "type": "button",
+          "attributes": {
+            "data-open-modal": "cancelModal"
+          }
+        }) }}
       {% endif %}
     </form>
   </div>
 
+  <div
+  class="usa-modal"
+  data-module="usa-modal"
+  id="cancelModal"
+  aria-hidden="true"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="cancelModalHeading"
+  aria-describedby="cancelModalDesc"
+  >
+    <div class="usa-modal__content">
+      <div class="usa-modal__main">
+        <h2 class="usa-modal__heading font-body-lg" id="cancelModalHeading">Are you sure you want to cancel this message?</h2>
+        <p id="cancelModalDesc">Your template is saved, but your message and recipient details will not be. Canceling will bring you back to the template selection page.</p>
+        <div class="usa-modal__footer">
+          <ul class="usa-button-group">
+            <li class="usa-button-group__item">
+              <a href="{{ url_for('main.choose_template', service_id=current_service.id) }}" class="usa-button">Yes, cancel
+                <span class="usa-sr-only">and return to the template selection page</span></a>
+            </li>
+            <li class="usa-button-group__item">
+              <button class="usa-button usa-button--unstyled padding-105 text-center" data-close-modal type="button">
+                No, go back <span class="usa-sr-only">to message send</span>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <button class="usa-button usa-modal__close" aria-label="Close this window" data-close-modal type="button">
+        <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+          <use xlink:href="{{ asset_url('img/sprite.svg') }}#close"></use>
+        </svg>
+      </button>
+    </div>
+  </div>
+
 {% endblock %}

app/templates/views/platform-admin/index.html

@@ -32,7 +32,7 @@
   <div class="grid-row bottom-gutter">
     {% for noti_type in global_stats %}
       <div class="grid-col-6">
-        <span class="big-number-dark bottom-gutter-2-3">
+        <span class="big-number-dark">
           <span class="big-number-number">
             {{ "{:,}".format(noti_type.black_box.number) }}
           </span>