merge main

app/templates/components/components/input/template.njk

@@ -12,7 +12,7 @@
     classes: params.label.classes,
     isPageHeading: params.label.isPageHeading,
     attributes: params.label.attributes,
-    for: params.id
+    for: params.text
   }) | indent(2) | trim }}
 {% if params.hint %}
   {% set hintId = params.id + '-hint' %}
@@ -26,7 +26,7 @@
   }) | indent(2) | trim }}
 {% endif %}
 {% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
+  {% set errorId = params.label.text + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
   {{ usaErrorMessage({
     id: errorId,
@@ -37,12 +37,16 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText,
   }) | indent(2) | trim }}
 {% endif %}
-  <input class="usa-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} usa-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
-  {%- if params.value %} value="{{ params.value}}"{% endif %}
-  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
-  {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
-  {%- if params.required %} required{% endif %}
+  <input
+    class="usa-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} usa-input--error{% endif %}"
+    id="{{ params.label.text | default('unknown') | slugify }}"
+    name="{{ params.name }}"
+    type="{{ params.type | default('text') }}"
+    {%- if params.value %} value="{{ params.value }}"{% endif %}
+    {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+    {%- if params.autocomplete %} autocomplete="{{ params.autocomplete }}"{% endif %}
+    {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
+    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
+    {%- if params.required %} required{% endif %}
   />
 </div>

app/templates/components/components/label/template.njk

@@ -2,7 +2,7 @@
 {% set labelHtml %}
 <label class="usa-label{%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
-  {%- if params.for %} for="{{ params.for }}"{% endif %}>
+  {%- if params.text %} for="{{ params.text | slugify }}"{% endif %}>
   {{ params.html | safe if params.html else params.text }}
 </label>
 {% endset %}

app/templates/components/file-upload.html

@@ -20,7 +20,7 @@
         </span>
       {% endif %}
       {% if field.errors and show_errors %}
-        <span class="error-message">
+        <span class="error-message usa-error-message">
           {{ field.errors[0] }}
         </span>
       {% endif %}

app/templates/components/radios.html

@@ -32,7 +32,7 @@
      <legend class="form-label {% if bold_legend %}bold{% endif %}">
        {{ field.label.text }}
        {% if field.errors %}
-         <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
+         <span class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
            {{ field.errors[0] }}
          </span>
        {% endif %}

app/templates/components/select-input.html

@@ -52,7 +52,7 @@
           </span>
         {% endif %}
         {% if field.errors %}
-          <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
+          <span class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
             {{ field.errors[0] }}
           </span>
         {% endif %}

app/templates/components/textbox.html

@@ -32,7 +32,7 @@
       </div>
     {% endif %}
     {% if field.errors %}
-      <span id="{{ field.name}}-error" class="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.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 class="usa-sr-only">Error:</span>
         {% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
       </span>

app/templates/partials/templates/guidance-character-count.html

@@ -5,10 +5,6 @@
 </h3>
 <div id="message-length" class="usa-accordion__content usa-prose">
   <p class="usa-body">
-    If your message is long then it will
-    cost more.
-  </p>
-  <p class="usa-body">
-    See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> for details.
+    Each message sent to a recipient counts as one text. Keep track on your Dashboard of how many messages have sent and are remaining.
   </p>
 </div>

app/templates/views/dashboard/dashboard.html

@@ -24,14 +24,23 @@ Dashboard
 
     <h2 class="font-body-2xl line-height-sans-2 margin-top-0">{{ current_service.name }} Dashboard</h2>
 
-    <div id="totalMessageChartContainer" data-messages-sent="{{ messages_sent }}"
-        data-messages-remaining="{{ messages_remaining }}">
-        <h2 id="chartTitle">Total messages</h2>
+    <div id="totalMessageChartContainer" data-messages-sent="{{ messages_sent }}" data-messages-remaining="{{ messages_remaining }}">
+        <div class="grid-row flex-align-center">
+            <h2 id="chartTitle" class="margin-right-1">Total messages</h2>
+            <button
+            type="button"
+            class="usa-tooltip usa-tooltip__information margin-right-0"
+            data-position="top"
+            title="Total messages track the sum of messages for the service: pending, failed, or delivered"
+            >
+            <span class="usa-sr-only">More information</span>
+            i
+            </button>
+        </div>
         <svg id="totalMessageChart"></svg>
         <div id="message"></div>
     </div>
     <div id="totalMessageTable" class="margin-0"></div>
-
     {% include 'views/dashboard/activity-table.html' %}
 
     {% if current_user.has_permissions('manage_service') %}{% endif %}

app/templates/views/send-test.html

@@ -37,6 +37,8 @@
     data_kwargs={'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"}) }}
       </div>