Merge branch 'main' into notify-admin-211

app/templates/admin_template.html

@@ -14,8 +14,6 @@
   {%- for font in font_paths %}
   <link rel="preload" href="{{ asset_url(font, with_querystring_hash=False) }}" as="font" type="font/woff2" crossorigin>
   {%- endfor %}
-  <link rel="stylesheet" media="screen" href="{{ asset_url('stylesheets/main.css') }}" />
-  <link rel="stylesheet" media="print" href="{{ asset_url('stylesheets/print.css') }}" />
   <link rel="stylesheet" media="screen" href="{{ asset_url('css/styles.css') }}" />
   {% block extra_stylesheets %}
   {% endblock %}
@@ -148,9 +146,9 @@
   
 
   {% if current_service and current_service.research_mode %}
-    {% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="govuk-footer__link">Technology Transformation Services</a><span id="research-mode" class="research-mode">research mode</span>' %}
+    {% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a><span id="research-mode" class="research-mode">research mode</span>' %}
   {% else %}
-    {% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="govuk-footer__link">Technology Transformation Services</a>' %}
+    {% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a>' %}
   {% endif %}
 
   {{ govukFooter({

app/templates/components/banner.html

@@ -1,5 +1,5 @@
 {% from "components/form.html" import form_wrapper %}
-{% from "components/uk_components/button/macro.njk" import govukButton %}
+{% from "components/components/button/macro.njk" import govukButton %}
 
 {% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None, context=None, action=None, id=None, thing=None) %}
   <div

app/templates/components/big-number.html

@@ -1,6 +1,6 @@
 {% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %}
   {% if link %}
-    <a class="usa-link govuk-link--no-visited-state display-block margin-bottom-1" href="{{ link }}">
+    <a class="usa-link display-flex" href="{{ link }}">
   {% endif %}
       <span class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
         <span class="big-number-number">
@@ -42,7 +42,7 @@
       <span class="big-number-status{% if danger_zone %}-failing{% endif %}">
         {% if failures %}
           {% if failure_link %}
-            <a class="govuk-link govuk-link--no-visited-state" href="{{ failure_link }}">
+            <a class="usa-link" href="{{ failure_link }}">
               {{ "{:,}".format(failures) }}
               failed – {{ failure_percentage }}%
             </a>

app/templates/components/components/back-link/template.njk

@@ -1,2 +1,2 @@
-<a href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" class="usa-link usa-back-link display-inline-flex margin-top-5{%- if params.classes %} {{ params.classes }}{% endif -%}"
+<a href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" class="usa-link usa-back-link display-inline-flex margin-bottom-3 {%- if params.classes %} {{ params.classes }}{% endif -%}"
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ (params.html | safe if params.html else (params.text if params.text else 'Back')) }}</a>

app/templates/components/components/checkboxes/template.njk

@@ -49,7 +49,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <div class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
+  <div class="govuk-checkboxes test {%- if params.classes %} {{ params.classes }}{% endif %}"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
     {%- if isConditional %} data-module="checkboxes"{% endif -%}>
     {% for item in params.items %}
@@ -93,7 +93,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,

app/templates/components/components/details/template.njk

@@ -1,4 +1,4 @@
-<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
+<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details margin-bottom-1 {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       {{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }}

app/templates/components/components/fieldset/template.njk

@@ -1,11 +1,11 @@
-<fieldset class="govuk-fieldset margin-y-5
+<fieldset class="usa-fieldset
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% if params.legend.html or params.legend.text %}
-  <legend class="govuk-fieldset__legend {%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
+  <legend class="usa-legend {%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
   {% if params.legend.isPageHeading %}
-    <h1 class="govuk-fieldset__heading">
+    <h1 class="font-body-2xl">
       {{ params.legend.html | safe if params.legend.html else params.legend.text }}
     </h1>
   {% else %}

app/templates/components/components/footer/template.njk

@@ -1,65 +1,3 @@
-{# <footer class="usa-footer usa-footer--big {{ params.classes if params.classes }}" role="contentinfo"
-        {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  <div class="grid-container usa-footer__return-to-top">
-    <a href="#">Return to top</a>
-  </div>
-  <div class="govuk-width-container {{ params.containerClasses if params.containerClasses }}">
-    {% if params.navigation %}
-      <div class="govuk-footer__navigation">
-        {% for nav in params.navigation %}
-          <div class="govuk-footer__section">
-            <h2 class="govuk-footer__heading govuk-heading-m">{{ nav.title }}</h2>
-            {% if nav.items %}
-              {% set listClasses %}
-                {% if nav.columns %}
-                  govuk-footer__list--columns-{{ nav.columns }}
-                {% endif %}
-              {% endset %}
-              <ul class="govuk-footer__list {{ listClasses | trim }}">
-                {% for item in nav.items %}
-                  {% if item.href and item.text %}
-                    <li class="govuk-footer__list-item">
-                      <a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-                        {{ item.text }}
-                      </a>
-                    </li>
-                  {% endif %}
-                {% endfor %}
-              </ul>
-            {% endif %}
-          </div>
-        {% endfor %}
-      </div>
-      <hr class="govuk-footer__section-break">
-    {% endif %}
-    <div class="govuk-footer__meta">
-      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-        {% if params.meta %}
-          <h2 class="usa-sr-only">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
-          {% if params.meta.items %}
-            <ul class="govuk-footer__inline-list">
-              {% for item in params.meta.items %}
-                <li class="govuk-footer__inline-list-item">
-                  <a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-                    {{ item.text }}
-                  </a>
-                </li>
-              {% endfor %}
-            </ul>
-          {% endif %}
-          {% if params.meta.text or params.meta.html %}
-            <div class="govuk-footer__meta-custom">
-              {{ params.meta.html | safe if params.meta.html else params.meta.text }}
-            </div>
-          {% endif %}
-        {% endif %}
-        
-      </div>
-    </div>
-  </div>
-</footer>  #}
-
-
 <footer class="usa-footer usa-footer--big">
   {# <div class="grid-container usa-footer__return-to-top">
     <a href="#">Return to top</a>
@@ -98,22 +36,16 @@
           {% endif %} #}
         </div>
       </div>
-      <div class="govuk-footer__meta border-top border-gray-10">
-        <div class="govuk-footer__meta-item govuk-footer__meta-item--grow padding-top-1 margin-bottom-1">
-
+      <div class="padding-y-1">
           {% if params.meta %}
           <h2 class="usa-sr-only">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
           {% if params.meta.items %}
-          <ul class="govuk-footer__inline-list">
             {% for item in params.meta.items %}
-            <li class="govuk-footer__inline-list-item">
               <a class="govuk-footer__link" href="{{ item.href }}" {% for attribute, value in item.attributes %}
                 {{attribute}}="{{value}}" {% endfor %}>
                 {{ item.text }}
               </a>
-            </li>
             {% endfor %}
-          </ul>
           {% endif %}
           {% if params.meta.text or params.meta.html %}
           <div>
@@ -123,7 +55,6 @@
           {% endif %}
         </div>
       </div>
-      </div>
     </div>
   </div>
 </footer>

app/templates/components/components/radio-label/README.md

@@ -0,0 +1,15 @@
+# Label
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+The radio label component is used in other input components, to see an example of it in use see the [text input component](https://design-system.service.gov.uk/components/text-input/).
+
+## Component options
+
+Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example-default--label) for details.

app/templates/components/components/radio-label/_label.scss

@@ -0,0 +1,45 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/label") {
+  .govuk-label {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+
+    display: block;
+
+    margin-bottom: govuk-spacing(1);
+  }
+
+  // Modifiers that make labels look more like their equivalent headings
+
+  .govuk-label--xl {
+    @include govuk-font($size: 48, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-label--l {
+    @include govuk-font($size: 36, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-label--m {
+    @include govuk-font($size: 24, $weight: bold);
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-label--s {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+
+  // When the label is nested inside a heading, override the heading so that it
+  // does not have a margin. Effectively we want to be able to treat the heading
+  // as if it is not there.
+  //
+  // This breaks BEM conventions because it exists as a parent of the 'block',
+  // so we can't really consider an element.
+  .govuk-label-wrapper {
+    margin: 0;
+  }
+}

app/templates/components/components/radio-label/macro-options.json

@@ -0,0 +1,38 @@
+[
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "for",
+        "type": "string",
+        "required": true,
+        "description": "The value of the for attribute, the id of the input the label is associated with."
+    },
+    {
+        "name": "isPageHeading",
+        "type": "boolean",
+        "required": false,
+        "description": "Whether the label also acts as the heading for the page."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the label tag."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the label tag."
+    }
+]

app/templates/components/components/radio-label/macro.njk

@@ -0,0 +1,3 @@
+{% macro usaRadioLabel(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

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

@@ -0,0 +1,15 @@
+{% if params.html or params.text %}
+{% set labelHtml %}
+<label class="usa-checkbox__label {%- if params.classes %}{{ params.classes }}{% endif %}"
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+  {%- if params.for %} for="{{ params.for }}"{% endif %}>
+  {{ params.html | safe if params.html else params.text }}
+</label>
+{% endset %}
+
+{% if params.isPageHeading %}
+<h1 class="font-body-2xl text-bold">{{ labelHtml | safe | indent(2) }}</h1>
+{% else %}
+{{ labelHtml | safe }}
+{% endif %}
+{% endif %}

app/templates/components/components/radios/template.njk

@@ -88,7 +88,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,

app/templates/components/components/skip-link/template.njk

@@ -0,0 +1,7 @@
+<a href="{{ params.href | default('#content') }}" class="usa-skipnav{%- if params.classes %} {{ params.classes }}{% endif -%}"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- params.html | safe if params.html else params.text -}}
+</a>
+
+<a class="usa-skipnav " href="#main-content">
+  Skip to main content
+</a>

app/templates/components/components/textarea/template.njk

@@ -5,7 +5,7 @@
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,

app/templates/components/content-metadata.html

@@ -1,11 +1,9 @@
 {% macro content_metadata(data, suffix=False) %}
 <div class="content-metadata">
-  <dl>
   {% for key, value in data.items() %}
-    <dt class="content-metadata__term">{{ key }}</dt>
-    <dd class="content-metadata__definition">{{ value }}</dd>
+    <span class="content-metadata__term">{{ key }}</span>
+    <span class="content-metadata__definition">{{ value }}</span>
   {% endfor %}
-  </dl>
   {% if suffix %}
   <p class="content-metadata__suffix">{{ suffix }}</p>
   {% endif %}

app/templates/components/file-upload.html

@@ -1,4 +1,4 @@
-{% from "components/uk_components/button/macro.njk" import govukButton %}
+{% from "components/components/button/macro.njk" import govukButton %}
 
 {% macro file_upload(
   field,
@@ -34,7 +34,7 @@
     </label>
     {% if alternate_link and alternate_link_text %}
       <span class="file-upload-alternate-link">
-        or <a class="govuk-link govuk-link--no-visited-state" href="{{ alternate_link }}">{{ alternate_link_text }}</a>
+        or <a class="usa-link" href="{{ alternate_link }}">{{ alternate_link_text }}</a>
       </span>
     {% endif %}
     <label class="file-upload-filename" for="{{ field.name }}"></label>

app/templates/components/folder-path.html

@@ -40,7 +40,7 @@
   {% if folder_path %}
     <h2 class="heading-medium folder-heading">
       {% if folder_path|length == 1 %}
-        <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.choose_template_to_copy', service_id=current_service_id) }}">Services</a>
+        <a class="usa-link" href="{{ url_for('.choose_template_to_copy', service_id=current_service_id) }}">Services</a>
         {{ folder_path_separator() }}
       {% endif %}
       {% for folder in folder_path %}
@@ -51,15 +51,15 @@
         {% else %}
           {% if folder.id %}
             {% if current_user.has_template_folder_permission(folder) %}
-              <a href="{{ url_for('.choose_template_to_copy', service_id=current_service_id, from_service=from_service.id, from_folder=folder.id) }}" class="govuk-link govuk-link--no-visited-state folder-heading-folder">{{ folder.name }}</a>
+              <a href="{{ url_for('.choose_template_to_copy', service_id=current_service_id, from_service=from_service.id, from_folder=folder.id) }}" class="usa-link folder-heading-folder">{{ folder.name }}</a>
              {% else %}
               <span class="folder-heading-folder">{{ folder.name }}</span>
             {% endif %}
             {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
           {% elif folder.parent_id == None %}
-            <a href="{{ url_for('.choose_template_to_copy', service_id=current_service_id, from_service=from_service.id, from_folder=folder.id) }}" class="govuk-link govuk-link--no-visited-state folder-heading-folder">{{ from_service.name }}</a> {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
+            <a href="{{ url_for('.choose_template_to_copy', service_id=current_service_id, from_service=from_service.id, from_folder=folder.id) }}" class="usa-link folder-heading-folder">{{ from_service.name }}</a> {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
           {% else %}
-            <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.choose_template_to_copy', service_id=current_service_id, from_service=from_service.id) }}">{{ from_service.name }}</a> {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
+            <a class="usa-link" href="{{ url_for('.choose_template_to_copy', service_id=current_service_id, from_service=from_service.id) }}">{{ from_service.name }}</a> {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
           {% endif %}
         {% endif %}
       {% endfor %}

app/templates/components/list-entry.html

@@ -1,5 +1,5 @@
-{% from "components/uk_components/fieldset/macro.njk" import govukFieldset %}
-{% from "components/uk_components/error-message/macro.njk" import govukErrorMessage %}
+{% from "components/components/fieldset/macro.njk" import govukFieldset %}
+{% from "components/components/error-message/macro.njk" import govukErrorMessage %}
 
 {% macro list_entry(
   field,
@@ -8,7 +8,7 @@
   autocomplete=True
 ) %}
 
-  <div class="govuk-form-group">
+  <div class="usa-form-group">
     {% if hint %}
       {% set attributes = {"aria-describedby": field.name + '-hint'} %}
     {% else %}
@@ -48,7 +48,7 @@
               "html": '<span class="usa-sr-only">' + item_name + ' number </span>' + loop.index|string + '.',
               "classes": label_classes
             },
-            "classes": "govuk-input--numbered govuk-!-width-full",
+            "classes": "govuk-input--numbered ",
             "value": field.data[loop.index0],
             "autocomplete": autocomplete
           }) }}

app/templates/components/page-footer.html

@@ -1,4 +1,4 @@
-{% from "components/uk_components/button/macro.njk" import govukButton %}
+{% from "components/components/button/macro.njk" import govukButton %}
 
 {% macro page_footer(
   button_text=None,
@@ -32,7 +32,7 @@
     {% endif %}
     {% if delete_link %}
       <span class="page-footer-link {% if not button_text %}page-footer-delete-link-without-button{% endif %}">
-        <a class="govuk-link govuk-link--destructive" href="{{ delete_link }}">{{ delete_link_text }}</a>
+        <a class="usa-link usa-link--destructive" href="{{ delete_link }}">{{ delete_link_text }}</a>
       </span>
     {% endif %}
     {% if secondary_link and secondary_link_text %}

app/templates/components/pill.html

@@ -11,7 +11,7 @@
       {% for label, option, link, count in items %}
         <li class="pill-item__container">
         {% if current_value == option %}
-          <a id="pill-selected-item" class="pill-item pill-item--selected usa-link {% if not show_count %} pill-item--centered{% endif %}" href="{{ link }}" aria-current="page">
+          <a id="pill-item-selected" class="pill-item pill-item--selected usa-link {% if not show_count %} pill-item--centered{% endif %}" aria-disabled="true" aria-current="page">
         {% else %}
           <a class="pill-item usa-dark-background usa-link usa-link--alt bg-primary" href="{{ link }}">
         {% endif %}

app/templates/components/previous-next-navigation.html

@@ -4,7 +4,7 @@
       <ul class="group">
         {% if previous_page %}
           <li class="previous-page">
-            <a class="govuk-link govuk-link--no-visited-state" href="{{previous_page['url']}}" rel="previous" >
+            <a class="usa-link" href="{{previous_page['url']}}" rel="previous" >
               <span class="pagination-part-title">
                 <svg class="pagination-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
                   <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"/>
@@ -17,7 +17,7 @@
         {% endif %}
         {% if next_page %}
           <li class="next-page">
-            <a class="govuk-link govuk-link--no-visited-state" href="{{next_page['url']}}" rel="next">
+            <a class="usa-link" href="{{next_page['url']}}" rel="next">
               <span class="pagination-part-title">
                 {{next_page['title']}}
                 <svg class="pagination-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">

app/templates/components/select-input.html

@@ -41,8 +41,8 @@
     {% if is_collapsible %}
     <div class="selection-summary" role="region" aria-live="polite"></div>
     {% endif %}
-    <fieldset id="{{ field.id }}" {% if inline %}class="inline"{% endif %}>
-      <legend class="{{ 'form-label' if not hide_legend else '' }}{% if legend_style != 'text' %} {{ legend_style }}{% endif %}">
+    <fieldset id="{{ field.id }}" class="usa-fieldset" {% if inline %}class="inline"{% endif %}>
+      <legend class="{{ 'usa-legend' if not hide_legend else '' }}{% if legend_style != 'text' %} {{ legend_style }}{% endif %}">
         {% if hide_legend %}<span class="usa-sr-only">{% endif %}
           {{ field.label.text|safe }}
         {% if hide_legend %}</span>{% endif %}
@@ -64,12 +64,12 @@
 
 {% macro select_input(option, disable=[], option_hints={}, data_target=None, as_list_item=False, input="radio") %}
   {% if as_list_item %}
-  <li class="multiple-choice" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
+  <li class="multiple-choice test-one" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
   {% else %}
-  <div class="multiple-choice" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
+  <div class="usa-radio" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
   {% endif %}
     <input
-      id="{{ option.id }}" name="{{ option.name }}" type="{{ input }}" value="{{ option.data }}"
+      id="{{ option.id }}" class="usa-radio__input" name="{{ option.name }}" type="{{ input }}" value="{{ option.data }}"
       {% if option.data in disable %}
         disabled
       {% endif %}
@@ -77,7 +77,7 @@
         checked
       {% endif %}
     >
-    <label class="block-label" for="{{ option.id }}">
+    <label class="usa-radio__label" for="{{ option.id }}">
       {{ option.label.text }}
       {% if option_hints[option.data] %}
         <div class="block-label-hint">

app/templates/components/service-link.html

@@ -1,6 +1,6 @@
 {% macro service_link(service, endpoint, link_text) %}
   {% if service %}
-    <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for(endpoint, service_id=service.id) }}">{{ link_text }}</a>
+    <a class="usa-link" href="{{ url_for(endpoint, service_id=service.id) }}">{{ link_text }}</a>
   {% else %}
     <b class="govuk-!-font-weight-bold">{{ link_text|capitalize }}</b>
   {% endif %}

app/templates/components/status-box.html

@@ -2,7 +2,7 @@
   <div class="big-number-with-status">
     <div class="big-number-status{% if failing %}-failing{% endif %}">
       {% if url %}
-        <a class="govuk-link govuk-link--no-visited-state" href="{{ url }}">{{ number }} {{ label }}</a>
+        <a class="usa-link" href="{{ url }}">{{ number }} {{ label }}</a>
       {% else %}
         {{ number }} {{ label }}
       {% endif %}

app/templates/components/sub-navigation.html

@@ -24,7 +24,7 @@
 {% macro sub_navigation(
   item_set
 ) %}
-  <nav aria-label="Side navigation," class="margin-top-5">
+  <nav aria-label="Side navigation,">
     <ul class="usa-sidenav" itemtype="http://schema.org/ItemList">
       {% for item in item_set %}
         {% if item.sub_navigation_items %}

app/templates/components/table.html

@@ -1,6 +1,6 @@
 {% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
-  <table class="table usa-table usa-table--borderless table-font-xsmall">
-    <caption class="heading-medium table-heading{{ ' usa-sr-only' if not caption_visible}}">
+  <table class="usa-table usa-table--borderless">
+    <caption class="font-body-lg table-heading{{ ' usa-sr-only' if not caption_visible}}">
       {{ caption }}
     </caption>
     <thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
@@ -10,7 +10,7 @@
             {% if field_headings_visible %}
               {{ field_heading }}
             {% else %}
-              <span class="usa-sr-only">{{ field_heading }}</span>
+              <span>{{ field_heading }}</span>
             {% endif %}
           </th>
         {% endfor %}
@@ -65,7 +65,11 @@
 
 {% macro field(align='left', status='', border=True, colspan=None, wrap=False) -%}
 
-    {% set field_alignment = 'table-field-right-aligned' if align == 'right' else 'table-field-left-aligned' %}
+    {% set field_alignment =
+    'table-field-right-aligned' if align == 'right' else
+    'table-field-center-aligned' if align == 'center' else
+    'table-field-left-aligned'
+    %}    
     {% set border = '' if border else 'table-field-noborder' %}
     {% set wrap = 'table-field-wrap-text' if wrap else '' %}
 
@@ -165,12 +169,12 @@
       {% if notification.status|format_notification_status_as_url(notification.notification_type) %}
         </a>
       {% endif %}
-      <span class="status-hint">
+      <p class="status-hint margin-0 width-card-lg">
         {{ notification.status|format_notification_status_as_time(
           notification.created_at|format_datetime_short,
           (notification.updated_at or notification.created_at)|format_datetime_short
         ) }}
-      </span>
+        </p>
       {% if displayed_on_single_line %}</span>{% endif %}
     {% endcall %}
   {% endif %}
@@ -186,11 +190,11 @@
     <span {% if id %}id="{{ id }}"{% endif %} class="spark-bar">
       <span class="spark-bar-bar">
         {{ '{:,.0f}'.format(count) }} 
-          {% if count == 1 -%}
+          <!-- {% if count == 1 -%}
             message sent
           {% else -%}
             messages sent
-          {% endif %}
+          {% endif %} -->
       </span>
     </span>
   {% endcall %}

app/templates/components/task-list.html

@@ -1,6 +1,6 @@
 {% macro task_list_item(completed, label, link) %}
   <li class="task-list-item">
-    <span aria-describedby="{{ label|id_safe }}"><a class="govuk-link govuk-link--no-visited-state" href="{{ link }}">{{ label }}</a></span>
+    <span aria-describedby="{{ label|id_safe }}"><a class="usa-link" href="{{ link }}">{{ label }}</a></span>
     {% if completed %}
       <strong class="task-list-indicator-completed" id="{{ label|id_safe }}">Completed</strong>
     {% else %}

app/templates/components/textbox.html

@@ -61,7 +61,7 @@
     {% endif %}
     {% if help_link and help_link_text %}
       <p class="textbox-help-link">
-        <a class="govuk-link govuk-link--no-visited-state" href='{{ help_link }}'>{{ help_link_text }}</a>
+        <a class="usa-link" href='{{ help_link }}'>{{ help_link_text }}</a>
       </p>
     {% endif %}
   </div>

app/templates/components/uk_components/skip-link/template.njk

@@ -1,3 +0,0 @@
-<a href="{{ params.href | default('#content') }}" class="govuk-skip-link{%- if params.classes %} {{ params.classes }}{% endif -%}"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {{- params.html | safe if params.html else params.text -}}
-</a>

app/templates/content_template.html

@@ -14,7 +14,7 @@
       <div class="tablet:grid-col-2">
         {{ sub_navigation(navigation_links) }}
       </div>
-      <div class="tablet:grid-col-10 padding-left-4 sub-content">
+      <div class="tablet:grid-col-10 padding-left-4 usa-prose site-prose">
     {% else %}
       <div class="tablet:grid-col-10">
     {% endif %}

app/templates/error/401.html

@@ -4,6 +4,6 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
     <h1>You’re not authorised to see this page</h1>
-      <p class="govuk-body"><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.sign_in' )}}">Sign in</a> to Notify.gov and try again.</p>
+      <p class="govuk-body"><a class="usa-link" href="{{ url_for('main.sign_in' )}}">Sign in</a> to Notify.gov and try again.</p>
   </div>
 {% endblock %}