govuk_publishing_components 21.26.2 → 21.27.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5cc3f29fce3143ed9b648c5c9e49471e5624f51d42fcca04941b166962f1ef10
4
- data.tar.gz: f8163f7c80c04ae79ee9628b073883ff404a4afd2415e181bf419a1cf2b196ce
3
+ metadata.gz: 926eefc2e1371872c0076a40a8ad38e7a55ba57ebb4189ff1f7983c93ade26b8
4
+ data.tar.gz: 4b96bfdaf064b0e4852b1fc77a4a7a7ef2878cac5d988a81db2b13cad798f569
5
5
  SHA512:
6
- metadata.gz: 8fa1baf83ec27c033f21c2c64a90a787a4a7a6e471e425941000e480213e90451e543704d178788c72f28107fb1dbb64a3735f3d9ad8e4d9f0fdccb416a09290
7
- data.tar.gz: fa6bf742ccc2812e7f43c717e3386170db7fa8b6c2fb8a7910d2880254c48bfb8690424eda8b285d63c33443bd0cc2a89c99a4937076b95a424084b96c5cd631
6
+ metadata.gz: c2be2064bf8f2a797bc42ed13037f32bdd8416d316deeb8d07a7ca932947180e4c890974254b73984ced7e15ac913e27d786797e0581b7dc9a6044b226588b6d
7
+ data.tar.gz: 1a9768c825581a024b4770d190cbf077f930d386530fcb0f9471288ae6cac0ee9e0ff0fcc7a45955ac97ee2e58db2eb3b2b592961e32fd3844b237eca0046de8
@@ -3,7 +3,6 @@
3
3
  // and everything else from govuk-frontend not included in govuk_frontend_support
4
4
  @import "govuk/core/all";
5
5
  @import "govuk/objects/all";
6
- @import "govuk/components/all";
7
6
  @import "govuk/utilities/all";
8
7
  @import "govuk/overrides/all";
9
8
 
@@ -21,36 +21,37 @@
21
21
  border-color: govuk-colour("white");
22
22
  }
23
23
 
24
- @include govuk-media-query($until: tablet) {
25
-
26
- .govuk-breadcrumbs__list {
27
- display: flex;
28
- }
29
-
30
- .govuk-breadcrumbs__list-item:not(:last-child):not(:first-child) {
31
- display: none;
32
- }
33
-
34
- .govuk-breadcrumbs__list-item {
35
- padding-top: 14px;
36
- padding-bottom: 14px;
37
- }
38
-
39
- .govuk-breadcrumbs__list-item:before {
40
- margin: 0;
41
- top: 18px;
42
- }
43
-
44
- .govuk-breadcrumbs__link {
45
- position: relative;
46
- }
47
-
48
- .govuk-breadcrumbs__link::after {
49
- content: "";
50
- position: absolute;
51
- top: -14px;
52
- right: 0;
53
- left: 0;
54
- bottom: -14px;
24
+ .gem-c-breadcrumbs--collapse-on-mobile {
25
+ @include govuk-media-query($until: tablet) {
26
+ .govuk-breadcrumbs__list {
27
+ display: flex;
28
+ }
29
+
30
+ .govuk-breadcrumbs__list-item:not(:last-child):not(:first-child) {
31
+ display: none;
32
+ }
33
+
34
+ .govuk-breadcrumbs__list-item {
35
+ padding-top: 14px;
36
+ padding-bottom: 14px;
37
+ }
38
+
39
+ .govuk-breadcrumbs__list-item:before {
40
+ margin: 0;
41
+ top: 18px;
42
+ }
43
+
44
+ .govuk-breadcrumbs__link {
45
+ position: relative;
46
+ }
47
+
48
+ .govuk-breadcrumbs__link::after {
49
+ content: "";
50
+ position: absolute;
51
+ top: -14px;
52
+ right: 0;
53
+ left: 0;
54
+ bottom: -14px;
55
+ }
55
56
  }
56
57
  }
@@ -10,16 +10,6 @@
10
10
  box-shadow: 0 20px 15px -10px govuk-colour("white");
11
11
  }
12
12
 
13
- .gem-c-contents-list--font-size-19 .gem-c-contents-list__title,
14
- .gem-c-contents-list--font-size-19 .gem-c-contents-list__list {
15
- @include govuk-font($size: 19, $line-height: 1.5);
16
- }
17
-
18
- .gem-c-contents-list--font-size-24 .gem-c-contents-list__title,
19
- .gem-c-contents-list--font-size-24 .gem-c-contents-list__list {
20
- @include govuk-font($size: 24, $line-height: 1.5);
21
- }
22
-
23
13
  .gem-c-contents-list__title {
24
14
  @include govuk-text-colour;
25
15
  @include govuk-font($size: 16, $weight: regular, $line-height: 1.5);
@@ -1,31 +1,37 @@
1
1
  <%
2
2
  breadcrumbs ||= []
3
3
  inverse ||= false
4
- invert_class = inverse ? "gem-c-breadcrumbs--inverse" : ""
4
+ collapse_on_mobile ||= false
5
5
  breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
6
+
7
+ classes = "gem-c-breadcrumbs govuk-breadcrumbs"
8
+ classes << " gem-c-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
9
+ classes << " gem-c-breadcrumbs--inverse" if inverse
6
10
  %>
7
11
 
8
12
  <script type="application/ld+json">
9
13
  <%= raw breadcrumb_presenter.structured_data.to_json %>
10
14
  </script>
11
15
 
12
- <div class="gem-c-breadcrumbs govuk-breadcrumbs <%= invert_class %>" data-module="track-click">
16
+ <div class="<%= classes %>" data-module="track-click">
13
17
  <ol class="govuk-breadcrumbs__list">
14
18
  <% breadcrumbs.each_with_index do |crumb, index| %>
15
19
  <% breadcrumb = GovukPublishingComponents::Presenters::Breadcrumb.new(crumb, index) %>
20
+ <li class="govuk-breadcrumbs__list-item" aria-current="<%= breadcrumb.aria_current %>">
16
21
  <% if breadcrumb.is_link? %>
17
- <li class="govuk-breadcrumbs__list-item" aria-current="<%= breadcrumb.aria_current %>">
18
- <%= link_to(
19
- breadcrumb[:title],
20
- breadcrumb.path,
21
- data: breadcrumb.tracking_data(breadcrumbs.length),
22
- class: "govuk-breadcrumbs__link",
23
- aria: {
24
- current: breadcrumb.aria_current,
25
- }
26
- ) %>
27
- </li>
22
+ <%= link_to(
23
+ breadcrumb[:title],
24
+ breadcrumb.path,
25
+ data: breadcrumb.tracking_data(breadcrumbs.length),
26
+ class: "govuk-breadcrumbs__link",
27
+ aria: {
28
+ current: breadcrumb.aria_current,
29
+ }
30
+ ) %>
31
+ <% else %>
32
+ <%= breadcrumb[:title] %>
28
33
  <% end %>
34
+ </li>
29
35
  <% end %>
30
36
  </ol>
31
37
  </div>
@@ -1,6 +1,7 @@
1
1
  <% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request) %>
2
2
  <% prioritise_taxon_breadcrumbs ||= false %>
3
3
  <% inverse ||= false %>
4
+ <% collapse_on_mobile ||= true unless local_assigns[:collapse_on_mobile].eql?(false) %>
4
5
 
5
6
  <div class='gem-c-contextual-breadcrumbs'>
6
7
  <% if navigation.content_tagged_to_current_step_by_step? %>
@@ -9,27 +10,29 @@
9
10
  navigation.step_nav_helper.header %>
10
11
  <% elsif navigation.content_tagged_to_a_finder? %>
11
12
  <%# Rendering finder breadcrumbs because the page is tagged to a finder %>
12
- <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse %>
13
+ <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
13
14
  <% elsif navigation.content_is_tagged_to_a_live_taxon? && prioritise_taxon_breadcrumbs %>
14
15
  <%# Rendering taxonomy breadcrumbs because the page is tagged to live taxons
15
16
  and we want to prioritise them over all other breadcrumbs %>
16
17
  <%= render 'govuk_publishing_components/components/breadcrumbs',
17
18
  breadcrumbs: navigation.taxon_breadcrumbs[:breadcrumbs],
18
- inverse: inverse %>
19
+ inverse: inverse,
20
+ collapse_on_mobile: collapse_on_mobile %>
19
21
  <% elsif navigation.content_tagged_to_mainstream_browse_pages? %>
20
22
  <%# Rendering parent-based breadcrumbs because the page is tagged to mainstream browse %>
21
- <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse %>
23
+ <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
22
24
  <% elsif navigation.content_has_curated_related_items? %>
23
25
  <%# Rendering parent-based breadcrumbs because the page has curated related links %>
24
- <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse %>
26
+ <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
25
27
  <% elsif navigation.content_is_tagged_to_a_live_taxon? && !navigation.content_is_a_specialist_document? %>
26
28
  <%# Rendering taxonomy breadcrumbs because the page is tagged to live taxons %>
27
29
  <%= render 'govuk_publishing_components/components/breadcrumbs',
28
30
  breadcrumbs: navigation.taxon_breadcrumbs[:breadcrumbs],
29
- inverse: inverse %>
31
+ inverse: inverse,
32
+ collapse_on_mobile: collapse_on_mobile %>
30
33
  <% elsif navigation.breadcrumbs.any? %>
31
34
  <%# Rendering parent-based breadcrumbs because no browse, no related links, no live taxons %>
32
- <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse %>
35
+ <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
33
36
  <% else %>
34
37
  <%# Not rendering any breadcrumbs because there aren't any %>
35
38
  <% end %>
@@ -4,7 +4,7 @@ body: |
4
4
  Accepts an array of breadcrumb objects. Each crumb must have a title and a URL.
5
5
  Links have tracking data but links to the homepage (any link with a url of "/") will be tracked separately as `homeLinkClicked`
6
6
 
7
- 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.
7
+ 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.
8
8
  shared_accessibility_criteria:
9
9
  - link
10
10
  accessibility_criteria:
@@ -16,6 +16,7 @@ display_html: true
16
16
  examples:
17
17
  default:
18
18
  data:
19
+ collapse_on_mobile: true
19
20
  breadcrumbs:
20
21
  - title: 'Section'
21
22
  url: '/section'
@@ -24,6 +25,7 @@ examples:
24
25
  inverse:
25
26
  description: On a dark background, such as the header of topic pages
26
27
  data:
28
+ collapse_on_mobile: true
27
29
  breadcrumbs:
28
30
  - title: 'Section'
29
31
  url: '/section'
@@ -35,14 +37,17 @@ examples:
35
37
  dark_background: true
36
38
  no_breadcrumbs:
37
39
  data:
40
+ collapse_on_mobile: true
38
41
  breadcrumbs: []
39
42
  single_section:
40
43
  data:
44
+ collapse_on_mobile: true
41
45
  breadcrumbs:
42
46
  - title: 'Section'
43
47
  url: '/section'
44
48
  many_breadcrumbs:
45
49
  data:
50
+ collapse_on_mobile: true
46
51
  breadcrumbs:
47
52
  - title: 'Home'
48
53
  url: '/'
@@ -54,6 +59,7 @@ examples:
54
59
  url: '/section/sub-section/sub-sub-section'
55
60
  no_home:
56
61
  data:
62
+ collapse_on_mobile: true
57
63
  breadcrumbs:
58
64
  - title: 'Service Manual'
59
65
  url: '/service-manual'
@@ -61,6 +67,7 @@ examples:
61
67
  url: '/service-manual/agile-delivery'
62
68
  real:
63
69
  data:
70
+ collapse_on_mobile: true
64
71
  breadcrumbs:
65
72
  - title: 'Home'
66
73
  url: '/'
@@ -68,9 +75,10 @@ examples:
68
75
  url: '/browse/abroad'
69
76
  - title: 'Travel abroad'
70
77
  url: '/browse/abroad/travel-abroad'
71
- long_taxon_on_mobile:
72
- 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
78
+ long_taxon:
79
+ description: This is an example of a breadcrumb with long taxons to demonstrate the wrapping behaviour and touch target area on mobile
73
80
  data:
81
+ collapse_on_mobile: true
74
82
  breadcrumbs:
75
83
  - title: 'Home'
76
84
  url: '/'
@@ -78,3 +86,14 @@ examples:
78
86
  url: '/education'
79
87
  - title: 'Education of disadvantaged children appended with some extra long content to make this a very very very very long taxon'
80
88
  url: '/education'
89
+ stop_collapsing_on_mobile:
90
+ 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.
91
+ data:
92
+ collapse_on_mobile: false
93
+ breadcrumbs:
94
+ - title: 'Home'
95
+ url: '/'
96
+ - title: 'Passports, travel and living abroad'
97
+ url: '/browse/abroad'
98
+ - title: 'Travel abroad'
99
+ url: '/browse/abroad/travel-abroad'
@@ -217,14 +217,3 @@ examples:
217
217
  text: Guidance and regulation
218
218
  - href: "#third-thing"
219
219
  text: Consultations
220
- with_different_font_size:
221
- description: Choose a different font size. Valid options are 24 (24px) and 19 (19px), with the component defaulting to 16px.
222
- data:
223
- font_size: 24
224
- contents:
225
- - href: "#first-thing"
226
- text: Community best practice
227
- - href: "#second-thing"
228
- text: Guidance and regulation
229
- - href: "#third-thing"
230
- text: Consultations
@@ -11,11 +11,9 @@ module GovukPublishingComponents
11
11
  @contents = options[:contents] || []
12
12
  @nested = !!@contents.find { |c| c[:items] && c[:items].any? }
13
13
  @format_numbers = options[:format_numbers]
14
- @font_size = options[:font_size]
15
14
 
16
15
  @classes = %w(gem-c-contents-list)
17
16
  @classes << " gem-c-contents-list--no-underline" unless options[:underline_links]
18
- @classes << " gem-c-contents-list--font-size-#{@font_size}" if [24, 19].include? @font_size
19
17
  end
20
18
 
21
19
  def list_item_classes(list_item, nested)
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = '21.26.2'.freeze
2
+ VERSION = '21.27.0'.freeze
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_publishing_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 21.26.2
4
+ version: 21.27.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GOV.UK Dev
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-02-27 00:00:00.000000000 Z
11
+ date: 2020-02-28 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: gds-api-adapters