Skip to content

PP-14423 update pay product page with service navigation #894

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Pippa101 merged 1 commit into from
Nov 7, 2025
Merged

PP-14423 update pay product page with service navigation #894

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ Check the `build` directory for the output.

Look at the CSS for the individual components for usage examples and notes.

- [Breadcrumbs](source/stylesheets/modules/_breadcrumbs.scss)
- [Content Section](source/stylesheets/modules/_content-section.scss)
- [Full Width Form](source/stylesheets/modules/_full-width-form.scss)
- [GOV.UK Logo](source/stylesheets/modules/_govuk-logo.scss)
Expand Down
50 changes: 35 additions & 15 deletions config.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
# Per-page layout changes:
#
# With no layout
page "/*.xml", layout: false
page "/*.json", layout: false
page "/*.txt", layout: false
page '/*.xml', layout: false
page '/*.json', layout: false
page '/*.txt', layout: false

# With alternative layout
# page "/path/to/file.html", layout: :otherlayout
Expand All @@ -23,15 +23,15 @@
activate :livereload
end

config[:css_dir] = "stylesheets"
config[:images_dir] = "images"
config[:js_dir] = "javascripts"
config[:css_dir] = 'stylesheets'
config[:images_dir] = 'images'
config[:js_dir] = 'javascripts'

ignore "**/javascripts/*test*.js"
ignore '**/javascripts/*test*.js'

# Google analytics
configure :development do
set :analytics, ""
set :analytics, ''
set :new_cookie_banner, true
end

Expand All @@ -56,21 +56,41 @@ def tel_to(text, className)
groups = text.to_s.scan(/(?:^\+)?\d+/)
link_to text, "tel:#{groups.join ''}", className
end

def inherit_active_state(nav_title, current_page_title)
if nav_title == 'Features' &&
[
'Cost benefits of Pay',
'GOV.UK payment pages',
'API integration',
'Recurring payments',
'Take payments by phone or post',
'GOV.UK Pay’s Payment Service Provider',
'Direct Debit',
'Apple Pay and Google Pay',
'Roadmap',
'Security and compliance',
].include?(current_page_title)
true
else
false
end
end
end

activate :sprockets do |config|
config.expose_middleman_helpers = true
end

sprockets.append_path File.join(root, "node_modules/govuk-frontend/dist/")
sprockets.append_path File.join(root, "node_modules/gaap-analytics/build")
sprockets.append_path File.join(root, 'node_modules/govuk-frontend/dist/')
sprockets.append_path File.join(root, 'node_modules/gaap-analytics/build')

redirect "security.txt.html", to: "https://vdp.cabinetoffice.gov.uk/.well-known/security.txt"
redirect ".well-known/security.txt.html", to: "https://vdp.cabinetoffice.gov.uk/.well-known/security.txt"
redirect 'security.txt.html', to: 'https://vdp.cabinetoffice.gov.uk/.well-known/security.txt'
redirect '.well-known/security.txt.html', to: 'https://vdp.cabinetoffice.gov.uk/.well-known/security.txt'

redirect "contact/index.html", to: "/support/"
redirect "features.html", to: "/using-govuk-pay/"
redirect "payment-links.html", to: "/govuk-payment-pages/"
redirect 'contact/index.html', to: '/support/'
redirect 'features.html', to: '/using-govuk-pay/'
redirect 'payment-links.html', to: '/govuk-payment-pages/'

# https://middlemanapp.com/advanced/pretty-urls/
activate :directory_indexes
Expand Down
1 change: 0 additions & 1 deletion source/accessibility-statement.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ title: Accessibility statement for GOV.UK Pay
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>
<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
Expand Down
2 changes: 0 additions & 2 deletions source/api-integration.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: API integration
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<%= partial 'partials/features-sub-nav.html.erb', locals: { current_page: current_page.data.title } %>
Expand Down
2 changes: 0 additions & 2 deletions source/apple-pay-and-google-pay.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Apple Pay and Google Pay
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<%= partial 'partials/features-sub-nav.html.erb', locals: { current_page: current_page.data.title } %>
Expand Down
2 changes: 0 additions & 2 deletions source/blue-badge-scheme.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Blue Badge scheme
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds" data-click-events data-click-category="Content" data-click-action="Internal link clicked">
Expand Down
2 changes: 0 additions & 2 deletions source/cookies.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Cookies
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
Expand Down
2 changes: 0 additions & 2 deletions source/cost-benefits-of-pay.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Cost benefits of Pay
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<%= partial 'partials/features-sub-nav.html.erb', locals: { current_page: current_page.data.title } %>
Expand Down
2 changes: 0 additions & 2 deletions source/direct-debit.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Direct Debit
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<%= partial 'partials/features-sub-nav.html.erb', locals: { current_page: current_page.data.title } %>
Expand Down
2 changes: 0 additions & 2 deletions source/getstarted.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Get started
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
Expand Down
2 changes: 0 additions & 2 deletions source/govuk-payment-pages.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: GOV.UK payment pages
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<%= partial 'partials/features-sub-nav.html.erb', locals: { current_page: current_page.data.title } %>
Expand Down
12 changes: 1 addition & 11 deletions source/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,7 @@ description: GOV.UK Pay is for central government, local authorities, police and
---

<div class="masthead">
<div class="hero hero--breaded">
<div class="govuk-breadcrumbs breadcrumbs-hero" data-click-events data-click-category="Header" data-click-action="Breadcrumb clicked">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="https://www.gov.uk/service-toolkit#gov-uk-services">GOV.UK services</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#main-content" aria-current="page">GOV.UK&nbsp;Pay</a>
</li>
</ol>
</div>
<div class="hero">
<div class="hero__content">
<div class="hero__body">
<h1 class="hero__title">The best way to take payments for public services</h1>
Expand Down
49 changes: 29 additions & 20 deletions source/layouts/layout.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,26 +87,35 @@
<span class="govuk-header__product-name">Pay</span>
</a>
</div>
<div class="govuk-header__content">
<nav aria-label="Custom navigation label" class="govuk-header__navigation">
<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>Menu</button>

<ul id="navigation" class="govuk-header__navigation-list">
<%
{
'Features' => ['using-govuk-pay', true, 'Using GOV.UK&nbsp;Pay'],
'Get started' => ['getstarted', true, 'Get started'],
'Documentation' => ['https://docs.payments.service.gov.uk', false, ''],
'Support' => ['support', true, 'Support'],
'Sign in' => ['https://selfservice.payments.service.gov.uk/login', false, '']
}.each do |title, url|
%>
<li class="govuk-header__navigation-item<% if url[2] == current_page.data.title %> govuk-header__navigation-item--active<% end %>">
<%= link_to title, url[0], class: 'govuk-header__link', relative: url[1] %>
</li>
<% end %>
</ul>
</nav>
</div>
<div
class="<%= current_page.url == '/' ? 'govuk-service-navigation govuk-service-navigation--inverse' : 'govuk-service-navigation' %>"
data-module="govuk-service-navigation"
>
<div class="govuk-width-container">
<div class="govuk-service-navigation__container">
<nav aria-label="Menu" class="govuk-service-navigation__wrapper">
<button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>Menu</button>
<ul class="govuk-service-navigation__list" id="navigation">
<%
{
'Get started' => ['getstarted', true, 'Get started'],
'Features' => ['using-govuk-pay', true, 'Using GOV.UK Pay'],
'Documentation' => ['https://docs.payments.service.gov.uk', false, ''],
'Support' => ['support', true, 'Support'],
'Sign in' => ['https://selfservice.payments.service.gov.uk/login', false, '']
}.each do |title, url|
%>
<li
class="govuk-service-navigation__item<% if url[2] == current_page.data.title || inherit_active_state(title,current_page.data.title) %> govuk-service-navigation__item--active<% end %>"
aria-current="true"
>
<%= link_to title, url[0], class: 'govuk-service-navigation__link', relative: url[1] %>
</li>
<% end %>
</ul>
</nav>
</div>
</div>
</div>
</header>
Expand Down
13 changes: 0 additions & 13 deletions source/partials/_breadcrumb.html.erb
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions source/payment-service-provider.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: GOV.UK Pay’s Payment Service Provider
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<%= partial 'partials/features-sub-nav.html.erb', locals: { current_page: current_page.data.title } %>
Expand Down
2 changes: 0 additions & 2 deletions source/performance.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Performance data
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main class="govuk-main-wrapper govuk-!-margin-top-4" id="main-content">
<div class="govuk-grid-row govuk-!-margin-bottom-4">
<div class="govuk-grid-column-two-thirds">
Expand Down
2 changes: 0 additions & 2 deletions source/police.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Using GOV.UK Pay to take and process payments for the police force
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds" data-click-events data-click-category="Content" data-click-action="Internal link clicked">
Expand Down
2 changes: 0 additions & 2 deletions source/privacy.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Privacy notice
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third sticky">
Expand Down
2 changes: 0 additions & 2 deletions source/recaptcha-notice.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: reCAPTCHA notice
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third sticky">
Expand Down
2 changes: 0 additions & 2 deletions source/recurring-payments.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Recurring payments
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<%= partial 'partials/features-sub-nav.html.erb', locals: { current_page: current_page.data.title } %>
Expand Down
2 changes: 0 additions & 2 deletions source/required-responsible-person-and-director-information.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Required Responsible person and director information
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
Expand Down
2 changes: 0 additions & 2 deletions source/roadmap.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Roadmap
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<%= partial 'partials/features-sub-nav.html.erb', locals: { current_page: current_page.data.title } %>
Expand Down
2 changes: 0 additions & 2 deletions source/security.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Security and compliance
---

<div class="govuk-width-container">
<%= partial 'partials/breadcrumb.html.erb' %>

<main id="main-content" class="govuk-main-wrapper" role="main">
<div class="govuk-grid-row">
<%= partial 'partials/features-sub-nav.html.erb', locals: { current_page: current_page.data.title } %>
Expand Down
14 changes: 0 additions & 14 deletions source/stylesheets/modules/_breadcrumbs.scss
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions source/stylesheets/modules/_hero.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,6 @@
color: govuk-colour('white');
padding: govuk-spacing(5) 0;

&--breaded {
padding-top: 0;
}

a:link,
a:visited {
color: govuk-colour('white');
Expand Down
Loading
Loading