Ayr 389/create header component

app/static/src/scss/header.scss

@@ -0,0 +1,47 @@
+/* SCSS for Header */
+
+
+@mixin on-mobile{
+    @media screen and (width <= 750px){
+        @content;
+    }
+}
+
+.govuk-header {
+    &__link--tna {
+        font-weight: 700;
+    }
+
+    &__logotype--ayr {
+        white-space: nowrap;
+        word-spacing: 0.2rem;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    &__content--tna {
+        text-align: right;
+        width:100%;
+        padding-bottom: 0.5rem;
+        margin-top: 0.75rem;
+        word-spacing: 0.2rem;
+        @include on-mobile  {
+            flex-direction: column;
+            align-items: center;
+            text-align:center;
+            width: 100%;
+        }
+    }
+
+    &__container--ayr {
+       margin-bottom: 0;
+       display:flex;
+       @include on-mobile  {
+        padding-bottom: 1rem;
+       flex-direction: column;
+       align-items: center;
+       text-align:center;
+        }
+
+    }
+}

app/templates/base.html

@@ -20,6 +20,7 @@
    <link rel="stylesheet" type="text/css" src="{{ url_for('static', filename='start-page.css') }}" />
    <link rel="stylesheet" type="text/css" src="{{ url_for('static', filename='signed-out.css') }}" />
    <link rel="stylesheet" type="text/css" src="{{ url_for('static', filename='footer.css') }}" />
+   <link rel="stylesheet" type="text/css" src="{{ url_for('static', filename='header.css') }}" />
    <!-- custom css stylesheet end -->
   {% assets "css" %}<link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
 {% endblock %}
@@ -114,22 +115,32 @@
 {% endblock %}
 
 {% block header %}
-  {{ govukHeader({
-    'homepageUrl': url_for('main.index'),
-    'serviceName': config['SERVICE_NAME'],
-    'serviceUrl': url_for('main.index')
-  }) }}
+<header class="govuk-header" role="banner" data-module="govuk-header">
+  <div class="govuk-header__container govuk-header__container--ayr govuk-width-container">
+    <div class="govuk-header__logo">
+      <a href="/index" class="govuk-header__link govuk-header__link--homepage">
+        <span class="govuk-header__logotype-text govuk-header__logotype--ayr">Access Your Records (AYR)</span>
+        </a>
+      </div>
+      <div class="govuk-header__content govuk-header__content--tna">
+       Delivered by
+      <a href="https://www.nationalarchives.gov.uk/" class="govuk-header__link
+      govuk-header__link--tna"> The National Archives</a>
+    </div>
+  </div>
+</header>
 {% endblock %}
 
 {% block beforeContent %}
+
 <div class="govuk-phase-banner banner__container">
   <div>
     <p class="govuk-phase-banner__content">
       <strong class="govuk-tag govuk-phase-banner__content__tag">
         Beta
       </strong>
       <span class="govuk-phase-banner__text">
-        This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.
+       Help us to improve this service by completing our <a class="govuk-link" target="blank" href="#">feedback survey (opens in a new tab)<</a>
       </span>
     </p>
   </div>
@@ -139,6 +150,7 @@
     </div>
   {% endif %}
 </div>
+
 {% endblock %}
 
 {% block content %}

e2e_tests/test_header.py

@@ -0,0 +1,31 @@
+import pytest
+from playwright.sync_api import Page, expect
+
+# Define header link and URL
+
+header_link = [
+    (
+        "The National Archives",
+        "https://www.nationalarchives.gov.uk/",
+    ),
+]
+
+
+@pytest.fixture
+def setup_page(page: Page):
+    page.goto("/")
+    yield page
+
+
+@pytest.mark.parametrize("link_text, expected_url", header_link)
+def test_header_link(setup_page, link_text, expected_url):
+    # locate and click footer link as user would
+    setup_page.click(f'text="{link_text}"')
+
+    # Wait for navigation and check URL is correct
+    setup_page.wait_for_url(expected_url, timeout=5000)
+
+    # Assertions
+
+    # Check if the text of the link is contained within URL
+    expect(setup_page).to_have_url(expected_url)