Add inverse breadcrumb and back link modifiers and styles

CHANGELOG.md

@@ -26,6 +26,18 @@ You can now style buttons on dark backgrounds to have a white background colour
 
 This change was made in [pull request #3556: Add inverse button styles](https://github.com/alphagov/govuk-frontend/pull/3556).
 
+#### Added inverse modifier for breadcrumbs on dark backgrounds
+
+You can now style breadcrumbs on dark backgrounds to use white text, links and arrows by adding the `govuk-breadcrumbs--inverse` class.
+
+This change was made in [pull request #3774: Add inverse breadcrumb and back link modifiers and styles](https://github.com/alphagov/govuk-frontend/pull/3774).
+
+#### Added inverse modifier for back links on dark backgrounds
+
+You can now style back links on dark backgrounds to have a white link and arrow colour by adding the `govuk-back-link--inverse` class.
+
+This change was made in [pull request #3774: Add inverse breadcrumb and back link modifiers and styles](https://github.com/alphagov/govuk-frontend/pull/3774).
+
 #### New link styles are now enabled by default
 
 In GOV.UK Frontend v3.12.0 we introduced new link styles which:

packages/govuk-frontend/src/govuk/components/back-link/_index.scss

@@ -69,4 +69,12 @@
     bottom: -14px;
     left: 0;
   }
+
+  .govuk-back-link--inverse {
+    @include govuk-link-style-inverse;
+
+    &::before {
+      border-color: currentcolor;
+    }
+  }
 }

packages/govuk-frontend/src/govuk/components/back-link/back-link.yaml

@@ -28,6 +28,10 @@ examples:
     data:
       href: '#'
       text: Back to home
+  - name: with inverted colours
+    data:
+      classes: govuk-back-link--inverse
+      href: '#'
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: classes

packages/govuk-frontend/src/govuk/components/back-link/template.test.js

@@ -59,4 +59,11 @@ describe('back-link component', () => {
     expect($component.attr('data-test')).toEqual('attribute')
     expect($component.attr('aria-label')).toEqual('Back to home')
   })
+
+  it('renders with inverted colours if specified', () => {
+    const $ = render('back-link', examples['with inverted colours'])
+
+    const $component = $('.govuk-back-link')
+    expect($component.hasClass('govuk-back-link--inverse')).toBeTruthy()
+  })
 })

packages/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss

@@ -117,4 +117,16 @@
       }
     }
   }
+
+  .govuk-breadcrumbs--inverse {
+    color: govuk-colour("white");
+
+    .govuk-breadcrumbs__link {
+      @include govuk-link-style-inverse;
+    }
+
+    .govuk-breadcrumbs__list-item::before {
+      border-color: currentcolor;
+    }
+  }
 }

packages/govuk-frontend/src/govuk/components/breadcrumbs/breadcrumbs.yaml

@@ -82,6 +82,16 @@ examples:
           href: '/education'
         - text: Special educational needs and disability (SEND) and high needs
           href: '/education/special-educational-needs-and-disability-send-and-high-needs'
+  - name: with inverted colours
+    description: Breadcrumbs that appear on dark backgrounds
+    data:
+      classes: govuk-breadcrumbs--inverse
+      items:
+        - text: Home
+          href: '/'
+        - text: Passports, travel and living abroad
+          href: '/browse/abroad'
+        - text: Travel abroad
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: classes

packages/govuk-frontend/src/govuk/components/breadcrumbs/template.test.js

@@ -91,5 +91,12 @@ describe('Breadcrumbs', () => {
       const $component = $('.govuk-breadcrumbs')
       expect($component.hasClass('govuk-breadcrumbs--collapse-on-mobile')).toBeTruthy()
     })
+
+    it('renders with inverted colours if specified', () => {
+      const $ = render('breadcrumbs', examples['with inverted colours'])
+
+      const $component = $('.govuk-breadcrumbs')
+      expect($component.hasClass('govuk-breadcrumbs--inverse')).toBeTruthy()
+    })
   })
 })