Update design of metadata component

CHANGELOG.md

@@ -13,6 +13,7 @@
 ## Unreleased
 
 * Update postcode regex for PII stripping ([PR #2043](https://github.com/alphagov/govuk_publishing_components/pull/2043))
+* Update design of metadata component ([PR #2046](https://github.com/alphagov/govuk_publishing_components/pull/2046))
 
 ## 24.10.0
 

app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss

@@ -1,3 +1,5 @@
+$space-between-data: govuk-spacing(1);
+
 .gem-c-metadata {
   @include govuk-text-colour;
   @include govuk-font(16);
@@ -7,6 +9,11 @@
   a {
     @include govuk-link-common;
     @include govuk-link-style-default;
+    font-weight: bold;
+  }
+
+  .gem-c-metadata__definition-link {
+    font-weight: normal;
   }
 }
 
@@ -29,17 +36,19 @@
   }
 }
 
+.gem-c-metadata__term,
+.gem-c-metadata__definition {
+  line-height: 1.4;
+}
+
 .gem-c-metadata__term {
   margin-top: .5em;
-  line-height: 1.4;
 
   @include govuk-media-query($from: tablet) {
     box-sizing: border-box;
     float: left;
     clear: left;
-    width: 30%;
-    max-width: 11em;
-    padding-right: govuk-spacing(2);
+    padding-right: $space-between-data;
     margin-top: 0;
   }
 }
@@ -49,29 +58,13 @@
   clear: right;
 
   @include govuk-media-query($from: tablet) {
-    padding-left: govuk-spacing(2);
+    padding-left: $space-between-data;
     padding-right: 0;
   }
 }
 
 .gem-c-metadata__definition {
   margin: 0;
-  line-height: 1.4;
-
-  @include govuk-media-query($from: tablet) {
-    float: left;
-    width: 70%;
-  }
-}
-
-.gem-c-metadata__definition-link {
-  text-decoration: none;
-}
-
-.gem-c-metadata__definition-link:focus,
-.gem-c-metadata__definition-link:active,
-.gem-c-metadata__definition-link:hover {
-  text-decoration: underline;
 }
 
 .gem-c-metadata.direction-rtl .gem-c-metadata__definition {

app/views/govuk_publishing_components/components/_metadata.html.erb

@@ -34,14 +34,15 @@
       <dd class="gem-c-metadata__definition"><%= history %></dd>
     <% end %>
     <% if local_assigns.include?(:first_published) && first_published %>
-      <dt class="gem-c-metadata__term"><%= t("components.metadata.published", default: "Published") %>:</dt>
+      <dt class="gem-c-metadata__term"><%= t("components.metadata.published", default: "Published") %></dt>
       <dd class="gem-c-metadata__definition"><%= first_published %></dd>
     <% end %>
     <% if local_assigns.include?(:last_updated) && last_updated %>
-      <dt class="gem-c-metadata__term"><%= t("components.metadata.last_updated", default: "Last updated") %>:</dt>
+      <dt class="gem-c-metadata__term"><%= t("components.metadata.last_updated", default: "Last updated") %></dt>
       <dd class="gem-c-metadata__definition">
-        <%= last_updated %><% if local_assigns.include?(:see_updates_link) %>,
-          <a href="#history" class="gem-c-metadata__definition-link"
+        <%= last_updated %>
+        <% if local_assigns.include?(:see_updates_link) %>
+          &#8212; <a href="#history" class="gem-c-metadata__definition-link"
                              data-track-category="content-history"
                              data-track-action="see-all-updates-link-clicked"
                              data-track-label="history">

app/views/govuk_publishing_components/components/metadata/_sentence.html.erb

@@ -7,7 +7,7 @@
   end
 %>
 <% if remaining.any? %>
-  <%= items.to_sentence(last_word_connector: ', ').html_safe %>
+  <%= items.to_sentence(words_connector: raw('<span aria-hidden="true">,</span> '),last_word_connector: raw('<span aria-hidden="true">,</span> ')).html_safe %>
   <div class="gem-c-metadata__toggle-wrap">
     <a href="#"
        class="gem-c-metadata__definition-link"
@@ -17,7 +17,7 @@
         <%= t("components.metadata.toggle_more", number: remaining.length, default: "+ #{remaining.length} more") %>
     </a>
   </div>
-  <span id="toggle-<%= toggle_id %>" class="gem-c-metadata__toggle-items js-hidden"><%= remaining.to_sentence.html_safe %></span>
+  <span id="toggle-<%= toggle_id %>" class="gem-c-metadata__toggle-items js-hidden"><%= remaining.to_sentence(words_connector: raw('<span aria-hidden="true">,</span> ')).html_safe %></span>
 <% else %>
-  <%= items.to_sentence.html_safe %>
+  <%= items.to_sentence(words_connector: raw('<span aria-hidden="true">,</span> '),last_word_connector: raw('<span aria-hidden="true">,</span> and ')).html_safe %>
 <% end %>

config/locales/en.yml

@@ -66,6 +66,15 @@ en:
       hide_button: "Hide search"
       top_level: "Top level"
       menu: "Menu"
+    metadata:
+      from: "From"
+      part_of: "Part of"
+      history: "History"
+      published: "Published"
+      last_updated: "Last updated"
+      see_all_updates: "See all updates"
+      toggle_less: "Show fewer"
+      toggle_more: "+ %{number} more"
     organisation_schema:
       all_content_search_description: "Find all content from %{organisation}"
     radio:

spec/components/metadata_spec.rb

@@ -201,20 +201,20 @@ def component_name
   end
 
   def assert_truncation(length, limit)
-    assert_select "span", count: 1
-    assert_select "dd > a", count: limit
-    assert_select "dd span a", count: length - limit
+    assert_select ".gem-c-metadata__toggle-items", count: 1
+    assert_select ".gem-c-metadata__definition > a", count: limit
+    assert_select ".gem-c-metadata__definition .gem-c-metadata__toggle-items a", count: length - limit
     assert_select "a[href=\"#\"]", text: "+ #{length - limit} more"
   end
 
   def assert_no_truncation(length)
-    assert_select "dd > a", count: length
-    assert_select "span", count: 0
+    assert_select ".gem-c-metadata__definition > a", count: length
+    assert_select ".gem-c-metadata__toggle-items", count: 0
   end
 
   def assert_definition(term, definition)
-    assert_select "dt", text: term
-    assert_select "dd", text: definition
+    assert_select ".gem-c-metadata__term", text: term
+    assert_select ".gem-c-metadata__definition", text: definition
   end
 
   def assert_link_with_text_in(selector, link, text)