Update breadcrumbs style

CHANGELOG.md

@@ -7,6 +7,31 @@
 - Added Character Count component, ported from govuk-frontend ([PR 811](https://github.com/nhsuk/nhsuk-frontend/pull/811))
 - Added Tabs component, ported from govuk-frontend ([PR 828](https://github.com/nhsuk/nhsuk-frontend/pull/828))
 
+:boom: **Breaking changes**
+
+- Breadcrumb update
+
+We iterated the breadcrumb, removing the white banner and bringing the breadcrumb link closer to the page heading, which it relates to, giving the heading context of where it sits within the site. Instead of having this:
+
+```
+  <p class="nhsuk-breadcrumb__back">
+    <a class="nhsuk-breadcrumb__backlink" href="/level-one/level-two/level-three">
+      Back to Level three
+    </a>
+  </p>
+```
+
+You will only now need this:
+
+```
+  <p class="nhsuk-breadcrumb__back">
+    <a class="nhsuk-breadcrumb__backlink" href="/level-one/level-two/level-three">
+      <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+      Level three
+    </a>
+  </p>
+```
+
 :recycle: **Changes**
 
 - Rework clickable cards using CSS invisible overlay rather than JS event handler to avoid problems with using Ctrl-click, middle click, right click to open new tabs ([PR 762](https://github.com/nhsuk/nhsuk-frontend/pull/762)).  

packages/components/breadcrumb/README.md

@@ -18,7 +18,12 @@ Find out more about the breadcrumb component and when to use it in the [NHS digi
       <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one/level-two">Level two</a></li>
       <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one/level-two/level-three">Level three</a></li>
     </ol>
-    <p class="nhsuk-breadcrumb__back"><a class="nhsuk-breadcrumb__backlink" href="/level-one/level-two/level-three">Back to Level three</a></p>
+    <p class="nhsuk-breadcrumb__back">
+      <a class="nhsuk-breadcrumb__backlink" href="/level-one/level-two/level-three">
+        <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+        Level three
+      </a>
+    </p>
   </div>
 </nav>
 ```

packages/components/breadcrumb/_breadcrumb.scss

@@ -3,23 +3,20 @@
    ========================================================================== */
 
 /**
- * 1. Bespoke spacing numbers used as there is no 12px
+ * 1. Hide the breadcrumb on print stylesheets.
+ * 2. Bespoke spacing numbers used as there is no 20px
  *    spacing mapped in settings/spacing.
- * 2. Hide the breadcrumb on print stylesheets.
  * 3. Don't show the full breadcrumb below tablet size.
  * 4. Typography sizing mixin, see core/tools/_typography
  * 5. and core/settings/_typography for size maps.
  * 5. .. but show a back to index page link.
- * 6. Remove spacing between back icon and label.
- * 7. Custom padding for the chevron separator icon.
  */
 
 .nhsuk-breadcrumb {
-  @include print-hide();
+  @include print-hide(); /* [1] */
 
-  background-color: $color_nhsuk-white;
-  padding-bottom: 12px; /* [1] */
-  padding-top: 12px; /* [1] */
+  padding-bottom: nhsuk-spacing(3);
+  padding-top: 20px; /* [2] */
 
   .nhsuk-icon__chevron-right {
     fill: $color_nhsuk-grey-3;
@@ -40,6 +37,10 @@
     position: relative;
     width: 24px;
   }
+
+  + .nhsuk-width-container .nhsuk-main-wrapper {
+    padding-top: 0;
+  }
 }
 
 .nhsuk-breadcrumb__list {

packages/components/breadcrumb/template.njk

@@ -9,6 +9,11 @@
   {% endfor %}
       <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ params.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.text}}</a></li>
     </ol>
-    <p class="nhsuk-breadcrumb__back"><a class="nhsuk-breadcrumb__backlink" href="{{ params.href }}">Back to {{ params.text }}</a></p>
+    <p class="nhsuk-breadcrumb__back">
+      <a class="nhsuk-breadcrumb__backlink" href="{{ params.href }}">
+        <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+        {{ params.text }}
+      </a>
+    </p>
   </div>
 </nav>