From 46ba5e32b116773fe9099232c72bc5757fdbf1c7 Mon Sep 17 00:00:00 2001
From: "beeps (Kim Grey)" <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Fri, 9 Jun 2023 12:09:33 +0100
Subject: [PATCH 1/2] Add inverted modifier for breadcrumbs

---
 src/govuk/components/breadcrumbs/_index.scss      | 12 ++++++++++++
 src/govuk/components/breadcrumbs/breadcrumbs.yaml | 10 ++++++++++
 src/govuk/components/breadcrumbs/template.test.js |  7 +++++++
 3 files changed, 29 insertions(+)

diff --git a/src/govuk/components/breadcrumbs/_index.scss b/src/govuk/components/breadcrumbs/_index.scss
index e239adbe4c..dff29dbf82 100644
--- a/src/govuk/components/breadcrumbs/_index.scss
+++ b/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;
+    }
+  }
 }
diff --git a/src/govuk/components/breadcrumbs/breadcrumbs.yaml b/src/govuk/components/breadcrumbs/breadcrumbs.yaml
index 3d8035a49e..8da5d090b1 100644
--- a/src/govuk/components/breadcrumbs/breadcrumbs.yaml
+++ b/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
diff --git a/src/govuk/components/breadcrumbs/template.test.js b/src/govuk/components/breadcrumbs/template.test.js
index 76933be722..f0526102af 100644
--- a/src/govuk/components/breadcrumbs/template.test.js
+++ b/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()
+    })
   })
 })

From 00e1072993bc648690263769ee8c42895666496f Mon Sep 17 00:00:00 2001
From: "beeps (Kim Grey)" <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Fri, 9 Jun 2023 14:15:29 +0100
Subject: [PATCH 2/2] Add inverted modifier for back links

---
 src/govuk/components/back-link/_index.scss      | 8 ++++++++
 src/govuk/components/back-link/back-link.yaml   | 4 ++++
 src/govuk/components/back-link/template.test.js | 7 +++++++
 3 files changed, 19 insertions(+)

diff --git a/src/govuk/components/back-link/_index.scss b/src/govuk/components/back-link/_index.scss
index 32d10696ab..480076b03e 100644
--- a/src/govuk/components/back-link/_index.scss
+++ b/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;
+    }
+  }
 }
diff --git a/src/govuk/components/back-link/back-link.yaml b/src/govuk/components/back-link/back-link.yaml
index ddf8c17ba1..6051e146a1 100644
--- a/src/govuk/components/back-link/back-link.yaml
+++ b/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
diff --git a/src/govuk/components/back-link/template.test.js b/src/govuk/components/back-link/template.test.js
index 2a9040bb78..b9f392c0b8 100644
--- a/src/govuk/components/back-link/template.test.js
+++ b/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()
+  })
 })