Merge pull request #435 from alphagov/breadcrumbs-rename-item-class

Change breadcrumb class name
alphagov · Jul 20, 2018 · 6f81e13 · 6f81e13
2 parents 35a0348 + aa298ba
commit 6f81e13
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Change breadcrumb class name (PR #435)
 * Add admin component for select (PR #434)
 
 ## 9.5.3

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss b/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss
@@ -19,7 +19,7 @@
   }
 
   @include media-down(mobile) {
-    &.gem-c-breadcrumbs--collapse-on-mobile .gem-c-breadcrumbs--item {
+    &.gem-c-breadcrumbs--collapse-on-mobile .gem-c-breadcrumbs__item {
       display: none;
 
       &.gem-c-breadcrumbs--parent {

diff --git a/app/views/govuk_publishing_components/components/_breadcrumbs.html.erb b/app/views/govuk_publishing_components/components/_breadcrumbs.html.erb
@@ -21,7 +21,7 @@
       css_class = invert_class.concat(crumb[:is_current_page] ? ' gem-c-breadcrumbs--current ' : '')
     %>
 
-    <li class='gem-c-breadcrumbs--item <%= "gem-c-breadcrumbs--parent" if crumb[:is_page_parent] %>'>
+    <li class='gem-c-breadcrumbs__item <%= "gem-c-breadcrumbs--parent" if crumb[:is_page_parent] %>'>
       <% if is_link %>
         <%= link_to(
           crumb[:title],

diff --git a/spec/components/breadcrumbs_spec.rb b/spec/components/breadcrumbs_spec.rb
@@ -17,7 +17,7 @@ def assert_link_with_text_in(selector, link, text)
   it "renders a single breadcrumb" do
     render_component(breadcrumbs: [{ title: 'Section', url: '/section' }])
 
-    assert_link_with_text_in('.gem-c-breadcrumbs--item:first-child', '/section', 'Section')
+    assert_link_with_text_in('.gem-c-breadcrumbs__item:first-child', '/section', 'Section')
   end
 
   it "renders schema data" do
@@ -49,10 +49,10 @@ def assert_link_with_text_in(selector, link, text)
     }
 
     assert_select '.gem-c-breadcrumbs[data-module="track-click"]', 1
-    assert_select '.gem-c-breadcrumbs--item:first-child a[data-track-action="1"]', 1
-    assert_select '.gem-c-breadcrumbs--item:first-child a[data-track-label="/section"]', 1
-    assert_select '.gem-c-breadcrumbs--item:first-child a[data-track-category="breadcrumbClicked"]', 1
-    assert_select ".gem-c-breadcrumbs--item:first-child a[data-track-options='#{expected_tracking_options.to_json}']", 1
+    assert_select '.gem-c-breadcrumbs__item:first-child a[data-track-action="1"]', 1
+    assert_select '.gem-c-breadcrumbs__item:first-child a[data-track-label="/section"]', 1
+    assert_select '.gem-c-breadcrumbs__item:first-child a[data-track-category="breadcrumbClicked"]', 1
+    assert_select ".gem-c-breadcrumbs__item:first-child a[data-track-options='#{expected_tracking_options.to_json}']", 1
   end
 
   it "tracks the total breadcrumb count on each breadcrumb" do
@@ -69,9 +69,9 @@ def assert_link_with_text_in(selector, link, text)
       { dimension28: "3", dimension29: "Section 3" },
     ]
 
-    assert_select ".gem-c-breadcrumbs--item:nth-child(1) a[data-track-options='#{expected_tracking_options[0].to_json}']", 1
-    assert_select ".gem-c-breadcrumbs--item:nth-child(2) a[data-track-options='#{expected_tracking_options[1].to_json}']", 1
-    assert_select ".gem-c-breadcrumbs--item:nth-child(3) a[data-track-options='#{expected_tracking_options[2].to_json}']", 1
+    assert_select ".gem-c-breadcrumbs__item:nth-child(1) a[data-track-options='#{expected_tracking_options[0].to_json}']", 1
+    assert_select ".gem-c-breadcrumbs__item:nth-child(2) a[data-track-options='#{expected_tracking_options[1].to_json}']", 1
+    assert_select ".gem-c-breadcrumbs__item:nth-child(3) a[data-track-options='#{expected_tracking_options[2].to_json}']", 1
   end
 
   it "renders a list of breadcrumbs" do
@@ -81,9 +81,9 @@ def assert_link_with_text_in(selector, link, text)
         { title: 'Sub-section', url: '/sub-section' },
       ])
 
-    assert_link_with_text_in('.gem-c-breadcrumbs--item:first-child', '/', 'Home')
-    assert_link_with_text_in('.gem-c-breadcrumbs--item:first-child + li', '/section', 'Section')
-    assert_link_with_text_in('.gem-c-breadcrumbs--item:last-child', '/sub-section', 'Sub-section')
+    assert_link_with_text_in('.gem-c-breadcrumbs__item:first-child', '/', 'Home')
+    assert_link_with_text_in('.gem-c-breadcrumbs__item:first-child + li', '/section', 'Section')
+    assert_link_with_text_in('.gem-c-breadcrumbs__item:last-child', '/sub-section', 'Sub-section')
   end
 
   it "renders inverted breadcrumbs when passed a flag" do
@@ -102,6 +102,6 @@ def assert_link_with_text_in(selector, link, text)
         { title: 'Current Page' },
       ]
     )
-    assert_select('.gem-c-breadcrumbs--item:last-child', 'Current Page')
+    assert_select('.gem-c-breadcrumbs__item:last-child', 'Current Page')
   end
 end