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