govuk_publishing_components 24.6.0 → 24.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (105) 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 +7 -5
  4. data/app/assets/javascripts/govuk_publishing_components/components/details.js +2 -1
  5. data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js +1 -0
  6. data/app/assets/javascripts/govuk_publishing_components/modules.js +3 -1
  7. data/app/assets/stylesheets/component_guide/application.scss +1 -1
  8. data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +0 -4
  9. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss +10 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +8 -7
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +15 -1
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +1 -32
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_title.scss +0 -5
  14. data/app/controllers/govuk_publishing_components/audit_controller.rb +21 -17
  15. data/app/controllers/govuk_publishing_components/component_guide_controller.rb +9 -0
  16. data/app/helpers/govuk_publishing_components/application_helper.rb +3 -0
  17. data/app/models/govuk_publishing_components/audit_applications.rb +3 -3
  18. data/app/models/govuk_publishing_components/audit_comparer.rb +16 -8
  19. data/app/models/govuk_publishing_components/audit_components.rb +6 -3
  20. data/app/views/govuk_publishing_components/audit/_applications.html.erb +126 -0
  21. data/app/views/govuk_publishing_components/audit/_components.html.erb +142 -0
  22. data/app/views/govuk_publishing_components/audit/show.html.erb +22 -277
  23. data/app/views/govuk_publishing_components/component_guide/index.html.erb +16 -0
  24. data/app/views/govuk_publishing_components/components/_image_card.html.erb +14 -11
  25. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +7 -2
  26. data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +48 -7
  27. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +15 -12
  28. data/app/views/govuk_publishing_components/components/_success_alert.html.erb +24 -8
  29. data/app/views/govuk_publishing_components/components/_summary_list.html.erb +2 -2
  30. data/app/views/govuk_publishing_components/components/_title.html.erb +6 -2
  31. data/app/views/govuk_publishing_components/components/docs/button.yml +7 -6
  32. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +3 -0
  33. data/app/views/govuk_publishing_components/components/docs/image_card.yml +12 -0
  34. data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml +26 -0
  35. data/app/views/govuk_publishing_components/components/docs/modal_dialogue.yml +3 -0
  36. data/app/views/govuk_publishing_components/components/docs/success_alert.yml +12 -1
  37. data/app/views/govuk_publishing_components/components/docs/summary_list.yml +18 -1
  38. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +8 -1
  39. data/config/locales/ar.yml +1 -0
  40. data/config/locales/az.yml +1 -0
  41. data/config/locales/be.yml +1 -0
  42. data/config/locales/bg.yml +1 -0
  43. data/config/locales/bn.yml +1 -0
  44. data/config/locales/cs.yml +1 -0
  45. data/config/locales/da.yml +1 -0
  46. data/config/locales/de.yml +1 -0
  47. data/config/locales/dr.yml +1 -0
  48. data/config/locales/el.yml +1 -0
  49. data/config/locales/en.yml +2 -0
  50. data/config/locales/es-419.yml +1 -0
  51. data/config/locales/es.yml +1 -0
  52. data/config/locales/fa.yml +1 -0
  53. data/config/locales/fi.yml +1 -0
  54. data/config/locales/gd.yml +1 -0
  55. data/config/locales/gu.yml +1 -0
  56. data/config/locales/he.yml +1 -0
  57. data/config/locales/hi.yml +1 -0
  58. data/config/locales/hr.yml +1 -0
  59. data/config/locales/hu.yml +1 -0
  60. data/config/locales/hy.yml +1 -0
  61. data/config/locales/id.yml +1 -0
  62. data/config/locales/is.yml +1 -0
  63. data/config/locales/it.yml +1 -0
  64. data/config/locales/ja.yml +1 -0
  65. data/config/locales/ka.yml +1 -0
  66. data/config/locales/kk.yml +1 -0
  67. data/config/locales/ko.yml +1 -0
  68. data/config/locales/lt.yml +1 -0
  69. data/config/locales/lv.yml +1 -0
  70. data/config/locales/ms.yml +1 -0
  71. data/config/locales/mt.yml +1 -0
  72. data/config/locales/nl.yml +1 -0
  73. data/config/locales/no.yml +1 -0
  74. data/config/locales/pa-pk.yml +1 -0
  75. data/config/locales/pa.yml +1 -0
  76. data/config/locales/pl.yml +1 -0
  77. data/config/locales/ps.yml +1 -0
  78. data/config/locales/pt.yml +1 -0
  79. data/config/locales/ro.yml +1 -0
  80. data/config/locales/ru.yml +1 -0
  81. data/config/locales/si.yml +1 -0
  82. data/config/locales/sk.yml +1 -0
  83. data/config/locales/sl.yml +1 -0
  84. data/config/locales/so.yml +1 -0
  85. data/config/locales/sq.yml +1 -0
  86. data/config/locales/sr.yml +1 -0
  87. data/config/locales/sv.yml +1 -0
  88. data/config/locales/sw.yml +1 -0
  89. data/config/locales/ta.yml +1 -0
  90. data/config/locales/th.yml +1 -0
  91. data/config/locales/tk.yml +1 -0
  92. data/config/locales/tr.yml +1 -0
  93. data/config/locales/uk.yml +1 -0
  94. data/config/locales/ur.yml +1 -0
  95. data/config/locales/uz.yml +1 -0
  96. data/config/locales/vi.yml +1 -0
  97. data/config/locales/zh-hk.yml +1 -0
  98. data/config/locales/zh-tw.yml +1 -0
  99. data/config/locales/zh.yml +1 -0
  100. data/lib/govuk_publishing_components/presenters/button_helper.rb +13 -2
  101. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +5 -0
  102. data/lib/govuk_publishing_components/presenters/public_layout_helper.rb +15 -31
  103. data/lib/govuk_publishing_components/presenters/shared_helper.rb +10 -0
  104. data/lib/govuk_publishing_components/version.rb +1 -1
  105. metadata +68 -6
@@ -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>
@@ -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>
@@ -1,10 +1,33 @@
1
1
  <%
2
- title ||= "GOV.UK - The best place to find government services and information"
3
- html_lang ||= "en"
2
+ emergency_banner ||= nil
4
3
  full_width ||= false
4
+ global_bar ||= nil
5
+ html_lang ||= "en"
6
+ layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
7
+ navigation_items ||= []
5
8
  omit_header ||= false
6
9
  show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
7
- layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
10
+ title ||= "GOV.UK - The best place to find government services and information"
11
+
12
+ # This is a hack - but it's the only way I can find to not have two blue bars on
13
+ # constrained width layouts.
14
+ #
15
+ # The full width layout hides the blue bar underneath the blar header bar - so
16
+ # full width pages won't see the blue bar unless it's added by another component
17
+ # - and for most pages that component is the global banner.
18
+ #
19
+ # The constrained width layout doesn't hide the blue bar - so having the global
20
+ # banner on a constrained width layout means there are two blue bars.
21
+ #
22
+ # The global banner is shown with JavaScript, so users without JavaScript won't
23
+ # see it. So the constrained width blue bar can't be turned off as then it'll be
24
+ # off for everyone.
25
+ #
26
+ # This booleon adds a CSS class that shifts the banners up by the blue bar's
27
+ # height, making the two blue bars overlap and appear as one. The class is added
28
+ # when a) there's content for the emergency or global banner *and* b) when using
29
+ # the contrained width layout.
30
+ blue_bar_dedupe = !full_width && global_bar.present?
8
31
  -%>
9
32
  <!DOCTYPE html>
10
33
  <!--[if lt IE 9]><html class="lte-ie8" lang="<%= html_lang %>"><![endif]-->
@@ -48,13 +71,31 @@
48
71
  <% unless omit_header %>
49
72
  <%= render "govuk_publishing_components/components/layout_header", {
50
73
  search: show_search,
51
- # layout-header will always have border-bottom, unless the layout is full width
52
- remove_bottom_border: full_width,
74
+ navigation_items: navigation_items,
75
+
76
+ # The (blue) bottom border needs to be underneath the emergency banner -
77
+ # so it has been turned off and added in manually.
78
+ remove_bottom_border: true,
53
79
  } %>
54
80
  <% end %>
55
- <div class="<%= "govuk-width-container" unless full_width %>" id="content">
81
+
82
+ <%= raw(emergency_banner) %>
83
+
84
+ <% unless full_width %>
85
+ <div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>
86
+ <% end %>
87
+
88
+ <% if global_bar.present? %>
89
+ <%= content_tag("div", {
90
+ class: blue_bar_dedupe ? "gem-c-layout-for-public__global-banner-wrapper" : nil,
91
+ }) do %>
92
+ <%= raw(global_bar) %>
93
+ <% end %>
94
+ <% end %>
95
+
96
+ <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
56
97
  <%= yield :before_content %>
57
- <main class="govuk-main-wrapper">
98
+ <main class="govuk-main-wrapper" id="content">
58
99
  <%= yield %>
59
100
  </main>
60
101
  </div>
@@ -1,16 +1,15 @@
1
1
  <%
2
- product_name ||= nil
3
2
  environment ||= nil
4
3
  full_width ||= false
5
- search ||= false
6
- search_left ||= false
7
- navigation_items ||= []
8
4
  navigation_aria_label ||= "Top level"
5
+ navigation_items ||= []
6
+ product_name ||= nil
9
7
  remove_bottom_border ||= false
8
+ search ||= false
10
9
  search_left ||= false
11
10
  width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
12
11
 
13
- header_classes = %w(gem-c-layout-header govuk-header)
12
+ header_classes = %w[gem-c-layout-header govuk-header]
14
13
  header_classes << "gem-c-layout-header--#{environment}" if environment
15
14
  header_classes << "gem-c-layout-header--no-bottom-border" if remove_bottom_border
16
15
  header_classes << "gem-c-layout-header--search-left" if search_left
@@ -28,18 +27,22 @@
28
27
  <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop gem-c-layout-header__search">
29
28
  <%= render "govuk_publishing_components/components/layout_header/search" %>
30
29
  </div>
31
- <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
32
- <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
33
- </div>
30
+ <% if navigation_items.any? %>
31
+ <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
32
+ <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
33
+ </div>
34
+ <% end %>
34
35
  </div>
35
36
  <% else %>
36
- <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
37
+ <div class="govuk-grid-row">
37
38
  <div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
38
39
  <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
39
40
  </div>
40
- <div class="govuk-header__content gem-c-header__content">
41
- <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
42
- </div>
41
+ <% if navigation_items.any? %>
42
+ <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
43
+ <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
44
+ </div>
45
+ <% end %>
43
46
  <% if search %>
44
47
  <div class="govuk-grid-column-one-third gem-c-layout-header__search">
45
48
  <%= render "govuk_publishing_components/components/layout_header/search" %>
@@ -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 %>
@@ -81,7 +81,7 @@
81
81
  <%= link_to item[:edit].fetch(:href),
82
82
  class: "govuk-link",
83
83
  data: item[:edit].fetch(:data_attributes, {}) do %>
84
- <%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless edit[:link_text_no_enhance] -%>
84
+ <%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless item[:edit][:link_text_no_enhance] -%>
85
85
  <% end %>
86
86
  <% end %>
87
87
  <% end %>
@@ -94,7 +94,7 @@
94
94
  <%= link_to item[:delete].fetch(:href),
95
95
  class: "govuk-link gem-link--destructive",
96
96
  data: item[:delete].fetch(:data_attributes, {}) do %>
97
- <%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless delete[:link_text_no_enhance] -%>
97
+ <%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless item[:delete][:link_text_no_enhance] -%>
98
98
  <% end %>
99
99
  <% end %>
100
100
  <% 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 %>
@@ -66,18 +66,19 @@ examples:
66
66
  href: "#"
67
67
  start: true
68
68
  info_text: "Sometimes you want to explain where a user is going to."
69
+ with_margin_bottom:
70
+ description: "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 no margin bottom."
71
+ data:
72
+ text: "Submit"
73
+ margin_bottom: 6
69
74
  start_now_button_with_info_text_and_margin_bottom:
75
+ description: "When the component requires margin bottom and has info text, the margin is applied to the info text."
70
76
  data:
71
77
  text: "Start now"
72
78
  href: "#"
73
79
  start: true
74
80
  info_text: "Sometimes you want to explain where a user is going to and have a margin bottom"
75
- margin_bottom: true
76
- with_margin_bottom:
77
- description: "Sometimes it's useful to break up a page, for example if a button is at the bottom of a page."
78
- data:
79
- text: "Submit"
80
- margin_bottom: true
81
+ margin_bottom: 6
81
82
  extreme_text:
82
83
  data:
83
84
  text: "I'm a button with lots of text to test how the component scales at extremes."
@@ -155,6 +155,7 @@ examples:
155
155
  content_item:
156
156
  title: "Transport news story"
157
157
  content_id: "3c402d90-fe77-49b9-a8aa-1800d4fc2b3d"
158
+ locale: "en"
158
159
  links:
159
160
  ordered_related_items:
160
161
  - title: Find an apprenticeship
@@ -180,6 +181,7 @@ examples:
180
181
  content_item:
181
182
  title: "30 creative teams awarded up to £100,000 each for Festival UK* 2022 R&D project"
182
183
  content_id: "c3752802-f091-43a9-ba90-33568fccf391"
184
+ locale: "en"
183
185
  links:
184
186
  ordered_related_items:
185
187
  - title: Find an apprenticeship
@@ -205,6 +207,7 @@ examples:
205
207
  content_item:
206
208
  title: "Local transport news story"
207
209
  content_id: "5c82db20-7631-11e4-a3cb-005056011aef"
210
+ locale: "en"
208
211
  links:
209
212
  ordered_related_items:
210
213
  - title: Find an apprenticeship
@@ -35,6 +35,18 @@ examples:
35
35
  image_alt: "some meaningful alt text please"
36
36
  heading_text: "I am not a heading"
37
37
  heading_level: 0
38
+ with_different_link_size:
39
+ description: |
40
+ Set a different font size for the link. Uses the [GOV.UK Frontend heading sizes](https://design-system.service.gov.uk/styles/typography/#headings) but defaults to 19px for legacy reasons. Valid options are `xl`, `l`, `m` and `s`.
41
+
42
+ This option is not tied to the `heading_level` option in order to give flexibility.
43
+ data:
44
+ href: "/definitely-not-a-page"
45
+ image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
46
+ image_alt: "some meaningful alt text please"
47
+ heading_text: "I am a big link"
48
+ heading_level: 0
49
+ font_size: 'xl'
38
50
  with_more_information:
39
51
  data:
40
52
  href: "/also-not-a-page"
@@ -27,3 +27,29 @@ examples:
27
27
  description: This allows the header to be omitted which is currently used when rendering CSV previews from Whitehall
28
28
  data:
29
29
  omit_header: true
30
+ navigation:
31
+ description: Passes the navigation through to the [header component](/component-guide/layout_header/).
32
+ data:
33
+ show_search: false
34
+ navigation_items:
35
+ - text: Navigation item 1
36
+ href: "item-1"
37
+ active: true
38
+ - text: Navigation item 2
39
+ href: "item-2"
40
+ - text: Hidden on desktop
41
+ href: "item-3"
42
+ show_only_in_collapsed_menu: true
43
+ with_global_banner:
44
+ description: This allows the HTML for the global banner to be added to the page. This is only the slot for the global banner - the markup for the banner needs to be passed in.
45
+ data:
46
+ global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
47
+ with_emergency_banner:
48
+ description: This allows the HTML for the emergency banner to be added to the page in the correct place. This is only the slot for the emergency banner - the markup for the banner needs to be passed in.
49
+ data:
50
+ emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
51
+ with_global_and_emergency_banner:
52
+ description: Both global banner and emergency banner should be usable together.
53
+ data:
54
+ emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
55
+ global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
@@ -8,6 +8,8 @@ body: |
8
8
  When the component is not limited to presenting information (e.g. an alert dialog or an informative dialog) and it contains interactive elements (e.g. form elements) you should use the `aria_label` attribute.
9
9
  This will provide context around what the modal dialogue is about and will prevent it from being too verbose for screen reader users (if `aria_label` is not specified the whole modal content will be read out).
10
10
 
11
+ Modal components must be a direct descendant of the `<body>` element; we recommend placing it toward the end of the document for performance considerations.
12
+
11
13
  This component is currently experimental. If you are using it, please feed back any research findings to the Content Publisher team.
12
14
  accessibility_criteria: |
13
15
  The modal dialogue box must:
@@ -21,6 +23,7 @@ accessibility_criteria: |
21
23
  - can be operable with a keyboard (allows the ESC key to close the dialogue)
22
24
  - return focus to last focused element on close
23
25
 
26
+ display_preview: false
24
27
  examples:
25
28
  default:
26
29
  embed: |
@@ -1,5 +1,7 @@
1
1
  name: Success alert
2
2
  description: Used at the top of the page, to summarise a successful user action.
3
+ govuk_frontend_components:
4
+ - notification-banner
3
5
  accessibility_criteria: |
4
6
  - should be focused on page load, to ensure the message is noticed by
5
7
  assistive tech
@@ -10,9 +12,18 @@ examples:
10
12
  data:
11
13
  message: Message to alert the user to a successful action goes here
12
14
  with_message_and_description:
15
+ description: Descriptions can be passed as plain text but it is strongly recommended that you pass these as html, cleaned using `raw` or `sanitize`.
13
16
  data:
14
17
  message: Message to alert the user to a successful action goes here
15
- description: A further description
18
+ description: <p class="govuk-body">A further description</p>
19
+ with_custom_title_id:
20
+ description: |
21
+ This is for the heading element at the head of the component (reading "Success" by default) where the id is used by an `aria-labelledby` on screen reader focus of the element.
22
+
23
+ Please ensure that this id is unique across the view you are building.
24
+ data:
25
+ message: Message to alert the user to a successful action goes here
26
+ title_id: my-custom-success-id
16
27
  long_example:
17
28
  data:
18
29
  message: |
@@ -73,7 +73,24 @@ examples:
73
73
 
74
74
  To override this behaviour, use `link_text_no_enhance` on the link in question, as shown. This will remove the visually hidden text, allowing you to add your own. The component will render a `span` element with a class of `govuk-visually-hidden` included in a passed [capture block](https://apidock.com/rails/ActionView/Helpers/CaptureHelper/capture) as the `link_text` parameter.
75
75
  data:
76
- <<: *default-example-data
76
+ title: "Title, summary and body"
77
+ items:
78
+ - field: "Title"
79
+ value: "Rural conservation techniques"
80
+ edit:
81
+ href: "edit-title"
82
+ text: "Edit"
83
+ data_attributes:
84
+ gtm: "edit-title"
85
+ - field: "Body"
86
+ value: "Following the land use committee change to overreaching rural byelaws in 2009, further policies were adopted."
87
+ edit:
88
+ href: "edit-body"
89
+ link_text: "Edit"
90
+ delete:
91
+ href: "delete-body"
92
+ link_text: "Remove"
93
+ link_text_no_enhance: true
77
94
  edit:
78
95
  href: "edit-title-summary-body"
79
96
  link_text: Edit this document <span class="govuk-visually-hidden">my hidden text for screenreaders</span>