govuk_publishing_components 24.7.1 → 24.9.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/component_guide/application.js +3 -0
  3. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +35 -4
  4. data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js +1 -0
  5. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +1 -1
  6. data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss +0 -2
  7. data/app/assets/stylesheets/govuk_publishing_components/components/_button.scss +0 -8
  8. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +0 -37
  9. data/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss +1 -2
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +0 -4
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +1 -11
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss +0 -1
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss +0 -1
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss +0 -1
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +0 -1
  16. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss +0 -4
  17. data/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss +0 -1
  18. data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +1 -32
  19. data/app/assets/stylesheets/govuk_publishing_components/components/_title.scss +0 -5
  20. data/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss +0 -4
  21. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss +16 -2
  22. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +0 -1
  23. data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss +15 -0
  24. data/app/controllers/govuk_publishing_components/audit_controller.rb +21 -17
  25. data/app/controllers/govuk_publishing_components/component_guide_controller.rb +9 -0
  26. data/app/helpers/govuk_publishing_components/application_helper.rb +3 -0
  27. data/app/models/govuk_publishing_components/audit_applications.rb +3 -3
  28. data/app/models/govuk_publishing_components/audit_comparer.rb +16 -8
  29. data/app/models/govuk_publishing_components/audit_components.rb +6 -3
  30. data/app/views/govuk_publishing_components/audit/_applications.html.erb +126 -0
  31. data/app/views/govuk_publishing_components/audit/_components.html.erb +142 -0
  32. data/app/views/govuk_publishing_components/audit/show.html.erb +22 -277
  33. data/app/views/govuk_publishing_components/component_guide/index.html.erb +18 -2
  34. data/app/views/govuk_publishing_components/component_guide/show.html.erb +1 -1
  35. data/app/views/govuk_publishing_components/components/_accordion.html.erb +25 -0
  36. data/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb +1 -1
  37. data/app/views/govuk_publishing_components/components/_image_card.html.erb +14 -11
  38. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +7 -2
  39. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +2 -2
  40. data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +2 -2
  41. data/app/views/govuk_publishing_components/components/_print_link.html.erb +2 -2
  42. data/app/views/govuk_publishing_components/components/_share_links.html.erb +1 -1
  43. data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb +4 -4
  44. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +3 -3
  45. data/app/views/govuk_publishing_components/components/_success_alert.html.erb +24 -8
  46. data/app/views/govuk_publishing_components/components/_title.html.erb +6 -2
  47. data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +1 -1
  48. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +9 -27
  49. data/app/views/govuk_publishing_components/components/docs/accordion.yml +73 -73
  50. data/app/views/govuk_publishing_components/components/docs/button.yml +7 -6
  51. data/app/views/govuk_publishing_components/components/docs/image_card.yml +12 -0
  52. data/app/views/govuk_publishing_components/components/docs/modal_dialogue.yml +3 -0
  53. data/app/views/govuk_publishing_components/components/docs/success_alert.yml +17 -1
  54. data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb +1 -1
  55. data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb +2 -1
  56. data/config/locales/cy.yml +0 -5
  57. data/config/locales/en.yml +12 -6
  58. data/lib/govuk_publishing_components/presenters/button_helper.rb +13 -2
  59. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +0 -4
  60. data/lib/govuk_publishing_components/presenters/public_layout_helper.rb +15 -31
  61. data/lib/govuk_publishing_components/presenters/shared_helper.rb +10 -0
  62. data/lib/govuk_publishing_components/version.rb +1 -1
  63. metadata +24 -2
@@ -1,5 +1,21 @@
1
1
  <%= render 'govuk_publishing_components/components/title', title: GovukPublishingComponents::Config.component_guide_title, margin_top: 0 %>
2
2
 
3
+ <% unless ENV["MAIN_COMPONENT_GUIDE"] %>
4
+ <p class="govuk-body">
5
+ <% if @index_audit_summary[:application_found] %>
6
+ Warnings:
7
+ <% if @index_audit_summary[:warning_count] > 0 %>
8
+ <strong class="govuk-tag govuk-tag--red"><%= @index_audit_summary[:warning_count] %></strong>
9
+ <% else %>
10
+ <%= @index_audit_summary[:warning_count] %>
11
+ <% end %>
12
+ <a href="/component-guide/audit" class="govuk-link">Warning details</a>
13
+ <% else %>
14
+ <strong class="govuk-tag govuk-tag--red">Application not found</strong>
15
+ <% end %>
16
+ </p>
17
+ <% end %>
18
+
3
19
  <div class="component-markdown">
4
20
  <p>Components are packages of template, style, behaviour and documentation that live in your application.</p>
5
21
  <p>See the <a href="https://github.com/alphagov/govuk_publishing_components">govuk_publishing_components gem</a> for further details, or <a href="https://docs.publishing.service.gov.uk/manual/components.html#component-guides">a list of all component guides</a>.</p>
@@ -63,7 +79,7 @@
63
79
 
64
80
  <% unless ENV["MAIN_COMPONENT_GUIDE"] %>
65
81
  <h2 class="component-doc-h2">Components in this application (<%= @component_docs.length %>)</h2>
66
- <ul class="component-list">
82
+ <ul class="component-list" id="list-components-in-this-application">
67
83
  <% @component_docs.each do |component_doc| %>
68
84
  <li>
69
85
  <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
@@ -77,7 +93,7 @@
77
93
  <h2 class="component-doc-h2">All gem components (<%= @gem_component_docs.length %>)</h2>
78
94
  <% end %>
79
95
 
80
- <ul class="component-list">
96
+ <ul class="component-list" id="list-all-components-in-the-gem">
81
97
  <% @gem_component_docs.each do |component_doc| %>
82
98
  <li>
83
99
  <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
@@ -24,7 +24,7 @@
24
24
  </div>
25
25
  </div>
26
26
  <% end %>
27
- <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %></p>
27
+ <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %>.</p>
28
28
  </div>
29
29
  </div>
30
30
 
@@ -11,9 +11,34 @@
11
11
  accordion_classes << 'gem-c-accordion--condensed' if condensed
12
12
  accordion_classes << (shared_helper.get_margin_bottom)
13
13
 
14
+ translations = {
15
+ show_text: "components.accordion.show",
16
+ hide_text: "components.accordion.hide",
17
+ show_all_text: "components.accordion.show_all",
18
+ hide_all_text: "components.accordion.hide_all",
19
+ this_section_visually_hidden: "components.accordion.this_section_visually_hidden",
20
+ }
21
+
22
+ locales = {}
23
+
14
24
  data_attributes ||= {}
15
25
  data_attributes[:module] = 'gem-accordion'
16
26
  data_attributes[:anchor_navigation] = anchor_navigation
27
+
28
+ translations.each do |key, translation|
29
+ locales[key] = shared_helper.t_locale(translation)
30
+ data_attributes[key] = t(translation)
31
+ end
32
+
33
+ unique_locales = locales.values.uniq
34
+
35
+ if unique_locales.length > 1
36
+ data_attributes[:locale] = locales
37
+ else
38
+ if unique_locales[0] != I18n.locale
39
+ data_attributes[:locale] = unique_locales[0]
40
+ end
41
+ end
17
42
  %>
18
43
  <% if items.any? %>
19
44
  <%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>
@@ -17,7 +17,7 @@
17
17
  <%= link_to(
18
18
  content_item[:link].fetch(:text),
19
19
  content_item[:link].fetch(:path),
20
- class: "gem-c-highlight-boxes__title #{"gem-c-highlight-boxes__title--featured" if content_item[:link][:featured]}",
20
+ class: "govuk-link gem-c-highlight-boxes__title #{"gem-c-highlight-boxes__title--featured" if content_item[:link][:featured]}",
21
21
  data: content_item[:link][:data_attributes]
22
22
  )
23
23
  %>
@@ -6,6 +6,10 @@
6
6
  classes = "gem-c-image-card"
7
7
  classes << " gem-c-image-card--large" if card_helper.large
8
8
  classes << " gem-c-image-card--no-image" unless defined?(image_src)
9
+
10
+ font_size ||= card_helper.large ? 'm' : 's'
11
+ heading_class = %w[gem-c-image-card__title]
12
+ heading_class << shared_helper.get_heading_size(font_size, 's')
9
13
  %>
10
14
  <% if card_helper.href || card_helper.extra_links.any? %>
11
15
  <div class="<%= classes %> <%= brand_helper.brand_class %>"
@@ -14,16 +18,15 @@
14
18
  <div class="gem-c-image-card__text-wrapper">
15
19
  <div class="gem-c-image-card__header-and-context-wrapper">
16
20
  <% if card_helper.heading_text %>
17
- <%= content_tag(shared_helper.get_heading_level,
18
- class: "gem-c-image-card__title") do %>
19
- <% if card_helper.href %>
20
- <%= link_to card_helper.heading_text, card_helper.href,
21
- class: "gem-c-image-card__title-link #{brand_helper.color_class}",
22
- data: card_helper.href_data_attributes
23
- %>
24
- <% else %>
25
- <%= card_helper.heading_text %>
26
- <% end %>
21
+ <%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
22
+ <% if card_helper.href %>
23
+ <%= link_to card_helper.heading_text, card_helper.href,
24
+ class: "gem-c-image-card__title-link govuk-link #{brand_helper.color_class}",
25
+ data: card_helper.href_data_attributes
26
+ %>
27
+ <% else %>
28
+ <%= card_helper.heading_text %>
29
+ <% end %>
27
30
  <% end %>
28
31
  <% end %>
29
32
  <%= card_helper.context %>
@@ -34,7 +37,7 @@
34
37
  <% card_helper.extra_links.each do |link| %>
35
38
  <li class="gem-c-image-card__list-item">
36
39
  <%= link_to link[:text], link[:href],
37
- class: "gem-c-image-card__list-item-link #{brand_helper.color_class}",
40
+ class: "gem-c-image-card__list-item-link govuk-link #{brand_helper.color_class}",
38
41
  data: link[:data_attributes]
39
42
  %>
40
43
  </li>
@@ -21,8 +21,13 @@
21
21
  width_class = "govuk-grid-column-one-third"
22
22
  end
23
23
 
24
- list_classes = %w( govuk-footer__list )
25
- list_classes << "govuk-footer__list--columns-#{item[:columns]}" if item[:columns]
24
+ # If the list has multiple columns and there is only one link.
25
+ # This is to prevent a long link wrapping in a column, which
26
+ # leaves an obvious blank space to the right.
27
+ single_item_list = (( item[:columns] == 2 || item[:columns] == 3 ) && item[:items].length == 1 )
28
+
29
+ list_classes = %w[govuk-footer__list]
30
+ list_classes << "govuk-footer__list--columns-#{item[:columns]}" if item[:columns] unless single_item_list
26
31
  %>
27
32
  <div class="<%= width_class %>">
28
33
  <h2 class="govuk-footer__heading govuk-heading-m"><%= item[:title] %></h2>
@@ -18,12 +18,12 @@
18
18
  <header class="<%= header_classes.join(' ') %>" role="banner" data-module="govuk-header">
19
19
  <div class="govuk-header__container <%= width_class %>">
20
20
  <% if search_left %>
21
- <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
21
+ <div class="govuk-grid-row">
22
22
  <div class="gem-c-layout-header__logo govuk-grid-column-one-third-from-desktop">
23
23
  <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
24
24
  </div>
25
25
  </div>
26
- <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
26
+ <div class="govuk-grid-row">
27
27
  <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop gem-c-layout-header__search">
28
28
  <%= render "govuk_publishing_components/components/layout_header/search" %>
29
29
  </div>
@@ -8,7 +8,7 @@
8
8
  <% if local_assigns.include?(:previous_page) %>
9
9
  <li class="gem-c-pagination__item gem-c-pagination__item--previous">
10
10
  <a href="<%= previous_page[:url] %>"
11
- class="gem-c-pagination__link"
11
+ class="govuk-link gem-c-pagination__link"
12
12
  rel="prev"
13
13
  data-track-category="contentsClicked"
14
14
  data-track-action="previous"
@@ -34,7 +34,7 @@
34
34
  <% if local_assigns.include?(:next_page) %>
35
35
  <li class="gem-c-pagination__item gem-c-pagination__item--next">
36
36
  <a href="<%= next_page[:url] %>"
37
- class="gem-c-pagination__link"
37
+ class="govuk-link gem-c-pagination__link"
38
38
  rel="next"
39
39
  data-track-category="contentsClicked"
40
40
  data-track-action="next"
@@ -18,8 +18,8 @@
18
18
  wrapper_classes << (shared_helper.get_margin_top)
19
19
  wrapper_classes << (shared_helper.get_margin_bottom)
20
20
 
21
- classes = %w(govuk-link)
22
- classes << "gem-c-print-link__button" if href.nil?
21
+ classes = %w[govuk-link]
22
+ classes << "govuk-body-s gem-c-print-link__button" if href.nil?
23
23
  classes << "gem-c-print-link__link govuk-link--no-visited-state" if href.present?
24
24
  %>
25
25
 
@@ -52,7 +52,7 @@
52
52
  'track-action': link[:icon],
53
53
  'track-options': track_options
54
54
  },
55
- class: "gem-c-share-links__link #{brand_helper.color_class}" do %>
55
+ class: "govuk-link gem-c-share-links__link #{brand_helper.color_class}" do %>
56
56
  <span class="gem-c-share-links__link-icon">
57
57
  <% if link[:icon] == 'facebook' %>
58
58
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">
@@ -4,14 +4,14 @@
4
4
  always_display_as_list ||= false
5
5
  %>
6
6
  <% if links.any? %>
7
- <div
8
- class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>"
7
+ <div
8
+ class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>"
9
9
  data-module="gem-track-click">
10
10
  <h2 class="gem-c-step-nav-related__heading">
11
11
  <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
12
12
  <% if links.length == 1 && !always_display_as_list %>
13
13
  <a href="<%= links[0][:href] %>"
14
- class="gem-c-step-nav-related__link"
14
+ class="govuk-link"
15
15
  data-track-category="stepNavPartOfClicked"
16
16
  data-track-action="<%= pretitle %>"
17
17
  data-track-label="<%= links[0][:href] %>"
@@ -27,7 +27,7 @@
27
27
  <% links.each do |link| %>
28
28
  <li class="gem-c-step-nav-related__link-item">
29
29
  <a href="<%= link[:href] %>"
30
- class="gem-c-step-nav-related__link"
30
+ class="govuk-link"
31
31
  data-track-category="stepNavPartOfClicked"
32
32
  data-track-action="<%= pretitle %>"
33
33
  data-track-label="<%= link[:href] %>"
@@ -36,7 +36,7 @@
36
36
  <%= sl_helper.email_signup_link_text %>
37
37
  <% end %>
38
38
  <%= link_to email_link_text, sl_helper.email_signup_link, {
39
- class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
39
+ class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
40
40
  data: sl_helper.email_signup_link_data_attributes,
41
41
  lang: email_signup_link_text_locale
42
42
  } %>
@@ -50,13 +50,13 @@
50
50
  <%= sl_helper.feed_link_text %>
51
51
  <% end %>
52
52
  <%= tag.button feed_link_text, {
53
- class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
53
+ class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
54
54
  data: sl_helper.feed_link_data_attributes,
55
55
  lang: feed_link_text_locale
56
56
  } if sl_helper.feed_link_box_value %>
57
57
  <%= link_to feed_link_text, sl_helper.feed_link,
58
58
  {
59
- class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
59
+ class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
60
60
  data: sl_helper.feed_link_data_attributes,
61
61
  lang: feed_link_text_locale
62
62
  } unless sl_helper.feed_link_box_value %>
@@ -1,10 +1,26 @@
1
- <% description ||= nil %>
1
+ <%
2
+ description ||= nil
3
+ title_id ||= "govuk-notification-banner-title-#{SecureRandom.hex(4)}"
4
+ %>
2
5
 
3
- <%= tag.div class: "gem-c-success-alert", data: { module: "initial-focus" }, role: "alert", tabindex: "-1" do %>
4
- <% if description.present? %>
5
- <%= tag.h2 message, class: "gem-c-success-summary__title" %>
6
- <%= tag.div description, class: "gem-c-success-summary__body" %>
7
- <% else %>
8
- <%= tag.p message, class: "gem-c-success-alert__message" %>
9
- <% end %>
6
+ <%= tag.div class: "gem-c-success-alert govuk-notification-banner govuk-notification-banner--success",
7
+ role: "alert",
8
+ tabindex: "-1",
9
+ aria: {
10
+ labelledby: title_id,
11
+ },
12
+ data: {
13
+ module: "initial-focus",
14
+ } do %>
15
+ <div class="govuk-notification-banner__header">
16
+ <%= tag.h2 t("govuk_component.success_alert.success", default: "Success"), class: "govuk-notification-banner__title", id: title_id %>
17
+ </div>
18
+ <div class="govuk-notification-banner__content">
19
+ <% if description.present? %>
20
+ <%= tag.h3 message, class: "govuk-notification-banner__heading" %>
21
+ <%= description %>
22
+ <% else %>
23
+ <%= tag.p message, class: "govuk-body gem-c-success-alert__message" %>
24
+ <% end %>
25
+ </div>
10
26
  <% end %>
@@ -1,5 +1,6 @@
1
1
  <%
2
2
  average_title_length ||= false
3
+
3
4
  context ||= false
4
5
  context_locale ||= false
5
6
  context_text = context.is_a?(Hash) ? context[:text] : context
@@ -12,10 +13,13 @@
12
13
 
13
14
  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
14
15
 
15
- classes = %w(gem-c-title)
16
+ classes = %w[gem-c-title]
16
17
  classes << "gem-c-title--inverse" if inverse
17
18
  classes << (shared_helper.get_margin_top)
18
19
  classes << (shared_helper.get_margin_bottom)
20
+
21
+ heading_classes = %w[gem-c-title__text]
22
+ heading_classes << (average_title_length.present? ? 'govuk-heading-l' : 'govuk-heading-xl')
19
23
  %>
20
24
  <%= content_tag(:div, class: classes) do %>
21
25
  <% if context %>
@@ -23,7 +27,7 @@
23
27
  <%= context_href ? link_to(context_text, context_href, class: 'gem-c-title__context-link govuk-link', data: context_data) : context_text %>
24
28
  </span>
25
29
  <% end %>
26
- <h1 class="gem-c-title__text <% if average_title_length %>gem-c-title__text--<%= average_title_length %><% end %>">
30
+ <h1 class="<%= heading_classes.join(" ") %>">
27
31
  <%= title %>
28
32
  </h1>
29
33
  <% end %>
@@ -19,7 +19,7 @@
19
19
  hreflang: translation[:locale],
20
20
  lang: translation[:locale],
21
21
  rel: "alternate",
22
- class: "gem-c-translation-nav__link #{brand_helper.color_class}",
22
+ class: "govuk-link gem-c-translation-nav__link #{brand_helper.color_class}",
23
23
  data: translation[:data_attributes]
24
24
  %>
25
25
  <% end %>
@@ -11,31 +11,13 @@
11
11
  "track-dimension-index": "29",
12
12
  } %>
13
13
 
14
- <%= link_to link_path,
15
- class: "govuk-link gem-c-contextual-sidebar__brexit-cta",
16
- data: data_attributes,
17
- aria: { label: "#{t("components.related_navigation.take_action_list.aria_label")} #{link_text}" },
18
- lang: shared_helper.t_locale("components.related_navigation.transition.title") do %>
19
- <h2 class="gem-c-contextual-sidebar__brexit-heading"><%= t("components.related_navigation.transition.title") %></h2>
20
- <ul class="govuk-list gem-c-contextual-sidebar__take-action-traffic-lights">
21
- <li>
22
- <%= image_tag 'govuk_publishing_components/take-action-red.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>
23
- <span class="gem-c-contextual-sidebar__take-action-traffic-lists-text">
24
- <%= t("components.related_navigation.take_action_list.red") %>
25
- </span>
26
- </li>
27
- <li>
28
- <%= image_tag 'govuk_publishing_components/take-action-amber.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>
29
- <span class="gem-c-contextual-sidebar__take-action-traffic-lists-text">
30
- <%= t("components.related_navigation.take_action_list.amber") %>
31
- </span>
32
- </li>
33
- <li>
34
- <%= image_tag 'govuk_publishing_components/take-action-green.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>
35
- <span class="gem-c-contextual-sidebar__take-action-traffic-lists-text">
36
- <%= t("components.related_navigation.take_action_list.green") %>
37
- </span>
38
- </li>
39
- </ul>
40
- <p class="gem-c-contextual-sidebar__brexit-text"><%= link_text %></p>
14
+ <%= tag.div class: "gem-c-contextual-sidebar__brexit-cta" do %>
15
+ <%= tag.h2 t("components.related_navigation.transition.title"), class: "gem-c-contextual-sidebar__brexit-heading govuk-heading-s" %>
16
+ <%= tag.p class: "gem-c-contextual-sidebar__brexit-text govuk-body" do %>
17
+ <%= link_to link_text,
18
+ link_path,
19
+ class: "govuk-link",
20
+ data: data_attributes,
21
+ lang: shared_helper.t_locale("components.related_navigation.transition.title") %>
22
+ <% end %>
41
23
  <% end %>
@@ -40,21 +40,21 @@ examples:
40
40
  data:
41
41
  items:
42
42
  - heading:
43
- text: "Writing well for the web"
43
+ text: Writing well for the web
44
44
  content:
45
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
45
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
46
46
  - heading:
47
- text: "Writing well for specialists"
47
+ text: Writing well for specialists
48
48
  content:
49
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
49
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
50
50
  - heading:
51
- text: "Know your audience"
51
+ text: Know your audience
52
52
  content:
53
- html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
53
+ html: <p class="govuk-body">This is the content for Know your audience.</p>
54
54
  - heading:
55
- text: "How people read"
55
+ text: How people read
56
56
  content:
57
- html: "<p class='govuk-body'>This is the content for How people read.</p>"
57
+ html: <p class="govuk-body">This is the content for How people read.</p>
58
58
  with_supplied_identification:
59
59
  description: |
60
60
  An `id` is optional as it's automatically generated, but it can be supplied if a specific `id` is required.
@@ -66,29 +66,29 @@ examples:
66
66
  id: with-supplied-id-thats-unique-across-the-domain
67
67
  items:
68
68
  - heading:
69
- text: "Writing well for the web"
69
+ text: Writing well for the web
70
70
  content:
71
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
71
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
72
72
  - heading:
73
- text: "Writing well for specialists"
73
+ text: Writing well for specialists
74
74
  content:
75
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
75
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
76
76
  - heading:
77
- text: "Know your audience"
77
+ text: Know your audience
78
78
  content:
79
- html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
79
+ html: <p class="govuk-body">This is the content for Know your audience.</p>
80
80
  - heading:
81
- text: "How people read"
81
+ text: How people read
82
82
  content:
83
- html: "<p class='govuk-body'>This is the content for How people read.</p>"
83
+ html: <p class="govuk-body">This is the content for How people read.</p>
84
84
  with_summary:
85
85
  description: Adds a subheading below each section heading.
86
86
  data:
87
87
  items:
88
88
  - heading:
89
- text: "Understanding agile project management"
89
+ text: Understanding agile project management
90
90
  summary:
91
- text: "Introductions, methods, core features."
91
+ text: Introductions, methods, core features.
92
92
  content:
93
93
  html:
94
94
  '<ul class="govuk-list">
@@ -103,9 +103,9 @@ examples:
103
103
  </li>
104
104
  </ul>'
105
105
  - heading:
106
- text: "Working with agile methods"
106
+ text: Working with agile methods
107
107
  summary:
108
- text: "Workspaces, tools and techniques, user stories, planning."
108
+ text: Workspaces, tools and techniques, user stories, planning.
109
109
  content:
110
110
  html:
111
111
  '<ul class="govuk-list">
@@ -132,9 +132,9 @@ examples:
132
132
  </li>
133
133
  </ul>'
134
134
  - heading:
135
- text: "Governing agile services"
135
+ text: Governing agile services
136
136
  summary:
137
- text: "Principles, measuring progress, spending money."
137
+ text: Principles, measuring progress, spending money.
138
138
  content:
139
139
  html:
140
140
  '<ul class="govuk-list">
@@ -158,9 +158,9 @@ examples:
158
158
  </li>
159
159
  </ul>'
160
160
  - heading:
161
- text: "Phases of an agile project"
161
+ text: Phases of an agile project
162
162
  summary:
163
- text: "Discovery, alpha, beta, live and retirement."
163
+ text: Discovery, alpha, beta, live and retirement.
164
164
  content:
165
165
  html:
166
166
  '<ul class="govuk-list">
@@ -190,54 +190,54 @@ examples:
190
190
 
191
191
  data:
192
192
  data_attributes:
193
- gtm: 'gtm-accordion'
194
- ga: 'ga-accordion'
193
+ gtm: gtm-accordion
194
+ ga: ga-accordion
195
195
  items:
196
196
  - heading:
197
- text: "Writing well for the web"
197
+ text: Writing well for the web
198
198
  content:
199
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
199
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
200
200
  data_attributes:
201
- gtm: 'gtm-accordion-item-1'
201
+ gtm: gtm-accordion-item-1
202
202
  - heading:
203
- text: "Writing well for specialists"
203
+ text: Writing well for specialists
204
204
  content:
205
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
205
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
206
206
  data_attributes:
207
- gtm: 'gtm-accordion-item-2'
207
+ gtm: gtm-accordion-item-2
208
208
  - heading:
209
- text: "Know your audience"
209
+ text: Know your audience
210
210
  content:
211
- html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
211
+ html: <p class="govuk-body">This is the content for Know your audience.</p>
212
212
  data_attributes:
213
- gtm: 'gtm-accordion-item-3'
213
+ gtm: gtm-accordion-item-3
214
214
  - heading:
215
- text: "How people read"
215
+ text: How people read
216
216
  content:
217
- html: "<p class='govuk-body'>This is the content for How people read.</p>"
217
+ html: <p class="govuk-body">This is the content for How people read.</p>
218
218
  data_attributes:
219
- gtm: 'gtm-accordion-item-4'
219
+ gtm: gtm-accordion-item-4
220
220
  different_heading_level:
221
221
  description: This will alter the level of the heading, not the appearance of the heading.
222
222
  data:
223
223
  heading_level: 3
224
224
  items:
225
225
  - heading:
226
- text: "Writing well for the web"
226
+ text: Writing well for the web
227
227
  content:
228
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
228
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
229
229
  - heading:
230
- text: "Writing well for specialists"
230
+ text: Writing well for specialists
231
231
  content:
232
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
232
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
233
233
  - heading:
234
- text: "Know your audience"
234
+ text: Know your audience
235
235
  content:
236
- html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
236
+ html: <p class="govuk-body">This is the content for Know your audience.</p>
237
237
  - heading:
238
- text: "How people read"
238
+ text: How people read
239
239
  content:
240
- html: "<p class='govuk-body'>This is the content for How people read.</p>"
240
+ html: <p class="govuk-body">This is the content for How people read.</p>
241
241
  with_margin_bottom:
242
242
  description: |
243
243
  The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 30px.
@@ -245,35 +245,35 @@ examples:
245
245
  margin_bottom: 0
246
246
  items:
247
247
  - heading:
248
- text: "Writing well for the web"
248
+ text: Writing well for the web
249
249
  content:
250
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
250
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
251
251
  - heading:
252
- text: "Writing well for specialists"
252
+ text: Writing well for specialists
253
253
  content:
254
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
254
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
255
255
  with_section_open:
256
256
  description: |
257
257
  Adding `expanded: true` to the item will mean the section will default to being open, rather than closed. Once a user has opened or closed a section, the state of each section will be remembered - this can override a section's default.
258
258
  data:
259
259
  items:
260
260
  - heading:
261
- text: "Writing well for the web"
261
+ text: Writing well for the web
262
262
  content:
263
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
263
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
264
264
  expanded: true
265
265
  - heading:
266
- text: "Writing well for specialists"
266
+ text: Writing well for specialists
267
267
  content:
268
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
268
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
269
269
  - heading:
270
- text: "Know your audience"
270
+ text: Know your audience
271
271
  content:
272
- html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
272
+ html: <p class="govuk-body">This is the content for Know your audience.</p>
273
273
  - heading:
274
- text: "How people read"
274
+ text: How people read
275
275
  content:
276
- html: "<p class='govuk-body'>This is the content for How people read.</p>"
276
+ html: <p class="govuk-body">This is the content for How people read.</p>
277
277
  with_the_anchor_link_navigation:
278
278
  description: |
279
279
  Some apps require custom ids per accordion section heading for linking between those specific sections, sometimes across multiple pages. An example of this is on manuals pages where multiple manuals will each include large sets of accordions and will reference between specific sections for ease of access to that content. [Live example](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations).
@@ -287,22 +287,22 @@ examples:
287
287
  anchor_navigation: true
288
288
  items:
289
289
  - heading:
290
- text: "Writing well for the web"
291
- id: "writing-well-for-the-web"
290
+ text: Writing well for the web
291
+ id: writing-well-for-the-web
292
292
  content:
293
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
293
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
294
294
  - heading:
295
- text: "Writing well for specialists"
295
+ text: Writing well for specialists
296
296
  content:
297
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
297
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
298
298
  - heading:
299
- text: "Know your audience"
299
+ text: Know your audience
300
300
  content:
301
- html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
301
+ html: <p class="govuk-body">This is the content for Know your audience.</p>
302
302
  - heading:
303
- text: "How people read"
303
+ text: How people read
304
304
  content:
305
- html: "<p class='govuk-body'>This is the content for How people read.</p>"
305
+ html: <p class="govuk-body">This is the content for How people read.</p>
306
306
  condensed_layout:
307
307
  description: |
308
308
  This is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.
@@ -310,7 +310,7 @@ examples:
310
310
  condensed: true
311
311
  items:
312
312
  - heading:
313
- text: "Understanding agile project management"
313
+ text: Understanding agile project management
314
314
  content:
315
315
  html:
316
316
  '<ul class="govuk-list">
@@ -325,9 +325,9 @@ examples:
325
325
  </li>
326
326
  </ul>'
327
327
  - heading:
328
- text: "Working with agile methods"
328
+ text: Working with agile methods
329
329
  summary:
330
- text: "Workspaces, tools and techniques, user stories, planning."
330
+ text: Workspaces, tools and techniques, user stories, planning.
331
331
  content:
332
332
  html:
333
333
  '<ul class="govuk-list">
@@ -354,7 +354,7 @@ examples:
354
354
  </li>
355
355
  </ul>'
356
356
  - heading:
357
- text: "Governing agile services"
357
+ text: Governing agile services
358
358
  content:
359
359
  html:
360
360
  '<ul class="govuk-list">
@@ -378,7 +378,7 @@ examples:
378
378
  </li>
379
379
  </ul>'
380
380
  - heading:
381
- text: "Phases of an agile project"
381
+ text: Phases of an agile project
382
382
  content:
383
383
  html:
384
384
  '<ul class="govuk-list">
@@ -397,4 +397,4 @@ examples:
397
397
  <li>
398
398
  <a class="govuk-link govuk-body-s" href="#">Retiring your service</a>
399
399
  </li>
400
- </ul>'
400
+ </ul>'