Merge pull request #2352 from alphagov/439_Implement-new-Summary_Card…

…-component

439 implement new summary card component

app/assets/stylesheets/application.scss

@@ -29,13 +29,13 @@ $govuk-page-width: 1140px;
 @import 'govuk_publishing_components/components/select';
 @import 'govuk_publishing_components/components/skip-link';
 @import 'govuk_publishing_components/components/success-alert';
+@import 'govuk_publishing_components/components/summary-card';
 @import 'govuk_publishing_components/components/summary-list';
 @import 'govuk_publishing_components/components/table';
 @import 'govuk_publishing_components/components/textarea';
 @import 'govuk_publishing_components/components/title';
 @import "tags";
 @import "downtimes";
 @import "publications";
-@import "summary-card";
 @import "popular_links";
 @import "editions";

app/views/homepage/popular_links/_link.html.erb

@@ -1,4 +1,4 @@
-<%= render "shared/summary_card", {
-  title: "Link #{index +1}" ,
+<%= render "govuk_publishing_components/components/summary_card", {
+  title: "Link #{index +1}",
   rows: popular_link_rows(item),
 } %>

app/views/homepage/popular_links/_version_and_status.html.erb

@@ -1,5 +1,4 @@
-<% status_tags = { :published=> "govuk-tag--green", :draft => "govuk-tag--yellow" } %>
-<% status_tag = tag.strong status.capitalize, class: ["govuk-tag",status_tags[status.to_sym]] %>
+<% status_tag = tag.strong status.humanize, class: "govuk-tag govuk-tag--#{status}" %>
 
 <%= render "govuk_publishing_components/components/summary_list", {
   items: [
@@ -12,4 +11,4 @@
       value: status_tag,
     },
   ],
-} %>
+} %>

app/views/homepage/popular_links/show.html.erb

@@ -1,12 +1,19 @@
 <% content_for :page_title, "Popular on GOV.UK" %>
 <% content_for :title, "Popular on GOV.UK" %>
 <% content_for :title_context, "Homepage" %>
+
 <div class="govuk-grid-column-two-thirds">
-  <%= render "homepage/popular_links/version_and_status", version: @latest_popular_links.version_number, status: @latest_popular_links.state %>
-  <% @latest_popular_links.link_items.each_with_index do |item, index| %>
-    <%= render "homepage/popular_links/link", item:, index: %>
-  <% end %>
+  <section>
+    <%= render "homepage/popular_links/version_and_status", version: @latest_popular_links.version_number, status: @latest_popular_links.state %>
+  </section>
+
+  <section>
+    <% @latest_popular_links.link_items.each_with_index do |item, index| %>
+      <%= render "homepage/popular_links/link", item:, index: %>
+    <% end %>
+  </section>
 </div>
+
 <div class = "govuk-grid-column-one-third popular-links__sidebar" >
   <%= render "homepage/popular_links/sidebar" %>
 </div>

test/integration/homepage_popular_links_test.rb

@@ -40,7 +40,7 @@ class HomepagePopularLinksTest < JavascriptIntegrationTest
         assert page.has_text?(@popular_links.version_number)
         assert page.has_text?("Status")
         assert page.has_text?("Published")
-        assert page.has_css?(".govuk-tag--green")
+        assert page.has_css?(".govuk-tag--published")
       end
 
       should "have link to view 'GOV.UK'" do
@@ -58,7 +58,7 @@ class HomepagePopularLinksTest < JavascriptIntegrationTest
 
       should "render new draft popular links with edit option when 'Create new edition' button is clicked" do
         click_button("Create new edition")
-        within(:css, ".govuk-tag--yellow") do
+        within(:css, ".govuk-tag--draft") do
           assert page.has_content?("Draft")
         end
       end
@@ -72,7 +72,7 @@ class HomepagePopularLinksTest < JavascriptIntegrationTest
         assert page.has_text?(@popular_links.version_number)
         assert page.has_text?("Status")
         assert page.has_text?("Draft")
-        assert page.has_css?(".govuk-tag--yellow")
+        assert page.has_css?(".govuk-tag--draft")
         assert page.has_text?("Edit popular links")
       end