diff --git a/CHANGELOG.md b/CHANGELOG.md index 51342ffba..8b1ed7d1c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/app/_templates/page.njk b/app/_templates/page.njk index 949acd29c..082d1d0e5 100644 --- a/app/_templates/page.njk +++ b/app/_templates/page.njk @@ -48,9 +48,8 @@ {% block body %} - {% block breadcrumb %}{% endblock %} -
+ {% block beforeContent %}{% endblock %}
diff --git a/app/components/all.njk b/app/components/all.njk index 779ba681c..4155ce37a 100644 --- a/app/components/all.njk +++ b/app/components/all.njk @@ -64,7 +64,7 @@ }} {% endblock %} -{% block breadcrumb %} +{% block beforeContent %} {{ breadcrumb({ items: [ { diff --git a/app/components/back-link/button.njk b/app/components/back-link/button.njk index 8a87308f9..ee0053710 100644 --- a/app/components/back-link/button.njk +++ b/app/components/back-link/button.njk @@ -20,4 +20,4 @@
-{% endblock %} +{% endblock %} \ No newline at end of file diff --git a/app/components/back-link/index.njk b/app/components/back-link/index.njk index a646980cb..7ad8fe525 100644 --- a/app/components/back-link/index.njk +++ b/app/components/back-link/index.njk @@ -11,13 +11,17 @@
{{ backLink({ - "href": "#", - "text": "Go back" + href: "#", + text: "Go back" }) }}
+ +{% endblock %} +{% block heading %} +

Page title

{% endblock %} diff --git a/app/components/breadcrumb/index.njk b/app/components/breadcrumb/index.njk index 61c461fdc..d06c77c0c 100644 --- a/app/components/breadcrumb/index.njk +++ b/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"} - }) }} +
+
+
+
+ {{ 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"} + }) }} +
+
+ +
+
+ +{% endblock %} + +{% block heading %} +

Page title

{% endblock %} diff --git a/app/pages/about.njk b/app/pages/about.njk index a9e51a38f..f5b31489a 100644 --- a/app/pages/about.njk +++ b/app/pages/about.njk @@ -7,7 +7,7 @@ {{ super() }} {% endblock %} -{% block breadcrumb %} +{% block beforeContent %} {{ breadcrumb({ items: [ { diff --git a/app/pages/examples.njk b/app/pages/examples.njk index d384727bd..d36919ff8 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -7,7 +7,7 @@ {{ super() }} {% endblock %} -{% block breadcrumb %} +{% block beforeContent %} {{ breadcrumb({ items: [ { diff --git a/app/pages/install.njk b/app/pages/install.njk index 7e0f65a21..0f416934b 100644 --- a/app/pages/install.njk +++ b/app/pages/install.njk @@ -7,7 +7,7 @@ {{ super() }} {% endblock %} -{% block breadcrumb %} +{% block beforeContent %} {{ breadcrumb({ items: [ { diff --git a/app/styles/lists.njk b/app/styles/lists.njk index cbe0590fa..9c7203cb9 100644 --- a/app/styles/lists.njk +++ b/app/styles/lists.njk @@ -6,7 +6,7 @@ {{ super() }} {% endblock %} -{% block breadcrumb %} +{% block beforeContent %} {{ breadcrumb({ items: [ { diff --git a/packages/components/back-link/_back-link.scss b/packages/components/back-link/_back-link.scss index 4792b64bb..2137c8b92 100644 --- a/packages/components/back-link/_back-link.scss +++ b/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 { diff --git a/packages/components/breadcrumb/_breadcrumb.scss b/packages/components/breadcrumb/_breadcrumb.scss index f9ab0ce4c..b6a797783 100644 --- a/packages/components/breadcrumb/_breadcrumb.scss +++ b/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; diff --git a/packages/components/breadcrumb/template.njk b/packages/components/breadcrumb/template.njk index af935271f..66679ea91 100644 --- a/packages/components/breadcrumb/template.njk +++ b/packages/components/breadcrumb/template.njk @@ -2,28 +2,26 @@ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_0_document_0_iPhone_5_SE.png index 748ffbc29..1185938d2 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_0_document_0_iPhone_5_SE.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_0_document_1_iPhone_6-8.png index d6a5b9ee6..ef8429b17 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_0_document_1_iPhone_6-8.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_0_document_1_iPhone_6-8.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_as_button_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_as_button_0_document_0_iPhone_5_SE.png index 748ffbc29..1185938d2 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_as_button_0_document_0_iPhone_5_SE.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_as_button_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_as_button_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_as_button_0_document_1_iPhone_6-8.png index d6a5b9ee6..ef8429b17 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_as_button_0_document_1_iPhone_6-8.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Back_link_as_button_0_document_1_iPhone_6-8.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_0_iPhone_5_SE.png index d88d8828b..22f0ceb3b 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_0_iPhone_5_SE.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_1_iPhone_6-8.png index 50e6dc850..e4a61e397 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_1_iPhone_6-8.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_1_iPhone_6-8.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_2_iPad.png index 955b08dd6..acb793228 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_2_iPad.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_3_Surface_iPad_Pro.png index b4b4a1a44..8e2be1dbd 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_3_Surface_iPad_Pro.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Breadcrumb_0_document_3_Surface_iPad_Pro.png differ