PPHA 516: Pilot Give Feedback phase banner (#361)

# What is the change?

* Created a phase banner jinja template
* Added phase banner to the header in layout.jinja 

# Why are we making this change?

To indicate to users that this service is in Pilot phase at the top of
the page using a GDS style phase banner.

<img width="1512" height="663" alt="image"
src="https://github.com/user-attachments/assets/d68f3007-71e9-4edf-86cc-f6a071f1f2ef"
/>

Author: stephhou

features/static.feature

@@ -2,15 +2,23 @@
 Feature: Static Pages
   Scenario: The static pages are available without logging in
     When I go to "/cookies"
-    Then I see a page title "NHS check if you need a lung scan cookies policy"
+    Then I see a phase header "Pilot"
+    And I see a link named "feedback"
+    And I see a page title "NHS check if you need a lung scan cookies policy"
     When I go to "/privacy-policy"
-    Then I see a page title "NHS check if you need a lung scan privacy policy"
+    Then I see a phase header "Pilot"
+    And I see a link named "feedback"
+    And I see a page title "NHS check if you need a lung scan privacy policy"
 
   Scenario: The static pages are available when logged in and accessible
     Given I am logged in
     When I go to "/cookies"
-    Then there are no accessibility violations
+    Then I see a phase header "Pilot"
+    And I see a link named "feedback"
+    And there are no accessibility violations
     And I see a page title "NHS check if you need a lung scan cookies policy"
     When I go to "/privacy-policy"
-    Then there are no accessibility violations
+    Then I see a phase header "Pilot"
+    And I see a link named "feedback"
+    And there are no accessibility violations
     And I see a page title "NHS check if you need a lung scan privacy policy"

features/steps/page_assertion_steps.py

@@ -14,3 +14,13 @@ def then_i_see_a_back_link_to(context, url):
 @then(u'I see a page title "{title}"')
 def then_i_see_a_page_title(context, title):
     expect(context.page.locator('h1')).to_have_text(title)
+
+@then(u'I see a phase header "{phase}"')
+def then_i_see_a_phase_header(context, phase):
+    expect(context.page.locator('.lung-nhsuk-phase-banner__text')).to_have_count(1)
+    expect(context.page.locator('.lung-nhsuk-phase-banner__content .nhsuk-tag')).to_have_text(phase)
+
+@then(u'I see a link named "{link_text}"')
+def then_i_see_a_link_named(context, link_text):
+    link = context.page.locator(f'a:has-text("{link_text}")')
+    expect(link).to_have_count(1)

lung_cancer_screening/assets/sass/components/_phase_banner.scss

@@ -0,0 +1,16 @@
+.lung-nhsuk-phase-banner__container{
+  border-bottom: 1px solid var(--nhsuk-grey-3-colour);
+  padding-bottom: 10px;
+  padding-top: 10px;
+}
+
+.lung-nhsuk-phase-banner__content {
+  display: table;
+  margin: 0;
+}
+
+.lung-nhsuk-phase-banner__text {
+  display: table-cell;
+  vertical-align: middle;
+  padding-left: 10px;
+}

lung_cancer_screening/assets/sass/main.scss

@@ -4,4 +4,5 @@
 // Components that are not in the NHS.UK frontend library
 @forward "components/multi_field_input";
 
+@forward 'components/phase_banner';
 @forward "components/numbered_lists"

lung_cancer_screening/core/jinja2/layout.jinja

@@ -30,6 +30,9 @@
       ] if request.user.is_authenticated else []
     }
   }) }}
+
+  {% include 'phase_banner.jinja' %}
+
 {% endblock header %}
 
 {% block beforeContent %}

lung_cancer_screening/core/jinja2/phase_banner.jinja

@@ -0,0 +1,13 @@
+<section role="region" aria-label="Service phase" class="nhsuk-width-container">
+  <div class="lung-nhsuk-phase-banner__container">
+    <div class="nhsuk-phase-banner">
+      <p class="lung-nhsuk-phase-banner__content">
+        <span class="nhsuk-tag nhsuk-tag__content nhsuk-tag--blue">Pilot</span>
+        <span class="lung-nhsuk-phase-banner__text nhsuk-body-s">
+          We are testing a new service &ndash; your <a
+            href="https://feedback.digital.nhs.uk/jfe/form/SV_6V8dAlFT0sxJnzo" target="_blank"
+            rel="noopener">feedback</a> will help us improve it.</span>
+      </p>
+    </div>
+  </div>
+</section>