Back links and breadcrumbs tweaks

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 - Fix Sass deprecation on `mix` function (passing a number without unit) ([PR 995](https://github.com/nhsuk/nhsuk-frontend/pull/995))
 - Add nhsukAttributes macro, copied from GOV.UK ([PR 998](https://github.com/nhsuk/nhsuk-frontend/pull/998))
+- Change "Contact us" in the footer link examples to "Give us feedback" ([PR 972](https://github.com/nhsuk/nhsuk-frontend/pull/972))
+- Adjusted default spacing of back link component. ([PR 964](https://github.com/nhsuk/nhsuk-frontend/pull/964))
 
 ## 8.3.0 - 24 July 2024
 

app/_templates/page.njk

@@ -48,9 +48,8 @@
 
 {% block body %}
 
-  {% block breadcrumb %}{% endblock %}
-
   <div class="nhsuk-width-container">
+    {% block beforeContent %}{% endblock %}
     <main class="nhsuk-main-wrapper" id="maincontent">
 
       <div class="nhsuk-grid-row">

app/components/all.njk

@@ -64,7 +64,7 @@
   }}
 {% endblock %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {

app/components/back-link/button.njk

@@ -20,4 +20,4 @@
     </main>
   </div>
 
-{% endblock %}
+{% endblock %}

app/components/back-link/index.njk

@@ -11,13 +11,17 @@
       <div class="nhsuk-grid-row">
         <div class="nhsuk-grid-column-two-thirds">
           {{ backLink({
-            "href": "#",
-            "text": "Go back"
+            href: "#",
+            text: "Go back"
           }) }}
         </div>
       </div>
 
     </main>
   </div>
+
+{% endblock %}
 
+{% block heading %}
+  <h1 class="govuk-heading-l">Page title</h1>
 {% endblock %}

app/components/breadcrumb/index.njk

@@ -5,27 +5,41 @@
 
 {% block body %}
 
-  {{ breadcrumb({
-    items: [
-      {
-        href: "#",
-        text: "Level one",
-        attributes: {lang: "en"}
-      },
-      {
-        href: "#",
-        text: "Level two"
-      },
-      {
-        href: "#",
-        text: "Level three",
-        attributes: {lang: "en"}
-      }
-    ],
-    href: "#",
-    text: "Level four",
-    classes: "example-class-one example-class-two",
-    attributes: {lang: "en"}
-  }) }}
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
 
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ breadcrumb({
+              items: [
+                {
+                  href: "#",
+                  text: "Level one",
+                  attributes: {lang: "en"}
+                },
+                {
+                  href: "#",
+                  text: "Level two"
+                },
+                {
+                  href: "#",
+                  text: "Level three",
+                  attributes: {lang: "en"}
+                }
+              ],
+              href: "#",
+              text: "Level four",
+              classes: "example-class-one example-class-two",
+              attributes: {lang: "en"}
+            }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
+
+{% block heading %}
+  <h1 class="govuk-heading-l">Page title</h1>
 {% endblock %}

app/pages/about.njk

@@ -7,7 +7,7 @@
   {{ super() }}
 {% endblock %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {

app/pages/examples.njk

@@ -7,7 +7,7 @@
   {{ super() }}
 {% endblock %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {

app/pages/install.njk

@@ -7,7 +7,7 @@
   {{ super() }}
 {% endblock %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {

app/styles/lists.njk

@@ -6,7 +6,7 @@
   {{ super() }}
 {% endblock %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {

packages/components/back-link/_back-link.scss

@@ -6,10 +6,16 @@
  * 1. Allow space for the arrow.
  * 2. Align the icon with the start of the back link.
  * 3. Align the icon with the middle of the text.
+ * 4. Make back link same height as breadcrumb.
  */
 
 .nhsuk-back-link {
-  margin-bottom: nhsuk-spacing(3);
+  margin-top: nhsuk-spacing(3);
+  line-height: 1; /* 4 */
+
+  @include mq($from: tablet) {
+    margin-top: nhsuk-spacing(4);
+  }
 }
 
 .nhsuk-back-link__link {
@@ -30,6 +36,10 @@
     position: absolute;
     top: -1px; /* 3 */
     width: 24px;
+
+    @include mq($from: tablet) {
+      top: 0; /* 3 */
+    }
   }
 
   &:visited {

packages/components/breadcrumb/_breadcrumb.scss

@@ -4,8 +4,6 @@
 
 /**
  * 1. Hide the breadcrumb on print stylesheets.
- * 2. Bespoke spacing numbers used as there is no 20px
- *    spacing mapped in settings/spacing.
  * 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.
@@ -14,12 +12,10 @@
 
 .nhsuk-breadcrumb {
   @include print-hide(); /* [1] */
+  margin-top: nhsuk-spacing(3);
 
-  padding-bottom: nhsuk-spacing(3);
-  padding-top: 20px; /* [2] */
-
-  + .nhsuk-width-container .nhsuk-main-wrapper {
-    padding-top: 0;
+  @include mq($from: tablet) {
+    margin-top: nhsuk-spacing(4);
   }
 }
 
@@ -28,6 +24,7 @@
     display: none; /* [3] */
   }
 
+  @include nhsuk-font(16); /* [4] */
   list-style: none;
   margin: 0;
   padding: 0;
@@ -84,12 +81,14 @@
     height: 18px;
     left: 0;
     position: absolute;
-    top: 0;
+    top: -1px;
     width: 10px;
   }
 }
 
 .nhsuk-breadcrumb__backlink {
+  text-decoration: none;
+
   &:visited {
     color: $nhsuk-link-color;
 

packages/components/breadcrumb/template.njk

@@ -2,28 +2,26 @@
 
 <nav class="nhsuk-breadcrumb{% if params.classes %} {{ params.classes }}{% endif %}" aria-label="Breadcrumb"
 {{- nhsukAttributes(params.attributes) }}>
-  <div class="nhsuk-width-container">
-    <ol class="nhsuk-breadcrumb__list">
-  {%- for item in params.items %}
-    {%- if item.href %}
-          <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ item.href }}" {{- nhsukAttributes(item.attributes) }}>{{ item.text }}</a>{% if not loop.last %}{% endif %}</li>
-    {%- endif -%}
-  {% endfor %}
-    {% if params.href %}
-      <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ params.href }}">{{ params.text}}</a></li>
-      {% set lastHref = params.href %}
-      {% set lastText = params.text %}
-    {% else %}
-      {% set lastItem = params.items | last%}
-      {% set lastHref = lastItem.href %}
-      {% set lastText = lastItem.text %}
-    {% endif %}
-    </ol>
-    <p class="nhsuk-breadcrumb__back">
-      <a class="nhsuk-breadcrumb__backlink" href="{{ lastHref }}" {{- nhsukAttributes(lastItem.attributes) }}>
-        <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
-        {{ lastText }}
-      </a>
-    </p>
-  </div>
+  <ol class="nhsuk-breadcrumb__list">
+{%- for item in params.items %}
+  {%- if item.href %}
+        <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ item.href }}" {{- nhsukAttributes(item.attributes) }}>{{ item.text }}</a>{% if not loop.last %}{% endif %}</li>
+  {%- endif -%}
+{% endfor %}
+  {% if params.href %}
+    <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ params.href }}">{{ params.text}}</a></li>
+    {% set lastHref = params.href %}
+    {% set lastText = params.text %}
+  {% else %}
+    {% set lastItem = params.items | last%}
+    {% set lastHref = lastItem.href %}
+    {% set lastText = lastItem.text %}
+  {% endif %}
+  </ol>
+  <p class="nhsuk-breadcrumb__back">
+    <a class="nhsuk-breadcrumb__backlink" href="{{ lastHref }}" {{- nhsukAttributes(lastItem.attributes) }}>
+      <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+      {{ lastText }}
+    </a>
+  </p>
 </nav>