Merge pull request #4397 from alphagov/add-toggle-module-to-each-expa…

…ndable-region-in-metadata-component Add 'toggle' module to each expandable region in metadata component
alphagov · Nov 28, 2024 · 67f4b59 · 67f4b59
2 parents d4ae0dc + 2c77044
commit 67f4b59
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 11 deletions.
diff --git 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
@@ -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 @@
   <dl class="gem-c-metadata__list">
     <% if from.any? %>
       <dt class="gem-c-metadata__term"><%= t("components.metadata.from") %>:</dt>
-      <dd class="gem-c-metadata__definition">
+      <dd class="gem-c-metadata__definition" data-module="gem-toggle">
         <%= render 'govuk_publishing_components/components/metadata/sentence', items: from, toggle_id: "from-#{SecureRandom.hex(4)}" %>
       </dd>
     <% end %>
     <% if part_of.any? %>
       <dt class="gem-c-metadata__term"><%= t("components.metadata.part_of") %>:</dt>
-      <dd class="gem-c-metadata__definition">
+      <dd class="gem-c-metadata__definition" data-module="gem-toggle">
         <%= render 'govuk_publishing_components/components/metadata/sentence', items: part_of, toggle_id: "part-of-#{SecureRandom.hex(4)}" %>
       </dd>
     <% end %>
@@ -88,11 +88,13 @@
         <% if definition.any? %>
           <dt class="gem-c-metadata__term"><%= title %>:</dt>
           <dd class="gem-c-metadata__definition"
-              <% unless disable_ga4 %>
-                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)}" %>
           </dd>
         <% end %>

diff --git 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:
       - <a href='/government/topics/environment'>Environment</a>
       other:
         Related topics:
-        - <a href='/government/topics/arts-and-culture'>Arts and culture</a>
-        - <a href='/government/topics/sports-and-leisure'>Sports and leisure</a>
+        - <a href='/government/topics/topic-1'>Topic 1</a>
+        - <a href='/government/topics/topic-2'>Topic 2</a>
+        - <a href='/government/topics/topic-3'>Topic 3</a>
+        - <a href='/government/topics/topic-4'>Topic 4</a>
+        - <a href='/government/topics/topic-5'>Topic 5</a>
+        - <a href='/government/topics/topic-6'>Topic 6</a>
+        - <a href='/government/topics/topic-7'>Topic 7</a>
+        - <a href='/government/topics/topic-8'>Topic 8</a>
+        - <a href='/government/topics/topic-9'>Topic 9</a>
         Applies to: England
   extensive_specialist_document:
     data:

diff --git 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: "<a href='/link'>Department</a>",
+      from: [
+        "<a href='/from-1'>From 1</a>",
+      ],
+      other: {
+        "Related topics": [
+          "<a href='/government/topics/topic-1'>Topic 1</a>",
+        ],
+      },
+    )
+
+    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, <a href=\"/hmrc-internal-manuals/self-assessment-claims-manual/updates\">see all updates</a>" })
 
@@ -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