GH-105: Use ATE logo in header

schemes/views/assets/_ate-header.scss

@@ -0,0 +1,20 @@
+.govuk-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;
+    }
+  }
+}

schemes/views/assets/application.scss

@@ -1,3 +1,4 @@
+@import "ate-header";
 @import "scheme-name";
 
 // Remove last row divider for tables within summary cards

schemes/views/templates/ate_header/macro.html

@@ -0,0 +1,56 @@
+{% macro ateHeader(params) %}
+{% set menuButtonText = params.menuButtonText if params.menuButtonText else 'Menu' -%}
+
+<header class="govuk-header {%- if params.classes %} {{ params.classes }}{% endif %}" role="banner" data-module="govuk-header"
+  {%- for attribute, value in (params.attributes.items() if params.attributes else {}.items()) %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <div class="govuk-header__container {{ params.containerClasses | default("govuk-width-container", true) }}">
+    <div class="govuk-header__logo">
+      <a href="{{ params.homepageUrl | default("/", true) }}" class="govuk-header__link govuk-header__link--homepage">
+        <img class="govuk-header__logotype ate-header__logotype" src="{{ url_for('static', filename='ate-header/ATE_WHITE_LANDSCP_AW.png') }}" alt="Active Travel England"/>
+        <img class="govuk-header__logotype ate-header__logotype--focus" src="{{ url_for('static', filename='ate-header/ATE_BLK_LANDSCP_AW.png') }}" alt="Active Travel England"/>
+        {% if (params.productName) %}
+        <span class="govuk-header__product-name">
+          {{ params.productName }}
+        </span>
+        {% endif %}
+      </a>
+    </div>
+    {% if params.serviceName or params.navigation | length %}
+    <div class="govuk-header__content">
+    {% if params.serviceName %}
+    {% if params.serviceUrl %}
+      <a href="{{ params.serviceUrl }}" class="govuk-header__link govuk-header__service-name">
+        {{ params.serviceName }}
+      </a>
+    {% else%}
+      <span class="govuk-header__service-name">
+        {{ params.serviceName }}
+      </span>
+    {% endif %}
+    {% endif %}
+    {% if params.navigation | length %}
+    <nav aria-label="{{ params.navigationLabel | default(menuButtonText, true) }}" class="govuk-header__navigation {%- if params.navigationClasses %} {{ params.navigationClasses }}{% endif %}">
+      <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" {%- if params.menuButtonLabel and params.menuButtonLabel != menuButtonText %} aria-label="{{ params.menuButtonLabel }}"{% endif %} hidden>{{ menuButtonText }}</button>
+
+      <ul id="navigation" class="govuk-header__navigation-list">
+        {% for item in params.navigation %}
+          {% if item.text or item.html %}
+            <li class="govuk-header__navigation-item {%- if item.active %} govuk-header__navigation-item--active{% endif %}">
+              {% if item.href %}
+                <a class="govuk-header__link" href="{{ item.href }}" {%- for attribute, value in (item.attributes.items() if item.attributes else {}.items()) %} {{ attribute }}="{{ value }}"{% endfor %}>
+              {% endif %}
+                {{ item.html | safe if item.html else item.text }}
+              {% if item.href %}
+                </a>
+              {% endif %}
+            </li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+    </nav>
+    {% endif %}
+    </div>
+    {% endif %}
+  </div>
+</header>
+{% endmacro %}

schemes/views/templates/base.html

@@ -1,5 +1,6 @@
 {% extends "govuk_frontend_jinja/template.html" %}
 {% from "govuk_frontend_jinja/components/phase-banner/macro.html" import govukPhaseBanner -%}
+{% from "ate_header/macro.html" import ateHeader -%}
 
 {% block pageTitle %}Update your capital schemes - Active Travel England - GOV.UK{% endblock %}
 
@@ -9,9 +10,8 @@
 {% endblock %}
 
 {% block header %}
-    {{ govukHeader({
-        "homepageUrl": url_for("start.index"),
-        "useTudorCrown": true
+    {{ ateHeader({
+        "homepageUrl": url_for("start.index")
     }) }}
 {% endblock %}