Skip to content

Commit 2fb0b64

Browse files
AshGDSAshGDS
committed
Add multi level nav experiment variants
1 parent 6bfb870 commit 2fb0b64

6 files changed

Lines changed: 321 additions & 17 deletions

File tree

‎Procfile.dev‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
web: DEBUGGER=true bin/rails server -p 3005 --restart
1+
web: DEBUGGER=false bin/rails server -p 3005 --restart
22
css: bin/rails dartsass:watch

‎app/assets/stylesheets/application.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
@import "govuk_publishing_components/components/search";
4949
@import "govuk_publishing_components/components/search-with-autocomplete";
5050
@import "govuk_publishing_components/components/select";
51+
@import "govuk_publishing_components/components/service-navigation";
5152
@import "govuk_publishing_components/components/share-links";
5253
@import "govuk_publishing_components/components/signup-link";
5354
@import "govuk_publishing_components/components/single-page-notification-button";

‎app/views/worldwide_corporate_information_page/show.html.erb‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,79 @@
1+
<% if params["nav"] == "service" %>
2+
<% content_for :before_content do %>
3+
<%= render "govuk_publishing_components/components/service_navigation", {
4+
navigation_items: [
5+
{
6+
text: "British Embassy Paris",
7+
href: "/world/organisations/british-embassy-paris?nav=service",
8+
},
9+
{
10+
text: "Office opening times",
11+
href: "/world/organisations/british-embassy-paris/office/british-embassy-paris?nav=service",
12+
},
13+
{
14+
text: "Complaints procedure",
15+
href: "/world/organisations/british-embassy-paris/about/complaints-procedure?nav=service",
16+
active: true,
17+
},
18+
{
19+
text: "Working for British Embassy Paris",
20+
href: "/world/organisations/british-embassy-paris/about/recruitment?nav=service",
21+
},
22+
],
23+
full_width: false,
24+
} %>
25+
<% end %>
26+
<% end %>
27+
28+
<% if params["nav"] == "missions" %>
29+
<% content_for :before_content do %>
30+
<%= render partial: "worldwide_organisation/navigation", locals: { :block => OpenStruct.new({ :name => "British Embassy Paris",
31+
:links => [
32+
{ text: "About British Embassy Paris",
33+
href: "/world/organisations/british-embassy-paris?nav=missions" },
34+
{ text: "Office opening times",
35+
href: "/world/organisations/british-embassy-paris/office/british-embassy-paris?nav=missions" },
36+
{ text: "Complaints procedure",
37+
href: "/world/organisations/british-embassy-paris/about/complaints-procedure?nav=missions" },
38+
{ text: "Working for British Embassy Paris",
39+
href: "/world/organisations/british-embassy-paris/about/recruitment?nav=missions" },
40+
41+
] }) } %>
42+
<% end %>
43+
<% end %>
44+
45+
<% if params["nav"] == "tabs" %>
46+
<% content_for :before_content do %>
47+
<div class="govuk-width-container govuk-!-margin-top-2">
48+
<%= render "govuk_publishing_components/components/tabs", {
49+
as_links: true,
50+
tabs: [
51+
{
52+
href: "/world/organisations/british-embassy-paris?nav=tabs",
53+
label: "British Embassy Paris",
54+
active: false,
55+
},
56+
{
57+
href: "/world/organisations/british-embassy-paris/office/british-embassy-paris?nav=tabs",
58+
label: "Office opening times",
59+
active: false,
60+
},
61+
{
62+
href: "/world/organisations/british-embassy-paris/about/complaints-procedure?nav=tabs",
63+
label: "Complaints procedure",
64+
active: true,
65+
},
66+
{
67+
href: "/world/organisations/british-embassy-paris/about/recruitment?nav=tabs",
68+
label: "Work for this embassy",
69+
active: false,
70+
},
71+
],
72+
} %>
73+
</div>
74+
<% end %>
75+
<% end %>
76+
177
<%= render partial: "worldwide_organisation/header", locals: {
278
worldwide_organisation: @presenter.worldwide_organisation,
379
show_header_title: false,
@@ -8,6 +84,18 @@
884
<%= render "govuk_publishing_components/components/contents_list",
985
contents: @presenter.headers_for_contents_list_component,
1086
underline_links: true %>
87+
<% if params["nav"] == "list" %>
88+
<h2 class="govuk-heading-s">In this section</h2>
89+
<ul class="gem-c-list govuk-list">
90+
<li><a class="govuk-link" href="/world/organisations/british-embassy-paris?nav=list">British Embassy Paris</a>
91+
<ul class="gem-c-list govuk-list govuk-list--bullet govuk-!-margin-left-2">
92+
<li><a class='govuk-link' href='/world/organisations/british-embassy-paris/office/british-embassy-paris?nav=list'>Office opening times</a></li>
93+
<li>Complaints Procedure</li>
94+
<li><a class='govuk-link' href='/world/organisations/british-embassy-paris/about/recruitment?nav=list'>Working for British Embassy Paris</a></li>
95+
</ul>
96+
</li>
97+
</ul>
98+
<% end %>
1199
</div>
12100

13101
<div class="govuk-grid-column-two-thirds">

‎app/views/worldwide_office/show.html.erb‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,82 @@
22
<%= stylesheet_link_tag "views/_worldwide-organisation", media: "all" %>
33
<% end %>
44

5+
<% if params["nav"] == "service" %>
6+
<% content_for :before_content do %>
7+
<%= render "govuk_publishing_components/components/service_navigation", {
8+
navigation_items: [
9+
{
10+
text: "British Embassy Paris",
11+
href: "/world/organisations/british-embassy-paris?nav=service",
12+
},
13+
{
14+
text: "Office opening times",
15+
href: "/world/organisations/british-embassy-paris/office/british-embassy-paris?nav=service",
16+
active: true,
17+
},
18+
{
19+
text: "Complaints procedure",
20+
href: "/world/organisations/british-embassy-paris/about/complaints-procedure?nav=service",
21+
},
22+
{
23+
text: "Working for British Embassy Paris",
24+
href: "/world/organisations/british-embassy-paris/about/recruitment?nav=service",
25+
},
26+
],
27+
full_width: false,
28+
} %>
29+
<% end %>
30+
<% end %>
31+
32+
<% if params["nav"] == "missions" %>
33+
<% content_for :before_content do %>
34+
<%= render partial: "worldwide_organisation/navigation", locals: { :block => OpenStruct.new({ :name => "British Embassy Paris",
35+
:links => [
36+
{ text: "About British Embassy Paris",
37+
href: "/world/organisations/british-embassy-paris?nav=missions" },
38+
{ text: "Office opening times",
39+
href: "/world/organisations/british-embassy-paris/office/british-embassy-paris?nav=missions" },
40+
{ text: "Complaints procedure",
41+
href: "/world/organisations/british-embassy-paris/about/complaints-procedure?nav=missions" },
42+
{ text: "Working for British Embassy Paris",
43+
href: "/world/organisations/british-embassy-paris/about/recruitment?nav=missions" },
44+
45+
] }) } %>
46+
<% end %>
47+
<% end %>
48+
49+
<% if params["nav"] == "tabs" %>
50+
<% content_for :before_content do %>
51+
<div class="govuk-width-container govuk-!-margin-top-2">
52+
<%= render "govuk_publishing_components/components/tabs", {
53+
as_links: true,
54+
tabs: [
55+
{
56+
href: "/world/organisations/british-embassy-paris?nav=tabs",
57+
label: "British Embassy Paris",
58+
active: false,
59+
},
60+
{
61+
href: "/world/organisations/british-embassy-paris/office/british-embassy-paris?nav=tabs",
62+
label: "Office opening times",
63+
active: true,
64+
},
65+
{
66+
href: "/world/organisations/british-embassy-paris/about/complaints-procedure?nav=tabs",
67+
label: "Complaints procedure",
68+
active: false,
69+
},
70+
{
71+
href: "/world/organisations/british-embassy-paris/about/recruitment?nav=tabs",
72+
label: "Work for this embassy",
73+
active: false,
74+
},
75+
],
76+
} %>
77+
</div>
78+
<% end %>
79+
<% end %>
80+
581
<%= render partial: "worldwide_organisation/header", locals: {
682
worldwide_organisation: @presenter.worldwide_organisation,
783
show_header_title: false,
@@ -12,6 +88,18 @@
1288
<%= render "govuk_publishing_components/components/contents_list",
1389
contents: @presenter.headers_for_contents_list_component,
1490
underline_links: true %>
91+
<% if params["nav"] == "list" %>
92+
<h2 class="govuk-heading-s">In this section</h2>
93+
<ul class="gem-c-list govuk-list">
94+
<li><a class="govuk-link" href="/world/organisations/british-embassy-paris?nav=list">British Embassy Paris</a>
95+
<ul class="gem-c-list govuk-list govuk-list--bullet govuk-!-margin-left-2">
96+
<li>Office opening times</li>
97+
<li><a class='govuk-link' href='/world/organisations/british-embassy-paris/about/complaints-procedure?nav=list'>Complaints Procedure</a></li>
98+
<li><a class='govuk-link' href='/world/organisations/british-embassy-paris/about/recruitment?nav=list'>Working for British Embassy Paris</a></li>
99+
</ul>
100+
</li>
101+
</ul>
102+
<% end %>
15103
</div>
16104

17105
<div class="govuk-grid-column-two-thirds">

‎app/views/worldwide_organisation/_navigation.html.erb‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<%= stylesheet_link_tag "views/_landing_page", media: "all" %>
2+
<div class="main-nav" data-module="main-navigation">
3+
<h2 class="govuk-visually-hidden" id="main-navigation-heading">Secondary navigation menu</h2>
4+
<div class="main-nav__button-container main-nav__button-container--collapsed js-main-nav__button-container">
5+
<div class="govuk-width-container">
6+
<% button_text = block.name || "Menu" %>
7+
<%= tag.button button_text,
8+
type: "button",
9+
class: "main-nav__button main-nav__button--no-js govuk-link govuk-link--no-underline",
10+
aria: { expanded: "false", controls: "main-nav-container" },
11+
data: {
12+
module: "ga4-event-tracker",
13+
ga4_expandable: "",
14+
ga4_event: {
15+
event_name: "select_content",
16+
index_section: 1,
17+
index_section_count: 1,
18+
type: "secondary header",
19+
section: button_text,
20+
}.to_json,
21+
} %>
22+
</div>
23+
</div>
24+
<div class="main-nav__nav-container main-nav__nav-container--js-hidden govuk-width-container js-main-nav__nav-container" id="main-nav-container">
25+
<nav aria-labelledby="main-navigation-heading" data-module="ga4-link-tracker">
26+
<% ga4_index_section_count = block.links.length %>
27+
<ul class="main-nav__list">
28+
<% block.links.each_with_index do |link, link_index| %>
29+
<li class="main-nav__list-item">
30+
<%= link_to link[:text],
31+
link[:href],
32+
class: "govuk-link govuk-link--no-underline govuk-link--no-visited-state" %>
33+
</li>
34+
<% end %>
35+
</ul>
36+
</nav>
37+
</div>
38+
</div>

‎app/views/worldwide_organisation/show.html.erb‎

Lines changed: 105 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,82 @@
22
<%= stylesheet_link_tag "views/_worldwide-organisation", media: "all" %>
33
<% end %>
44

5+
<% if params["nav"] == "service" %>
6+
<% content_for :before_content do %>
7+
<%= render "govuk_publishing_components/components/service_navigation", {
8+
navigation_items: [
9+
{
10+
text: "British Embassy Paris",
11+
href: "/world/organisations/british-embassy-paris?nav=service",
12+
active: true,
13+
},
14+
{
15+
text: "Office opening times",
16+
href: "/world/organisations/british-embassy-paris/office/british-embassy-paris?nav=service",
17+
},
18+
{
19+
text: "Complaints procedure",
20+
href: "/world/organisations/british-embassy-paris/about/complaints-procedure?nav=service",
21+
},
22+
{
23+
text: "Working for British Embassy Paris",
24+
href: "/world/organisations/british-embassy-paris/about/recruitment?nav=service",
25+
},
26+
],
27+
full_width: false,
28+
} %>
29+
<% end %>
30+
<% end %>
31+
32+
<% if params["nav"] == "missions" %>
33+
<% content_for :before_content do %>
34+
<%= render partial: "worldwide_organisation/navigation", locals: { :block => OpenStruct.new({ :name => "British Embassy Paris",
35+
:links => [
36+
{ text: "About British Embassy Paris",
37+
href: "/world/organisations/british-embassy-paris?nav=missions" },
38+
{ text: "Office opening times",
39+
href: "/world/organisations/british-embassy-paris/office/british-embassy-paris?nav=missions" },
40+
{ text: "Complaints procedure",
41+
href: "/world/organisations/british-embassy-paris/about/complaints-procedure?nav=missions" },
42+
{ text: "Working for British Embassy Paris",
43+
href: "/world/organisations/british-embassy-paris/about/recruitment?nav=missions" },
44+
45+
] }) } %>
46+
<% end %>
47+
<% end %>
48+
49+
<% if params["nav"] == "tabs" %>
50+
<% content_for :before_content do %>
51+
<div class="govuk-width-container govuk-!-margin-top-2">
52+
<%= render "govuk_publishing_components/components/tabs", {
53+
as_links: true,
54+
tabs: [
55+
{
56+
href: "/world/organisations/british-embassy-paris?nav=tabs",
57+
label: "British Embassy Paris",
58+
active: true,
59+
},
60+
{
61+
href: "/world/organisations/british-embassy-paris/office/british-embassy-paris?nav=tabs",
62+
label: "Office opening times",
63+
active: false,
64+
},
65+
{
66+
href: "/world/organisations/british-embassy-paris/about/complaints-procedure?nav=tabs",
67+
label: "Complaints procedure",
68+
active: false,
69+
},
70+
{
71+
href: "/world/organisations/british-embassy-paris/about/recruitment?nav=tabs",
72+
label: "Work for this embassy",
73+
active: false,
74+
},
75+
],
76+
} %>
77+
</div>
78+
<% end %>
79+
<% end %>
80+
581
<%= render partial: "worldwide_organisation/header", locals: { worldwide_organisation: @presenter, show_header_title: true } %>
682

783
<section class="govuk-grid-row" id="about-us">
@@ -11,23 +87,36 @@
1187
raw(@content_item.body)
1288
end %>
1389
</div>
90+
<aside class="govuk-grid-column-one-third">
91+
<% if params["nav"] == "list" %>
92+
<h2 class="govuk-heading-s">In this section</h2>
93+
<ul class="gem-c-list govuk-list">
94+
<li>British Embassy Paris
95+
<ul class="gem-c-list govuk-list govuk-list--bullet govuk-!-margin-left-2">
96+
<li><a class='govuk-link' href='/world/organisations/british-embassy-paris/office/british-embassy-paris?nav=list'>Office opening times</a></li>
97+
<li><a class='govuk-link' href='/world/organisations/british-embassy-paris/about/complaints-procedure?nav=list'>Complaints Procedure</a></li>
98+
<li><a class='govuk-link' href='/world/organisations/british-embassy-paris/about/recruitment?nav=list'>Working for British Embassy Paris</a></li>
99+
</ul>
100+
</li>
101+
</ul>
102+
<% end %>
103+
<% if @presenter.social_media_accounts.any? %>
14104

15-
<% if @presenter.social_media_accounts.any? %>
16-
<aside class="govuk-grid-column-one-third">
17-
<h2 class="govuk-heading-s"><%= t("worldwide_organisation.headings.follow_us") %></h2>
18-
<%= render "govuk_publishing_components/components/share_links", {
19-
track_as_follow: true,
20-
links: @presenter.social_media_accounts.map do |account|
21-
{
22-
href: account["href"],
23-
text: account["title"],
24-
icon: account["service_type"],
25-
}
26-
end,
27-
margin_bottom: 8,
28-
} %>
29-
</aside>
30-
<% end %>
105+
<h2 class="govuk-heading-s"><%= t("worldwide_organisation.headings.follow_us") %></h2>
106+
<%= render "govuk_publishing_components/components/share_links", {
107+
track_as_follow: true,
108+
links: @presenter.social_media_accounts.map do |account|
109+
{
110+
href: account["href"],
111+
text: account["title"],
112+
icon: account["service_type"],
113+
}
114+
end,
115+
margin_bottom: 8,
116+
} %>
117+
118+
<% end %>
119+
</aside>
31120
</section>
32121

33122
<% if @presenter.show_our_people_section? %>

0 commit comments

Comments
 (0)