Merge pull request #3774 from alphagov/kg-inverted-breadcrumbs-back-l…

…inks

Add inverse breadcrumb and back link modifiers and styles

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;
+    }
+  }
 }

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

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()
+  })
 })

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;
+    }
+  }
 }

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

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()
+    })
   })
 })