Use MOJ Design System (remove GOV.UK logo) (#777)

Also remove HMCTS Design System and small bug fixes
ministryofjustice · Nov 19, 2019 · a216f87 · a216f87
1 parent f15cf72
commit a216f87
Show file tree

Hide file tree

Showing 34 changed files with 754 additions and 866 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -75,7 +75,7 @@ USER controlpanel
 COPY --from=jsdep dist/app.css dist/app.js static/
 COPY --from=jsdep node_modules/accessible-autocomplete/dist/ static/accessible-autocomplete
 COPY --from=jsdep node_modules/govuk-frontend static/govuk-frontend
-COPY --from=jsdep node_modules/@hmcts/frontend static/hmcts-frontend
+COPY --from=jsdep node_modules/@ministryofjustice/frontend/moj static/ministryofjustice-frontend
 COPY --from=jsdep node_modules/html5shiv/dist static/html5-shiv
 COPY --from=jsdep node_modules/jquery/dist static/jquery
 

diff --git a/Makefile b/Makefile
@@ -47,7 +47,7 @@ node_modules:
 	@npm install
 	@cp -R node_modules/accessible-autocomplete/dist/ static/accessible-autocomplete
 	@cp -R node_modules/govuk-frontend/ static/govuk-frontend
-	@cp -R node_modules/@hmcts/frontend/ static/hmcts-frontend
+	@cp -R node_modules/@ministryofjustice/frontend/ static/ministryofjustice-frontend
 	@cp -R node_modules/html5shiv/dist/ static/html5-shiv
 	@cp -R node_modules/jquery/dist/ static/jquery
 

diff --git a/controlpanel/frontend/jinja2/500.html b/controlpanel/frontend/jinja2/500.html
@@ -3,9 +3,15 @@
 {% set page_title = "Sorry, there is a problem with the service" %}
 
 {% block header %}
-  {{ govukHeader({
-    'serviceName': service_name,
-    'serviceUrl': '#',
+  {{ mojHeader({
+    'organisationLabel': {
+      'text': 'Ministry of Justice',
+      'href': '#',
+    },
+    'serviceLabel': {
+      'text': service_name,
+      'href': '#',
+    },
     'navigation': [],
   }) }}
 {% endblock %}

diff --git a/controlpanel/frontend/jinja2/base.html b/controlpanel/frontend/jinja2/base.html
@@ -1,8 +1,7 @@
-{% from "header/macro.html" import govukHeader with context %}
+{% from "header/macro.html" import mojHeader with context %}
 {% from "footer/macro.html" import govukFooter %}
-{% from "navbar/macro.html" import navbar %}
+{% from "navbar/macro.html" import mojPrimaryNavigation %}
 {% from "alerts/macro.html" import alerts with context %}
-{% from "sign-out/macro.html" import sign_out_link with context %}
 
 {% extends "govuk-frontend.html" %}
 
@@ -36,31 +35,47 @@
 
 {% block header %}
   {% if request.user.is_authenticated -%}
-    {{ govukHeader({
-      'serviceName': service_name,
-      'serviceUrl': '#',
-      'navigation': [
-        {
-          'href': url('index'),
-          'text': "Signed in as " ~ request.user.name | default(request.user.email),
-          'active': True
-        },
-        {
-          'html': sign_out_link(),
-        }
-      ]
+    {{ mojHeader({
+      'organisationLabel': {
+        'text': 'Ministry of Justice',
+        'href': '#',
+      },
+      'serviceLabel': {
+        'text': service_name,
+        'href': '#',
+      },
+      'navigation': {
+        'label': 'Account navigation',
+        'items': [
+          {
+            'href': url('index'),
+            'text': request.user.name | default(request.user.email),
+            'active': True
+          },
+          {
+            'html': '<a href="' ~ url('oidc_logout') ~ '">Sign out</a>'
+          }
+        ]
+      }
     }) }}
   {%- else -%}
-    {{ govukHeader({
-      'serviceName': service_name,
-      'serviceUrl': '#',
+    {{ mojHeader({
+      'organisationLabel': {
+        'text': 'Ministry of Justice',
+        'href': '#',
+      },
+      'serviceLabel': {
+        'text': service_name,
+        'href': '#',
+      },
     }) }}
   {%- endif %}
 {% endblock %}
 
 {% block beforeContent %}
   {% if not hide_nav and request.user.is_authenticated %}
-  {{ navbar({
+  {{ mojPrimaryNavigation({
+    "label": "Primary navigation",
     "items": [
       {
         "hide": not request.user.is_superuser,
@@ -111,40 +126,43 @@
 
 {% block footer %}
   {{ govukFooter({
-    'meta': {
-      'items': [
-        {
-          'href': user_guidance_base_url,
-          'text': "Platform user guidance"
-        },
-        {
-          'href': user_guidance_base_url + "/support.html",
-          'text': "Platform support"
-        },
-        {
-          'href': "https://asdslack.slack.com/messages/C1PUCG719/#",
-          'text': "R Slack channel"
-        },
-        {
-          'href': "https://asdslack.slack.com/messages/C1Q09V86S/#",
-          'text': "Python slack channel"
-        },
-        {
-          'href': "https://asdslack.slack.com/messages/C4PF7QAJZ#",
-          'text': "Analytical platform slack channel"
-        },
-        {
-          'href': url('whats-new'),
-          'text': "What's new?"
-        }
-      ]
-    }
+    'navigation': [
+      {
+        'title': 'Related resources',
+        'items': [
+          {
+            'href': user_guidance_base_url,
+            'text': "Platform user guidance"
+          },
+          {
+            'href': user_guidance_base_url + "/support.html",
+            'text': "Platform support"
+          },
+          {
+            'href': "https://asdslack.slack.com/messages/C1PUCG719/#",
+            'text': "R Slack channel"
+          },
+          {
+            'href': "https://asdslack.slack.com/messages/C1Q09V86S/#",
+            'text': "Python slack channel"
+          },
+          {
+            'href': "https://asdslack.slack.com/messages/C4PF7QAJZ#",
+            'text': "Analytical platform slack channel"
+          },
+          {
+            'href': url('whats-new'),
+            'text': "What's new?"
+          }
+        ]
+      }
+    ]
   }) }}
 {% endblock %}
 
 {% block body_end %}
   {% block scripts %}
-    <script src="{{ static('govuk-frontend/all.js') }}"></script>
+    <script src="{{ static('govuk-frontend/govuk/all.js') }}"></script>
     <script>window.GOVUKFrontend.initAll()</script>
     <script src="{{ static('accessible-autocomplete/accessible-autocomplete.min.js') }}"></script>
     <script src="{{ static('jquery/jquery.min.js') }}"></script>

diff --git a/controlpanel/frontend/jinja2/datasource-detail.html b/controlpanel/frontend/jinja2/datasource-detail.html
@@ -20,7 +20,7 @@
 <h1 class="govuk-heading-xl">{{ page_title }}</h1>
 
 <p class="govuk-body">
-  <a href="{{ bucket.aws_url }}" class="govuk-button hmcts-button--secondary" target="_blank" rel="noopener">
+  <a href="{{ bucket.aws_url }}" class="govuk-button govuk-button--secondary" target="_blank" rel="noopener">
     Open on AWS
   </a>
 </p>
@@ -65,7 +65,7 @@ <h2 class="govuk-heading-m">Users and groups with access</h2>
         <td class="govuk-table__cell">
           {% if request.user.has_perm('api.update_users3bucket', member) %}
           <a href="{% if member.user -%}{{ url("update-access-level", kwargs={"pk": member.id}) }}{%- else -%}{{ url("update-policy-access-level", kwargs={"pk": member.id}) }}{%- endif %}"
-             class="govuk-button hmcts-button--secondary right">
+             class="govuk-button govuk-button--secondary right">
             Edit access level
           </a>
           {% endif %}
@@ -85,15 +85,15 @@ <h2 class="govuk-heading-m">Users and groups with access</h2>
 
   {% if request.user.has_perm('api.create_users3bucket', bucket) and users_options|length %}
     <a href="{{ url('grant-datasource-access', kwargs={'pk': bucket.pk}) }}"
-       class="govuk-button hmcts-button--secondary">
+       class="govuk-button govuk-button--secondary">
       Grant user access
     </a>
   {% endif %}
 
   {% if request.user.has_perm('api.manage_groups') %}
     {% if request.user.has_perm('api.create_policys3bucket', bucket) and policies_options|length %}
       <a href="{{ url('grant-datasource-policy-access', kwargs={'pk': bucket.pk}) }}"
-         class="govuk-button hmcts-button--secondary">
+         class="govuk-button govuk-button--secondary">
         Grant group access
       </a>
     {% endif %}
@@ -139,7 +139,7 @@ <h2 class="govuk-heading-m">Apps with access</h2>
                      name="access_level"
                      value="{{ yes_no(apps3bucket.access_level, 'readwrite', 'readonly', 'readwrite') }}">
               <input type="hidden" name="return_to" value="manage-datasource">
-              <button class="confirm govuk-button hmcts-button--secondary">
+              <button class="confirm govuk-button govuk-button--secondary">
                 Set {{ yes_no(apps3bucket.access_level, 'readwrite', 'read only', 'read/write') }}
               </button>
             </form>
@@ -149,7 +149,7 @@ <h2 class="govuk-heading-m">Apps with access</h2>
                   method="post"
                   class="form-control-prefix">
               {{ csrf_input }}
-              <button class="confirm govuk-button hmcts-button--secondary">
+              <button class="confirm govuk-button govuk-button--secondary">
                 Revoke access
               </button>
             </form>
@@ -171,7 +171,7 @@ <h2 class="govuk-heading-m">Apps with access</h2>
 
   {% if request.user.has_perm('api.create_apps3bucket', bucket) and app_options|length %}
     <a href="{{ url('grant-app-access', kwargs={'pk': bucket.pk}) }}"
-       class="govuk-button hmcts-button--secondary">
+       class="govuk-button govuk-button--secondary">
       Grant app access
     </a>
   {% endif %}

diff --git a/controlpanel/frontend/jinja2/govuk-frontend.html b/controlpanel/frontend/jinja2/govuk-frontend.html
@@ -1,28 +1,28 @@
 {%- from "skip-link/macro.html" import govukSkipLink -%}
 {%- from "footer/macro.html" import govukFooter -%}
-{%- from "header/macro.html" import govukHeader with context -%}
+{%- from "header/macro.html" import mojHeader with context -%}
 
 <!DOCTYPE html>
-<html lang="{{ htmlLang | default('en') }}" class="govuk-template {{ htmlClasses or "" }}">
+<!--[if lt IE 9]><html class="lte-ie8" lang="en"><![endif]-->
+<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
 
 <head>
-  <meta charset="utf-8" />
+  <meta charset="utf-8">
   <title>
     {%- block page_title -%}
-      GOV.UK - The best place to find government services and information
+      Ministry of Justice Analytical Platform
     {%- endblock -%}
   </title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="theme-color" content="{{ themeColor | default('#0b0c0c') }}" />
   {# Ensure that older IE versions always render with the correct rendering engine #}
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   {% block headIcons %}
-  <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ static('govuk-frontend/assets/images/favicon.ico') }}" type="image/x-icon">
-  <link rel="mask-icon" href="{{ static('govuk-frontend/assets/images/govuk-mask-icon.svg') }}" color="#0b0c0c">
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ static('govuk-frontend/assets/images/govuk-apple-touch-icon-180x180.png') }}">
-  <link rel="apple-touch-icon" sizes="167x167" href="{{ static('govuk-frontend/assets/images/govuk-apple-touch-icon-167x167.png') }}">
-  <link rel="apple-touch-icon" sizes="152x152" href="{{ static('govuk-frontend/assets/images/govuk-apple-touch-icon-152x152.png') }}">
-  <link rel="apple-touch-icon" href="{{ static('govuk-frontend/assets/images/govuk-apple-touch-icon.png') }}">
+  <link rel="shortcut icon" href="{{ static('govuk-frontend/govuk/assets/images/favicon.ico') }}" type="image/x-icon">
+  <link rel="apple-touch-icon" href="{{ static('ministryofjustice-frontend/moj/assets/images/moj-apple-touch-icon-180x180.png') }}" sizes="180x180">
+  <link rel="apple-touch-icon" href="{{ static('ministryofjustice-frontend/moj/assets/images/moj-apple-touch-icon-167x167.png') }}" sizes="167x167">
+  <link rel="apple-touch-icon" href="{{ static('ministryofjustice-frontend/moj/assets/images/moj-apple-touch-icon-152x152.png') }}" sizes="152x152">
+  <link rel="apple-touch-icon" href="{{ static('ministryofjustice-frontend/moj/assets/images/moj-apple-touch-icon.png') }}">
   {% endblock %}
 
   {% block head %}{% endblock %}
@@ -32,11 +32,12 @@
   {%- set host = "localhost" %}
   {%- if request %}{% set scheme = request.scheme %}{% endif %}
   {%- if request %}{% set host = request.get_host() %}{% endif %}
-  <meta property="og:image" content="{{ scheme }}://{{ host }}{{ static('govuk-frontend/assets/images/govuk-opengraph-image.png') }}">
+  <meta property="og:image" content="{{ scheme }}://{{ host }}{{ static('ministryofjustice-frontend/assets/images/moj-opengraph-image.png') }}">
 </head>
 
-<body class="govuk-template__body {{ bodyClasses or "" }}">
+<body class="app-body {{ bodyClasses or "" }}">
   <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+  <div class="app-pane">
   {% block bodyStart %}{% endblock %}
 
   {% block skipLink %}
@@ -47,12 +48,12 @@
   {% endblock %}
 
   {% block header %}
-    {{ govukHeader({}) }}
+    {{ mojHeader({}) }}
   {% endblock %}
 
   {% block main %}
+    {% block beforeContent %}{% endblock %}
     <div class="govuk-width-container">
-      {% block beforeContent %}{% endblock %}
       <main class="govuk-main-wrapper {{ mainClasses or "" }}" id="main-content" role="main">
         {% block content %}{% endblock %}
       </main>
@@ -63,6 +64,8 @@
     {{ govukFooter({}) }}
   {% endblock %}
 
+  </div>
+
   {% block body_end %}{% endblock %}
 </body>
 </html>
diff --git a/controlpanel/frontend/jinja2/includes/app-list.html b/controlpanel/frontend/jinja2/includes/app-list.html
@@ -34,7 +34,7 @@
         {{ yes_no(user.is_app_admin(app.id)) }}
       </td>
       <td class="govuk-table__cell">
-        <a class="govuk-button hmcts-button--secondary right {%- if not request.user.has_perm('api.retrieve_app', app) %} govuk-visually-hidden{% endif %}"
+        <a class="govuk-button govuk-button--secondary right {%- if not request.user.has_perm('api.retrieve_app', app) %} govuk-visually-hidden{% endif %}"
           href="{{ url("manage-app", kwargs={ "pk": app.id }) }}">
           Manage app
         </a>

diff --git a/controlpanel/frontend/jinja2/includes/datasource-access-list.html b/controlpanel/frontend/jinja2/includes/datasource-access-list.html
@@ -41,7 +41,7 @@
         <td class="govuk-table__cell">
           {% if request.user.has_perm('api.update_users3bucket', member) %}
           <a href="{% if member.user -%}{{ url("update-access-level", kwargs={"pk": member.id}) }}{%- else -%}{{ url("update-policy-access-level", kwargs={"pk": member.id}) }}{%- endif %}"
-             class="govuk-button hmcts-button--secondary right">
+             class="govuk-button govuk-button--secondary right">
             Edit access level
           </a>
           {% endif %}

diff --git a/controlpanel/frontend/jinja2/includes/datasource-list.html b/controlpanel/frontend/jinja2/includes/datasource-list.html
@@ -48,7 +48,7 @@
       {%- endif -%}
       </td>
       <td class="govuk-table__cell align-right no-wrap">
-        <a class="govuk-button hmcts-button--secondary"
+        <a class="govuk-button govuk-button--secondary"
            href="{{ url('manage-datasource', kwargs={ "pk": datasource.pk }) }}">
           Manage data source
         </a>

diff --git a/controlpanel/frontend/jinja2/policy-list.html b/controlpanel/frontend/jinja2/policy-list.html
@@ -25,7 +25,7 @@ <h1 class="govuk-heading-xl">{{ page_title }}</h1>
         <td class="govuk-table__cell"><a href="{{ url("manage-policy", kwargs={ "pk": policy.id }) }}">{{ policy.name }}</a></td>
         <td class="govuk-table__cell">{{ policy.arn }}</td>
         <td class="govuk-table__cell">
-          <a class="govuk-button hmcts-button--secondary"
+          <a class="govuk-button govuk-button--secondary"
              href="{{ url('manage-policy', kwargs={ "pk": policy.pk }) }}">
             Manage group
           </a>

diff --git a/controlpanel/frontend/jinja2/policy-update.html b/controlpanel/frontend/jinja2/policy-update.html
@@ -32,7 +32,7 @@ <h1 class="govuk-heading-xl">{{ page_title }}</h1>
           </a>
         </td>
         <td class="govuk-table__cell">
-          <a href="{{ url('policy-remove-user', kwargs={ "pk":  policy.id, "user_id": user.auth0_id }) }}" class="govuk-button hmcts-button--secondary">Remove</a>
+          <a href="{{ url('policy-remove-user', kwargs={ "pk":  policy.id, "user_id": user.auth0_id }) }}" class="govuk-button govuk-button--secondary">Remove</a>
         </td>
       </tr>
     {% endfor %}