start page with step by step

alphagov · Oct 17, 2018 · 5bf5845 · 5bf5845
1 parent 21a577e
commit 5bf5845
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 24 deletions.
diff --git a/app/assets/sass/patterns/_step-by-step-navigation.scss b/app/assets/sass/patterns/_step-by-step-navigation.scss
@@ -27,7 +27,7 @@
 }
 
 .app-step-nav-related__heading {
-  @include govuk-font(16, $weight: bold)
+  @include govuk-font(19, $weight: bold)
   margin-top: 15px;
   margin-bottom: 10px;
 }

diff --git a/docs/views/templates/govuk-publishing/start-with-step-by-step.html b/docs/views/templates/govuk-publishing/start-with-step-by-step.html
@@ -19,18 +19,11 @@
 {% endblock %}
 
 {% block beforeContent %}
-  <div class="govuk-breadcrumbs">
-    <ol class="govuk-breadcrumbs__list">
-      <li class="govuk-breadcrumbs__list-item">
-        <a class="govuk-breadcrumbs__link" href="https://www.gov.uk">Home</a>
-      </li>
-      <li class="govuk-breadcrumbs__list-item">
-        <a class="govuk-breadcrumbs__link" href="#">Section</a>
-      </li>
-      <li class="govuk-breadcrumbs__list-item">
-        <a class="govuk-breadcrumbs__link">Subsection</a>
-      </li>
-    </ol>
+  <div class="app-step-nav-header">
+    <span class="app-step-nav-header__part-of">Part of</span>
+      <a href="/learn-to-drive-a-car" class="app-step-nav-header__title">
+        Learn to drive a car: step by step
+      </a>
   </div>
 {% endblock %}
 
@@ -66,6 +59,15 @@ <h2 class="govuk-heading-m">Before you start</h2>
 
     <div class="govuk-grid-column-one-third">
 
+      <div class="app-step-nav-related app-step-nav-related--singular">
+        <h2 class="app-step-nav-related__heading">
+          <span class="app-step-nav-related__pretitle">Part of</span>
+          <a href="/learn-to-drive-a-car" class="app-step-nav-related__link" data-track-category="stepNavPartOfClicked" data-track-action="Part of" data-track-label="/learn-to-drive-a-car" data-track-dimension="Learn to drive a car: step by step" data-track-dimension-index="29" data-track-options="{&quot;dimension96&quot; : &quot;e01e924b-9c7c-4c71-8241-66a575c2f61f&quot; }">
+            Learn to drive a car: step by step
+          </a>
+        </h2>
+      </div>
+
       <div id="step-by-step-navigation" class="app-step-nav app-step-nav--active" data-show-text="Show" data-hide-text="Hide" data-show-all-text="Show all" data-hide-all-text="Hide all">
         <ol class="app-step-nav__steps">
           <li class="app-step-nav__step js-step" id="check-youre-allowed-to-drive" >

diff --git a/docs/views/tutorials-and-examples.html b/docs/views/tutorials-and-examples.html
@@ -105,7 +105,6 @@ <h3 class="govuk-heading-s">Advanced usage</h3>
         <li>
           <a href="/docs/using-verify">Using GOV.UK Verify</a>
         </li>
-
         <li>
           <a href="https://design-system.service.gov.uk/styles/page-template/#changing-template-content">
             Template partial areas
@@ -183,16 +182,21 @@ <h3 class="govuk-heading-s">GOV.UK publishing platform pages</h3>
       </p>
 
       <ul class="govuk-list govuk-list--bullet">
-      <li>
-        <a href="/docs/templates/govuk-publishing/start">
-          Start page
-        </a>
-      </li>
-      <li>
-        <a href="/docs/templates/govuk-publishing/step-by-step-navigation">
-          Step by step navigation
-        </a>
-      </li>
+        <li>
+          <a href="/docs/templates/govuk-publishing/start">
+            Start page
+          </a>
+        </li>
+        <li>
+          <a href="/docs/templates/govuk-publishing/step-by-step-navigation">
+            Step by step navigation
+          </a>
+        </li>
+        <li>
+          <a href="/docs/templates/govuk-publishing/start-with-step-by-step">
+            Start page with Step by step navigation
+          </a>
+        </li>
       </ul>
     </div>
   </div>