govuk_publishing_components 25.2.1 → 25.3.1

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0fc516835586ed0098df4390f5fd9bfe2c9dd97c9dcd91d0d41c2cc0b8ad9864
4
- data.tar.gz: 4a4e410ac48855b9ba8d7c7f014c37b4049587824cf147daa51b2b9c35870dd2
3
+ metadata.gz: 4a7604846e82e7d5741665c02447fd53ed8b8e144b93764dffaedf745a4751a4
4
+ data.tar.gz: bcb4e7566730869377d7c1570acc4dce95200267a3d3f79567d82a266d878d61
5
5
  SHA512:
6
- metadata.gz: e5ba63ec97ec65250980ba70482fbdb1efa191c203cb693a5c76b054480edb63562b68d955bb22b06364dc447071b1f2642784a732c73098c604282bebe882c0
7
- data.tar.gz: 12c1d8b7dc34e97e9faf28b58d5cff71f23ab86eb79b0faf567ea23f89f2043a805f8b9de57f46a04fd4ea8d87c3f8f4364dabaf3d0d4b849ac81badf1767d0f
6
+ metadata.gz: 40cf20a95a9129391d7395f71421ebfcf38656427a2b2f6f9e309164513751080bbb5eee944633c5d42a4ab7051ac1a26215fce1e97f45d0c97bff5017dcb602
7
+ data.tar.gz: 3c2673f73683ca6375a62ec8c94ac7ee79bfd9a965cff5ba008d56f93a3c3fff41c473f2f9e79b74d0f2ba40fa23c093b805a782375b5030b1dc3eddd87404d2
@@ -9,26 +9,33 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
9
9
  GemTrackClick.prototype.start = function ($module) {
10
10
  this.$module = $module[0]
11
11
  this.$module.handleClick = this.handleClick.bind(this)
12
+ var trackLinksOnly = this.$module.hasAttribute('data-track-links-only')
12
13
 
13
14
  var that = this
14
15
  // add a listener to the whole element
15
16
  this.$module.addEventListener('click', function (e) {
16
- that.$module.handleClick(e.target)
17
+ if (!trackLinksOnly) {
18
+ that.$module.handleClick(e.target)
19
+ } else if (trackLinksOnly && e.target.tagName === 'A') {
20
+ that.$module.handleClick(e.target)
21
+ }
17
22
  })
18
23
  }
19
24
 
20
25
  GemTrackClick.prototype.handleClick = function (target) {
21
26
  var options = { transport: 'beacon' }
27
+ var linkUrl
22
28
 
23
29
  // if clicked element hasn't got the right attributes, look for a parent that matches
24
30
  if (!target.hasAttribute('data-track-category') && !target.hasAttribute('data-track-action')) {
31
+ linkUrl = target.getAttribute('href')
25
32
  target = target.closest('[data-track-category][data-track-action]')
26
33
  }
27
34
 
28
35
  if (target) {
29
36
  var category = target.getAttribute('data-track-category')
30
37
  var action = target.getAttribute('data-track-action')
31
- var label = target.getAttribute('data-track-label')
38
+ var label = target.getAttribute('data-track-label') || linkUrl
32
39
  var value = target.getAttribute('data-track-value')
33
40
  var dimension = target.getAttribute('data-track-dimension')
34
41
  var dimensionIndex = target.getAttribute('data-track-dimension-index')
@@ -47,16 +47,17 @@
47
47
  var isSearchToggle = sourceClass.match('search-toggle')
48
48
  var showText = this.getAttribute('data-show-text') || 'Show search'
49
49
  var hideText = this.getAttribute('data-hide-text') || 'Hide search'
50
+ var buttonName = this.getAttribute('data-button-name') || 'menu'
50
51
 
51
52
  if (targetClass.indexOf('js-visible') !== -1) {
52
53
  target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
53
54
  if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
54
- window.GOVUK.analytics.trackEvent('headerClicked', 'menuClosed', { label: 'none' })
55
+ window.GOVUK.analytics.trackEvent('headerClicked', buttonName + 'Closed', { label: 'none' })
55
56
  }
56
57
  } else {
57
58
  target.setAttribute('class', targetClass + ' js-visible')
58
59
  if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
59
- window.GOVUK.analytics.trackEvent('headerClicked', 'menuOpened', { label: 'none' })
60
+ window.GOVUK.analytics.trackEvent('headerClicked', buttonName + 'Opened', { label: 'none' })
60
61
  }
61
62
  }
62
63
  if (sourceClass.indexOf('js-visible') !== -1) {
@@ -84,13 +85,14 @@
84
85
  var element = $menuToggleButtons[j]
85
86
 
86
87
  element.addEventListener('click', function (event) {
88
+ var buttonName = event.target.getAttribute('data-button-name') || 'menu'
87
89
  var expanded = event.target.getAttribute('aria-expanded')
88
90
 
89
91
  if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
90
92
  if (expanded === 'true') {
91
- window.GOVUK.analytics.trackEvent('headerClicked', 'menuClosed', { label: 'none' })
93
+ window.GOVUK.analytics.trackEvent('headerClicked', buttonName + 'Closed', { label: 'none' })
92
94
  } else {
93
- window.GOVUK.analytics.trackEvent('headerClicked', 'menuOpened', { label: 'none' })
95
+ window.GOVUK.analytics.trackEvent('headerClicked', buttonName + 'Opened', { label: 'none' })
94
96
  }
95
97
  }
96
98
  })
@@ -11,3 +11,55 @@
11
11
  margin-top: - govuk-spacing(2);
12
12
  position: relative;
13
13
  }
14
+
15
+ .gem-c-layout-for-public-account-menu {
16
+ margin: 0 0 govuk-spacing(6) 0;
17
+ padding: 0;
18
+
19
+ @include govuk-media-query($from: desktop) {
20
+ margin-right: govuk-spacing(4);
21
+ }
22
+ }
23
+
24
+ // Used to determine width of blue location indicator in navigation mention
25
+ $current-indicator-width: 4px;
26
+
27
+ .gem-c-layout-for-public-account-menu__item {
28
+ list-style-type: none;
29
+ padding: 12px 0;
30
+
31
+ @include govuk-media-query($from: tablet) {
32
+ margin: 0 0 govuk-spacing(4);
33
+ padding: govuk-spacing(1) 0;
34
+ }
35
+ }
36
+
37
+ .gem-c-layout-for-public-account-menu__item--current {
38
+ margin-left: -(govuk-spacing(2) + $current-indicator-width);
39
+ padding-left: govuk-spacing(2);
40
+ border-left: $current-indicator-width solid govuk-colour("blue");
41
+
42
+ .gem-c-layout-for-public-account-menu__link {
43
+ text-decoration: none;
44
+ }
45
+ }
46
+
47
+ .gem-c-layout-for-public-account-menu__link {
48
+ @include govuk-font(19, $weight: "bold");
49
+
50
+ &:not(:focus):hover {
51
+ color: $govuk-link-colour;
52
+ }
53
+ }
54
+
55
+ .gem-c-layout-for-public-account-feedback-footer {
56
+ margin-bottom: govuk-spacing(4);
57
+ padding: govuk-spacing(3);
58
+ background: govuk-colour("light-grey");
59
+
60
+ @include govuk-media-query($from: tablet) {
61
+ padding: govuk-spacing(6);
62
+ margin-top: govuk-spacing(2);
63
+ margin-bottom: govuk-spacing(8);
64
+ }
65
+ }
@@ -14,6 +14,12 @@
14
14
  show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
15
15
  title ||= "GOV.UK - The best place to find government services and information"
16
16
 
17
+ show_account_layout ||= false
18
+ account_nav_location ||= nil
19
+ omit_account_feedback_footer ||= false
20
+ omit_account_navigation ||= false
21
+ omit_account_phase_banner ||= false
22
+
17
23
  # This is a hack - but it's the only way I can find to not have two blue bars on
18
24
  # constrained width layouts.
19
25
  #
@@ -74,7 +80,7 @@
74
80
  href: "#content"
75
81
  } %>
76
82
 
77
- <%= render "govuk_publishing_components/components/cookie_banner" %>
83
+ <%= render "govuk_publishing_components/components/cookie_banner", layout_helper.cookie_banner_data %>
78
84
 
79
85
  <% unless omit_header %>
80
86
  <% if show_explore_header %>
@@ -107,14 +113,27 @@
107
113
  <% end %>
108
114
  <% end %>
109
115
 
110
- <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
111
- <%= yield :before_content %>
112
- <main class="govuk-main-wrapper" id="content">
116
+ <% if show_account_layout %>
117
+ <%= render "govuk_publishing_components/components/layout_for_public/account-layout", {
118
+ omit_account_phase_banner: omit_account_phase_banner,
119
+ omit_account_navigation: omit_account_navigation,
120
+ account_nav_location: account_nav_location,
121
+ } do %>
122
+ <%= yield :before_content %>
113
123
  <%= yield %>
114
- </main>
115
- </div>
124
+ <% end %>
125
+ <% else %>
126
+ <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
127
+ <%= yield :before_content %>
128
+ <main class="govuk-main-wrapper" id="content">
129
+ <%= yield %>
130
+ </main>
131
+ </div>
132
+ <% end %>
116
133
 
117
- <% unless omit_feedback_form %>
134
+ <% if show_account_layout && !omit_account_feedback_footer %>
135
+ <%= render "govuk_publishing_components/components/layout_for_public/account-feedback-footer" %>
136
+ <% elsif !omit_feedback_form %>
118
137
  <div class="govuk-width-container">
119
138
  <%= render "govuk_publishing_components/components/feedback" %>
120
139
  </div>
@@ -90,9 +90,17 @@ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_to
90
90
  tracking_label = link[:label].downcase.gsub(/\s+/, "")
91
91
  %>
92
92
  <%= tag.li class: li_classes do %>
93
- <a class="gem-c-layout-super-navigation-header__navigation-item-link" href="<%= link[:href] %>">
94
- <%= link[:label] %>
95
- </a>
93
+ <%= link_to link[:label], link[:href], {
94
+ class: "gem-c-layout-super-navigation-header__navigation-item-link",
95
+ data: {
96
+ module: "gem-track-click",
97
+ track_action: "#{tracking_label}Link",
98
+ track_category: "headerClicked",
99
+ track_label: link[:href],
100
+ track_dimension: link[:label],
101
+ track_dimension_index: "29",
102
+ }
103
+ } %>
96
104
  <% if has_children %>
97
105
  <button
98
106
  aria-controls="super-navigation-menu__section-<%= unique_id %>"
@@ -166,9 +174,9 @@ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_to
166
174
  "gem-c-layout-super-navigation-header__navigation-second-footer-link",
167
175
  ],
168
176
  data: {
169
- module: "gem-track-lick",
177
+ module: "gem-track-click",
170
178
  track_action: "#{tracking_label}Link",
171
- track_cateogry: "headerClicked",
179
+ track_category: "headerClicked",
172
180
  track_label: item[:href],
173
181
  track_dimension: item[:label],
174
182
  track_dimension_index: "29",
@@ -61,3 +61,62 @@ examples:
61
61
  data:
62
62
  emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
63
63
  global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
64
+ with_account_layout_enabled:
65
+ description: Adds account layout wrapper around the content passed in to the component
66
+ data:
67
+ show_account_layout: true
68
+ block: |
69
+ <h2 class="govuk-heading-l">This is a title</h2>
70
+ <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.
71
+ with_account_layout_but_without_account_feedback_footer:
72
+ description: The account layout renders with an account-specific feedback banner by default. This flag allows this banner to be omitted.
73
+ data:
74
+ show_account_layout: true
75
+ omit_account_feedback_footer: true
76
+ block: |
77
+ <h2 class="govuk-heading-l">This is a title</h2>
78
+ <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.</p>
79
+ with_current_account_navigation:
80
+ description: "The account layout renders with an account-specific nav to help users navigate different areas of their account. This flag is here to allow control over which option in the nav is highlighted as `current`. Valid options are currently `your-account`, `manage`, and `security`."
81
+ data:
82
+ show_account_layout: true
83
+ account_nav_location: "manage"
84
+ block: |
85
+ <h2 class="govuk-heading-l">This is a title</h2>
86
+ <p class="govuk-body">This is a page under the "Manage your account" section, so we must highlight "Manage your account" in the account navigation.</p>
87
+ with_account_layout_but_without_account_navigation:
88
+ description: The account layout renders with account navigation by default, this hides it.
89
+ data:
90
+ show_account_layout: true
91
+ omit_account_navigation: true
92
+ block: |
93
+ <h2 class="govuk-heading-l">This is a title</h2>
94
+ <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.</p>
95
+ with_account_layout_but_without_account_phase_banner:
96
+ description: The account layout renders with a phase banner by default, this hides it.
97
+ data:
98
+ show_account_layout: true
99
+ omit_account_phase_banner: true
100
+ block: |
101
+ <h2 class="govuk-heading-l">This is a title</h2>
102
+ <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.</p>
103
+ with_custom_cookie_banner:
104
+ description: Passes content through to the [cookie banner component](/component-guide/cookie_banner/).
105
+ data:
106
+ cookie_banner_data:
107
+ title: Can we use cookies to collect information about how you use GOV.UK?
108
+ text: Cookies help us see where we can make improvements to GOV.UK.
109
+ confirmation_message: You have accepted cookies.
110
+ cookie_preferences_href: https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement
111
+ services_cookies:
112
+ yes:
113
+ text: Yes
114
+ data_attributes:
115
+ track_category: cookieBanner
116
+ no:
117
+ text: No
118
+ data_attributes:
119
+ track-category: cookieBanner
120
+ cookie_preferences:
121
+ text: How GOV.UK accounts use cookies
122
+ href: https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement
@@ -0,0 +1,18 @@
1
+ <%= tag.div(class: "govuk-width-container") do %>
2
+ <%= tag.div(class: "gem-c-layout-for-public-account-feedback-footer") do %>
3
+ <%= render "govuk_publishing_components/components/heading", {
4
+ text: t("components.layout_for_public.account_layout.feedback.banners.title"),
5
+ heading_level: 2,
6
+ font_size: "m",
7
+ margin_bottom: 4,
8
+ } %>
9
+
10
+ <p class="govuk-body govuk-!-margin-bottom-0">
11
+ <%= t("components.layout_for_public.account_layout.feedback.banners.footer_intro") %>
12
+ <a href="<%= "#{Plek.find('account-manager')}/feedback" %>" class="govuk-link">
13
+ <%= t("components.layout_for_public.account_layout.feedback.banners.footer_link") %>
14
+ </a>
15
+ <%= t("components.layout_for_public.account_layout.feedback.banners.footer_outro") %>
16
+ </p>
17
+ <% end %>
18
+ <% end %>
@@ -0,0 +1,29 @@
1
+ <div class="govuk-width-container">
2
+ <% message = capture do %>
3
+ <%= t("components.layout_for_public.account_layout.feedback.banners.phase_intro") %>
4
+ <a class="govuk-link" href=<%= "#{Plek.find('account-manager')}/feedback" %>>
5
+ <%= t("components.layout_for_public.account_layout.feedback.banners.phase_link") %>
6
+ </a>
7
+ <%= t("components.layout_for_public.account_layout.feedback.banners.phase_outro") %>
8
+ <% end %>
9
+
10
+ <%= render "govuk_publishing_components/components/phase_banner", {
11
+ phase: "alpha",
12
+ message: message
13
+ } unless omit_account_phase_banner %>
14
+
15
+ <div class="govuk-grid-row govuk-main-wrapper">
16
+ <%= tag.div(class: 'govuk-grid-column-one-third') do %>
17
+ <%= render "govuk_publishing_components/components/layout_for_public/account-navigation", { page_is: account_nav_location} %>
18
+ <% end unless omit_account_navigation %>
19
+
20
+ <div class="govuk-grid-column-two-thirds">
21
+ <div id="wrapper">
22
+ <%= yield :before_content %>
23
+ <main role="main" id="content">
24
+ <%= yield %>
25
+ </main>
26
+ </div>
27
+ </div>
28
+ </div>
29
+ </div>
@@ -0,0 +1,30 @@
1
+ <% page_is ||= nil %>
2
+
3
+ <nav aria-label="Account management" class="gem-c-layout-for-public-account-nav">
4
+ <ul class="gem-c-layout-for-public-account-menu">
5
+ <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "your-account" %>">
6
+ <%= link_to(
7
+ t("components.layout_for_public.account_layout.navigation.menu_bar.account.link_text"),
8
+ "#{Plek.find('account-manager')}",
9
+ class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
10
+ 'aria-current': page_is == "your-account" ? "page" : nil,
11
+ ) %>
12
+ </li>
13
+ <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "manage" %>">
14
+ <%= link_to(
15
+ t("components.layout_for_public.account_layout.navigation.menu_bar.manage.link_text"),
16
+ "#{Plek.find('account-manager')}/account/manage",
17
+ class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
18
+ 'aria-current': page_is == "manage" ? "page" : nil,
19
+ ) %>
20
+ </li>
21
+ <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "security" %>">
22
+ <%= link_to(
23
+ t("components.layout_for_public.account_layout.navigation.menu_bar.security.link_text"),
24
+ "#{Plek.find('account-manager')}/account/security",
25
+ class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
26
+ 'aria-current': page_is == "security" ? "page" : nil,
27
+ ) %>
28
+ </li>
29
+ </ul>
30
+ </nav>
@@ -6,6 +6,7 @@
6
6
  aria-label="Show or hide Top Level Navigation"
7
7
  class="govuk-header__menu-button govuk-js-header-toggle gem-c-header__menu-button govuk-!-display-none-print"
8
8
  type="button"
9
+ data-button-name="menu"
9
10
  >
10
11
  <%= t("components.layout_header.menu") %>
11
12
  </button>
@@ -1,6 +1,7 @@
1
1
  <button
2
2
  class="search-toggle js-header-toggle"
3
3
  data-search-toggle-for="search"
4
+ data-button-name="search"
4
5
  data-show-text="<%= t("components.layout_header.show_button") %>"
5
6
  data-hide-text="<%= t("components.layout_header.hide_button") %>"
6
7
  >
@@ -81,6 +81,27 @@ en:
81
81
  copyright_html: <a class="govuk-footer__link govuk-footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
82
82
  licence_html: 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
83
83
  support_links: Support links
84
+ layout_for_public:
85
+ account_layout:
86
+ feedback:
87
+ banners:
88
+ footer_intro: We’re trialling GOV.UK accounts.
89
+ footer_link: Give feedback
90
+ footer_outro: on your experience so we can make them better.
91
+ phase_intro: We’re trialling GOV.UK accounts - your
92
+ phase_link: feedback
93
+ phase_outro: will help us improve them.
94
+ title: Help improve GOV.UK accounts
95
+ navigation:
96
+ destroy_user_session: Sign out
97
+ menu_bar:
98
+ account:
99
+ link_text: Your account
100
+ manage:
101
+ link_text: Manage your account
102
+ security:
103
+ link_text: Security and privacy
104
+ user_root_path: Account
84
105
  layout_header:
85
106
  hide_button: Hide search
86
107
  menu: Menu
@@ -353,6 +353,9 @@ module GovukPublishingComponents
353
353
  {
354
354
  href: "/cymraeg",
355
355
  text: "Rhestr o Wasanaethau Cymraeg",
356
+ attributes: {
357
+ lang: "cy",
358
+ },
356
359
  },
357
360
  {
358
361
  href: "/government/organisations/government-digital-service",
@@ -361,11 +364,12 @@ module GovukPublishingComponents
361
364
  ],
362
365
  }.freeze
363
366
 
364
- attr_reader :footer_navigation, :footer_meta
367
+ attr_reader :footer_navigation, :footer_meta, :cookie_banner_data
365
368
 
366
369
  def initialize(local_assigns)
367
370
  @footer_navigation = local_assigns[:footer_navigation] || FOOTER_NAV
368
371
  @footer_meta = local_assigns[:footer_meta] || FOOTER_META
372
+ @cookie_banner_data = local_assigns[:cookie_banner_data] || {}
369
373
  end
370
374
  end
371
375
  end
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "25.2.1".freeze
2
+ VERSION = "25.3.1".freeze
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_publishing_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 25.2.1
4
+ version: 25.3.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - GOV.UK Dev
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2021-08-09 00:00:00.000000000 Z
11
+ date: 2021-08-12 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: govuk_app_config
@@ -812,6 +812,9 @@ files:
812
812
  - app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb
813
813
  - app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb
814
814
  - app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb
815
+ - app/views/govuk_publishing_components/components/layout_for_public/_account-feedback-footer.html.erb
816
+ - app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb
817
+ - app/views/govuk_publishing_components/components/layout_for_public/_account-navigation.html.erb
815
818
  - app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb
816
819
  - app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb
817
820
  - app/views/govuk_publishing_components/components/layout_header/_search.html.erb