diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1d34051b6..7d04c5c91d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@
useful summary for people upgrading their application, not a replication
of the commit log.
+## Unreleased
+
+* Add 'toggle' module to each expandable region in metadata component ([PR #4397](https://github.com/alphagov/govuk_publishing_components/pull/4397))
+
## 45.9.0
* Limit chart heading width ([PR #4435](https://github.com/alphagov/govuk_publishing_components/pull/4435))
diff --git a/app/views/govuk_publishing_components/components/_metadata.html.erb b/app/views/govuk_publishing_components/components/_metadata.html.erb
index 480ebef0fc..1493e3d270 100644
--- a/app/views/govuk_publishing_components/components/_metadata.html.erb
+++ b/app/views/govuk_publishing_components/components/_metadata.html.erb
@@ -35,7 +35,7 @@
section: "Top",
}.to_json unless disable_ga4
%>
-<%= content_tag :div, class: classes, data: { module: "gem-toggle metadata" } do %>
+<%= content_tag :div, class: classes, data: { module: "metadata" } do %>
<% if title.present? %>
<%= content_tag :div, class: "gem-c-metadata__title" do %>
<%= render "govuk_publishing_components/components/heading", {
@@ -49,13 +49,13 @@
<% if from.any? %>
- <%= t("components.metadata.from") %>:
- -
+
-
<%= render 'govuk_publishing_components/components/metadata/sentence', items: from, toggle_id: "from-#{SecureRandom.hex(4)}" %>
<% end %>
<% if part_of.any? %>
- <%= t("components.metadata.part_of") %>:
- -
+
-
<%= render 'govuk_publishing_components/components/metadata/sentence', items: part_of, toggle_id: "part-of-#{SecureRandom.hex(4)}" %>
<% end %>
@@ -88,11 +88,13 @@
<% if definition.any? %>
- <%= title %>:
-
- data-module="ga4-link-tracker"
- data-ga4-track-links-only
- data-ga4-link="<%= ga4_object %>"
- <% end%>>
+ <% if disable_ga4 %>
+ data-module="gem-toggle"
+ <% else %>
+ data-module="gem-toggle ga4-link-tracker"
+ data-ga4-track-links-only
+ data-ga4-link="<%= ga4_object %>"
+ <% end%>>
<%= render 'govuk_publishing_components/components/metadata/sentence', items: definition, toggle_id: "#{index}-#{SecureRandom.hex(4)}" %>
<% end %>
diff --git a/app/views/govuk_publishing_components/components/docs/metadata.yml b/app/views/govuk_publishing_components/components/docs/metadata.yml
index 5f4583061b..abc4119a6f 100644
--- a/app/views/govuk_publishing_components/components/docs/metadata.yml
+++ b/app/views/govuk_publishing_components/components/docs/metadata.yml
@@ -46,8 +46,15 @@ examples:
- Environment
other:
Related topics:
- - Arts and culture
- - Sports and leisure
+ - Topic 1
+ - Topic 2
+ - Topic 3
+ - Topic 4
+ - Topic 5
+ - Topic 6
+ - Topic 7
+ - Topic 8
+ - Topic 9
Applies to: England
extensive_specialist_document:
data:
diff --git a/spec/components/metadata_spec.rb b/spec/components/metadata_spec.rb
index 0250c215ff..c431544a90 100644
--- a/spec/components/metadata_spec.rb
+++ b/spec/components/metadata_spec.rb
@@ -213,6 +213,22 @@ def component_name
assert_select '.gem-c-metadata.govuk-\!-margin-bottom-2'
end
+ it "renders the component with 3 toggle sections for 'part of', 'from' and 'other'" do
+ render_component(
+ part_of: "Department",
+ from: [
+ "From 1",
+ ],
+ other: {
+ "Related topics": [
+ "Topic 1",
+ ],
+ },
+ )
+
+ assert_select "[data-module*=\"gem-toggle\"]", count: 3
+ end
+
it "adds GA4 tracking to the 'see all updates' link" do
render_component(last_updated: "Hello World", see_updates_link: true, other: { "Updated" => "13 April 2023, see all updates" })
@@ -223,7 +239,7 @@ def component_name
}.to_json
assert_select ".gem-c-metadata__definition:nth-of-type(2)" do |alternate_see_all_updates_container|
- expect(alternate_see_all_updates_container.attr("data-module").to_s).to eq "ga4-link-tracker"
+ expect(alternate_see_all_updates_container.attr("data-module").to_s).to eq "gem-toggle ga4-link-tracker"
expect(alternate_see_all_updates_container.attr("data-ga4-track-links-only").to_s).to eq ""
expect(alternate_see_all_updates_container.attr("data-ga4-link").to_s).to eq expected_ga4_json
end