govuk_publishing_components 26.0.0 → 27.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics/auto-scroll-tracker.js +197 -0
  3. data/app/assets/javascripts/govuk_publishing_components/analytics.js +1 -0
  4. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +2 -0
  5. data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss +41 -0
  6. data/app/assets/stylesheets/govuk_publishing_components/components/_devolved-nations.scss +10 -0
  7. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +2 -0
  8. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss +1 -0
  9. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +128 -4
  10. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss +1 -0
  11. data/app/views/govuk_publishing_components/components/_big_number.html.erb +35 -0
  12. data/app/views/govuk_publishing_components/components/_devolved_nations.html.erb +23 -0
  13. data/app/views/govuk_publishing_components/components/_document_list.html.erb +1 -1
  14. data/app/views/govuk_publishing_components/components/_image_card.html.erb +4 -4
  15. data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +5 -3
  16. data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +15 -16
  17. data/app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb +5 -5
  18. data/app/views/govuk_publishing_components/components/docs/big_number.yml +56 -0
  19. data/app/views/govuk_publishing_components/components/docs/devolved_nations.yml +81 -0
  20. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +11 -0
  21. data/app/views/govuk_publishing_components/components/docs/image_card.yml +16 -16
  22. data/app/views/govuk_publishing_components/components/docs/inverse_header.yml +3 -4
  23. data/app/views/govuk_publishing_components/components/docs/layout_super_navigation_header.yml +5 -0
  24. data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb +5 -2
  25. data/config/locales/en.yml +10 -2
  26. data/lib/govuk_publishing_components/presenters/devolved_nations_helper.rb +27 -0
  27. data/lib/govuk_publishing_components/presenters/image_card_helper.rb +5 -5
  28. data/lib/govuk_publishing_components/version.rb +1 -1
  29. data/lib/govuk_publishing_components.rb +1 -0
  30. metadata +10 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5c3fd9e474526fc795f4e36972c920118b87ea55a36296a4b5ed63e5e6fdc116
4
- data.tar.gz: 84373dc03aa19d36852a9d7766924a42c2a1e97704f23f0829b1723d1bf46e33
3
+ metadata.gz: d52dba0489e69f7b978320fb25718ed4a674702f4c89f4885780dddd2eeed5bf
4
+ data.tar.gz: 66604e208eb054325e982779c62dcfa1d4a463b02801d6d90564d51de90fd5eb
5
5
  SHA512:
6
- metadata.gz: e997a780198073f264b340747df742bf7b9540e2f8106f9f29afb16028ea95533a22d4bf1403aa2b027785a9298585ac7700865ede41d7ab42dd1c00c6fcee70
7
- data.tar.gz: 1d38aaaff509242556aebea94b66fe42001345f93f15513ee42c27f1f71d105e8a2f49e7b2e110f1ca317f5ffbf769e4cc4bc3fb00113a9ca88a00eb1fb28cad
6
+ metadata.gz: 8331252ae2695e7c8f82659a80bcebe413e4d0f8bfad357ac99a512ed0b7124a97c1ba61d9cc508992d10bb6d8f1d52bf105d8040f7e8d9e8c3530a3f7e7f39b
7
+ data.tar.gz: 420546b30c1401ba308f1f6c063a8ad1f2bb11f10245a144a1878d534efacb670cc8b965c801879552f23e0b4d4195332a0a1e13d61cb7fdcbb4b85d72330323
@@ -0,0 +1,197 @@
1
+ window.GOVUK = window.GOVUK || {}
2
+ window.GOVUK.Modules = window.GOVUK.Modules || {};
3
+
4
+ (function (Modules) {
5
+ function AutoScrollTracker ($module) {
6
+ this.$module = $module
7
+ this.pageHeight = document.querySelector('body').clientHeight
8
+ this.trackedNodes = []
9
+ this.config = {
10
+ allowHeadingsInside: ['main'],
11
+ percentages: [20, 40, 60, 80, 100],
12
+ scrollTimeoutDelay: 20,
13
+ resizeTimeoutDelay: 100,
14
+ pageHeightTimeoutDelay: 500
15
+ }
16
+ }
17
+
18
+ AutoScrollTracker.prototype.init = function () {
19
+ var consentCookie = window.GOVUK.getConsentCookie()
20
+
21
+ if (consentCookie && consentCookie.settings) {
22
+ this.startModule()
23
+ } else {
24
+ this.startModule = this.startModule.bind(this)
25
+ window.addEventListener('cookie-consent', this.startModule)
26
+ }
27
+ }
28
+
29
+ AutoScrollTracker.prototype.startModule = function () {
30
+ if (window.GOVUK.analyticsVars.scrollTrackerStarted) {
31
+ return
32
+ }
33
+
34
+ window.GOVUK.analyticsVars.scrollTrackerStarted = true
35
+
36
+ this.trackType = this.$module.getAttribute('data-track-type')
37
+ if (this.trackType === 'headings') {
38
+ this.track = new AutoScrollTracker.Heading(this.config)
39
+ } else {
40
+ this.track = new AutoScrollTracker.Percentage(this.config)
41
+ }
42
+
43
+ this.getWindowDetails()
44
+ // if the URL has a hash we want to prevent tracking on initial page load
45
+ // until the browser jumps down the page, at which point a scroll event
46
+ // will happen and tracking will continue normally
47
+ var windowHash = window.location.hash
48
+ var dontTrackOnLoad = windowHash && document.getElementById(windowHash.substring(1))
49
+ if (!dontTrackOnLoad) {
50
+ this.trackVisibleNodes()
51
+ }
52
+
53
+ if (this.trackedNodes.length) {
54
+ // store event listener functions as variables so they can be removed if needed
55
+ this.scrollEvent = this.onScroll.bind(this)
56
+ window.addEventListener('scroll', this.scrollEvent)
57
+ this.resizeEvent = this.onResize.bind(this)
58
+ window.addEventListener('resize', this.resizeEvent)
59
+
60
+ // check if the page height changes e.g. accordion opened
61
+ this.interval = window.setInterval(function () {
62
+ var pageHeight = document.querySelector('body').clientHeight
63
+ if (pageHeight !== this.pageHeight) {
64
+ this.pageHeight = pageHeight
65
+ this.getWindowDetails()
66
+ this.trackVisibleNodes()
67
+ }
68
+ }.bind(this), this.config.pageHeightTimeoutDelay)
69
+ }
70
+ }
71
+
72
+ AutoScrollTracker.prototype.onScroll = function () {
73
+ clearTimeout(this.scrollTimeout)
74
+ this.scrollTimeout = setTimeout(function () {
75
+ this.trackVisibleNodes()
76
+ }.bind(this), this.config.scrollTimeoutDelay)
77
+ }
78
+
79
+ AutoScrollTracker.prototype.onResize = function () {
80
+ clearTimeout(this.resizeTimeout)
81
+ this.resizeTimeout = setTimeout(function () {
82
+ this.getWindowDetails()
83
+ this.trackVisibleNodes()
84
+ }.bind(this), this.config.resizeTimeoutDelay)
85
+ }
86
+
87
+ AutoScrollTracker.prototype.getWindowDetails = function () {
88
+ this.pageHeight = document.querySelector('body').clientHeight
89
+ this.windowHeight = window.innerHeight
90
+ this.trackedNodes = this.track.getTrackingNodes(this.trackedNodes)
91
+ }
92
+
93
+ AutoScrollTracker.prototype.trackVisibleNodes = function () {
94
+ for (var i = 0; i < this.trackedNodes.length; i++) {
95
+ var node = this.trackedNodes[i]
96
+ if (this.isVisible(node.top, node.bottom) && !node.alreadySeen) {
97
+ node.alreadySeen = true
98
+ // we store whether a heading has been tracked or not on the heading
99
+ // because if headings appear/disapper (e.g. inside an accordion)
100
+ // the order changes, so we can't refer to the previous trackedNodes
101
+ // as we do with percentages
102
+ if (node.node) {
103
+ node.node.setAttribute('data-autoscrolltracker-already-seen', true)
104
+ }
105
+
106
+ var action = node.eventData.action
107
+ var label = node.eventData.label
108
+
109
+ if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
110
+ window.GOVUK.analytics.trackEvent('ScrollTo', action, { label: label, nonInteraction: true })
111
+ }
112
+ }
113
+ }
114
+ }
115
+
116
+ AutoScrollTracker.prototype.isVisible = function (top, bottom) {
117
+ var scroll = window.scrollY || document.documentElement.scrollTop // IE fallback
118
+ return scroll <= top && (scroll + this.windowHeight) >= bottom
119
+ }
120
+
121
+ AutoScrollTracker.Heading = function (config) {
122
+ this.config = config
123
+ }
124
+
125
+ AutoScrollTracker.Heading.prototype.getTrackingNodes = function () {
126
+ var headingsDetails = []
127
+ var headingsFound = this.findAllowedHeadings()
128
+
129
+ for (var i = 0; i < headingsFound.length; i++) {
130
+ var heading = headingsFound[i]
131
+ // only track headings that are visible i.e. not inside display: none
132
+ if (this.visible(heading)) {
133
+ var pos = heading.getBoundingClientRect()
134
+ headingsDetails.push({
135
+ node: heading,
136
+ alreadySeen: heading.getAttribute('data-autoscrolltracker-already-seen'),
137
+ top: pos.top + document.documentElement.scrollTop,
138
+ bottom: pos.bottom + document.documentElement.scrollTop,
139
+ eventData: { action: 'Heading', label: heading.textContent.replace(/\s+/g, ' ').trim() }
140
+ })
141
+ }
142
+ }
143
+ return headingsDetails
144
+ }
145
+
146
+ // check heading is inside allowed elements, generally ignores everything outside of page content
147
+ AutoScrollTracker.Heading.prototype.findAllowedHeadings = function () {
148
+ var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
149
+ var headingsFound = []
150
+
151
+ for (var h = 0; h < this.config.allowHeadingsInside.length; h++) {
152
+ var insideElements = document.querySelectorAll(this.config.allowHeadingsInside[h])
153
+ for (var e = 0; e < insideElements.length; e++) {
154
+ var found = insideElements[e].querySelectorAll(headings)
155
+ for (var f = 0; f < found.length; f++) {
156
+ headingsFound.push(found[f])
157
+ }
158
+ }
159
+ }
160
+ return headingsFound
161
+ }
162
+
163
+ // this is bit more verbose than checking offsetParent !== null but more reliable for IE10+
164
+ AutoScrollTracker.Heading.prototype.visible = function (el) {
165
+ return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)
166
+ }
167
+
168
+ AutoScrollTracker.Percentage = function (config) {
169
+ this.config = config
170
+ }
171
+
172
+ AutoScrollTracker.Percentage.prototype.getTrackingNodes = function (trackedNodes) {
173
+ var body = document.body
174
+ var html = document.documentElement
175
+ var pageHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
176
+
177
+ var percentDetails = []
178
+
179
+ for (var i = 0; i < this.config.percentages.length; i++) {
180
+ var percent = this.config.percentages[i]
181
+ var pos = (pageHeight / 100) * percent
182
+ var alreadySeen = false
183
+ if (trackedNodes.length) {
184
+ alreadySeen = trackedNodes[i].alreadySeen
185
+ }
186
+ percentDetails.push({
187
+ alreadySeen: alreadySeen,
188
+ top: pos,
189
+ bottom: pos,
190
+ eventData: { action: 'Percent', label: String(percent) }
191
+ })
192
+ }
193
+ return percentDetails
194
+ }
195
+
196
+ Modules.AutoScrollTracker = AutoScrollTracker
197
+ })(window.GOVUK.Modules)
@@ -14,6 +14,7 @@
14
14
  //= require ./analytics/ecommerce
15
15
  //= require ./analytics/init
16
16
  //= require ./analytics/scroll-tracker
17
+ //= require ./analytics/auto-scroll-tracker
17
18
  //= require ./analytics/explicit-cross-domain-links
18
19
  //= require ./analytics/track-click
19
20
  //= require ./analytics/track-select-change
@@ -16,6 +16,7 @@ $govuk-new-link-styles: true;
16
16
  @import "components/attachment";
17
17
  @import "components/attachment-link";
18
18
  @import "components/back-link";
19
+ @import "components/big-number";
19
20
  @import "components/breadcrumbs";
20
21
  @import "components/button";
21
22
  @import "components/character-count";
@@ -27,6 +28,7 @@ $govuk-new-link-styles: true;
27
28
  @import "components/copy-to-clipboard";
28
29
  @import "components/date-input";
29
30
  @import "components/details";
31
+ @import "components/devolved-nations";
30
32
  @import "components/document-list";
31
33
  @import "components/error-alert";
32
34
  @import "components/error-message";
@@ -0,0 +1,41 @@
1
+ .gem-c-big-number {
2
+ margin-bottom: govuk-spacing(3);
3
+ }
4
+
5
+ .gem-c-big-number__value {
6
+ @include govuk-font($size: 80, $weight: bold);
7
+ }
8
+
9
+ .gem-c-big-number__label {
10
+ @include govuk-font($size: 16, $weight: bold, $line-height: 2);
11
+
12
+ // This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
13
+ // What's happening here is that the label and the number technically have an inline relationship but appear to have a block relationship thanks to this element
14
+ &:before {
15
+ content: "";
16
+ display: block;
17
+ }
18
+ }
19
+
20
+ .gem-c-big-number__link {
21
+ display: inline-block;
22
+ text-decoration: none;
23
+
24
+ // Add govuk-link hover decoration to main value if no label present but a href attribute is
25
+ .gem-c-big-number__value--decorated {
26
+ @include govuk-link-decoration;
27
+ @include govuk-link-style-no-underline;
28
+ }
29
+
30
+ .gem-c-big-number__label {
31
+ @include govuk-link-decoration;
32
+ }
33
+
34
+ &:hover,
35
+ &:active {
36
+ .gem-c-big-number__label,
37
+ .gem-c-big-number__value--decorated {
38
+ @include govuk-link-hover-decoration;
39
+ }
40
+ }
41
+ }
@@ -0,0 +1,10 @@
1
+ .gem-c-devolved-nations {
2
+ background: govuk-colour("light-grey");
3
+ margin-bottom: govuk-spacing(3);
4
+ padding: govuk-spacing(3);
5
+
6
+ @include govuk-media-query($from: desktop) {
7
+ margin-bottom: govuk-spacing(8);
8
+ padding: govuk-spacing(4) govuk-spacing(6);
9
+ }
10
+ }
@@ -107,6 +107,8 @@
107
107
 
108
108
  .gem-c-document-list__children {
109
109
  margin-bottom: 0;
110
+ padding-left: 0;
111
+ list-style-type: none;
110
112
 
111
113
  @include govuk-media-query($from: desktop) {
112
114
  margin-left: govuk-spacing(4);
@@ -9,6 +9,7 @@
9
9
 
10
10
  .js-enabled .gem-c-layout-for-public__global-banner-wrapper {
11
11
  margin-top: - govuk-spacing(2);
12
+ min-height: govuk-spacing(2);
12
13
  position: relative;
13
14
  }
14
15
 
@@ -1,3 +1,97 @@
1
+ /// Set grid row or column value using the fraction unit.
2
+ ///
3
+ /// @param {Integer} $number - number of fractions that the grid row or column
4
+ /// needs to be divided into.
5
+ /// @returns {String} - the value
6
+ ///
7
+ /// @example scss - Five fractions will return `1fr 1fr 1fr 1fr 1fr`.
8
+ /// .container {
9
+ /// grid-template-rows: fractions(5);
10
+ /// }
11
+ ///
12
+ @function fractions($number) {
13
+ $fractions: "1fr";
14
+
15
+ @for $i from 1 to $number {
16
+ $fractions: $fractions + " 1fr";
17
+ }
18
+
19
+ @return unquote($fractions);
20
+ }
21
+
22
+ /// Arrange items into vertical columns
23
+ ///
24
+ /// @param {Integer} $items - number of items that need to be arranged
25
+ /// @param {Integer} $columns - number of columns required
26
+ /// @param {String} $selector - (optional) the inner element to be targeted.
27
+ ///
28
+ /// @example scss - A 7 item 2 column layout.
29
+ /// .container {
30
+ /// @include columns(7, 2);
31
+ /// }
32
+
33
+ /// @example scss - A 9 item 3 column layout that has `div`s as the inner
34
+ /// elements.
35
+ /// .container {
36
+ /// @include columns(9, 3, "div");
37
+ /// }
38
+ ///
39
+ @mixin columns($items, $columns, $selector: "*") {
40
+ $rows: ceil($items / $columns);
41
+
42
+ display: -ms-grid;
43
+ display: grid;
44
+ grid-auto-flow: column;
45
+ -ms-grid-columns: fractions($columns);
46
+ grid-template-columns: fractions($columns);
47
+ -ms-grid-rows: fractions($rows);
48
+ grid-template-rows: fractions($rows);
49
+
50
+ // Internet Explorer 10-11 require each element to be placed in the grid -
51
+ // the `grid-auto-flow` property isn't supported. This means that both the
52
+ // column and row needs to be set for every element.
53
+
54
+ // This creates a list of lists to represent the columns and rows; for
55
+ // example, a 7 item 2 column list would create this:
56
+ // [
57
+ // [1, 2, 3, 4 ] // column one
58
+ // [5, 6, 7] // column two
59
+ // ]
60
+ $grid: ();
61
+ $counter: 0;
62
+
63
+ @for $column from 1 through $columns {
64
+ $this-row: ();
65
+
66
+ @for $row from 1 through $rows {
67
+ $counter: $counter + 1;
68
+
69
+ @if $counter <= $items {
70
+ $this-row: append($this-row, $counter);
71
+ }
72
+ }
73
+
74
+ $grid: append($grid, $this-row, "comma");
75
+ }
76
+
77
+ // Now we can loop through the list of lists to create the rules needed for
78
+ // the older grid syntax; fist looping through the list to get the number
79
+ // needed for the column, then looping again to get the number for the grid
80
+ // row:
81
+ @for $column_index from 1 through length($grid) {
82
+ $this-row: nth($grid, $column_index);
83
+
84
+ @for $item-index from 1 through length($this-row) {
85
+ $this-item: nth($this-row, $item-index);
86
+
87
+ & > #{$selector}:nth-child(#{$this-item}) {
88
+ -ms-grid-column: $column_index;
89
+ -ms-grid-row: $item-index;
90
+ }
91
+ }
92
+ }
93
+ }
94
+
1
95
  $search-icon-size: 20px;
2
96
 
3
97
  @mixin chevron($colour) {
@@ -431,6 +525,26 @@ $search-icon-size: 20px;
431
525
  content: " ";
432
526
  }
433
527
  }
528
+
529
+ // To avoid the 'sticky hover' problem, we need to stop the hover state on
530
+ // touch screen devices.
531
+ //
532
+ // One solution is to use `@media(hover: hover)`. This turns on the hover
533
+ // state only for devices that aren't touchscreen, but means that browsers
534
+ // that don't support this media query won't get a hover state at all.
535
+ //
536
+ // To get around this, we do the opposite - we turn off the hover state for
537
+ // for touchscreen devices.
538
+ @media (hover: none), (pointer: coarse) {
539
+ &:not(:focus):hover {
540
+ background-color: $govuk-link-colour;
541
+ color: govuk-colour("white");
542
+
543
+ &:after {
544
+ background-color: $govuk-link-colour;
545
+ }
546
+ }
547
+ }
434
548
  }
435
549
  }
436
550
 
@@ -579,8 +693,6 @@ $search-icon-size: 20px;
579
693
  padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
580
694
 
581
695
  @include govuk-media-query($from: "desktop") {
582
- display: flex;
583
- flex-wrap: wrap;
584
696
  margin-left: (0 - govuk-spacing(3));
585
697
  margin-right: (0 - govuk-spacing(3));
586
698
  padding: govuk-spacing(6) 0 govuk-spacing(8) 0;
@@ -590,11 +702,23 @@ $search-icon-size: 20px;
590
702
  margin-bottom: 0;
591
703
  padding-left: govuk-spacing(3);
592
704
  padding-right: govuk-spacing(3);
593
- width: 50%;
594
705
  }
595
706
  }
596
707
  }
597
708
 
709
+ .gem-c-layout-super-navigation-header__navigation-second-items--topics {
710
+ @include govuk-media-query($from: "desktop") {
711
+ @include columns(18, 2, "li");
712
+ }
713
+ }
714
+
715
+ .gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
716
+ @include govuk-media-query($from: "desktop") {
717
+ @include columns(5, 2, "li");
718
+ padding-bottom: govuk-spacing(3);
719
+ }
720
+ }
721
+
598
722
  .gem-c-layout-super-navigation-header__navigation-second-item-link {
599
723
  display: inline-block;
600
724
  padding: govuk-spacing(2) 0;
@@ -608,8 +732,8 @@ $search-icon-size: 20px;
608
732
 
609
733
  .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
610
734
  @include govuk-font($size: 19, $weight: bold);
735
+ margin-top: govuk-spacing(2);
611
736
  margin-bottom: 0;
612
- padding-bottom: govuk-spacing(1);
613
737
  }
614
738
 
615
739
  // Dropdown menu footer links.
@@ -17,6 +17,7 @@
17
17
  clear: both;
18
18
  overflow: hidden;
19
19
  padding: govuk-spacing(2) 0 0;
20
+ margin: 0;
20
21
 
21
22
  img {
22
23
  display: inline;
@@ -0,0 +1,35 @@
1
+ <%
2
+ href ||= nil
3
+ number ||= nil
4
+ label ||= nil
5
+ href ||= nil
6
+ data_attributes ||= nil
7
+ classes = ["gem-c-big-number__value"]
8
+
9
+ if label.nil? && href
10
+ classes << "gem-c-big-number__value--decorated"
11
+ end
12
+ %>
13
+ <% if number %>
14
+ <% big_number_value = capture do %>
15
+ <%= tag.span class: classes, data: href ? nil : data_attributes do %>
16
+ <%= number %>
17
+ <% end %>
18
+
19
+ <% unless label.nil? %>
20
+ <% # add a virtual space here to handle screen readers printing dictations without a space between the number and the label %>
21
+ <span class="govuk-visually-hidden">&nbsp;</span>
22
+ <span class="gem-c-big-number__label">
23
+ <%= label %>
24
+ </span>
25
+ <% end %>
26
+ <% end %>
27
+
28
+ <%= tag.div class: "gem-c-big-number" do %>
29
+ <% unless href.nil? %>
30
+ <%= link_to big_number_value, href, class: "govuk-link gem-c-big-number__link", data: data_attributes %>
31
+ <% else %>
32
+ <%= big_number_value %>
33
+ <% end %>
34
+ <% end %>
35
+ <% end %>
@@ -0,0 +1,23 @@
1
+ <%
2
+ shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
3
+ devolved_nations_helper = GovukPublishingComponents::Presenters::DevolvedNationsHelper.new(local_assigns)
4
+
5
+ applies_to ||= t('components.devolved_nations.applies_to')
6
+ heading_level ||= 2
7
+ %>
8
+
9
+ <% if national_applicability.any? { |k,v| v[:applicable] == true } %>
10
+ <%= tag.section class: "gem-c-devolved-nations" do %>
11
+ <%= content_tag(shared_helper.get_heading_level, class: "govuk-heading-s govuk-!-margin-bottom-0") do %>
12
+ <%= applies_to %> <%= devolved_nations_helper.applicable_nations_title_text %>
13
+ <% end %>
14
+
15
+ <% if devolved_nations_helper.nations_with_urls.any? %>
16
+ <%= content_tag :ul, class: "govuk-list govuk-!-margin-top-1 govuk-!-margin-bottom-0" do -%>
17
+ <% devolved_nations_helper.nations_with_urls.each do |k, v| %>
18
+ <%= content_tag(:li, link_to("Guidance for #{t("components.devolved_nations.#{k}")}", v[:alternative_url], class: "govuk-link")) %>
19
+ <% end %>
20
+ <% end %>
21
+ <% end %>
22
+ <% end %>
23
+ <% end %>
@@ -92,7 +92,7 @@
92
92
  <% end %>
93
93
 
94
94
  <% if item[:parts] && item[:parts].any? %>
95
- <ul class="gem-c-document-list__children govuk-list">
95
+ <ul class="gem-c-document-list__children">
96
96
  <% item[:parts].each do |part| %>
97
97
  <li class="gem-c-document-list-child">
98
98
  <%=
@@ -23,7 +23,7 @@
23
23
  extra_link_classes << brand_helper.color_class
24
24
 
25
25
  %>
26
- <% if card_helper.href || card_helper.extra_links.any? %>
26
+ <% if card_helper.href || card_helper.extra_details.any? %>
27
27
  <div class="<%= classes %> <%= brand_helper.brand_class %>"
28
28
  <%= "data-module=gem-track-click" if card_helper.is_tracking? %>
29
29
  <%= "lang=#{card_helper.lang}" if card_helper.lang %>>
@@ -44,9 +44,9 @@
44
44
  <%= card_helper.context %>
45
45
  </div>
46
46
  <%= card_helper.description %>
47
- <% if card_helper.extra_links.any? %>
48
- <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_links_no_indent %>">
49
- <% card_helper.extra_links.each do |link| %>
47
+ <% if card_helper.extra_details.any? %>
48
+ <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_details_no_indent %>">
49
+ <% card_helper.extra_details.each do |link| %>
50
50
  <li class="gem-c-image-card__list-item <%= "gem-c-image-card__list-item--text" if not link[:href].present? %>">
51
51
  <% if link[:href].present? %>
52
52
  <%= link_to link[:text], link[:href],
@@ -44,8 +44,8 @@
44
44
  body_css_classes << "draft" if draft_watermark
45
45
  -%>
46
46
  <!DOCTYPE html>
47
- <!--[if lt IE 9]><html class="lte-ie8" lang="<%= html_lang %>"><![endif]-->
48
- <!--[if gt IE 8]><!--><html lang="<%= html_lang %>"><!--<![endif]-->
47
+ <!--[if lt IE 9]><html class="lte-ie8 govuk-template" lang="<%= html_lang %>"><![endif]-->
48
+ <!--[if gt IE 8]><!--><html class="govuk-template" lang="<%= html_lang %>"><!--<![endif]-->
49
49
  <head>
50
50
  <meta charset="utf-8" />
51
51
  <title><%= title %></title>
@@ -87,7 +87,9 @@
87
87
 
88
88
  <% unless omit_header %>
89
89
  <% if show_explore_header %>
90
- <%= render "govuk_publishing_components/components/layout_super_navigation_header" %>
90
+ <%= render "govuk_publishing_components/components/layout_super_navigation_header", {
91
+ logo_link: logo_link,
92
+ } %>
91
93
  <% else %>
92
94
  <%= render "govuk_publishing_components/components/layout_header", {
93
95
  search: show_search,
@@ -1,20 +1,19 @@
1
1
  <%
2
- logo_link = "https://www.gov.uk/"
3
- logo_link_title = t("components.layout_super_navigation_header.logo_link_title")
4
- logo_text = t("components.layout_super_navigation_header.logo_text")
5
- navigation_links = t("components.layout_super_navigation_header.navigation_links")
6
- navigation_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
7
- navigation_search_heading = t("components.layout_super_navigation_header.navigation_search_heading")
8
- navigation_search_subheading = t("components.layout_super_navigation_header.navigation_search_subheading")
9
- popular_links = t("components.layout_super_navigation_header.popular_links")
10
- popular_links_heading = t("components.layout_super_navigation_header.popular_links_heading")
11
- search_text = t("components.layout_super_navigation_header.search_text")
12
-
13
- hide_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "search")
14
- show_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "search")
15
- hide_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "navigation")
16
- show_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "navigation")
2
+ logo_link ||= "https://www.gov.uk/"
3
+ logo_link_title ||= t("components.layout_super_navigation_header.logo_link_title")
4
+ logo_text = t("components.layout_super_navigation_header.logo_text")
5
+ navigation_links = t("components.layout_super_navigation_header.navigation_links")
6
+ navigation_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
7
+ navigation_search_heading = t("components.layout_super_navigation_header.navigation_search_heading")
8
+ navigation_search_subheading = t("components.layout_super_navigation_header.navigation_search_subheading")
9
+ popular_links = t("components.layout_super_navigation_header.popular_links")
10
+ popular_links_heading = t("components.layout_super_navigation_header.popular_links_heading")
11
+ search_text = t("components.layout_super_navigation_header.search_text")
17
12
 
13
+ hide_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "search")
14
+ show_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "search")
15
+ hide_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "navigation")
16
+ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "navigation")
18
17
  %>
19
18
  <header role="banner" class="gem-c-layout-super-navigation-header">
20
19
  <div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
@@ -134,7 +133,7 @@ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_to
134
133
  </div>
135
134
  <% if link[:menu_contents].present? %>
136
135
  <div class="govuk-grid-column-two-thirds-from-desktop">
137
- <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items">
136
+ <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
138
137
  <% link[:menu_contents].each do | item | %>
139
138
  <%
140
139
  has_description = item[:description].present?
@@ -19,17 +19,17 @@
19
19
  tracking_options ||= ({ dimension96: tracking_id }).to_json
20
20
  end
21
21
 
22
- local_assigns[:margin_bottom] ||= 0
23
22
  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
24
- classes = "gem-c-step-nav-header #{shared_helper.get_margin_bottom}"
23
+ classes = %w(gem-c-step-nav-header)
24
+ classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
25
25
  %>
26
26
  <% if title %>
27
27
  <script type="application/ld+json">
28
28
  <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
29
29
  </script>
30
30
 
31
- <h2 class="<%= classes %>" data-module="gem-track-click">
32
- <span class="gem-c-step-nav-header__part-of">Part of</span>
31
+ <%= tag.div class: classes, data: { module: "gem-track-click" } do %>
32
+ <strong class="gem-c-step-nav-header__part-of">Part of</strong>
33
33
  <% if path %>
34
34
  <a href="<%= path %>"
35
35
  class="gem-c-step-nav-header__title govuk-link"
@@ -51,5 +51,5 @@
51
51
  <%= title %>
52
52
  </span>
53
53
  <% end %>
54
- </h2>
54
+ <% end %>
55
55
  <% end %>
@@ -0,0 +1,56 @@
1
+ name: Big number
2
+ description: A big number, with a label if needed, for visualising quantitative values such as the number of government departments or historical prime ministers.
3
+ body: |
4
+ This component requires at least a non-falsey `number` attribute value passed to it, otherwise it will not render.
5
+ accessibility_criteria: |
6
+ This component must:
7
+
8
+ - communicate number value and label (if present) in a single dictation when read with a screen reader
9
+ - convey the meaning of the number shown
10
+ shared_accessibility_criteria:
11
+ - link
12
+ examples:
13
+ default:
14
+ data:
15
+ number: 119
16
+ with_labels:
17
+ description: Labels for numbers are given inline styling but stacked using pseudo elements with display block. This is to bypass an issue with NVDA where block level elements are dictated separately.
18
+ data:
19
+ number: 119
20
+ label: Open consultations
21
+ passing_extra_symbols:
22
+ description: "In some cases, we want to communicate more than just the flat numeric value eg: 400+, 90%, -20, 1M etc. This is why we allow values to be passed as flat strings."
23
+ data:
24
+ number: "400+"
25
+ label: Other agencies and public bodies
26
+ with_link:
27
+ data:
28
+ number: 23
29
+ label: Ministerial departments
30
+ href: "/government/organisations#ministerial_departments"
31
+ with_link_but_no_label:
32
+ description: Numbers that are links are underlined unless a label is provided, in which case the label is given the underline.
33
+ data:
34
+ number: 23
35
+ href: "/government/organisations#ministerial_departments"
36
+ with_data_attributes:
37
+ description: |
38
+ If a `href` attribute is present, data attributes will apply to the `span` containing the number value (see below).
39
+
40
+ This will also not automatically apply a `gem-track-click` module attribute if the data attributes pertain to click tracking. Remember to apply this outside the component call in a surrounding element, if using.
41
+ data:
42
+ number: 23
43
+ label: Ministerial departments
44
+ href: "/government/organisations#ministerial_departments"
45
+ data_attributes:
46
+ track-category: homepageClicked
47
+ track-action: departmentsLink
48
+ track-label: "/government/organisations#ministerial_departments"
49
+ track-dimension: 23 Ministerial departments
50
+ track-dimension-index: 29
51
+ with_data_attributes_but_no_link:
52
+ data:
53
+ number: 23
54
+ label: Ministerial departments
55
+ data_attributes:
56
+ department-count: true
@@ -0,0 +1,81 @@
1
+ name: Devolved Nations (experimental)
2
+ description: A banner for linking to guidance for other nations.
3
+ body: |
4
+ The component replaces uses of the important metadata component for guidance for other nations.
5
+
6
+ The component can display:
7
+
8
+ * nations that the guidance relates to
9
+ * a list of alternative URLs where applicable
10
+ shared_accessibility_criteria:
11
+ - link
12
+ accessibility_criteria: |
13
+ The component must:
14
+
15
+ - Provide context for link text to highlight guidance is available.
16
+ examples:
17
+ default:
18
+ data:
19
+ national_applicability:
20
+ england:
21
+ applicable: true
22
+ applies_to_two_nations:
23
+ data:
24
+ national_applicability:
25
+ england:
26
+ applicable: true
27
+ wales:
28
+ applicable: true
29
+ applies_to_three_nations:
30
+ data:
31
+ national_applicability:
32
+ england:
33
+ applicable: true
34
+ scotland:
35
+ applicable: true
36
+ wales:
37
+ applicable: true
38
+ applies_to_one_nation_individual_guidance_available:
39
+ data:
40
+ national_applicability:
41
+ england:
42
+ applicable: true
43
+ scotland:
44
+ applicable: false
45
+ alternative_url: /
46
+ wales:
47
+ applicable: false
48
+ alternative_url: /
49
+ applies_to_one_nation_individual_guidance_available:
50
+ data:
51
+ national_applicability:
52
+ england:
53
+ applicable: true
54
+ northern_ireland:
55
+ applicable: false
56
+ alternative_url: /
57
+ scotland:
58
+ applicable: false
59
+ alternative_url: /
60
+ wales:
61
+ applicable: false
62
+ alternative_url: /
63
+ applies_to_three_nations_individual_guidance_available:
64
+ data:
65
+ national_applicability:
66
+ england:
67
+ applicable: true
68
+ northern_ireland:
69
+ applicable: false
70
+ alternative_url: /
71
+ scotland:
72
+ applicable: true
73
+ wales:
74
+ applicable: true
75
+ specific_heading level:
76
+ description: Use a different heading level for the main link title. Defaults to H2 if not passed.
77
+ data:
78
+ heading_level: 3
79
+ national_applicability:
80
+ england:
81
+ applicable: true
@@ -824,3 +824,14 @@ examples:
824
824
  <a role="button" class="gem-c-button govuk-button" href="https://gov.uk/random">Button</a>
825
825
  <a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> Start button <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a>
826
826
  </p>
827
+ image:
828
+ data:
829
+ block: |
830
+ <figure class="image embedded">
831
+ <div class="img">
832
+ <img src="https://assets.publishing.service.gov.uk/government/uploads/system/uploads/image_data/file/40160/Picture2.jpg" alt="Open water with only mangrove stumps showing above the water. Credit: Blue Ventures-Garth Cripps">
833
+ </div>
834
+ <figcaption>
835
+ <p>Deforested area. Credit: Blue Ventures-Garth Cripps</p>
836
+ </figcaption>
837
+ </figure>
@@ -66,14 +66,14 @@ examples:
66
66
  text: "Press release"
67
67
  heading_text: "Government does things"
68
68
  description: "Following a thorough review of existing procedure, a government body has today announced that further work is necessary."
69
- with_extra_links:
69
+ with_extra_details:
70
70
  data:
71
71
  href: "/a-page-no-just-kidding"
72
72
  image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
73
73
  image_alt: "some meaningful alt text please"
74
74
  heading_text: "Some more links"
75
75
  description: "Greater transparency across government is at the heart of our commitment to let you hold politicians and public bodies to account."
76
- extra_links: [
76
+ extra_details: [
77
77
  {
78
78
  text: "Single departmental plans",
79
79
  href: "/1"
@@ -87,7 +87,7 @@ examples:
87
87
  href: "/3"
88
88
  },
89
89
  ]
90
- extra_links_without_indent:
90
+ extra_details_without_indent:
91
91
  description: Don't indent the extra links. Used for links to people pages.
92
92
  data:
93
93
  href: "/government/people/"
@@ -96,21 +96,21 @@ examples:
96
96
  context:
97
97
  text: "The Rt Hon"
98
98
  heading_text: "John Whiskers MP"
99
- extra_links: [
99
+ extra_details: [
100
100
  {
101
101
  text: "Minister for Cats",
102
102
  href: "/government/ministers/"
103
103
  }
104
104
  ]
105
- extra_links_no_indent: true
106
- extra_links_with_no_links:
107
- description: If `extra_links` are passed to the component without `href` attributes, they are displayed as a simple text list.
105
+ extra_details_no_indent: true
106
+ extra_details_with_no_links:
107
+ description: If `extra_details` are passed to the component without `href` attributes, they are displayed as a simple text list.
108
108
  data:
109
109
  href: "/government/people/"
110
110
  image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
111
111
  image_alt: "some meaningful alt text please"
112
112
  heading_text: "John Whiskers MP"
113
- extra_links: [
113
+ extra_details: [
114
114
  {
115
115
  text: "Conservative 2010 to 2016",
116
116
  },
@@ -118,14 +118,14 @@ examples:
118
118
  text: "Labour 2007 to 2010",
119
119
  }
120
120
  ]
121
- extra_links_no_indent: true
122
- extra_links_with_no_main_link:
121
+ extra_details_no_indent: true
122
+ extra_details_with_no_main_link:
123
123
  description: If extra links are included, the main link is not needed. Note that in this configuration the image is not a link as no link has been supplied.
124
124
  data:
125
125
  image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
126
126
  image_alt: "some meaningful alt text please"
127
127
  heading_text: "John Whiskers MP"
128
- extra_links: [
128
+ extra_details: [
129
129
  {
130
130
  text: "Minister for Cats",
131
131
  href: "/government/ministers/"
@@ -145,7 +145,7 @@ examples:
145
145
  image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
146
146
  image_alt: "some meaningful alt text please"
147
147
  description: Here are some links to more information about the thing you are reading about.
148
- extra_links: [
148
+ extra_details: [
149
149
  {
150
150
  text: "More information",
151
151
  href: "/1"
@@ -174,7 +174,7 @@ examples:
174
174
  image_alt: "some meaningful alt text please"
175
175
  heading_text: "Something relating to this"
176
176
  description: "Public reform committee consultation vote department interior minister referendum."
177
- extra_links: [
177
+ extra_details: [
178
178
  {
179
179
  text: "Something",
180
180
  href: "/1"
@@ -210,7 +210,7 @@ examples:
210
210
  image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
211
211
  image_alt: "some meaningful alt text please"
212
212
  heading_text: "A link with tracking"
213
- extra_links: [
213
+ extra_details: [
214
214
  {
215
215
  text: "Another link with tracking",
216
216
  href: "/1",
@@ -235,13 +235,13 @@ examples:
235
235
  text: "The Rt Hon"
236
236
  heading_text: "John Whiskers MP"
237
237
  metadata: "Unpaid"
238
- extra_links: [
238
+ extra_details: [
239
239
  {
240
240
  text: "Minister for Cats",
241
241
  href: "/government/ministers/"
242
242
  }
243
243
  ]
244
- extra_links_no_indent: true
244
+ extra_details_no_indent: true
245
245
  with_lang:
246
246
  description: |
247
247
  Pass through an appropriate `lang` to set a HTML lang attribute for the component.
@@ -1,15 +1,14 @@
1
1
  name: Inverse header
2
2
  description: A wrapper to contain header content in white text
3
3
  body: |
4
- This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn't attempt to deal with the margins and paddings of its content. White text is enforced on content and would need to be overriden where unwanted. Implemented to accomodate topic and list page headings and breadcrumbs but unopinionated about its contents.
4
+ This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn't attempt to deal with the margins and paddings of its content. White text is enforced on content and would need to be overridden where unwanted. Implemented to accommodate topic and list page headings and breadcrumbs but unopinionated about its contents.
5
5
 
6
6
  If passing links to the block make sure to add [the inverse modifier](https://design-system.service.gov.uk/styles/typography/#links-on-dark-backgrounds).
7
7
 
8
8
  accessibility_criteria: |
9
9
  The component must:
10
10
 
11
- * be used in conjunction with content that renders a text contrast ratio higher than 4.5:1
12
- against the header colour to meet WCAG AA.
11
+ * be used in conjunction with content that renders a text contrast ratio higher than 4.5:1 against the header colour to meet WCAG AA.
13
12
 
14
13
  accessibility_excluded_rules:
15
14
  - skip-link # Examples of this component contain breadcrumbs, creating a reference to #content which is part of the layout
@@ -33,7 +32,7 @@ examples:
33
32
  </h1>
34
33
  </div>
35
34
  html_publication_header:
36
- description: "The inverse header component is used on HTMl publications. [See example on GOV.UK here](https://www.gov.uk/government/publications/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application-advertisement/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application)"
35
+ description: "The inverse header component is used on HTML publications. [See example on GOV.UK here](https://www.gov.uk/government/publications/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application-advertisement/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application)"
37
36
  data:
38
37
  block: |
39
38
  <div class="gem-c-title gem-c-title--inverse gem-c-title--bottom-margin">
@@ -20,3 +20,8 @@ accessibility_excluded_rules:
20
20
  - landmark-no-duplicate-banner # banners will be duplicated in component examples list
21
21
  examples:
22
22
  default:
23
+ with_custom_logo_link:
24
+ description: The header logo links to root by default. This option allows us to override that in certain instances. Remember to change the title, as the default is "Go to the GOV.UK homepage".
25
+ data:
26
+ logo_link: "https://www.example.com"
27
+ logo_link_title: "Go to example"
@@ -1,11 +1,14 @@
1
1
  <div class="govuk-header__logo gem-c-header__logo">
2
2
  <a href="<%= logo_link %>" class="govuk-header__link govuk-header__link--homepage" data-module="gem-track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
3
3
  <span class="govuk-header__logotype gem-c-header__logotype">
4
+ <!--[if gt IE 8]><!-->
4
5
  <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
5
6
  <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
6
- <%# Deliberate use of image tag as a fallback method https://lynn.ru/examples/svg/en.html %>
7
- <image src="<%= asset_path('govuk-logotype-crown.png') %>" xlink:href="" display="none" class="govuk-header__logotype-crown-fallback-image" width="36" height="30"></image>
8
7
  </svg>
8
+ <!--<![endif]-->
9
+ <!--[if IE 8]>
10
+ <img src="<%= asset_path('govuk-logotype-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
11
+ <![endif]-->
9
12
  <span class="govuk-header__logotype-text">
10
13
  GOV.UK
11
14
  </span>
@@ -46,6 +46,12 @@ en:
46
46
  - We’d like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.
47
47
  - We also use cookies set by other sites to help us deliver content from their services.
48
48
  title: Cookies on GOV.UK
49
+ devolved_nations:
50
+ applies_to: Applies to
51
+ england: England
52
+ northern_ireland: Northern Ireland
53
+ scotland: Scotland
54
+ wales: Wales
49
55
  feedback:
50
56
  close: Close
51
57
  dont_include_personal_info: Don’t include personal or financial information like your National Insurance number or credit card details.
@@ -118,7 +124,8 @@ en:
118
124
  - label: Topics
119
125
  href: "/browse"
120
126
  description: Find information and services
121
- menu_contents:
127
+ menu_contents: # If adding or removing items, remember to update the
128
+ # `columns` in the layout-super-navigation-header SCSS.
122
129
  - label: Benefits
123
130
  href: "/browse/benefits"
124
131
  - label: Births, death, marriages and care
@@ -160,7 +167,8 @@ en:
160
167
  - label: Government activity
161
168
  href: "/search/news-and-communications"
162
169
  description: Find out what the government is doing
163
- menu_contents:
170
+ menu_contents: # If adding or removing items, remember to update the
171
+ # `columns` in the layout-super-navigation-header SCSS.
164
172
  - label: News
165
173
  href: "/search/news-and-communications"
166
174
  description: News stories, speeches, letters and notices
@@ -0,0 +1,27 @@
1
+ module GovukPublishingComponents
2
+ module Presenters
3
+ class DevolvedNationsHelper
4
+ attr_reader :national_applicability
5
+
6
+ def initialize(local_assigns)
7
+ @national_applicability = local_assigns[:national_applicability]
8
+ end
9
+
10
+ def applicable_nations_title_text
11
+ @national_applicability
12
+ .select { |_, v| v[:applicable] == true }
13
+ .map { |k, _| I18n.t("components.devolved_nations.#{k}") }
14
+ .sort
15
+ .to_sentence(last_word_connector: " and ")
16
+ end
17
+
18
+ def nations_with_urls
19
+ @national_applicability
20
+ .select do |_, v|
21
+ v[:alternative_url]
22
+ .present?
23
+ end
24
+ end
25
+ end
26
+ end
27
+ end
@@ -4,12 +4,12 @@ module GovukPublishingComponents
4
4
  include ActionView::Helpers
5
5
  include ActionView::Context
6
6
 
7
- attr_reader :href, :href_data_attributes, :extra_links, :large, :extra_links_no_indent, :heading_text, :metadata, :lang, :image_loading
7
+ attr_reader :href, :href_data_attributes, :extra_details, :large, :extra_details_no_indent, :heading_text, :metadata, :lang, :image_loading
8
8
 
9
9
  def initialize(local_assigns)
10
10
  @href = local_assigns[:href]
11
11
  @href_data_attributes = local_assigns[:href_data_attributes]
12
- @extra_links = local_assigns[:extra_links] || []
12
+ @extra_details = local_assigns[:extra_details] || []
13
13
  @image_src = local_assigns[:image_src]
14
14
  @image_alt = local_assigns[:image_alt] || ""
15
15
  @image_loading = local_assigns[:image_loading] || "auto"
@@ -17,7 +17,7 @@ module GovukPublishingComponents
17
17
  @description = local_assigns[:description]
18
18
  @large = local_assigns[:large]
19
19
  @heading_text = local_assigns[:heading_text]
20
- @extra_links_no_indent = local_assigns[:extra_links_no_indent]
20
+ @extra_details_no_indent = local_assigns[:extra_details_no_indent]
21
21
  @metadata = local_assigns[:metadata]
22
22
  @lang = local_assigns[:lang]
23
23
  end
@@ -25,8 +25,8 @@ module GovukPublishingComponents
25
25
  def is_tracking?
26
26
  return true if @href_data_attributes
27
27
 
28
- if @extra_links
29
- @extra_links.each do |link|
28
+ if @extra_details
29
+ @extra_details.each do |link|
30
30
  return true if link[:data_attributes]
31
31
  end
32
32
  end
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "26.0.0".freeze
2
+ VERSION = "27.3.0".freeze
3
3
  end
@@ -11,6 +11,7 @@ require "govuk_publishing_components/presenters/breadcrumb_selector"
11
11
  require "govuk_publishing_components/presenters/brexit_cta_helper"
12
12
  require "govuk_publishing_components/presenters/button_helper"
13
13
  require "govuk_publishing_components/presenters/contextual_navigation"
14
+ require "govuk_publishing_components/presenters/devolved_nations_helper"
14
15
  require "govuk_publishing_components/presenters/related_navigation_helper"
15
16
  require "govuk_publishing_components/presenters/step_by_step_nav_helper"
16
17
  require "govuk_publishing_components/presenters/page_with_step_by_step_navigation"
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: 26.0.0
4
+ version: 27.3.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: 2021-09-01 00:00:00.000000000 Z
11
+ date: 2021-09-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: govuk_app_config
@@ -462,6 +462,7 @@ files:
462
462
  - app/assets/javascripts/govuk_publishing_components/all_components.js
463
463
  - app/assets/javascripts/govuk_publishing_components/analytics.js
464
464
  - app/assets/javascripts/govuk_publishing_components/analytics/analytics.js
465
+ - app/assets/javascripts/govuk_publishing_components/analytics/auto-scroll-tracker.js
465
466
  - app/assets/javascripts/govuk_publishing_components/analytics/auto-track-event.js
466
467
  - app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js
467
468
  - app/assets/javascripts/govuk_publishing_components/analytics/download-link-tracker.js
@@ -536,6 +537,7 @@ files:
536
537
  - app/assets/stylesheets/govuk_publishing_components/components/_attachment-link.scss
537
538
  - app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss
538
539
  - app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss
540
+ - app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss
539
541
  - app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss
540
542
  - app/assets/stylesheets/govuk_publishing_components/components/_button.scss
541
543
  - app/assets/stylesheets/govuk_publishing_components/components/_character-count.scss
@@ -547,6 +549,7 @@ files:
547
549
  - app/assets/stylesheets/govuk_publishing_components/components/_copy-to-clipboard.scss
548
550
  - app/assets/stylesheets/govuk_publishing_components/components/_date-input.scss
549
551
  - app/assets/stylesheets/govuk_publishing_components/components/_details.scss
552
+ - app/assets/stylesheets/govuk_publishing_components/components/_devolved-nations.scss
550
553
  - app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss
551
554
  - app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss
552
555
  - app/assets/stylesheets/govuk_publishing_components/components/_error-message.scss
@@ -671,6 +674,7 @@ files:
671
674
  - app/views/govuk_publishing_components/components/_attachment.html.erb
672
675
  - app/views/govuk_publishing_components/components/_attachment_link.html.erb
673
676
  - app/views/govuk_publishing_components/components/_back_link.html.erb
677
+ - app/views/govuk_publishing_components/components/_big_number.html.erb
674
678
  - app/views/govuk_publishing_components/components/_breadcrumbs.html.erb
675
679
  - app/views/govuk_publishing_components/components/_button.html.erb
676
680
  - app/views/govuk_publishing_components/components/_character_count.html.erb
@@ -684,6 +688,7 @@ files:
684
688
  - app/views/govuk_publishing_components/components/_copy_to_clipboard.html.erb
685
689
  - app/views/govuk_publishing_components/components/_date_input.html.erb
686
690
  - app/views/govuk_publishing_components/components/_details.html.erb
691
+ - app/views/govuk_publishing_components/components/_devolved_nations.html.erb
687
692
  - app/views/govuk_publishing_components/components/_document_list.html.erb
688
693
  - app/views/govuk_publishing_components/components/_error_alert.html.erb
689
694
  - app/views/govuk_publishing_components/components/_error_message.html.erb
@@ -752,6 +757,7 @@ files:
752
757
  - app/views/govuk_publishing_components/components/docs/attachment.yml
753
758
  - app/views/govuk_publishing_components/components/docs/attachment_link.yml
754
759
  - app/views/govuk_publishing_components/components/docs/back_link.yml
760
+ - app/views/govuk_publishing_components/components/docs/big_number.yml
755
761
  - app/views/govuk_publishing_components/components/docs/breadcrumbs.yml
756
762
  - app/views/govuk_publishing_components/components/docs/button.yml
757
763
  - app/views/govuk_publishing_components/components/docs/character_count.yml
@@ -765,6 +771,7 @@ files:
765
771
  - app/views/govuk_publishing_components/components/docs/copy_to_clipboard.yml
766
772
  - app/views/govuk_publishing_components/components/docs/date_input.yml
767
773
  - app/views/govuk_publishing_components/components/docs/details.yml
774
+ - app/views/govuk_publishing_components/components/docs/devolved_nations.yml
768
775
  - app/views/govuk_publishing_components/components/docs/document_list.yml
769
776
  - app/views/govuk_publishing_components/components/docs/error_alert.yml
770
777
  - app/views/govuk_publishing_components/components/docs/error_message.yml
@@ -929,6 +936,7 @@ files:
929
936
  - lib/govuk_publishing_components/presenters/contents_list_helper.rb
930
937
  - lib/govuk_publishing_components/presenters/contextual_navigation.rb
931
938
  - lib/govuk_publishing_components/presenters/curated_taxonomy_sidebar_links.rb
939
+ - lib/govuk_publishing_components/presenters/devolved_nations_helper.rb
932
940
  - lib/govuk_publishing_components/presenters/heading_helper.rb
933
941
  - lib/govuk_publishing_components/presenters/highlight_boxes_helper.rb
934
942
  - lib/govuk_publishing_components/presenters/image_card_helper.rb