Merge pull request #458 from alphagov/dh-700-fix-the-step-by-step-tit…

…le-sizing-and-spacing

Changes required when there are only one "part of" step by step navs

CHANGELOG.md

@@ -11,7 +11,7 @@
 
 * Step by step component, Google snippet improvement (PR #461)
 * Add tabs component (PR #455)
-
+* Adds styling for singular related step by step navs (PR #458)
 
 ## 9.8.0
 
@@ -25,7 +25,6 @@
 * Allow prioritising taxonomy breadcrumbs (PR #457)
 * Contextual breadcrumbs will show taxon based breadcrumbs if prioritise_taxon_breadcrumbs is true (defaults to false if not passed) (PR #457)
 
-
 ## 9.7.0
 
 * Update radio component to use GOV.UK Frontend styles (PR #433)

app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss

@@ -15,6 +15,19 @@
   padding: 0;
 }
 
+.gem-c-step-nav-related--singular {
+  margin-bottom: $gutter-one-third + 3;
+
+  .gem-c-step-nav-related__heading {
+    @include _core-font-generator(19px, 19px, 19px, 1.4, 1.4, false, bold);
+    margin-top: $gutter-two-thirds;
+  }
+
+  .gem-c-step-nav-related__pretitle {
+    margin-bottom: $gutter-one-quarter;
+  }
+}
+
 .gem-c-step-nav-related__pretitle {
   display: block;
   margin-bottom: $gutter-half;

app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb

@@ -3,7 +3,9 @@
   pretitle ||= t("govuk_component.step_by_step_nav_related.part_of", default: "Part of")
 %>
 <% if links.any? %>
-  <div class="gem-c-step-nav-related" data-module="track-click">
+  <div 
+    class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>" 
+    data-module="track-click">
     <h2 class="gem-c-step-nav-related__heading">
       <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
       <% if links.length == 1 %>