Merge pull request #1298 from alphagov/mobile-breadcrumb-update-guidance

Mobile breadcrumb update guidance

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Mobile breadcrumb update guidance [PR #1298](https://github.com/alphagov/govuk_publishing_components/pull/1298)
+
 ## 21.23.1
 
 * Change attachment request format text to match Whitehall ([PR #1306](https://github.com/alphagov/govuk_publishing_components/pull/1306))

app/views/govuk_publishing_components/components/_breadcrumbs.html.erb

@@ -2,7 +2,7 @@
   breadcrumbs ||= []
   inverse ||= false
   invert_class = inverse ? "gem-c-breadcrumbs--inverse" : ""
-  breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs, request.path)
+  breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 %>
 
 <script type="application/ld+json">

app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb

@@ -6,7 +6,7 @@
     { title: "Home", url: "/" },
     { title: title, url: path }
   ]
-  breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs, request.path)
+  breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 %>
 <% if title %>
   <script type="application/ld+json">

app/views/govuk_publishing_components/components/docs/breadcrumbs.yml

@@ -3,6 +3,8 @@ description: "Navigational breadcrumbs, showing page hierarchy"
 body: |
   Accepts an array of breadcrumb objects. Each crumb must have a title and a URL.
   Links have tracking data but links to the homepage (any link with a url of "/") will be tracked separately as `homeLinkClicked`
+
+  Note: Only the first and last (or parent) item in the breadcrumb will be displayed when the page width is less than the "tablet" govuk-breakpoint.
 shared_accessibility_criteria:
   - link
 accessibility_criteria:
@@ -28,7 +30,6 @@ examples:
       - title: 'Sub-section'
         url: '/section/sub-section'
         title: 'Education of disadvantaged children'
-        is_current_page: true
       inverse: true
     context:
       dark_background: true
@@ -67,32 +68,14 @@ examples:
         url: '/browse/abroad'
       - title: 'Travel abroad'
         url: '/browse/abroad/travel-abroad'
-  last_breadcrumb_is_current_page:
-    data:
-      breadcrumbs:
-      - title: 'Home'
-        url: '/'
-      - title: 'Passports, travel and living abroad'
-        url: '/browse/abroad'
-      - title: 'Travel abroad'
-  highlight_current_page:
-    description: This is currently used on pages tagged to the taxonomy, such as [on this page](https://www.gov.uk/guidance/pupil-premium-information-for-schools-and-alternative-provision-settings).
-    data:
-      breadcrumbs:
-      - title: 'Home'
-        url: '/'
-      - title: 'Education, training and skills'
-        url: '/education'
-      - title: 'Education of disadvantaged children'
-        is_current_page: true
-  collapse_on_mobile:
-    description: This is currently used within on pages tagged to the taxonomy, such as [on this page](https://www.gov.uk/guidance/pupil-premium-information-for-schools-and-alternative-provision-settings).
+  long_taxon_on_mobile:
+    description: This is an example of a breadcrumb (specifically for mobile) with long taxons on the the parent item and a greater touch target area
     data:
       collapse_on_mobile: true
       breadcrumbs:
       - title: 'Home'
         url: '/'
       - title: 'Education, training and skills'
         url: '/education'
-        is_page_parent: true
-      - title: 'Education of disadvantaged children'
+      - title: 'Education of disadvantaged children appended with some extra long content to make this a very very very very long taxon'
+        url: '/education'

lib/govuk_publishing_components/presenters/breadcrumbs.rb

@@ -1,9 +1,8 @@
 module GovukPublishingComponents
   module Presenters
     class Breadcrumbs
-      def initialize(breadcrumbs, request_path)
+      def initialize(breadcrumbs)
         @breadcrumbs = breadcrumbs
-        @request_path = request_path
       end
 
       def structured_data
@@ -16,12 +15,12 @@ def structured_data
 
     private
 
-      attr_reader :breadcrumbs, :request_path
+      attr_reader :breadcrumbs
 
       def item_list_element
         breadcrumbs.each_with_index.map { |crumb, index| Breadcrumb.new(crumb, index) }.
           select(&:is_link?).
-          map { |breadcrumb| breadcrumb.item_list_element(@request_path) }
+          map(&:item_list_element)
       end
     end
 
@@ -34,24 +33,24 @@ def initialize(crumb, index)
         @index = index + 1
       end
 
-      def item_list_element(request_path)
+      def item_list_element
         {
           "@type" => "ListItem",
           "position" => index,
-          "item" => list_item_item(request_path)
+          "item" => list_item_item
         }
       end
 
       def is_link?
-        crumb[:url].present? || crumb[:is_current_page]
+        crumb[:url].present?
       end
 
       def path
-        crumb[:is_current_page] ? '#content' : crumb[:url]
+        crumb[:url]
       end
 
       def aria_current
-        crumb[:is_current_page] ? 'page' : 'false'
+        'false'
       end
 
       def tracking_data(breadcrumbs_length)
@@ -81,8 +80,8 @@ def tracking_data(breadcrumbs_length)
 
       attr_reader :crumb, :index
 
-      def list_item_item(request_path)
-        path = crumb[:is_current_page] ? request_path : crumb[:url]
+      def list_item_item
+        path = crumb[:url]
         item = { "name" => crumb[:title] }
         item["@id"] = Plek.new.website_root + path if path
         item

spec/components/breadcrumbs_spec.rb

@@ -24,9 +24,9 @@ def assert_link_with_text_in(selector, link, text)
     breadcrumbs = [
       { title: 'Section 1', url: '/section-1' },
       { title: 'Section 2', url: '/section-2' },
-      { title: 'Section 3', is_current_page: true },
+      { title: 'Section 3', url: '/section-3' },
     ]
-    structured_data = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs, "/section-3").structured_data
+    structured_data = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs).structured_data
     expect(structured_data["@type"]).to eq("BreadcrumbList")
     expect(structured_data["itemListElement"].first["@type"]).to eq("ListItem")
     expect(structured_data["itemListElement"].first["position"]).to eq(1)
@@ -43,7 +43,7 @@ def assert_link_with_text_in(selector, link, text)
       { title: 'Section 1', url: '/section-1' },
       { title: 'Section 2' },
     ]
-    structured_data = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs, "/section-3").structured_data
+    structured_data = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs).structured_data
     expect(structured_data["@type"]).to eq("BreadcrumbList")
     expect(structured_data["itemListElement"].count).to eq(1)
     expect(structured_data["itemListElement"].first["@type"]).to eq("ListItem")