govuk_publishing_components 24.2.0 → 24.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js +28 -0
  3. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +52 -8
  4. data/app/assets/javascripts/govuk_publishing_components/components/details.js +1 -1
  5. data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js +108 -0
  6. data/app/assets/javascripts/govuk_publishing_components/components/show-password.js +7 -2
  7. data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js +6 -2
  8. data/app/assets/stylesheets/component_guide/application.scss +0 -8
  9. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
  10. data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss +1 -1
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss +11 -0
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss +8 -1
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_reorderable-list.scss +117 -0
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +17 -13
  15. data/app/models/govuk_publishing_components/audit_applications.rb +1 -1
  16. data/app/models/govuk_publishing_components/audit_comparer.rb +2 -2
  17. data/app/models/govuk_publishing_components/component_example.rb +4 -3
  18. data/app/views/govuk_publishing_components/audit/show.html.erb +211 -199
  19. data/app/views/govuk_publishing_components/components/_accordion.html.erb +3 -3
  20. data/app/views/govuk_publishing_components/components/_breadcrumbs.html.erb +8 -5
  21. data/app/views/govuk_publishing_components/components/_contents_list.html.erb +1 -1
  22. data/app/views/govuk_publishing_components/components/_cookie_banner.html.erb +6 -6
  23. data/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb +1 -1
  24. data/app/views/govuk_publishing_components/components/_image_card.html.erb +1 -1
  25. data/app/views/govuk_publishing_components/components/_list.html.erb +5 -5
  26. data/app/views/govuk_publishing_components/components/_metadata.html.erb +1 -1
  27. data/app/views/govuk_publishing_components/components/_organisation_logo.html.erb +1 -1
  28. data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +1 -1
  29. data/app/views/govuk_publishing_components/components/_radio.html.erb +2 -1
  30. data/app/views/govuk_publishing_components/components/_reorderable_list.html.erb +45 -0
  31. data/app/views/govuk_publishing_components/components/_search.html.erb +27 -16
  32. data/app/views/govuk_publishing_components/components/_share_links.html.erb +1 -1
  33. data/app/views/govuk_publishing_components/components/_show_password.html.erb +6 -4
  34. data/app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb +1 -1
  35. data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb +1 -1
  36. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +1 -1
  37. data/app/views/govuk_publishing_components/components/_summary_list.html.erb +67 -30
  38. data/app/views/govuk_publishing_components/components/_taxonomy_list.html.erb +1 -1
  39. data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +1 -1
  40. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +1 -1
  41. data/app/views/govuk_publishing_components/components/docs/accordion.yml +29 -0
  42. data/app/views/govuk_publishing_components/components/docs/breadcrumbs.yml +22 -0
  43. data/app/views/govuk_publishing_components/components/docs/inverse_header.yml +1 -1
  44. data/app/views/govuk_publishing_components/components/docs/radio.yml +14 -1
  45. data/app/views/govuk_publishing_components/components/docs/reorderable_list.yml +85 -0
  46. data/app/views/govuk_publishing_components/components/docs/search.yml +10 -0
  47. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +2 -0
  48. data/app/views/govuk_publishing_components/components/layout_header/_search.html.erb +17 -3
  49. data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb +2 -2
  50. data/config/locales/en.yml +25 -15
  51. data/lib/govuk_publishing_components/app_helpers/table_helper.rb +2 -1
  52. data/lib/govuk_publishing_components/presenters/machine_readable/faq_page_schema.rb +1 -1
  53. data/lib/govuk_publishing_components/presenters/machine_readable/html_publication_schema.rb +1 -7
  54. data/lib/govuk_publishing_components/presenters/meta_tags.rb +1 -2
  55. data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb +2 -2
  56. data/lib/govuk_publishing_components/version.rb +1 -1
  57. data/lib/tasks/govuk_publishing_components_tasks.rake +1 -1
  58. data/node_modules/sortablejs/LICENSE +21 -0
  59. data/node_modules/sortablejs/README.md +815 -0
  60. data/node_modules/sortablejs/Sortable.js +3721 -0
  61. data/node_modules/sortablejs/Sortable.min.js +2 -0
  62. data/node_modules/sortablejs/modular/sortable.complete.esm.js +3713 -0
  63. data/node_modules/sortablejs/modular/sortable.core.esm.js +3710 -0
  64. data/node_modules/sortablejs/modular/sortable.esm.js +3711 -0
  65. data/node_modules/sortablejs/package.json +56 -0
  66. metadata +19 -7
data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss CHANGED
@@ -34,6 +34,21 @@ $large-input-size: 50px;
34
34
  }
35
35
  }
36
36
 
37
+ %gem-c-search-input-focus {
38
+ outline: $govuk-focus-width solid $govuk-focus-colour;
39
+ // Ensure outline appears outside of the element
40
+ outline-offset: 0;
41
+ // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`
42
+ // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.
43
+ box-shadow: inset 0 0 0 $govuk-border-width-form-element;
44
+
45
+ @include govuk-if-ie8 {
46
+ // IE8 doesn't support `box-shadow` so double the border with
47
+ // `border-width`.
48
+ border-width: $govuk-border-width-form-element * 2;
49
+ }
50
+ }
51
+
37
52
  .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
38
53
  @include govuk-font($size: 19, $line-height: (28 / 19));
39
54
  margin: 0;
@@ -59,25 +74,14 @@ $large-input-size: 50px;
59
74
  }
60
75
 
61
76
  &:focus {
62
- outline: $govuk-focus-width solid $govuk-focus-colour;
63
- // Ensure outline appears outside of the element
64
- outline-offset: 0;
65
- // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`
66
- // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.
67
- box-shadow: inset 0 0 0 $govuk-border-width-form-element;
68
-
69
- @include govuk-if-ie8 {
70
- // IE8 doesn't support `box-shadow` so double the border with
71
- // `border-width`.
72
- border-width: $govuk-border-width-form-element * 2;
73
- }
77
+ @extend %gem-c-search-input-focus;
74
78
  }
75
79
  }
76
80
 
77
81
  @include govuk-compatibility(govuk_template) {
78
82
  // ultra specific rule overrides focus styling from govuk_template
79
83
  #global-header .gem-c-search__input[type="search"]:focus { // stylelint-disable selector-max-id
80
- @extend .gem-c-search__input[type="search"]:focus; // stylelint-disable scss/at-extend-no-missing-placeholder
84
+ @extend %gem-c-search-input-focus;
81
85
  }
82
86
  }
83
87
 
data/app/models/govuk_publishing_components/audit_applications.rb CHANGED
@@ -22,7 +22,7 @@ module GovukPublishingComponents
22
22
  @find_all_print_stylesheets = /@import ["']{1}govuk_publishing_components\/all_components_print/
23
23
  find_print_stylesheets = /(?<=@import ["']{1}govuk_publishing_components\/components\/print\/)[a-zA-Z_-]+(?=['"])/
24
24
 
25
- @find_all_javascripts = /\/\/[ ]*= require govuk_publishing_components\/all_components/
25
+ @find_all_javascripts = /\/\/ *= require govuk_publishing_components\/all_components/
26
26
  find_javascripts = /(?<=require govuk_publishing_components\/components\/)[a-zA-Z_-]+/
27
27
 
28
28
  components_in_templates = find_components(templates, find_components, "templates") || []
data/app/models/govuk_publishing_components/audit_comparer.rb CHANGED
@@ -110,8 +110,8 @@ module GovukPublishingComponents
110
110
  next if second[:components].include?("all")
111
111
 
112
112
  in_current.each do |component|
113
- if @gem_data.include?("component_#{second_location}".to_sym)
114
- warnings << create_warning(component, "Included in #{first_location} but not #{second_location}") if @gem_data["component_#{second_location}".to_sym].include?(component)
113
+ if @gem_data.include?("component_#{second_location}".to_sym) && @gem_data["component_#{second_location}".to_sym].include?(component)
114
+ warnings << create_warning(component, "Included in #{first_location} but not #{second_location}")
115
115
  end
116
116
  end
117
117
  end
data/app/models/govuk_publishing_components/component_example.rb CHANGED
@@ -57,13 +57,14 @@ module GovukPublishingComponents
57
57
  # Safe HTML can be passed to components, simulate
58
58
  # by marking any string that comes from YAML as safe
59
59
  def html_safe_strings(obj)
60
- if obj.is_a?(String)
60
+ case obj
61
+ when String
61
62
  obj.html_safe
62
- elsif obj.is_a?(Hash)
63
+ when Hash
63
64
  obj.each do |key, value|
64
65
  obj[key] = html_safe_strings(value)
65
66
  end
66
- elsif obj.is_a?(Array)
67
+ when Array
67
68
  obj.map! { |e| html_safe_strings(e) }
68
69
  else
69
70
  obj
data/app/views/govuk_publishing_components/audit/show.html.erb CHANGED
@@ -39,98 +39,105 @@
39
39
  </div>
40
40
  </details>
41
41
 
42
- <div class="gem-c-accordion" data-module="gem-c-accordion" id="accordion-with-summary-sections">
43
- <% @applications.each_with_index do |application, index| %>
44
- <div class="gem-c-accordion__section ">
45
- <div class="gem-c-accordion__section-header">
46
- <h2 class="gem-c-accordion__section-heading">
47
- <span class="gem-c-accordion__section-button" id="accordion-with-summary-sections-heading-<%= index %>">
48
- <%= application[:name] %>
49
- </span>
50
- </h2>
51
- <div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-<%= index %>">
52
- <% if application[:application_found] %>
53
- Warnings:
54
- <% if application[:warning_count] > 0 %>
55
- <strong class="govuk-tag govuk-tag--red"><%= application[:warning_count] %></strong>
56
- <% else %>
57
- <%= application[:warning_count] %>
58
- <% end %>
59
- <% else %>
60
- <strong class="govuk-tag govuk-tag--red">Application not found</strong>
61
- <% end %>
62
- </div>
63
- </div>
64
- <div id="accordion-with-summary-sections-content-<%= index %>" class="gem-c-accordion__section-content" aria-labelledby="accordion-with-summary-sections-heading-<%= index %>">
65
- <% if application[:application_found] %>
66
- <% application[:warnings].each do |warning| %>
67
- <p class="govuk-body">
68
- <strong class="govuk-tag">Warn</strong>
69
- <strong><%= warning[:component] %></strong> - <%= warning[:message] %>
70
- </p>
71
- <% end %>
42
+ <% #application_items = [] %>
43
+ <% application_items = @applications.map do |application| %>
44
+ <%
45
+ summary = '<strong class="govuk-tag govuk-tag--red">Application not found</strong>'
72
46
 
73
- <%= render "govuk_publishing_components/components/heading", {
74
- text: "Components used",
75
- font_size: "m",
76
- margin_bottom: 4,
77
- heading_level: 3,
78
- } %>
47
+ if application[:application_found]
48
+ summary = "Warnings: 0"
49
+ if application[:warning_count] > 0
50
+ summary = "Warnings: <strong class=\"govuk-tag govuk-tag--red\">#{application[:warning_count]}</strong>"
51
+ end
52
+ end
53
+ %>
79
54
 
80
- <dl class="govuk-summary-list">
81
- <% application[:summary].each do |item| %>
82
- <div class="govuk-summary-list__row">
83
- <dt class="govuk-summary-list__key">
84
- <%= item[:name] %>
85
- </dt>
86
- <dd class="govuk-summary-list__value">
87
- <% if item[:value].length > 0 %>
88
- <%= item[:value] %>
89
- <% else %>
90
- None
91
- <% end %>
92
- </dd>
93
- </div>
94
- <% end %>
95
- </dl>
55
+ <% accordion_content = capture do %>
56
+ <% if application[:application_found] %>
57
+ <% application[:warnings].each do |warning| %>
58
+ <p class="govuk-body">
59
+ <strong class="govuk-tag">Warn</strong>
60
+ <strong><%= warning[:component] %></strong> - <%= warning[:message] %>
61
+ </p>
62
+ <% end %>
96
63
 
97
- <% if application[:gem_style_references].any? %>
98
- <%= render "govuk_publishing_components/components/heading", {
99
- text: "Component references",
100
- font_size: "m",
101
- margin_bottom: 4,
102
- heading_level: 3,
103
- } %>
64
+ <%= render "govuk_publishing_components/components/heading", {
65
+ text: "Components used",
66
+ font_size: "m",
67
+ margin_bottom: 4,
68
+ heading_level: 3,
69
+ } %>
104
70
 
105
- <p class="govuk-body">This shows instances of `gem-c-` classes found in the application. If a reference is found in a stylesheet or in code a warning is created, as this could be a style override or hard coded component markup.</p>
106
- <ul class="govuk-list govuk-list--bullet">
107
- <% application[:gem_style_references].each do |ref| %>
108
- <li><%= ref %></li>
71
+ <dl class="govuk-summary-list">
72
+ <% application[:summary].each do |item| %>
73
+ <div class="govuk-summary-list__row">
74
+ <dt class="govuk-summary-list__key">
75
+ <%= item[:name] %>
76
+ </dt>
77
+ <dd class="govuk-summary-list__value">
78
+ <% if item[:value].length > 0 %>
79
+ <%= item[:value] %>
80
+ <% else %>
81
+ None
109
82
  <% end %>
110
- </ul>
83
+ </dd>
84
+ </div>
85
+ <% end %>
86
+ </dl>
87
+
88
+ <% if application[:gem_style_references].any? %>
89
+ <%= render "govuk_publishing_components/components/heading", {
90
+ text: "Component references",
91
+ font_size: "m",
92
+ margin_bottom: 4,
93
+ heading_level: 3,
94
+ } %>
95
+
96
+ <p class="govuk-body">This shows instances of `gem-c-` classes found in the application. If a reference is found in a stylesheet or in code a warning is created, as this could be a style override or hard coded component markup.</p>
97
+ <ul class="govuk-list govuk-list--bullet">
98
+ <% application[:gem_style_references].each do |ref| %>
99
+ <li><%= ref %></li>
111
100
  <% end %>
101
+ </ul>
102
+ <% end %>
112
103
 
113
- <% if application[:jquery_references].any? %>
114
- <%= render "govuk_publishing_components/components/heading", {
115
- text: "jQuery references",
116
- font_size: "m",
117
- margin_bottom: 4,
118
- heading_level: 3,
119
- } %>
120
- <p class="govuk-body">This shows JavaScript files that might contain jQuery, which we are trying to remove our dependency on.</p>
121
- <ul class="govuk-list govuk-list--bullet">
122
- <% application[:jquery_references].each do |ref| %>
123
- <li><%= ref %></li>
124
- <% end %>
125
- </ul>
104
+ <% if application[:jquery_references].any? %>
105
+ <%= render "govuk_publishing_components/components/heading", {
106
+ text: "jQuery references",
107
+ font_size: "m",
108
+ margin_bottom: 4,
109
+ heading_level: 3,
110
+ } %>
111
+ <p class="govuk-body">This shows JavaScript files that might contain jQuery, which we are trying to remove our dependency on.</p>
112
+ <ul class="govuk-list govuk-list--bullet">
113
+ <% application[:jquery_references].each do |ref| %>
114
+ <li><%= ref %></li>
126
115
  <% end %>
127
- <% else %>
128
- <p class="govuk-body">This application was not found. This could be because you do not have this repository checked out locally.</p>
129
- <% end %>
130
- </div>
131
- </div>
116
+ </ul>
117
+ <% end %>
118
+ <% else %>
119
+ <p class="govuk-body">This application was not found. This could be because you do not have this repository checked out locally.</p>
120
+ <% end %>
132
121
  <% end %>
133
- </div>
122
+
123
+ <%
124
+ {
125
+ heading: {
126
+ text: application[:name]
127
+ },
128
+ summary: {
129
+ text: sanitize(summary)
130
+ },
131
+ content: {
132
+ html: sanitize(accordion_content)
133
+ },
134
+ }
135
+ %>
136
+ <% end %>
137
+
138
+ <%= render "govuk_publishing_components/components/accordion", {
139
+ items: application_items
140
+ } %>
134
141
  <% else %>
135
142
  <p class="govuk-body">No applications found.</p>
136
143
  <% end %>
@@ -144,125 +151,130 @@
144
151
  } %>
145
152
 
146
153
  <% if @components.any? %>
147
- <div class="gem-c-accordion" data-module="gem-c-accordion" id="accordion-default">
148
- <div class="gem-c-accordion__section ">
149
- <div class="gem-c-accordion__section-header">
150
- <h2 class="gem-c-accordion__section-heading">
151
- <span class="gem-c-accordion__section-button" id="accordion-default-heading-1">
152
- Component files
153
- </span>
154
- </h2>
155
- <div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-1">
156
- Lists what files each component has
157
- </div>
158
- </div>
159
- <div id="accordion-default-content-1" class="gem-c-accordion__section-content" aria-labelledby="accordion-default-heading-1">
160
- <table class="govuk-table">
161
- <thead class="govuk-table__head">
162
- <tr class="govuk-table__row">
163
- <th scope="col" class="govuk-table__header sticky-table-header">Component</th>
164
- <th scope="col" class="govuk-table__header sticky-table-header">Stylesheet</th>
165
- <th scope="col" class="govuk-table__header sticky-table-header">Print stylesheet</th>
166
- <th scope="col" class="govuk-table__header sticky-table-header">JS</th>
167
- <th scope="col" class="govuk-table__header sticky-table-header">Test</th>
168
- <th scope="col" class="govuk-table__header sticky-table-header">JS test</th>
169
- </tr>
170
- </thead>
171
- <tbody class="govuk-table__body">
172
- <% @components[:component_listing].each do |component| %>
173
- <tr class="govuk-table__row">
174
- <th scope="row" class="govuk-table__header">
175
- <a href="<%= component[:link] %>" class="govuk-link"><%= component[:name] %></a>
176
- </th>
177
- <td class="govuk-table__cell">
178
- <% if component[:stylesheet] %>
179
- <strong class="govuk-tag govuk-tag--green">Yes</strong>
180
- <% end %>
181
- </td>
182
- <td class="govuk-table__cell">
183
- <% if component[:print_stylesheet] %>
184
- <strong class="govuk-tag govuk-tag--green">Yes</strong>
185
- <% end %>
186
- </td>
187
- <td class="govuk-table__cell">
188
- <% if component[:javascript] %>
189
- <strong class="govuk-tag govuk-tag--green">Yes</strong>
190
- <% end %>
191
- </td>
192
- <td class="govuk-table__cell">
193
- <% if component[:tests] %>
194
- <strong class="govuk-tag govuk-tag--green">Yes</strong>
195
- <% end %>
196
- </td>
197
- <td class="govuk-table__cell">
198
- <% if component[:js_tests] %>
199
- <strong class="govuk-tag govuk-tag--green">Yes</strong>
200
- <% end %>
201
- </td>
202
- </tr>
203
- <% end %>
204
- </tbody>
205
- </table>
206
- </div>
207
- </div>
154
+ <% component_files = capture do %>
155
+ <table class="govuk-table">
156
+ <thead class="govuk-table__head">
157
+ <tr class="govuk-table__row">
158
+ <th scope="col" class="govuk-table__header sticky-table-header">Component</th>
159
+ <th scope="col" class="govuk-table__header sticky-table-header">Stylesheet</th>
160
+ <th scope="col" class="govuk-table__header sticky-table-header">Print stylesheet</th>
161
+ <th scope="col" class="govuk-table__header sticky-table-header">JS</th>
162
+ <th scope="col" class="govuk-table__header sticky-table-header">Test</th>
163
+ <th scope="col" class="govuk-table__header sticky-table-header">JS test</th>
164
+ </tr>
165
+ </thead>
166
+ <tbody class="govuk-table__body">
167
+ <% @components[:component_listing].each do |component| %>
168
+ <tr class="govuk-table__row">
169
+ <th scope="row" class="govuk-table__header">
170
+ <a href="<%= component[:link] %>" class="govuk-link"><%= component[:name] %></a>
171
+ </th>
172
+ <td class="govuk-table__cell">
173
+ <% if component[:stylesheet] %>
174
+ <strong class="govuk-tag govuk-tag--green">Yes</strong>
175
+ <% end %>
176
+ </td>
177
+ <td class="govuk-table__cell">
178
+ <% if component[:print_stylesheet] %>
179
+ <strong class="govuk-tag govuk-tag--green">Yes</strong>
180
+ <% end %>
181
+ </td>
182
+ <td class="govuk-table__cell">
183
+ <% if component[:javascript] %>
184
+ <strong class="govuk-tag govuk-tag--green">Yes</strong>
185
+ <% end %>
186
+ </td>
187
+ <td class="govuk-table__cell">
188
+ <% if component[:tests] %>
189
+ <strong class="govuk-tag govuk-tag--green">Yes</strong>
190
+ <% end %>
191
+ </td>
192
+ <td class="govuk-table__cell">
193
+ <% if component[:js_tests] %>
194
+ <strong class="govuk-tag govuk-tag--green">Yes</strong>
195
+ <% end %>
196
+ </td>
197
+ </tr>
198
+ <% end %>
199
+ </tbody>
200
+ </table>
201
+ <% end %>
208
202
 
209
- <div class="gem-c-accordion__section ">
210
- <div class="gem-c-accordion__section-header">
211
- <h2 class="gem-c-accordion__section-heading">
212
- <span class="gem-c-accordion__section-button" id="accordion-default-heading-2">
213
- Components containing components
214
- </span>
215
- </h2>
216
- <div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
217
- Shows which components contain other components
218
- </div>
219
- </div>
220
- <div id="accordion-default-content-2" class="gem-c-accordion__section-content" aria-labelledby="accordion-default-heading-2">
221
- <dl class="govuk-summary-list">
222
- <% @components[:components_containing_components].each do |component| %>
223
- <div class="govuk-summary-list__row">
224
- <dt class="govuk-summary-list__key">
225
- <a href="<%= component[:link] %>" class="govuk-link"><%= component[:component] %></a>
226
- </dt>
227
- <dd class="govuk-summary-list__value">
228
- <%= component[:sub_components].join(', ') %>
229
- </dd>
230
- </div>
231
- <% end %>
232
- </dl>
233
- </div>
234
- </div>
235
- <div class="gem-c-accordion__section ">
236
- <div class="gem-c-accordion__section-header">
237
- <h2 class="gem-c-accordion__section-heading">
238
- <span class="gem-c-accordion__section-button" id="accordion-default-heading-2">
239
- Components by application
240
- </span>
241
- </h2>
242
- <div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
243
- Shows which applications use each component
203
+ <% components_within_components = capture do %>
204
+ <dl class="govuk-summary-list">
205
+ <% @components[:components_containing_components].each do |component| %>
206
+ <div class="govuk-summary-list__row">
207
+ <dt class="govuk-summary-list__key">
208
+ <a href="<%= component[:link] %>" class="govuk-link"><%= component[:component] %></a>
209
+ </dt>
210
+ <dd class="govuk-summary-list__value">
211
+ <%= component[:sub_components].join(', ') %>
212
+ </dd>
244
213
  </div>
245
- </div>
246
- <div id="accordion-default-content-2" class="gem-c-accordion__section-content" aria-labelledby="accordion-default-heading-2">
247
- <% if @components[:components_by_application].any? %>
248
- <dl class="govuk-summary-list">
249
- <% @components[:components_by_application].each do |component| %>
250
- <div class="govuk-summary-list__row">
251
- <dt class="govuk-summary-list__key">
252
- <%= component[:component] %> (<%= component[:count] %>)
253
- </dt>
254
- <dd class="govuk-summary-list__value">
255
- <%= component[:list] %>
256
- </dd>
257
- </div>
258
- <% end %>
259
- </dl>
260
- <% else %>
261
- <p class="govuk-body">Sorry, no applications found.</p>
214
+ <% end %>
215
+ </dl>
216
+ <% end %>
217
+
218
+ <% components_by_application = capture do %>
219
+ <% if @components[:components_by_application].any? %>
220
+ <dl class="govuk-summary-list">
221
+ <% @components[:components_by_application].each do |component| %>
222
+ <div class="govuk-summary-list__row">
223
+ <dt class="govuk-summary-list__key">
224
+ <%= component[:component] %> (<%= component[:count] %>)
225
+ </dt>
226
+ <dd class="govuk-summary-list__value">
227
+ <%= component[:list] %>
228
+ </dd>
229
+ </div>
262
230
  <% end %>
263
- </div>
264
- </div>
265
- </div>
231
+ </dl>
232
+ <% else %>
233
+ <p class="govuk-body">Sorry, no applications found.</p>
234
+ <% end %>
235
+ <% end %>
236
+
237
+ <%
238
+ component_items = [
239
+ {
240
+ heading: {
241
+ text: "Component files",
242
+ },
243
+ summary: {
244
+ text: "Lists what files each component has",
245
+ },
246
+ content: {
247
+ html: component_files
248
+ },
249
+ },
250
+ {
251
+ heading: {
252
+ text: "Components containing other components",
253
+ },
254
+ summary: {
255
+ text: "Shows which components contain other components",
256
+ },
257
+ content: {
258
+ html: components_within_components
259
+ },
260
+ },
261
+ {
262
+ heading: {
263
+ text: "Components by application",
264
+ },
265
+ summary: {
266
+ text: "Shows which applications use each component",
267
+ },
268
+ content: {
269
+ html: components_by_application
270
+ },
271
+ },
272
+ ]
273
+ %>
274
+
275
+ <%= render "govuk_publishing_components/components/accordion", {
276
+ items: component_items
277
+ } %>
266
278
  <% else %>
267
279
  <p class="govuk-body">No components found.</p>
268
280
  <% end %>