Merge pull request #1952 from alphagov/add-border-to-breadcrumb

Add bottom border option to breadcrumb

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Add border option to breadcrumb ([PR #1952])(https://github.com/alphagov/govuk_publishing_components/pull/1952) MINOR
+
 ## 24.3.1
 
 * Show password fixes ([PR #1947](https://github.com/alphagov/govuk_publishing_components/pull/1947))

app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss

@@ -21,6 +21,17 @@
   border-color: govuk-colour("white");
 }
 
+.gem-c-breadcrumbs--border-bottom {
+  border-bottom: 1px solid $govuk-border-colour;
+  padding-bottom: govuk-spacing(1);
+
+  &.govuk-breadcrumbs--collapse-on-mobile {
+    @include govuk-media-query($until: tablet) {
+      padding-bottom: 0;
+    }
+  }
+}
+
 .govuk-breadcrumbs--collapse-on-mobile {
   @include govuk-media-query($until: tablet) {
     .govuk-breadcrumbs__list-item {

app/views/govuk_publishing_components/components/_breadcrumbs.html.erb

@@ -1,19 +1,22 @@
 <%
+  border ||= false
   breadcrumbs ||= []
-  inverse ||= false
   collapse_on_mobile ||= false
+  inverse ||= false
+
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
-  classes = "gem-c-breadcrumbs govuk-breadcrumbs"
-  classes << " govuk-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
-  classes << " gem-c-breadcrumbs--inverse" if inverse
+  classes = %w[gem-c-breadcrumbs govuk-breadcrumbs]
+  classes << "govuk-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
+  classes << "gem-c-breadcrumbs--inverse" if inverse
+  classes << "gem-c-breadcrumbs--border-bottom" if border == "bottom"
 %>
 
 <script type="application/ld+json">
   <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
 </script>
 
-<div class="<%= classes %>" data-module="gem-track-click">
+<div class="<%= classes.join(" ") %>" data-module="gem-track-click">
   <ol class="govuk-breadcrumbs__list">
     <% breadcrumbs.each_with_index do |crumb, index| %>
       <% breadcrumb = GovukPublishingComponents::Presenters::Breadcrumb.new(crumb, index) %>

app/views/govuk_publishing_components/components/docs/breadcrumbs.yml

@@ -97,3 +97,25 @@ examples:
         url: '/browse/abroad'
       - title: 'Travel abroad'
         url: '/browse/abroad/travel-abroad'
+  with_border:
+    description: "Set a border below the breadcrumb. Off by default."
+    data:
+      border: "bottom"
+      breadcrumbs:
+      - title: "Section"
+        url: "/section"
+      - title: "Sub-section"
+        url: "/section/sub-section"
+      - title: "Sub-sub-section"
+        url: "/section/sub-section/sub-section"
+  with_border_and_collapse_on_mobile:
+    data:
+      border: "bottom"
+      collapse_on_mobile: true
+      breadcrumbs:
+      - title: "Section"
+        url: "/section"
+      - title: "Sub-section"
+        url: "/section/sub-section"
+      - title: "Sub-sub-section"
+        url: "/section/sub-section/sub-section"

spec/components/breadcrumbs_spec.rb

@@ -156,4 +156,19 @@ def assert_link_with_text_in(selector, link, text)
 
     assert_select(".gem-c-breadcrumbs.govuk-breadcrumbs.govuk-breadcrumbs--collapse-on-mobile")
   end
+
+  it "has a border when passed a border parameter" do
+    render_component(
+      border: "bottom",
+      breadcrumbs: [
+        { title: "Home", url: "/" },
+        { title: "Section", url: "/section" },
+        { title: "Sub-section", url: "/sub-section" },
+        { title: "Sub-sub-section", url: "/sub-sub-section" },
+        { title: "Sub-sub-sub-section", url: "/sub-sub-sub-section" },
+      ],
+    )
+
+    assert_select(".gem-c-breadcrumbs.govuk-breadcrumbs.gem-c-breadcrumbs--border-bottom")
+  end
 end