Update design of metadata component

alphagov · May 10, 2021 · 62b5d80 · 62b5d80
1 parent 7d41d0a
commit 62b5d80
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 * Fix travel advice pages to use parent breadcrumbs ([PR #2050](https://github.com/alphagov/govuk_publishing_components/pull/2050))
 * Refactor heading logic in radio component ([PR #2051](https://github.com/alphagov/govuk_publishing_components/pull/2051))
+* Update design of metadata component ([PR #2046](https://github.com/alphagov/govuk_publishing_components/pull/2046))
 
 ## 24.10.1
 * Remove unused i18n keys ([PR #2038](https://github.com/alphagov/govuk_publishing_components/pull/2038))

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss b/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss
@@ -7,6 +7,11 @@
   a {
     @include govuk-link-common;
     @include govuk-link-style-default;
+    font-weight: bold;
+  }
+
+  .gem-c-metadata__definition-link {
+    font-weight: normal;
   }
 }
 
@@ -29,17 +34,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: govuk-spacing(1);
     margin-top: 0;
   }
 }
@@ -49,31 +56,21 @@
   clear: right;
 
   @include govuk-media-query($from: tablet) {
-    padding-left: govuk-spacing(2);
+    padding-left: govuk-spacing(1);
     padding-right: 0;
   }
 }
 
 .gem-c-metadata__definition {
   margin: 0;
-  line-height: 1.4;
 
   @include govuk-media-query($from: tablet) {
-    float: left;
-    width: 70%;
+    &:not(:last-of-type) {
+      margin-bottom: govuk-spacing(1);
+    }
   }
 }
 
-.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 {
   float: right;
 }

diff --git a/app/views/govuk_publishing_components/components/_metadata.html.erb b/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">

diff --git a/config/locales/en.yml b/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:

diff --git a/spec/components/metadata_spec.rb b/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)