From 89fb1562f3aeb485defc495b2d006c954ea87751 Mon Sep 17 00:00:00 2001 From: owenatgov Date: Tue, 4 May 2021 18:33:51 +0100 Subject: [PATCH] Update design of metadata component --- CHANGELOG.md | 1 + .../components/_metadata.scss | 35 ++++++++----------- .../components/_metadata.html.erb | 9 ++--- .../components/metadata/_sentence.html.erb | 6 ++-- config/locales/en.yml | 9 +++++ spec/components/metadata_spec.rb | 14 ++++---- 6 files changed, 39 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 796de35f6c..279ff2a37c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss b/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss index 2478e35bc0..afa1d66ac3 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss +++ b/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 { diff --git a/app/views/govuk_publishing_components/components/_metadata.html.erb b/app/views/govuk_publishing_components/components/_metadata.html.erb index 8e352eb1cd..bfa5ab1807 100644 --- a/app/views/govuk_publishing_components/components/_metadata.html.erb +++ b/app/views/govuk_publishing_components/components/_metadata.html.erb @@ -34,14 +34,15 @@
<%= history %>
<% end %> <% if local_assigns.include?(:first_published) && first_published %> -
<%= t("components.metadata.published", default: "Published") %>:
+
<%= t("components.metadata.published", default: "Published") %>
<%= first_published %>
<% end %> <% if local_assigns.include?(:last_updated) && last_updated %> -
<%= t("components.metadata.last_updated", default: "Last updated") %>:
+
<%= t("components.metadata.last_updated", default: "Last updated") %>
- <%= last_updated %><% if local_assigns.include?(:see_updates_link) %>, - + <% if local_assigns.include?(:see_updates_link) %> + — diff --git a/app/views/govuk_publishing_components/components/metadata/_sentence.html.erb b/app/views/govuk_publishing_components/components/metadata/_sentence.html.erb index d9ab8876c9..3fa042bb0b 100644 --- a/app/views/govuk_publishing_components/components/metadata/_sentence.html.erb +++ b/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(' '),last_word_connector: raw(' ')).html_safe %>
- <%= remaining.to_sentence.html_safe %> + <%= remaining.to_sentence(words_connector: raw(' ')).html_safe %> <% else %> - <%= items.to_sentence.html_safe %> + <%= items.to_sentence(words_connector: raw(' '),last_word_connector: raw(' and ')).html_safe %> <% end %> diff --git a/config/locales/en.yml b/config/locales/en.yml index bfe2984062..392e99bd8a 100644 --- 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 index 4e36c115d9..6433184a81 100644 --- 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)