govuk_publishing_components 25.2.1 → 25.3.1

Sign up to get free protection for your applications and to get access to all the features.
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