Add support for inverted breadcrumbs

Support was recently added for inverse breadcrumbs[0]. Like the recent
inverse button change[1] we're using the `inverse` keyword arg to allow
the mode to be toggled.

Refs #428

[0] #418
[1] alphagov/govuk-frontend#3774

app/components/govuk_component/breadcrumbs_component.rb

@@ -1,15 +1,17 @@
 class GovukComponent::BreadcrumbsComponent < GovukComponent::Base
-  attr_reader :breadcrumbs, :hide_in_print, :collapse_on_mobile
+  attr_reader :breadcrumbs, :hide_in_print, :collapse_on_mobile, :inverse
 
   def initialize(breadcrumbs:,
                  hide_in_print: config.default_breadcrumbs_hide_in_print,
                  collapse_on_mobile: config.default_breadcrumbs_collapse_on_mobile,
+                 inverse: false,
                  classes: [],
                  html_attributes: {})
 
     @breadcrumbs        = build_list(breadcrumbs)
     @hide_in_print      = hide_in_print
     @collapse_on_mobile = collapse_on_mobile
+    @inverse            = inverse
 
     super(classes: classes, html_attributes: html_attributes)
   end
@@ -21,7 +23,8 @@ def default_attributes
       class: class_names(
         "govuk-breadcrumbs",
         "govuk-!-display-none-print" => hide_in_print,
-        "govuk-breadcrumbs--collapse-on-mobile" => collapse_on_mobile
+        "govuk-breadcrumbs--collapse-on-mobile" => collapse_on_mobile,
+        "govuk-breadcrumbs--inverse" => inverse
       ).split
     }
   end

guide/content/components/breadcrumbs.slim

@@ -39,4 +39,14 @@ markdown:
     The `govuk_breadcrumb_link_to` helper generates links with the
     `govuk-breadcrumbs__link` class.
 
+== render('/partials/example.*',
+  caption: "Breadcrumbs with inverted colours",
+  code: breadcrumbs_inverted,
+  data: breadcrumbs_nav_hierarchy,
+  inverse: true) do
+
+  markdown:
+    When breadcrumbs are displayed on darker backgrounds the `inverse` keyword argument can
+    be used to make them readable.
+
 == render('/partials/related-info.*', links: breadcrumbs_info)

guide/content/stylesheets/application.scss

@@ -104,3 +104,15 @@ $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colo
     }
   }
 }
+
+.govuk-breadcrumbs--inverse {
+  color: govuk-colour("white");
+
+  .govuk-breadcrumbs__link {
+    @include govuk-link-style-inverse;
+  }
+
+  .govuk-breadcrumbs__list-item::before {
+    border-color: currentcolor;
+  }
+}

guide/lib/examples/breadcrumbs_helpers.rb

@@ -51,5 +51,24 @@ def breadcrumbs_array_of_links
         }
       BREADCRUMBS
     end
+
+    def breadcrumbs_inverted
+      <<~BREADCRUMBS
+        = govuk_breadcrumbs(breadcrumbs: breadcrumbs, inverse: true)
+      BREADCRUMBS
+    end
+
+    def breadcrumbs_nav_hierarchy
+      <<~BREADCRUMBS
+        {
+          breadcrumbs: [
+            govuk_breadcrumb_link_to("Home", "/"),
+            govuk_breadcrumb_link_to("Education and learning", "/"),
+            govuk_breadcrumb_link_to("Schools and curriculum", "/"),
+            govuk_breadcrumb_link_to("Early years foundation stage", "/")
+          ]
+        }
+      BREADCRUMBS
+    end
   end
 end

spec/components/govuk_component/breadcrumbs_component_spec.rb

@@ -77,6 +77,15 @@
     end
   end
 
+  context 'when breadcrumb colours are inverted' do
+    let(:kwargs) { { breadcrumbs: breadcrumbs, inverse: true } }
+    let(:expected_class) { 'govuk-breadcrumbs.govuk-breadcrumbs--inverse' }
+
+    specify 'breadcrumbs colours are inverted' do
+      expect(rendered_content).to have_tag('div', with: { class: %w(govuk-breadcrumbs govuk-breadcrumbs--inverse) })
+    end
+  end
+
   it_behaves_like 'a component that accepts custom classes'
   it_behaves_like 'a component that accepts custom HTML attributes'
 end