Skip to content

Commit 81da6af

Browse files
alexluckettalexluckett
authored
Move phase banner to footer (#1106)
This is because the phase banner does not work with our masthead. See https://vickytnz.github.io/govuk-header-footer/ for our inspiration.
1 parent 236678c commit 81da6af

File tree

8 files changed

+84
-69
lines changed

8 files changed

+84
-69
lines changed

‎designer/server/src/common/templates/layouts/page.njk‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,14 @@
4747
{% endblock %}
4848

4949
{% block footer %}
50+
{% set feedbackRowHtml = "" %}
51+
52+
{% if ["alpha", "beta"].includes(config.phase) %}
53+
{% set feedbackRowHtml %}
54+
<strong class="govuk-tag govuk-phase-banner__content__tag">{{ config.phase | title }}</strong>This is a new service. Help us improve it and <a class="govuk-footer__link" href="mailto:[email protected]">give your feedback by email</a>.
55+
{% endset %}
56+
{% endif %}
57+
5058
{{ govukFooter({
5159
containerClasses: "app-width-container--wide",
5260
meta: {
@@ -63,7 +71,8 @@
6371
href: "https://www.gov.uk/help/privacy-notice",
6472
text: "Privacy"
6573
}
66-
]
74+
],
75+
html: feedbackRowHtml
6776
}
6877
}) }}
6978
{% endblock %}

‎designer/server/src/common/templates/layouts/page.test.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import upperFirst from 'lodash/upperFirst.js'
2+
3+
import { renderView } from '~/test/helpers/component-helpers.js'
4+
5+
const contextStub = {
6+
getAssetPath: () => 'dummy'
7+
}
8+
9+
describe('Phase banner', () => {
10+
const selectorPhaseBanner = '.govuk-footer__meta-custom'
11+
const selectorTag = '.govuk-tag'
12+
13+
it.each([
14+
{
15+
context: {
16+
...contextStub,
17+
config: { phase: 'alpha' }
18+
}
19+
},
20+
{
21+
context: {
22+
...contextStub,
23+
config: { phase: 'beta' }
24+
}
25+
}
26+
])(
27+
"should render for '$context.config.phase' phase (via config)",
28+
({ context }) => {
29+
renderView('layouts/page.njk', { context })
30+
31+
const $phaseBanner = document.querySelector(selectorPhaseBanner)
32+
const $phaseTag = $phaseBanner?.querySelector(selectorTag)
33+
34+
expect($phaseBanner).toBeInTheDocument()
35+
expect($phaseTag).toContainHTML(upperFirst(context.config.phase))
36+
}
37+
)
38+
39+
it("should not render for 'live' phase (via config)", () => {
40+
renderView('layouts/page.njk', {
41+
context: {
42+
...contextStub,
43+
config: { phase: 'live' }
44+
}
45+
})
46+
47+
const $phaseBanner = document.querySelector(selectorPhaseBanner)
48+
expect($phaseBanner).not.toBeInTheDocument()
49+
})
50+
51+
it('should not render by default', () => {
52+
renderView('layouts/page.njk', { context: contextStub })
53+
54+
const $phaseBanner = document.querySelector(selectorPhaseBanner)
55+
expect($phaseBanner).not.toBeInTheDocument()
56+
})
57+
})

‎designer/server/src/common/templates/partials/navigation.njk‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,3 @@
2828
signOutLink: "/auth/sign-out",
2929
homepageLink: "/"
3030
}) }}
31-
32-
{% if ["alpha", "beta"].includes(config.phase) %}
33-
<div class="govuk-width-container app-width-container--wide">
34-
{{ govukPhaseBanner({
35-
tag: { text: config.phase | title },
36-
html: 'This is a new service. Help us improve it and <a class="govuk-link" href="mailto:[email protected]">give your feedback by email</a>.'
37-
}) }}
38-
</div>
39-
{% endif %}

‎designer/server/src/common/templates/partials/navigation.test.js‎

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import upperFirst from 'lodash/upperFirst.js'
2-
31
import { renderView } from '~/test/helpers/component-helpers.js'
42

53
describe('Navigation partial', () => {
@@ -104,51 +102,4 @@ describe('Navigation partial', () => {
104102
expect($navigation).not.toBeInTheDocument()
105103
})
106104
})
107-
108-
describe('Phase banner', () => {
109-
const selectorPhaseBanner = '.govuk-phase-banner'
110-
const selectorTag = '.govuk-tag'
111-
112-
it.each([
113-
{
114-
context: {
115-
config: { phase: 'alpha' }
116-
}
117-
},
118-
{
119-
context: {
120-
config: { phase: 'beta' }
121-
}
122-
}
123-
])(
124-
"should render for '$context.config.phase' phase (via config)",
125-
({ context }) => {
126-
renderView('partials/navigation.njk', { context })
127-
128-
const $phaseBanner = document.querySelector(selectorPhaseBanner)
129-
const $phaseTag = $phaseBanner?.querySelector(selectorTag)
130-
131-
expect($phaseBanner).toBeInTheDocument()
132-
expect($phaseTag).toContainHTML(upperFirst(context.config.phase))
133-
}
134-
)
135-
136-
it("should not render for 'live' phase (via config)", () => {
137-
renderView('partials/navigation.njk', {
138-
context: {
139-
config: { phase: 'live' }
140-
}
141-
})
142-
143-
const $phaseBanner = document.querySelector(selectorPhaseBanner)
144-
expect($phaseBanner).not.toBeInTheDocument()
145-
})
146-
147-
it('should not render by default', () => {
148-
renderView('partials/navigation.njk')
149-
150-
const $phaseBanner = document.querySelector(selectorPhaseBanner)
151-
expect($phaseBanner).not.toBeInTheDocument()
152-
})
153-
})
154105
})

‎designer/server/src/createServer.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ describe('Server tests', () => {
8787

8888
await renderResponse(server, options)
8989

90-
const $phaseBanner = document.querySelector('.govuk-phase-banner')
90+
const $phaseBanner = document.querySelector('.govuk-footer__meta-custom')
9191
const $phaseBannerTag = $phaseBanner?.querySelector('.govuk-tag')
9292

9393
expect($phaseBanner).toBeInTheDocument()
@@ -106,7 +106,7 @@ describe('Server tests', () => {
106106

107107
await renderResponse(server, options)
108108

109-
const $phaseBanner = document.querySelector('.govuk-phase-banner')
109+
const $phaseBanner = document.querySelector('.govuk-footer__meta-custom')
110110
expect($phaseBanner).not.toBeInTheDocument()
111111
})
112112

@@ -121,7 +121,7 @@ describe('Server tests', () => {
121121

122122
await renderResponse(server, options)
123123

124-
const $phaseBanner = document.querySelector('.govuk-phase-banner')
124+
const $phaseBanner = document.querySelector('.govuk-footer__meta-custom')
125125
expect($phaseBanner).not.toBeInTheDocument()
126126
})
127127

‎designer/server/src/routes/account/__snapshots__/account.test.js.snap‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,6 @@ exports[`Account profile route /auth/account route displays user profile 1`] = `
162162
163163
164164
165-
166165
<main class="govuk-main-wrapper govuk-main-wrapper--masthead" id="main-head-content">
167166
168167
@@ -220,6 +219,8 @@ exports[`Account profile route /auth/account route displays user profile 1`] = `
220219
221220
</main>
222221
222+
223+
223224
<footer class="govuk-footer">
224225
<div class="govuk-width-container app-width-container--wide">
225226
<div class="govuk-footer__meta">

‎designer/server/src/routes/forms/__snapshots__/create.test.js.snap‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,6 @@ exports[`Form create routes GET '"/create/organisation"' matches test snapshot 1
150150
</header>
151151
152152
153-
154153
<div class="govuk-width-container app-width-container--wide">
155154
<a href="/create/title" class="govuk-back-link">Back</a>
156155
@@ -244,6 +243,8 @@ exports[`Form create routes GET '"/create/organisation"' matches test snapshot 1
244243
245244
</main>
246245
246+
247+
247248
<footer class="govuk-footer">
248249
<div class="govuk-width-container app-width-container--wide">
249250
<div class="govuk-footer__meta">
@@ -458,7 +459,6 @@ exports[`Form create routes GET '"/create/team"' matches test snapshot 1`] = `
458459
</header>
459460
460461
461-
462462
<div class="govuk-width-container app-width-container--wide">
463463
<a href="/create/organisation" class="govuk-back-link">Back</a>
464464
@@ -518,6 +518,8 @@ exports[`Form create routes GET '"/create/team"' matches test snapshot 1`] = `
518518
519519
</main>
520520
521+
522+
521523
<footer class="govuk-footer">
522524
<div class="govuk-width-container app-width-container--wide">
523525
<div class="govuk-footer__meta">
@@ -732,7 +734,6 @@ exports[`Form create routes GET '"/create/title"' matches test snapshot 1`] = `
732734
</header>
733735
734736
735-
736737
<div class="govuk-width-container app-width-container--wide">
737738
<a href="/library" class="govuk-back-link">Back to forms library</a>
738739
@@ -769,6 +770,8 @@ exports[`Form create routes GET '"/create/title"' matches test snapshot 1`] = `
769770
770771
</main>
771772
773+
774+
772775
<footer class="govuk-footer">
773776
<div class="govuk-width-container app-width-container--wide">
774777
<div class="govuk-footer__meta">

‎designer/server/src/routes/manage/__snapshots__/user.test.js.snap‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,6 @@ exports[`Create and edit user routes GET /manage/users should render view when c
162162
163163
164164
165-
166165
<main class="govuk-main-wrapper govuk-main-wrapper--masthead" id="main-head-content">
167166
168167
@@ -252,6 +251,8 @@ exports[`Create and edit user routes GET /manage/users should render view when c
252251
253252
</main>
254253
254+
255+
255256
<footer class="govuk-footer">
256257
<div class="govuk-width-container app-width-container--wide">
257258
<div class="govuk-footer__meta">
@@ -478,7 +479,6 @@ exports[`Create and edit user routes GET /manage/users should render view when d
478479
479480
480481
481-
482482
<main class="govuk-main-wrapper govuk-main-wrapper--masthead" id="main-head-content">
483483
484484
<form method="post" novalidate>
@@ -538,6 +538,8 @@ exports[`Create and edit user routes GET /manage/users should render view when d
538538
539539
</main>
540540
541+
542+
541543
<footer class="govuk-footer">
542544
<div class="govuk-width-container app-width-container--wide">
543545
<div class="govuk-footer__meta">
@@ -764,7 +766,6 @@ exports[`Create and edit user routes GET /manage/users should render view when e
764766
765767
766768
767-
768769
<main class="govuk-main-wrapper govuk-main-wrapper--masthead" id="main-head-content">
769770
770771
@@ -863,6 +864,8 @@ exports[`Create and edit user routes GET /manage/users should render view when e
863864
864865
</main>
865866
867+
868+
866869
<footer class="govuk-footer">
867870
<div class="govuk-width-container app-width-container--wide">
868871
<div class="govuk-footer__meta">

0 commit comments

Comments
 (0)