govuk_publishing_components 66.3.0 → 66.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/components/sub-navigation-menu.js +23 -0
- data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js +5 -1
- data/app/assets/stylesheets/govuk_publishing_components/all-components.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_sub-navigation-menu.scss +137 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss +4 -0
- data/app/controllers/govuk_publishing_components/applications_page_controller.rb +1 -1
- data/app/controllers/govuk_publishing_components/audit_controller.rb +0 -1
- data/app/views/govuk_publishing_components/components/_sub_navigation_menu.html.erb +68 -0
- data/app/views/govuk_publishing_components/components/docs/sub_navigation_menu.yml +67 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +5 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 031cb0dedaaca1388bc7e5ab071d119abdb4f92a7dd5c57995d235130a35d466
|
|
4
|
+
data.tar.gz: 7d4ac4e41a5d7b507012d7e609296246b14c4d177780c82a94db421387f51342
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d7eb1b2249520995e6d0e4af76ad134f5715bff4c7aa8ccdf3bebf24628c601620d4f237b4483f907e3ec391264dcb008f1f10bc0399834934baf5d03106b6a5
|
|
7
|
+
data.tar.gz: 298c6a028ba9464378e5e215edfb336f243745d83398066364c01ae8c718316f6e7691a491d31bd9e940afa60eba64a77f2e1c10f0719467d8a575ffa9e58148
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
(function (Modules) {
|
|
2
|
+
class SubNavigationMenu {
|
|
3
|
+
constructor (module) {
|
|
4
|
+
this.module = module
|
|
5
|
+
this.module.button = this.module.querySelector('button')
|
|
6
|
+
this.module.navContainer = this.module.querySelector('.js-menu__nav-container')
|
|
7
|
+
this.module.buttonContainer = this.module.querySelector('.js-menu__button-container')
|
|
8
|
+
this.module.button.classList.remove('gem-c-sub-navigation-menu__button--no-js')
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
init () {
|
|
12
|
+
this.module.button.addEventListener('click', this.toggleMenu.bind(this))
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
toggleMenu () {
|
|
16
|
+
var ariaExpanded = this.module.button.getAttribute('aria-expanded') === 'true'
|
|
17
|
+
this.module.navContainer.classList.toggle('gem-c-sub-navigation-menu__nav-container--js-hidden')
|
|
18
|
+
this.module.button.setAttribute('aria-expanded', `${!ariaExpanded}`)
|
|
19
|
+
this.module.buttonContainer.classList.toggle('gem-c-sub-navigation-menu__button-container--collapsed')
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
Modules.SubNavigationMenu = SubNavigationMenu
|
|
23
|
+
})(window.GOVUK.Modules)
|
|
@@ -20,9 +20,13 @@
|
|
|
20
20
|
app_promo_banner: 'settings',
|
|
21
21
|
global_banner_seen: 'settings',
|
|
22
22
|
govuk_chat_onboarding_complete: 'settings', // cookie details page to be updated when this is in use
|
|
23
|
+
'ABTest-BankHolidaysTest': 'usage',
|
|
24
|
+
'ABTest-SearchFreshnessBoost': 'usage',
|
|
25
|
+
_ga: 'usage',
|
|
23
26
|
_ga_VBLT2V3FZR: 'usage', // gtag cookie used to persist the session state, integration
|
|
24
27
|
_ga_P1DGM6TVYF: 'usage', // staging
|
|
25
|
-
_ga_S5RQ7FTGVR: 'usage' // production
|
|
28
|
+
_ga_S5RQ7FTGVR: 'usage', // production
|
|
29
|
+
lux_uid: 'usage'
|
|
26
30
|
}
|
|
27
31
|
|
|
28
32
|
/*
|
|
@@ -86,6 +86,7 @@
|
|
|
86
86
|
@import "components/step-by-step-nav-header";
|
|
87
87
|
@import "components/step-by-step-nav-related";
|
|
88
88
|
@import "components/step-by-step-nav";
|
|
89
|
+
@import "components/sub-navigation-menu";
|
|
89
90
|
@import "components/subscription-links";
|
|
90
91
|
@import "components/success-alert";
|
|
91
92
|
@import "components/summary-banner";
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
.gem-c-sub-navigation-menu {
|
|
2
|
+
border-bottom: 1px solid $govuk-border-colour;
|
|
3
|
+
@include govuk-font(19);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.gem-c-sub-navigation-menu__button-container {
|
|
7
|
+
background-color: govuk-colour("light-grey");
|
|
8
|
+
border-bottom: 1px solid govuk-colour("mid-grey");
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.gem-c-sub-navigation-menu__button-container--collapsed {
|
|
12
|
+
border-bottom: 0;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.gem-c-sub-navigation-menu__button {
|
|
16
|
+
height: 3.684em;
|
|
17
|
+
color: govuk-colour("blue");
|
|
18
|
+
background: none;
|
|
19
|
+
border: 0;
|
|
20
|
+
padding-left: govuk-spacing(3);
|
|
21
|
+
padding-right: govuk-spacing(3);
|
|
22
|
+
// Invisible border so the width of the collapsed button is the same as the expanded one.
|
|
23
|
+
border-left: 1px solid rgba(0, 0, 0, 0);
|
|
24
|
+
border-right: 1px solid govuk-colour("light-grey");
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
position: relative;
|
|
27
|
+
@include govuk-font(19);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.gem-c-sub-navigation-menu__button--negative-margin-left {
|
|
31
|
+
margin-left: govuk-spacing(-3); // Ensures the button looks perfectly left-aligned with content.
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// Shared styles for the expanded and collapsed arrow icon. Based off of the super navigation menu button.
|
|
35
|
+
.gem-c-sub-navigation-menu__button::before {
|
|
36
|
+
border-bottom: 2px solid govuk-colour("blue");
|
|
37
|
+
border-right: 2px solid govuk-colour("blue");
|
|
38
|
+
content: "";
|
|
39
|
+
display: inline-block;
|
|
40
|
+
height: 8px;
|
|
41
|
+
margin: 0 10px 0 2px;
|
|
42
|
+
vertical-align: middle;
|
|
43
|
+
width: 8px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.gem-c-sub-navigation-menu__button:focus {
|
|
47
|
+
&.gem-c-sub-navigation-menu__button::before {
|
|
48
|
+
border-color: govuk-colour("black");
|
|
49
|
+
}
|
|
50
|
+
@include govuk-focused-text;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.gem-c-sub-navigation-menu__button[aria-expanded="false"]::before {
|
|
54
|
+
// Collapsed arrow icon
|
|
55
|
+
transform: translateY(-35%) rotate(45deg) scale(1);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.gem-c-sub-navigation-menu__button[aria-expanded="true"] {
|
|
59
|
+
border-color: govuk-colour("mid-grey");
|
|
60
|
+
background-color: govuk-colour("white");
|
|
61
|
+
|
|
62
|
+
@include govuk-media-query($until: tablet) {
|
|
63
|
+
border-left: 1px solid govuk-colour("light-grey"); // Hide left border on mobile while preserving button width.
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// Expanded arrow icon
|
|
67
|
+
&.gem-c-sub-navigation-menu__button::before {
|
|
68
|
+
transform: translateY(1px) rotate(225deg) scale(1);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.gem-c-sub-navigation-menu__button[aria-expanded="true"]:focus {
|
|
73
|
+
background-color: $govuk-focus-colour;
|
|
74
|
+
border-color: $govuk-focus-colour;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Adds a white border at the bottom of the button when the button is expanded.
|
|
78
|
+
// Used to make the button look like a tab that's seamlessly connected to element below it.
|
|
79
|
+
.gem-c-sub-navigation-menu__button[aria-expanded="true"]::after {
|
|
80
|
+
content: "";
|
|
81
|
+
position: absolute;
|
|
82
|
+
border-bottom: 1px solid govuk-colour("white");
|
|
83
|
+
width: 100%;
|
|
84
|
+
left: 0;
|
|
85
|
+
bottom: -1px;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// Removes the white border on bottom of button when focus styles are active.
|
|
89
|
+
.gem-c-sub-navigation-menu__button[aria-expanded="true"]:focus::after {
|
|
90
|
+
border: 0;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.gem-c-sub-navigation-menu__button--no-js {
|
|
94
|
+
display: none;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.gem-c-sub-navigation-menu__button:hover::before {
|
|
98
|
+
border-color: govuk-colour("dark-blue");
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.gem-c-sub-navigation-menu__nav-container {
|
|
102
|
+
margin-top: govuk-spacing(7);
|
|
103
|
+
margin-bottom: govuk-spacing(9);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.js-enabled {
|
|
107
|
+
.gem-c-sub-navigation-menu__nav-container--js-hidden {
|
|
108
|
+
display: none;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.gem-c-sub-navigation-menu__heading {
|
|
113
|
+
margin-bottom: govuk-spacing(2);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.gem-c-sub-navigation-menu__list {
|
|
117
|
+
padding-left: 0;
|
|
118
|
+
margin-top: 0;
|
|
119
|
+
display: grid;
|
|
120
|
+
column-gap: govuk-spacing(7);
|
|
121
|
+
row-gap: 12px;
|
|
122
|
+
grid-template-columns: 1fr;
|
|
123
|
+
|
|
124
|
+
@include govuk-media-query($from: tablet) {
|
|
125
|
+
grid-template-columns: 1fr 1fr;
|
|
126
|
+
}
|
|
127
|
+
@include govuk-media-query($from: desktop) {
|
|
128
|
+
grid-template-columns: 1fr 1fr 1fr;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.gem-c-sub-navigation-menu__list-item {
|
|
133
|
+
list-style: none;
|
|
134
|
+
@include govuk-media-query($until: mobile) {
|
|
135
|
+
margin-top: govuk-spacing(3);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
@@ -8,7 +8,7 @@ module GovukPublishingComponents
|
|
|
8
8
|
},
|
|
9
9
|
{
|
|
10
10
|
type: "publishing",
|
|
11
|
-
apps: %w[content-data-admin collections-publisher travel-advice-publisher whitehall
|
|
11
|
+
apps: %w[content-data-admin collections-publisher travel-advice-publisher whitehall local-links-manager places-manager support manuals-publisher service-manual-publisher short-url-manager specialist-publisher content-tagger publisher transition search-admin fact-check-manager content-block-manager].sort,
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
type: "utility",
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<%
|
|
2
|
+
button_text ||= "Menu"
|
|
3
|
+
links ||= []
|
|
4
|
+
negative_margin_left_on_button ||= false
|
|
5
|
+
button_classes = %w[gem-c-sub-navigation-menu__button gem-c-sub-navigation-menu__button--no-js govuk-link govuk-link--no-underline]
|
|
6
|
+
button_classes << "gem-c-sub-navigation-menu__button--negative-margin-left" if negative_margin_left_on_button
|
|
7
|
+
|
|
8
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
9
|
+
component_helper.add_class("gem-c-sub-navigation-menu")
|
|
10
|
+
component_helper.add_data_attribute({ module: "sub-navigation-menu" })
|
|
11
|
+
|
|
12
|
+
heading_id = "gem-c-sub-navigation-menu-heading-#{SecureRandom.hex(4)}"
|
|
13
|
+
container_id = "gem-c-sub-navigation-menu-container-#{SecureRandom.hex(4)}"
|
|
14
|
+
%>
|
|
15
|
+
<% unless links.empty? %>
|
|
16
|
+
<%= tag.div(**component_helper.all_attributes) do %>
|
|
17
|
+
<h2 class="govuk-visually-hidden" id="<%= heading_id %>">Secondary navigation menu</h2>
|
|
18
|
+
<div class="gem-c-sub-navigation-menu__button-container gem-c-sub-navigation-menu__button-container--collapsed js-menu__button-container">
|
|
19
|
+
<div class="govuk-width-container">
|
|
20
|
+
<%= tag.button button_text,
|
|
21
|
+
type: "button",
|
|
22
|
+
class: button_classes.join(" "),
|
|
23
|
+
aria: { expanded: "false", controls: container_id },
|
|
24
|
+
data: {
|
|
25
|
+
module: "ga4-event-tracker",
|
|
26
|
+
ga4_expandable: "",
|
|
27
|
+
ga4_event: {
|
|
28
|
+
event_name: "select_content",
|
|
29
|
+
index_section: 1,
|
|
30
|
+
index_section_count: 1,
|
|
31
|
+
type: "secondary header",
|
|
32
|
+
section: button_text,
|
|
33
|
+
}.to_json,
|
|
34
|
+
} %>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="gem-c-sub-navigation-menu__nav-container gem-c-sub-navigation-menu__nav-container--js-hidden govuk-width-container js-menu__nav-container" id="<%= container_id %>">
|
|
38
|
+
<nav aria-labelledby="<%= heading_id %>" data-module="ga4-link-tracker">
|
|
39
|
+
<% ga4_index_section_count = links.length %>
|
|
40
|
+
<% links.each_with_index do |link_group, nav_index| %>
|
|
41
|
+
<% nav_section_heading = link_group[:text] %>
|
|
42
|
+
<h3 class="gem-c-sub-navigation-menu__heading govuk-heading-s"><%= link_group[:text] %></h3>
|
|
43
|
+
<ul class="gem-c-sub-navigation-menu__list">
|
|
44
|
+
<% ga4_index_total = link_group[:links].length %>
|
|
45
|
+
<% link_group[:links].each_with_index do |link, link_index| %>
|
|
46
|
+
<li class="gem-c-sub-navigation-menu__list-item">
|
|
47
|
+
<%= link_to link[:text],
|
|
48
|
+
link[:href],
|
|
49
|
+
class: "govuk-link govuk-link--no-underline govuk-link--no-visited-state",
|
|
50
|
+
data: {
|
|
51
|
+
ga4_link: {
|
|
52
|
+
event_name: "navigation",
|
|
53
|
+
type: "secondary header",
|
|
54
|
+
index_link: link_index + 1,
|
|
55
|
+
index_total: ga4_index_total,
|
|
56
|
+
index_section: nav_index + 1,
|
|
57
|
+
index_section_count: ga4_index_section_count,
|
|
58
|
+
section: nav_section_heading,
|
|
59
|
+
}.to_json,
|
|
60
|
+
} %>
|
|
61
|
+
</li>
|
|
62
|
+
<% end %>
|
|
63
|
+
</ul>
|
|
64
|
+
<% end %>
|
|
65
|
+
</nav>
|
|
66
|
+
</div>
|
|
67
|
+
<% end %>
|
|
68
|
+
<% end %>
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
name: Sub navigation menu (experimental)
|
|
2
|
+
description: The sub navigation menu component helps users to navigate pages within a section of GOV.UK
|
|
3
|
+
|
|
4
|
+
accessibility_criteria: |
|
|
5
|
+
The menu component must:
|
|
6
|
+
|
|
7
|
+
* be recognisable as navigation
|
|
8
|
+
* have the correct heading level structure
|
|
9
|
+
* indicate that any expandable content can be expanded or collapsed
|
|
10
|
+
* indicate the initial state of expandable content
|
|
11
|
+
* indicate where the state of expandable content has changed
|
|
12
|
+
|
|
13
|
+
When CSS and / or JavaScript is unavailable, the component must:
|
|
14
|
+
|
|
15
|
+
* fallback to an expanded menu
|
|
16
|
+
shared_accessibility_criteria:
|
|
17
|
+
- link
|
|
18
|
+
uses_component_wrapper_helper: true
|
|
19
|
+
capture_full_width_screenshot: true
|
|
20
|
+
examples:
|
|
21
|
+
default:
|
|
22
|
+
data:
|
|
23
|
+
links:
|
|
24
|
+
- text: "Example Heading"
|
|
25
|
+
links:
|
|
26
|
+
- text: "Hello world"
|
|
27
|
+
href: "/hello-world"
|
|
28
|
+
- text: "Another Heading"
|
|
29
|
+
links:
|
|
30
|
+
- text: "Example Link"
|
|
31
|
+
href: "/hello-world"
|
|
32
|
+
- text: "Example Link 2"
|
|
33
|
+
href: "/hello-world"
|
|
34
|
+
- text: "Example Link 3"
|
|
35
|
+
href: "/hello-world"
|
|
36
|
+
- text: "This is a very very very long link"
|
|
37
|
+
href: "/hello-world"
|
|
38
|
+
- text: "Another link that has a lot of characters"
|
|
39
|
+
href: "/hello-world"
|
|
40
|
+
- text: "Third link containing a lot of text"
|
|
41
|
+
href: "/hello-world"
|
|
42
|
+
custom_button_text:
|
|
43
|
+
data:
|
|
44
|
+
button_text: Open me
|
|
45
|
+
links:
|
|
46
|
+
- text: "Example Heading"
|
|
47
|
+
links:
|
|
48
|
+
- text: "Hello world"
|
|
49
|
+
href: "/hello-world"
|
|
50
|
+
- text: "Another Heading"
|
|
51
|
+
links:
|
|
52
|
+
- text: "Example Link"
|
|
53
|
+
href: "/hello-world"
|
|
54
|
+
|
|
55
|
+
negative_margin_left_on_button:
|
|
56
|
+
description: "The button does not look perfectly aligned with the content by default, so this negative margin aligns the button chevron with the content."
|
|
57
|
+
data:
|
|
58
|
+
negative_margin_left_on_button: true
|
|
59
|
+
links:
|
|
60
|
+
- text: "Example Heading"
|
|
61
|
+
links:
|
|
62
|
+
- text: "Hello world"
|
|
63
|
+
href: "/hello-world"
|
|
64
|
+
- text: "Another Heading"
|
|
65
|
+
links:
|
|
66
|
+
- text: "Example Link"
|
|
67
|
+
href: "/hello-world"
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_publishing_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 66.
|
|
4
|
+
version: 66.4.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GOV.UK Dev
|
|
@@ -516,6 +516,7 @@ files:
|
|
|
516
516
|
- app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js
|
|
517
517
|
- app/assets/javascripts/govuk_publishing_components/components/skip-link.js
|
|
518
518
|
- app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
|
|
519
|
+
- app/assets/javascripts/govuk_publishing_components/components/sub-navigation-menu.js
|
|
519
520
|
- app/assets/javascripts/govuk_publishing_components/components/table.js
|
|
520
521
|
- app/assets/javascripts/govuk_publishing_components/components/tabs.js
|
|
521
522
|
- app/assets/javascripts/govuk_publishing_components/dependencies.js
|
|
@@ -620,6 +621,7 @@ files:
|
|
|
620
621
|
- app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss
|
|
621
622
|
- app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss
|
|
622
623
|
- app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss
|
|
624
|
+
- app/assets/stylesheets/govuk_publishing_components/components/_sub-navigation-menu.scss
|
|
623
625
|
- app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss
|
|
624
626
|
- app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss
|
|
625
627
|
- app/assets/stylesheets/govuk_publishing_components/components/_summary-banner.scss
|
|
@@ -783,6 +785,7 @@ files:
|
|
|
783
785
|
- app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb
|
|
784
786
|
- app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb
|
|
785
787
|
- app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb
|
|
788
|
+
- app/views/govuk_publishing_components/components/_sub_navigation_menu.html.erb
|
|
786
789
|
- app/views/govuk_publishing_components/components/_subscription_links.html.erb
|
|
787
790
|
- app/views/govuk_publishing_components/components/_success_alert.html.erb
|
|
788
791
|
- app/views/govuk_publishing_components/components/_summary_banner.html.erb
|
|
@@ -886,6 +889,7 @@ files:
|
|
|
886
889
|
- app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml
|
|
887
890
|
- app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml
|
|
888
891
|
- app/views/govuk_publishing_components/components/docs/step_by_step_nav_related.yml
|
|
892
|
+
- app/views/govuk_publishing_components/components/docs/sub_navigation_menu.yml
|
|
889
893
|
- app/views/govuk_publishing_components/components/docs/subscription_links.yml
|
|
890
894
|
- app/views/govuk_publishing_components/components/docs/success_alert.yml
|
|
891
895
|
- app/views/govuk_publishing_components/components/docs/summary_banner.yml
|