govuk_publishing_components 21.26.2 → 21.27.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5cc3f29fce3143ed9b648c5c9e49471e5624f51d42fcca04941b166962f1ef10
-  data.tar.gz: f8163f7c80c04ae79ee9628b073883ff404a4afd2415e181bf419a1cf2b196ce
+  metadata.gz: 926eefc2e1371872c0076a40a8ad38e7a55ba57ebb4189ff1f7983c93ade26b8
+  data.tar.gz: 4b96bfdaf064b0e4852b1fc77a4a7a7ef2878cac5d988a81db2b13cad798f569
 SHA512:
-  metadata.gz: 8fa1baf83ec27c033f21c2c64a90a787a4a7a6e471e425941000e480213e90451e543704d178788c72f28107fb1dbb64a3735f3d9ad8e4d9f0fdccb416a09290
-  data.tar.gz: fa6bf742ccc2812e7f43c717e3386170db7fa8b6c2fb8a7910d2880254c48bfb8690424eda8b285d63c33443bd0cc2a89c99a4937076b95a424084b96c5cd631
+  metadata.gz: c2be2064bf8f2a797bc42ed13037f32bdd8416d316deeb8d07a7ca932947180e4c890974254b73984ced7e15ac913e27d786797e0581b7dc9a6044b226588b6d
+  data.tar.gz: 1a9768c825581a024b4770d190cbf077f930d386530fcb0f9471288ae6cac0ee9e0ff0fcc7a45955ac97ee2e58db2eb3b2b592961e32fd3844b237eca0046de8

data/app/assets/stylesheets/govuk_publishing_components/component_support.scss

@@ -3,7 +3,6 @@
 // and everything else from govuk-frontend not included in govuk_frontend_support
 @import "govuk/core/all";
 @import "govuk/objects/all";
-@import "govuk/components/all";
 @import "govuk/utilities/all";
 @import "govuk/overrides/all";
 

data/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss

@@ -21,36 +21,37 @@
   border-color: govuk-colour("white");
 }
 
-@include govuk-media-query($until: tablet) {
-
-  .govuk-breadcrumbs__list {
-    display: flex;
-  }
-
-  .govuk-breadcrumbs__list-item:not(:last-child):not(:first-child) {
-    display: none;
-  }
-
-  .govuk-breadcrumbs__list-item {
-    padding-top: 14px;
-    padding-bottom: 14px;
-  }
-
-  .govuk-breadcrumbs__list-item:before {
-    margin: 0;
-    top: 18px;
-  }
-
-  .govuk-breadcrumbs__link {
-    position: relative;
-  }
-
-  .govuk-breadcrumbs__link::after {
-    content: "";
-    position: absolute;
-    top: -14px;
-    right: 0;
-    left: 0;
-    bottom: -14px;
+.gem-c-breadcrumbs--collapse-on-mobile {
+  @include govuk-media-query($until: tablet) {
+    .govuk-breadcrumbs__list {
+      display: flex;
+    }
+
+    .govuk-breadcrumbs__list-item:not(:last-child):not(:first-child) {
+      display: none;
+    }
+
+    .govuk-breadcrumbs__list-item {
+      padding-top: 14px;
+      padding-bottom: 14px;
+    }
+
+    .govuk-breadcrumbs__list-item:before {
+      margin: 0;
+      top: 18px;
+    }
+
+    .govuk-breadcrumbs__link {
+      position: relative;
+    }
+
+    .govuk-breadcrumbs__link::after {
+      content: "";
+      position: absolute;
+      top: -14px;
+      right: 0;
+      left: 0;
+      bottom: -14px;
+    }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss

@@ -10,16 +10,6 @@
   box-shadow: 0 20px 15px -10px govuk-colour("white");
 }
 
-.gem-c-contents-list--font-size-19 .gem-c-contents-list__title,
-.gem-c-contents-list--font-size-19 .gem-c-contents-list__list {
-  @include govuk-font($size: 19, $line-height: 1.5);
-}
-
-.gem-c-contents-list--font-size-24 .gem-c-contents-list__title,
-.gem-c-contents-list--font-size-24 .gem-c-contents-list__list {
-  @include govuk-font($size: 24, $line-height: 1.5);
-}
-
 .gem-c-contents-list__title {
   @include govuk-text-colour;
   @include govuk-font($size: 16, $weight: regular, $line-height: 1.5);

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

@@ -1,31 +1,37 @@
 <%
   breadcrumbs ||= []
   inverse ||= false
-  invert_class = inverse ? "gem-c-breadcrumbs--inverse" : ""
+  collapse_on_mobile ||= false
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
+
+  classes = "gem-c-breadcrumbs govuk-breadcrumbs"
+  classes << " gem-c-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
+  classes << " gem-c-breadcrumbs--inverse" if inverse
 %>
 
 <script type="application/ld+json">
   <%= raw breadcrumb_presenter.structured_data.to_json %>
 </script>
 
-<div class="gem-c-breadcrumbs govuk-breadcrumbs <%= invert_class %>" data-module="track-click">
+<div class="<%= classes %>" data-module="track-click">
   <ol class="govuk-breadcrumbs__list">
     <% breadcrumbs.each_with_index do |crumb, index| %>
       <% breadcrumb = GovukPublishingComponents::Presenters::Breadcrumb.new(crumb, index) %>
+        <li class="govuk-breadcrumbs__list-item" aria-current="<%= breadcrumb.aria_current %>">
         <% if breadcrumb.is_link? %>
-          <li class="govuk-breadcrumbs__list-item" aria-current="<%= breadcrumb.aria_current %>">
-              <%= link_to(
-                breadcrumb[:title],
-                breadcrumb.path,
-                data: breadcrumb.tracking_data(breadcrumbs.length),
-                class: "govuk-breadcrumbs__link",
-                aria: {
-                  current: breadcrumb.aria_current,
-                }
-              ) %>
-          </li>
+          <%= link_to(
+            breadcrumb[:title],
+            breadcrumb.path,
+            data: breadcrumb.tracking_data(breadcrumbs.length),
+            class: "govuk-breadcrumbs__link",
+            aria: {
+              current: breadcrumb.aria_current,
+            }
+          ) %>
+        <% else %>
+          <%= breadcrumb[:title] %>
         <% end %>
+        </li>
     <% end %>
   </ol>
 </div>

data/app/views/govuk_publishing_components/components/_contextual_breadcrumbs.html.erb

@@ -1,6 +1,7 @@
 <% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request) %>
 <% prioritise_taxon_breadcrumbs ||= false %>
 <% inverse ||= false %>
+<% collapse_on_mobile ||= true unless local_assigns[:collapse_on_mobile].eql?(false) %>
 
 <div class='gem-c-contextual-breadcrumbs'>
   <% if navigation.content_tagged_to_current_step_by_step? %>
@@ -9,27 +10,29 @@
       navigation.step_nav_helper.header %>
   <% elsif navigation.content_tagged_to_a_finder? %>
     <%# Rendering finder breadcrumbs because the page is tagged to a finder %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse %>
+    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
   <% elsif navigation.content_is_tagged_to_a_live_taxon? && prioritise_taxon_breadcrumbs %>
     <%# Rendering taxonomy breadcrumbs because the page is tagged to live taxons
           and we want to prioritise them over all other breadcrumbs %>
     <%= render 'govuk_publishing_components/components/breadcrumbs',
                breadcrumbs: navigation.taxon_breadcrumbs[:breadcrumbs],
-               inverse: inverse %>
+               inverse: inverse,
+               collapse_on_mobile: collapse_on_mobile %>
   <% elsif navigation.content_tagged_to_mainstream_browse_pages? %>
     <%# Rendering parent-based breadcrumbs because the page is tagged to mainstream browse %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse %>
+    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
   <% elsif navigation.content_has_curated_related_items? %>
     <%# Rendering parent-based breadcrumbs because the page has curated related links %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse %>
+    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
   <% elsif navigation.content_is_tagged_to_a_live_taxon? && !navigation.content_is_a_specialist_document? %>
     <%# Rendering taxonomy breadcrumbs because the page is tagged to live taxons %>
     <%= render 'govuk_publishing_components/components/breadcrumbs',
       breadcrumbs: navigation.taxon_breadcrumbs[:breadcrumbs],
-      inverse: inverse %>
+      inverse: inverse,
+      collapse_on_mobile: collapse_on_mobile %>
   <% elsif navigation.breadcrumbs.any? %>
     <%# Rendering parent-based breadcrumbs because no browse, no related links, no live taxons %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse %>
+    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
   <% else %>
     <%# Not rendering any breadcrumbs because there aren't any %>
   <% end %>

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

@@ -4,7 +4,7 @@ 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.
+   We recommend that if using the breadcrumbs for navigation purposes, you set collapse_on_mobile to true to make things more readable for mobile users. However, you can specify `collapse_on_mobile`:`false` or remove the flag completely to stop this behaviour.
 shared_accessibility_criteria:
   - link
 accessibility_criteria:
@@ -16,6 +16,7 @@ display_html: true
 examples:
   default:
     data:
+      collapse_on_mobile: true
       breadcrumbs:
       - title: 'Section'
         url: '/section'
@@ -24,6 +25,7 @@ examples:
   inverse:
     description: On a dark background, such as the header of topic pages
     data:
+      collapse_on_mobile: true
       breadcrumbs:
       - title: 'Section'
         url: '/section'
@@ -35,14 +37,17 @@ examples:
       dark_background: true
   no_breadcrumbs:
     data:
+      collapse_on_mobile: true
       breadcrumbs: []
   single_section:
     data:
+      collapse_on_mobile: true
       breadcrumbs:
       - title: 'Section'
         url: '/section'
   many_breadcrumbs:
     data:
+      collapse_on_mobile: true
       breadcrumbs:
       - title: 'Home'
         url: '/'
@@ -54,6 +59,7 @@ examples:
         url: '/section/sub-section/sub-sub-section'
   no_home:
     data:
+      collapse_on_mobile: true
       breadcrumbs:
       - title: 'Service Manual'
         url: '/service-manual'
@@ -61,6 +67,7 @@ examples:
         url: '/service-manual/agile-delivery'
   real:
     data:
+      collapse_on_mobile: true
       breadcrumbs:
       - title: 'Home'
         url: '/'
@@ -68,9 +75,10 @@ examples:
         url: '/browse/abroad'
       - title: 'Travel abroad'
         url: '/browse/abroad/travel-abroad'
-  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
+  long_taxon:
+    description: This is an example of a breadcrumb with long taxons to demonstrate the wrapping behaviour and touch target area on mobile
     data:
+      collapse_on_mobile: true
       breadcrumbs:
       - title: 'Home'
         url: '/'
@@ -78,3 +86,14 @@ examples:
         url: '/education'
       - title: 'Education of disadvantaged children appended with some extra long content to make this a very very very very long taxon'
         url: '/education'
+  stop_collapsing_on_mobile:
+    description: We recommend that if using the breadcrumbs for navigation purposes, you set collapse_on_mobile to true to make things more readable for mobile users. However, you can specify `collapse_on_mobile`:`false` or remove the flag completely to stop this behaviour.
+    data:
+      collapse_on_mobile: false
+      breadcrumbs:
+      - title: 'Home'
+        url: '/'
+      - title: 'Passports, travel and living abroad'
+        url: '/browse/abroad'
+      - title: 'Travel abroad'
+        url: '/browse/abroad/travel-abroad'

data/app/views/govuk_publishing_components/components/docs/contents_list.yml

@@ -217,14 +217,3 @@ examples:
             text: Guidance and regulation
           - href: "#third-thing"
             text: Consultations
-  with_different_font_size:
-    description: Choose a different font size. Valid options are 24 (24px) and 19 (19px), with the component defaulting to 16px.
-    data:
-      font_size: 24
-      contents:
-        - href: "#first-thing"
-          text: Community best practice
-        - href: "#second-thing"
-          text: Guidance and regulation
-        - href: "#third-thing"
-          text: Consultations

data/lib/govuk_publishing_components/presenters/contents_list_helper.rb

@@ -11,11 +11,9 @@ module GovukPublishingComponents
         @contents = options[:contents] || []
         @nested = !!@contents.find { |c| c[:items] && c[:items].any? }
         @format_numbers = options[:format_numbers]
-        @font_size = options[:font_size]
 
         @classes = %w(gem-c-contents-list)
         @classes << " gem-c-contents-list--no-underline" unless options[:underline_links]
-        @classes << " gem-c-contents-list--font-size-#{@font_size}" if [24, 19].include? @font_size
       end
 
       def list_item_classes(list_item, nested)

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '21.26.2'.freeze
+  VERSION = '21.27.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 21.26.2
+  version: 21.27.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-02-27 00:00:00.000000000 Z
+date: 2020-02-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: gds-api-adapters