Merge pull request #2762 from GSA/migrate/govuk-width-container

Complete govuk-width-container migration and fix add-org template

app/config.py

@@ -17,7 +17,7 @@ class Config(object):
 
     ADMIN_BASE_URL = getenv("ADMIN_BASE_URL", "http://localhost:6012")
     HEADER_COLOUR = (
-        "#81878b"  # mix(govuk-colour("dark-grey"), govuk-colour("mid-grey"))
+        "#81878b"  # mix of dark-grey and mid-grey
     )
     LOGO_CDN_DOMAIN = (
         "static-logos.notifications.service.gov.uk"  # TODO use our own CDN
@@ -141,7 +141,7 @@ class Test(Development):
 
 
 class Production(Config):
-    HEADER_COLOUR = "#005EA5"  # $govuk-blue
+    HEADER_COLOUR = "#005EA5"  # primary blue
     HTTP_PROTOCOL = "https"
     ASSET_DOMAIN = ""  # TODO use a CDN
     ASSET_PATH = "/static/"  # TODO use a CDN

app/templates/views/api/index.html

@@ -47,7 +47,7 @@
     {% endif %}
     {% for notification in api_notifications.notifications %}
       <details class="api-notifications-item govuk-details" data-module="govuk-details">
-        <summary class="govuk-details__summary govuk-clearfix api-notifications-item__heading">
+        <summary class="govuk-details__summary api-notifications-item__heading">
           <h3>
             <span class="govuk-details__summary-text">
             {{ notification.to }}

app/templates/views/organizations/add-organization.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "views/platform-admin/_base_template.html" %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
@@ -7,31 +7,11 @@
   New organization
 {% endblock %}
 
-{% block main %}
+{% block platform_admin_content %}
-  <div class="govuk-width-container">
+  {{ page_header('New organization') }}
-    <div class="navigation-service usa-breadcrumb">
+  {% call form_wrapper() %}
-      <a href="{{ url_for('.organizations') }}" class="usa-link navigation-service usa-breadcrumb__link usa-breadcrumb-back-to">All organizations</a>
+    {{ form.name }}
-      <a href="{{ url_for('main.choose_account') }}" class="usa-link navigation-service usa-breadcrumb-switch">Switch service</a>
+    {{ form.organization_type }}
-    </div>
+    {{ page_footer('Save') }}
-
+  {% endcall %}
-    <div class="grid-row">
-      <div class="grid-col-3">
-        &nbsp;
-      </div>
-      <div class="grid-col-9">
-        <main class="govuk-main-wrapper column-main" id="main-content" role="main" >
-          {% block beforeContent %}{% endblock %}
-          {% block content %}
-            {{ page_header('New organization') }}
-            {% call form_wrapper() %}
-              {{ form.name }}
-              {{ form.organization_type }}
-              {{ page_footer('Save') }}
-            {% endcall %}
-          {% endblock %}
-        </main>
-      </div>
-    </div>
-  </div>
-
 {% endblock %}

app/templates/views/templates/_template_list.html

@@ -78,7 +78,7 @@
     {% endset %}
 
     {# create the item config now to include the label content -#}
-    {# TODO: "attributes": { "aria-describedby": item.id ~ "-hint" } needs to be added but govuk-frontend-jinja doesn't
+    {# TODO: "attributes": { "aria-describedby": item.id ~ "-hint" } needs to be added but USWDS framework doesn't
     currently support this -#}
     {% set checkbox_config = {
     "html": label_content,

notifications_utils/jinja_templates/letter_image_template.jinja2

@@ -9,7 +9,7 @@
   </div>
 {% endfor %}
 
-<div class="govuk-visually-hidden">
+<div class="usa-sr-only">
   <h3>
     Recipient address
   </h3>

tests/notifications_utils/test_template_types.py

@@ -1200,7 +1200,7 @@ def test_letter_image_template_renders_visually_hidden_address():
         ),
         features="html.parser",
     )
-    assert str(template.select_one(".govuk-visually-hidden ul")) == (
+    assert str(template.select_one(".usa-sr-only ul")) == (
         "<ul>" "<li>line 1</li>" "<li>line 2</li>" "<li>postcode</li>" "</ul>"
     )
 

urls.js

@@ -72,6 +72,11 @@ const routes = {
       label: 'Platform Admin Live Services',
       path: '/platform-admin/live-services',
     },
+    // Organization pages
+    {
+      label: 'Add Organization',
+      path: '/organizations/add',
+    },
   ],
 
   // Using Notify section