Removed all govuk css (#2814)

* Removed all govuk css

* Updated reference files

* Removing govuk js

* Fixed casing for modules, removed unused page

* Got more reference images

* Updated template page

* Removed govuk padding util

* Updated hint to uswds hint

* More govuk cleanup

* Commiting backstopjs ref files

* Fixed all unit tests that broke due to brittleness around govuk styling

* Added new ref images

* Final removal of govuk

* Officially removed all govuk references

* Updated reference file

* Updated link to button

* UI modernization

* Cleanup

* removed govuk escaping tests since they are no longer needed

* Fix CodeQL security issue in escapeElementName function

- Escape backslashes first before other special characters
- Prevents potential double-escaping vulnerability
- Addresses CodeQL alert about improper string escaping

* Found more govuk removal. Fixed unit tests

* Add missing pipeline check to pre-commit

* updated test

* Updated e2e test

* More update to e2e test

* Fixed another e2e test

* Simple PR comments addressed

* More updates

* Updated backstop ref files

* Refactored folder selection for non-admins

* Updated redundant line

* Updated tests to include correct mocks

* Added more ref files

* Addressing carlos comments

* Addressing Carlo comments, cleanup of window initing

* More cleanup and addressing carlo comments

* Fixing a11 scan

* Fixed a few issues with javascript

* Fixed for pr

* Fixing e2e tests

* Tweaking e2e test

* Added more ref files and cleaned up urls.js

* Fixed bug with creating new template

* Removed brittle test - addressed code ql comment

* e2e race condition fix

* More e2e test fixes

* Updated e2e tests to not wait for text sent

* Updated test to not wait for button click response

* Made tear down more resilent if staging is down

* reverted e2e test to what was working before main merge

* Updated backstopRef images

* Updated gulp to include job-polling differently

app/templates/views/api/callbacks.html

@@ -15,7 +15,7 @@
 {% block maincolumn_content %}
   {{ page_header('Callbacks') }}
 	<div class="table-overflow-x-auto">
-		<div class="bottom-gutter-3-2 dashboard-table body-copy-table table-overflow-x-auto">
+		<div class="margin-bottom-3 dashboard-table body-copy-table table-overflow-x-auto">
 				{% call mapping_table(
 				caption='General',
 				field_headings=['Label', 'Value', 'Action'],

app/templates/views/api/index.html

@@ -8,7 +8,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-medium bottom-gutter-3-2">
+  <h1 class="font-heading-lg margin-bottom-3">
     API integration
   </h1>
 
@@ -26,7 +26,7 @@
 
   <div class="grid-row">
     <div class="grid-col-6">
-      <h2 class="heading-small">
+      <h2 class="font-heading-md">
         Message log
       </h2>
     </div>
@@ -46,11 +46,16 @@
       </div>
     {% endif %}
     {% for notification in api_notifications.notifications %}
-      <details class="api-notifications-item govuk-details" data-module="govuk-details">
-        <summary class="govuk-details__summary api-notifications-item__heading">
-          <h3>
-            <span class="govuk-details__summary-text">
-            {{ notification.to }}
+      <div class="usa-accordion api-notifications-item">
+        <h3 class="usa-accordion__heading">
+          <button
+            type="button"
+            class="usa-accordion__button api-notifications-item__heading"
+            aria-expanded="false"
+            aria-controls="notification-accordion-{{ notification.id }}"
+          >
+            <span>
+              {{ notification.to }}
             </span>
             <span class="grid-row api-notifications-item__meta">
               <span class="grid-col-6 api-notifications-item__meta-key">
@@ -62,9 +67,9 @@
                 </time>
               </span>
             </span>
-          </h3>
-        </summary>
-        <div class="govuk-details__text api-notifications-item__data">
+          </button>
+        </h3>
+        <div id="notification-accordion-{{ notification.id }}" class="usa-accordion__content api-notifications-item__data" hidden>
           <dl id="notification-{{ notification.id }}">
             {% for key in [
               'id', 'client_reference', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status'
@@ -77,7 +82,7 @@
             <a class="usa-link" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=notification.id) }}">View {{ 1|message_count_label(notification.template.template_type, suffix='') }}</a>
           </dl>
         </div>
-      </details>
+      </div>
     {% endfor %}
     {% if api_notifications.notifications %}
       <div class="api-notifications-item">

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') %}

app/templates/views/api/keys/show.html

@@ -20,7 +20,7 @@
       You will not be able to see it again once you leave this page.
     </p>
 
-    <div class="bottom-gutter-2">
+    <div class="margin-bottom-3">
 
       {{ copy_to_clipboard(
         '{}-{}-{}'.format(key_name, service_id, secret),