Add styles for edit page

- makes `govuk-tag` colours global
- adds page specific display style for tags on edit page

app/assets/stylesheets/application.scss

@@ -30,7 +30,9 @@ $govuk-page-width: 1140px;
 @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/assets/stylesheets/editions.scss

@@ -0,0 +1,5 @@
+.editions__edit {
+  .govuk-tag {
+    display: inline;
+  }
+}

app/assets/stylesheets/publications.scss

@@ -32,44 +32,6 @@ $width: 40;
     font-size: 1.1875rem;
   }
 
-  .govuk-tag {
-    &--amends_needed {
-      @extend .govuk-tag--red; // stylelint-disable-line scss/at-extend-no-missing-placeholder
-    }
-
-    &--archived {
-      @extend .govuk-tag--blue; // stylelint-disable-line scss/at-extend-no-missing-placeholder
-    }
-
-    &--draft {
-      @extend .govuk-tag--yellow; // stylelint-disable-line scss/at-extend-no-missing-placeholder
-    }
-
-    &--fact_check {
-      @extend .govuk-tag--purple; // stylelint-disable-line scss/at-extend-no-missing-placeholder
-    }
-
-    &--fact_check_received {
-      @extend .govuk-tag--pink; // stylelint-disable-line scss/at-extend-no-missing-placeholder
-    }
-
-    &--ready {
-      @extend .govuk-tag--green; // stylelint-disable-line scss/at-extend-no-missing-placeholder
-    }
-
-    &--scheduled_for_publishing {
-      @extend .govuk-tag--turquoise; // stylelint-disable-line scss/at-extend-no-missing-placeholder
-    }
-
-    &--published {
-      @extend .govuk-tag--orange; // stylelint-disable-line scss/at-extend-no-missing-placeholder
-    }
-
-    &--in_review {
-      @extend .govuk-tag--grey; // stylelint-disable-line scss/at-extend-no-missing-placeholder
-    }
-  }
-
   .govuk-table {
     border-top: 2px solid $govuk-text-colour;
   }

app/assets/stylesheets/tags.scss

@@ -0,0 +1,37 @@
+.govuk-tag {
+  &--amends_needed {
+    @extend .govuk-tag--red; // stylelint-disable-line scss/at-extend-no-missing-placeholder
+  }
+
+  &--archived {
+    @extend .govuk-tag--blue; // stylelint-disable-line scss/at-extend-no-missing-placeholder
+  }
+
+  &--draft {
+    @extend .govuk-tag--yellow; // stylelint-disable-line scss/at-extend-no-missing-placeholder
+  }
+
+  &--fact_check {
+    @extend .govuk-tag--purple; // stylelint-disable-line scss/at-extend-no-missing-placeholder
+  }
+
+  &--fact_check_received {
+    @extend .govuk-tag--pink; // stylelint-disable-line scss/at-extend-no-missing-placeholder
+  }
+
+  &--ready {
+    @extend .govuk-tag--green; // stylelint-disable-line scss/at-extend-no-missing-placeholder
+  }
+
+  &--scheduled_for_publishing {
+    @extend .govuk-tag--turquoise; // stylelint-disable-line scss/at-extend-no-missing-placeholder
+  }
+
+  &--published {
+    @extend .govuk-tag--orange; // stylelint-disable-line scss/at-extend-no-missing-placeholder
+  }
+
+  &--in_review {
+    @extend .govuk-tag--grey; // stylelint-disable-line scss/at-extend-no-missing-placeholder
+  }
+}

app/views/editions/show.html.erb

@@ -3,21 +3,23 @@
 <% content_for :page_title, @resource.title %>
 <% content_for :title, @resource.title %>
 
-<div class="govuk-grid-column-two-thirds">
-  <%= render "govuk_publishing_components/components/summary_list", {
-    items: [
-      {
-        field: "Assigned to",
-        value: @resource.assigned_to
-      },
-      {
-        field: "Content type",
-        value: @resource.format.underscore.humanize
-      },
-      {
-        field: "Edition",
-        value: sanitize("#{@resource.version_number} <span class='govuk-tag govuk-tag--#{@resource.state}'>#{@resource.status_text}</span>")
-      }
-    ]
-  } %>
+<div class="govuk-grid-column-full-width editions__edit">
+  <div class="govuk-grid-column-two-thirds">
+    <%= render "govuk_publishing_components/components/summary_list", {
+      items: [
+        {
+          field: "Assigned to",
+          value: @resource.assigned_to
+        },
+        {
+          field: "Content type",
+          value: @resource.format.underscore.humanize
+        },
+        {
+          field: "Edition",
+          value: sanitize("#{@resource.version_number} <span class='govuk-tag govuk-tag--#{@resource.state}'>#{@resource.status_text}</span>")
+        }
+      ]
+    } %>
+  </div>
 </div>

test/integration/edition_edit_test.rb

@@ -0,0 +1,25 @@
+require "integration_test_helper"
+
+class EditionEditTest < IntegrationTest
+  setup do
+    setup_users
+    test_strategy = Flipflop::FeatureSet.current.test!
+    test_strategy.switch!(:design_system_edit, true)
+    stub_linkables
+  end
+
+  should "show document summary and title" do
+    edition = FactoryBot.create(:guide_edition, title: "Edit page title", state: "draft")
+    visit edition_path(edition)
+
+    assert page.has_title?("Edit page title")
+
+    row = find_all(".govuk-summary-list__row")
+    assert row[0].has_content?("Assigned to")
+    assert row[1].has_text?("Content type")
+    assert row[1].has_text?("Guide")
+    assert row[2].has_text?("Edition")
+    assert row[2].has_text?("1")
+    assert row[2].has_text?("Draft")
+  end
+end