From bfb996a43259b085c4e0b3b48fe68382d45402e3 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Thu, 7 Jan 2016 13:15:55 +0000 Subject: [PATCH 1/3] Create a breadcrumbs component Running: `bundle exec rails generate govuk_component breadcrumbs` --- .../stylesheets/govuk-component/_breadcrumbs.scss | 3 +++ .../stylesheets/govuk-component/_component.scss | 1 + app/views/govuk_component/breadcrumbs.raw.html.erb | 3 +++ app/views/govuk_component/docs/breadcrumbs.yml | 10 ++++++++++ test/govuk_component/breadcrumbs_test.rb | 14 ++++++++++++++ 5 files changed, 31 insertions(+) create mode 100644 app/assets/stylesheets/govuk-component/_breadcrumbs.scss create mode 100644 app/views/govuk_component/breadcrumbs.raw.html.erb create mode 100644 app/views/govuk_component/docs/breadcrumbs.yml create mode 100644 test/govuk_component/breadcrumbs_test.rb diff --git a/app/assets/stylesheets/govuk-component/_breadcrumbs.scss b/app/assets/stylesheets/govuk-component/_breadcrumbs.scss new file mode 100644 index 000000000..9547206d3 --- /dev/null +++ b/app/assets/stylesheets/govuk-component/_breadcrumbs.scss @@ -0,0 +1,3 @@ +.govuk-breadcrumbs { + +} diff --git a/app/assets/stylesheets/govuk-component/_component.scss b/app/assets/stylesheets/govuk-component/_component.scss index 00a206586..237927a96 100644 --- a/app/assets/stylesheets/govuk-component/_component.scss +++ b/app/assets/stylesheets/govuk-component/_component.scss @@ -12,3 +12,4 @@ @import "title"; @import "option-select"; @import "previous-and-next-navigation"; +@import "breadcrumbs"; diff --git a/app/views/govuk_component/breadcrumbs.raw.html.erb b/app/views/govuk_component/breadcrumbs.raw.html.erb new file mode 100644 index 000000000..8b2973ab6 --- /dev/null +++ b/app/views/govuk_component/breadcrumbs.raw.html.erb @@ -0,0 +1,3 @@ +
+ Breadcrumbs +
diff --git a/app/views/govuk_component/docs/breadcrumbs.yml b/app/views/govuk_component/docs/breadcrumbs.yml new file mode 100644 index 000000000..8aeb63813 --- /dev/null +++ b/app/views/govuk_component/docs/breadcrumbs.yml @@ -0,0 +1,10 @@ +name: "Breadcrumbs" +description: "Navigational breadcrumbs, showing section hierarchy" +body: | + A long form description of the Breadcrumbs component, which may + include markdown formatting. + + It should try and descrive the intent of the component, and document + any parameters passed to the component. +fixtures: + default: {} diff --git a/test/govuk_component/breadcrumbs_test.rb b/test/govuk_component/breadcrumbs_test.rb new file mode 100644 index 000000000..8c9ffe673 --- /dev/null +++ b/test/govuk_component/breadcrumbs_test.rb @@ -0,0 +1,14 @@ +require 'govuk_component_test_helper' + +class BreadcrumbsTestCase < ComponentTestCase + def component_name + "breadcrumbs" + end + + test "no error if no parameters passed in" do + assert_nothing_raised do + render_component({}) + assert_select ".govuk-breadcrumbs" + end + end +end From 4790d0776463c42117084448a99ace1c72efed80 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Thu, 7 Jan 2016 13:33:14 +0000 Subject: [PATCH 2/3] Add breadcrumbs markup, styles and docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Base styles on 20505dd7a398ea4ff7b449598049cff108dabab9 * Remove `strong` styles as those don’t appear in the markup * Also based on #global-header in `_header.scss` --- .../govuk-component/_breadcrumbs.scss | 32 +++++++++++++++++ .../govuk_component/breadcrumbs.raw.html.erb | 14 +++++++- .../govuk_component/docs/breadcrumbs.yml | 35 +++++++++++++++---- test/govuk_component/breadcrumbs_test.rb | 20 +++++++++++ 4 files changed, 93 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/govuk-component/_breadcrumbs.scss b/app/assets/stylesheets/govuk-component/_breadcrumbs.scss index 9547206d3..ed14ad8d5 100644 --- a/app/assets/stylesheets/govuk-component/_breadcrumbs.scss +++ b/app/assets/stylesheets/govuk-component/_breadcrumbs.scss @@ -1,3 +1,35 @@ .govuk-breadcrumbs { + padding-top: 0.75em; + padding-bottom: 0.75em; + ol { + @extend %contain-floats; + + li { + @include core-16; + background-image: image-url("separator.png"); + background-position: 100% 50%; + background-repeat: no-repeat; + float: left; + list-style: none; + margin-left: 0; + margin-right: 0.5em; + margin-bottom: 0.4em; + padding-right: 1em; + + @include device-pixel-ratio() { + background-image: image-url("separator-2x.png"); + background-size: 6px 11px; + } + + a { + color: $text-colour; + } + + &:last-child { + background-image: none; + margin-right: 0 + } + } + } } diff --git a/app/views/govuk_component/breadcrumbs.raw.html.erb b/app/views/govuk_component/breadcrumbs.raw.html.erb index 8b2973ab6..5bea29163 100644 --- a/app/views/govuk_component/breadcrumbs.raw.html.erb +++ b/app/views/govuk_component/breadcrumbs.raw.html.erb @@ -1,3 +1,15 @@ +<% + breadcrumbs ||= [] +%>
- Breadcrumbs +
    +
  1. + Home +
    2. + <% breadcrumbs.each do |crumb| %> +
  2. + <%= crumb[:title] %> +
    3. + <% end %> +
diff --git a/app/views/govuk_component/docs/breadcrumbs.yml b/app/views/govuk_component/docs/breadcrumbs.yml index 8aeb63813..4fff1fe1e 100644 --- a/app/views/govuk_component/docs/breadcrumbs.yml +++ b/app/views/govuk_component/docs/breadcrumbs.yml @@ -1,10 +1,31 @@ name: "Breadcrumbs" -description: "Navigational breadcrumbs, showing section hierarchy" +description: "Navigational breadcrumbs, showing page hierarchy" body: | - A long form description of the Breadcrumbs component, which may - include markdown formatting. - - It should try and descrive the intent of the component, and document - any parameters passed to the component. + Accepts an array of breadcrumb objects. Each crumb must have a title and a URL. fixtures: - default: {} + default: + breadcrumbs: + - title: 'Section' + url: '/section' + - title: 'Sub-section' + url: '/section/sub-section' + no_breadcrumbs: + breadcrumbs: [] + single_section: + breadcrumbs: + - title: 'Section' + url: '/section' + many_breadcrumbs: + breadcrumbs: + - title: 'Section' + url: '/section' + - title: 'Sub-section' + url: '/section/sub-section' + - title: 'Sub Sub-section' + url: '/section/sub-section/sub-sub-section' + real: + breadcrumbs: + - title: 'Passports, travel and living abroad' + url: '/browse/abroad' + - title: 'Travel abroad' + url: '/browse/abroad/travel-abroad' diff --git a/test/govuk_component/breadcrumbs_test.rb b/test/govuk_component/breadcrumbs_test.rb index 8c9ffe673..95904ec7e 100644 --- a/test/govuk_component/breadcrumbs_test.rb +++ b/test/govuk_component/breadcrumbs_test.rb @@ -11,4 +11,24 @@ def component_name assert_select ".govuk-breadcrumbs" end end + + test "renders a single breadcrumb" do + render_component({ breadcrumbs: [{title: 'Section', url: '/section'}] }) + + assert_link_with_text_in('ol li:first-child', '/', 'Home') + assert_link_with_text_in('ol li:last-child', '/section', 'Section') + end + + test "renders a list of breadcrumbs" do + render_component({ + breadcrumbs: [ + {title: 'Section', url: '/section'}, + {title: 'Sub-section', url: '/sub-section'}, + ] + }) + + assert_link_with_text_in('ol li:first-child', '/', 'Home') + assert_link_with_text_in('ol li:first-child + li', '/section', 'Section') + assert_link_with_text_in('ol li:last-child', '/sub-section', 'Sub-section') + end end From bd74f852184914fbad8be3648e48d56ea07a7be6 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Thu, 7 Jan 2016 16:54:58 +0000 Subject: [PATCH 3/3] Use first-child not last-child for IE8 support MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit IE8 doesn’t support last-child, that’s a CSS3 selector. Switch around margin and padding, so that the image appears to the left of each crumb, but it hidden on the first item. Tweak left margin so that space left and right of divider is even. --- .../stylesheets/govuk-component/_breadcrumbs.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/govuk-component/_breadcrumbs.scss b/app/assets/stylesheets/govuk-component/_breadcrumbs.scss index ed14ad8d5..d13647ba7 100644 --- a/app/assets/stylesheets/govuk-component/_breadcrumbs.scss +++ b/app/assets/stylesheets/govuk-component/_breadcrumbs.scss @@ -8,14 +8,14 @@ li { @include core-16; background-image: image-url("separator.png"); - background-position: 100% 50%; + background-position: 0% 50%; background-repeat: no-repeat; float: left; list-style: none; - margin-left: 0; - margin-right: 0.5em; + margin-left: 0.6em; + margin-right: 0; margin-bottom: 0.4em; - padding-right: 1em; + padding-left: 0.9em; @include device-pixel-ratio() { background-image: image-url("separator-2x.png"); @@ -26,9 +26,10 @@ color: $text-colour; } - &:last-child { + &:first-child { background-image: none; - margin-right: 0 + margin-left: 0; + padding-left: 0; } } }