Skip to content

Commit

Permalink
Merge pull request #31 from nationalarchives/AYR-390/footer-component
Browse files Browse the repository at this point in the history
Ayr 390/footer component
  • Loading branch information
colinbowen authored Nov 9, 2023
2 parents c30912c + f7ce87b commit 08a3f9e
Show file tree
Hide file tree
Showing 6 changed files with 211 additions and 21 deletions.
5 changes: 5 additions & 0 deletions app/main/routes.py
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,11 @@ def how_to_use():
return render_template("how-to-use-this-service.html")


@bp.route("/terms-of-use", methods=["GET"])
def terms_of_use():
return render_template("terms-of-use.html")


@bp.app_errorhandler(HTTPException)
def http_exception(error):
return render_template(f"{error.code}.html"), error.code
Expand Down
12 changes: 12 additions & 0 deletions app/static/logos/the-national-archives-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 57 additions & 0 deletions app/static/src/css/footer.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@


/* CSS for Footer */


.govuk-footer {
padding-bottom: 40px;
}

.govuk-footer__tna-logo {
width: 100px;
}

.govuk-footer__meta {
margin: 0;
align-items: center;
gap: 40px;
}

.govuk-footer__meta-item {
display: block;
margin: 0;
}

.govuk-footer__inline-list-item {
margin-bottom: 10px;
}

@media screen and (max-width: 640px) {
.govuk-footer__meta {
flex-direction: column;
}

.govuk-footer__link {
order: 2;
}
.govuk-footer__meta-item--grow {
flex-basis: auto;
}

.govuk-footer__inline-list-item {
display:block;
margin-right: 0;
margin-bottom: 0;
text-align:center;
padding: 10px 0;
}

.govuk-footer__licence-logo{
margin:0 auto 10px;
display:block;
}

.govuk-footer__licence-description {
text-align: center;
}
}
83 changes: 62 additions & 21 deletions app/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<!-- custom css stylesheet -->
<link rel="stylesheet" type="text/css" src="{{ url_for('static', filename='poc-search.css') }}" />
<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='footer.css') }}" />
<!-- custom css stylesheet end -->
{% assets "css" %}<link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
{% endblock %}
Expand Down Expand Up @@ -144,28 +144,69 @@
{% endblock %}

{% block footer %}
{{ govukFooter({
'meta': {
'items': [
{
'href': url_for('main.accessibility'),
'text': "Accessibility"
},
{
'href': url_for('main.cookies'),
'text': "Cookies"
},
{
'href': url_for('main.privacy'),
'text': "Privacy"
}
],
'html': 'Built by <a href="' + config['DEPARTMENT_URL'] +'" class="govuk-footer__link">' + config['DEPARTMENT_NAME'] + '</a>'
}
}) }}
<footer class="govuk-footer" role="contentinfo">
<div class="govuk-width-container">
<div class="govuk-footer__meta">
<div class="govuk-footer__link">
<img class="govuk-footer__tna-logo"
src="{{url_for('static', filename='logos/the-national-archives-logo.svg')}}" alt="The National Archives Logo">
</div>
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="govuk-footer__inline-list">
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">
How to use this service
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="{{ url_for('main.terms_of_use')}}">
Terms of use
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="{{ url_for('main.privacy')}}">
Privacy
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="{{ url_for('main.cookies')}}">
Cookies policy
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="{{ url_for('main.accessibility')}}">
Accessibility
</a>
</li>
</ul>
<svg
aria-hidden="true"
focusable="false"
class="govuk-footer__licence-logo"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 483.2 195.7"
height="17"
width="41">
<path
fill="currentColor"
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
</svg>
<span class="govuk-footer__licence-description">
All content is available under the
<a
class="govuk-footer__link"
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
rel="license">Open Government Licence v3.0</a>, except where otherwise stated
</span>
</div>

</div>

</div>
</footer>
{% endblock %}


{% block bodyEnd %}
<!--[if gt IE 8]><!-->
<script src="{{ url_for('static', filename='govuk-frontend-4.7.0.min.js') }}"> </script>
Expand Down
23 changes: 23 additions & 0 deletions app/templates/main/terms-of-use.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{% extends "base.html" %}


{%- from 'govuk_frontend_jinja/components/back-link/macro.html' import govukBackLink -%}

{% block pageTitle %}Terms of use – {{config['SERVICE_NAME']}} – GOV.UK{% endblock %}

{% block beforeContent %}
{{ super() }}
{{ govukBackLink({
'text': "Back",
'href': url_for('main.index')
}) }}
{% endblock %}

{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ super() }}
<h1 class="govuk-heading-xl">Terms of use</h1>
</div>
</div>
{% endblock %}
52 changes: 52 additions & 0 deletions e2e_tests/test_footer.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import pytest
from playwright.sync_api import Page, expect

# Define list of footer links and their expected URLS

footer_links = [
(
"Terms of use",
"/terms-of-use",
"Terms of use – AYR - Access Your Records – GOV.UK ",
),
(
"Privacy",
"/privacy",
"Privacy notice – AYR - Access Your Records – GOV.UK ",
),
(
"Cookies policy",
"/cookies",
"Cookies – AYR - Access Your Records – GOV.UK",
),
(
"Accessibility",
"/accessibility",
"Accessibility statement – AYR - Access Your Records – GOV.UK",
),
]


@pytest.fixture
def setup_page(page: Page):
page.goto("/")
yield page


@pytest.mark.parametrize(
"link_text, expected_url, expected_title", footer_links
)
def test_footer_links(setup_page, link_text, expected_url, expected_title):
# 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 title of the page

expect(setup_page).to_have_title(expected_title)

0 comments on commit 08a3f9e

Please sign in to comment.