From 70bfd7d83a26b92eff820708f101aaa215b7449b Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Wed, 23 Aug 2017 18:21:31 +0100
Subject: [PATCH] Fix preview partials

---
 .../component_guide.scss                      | 22 ++++---------------
 .../component_doc/_preview.html.erb           |  9 +-------
 .../component_guide/preview.html.erb          | 15 ++++---------
 .../component_guide/show.html.erb             |  8 +++++--
 4 files changed, 15 insertions(+), 39 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/component_guide.scss b/app/assets/stylesheets/govuk_publishing_components/component_guide.scss
index f44d8112e1..2836c9e8f3 100644
--- a/app/assets/stylesheets/govuk_publishing_components/component_guide.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/component_guide.scss
@@ -86,9 +86,10 @@ $border-color: #ccc;
 }
 
 .component-guide-preview {
-  padding: ($gutter * 1.5) $gutter $gutter;
   border: 1px solid $border-colour;
   position: relative;
+  padding: $gutter;
+  padding-top: ($gutter * 1.5);
 
   &:before {
     @include core-14;
@@ -101,26 +102,11 @@ $border-color: #ccc;
     color: $white;
   }
 
-  div[class^="govuk-"] {
-    &:hover {
-      outline: 1px solid $border-color;
-      box-shadow: 0 0 10px $border-color;
-    }
-  }
-}
-
-.component-guide-preview--flush {
-  padding: 0;
-  padding-top: 1em;
-  border: none;
-
-  &:before {
-    display: none;
-  }
 }
 
 .component-guide-preview-title {
-  margin-top: 1em;
+  margin-top: $gutter;
+  margin-bottom: $gutter;
   @include bold-16;
 }
 
diff --git a/app/views/govuk_publishing_components/component_guide/component_doc/_preview.html.erb b/app/views/govuk_publishing_components/component_guide/component_doc/_preview.html.erb
index e040345970..29ce3b7ecb 100644
--- a/app/views/govuk_publishing_components/component_guide/component_doc/_preview.html.erb
+++ b/app/views/govuk_publishing_components/component_guide/component_doc/_preview.html.erb
@@ -1,10 +1,3 @@
-<% flush ||= false %>
-<div
-  class="
-    js-test-a11y
-    component-guide-preview
-    <%= "component-guide-preview--flush" if flush %>
-  "
->
+<div class="js-test-a11y">
   <%= render @component_doc.partial_path, fixture.data %>
 </div>
diff --git a/app/views/govuk_publishing_components/component_guide/preview.html.erb b/app/views/govuk_publishing_components/component_guide/preview.html.erb
index 6580ef3edb..596fed14f2 100644
--- a/app/views/govuk_publishing_components/component_guide/preview.html.erb
+++ b/app/views/govuk_publishing_components/component_guide/preview.html.erb
@@ -1,15 +1,8 @@
 <% @component_fixtures.each do |fixture| %>
   <% if @component_fixtures.length > 1 %>
-  <h2 class="component-guide-preview-title">
-    <a href="<%= component_fixture_path(@component_doc.id, fixture.id) %>"><%= fixture.name %></a>
-  </h2>
+    <h2 class="component-guide-preview-title">
+      <a href="<%= component_fixture_path(@component_doc.id, fixture.id) %>"><%= fixture.name %></a>
+    </h2>
   <% end %>
-  <%= render(
-    partial: @component_doc.partial_path,
-    locals: {
-      component_doc: @component_doc,
-      fixture: fixture,
-      flush: true
-    }
-  ) %>
+  <%= render partial: "govuk_publishing_components/component_guide/component_doc/preview", locals: { component_doc: @component_doc, fixture: fixture } %>
 <% end %>
diff --git a/app/views/govuk_publishing_components/component_guide/show.html.erb b/app/views/govuk_publishing_components/component_guide/show.html.erb
index 3ebaa1838f..3429b36caf 100644
--- a/app/views/govuk_publishing_components/component_guide/show.html.erb
+++ b/app/views/govuk_publishing_components/component_guide/show.html.erb
@@ -22,7 +22,9 @@
     <h2 class="component-doc-h2">How it looks</h2>
   </div>
 
-  <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, fixture: @component_doc.fixture %>
+  <div class="component-guide-preview">
+    <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, fixture: @component_doc.fixture %>
+  </div>
 
   <% if @component_doc.accessibility_criteria.present? %>
     <div class="grid-row component-accessibility-criteria">
@@ -45,7 +47,9 @@
             <small>(<a href="<%= component_preview_path(@component_doc.id, fixture.id) %>">preview</a>)</small>
           </h3>
           <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, fixture: fixture %>
-          <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, fixture: fixture %>
+          <div class="component-guide-preview">
+            <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, fixture: fixture %>
+          </div>
         </div>
       <% end %>
     </div>