Update dashboard and template flow (#514)

* Updated header and footer
* Moved files around and updated gulpfile to correct the build process when it goes to production
* Updated fonts
* Adjusted grid templating
* Adding images to assets
* Updated account pages, dashboard, and pages in message sending flow
* Updated the styling for the landing pages in the account section once logged in

app/templates/components/banner.html

@@ -13,11 +13,11 @@
     {% endif %}
   >
     {% if subhead -%}
-      <h1 class="banner-title">{{ subhead }}</h1>
+      <h1 class="banner-title font-body-lg">{{ subhead }}</h1>
     {%- endif -%}
     {{ body }}
     {% if context %}
-    <p class="govuk-body">
+    <p class="usa-body">
       {{ context }}
     </p>
     {% endif %}
@@ -28,7 +28,7 @@
           "text": "" if thing else delete_button,
           "html": delete_button + "<span class=\"govuk-visually-hidden\"> ‘" + thing + "’</span>" if thing else "",
           "name": "delete",
-          "classes": "govuk-button--warning govuk-!-margin-top-2",
+          "classes": "margin-top-2 usa-button--secondary",
         }) }}
       {% endcall %}
     {% endif %}

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="govuk-link govuk-link--no-visited-state big-number-link" href="{{ link }}">
+    <a class="usa-link govuk-link--no-visited-state display-block margin-bottom-1" href="{{ link }}">
   {% endif %}
       <span class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
         <span class="big-number-number">

app/templates/components/folder-path.html

@@ -6,7 +6,7 @@
   link_current_item=False,
   root_element='h1'
 ) %}
-  <{{ root_element }} class="heading-medium folder-heading"{% if root_element == 'h1' %} id="page-header"{% endif %}>
+  <{{ root_element }} class="font-body-lg folder-heading"{% if root_element == 'h1' %} id="page-header"{% endif %}>
     {% for folder in folders %}
       {% if loop.last and not link_current_item %}
         {% if folder.template_type or not folder.id %}

app/templates/components/list-entry.html

@@ -23,7 +23,7 @@
       })
     %}
     {% if hint %}
-      <div id="{{ field.name }}-hint" class="govuk-hint">
+      <div id="{{ field.name }}-hint" class="usa-hint">
         {{ hint }}
       </div>
     {% endif %}

app/templates/components/page-footer.html

@@ -12,11 +12,11 @@
   delete_link_text="delete",
   centered_button=False
 ) %}
-  <div class="page-footer">
+  <div class="page-footer margin-top-4">
     {% if button_text %}
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
-      {% set button_data = {"text": button_text, "classes": "page-footer__button"} %}
+      {% set button_data = {"text": button_text} %}
       {% if destructive %}{% set _ = button_data.update({"classes": "govuk-button--warning page-footer__button"}) %}{% endif %}
       {% if centered_button %}{% set _ = button_data.update({"classes": "page-footer__button--centred"}) %}{% endif %}
       {% if button_name %}{% set _ = button_data.update({"name": button_name}) %}{% endif %}
@@ -36,7 +36,9 @@
       </span>
     {% endif %}
     {% if secondary_link and secondary_link_text %}
-      <a class="govuk-link govuk-link--no-visited-state page-footer-secondary-link" href="{{ secondary_link }}">{{ secondary_link_text }}</a>
+    <div class="margin-top-4">
+      <a class="usa-link font-body-sm" href="{{ secondary_link }}">{{ secondary_link_text }}</a>
+    </div>
     {% endif %}
   </div>
 {% endmacro %}

app/templates/components/pill.html

@@ -11,9 +11,9 @@
       {% 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 govuk-link govuk-link--no-visited-state{% if not show_count %} pill-item--centered{% endif %}" href="{{ link }}" aria-current="page">
+          <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">
         {% else %}
-          <a class="pill-item govuk-link govuk-link--no-visited-state" href="{{ link }}">
+          <a class="pill-item usa-dark-background usa-link usa-link--alt bg-primary" href="{{ link }}">
         {% endif %}
           {% if show_count %}
             {{ big_number(count, **big_number_args) }}

app/templates/components/show-more.html

@@ -1,6 +1,6 @@
 {% macro show_more(url, label, with_border=True) %}
   <a
     href="{{ url }}"
-    class="govuk-link govuk-link--no-visited-state show-more{% if not with_border %}-no-border{% endif %}"
+    class="usa-link show-more{% if not with_border %}-no-border{% endif %}"
   ><span>{{ label }}</span></a>
 {% endmacro %}

app/templates/components/table.html

@@ -1,5 +1,5 @@
 {% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
-  <table class="table table-font-xsmall">
+  <table class="table usa-table usa-table--borderless table-font-xsmall">
     <caption class="heading-medium table-heading{{ ' govuk-visually-hidden' if not caption_visible}}">
       {{ caption }}
     </caption>

app/templates/components/textbox.html

@@ -19,27 +19,27 @@
     class="form-group{% if field.errors %} form-group-error{% endif %} {{ extra_form_group_classes }}"
     data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}"
   >
-    <label class="form-label" for="{{ field.name }}">
+    <label class="usa-label" for="{{ field.name }}">
       {% if label %}
         {{ label }}
       {% else %}
         {{ field.label.text }}
       {% endif %}
-      {% if hint %}
-        <span class="form-hint">
-          {{ hint }}
-        </span>
-      {% endif %}
       {% if field.errors %}
         <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
           {% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
         </span>
       {% endif %}
     </label>
+    {% if hint %}
+      <div class="usa-hint">
+        {{ hint }}
+      </div>
+    {% endif %}
     {%
       if highlight_placeholders or autosize
     %}
-      {% set field_class = 'form-control-{} textbox-highlight-textbox'.format(width) %}
+      {% set field_class = 'usa-textarea form-control-{} textbox-highlight-textbox'.format(width) %}
     {% else %}
       {% set field_class = 'form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else '') %}
     {% endif %}

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

@@ -1,2 +1,2 @@
-<a href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" class="govuk-back-link{%- if params.classes %} {{ params.classes }}{% endif -%}"
+<a href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" class="usa-link usa-back-link display-flex margin-top-5{%- 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/uk_components/button/template.njk

@@ -12,7 +12,7 @@
 
 {#- Define common attributes that we can use across all element types #}
 
-{%- set commonAttributes %} class="govuk-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} govuk-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
+{%- set commonAttributes %} class="usa-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} govuk-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 #}
 

app/templates/components/uk_components/error-message/template.njk

@@ -1,6 +1,6 @@
 {% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
 
-<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
   {% if visuallyHiddenText %}<span class="govuk-visually-hidden">{{ visuallyHiddenText }}:</span> {% endif -%}
   {{ params.html | safe if params.html else params.text }}
 </span>

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

@@ -1,4 +1,4 @@
-<fieldset class="govuk-fieldset
+<fieldset class="govuk-fieldset margin-bottom-5
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>

app/templates/components/uk_components/header/template.njk

@@ -100,11 +100,11 @@
             </li>
             {% endif %}
           {% endfor %}
-          <li class="usa-nav__secondary-item">
+          <!-- <li class="usa-nav__secondary-item">
             <a href="javascript:void(0)">
               Sign in
             </a>
-          </li>
+          </li> -->
         </ul>
         <!-- <section aria-label="Search component">
           <form class="usa-search usa-search--small margin-bottom-2" role="search">

app/templates/components/uk_components/hint/template.njk

@@ -1,4 +1,4 @@
-<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {{ params.html | safe if params.html else params.text }}
-</span>
+</div>

app/templates/components/uk_components/input/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,
@@ -37,7 +37,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
+  <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 %}

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

@@ -1,6 +1,6 @@
 {% if params.html or params.text %}
 {% set labelHtml %}
-<label class="govuk-label{%- if params.classes %} {{ params.classes }}{% endif %}"
+<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 %}>
   {{ params.html | safe if params.html else params.text }}