Use collapsible breadcrumbs from govuk-frontend

This feature has been ported to govuk-frontend alphagov/govuk-frontend#1754
alphagov · Aug 18, 2020 · 5260157 · 5260157
1 parent 2fca57e
commit 5260157
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 14 deletions.
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss b/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss
@@ -21,16 +21,8 @@
   border-color: govuk-colour("white");
 }
 
-.gem-c-breadcrumbs--collapse-on-mobile {
+.govuk-breadcrumbs--collapse-on-mobile {
   @include govuk-media-query($until: tablet) {
-    .govuk-breadcrumbs__list {
-      display: flex;
-    }
-
-    .govuk-breadcrumbs__list-item:not(:last-child):not(:first-child) {
-      display: none;
-    }
-
     .govuk-breadcrumbs__list-item {
       padding-top: 14px;
       padding-bottom: 14px;
@@ -48,10 +40,10 @@
     .govuk-breadcrumbs__link:after {
       content: "";
       position: absolute;
-      top: -14px;
+      top: 0;
       right: 0;
       left: 0;
-      bottom: -14px;
+      bottom: 0;
     }
   }
 }
diff --git a/app/views/govuk_publishing_components/components/_breadcrumbs.html.erb b/app/views/govuk_publishing_components/components/_breadcrumbs.html.erb
@@ -5,7 +5,7 @@
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
   classes = "gem-c-breadcrumbs govuk-breadcrumbs"
-  classes << " gem-c-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
+  classes << " govuk-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
   classes << " gem-c-breadcrumbs--inverse" if inverse
 %>
 

diff --git a/spec/components/breadcrumbs_spec.rb b/spec/components/breadcrumbs_spec.rb
@@ -154,6 +154,6 @@ def assert_link_with_text_in(selector, link, text)
       ],
     )
 
-    assert_select(".gem-c-breadcrumbs.govuk-breadcrumbs.gem-c-breadcrumbs--collapse-on-mobile")
+    assert_select(".gem-c-breadcrumbs.govuk-breadcrumbs.govuk-breadcrumbs--collapse-on-mobile")
   end
 end
diff --git a/spec/components/contextual_breadcrumbs_spec.rb b/spec/components/contextual_breadcrumbs_spec.rb
@@ -42,7 +42,7 @@ def set_live_taxons(content_item)
     content_item = remove_curated_related_item(content_item)
     content_item = set_live_taxons(content_item)
     render_component(content_item: content_item)
-    assert_select ".gem-c-breadcrumbs.gem-c-breadcrumbs--collapse-on-mobile"
+    assert_select ".gem-c-breadcrumbs.govuk-breadcrumbs--collapse-on-mobile"
   end
 
   it "renders breadcrumbs that don't collapse on mobile if flag is passed" do
-Original file line number
+Diff line change
@@ Expand Up / @@ -154,6 +154,6 @@ def assert_link_with_text_in(selector, link, text) @@
           ],
         )
-        assert_select(".gem-c-breadcrumbs.govuk-breadcrumbs.gem-c-breadcrumbs--collapse-on-mobile")
+        assert_select(".gem-c-breadcrumbs.govuk-breadcrumbs.govuk-breadcrumbs--collapse-on-mobile")
       end
     end