Updated hint to uswds hint

2026-08-01 20:29:49 -04:00 · 2025-08-06 21:48:28 -04:00
parent 1515229de7
commit a695412699
33 changed files with 68 additions and 82 deletions
--- a/app/templates/components/list-entry.html
+++ b/app/templates/components/list-entry.html
@@ -1,6 +1,3 @@
-{% from "components/components/fieldset/macro.njk" import govukFieldset %}
-{% from "components/components/error-message/macro.njk" import usaErrorMessage %}
-
 {% macro list_entry(
  field,
  item_name,
@@ -9,53 +6,43 @@
 ) %}

  <div class="usa-form-group">
-    {% if hint %}
-      {% set attributes = {"aria-describedby": field.name + '-hint'} %}
-    {% else %}
-      {% set attributes = {} %}
-    {% endif %}
-    {% call govukFieldset({
-        "legend": {
-          "text": field.label.text,
-          "isPageHeading": False,
-          "classes": "text-bold"
-        },
-        "attributes": attributes
-      })
-    %}
-    {% if hint %}
-      <div id="{{ field.name }}-hint" class="usa-hint">
-        {{ hint }}
-      </div>
-    {% endif %}
-    <div class="input-list" data-module="list-entry" data-list-item-name="{{ item_name }}" id="list-entry-{{ field.name }}">
-      {% for entry in field.entries %}
-        <div class="list-entry">
-          {% if not autocomplete %}
-            {% set autocomplete = "off" %}
-          {% else %}
-            {% set autocomplete = "" %}
-          {% endif %}
-          {% if entry.errors %}
-            {% set label_classes = "usa-label usa-label--error" %}
-          {% else %}
-            {% set label_classes = "usa-label" %}
-          {% endif %}
-          {% set field_name = field.name + "-" + loop.index|string %}
-          {{ entry(param_extensions={
-            "id": "input-" + field_name,
-            "name": field_name,
-            "label": {
-              "html": '<span class="usa-sr-only">' + item_name + ' number </span>' + loop.index|string + '.',
-              "classes": label_classes
-            },
-            "classes": "usa-input",
-            "value": field.data[loop.index0],
-            "autocomplete": autocomplete
-          }) }}
+    <fieldset class="usa-fieldset" {% if hint %}aria-describedby="{{ field.name }}-hint"{% endif %}>
+      <legend class="usa-legend text-bold">
+        {{ field.label.text }}
+      </legend>
+      {% if hint %}
+        <div id="{{ field.name }}-hint" class="usa-hint">
+          {{ hint }}
        </div>
-      {% endfor %}
-    </div>
-  {% endcall %}
+      {% endif %}
+      <div class="input-list" data-module="list-entry" data-list-item-name="{{ item_name }}" id="list-entry-{{ field.name }}">
+        {% for entry in field.entries %}
+          <div class="list-entry">
+            {% if not autocomplete %}
+              {% set autocomplete = "off" %}
+            {% else %}
+              {% set autocomplete = "" %}
+            {% endif %}
+            {% if entry.errors %}
+              {% set label_classes = "usa-label usa-label--error" %}
+            {% else %}
+              {% set label_classes = "usa-label" %}
+            {% endif %}
+            {% set field_name = field.name + "-" + loop.index|string %}
+            {{ entry(param_extensions={
+              "id": "input-" + field_name,
+              "name": field_name,
+              "label": {
+                "html": '<span class="usa-sr-only">' + item_name + ' number </span>' + loop.index|string + '.',
+                "classes": label_classes
+              },
+              "classes": "usa-input",
+              "value": field.data[loop.index0],
+              "autocomplete": autocomplete
+            }) }}
+          </div>
+        {% endfor %}
+      </div>
+    </fieldset>

 {% endmacro %}
--- a/app/templates/partials/jobs/notifications.html
+++ b/app/templates/partials/jobs/notifications.html
@@ -25,7 +25,7 @@
      <div class="dashboard-table job-status-table table-overflow-x-auto">
    {% endif %}
      {% if job.still_processing %}
-        <p class="margin-bottom-3 hint">
+        <p class="margin-bottom-3 usa-hint">
          Report is {{ "{:.0f}%".format(job.percentage_complete * 0.99) }} complete…
        </p>
      {% elif notifications  and time_left != "Data no longer available" %}
--- a/app/templates/partials/tour.html
+++ b/app/templates/partials/tour.html
@@ -2,7 +2,7 @@

 {% call banner_wrapper(type='tour') %}
    <p class="font-heading-lg">Try sending yourself this example</p>
-    <div class="grid-row margin-bottom-3 {% if help != '1' %}greyed-out-step{% endif %}">
+    <div class="grid-row margin-bottom-3 {% if help != '1' %}text-base-dark opacity-50{% endif %}">
      <div class="grid-col-2">
        <p class="font-heading-xl">1.</p>
      </div>
@@ -12,7 +12,7 @@
        </p>
      </div>
    </div>
-    <div class="grid-row margin-bottom-3 {% if help != '2' %}greyed-out-step{% endif %}">
+    <div class="grid-row margin-bottom-3 {% if help != '2' %}text-base-dark opacity-50{% endif %}">
      <div class="grid-col-2">
        <p class="font-heading-xl">2.</p>
      </div>
@@ -22,7 +22,7 @@
        </p>
      </div>
    </div>
-    <div class="grid-row margin-bottom-3 {% if help != '3' %}greyed-out-step{% endif %}">
+    <div class="grid-row margin-bottom-3 {% if help != '3' %}text-base-dark opacity-50{% endif %}">
      <div class="grid-col-2">
        <p class="font-heading-xl">3.</p>
      </div>
--- a/app/templates/views/api/keys.html
+++ b/app/templates/views/api/keys.html
@@ -31,7 +31,7 @@
      {% call field() %}
        <div class="file-list">
          {{ item.name }}
-          <div class="hint">
+          <div class="usa-hint">
            {% if item.key_type == 'normal' %}
              Live – sends to anyone
            {% elif item.key_type == 'team' %}
@@ -44,7 +44,7 @@
      {% endcall %}
      {% if item.expiry_date %}
        {% call field(align='right') %}
-          <span class='hint'>Revoked {{ item.expiry_date|format_datetime_table }}</span>
+          <span class='usa-hint'>Revoked {{ item.expiry_date|format_datetime_table }}</span>
        {% endcall %}
      {% else %}
        {% call field(align='right', status='error') %}
--- a/app/templates/views/find-users/user-information.html
+++ b/app/templates/views/find-users/user-information.html
@@ -12,7 +12,7 @@
        {{ user.name }}
      </h1>
      <p>{{ user.email_address }}</p>
-      <p class="{{ '' if user.mobile_number else 'hint' }}">{{ user.mobile_number or 'No mobile number'}}</p>
+      <p class="{{ '' if user.mobile_number else 'usa-hint' }}">{{ user.mobile_number or 'No mobile number'}}</p>

      <h2 class="font-body-lg">Live services</h2>
      <nav class="browse-list">
@@ -25,7 +25,7 @@
          {% endfor %}
          </ul>
        {% else %}
-          <p class="hint">
+          <p class="usa-hint">
            No live services
          </p>
        {% endif %}
@@ -41,7 +41,7 @@
          {% endfor %}
          </ul>
        {% else %}
-          <p class="hint">
+          <p class="usa-hint">
            No services in trial mode
          </p>
        {% endif %}
@@ -57,7 +57,7 @@

      <h2 class="font-body-lg">Last login</h2>
      {% if not user.logged_in_at %}
-      <p class="hint">This person has never logged in</p>
+      <p class="usa-hint">This person has never logged in</p>
      {% else %}
      <p>Last logged in
        <time datetime="{{ user.logged_in_at }}">
--- a/app/templates/views/manage-users.html
+++ b/app/templates/views/manage-users.html
@@ -52,13 +52,13 @@
          <p class="margin-top-0">
            {%- if user.status == 'pending' -%}
              <span class="live-search-relevant">{{ user.email_address }}</span>
-              <span class="hint">(invited)</span>
+              <span class="usa-hint">(invited)</span>
            {%- elif user.status == 'expired' -%}
              <span class="live-search-relevant">{{ user.email_address }}</span>
-              <span class="hint">(expired invite)</span>
+              <span class="usa-hint">(expired invite)</span>
            {%- elif user.id == current_user.id -%}
              <span class="live-search-relevant">{{ user.email_address }}</span>
-              <span class="hint">(you)</span>
+              <span class="usa-hint">(you)</span>
            {%- else -%}
              <span class="live-search-relevant">{{ user.email_address }}</span>
            {% endif %}
--- a/app/templates/views/manage-users/confirm-edit-user-email.html
+++ b/app/templates/views/manage-users/confirm-edit-user-email.html
@@ -21,7 +21,7 @@
  <div class="grid-col-12">
  {% call form_wrapper() %}
    <p>New email address:</p>
-    <div class="panel panel-border-wide margin-bottom-3">
+    <div class="usa-alert usa-alert--info margin-bottom-3">
      <p>{{ new_email }}</p>
    </div>
    <p>We will send {{ user.name }} an email to tell them about the change.</p>
--- a/app/templates/views/manage-users/confirm-edit-user-mobile-number.html
+++ b/app/templates/views/manage-users/confirm-edit-user-mobile-number.html
@@ -20,7 +20,7 @@
  <div class="grid-col-12">
  {% call form_wrapper() %}
    <p>New mobile number:</p>
-    <div class="panel panel-border-wide margin-bottom-3">
+    <div class="usa-alert usa-alert--info margin-bottom-3">
      <p>{{ new_mobile_number }}</p>
    </div>
    <p>We will send {{ user.name }} a text message to tell them about the change.</p>
--- a/app/templates/views/organizations/organization/users/index.html
+++ b/app/templates/views/organizations/organization/users/index.html
@@ -38,7 +38,7 @@
              {%- if user.name -%}
                <span class="font-heading-md">{{ user.name }}</span>&ensp;
              {%- endif -%}
-              <span class="hint">
+              <span class="usa-hint">
                {%- if user.status == 'pending' -%}
                  {{ user.email_address }} (invited)
                {%- elif user.status == 'cancelled' -%}
--- a/app/templates/views/platform-admin/services.html
+++ b/app/templates/views/platform-admin/services.html
@@ -26,7 +26,7 @@
          {% call field(border=False, colspan=3) %}
            <a href="{{ url_for('main.service_dashboard', service_id=service['id']) }}" class="file-list-filename-large usa-link">{{ service['name'] }}</a>
            {% if not service['active'] %}
-              <span class="font-heading-lg hint">&ensp;Archived</span>
+              <span class="font-heading-lg usa-hint">&ensp;Archived</span>
            {% endif %}
            {% if service['name'] == 'Test service' %}
              <a class="usa-link" href="{{ url_for('main.load_test') }}">Load Test</a>
--- a/app/templates/views/send.html
+++ b/app/templates/views/send.html
@@ -88,7 +88,7 @@
      {% endfor %}
    {% endcall %}
  </div>
-  <p class="hint">
+  <p class="usa-hint">
    Each template saved in Notify is given an example <abbr title="Comma Separated Values">CSV</abbr> formatted spreadsheet like this. It's the most reliable file format for uploading your contact list. Use this example to populate your template with the right data items. Start by downloading this example for your message template. Then save it as a <abbr title="Comma Separated Values">CSV</abbr> file for bulk messaging.
  </p>
  <p class="table-show-more-link">
--- a/app/templates/views/service-settings.html
+++ b/app/templates/views/service-settings.html
@@ -57,7 +57,7 @@
          {% call field(status='default' if current_service.default_sms_sender == "None" else '') %}
          {{ current_service.default_sms_sender | nl2br if current_service.default_sms_sender else 'None'}}
            {% if current_service.count_sms_senders > 1 %}
-            <div class="hint">
+            <div class="usa-hint">
              {{ '…and %d more' | format(current_service.count_sms_senders - 1) }}
            </div>
            {% endif %}
@@ -138,7 +138,7 @@
          {% call field(status='default' if current_service.count_email_reply_to_addresses == 0 else '') %}
            {{ current_service.default_email_reply_to_address or 'Not set' }}
            {% if current_service.count_email_reply_to_addresses > 1 %}
-              <div class="hint">
+              <div class="usa-hint">
                {{ '…and %d more' | format(current_service.count_email_reply_to_addresses - 1) }}
              </div>
            {% endif %}
@@ -253,7 +253,7 @@
                <span class="table-field-status-default">Not set</span>
              {% endif %}
              {% if current_service.organization_type %}
-                <div class="hint">
+                <div class="usa-hint">
                  {{ current_service.organization_type_label }}
                </div>
              {% endif %}
@@ -342,7 +342,7 @@
    {% endif %}
    {% if (not current_service.active) and current_user.platform_admin %}
      <p>
-        <div class="hint ">
+        <div class="usa-hint ">
          Service suspended
        </div>

--- a/app/templates/views/service-settings/data-retention.html
+++ b/app/templates/views/service-settings/data-retention.html
@@ -31,7 +31,7 @@
  {% if not current_service.data_retention %}
    <div class="user-list">
      <div class="user-list-item">
-        <p class="usa-body user-list-item-blank hint">You have not added any data retention</p>
+        <p class="usa-body user-list-item-blank usa-hint">You have not added any data retention</p>
      </div>
    </div>
  {% else %}
--- a/app/templates/views/service-settings/email_reply_to.html
+++ b/app/templates/views/service-settings/email_reply_to.html
@@ -20,7 +20,7 @@
  <div class="user-list">
    {% if not current_service.email_reply_to_addresses %}
      <div class="user-list-item">
-        <p class="usa-body user-list-item-blank hint">You have not added any reply-to email addresses yet</p>
+        <p class="usa-body user-list-item-blank usa-hint">You have not added any reply-to email addresses yet</p>
      </div>
    {% endif %}
    {% for item in current_service.email_reply_to_addresses %}
@@ -28,7 +28,7 @@
        <div class="grid-row">
          <div class="grid-col-9">
            <h2 class="user-list-item-heading">
-              <span class="font-heading-md">{{ item.email_address }}</span>&ensp;<span class="hint">
+              <span class="font-heading-md">{{ item.email_address }}</span>&ensp;<span class="usa-hint">
                {%- if item.is_default -%}
                  (default)
                {% endif %}
--- a/app/templates/views/service-settings/link-service-to-organization.html
+++ b/app/templates/views/service-settings/link-service-to-organization.html
@@ -32,7 +32,7 @@
      </div>
      {{ sticky_page_footer('Save') }}
    {% else %}
-      <p class="hint"> No organizations </p>
+      <p class="usa-hint"> No organizations </p>
    {% endif %}
  {% endcall %}
 {% endblock %}
--- a/app/templates/views/service-settings/sms-sender/edit.html
+++ b/app/templates/views/service-settings/sms-sender/edit.html
@@ -22,7 +22,7 @@
    {% if inbound_number %}
      <p>
        <span class="margin-bottom-1"> {{ sms_sender.sms_sender }} </span>
-        <span class="hint"> This phone number receives replies and cannot be changed </span>
+        <span class="usa-hint"> This phone number receives replies and cannot be changed </span>
      </p>
    {% else %}
      {{ form.sms_sender(param_extensions={
--- a/app/templates/views/service-settings/sms-senders.html
+++ b/app/templates/views/service-settings/sms-senders.html
@@ -20,7 +20,7 @@
  <div class="user-list">
    {% if not current_service.sms_senders %}
      <div class="user-list-item">
-        <p class="usa-body user-list-item-blank hint">You have not added any text message senders yet</p>
+        <p class="usa-body user-list-item-blank usa-hint">You have not added any text message senders yet</p>
      </div>
    {% endif %}
    {% for item in current_service.sms_senders_with_hints %}
--- a/app/templates/views/templates/_template.html
+++ b/app/templates/views/templates/_template.html
@@ -5,7 +5,7 @@
 </div>
 <div class="grid-col-12">
  {% if template._template.archived %}
-    <p class="hint">
+    <p class="usa-hint">
      This template was deleted {{ template._template.updated_at|format_datetime_relative }}.
    </p>
  {% elif not current_user.has_permissions(ServicePermission.SEND_MESSAGES, 'manage_api_keys', ServicePermission.MANAGE_TEMPLATES, ServicePermission.MANAGE_SERVICE) or not user_has_template_permission %}
--- a/app/templates/views/templates/_template_history.html
+++ b/app/templates/views/templates/_template_history.html
@@ -1,6 +1,6 @@
 <div class="grid-col-12">
  <h2 class="message-name">{{ template.name }}</h2>
-  <p class="hint">
+  <p class="usa-hint">
    {% if template.get_raw('version', 1) > 1 %}
      Edit made {% if template.get_raw('updated_at', None) %}{{ template.get_raw('updated_at')|format_datetime_normal }}{% endif %}
    {% else %}
--- a/app/templates/views/templates/template.html
+++ b/app/templates/views/templates/template.html
@@ -81,7 +81,7 @@
          </li>
        {% else %}
          <li>
-            <p class="hint">Personalization is hidden after sending</p>
+            <p class="usa-hint">Personalization is hidden after sending</p>
          </li>
        {% endif %}
      </ul>
--- a/backstop_data/bitmaps_reference/backstop_test_About_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/backstop_test_About_0_document_0_desktop.png
--- a/backstop_data/bitmaps_reference/backstop_test_Choose_Service_-_Accounts_0_h1font-heading-xl_0_desktop.png
+++ b/backstop_data/bitmaps_reference/backstop_test_Choose_Service_-_Accounts_0_h1font-heading-xl_0_desktop.png
--- a/backstop_data/bitmaps_reference/backstop_test_Choose_Service_-_Accounts_0_h1heading-large_0_desktop.png
+++ b/backstop_data/bitmaps_reference/backstop_test_Choose_Service_-_Accounts_0_h1heading-large_0_desktop.png
--- a/backstop_data/bitmaps_reference/backstop_test_Choose_Service_-_Accounts_1_ausa-buttonhrefadd-service_0_desktop.png
+++ b/backstop_data/bitmaps_reference/backstop_test_Choose_Service_-_Accounts_1_ausa-buttonhrefadd-service_0_desktop.png
--- a/backstop_data/bitmaps_reference/backstop_test_Email_Not_Received_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/backstop_test_Email_Not_Received_0_document_0_desktop.png
--- a/backstop_data/bitmaps_reference/backstop_test_Notifygov_Sign_In_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/backstop_test_Notifygov_Sign_In_0_document_0_desktop.png
--- a/backstop_data/bitmaps_reference/backstop_test_Performance_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/backstop_test_Performance_0_document_0_desktop.png
--- a/backstop_data/bitmaps_reference/backstop_test_Platform_Admin_Live_Services_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/backstop_test_Platform_Admin_Live_Services_0_document_0_desktop.png
--- a/backstop_data/bitmaps_reference/backstop_test_Pricing_Billing_Details_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/backstop_test_Pricing_Billing_Details_0_document_0_desktop.png
--- a/backstop_data/bitmaps_reference/backstop_test_Service_Settings_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/backstop_test_Service_Settings_0_document_0_desktop.png
--- a/backstop_data/bitmaps_reference/backstop_test_Team_Members_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/backstop_test_Team_Members_0_document_0_desktop.png
--- a/backstop_data/bitmaps_reference/backstop_test_Text_Not_Received_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/backstop_test_Text_Not_Received_0_document_0_desktop.png
--- a/urls.js
+++ b/urls.js
@@ -122,7 +122,6 @@ const routes = {
    { label: 'Get Started', path: '/using-notify/get-started' },
    { label: 'Trial Mode', path: '/using-notify/trial-mode' },
    { label: 'Pricing', path: '/using-notify/pricing' },
-    { label: 'Pricing Billing Details', path: '/pricing/billing-details' },
    { label: 'Delivery Status', path: '/using-notify/delivery-status' },
    { label: 'How To', path: '/using-notify/how-to' },
    { label: 'Best Practices', path: '/using-notify/best-practices' },