Merge pull request #3486 from alphagov/published-dates-wrapper

Use component wrapper in published dates component
alphagov · Dec 19, 2024 · 9082d53 · 9082d53
2 parents 5d8746c + 1dd5045
commit 9082d53
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 47 deletions.
diff --git a/app/assets/stylesheets/helpers/_parts.scss b/app/assets/stylesheets/helpers/_parts.scss
@@ -3,13 +3,12 @@
     margin-top: govuk-spacing(6);
     margin-bottom: govuk-spacing(6);
     padding-bottom: govuk-spacing(3);
+    border-bottom: 1px solid govuk-colour("mid-grey");
 
     @include govuk-media-query($from: tablet) {
       margin-top: 0;
       margin-bottom: 0;
     }
-
-    border-bottom: 1px solid govuk-colour("mid-grey");
   }
 
   .part-navigation {

diff --git a/app/views/components/_published_dates.html.erb b/app/views/components/_published_dates.html.erb
@@ -1,46 +1,50 @@
-<% add_app_component_stylesheet("published-dates") %>
 <%
+  add_app_component_stylesheet("published-dates")
+
   published ||= false
   history ||= []
   history = Array(history)
   last_updated ||= false
   link_to_history ||= false
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = %w(app-c-published-dates)
-  classes << "app-c-published-dates--history" if history.any?
-  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("app-c-published-dates")
+  component_helper.add_class("app-c-published-dates--history") if history.any?
+  component_helper.set_id("full-publication-update-history") if history.any?
+  component_helper.add_data_attribute({ module: "gem-toggle" }) if history.any?
+  component_helper.set_lang("en")
 %>
 <% if published || last_updated %>
-  <h2 class="govuk-visually-hidden"><%= t('components.published_dates.hidden_heading') %></h2>
-<div class="<%= classes.join(' ') %>" <% if history.any? %>id="full-publication-update-history" data-module="gem-toggle"<% end %> lang="en">
-  <% if published %>
-    <%= t('components.published_dates.published', date: published) %>
-  <% end %>
-  <% if last_updated %>
-    <% if published %><br /><% end %><%= t('components.published_dates.last_updated', date: last_updated) %>
-    <% if link_to_history && history.empty? %>
-      &mdash; <a href="#history" class="app-c-published-dates__history-link govuk-link"><%= t('components.published_dates.see_all_updates', locale: :en) %></a>
-    <% elsif history.any? %>
-      <a href="#full-history"
-      class="app-c-published-dates__toggle govuk-link"
-      data-controls="full-history"
-      data-expanded="false"
-      data-toggled-text="&#45;&nbsp;<%= t('components.published_dates.hide_all_updates', locale: :en) %>"
-      data-module="ga4-event-tracker"
-      data-ga4-event="<%= {event_name: "select_content", type: "content history", section: "Footer"}.to_json %>"
-      data-ga4-expandable
-      >&#43;&nbsp;<%= t('components.published_dates.show_all_updates', locale: :en) %></a>
-      <div class="app-c-published-dates__change-history js-hidden" id="full-history">
-        <ol class="app-c-published-dates__list">
-          <% history.each do |change| %>
-            <li class="app-c-published-dates__change-item">
-              <time class="app-c-published-dates__change-date timestamp" datetime="<%= change[:timestamp] %>"><%= change[:display_time] %></time>
-              <p class="app-c-published-dates__change-note"><%= change[:note].strip %></p>
-            </li>
-          <% end %>
-        </ol>
-      </div>
+  <%= tag.div(**component_helper.all_attributes) do %>
+    <h2 class="govuk-visually-hidden"><%= t('components.published_dates.hidden_heading') %></h2>
+    <% if published %>
+      <%= t('components.published_dates.published', date: published) %>
+    <% end %>
+    <% if last_updated %>
+      <% if published %><br /><% end %><%= t('components.published_dates.last_updated', date: last_updated) %>
+      <% if link_to_history && history.empty? %>
+        &mdash; <a href="#history" class="app-c-published-dates__history-link govuk-link"><%= t('components.published_dates.see_all_updates', locale: :en) %></a>
+      <% elsif history.any? %>
+        <a href="#full-history"
+        class="app-c-published-dates__toggle govuk-link"
+        data-controls="full-history"
+        data-expanded="false"
+        data-toggled-text="&#45;&nbsp;<%= t('components.published_dates.hide_all_updates', locale: :en) %>"
+        data-module="ga4-event-tracker"
+        data-ga4-event="<%= {event_name: "select_content", type: "content history", section: "Footer"}.to_json %>"
+        data-ga4-expandable
+        >&#43;&nbsp;<%= t('components.published_dates.show_all_updates', locale: :en) %></a>
+        <div class="app-c-published-dates__change-history js-hidden" id="full-history">
+          <ol class="app-c-published-dates__list">
+            <% history.each do |change| %>
+              <li class="app-c-published-dates__change-item">
+                <time class="app-c-published-dates__change-date timestamp" datetime="<%= change[:timestamp] %>"><%= change[:display_time] %></time>
+                <p class="app-c-published-dates__change-note"><%= change[:note].strip %></p>
+              </li>
+            <% end %>
+          </ol>
+        </div>
+      <% end %>
     <% end %>
   <% end %>
-</div>
 <% end %>
diff --git a/app/views/components/docs/published_dates.yml b/app/views/components/docs/published_dates.yml
@@ -8,6 +8,7 @@ accessibility_criteria: |
     - be usable with a keyboard
 shared_accessibility_criteria:
   - link
+uses_component_wrapper_helper: true
 examples:
   default:
     data:
@@ -40,9 +41,3 @@ examples:
       - display_time: 14th October 2000
         note: Updated information on pupil premium reviews and what information schools need to publish on their websites.
         timestamp: 2000-10-14T15:42:37.000+00:00
-  with_custom_margin_bottom:
-    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). By default, the component does not have a bottom margin.
-    data:
-      published: 1st January 1990
-      margin_bottom: 8
diff --git a/test/components/published_dates_test.rb b/test/components/published_dates_test.rb
@@ -11,14 +11,15 @@ def component_name
 
   test "renders published date" do
     render_component(published: "1st November 2000")
-    assert_select ".app-c-published-dates", text: "Published 1st November 2000"
+    assert_select ".app-c-published-dates", text: "Updates to this page
+      Published 1st November 2000"
   end
 
   test "renders published date and last updated date" do
     render_component(published: "1st November 2000", last_updated: "15th July 2015")
-    assert_select ".app-c-published-dates",
-                  text: "Published 1st November 2000
-    Last updated 15th July 2015"
+    assert_select ".app-c-published-dates", text: "Updates to this page
+      Published 1st November 2000
+      Last updated 15th July 2015"
   end
 
   test "links to full page history" do