From aa298baf5a5ec10b2c958a1206468760c82dccd9 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 19 Jul 2018 08:54:49 +0000 Subject: [PATCH] Change breadcrumb class name - from 'gem-c-breadcrumbs--item' to 'gem-c-breadcrumbs__item' - was not following BEM convention, 'item' is an element, not a modifier --- CHANGELOG.md | 1 + .../components/_breadcrumbs.scss | 2 +- .../components/_breadcrumbs.html.erb | 2 +- spec/components/breadcrumbs_spec.rb | 24 +++++++++---------- 4 files changed, 15 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 060dbd7aa1..f7c74c781b 100644 --- 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 index 8e659855cf..be8c843004 100644 --- 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 index 1f04e043cd..5270ab0356 100644 --- 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 ' : '') %> -
  • +
  • <% if is_link %> <%= link_to( crumb[:title], diff --git a/spec/components/breadcrumbs_spec.rb b/spec/components/breadcrumbs_spec.rb index 5df115a13e..efaee96dd0 100644 --- 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