diff --git a/CHANGELOG.md b/CHANGELOG.md index fb9d7ab7a..e8e97c0b0 100644 --- a/CHANGELOG.md +++ b/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: + +``` +

+ + Back to Level three + +

+``` + +You will only now need this: + +``` +

+ + Back to   + Level three + +

+``` + :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)). diff --git a/packages/components/breadcrumb/README.md b/packages/components/breadcrumb/README.md index 84b0f82df..d6e3c864d 100644 --- a/packages/components/breadcrumb/README.md +++ b/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
  • Level two
  • Level three
    • -

    Back to Level three

    +

    + + Back to   + Level three + +

    ``` diff --git a/packages/components/breadcrumb/_breadcrumb.scss b/packages/components/breadcrumb/_breadcrumb.scss index a66b69a7c..182e8a18f 100644 --- a/packages/components/breadcrumb/_breadcrumb.scss +++ b/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 { diff --git a/packages/components/breadcrumb/template.njk b/packages/components/breadcrumb/template.njk index 991f59d24..f4cc3e064 100644 --- a/packages/components/breadcrumb/template.njk +++ b/packages/components/breadcrumb/template.njk @@ -9,6 +9,11 @@ {% endfor %}
  • {{ params.text}}
    • -

    Back to {{ params.text }}

    +

    + + Back to   + {{ params.text }} + +

    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 4302c0ef0..84a550f27 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 7d3978b71..d21272a15 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 f43371253..307223df6 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 5139dad8e..1de19e41e 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