Merge pull request #700 from alphagov/breadcrumb-component

Create a breadcrumb component
alphagov · Jan 13, 2016 · 12c72ba · 12c72ba
2 parents b0cc136 + bd74f85
commit 12c72ba
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 0 deletions.
diff --git a/app/assets/stylesheets/govuk-component/_breadcrumbs.scss b/app/assets/stylesheets/govuk-component/_breadcrumbs.scss
@@ -0,0 +1,36 @@
+.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: 0% 50%;
+      background-repeat: no-repeat;
+      float: left;
+      list-style: none;
+      margin-left: 0.6em;
+      margin-right: 0;
+      margin-bottom: 0.4em;
+      padding-left: 0.9em;
+
+      @include device-pixel-ratio() {
+        background-image: image-url("separator-2x.png");
+        background-size: 6px 11px;
+      }
+
+      a {
+        color: $text-colour;
+      }
+
+      &:first-child {
+        background-image: none;
+        margin-left: 0;
+        padding-left: 0;
+      }
+    }
+  }
+}
diff --git 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
@@ -0,0 +1,15 @@
+<%
+  breadcrumbs ||= []
+%>
+<div class="govuk-breadcrumbs">
+  <ol role="breadcrumbs">
+    <li>
+      <a href="/">Home</a>
+    </li>
+  <% breadcrumbs.each do |crumb| %>
+    <li>
+      <a href="<%= crumb[:url] %>"><%= crumb[:title] %></a>
+    </li>
+  <% end %>
+  </ol>
+</div>
diff --git a/app/views/govuk_component/docs/breadcrumbs.yml b/app/views/govuk_component/docs/breadcrumbs.yml
@@ -0,0 +1,31 @@
+name: "Breadcrumbs"
+description: "Navigational breadcrumbs, showing page hierarchy"
+body: |
+  Accepts an array of breadcrumb objects. Each crumb must have a title and a URL.
+fixtures:
+  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
@@ -0,0 +1,34 @@
+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
+
+  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