Merge pull request #1080 from alphagov/product-breadcrumb

Add a breadcrumb to the product page

app/assets/stylesheets/components/vendor/breadcrumbs.scss

@@ -0,0 +1,106 @@
+/**
+ * Breadcrumbs Component
+ *
+ * Based on the existing breadcrumbs from GOV.UK Elements, re-implemented
+ * using BEM, allowing for an `inverse` modifier (e.g. against a masthead), with
+ * structured data markup, and allowing for the 'current page' to be included
+ * as the last element in the breadcrumb.
+ *
+ * Notes:
+ *
+ * - Link the current page to the same place as your skip link (e.g. #main) –
+ *   this means that it is included by screen readers but is referred to as a
+ *   'same page' link, and clicking it does not reload the page.
+ * - You can test the structured data using Google's structured data testing
+ *   tool: https://search.google.com/structured-data/testing-tool
+ *
+ * Example Usage:
+ *
+ * <nav class="breadcrumbs" aria-label="Breadcrumbs">
+ *   <ol itemscope itemtype="http://schema.org/BreadcrumbList">
+ *     <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+ *       <a href="https://www.gov.uk/service-toolkit#components" itemprop="item"><span itemprop="name">Components</span></a>
+ *     </li>
+ *     <li class="breadcrumbs__item breadcrumbs__item--active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+ *       <a href="#main" itemprop="item"><span itemprop="name">Product Page</span></a>
+ *     </li>
+ *   </ol>
+ * </nav>
+ */
+
+.breadcrumbs {
+  @extend %site-width-container;
+  @include core-16($line-height: (25 / 16), $line-height-640: 1.75);
+
+  padding: $gutter-one-third 0;
+  list-style: none;
+
+  @include media(tablet) {
+    margin-bottom: $gutter;
+  }
+
+  ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: inline-block;
+
+    margin: 0;
+    padding: 0 $gutter-one-quarter 0 (11px + $gutter-one-quarter);
+
+    background-image: file-url('separator.png');
+    background-repeat: no-repeat;
+    background-size: 6px 11px;
+    background-position: left center;
+
+    white-space: nowrap;
+
+    @include device-pixel-ratio(2) {
+      background-image: file-url('separator-2x.png');
+    }
+
+    &,
+    a:link,
+    a:hover,
+    a:active,
+    a:visited {
+      color: $black;
+    }
+
+    &--active {
+      @include bold-16;
+
+      a:link,
+      a:visited {
+        text-decoration: none;
+      }
+    }
+
+    &:first-child {
+      padding-left: 0;
+      background-image: none;
+    }
+  }
+
+  &--inverse {
+    border-bottom: 1px $white solid;
+    border-bottom-color: rgba($white, 0.25);
+
+    .breadcrumbs__item {
+      &--active,
+      a:link,
+      a:hover,
+      a:active,
+      a:visited {
+        color: $white;
+      }
+
+      a:focus {
+        color: $black;
+      }
+    }
+  }
+}

app/assets/stylesheets/main.scss

@@ -59,6 +59,7 @@ $path: '/static/images/';
 @import 'components/tick-cross';
 @import 'components/list-entry';
 @import 'components/letter';
+@import 'components/vendor/breadcrumbs';
 
 @import 'views/job';
 @import 'views/edit-template';

app/assets/stylesheets/views/product-page.scss

@@ -3,7 +3,7 @@
   &-intro {
 
     margin: -10px 0 $gutter * 1.5 0;
-    padding: $gutter * 2 0 $gutter * 2 0;
+    padding: 0 0 $gutter * 2 0;
     background: $govuk-blue;
     color: $white;
 
@@ -16,7 +16,7 @@
         background-image: file-url('product/proposition-illustration.png');
         background-size: 320px;
         background-repeat: no-repeat;
-        background-position: right -14px top -10px;
+        background-position: right -14px top 85px;
 
         @include ie-lte(8) {
           background-image: none;
@@ -28,7 +28,7 @@
 
     h1 {
       @include bold-48;
-      margin: 0 0 $gutter 0;
+      margin: 20px 0 $gutter 0;
     }
 
     p {

app/templates/fullwidth_template.html

@@ -1,7 +1,7 @@
 {% extends "admin_template.html" %}
 
 {% block fullwidth_content %}
-  <main role="main">
+  <main role="main" id="main">
     {% block maincolumn_content %}{% endblock %}
   </main>
 {% endblock %}

app/templates/views/signedout.html

@@ -10,8 +10,18 @@
 
 {% block maincolumn_content %}
 
-  <div class="product-page-intro">
+  <div class="product-page-intro" id="main">
     <div class="product-page-intro-wrapper">
+      <nav class="breadcrumbs breadcrumbs--inverse" aria-label="Breadcrumbs">
+       <ol itemscope itemtype="http://schema.org/BreadcrumbList">
+         <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+           <a href="https://www.gov.uk/service-toolkit#components" itemprop="item"><span itemprop="name">Components</span></a>
+         </li>
+         <li class="breadcrumbs__item breadcrumbs__item--active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+           <a href="#main" itemprop="item"><span itemprop="name">GOV.UK Notify</span></a>
+         </li>
+       </ol>
+      </nav>
       <div class="grid-row">
         <div class="column-two-thirds">
           <h1>