govuk_publishing_components 34.10.1 → 34.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js +123 -10
  3. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js +17 -92
  4. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-form-tracker.js +8 -2
  5. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js +12 -0
  6. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-schemas.js +16 -0
  7. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-smart-answer-results-tracker.js +57 -0
  8. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.js +2 -2
  9. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4.js +1 -0
  10. data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js +0 -22
  11. data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js +1 -0
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +42 -94
  13. data/app/models/govuk_publishing_components/audit_components.rb +55 -1
  14. data/app/views/govuk_publishing_components/audit/_components.html.erb +46 -1
  15. data/app/views/govuk_publishing_components/components/_breadcrumbs.html.erb +1 -1
  16. data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +210 -221
  17. data/app/views/govuk_publishing_components/components/docs/breadcrumbs.yml +1 -1
  18. data/app/views/govuk_publishing_components/components/docs/related_navigation.yml +20 -0
  19. data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb +23 -13
  20. data/config/locales/en.yml +1 -1
  21. data/lib/govuk_publishing_components/presenters/breadcrumbs.rb +6 -0
  22. data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb +14 -9
  23. data/lib/govuk_publishing_components/version.rb +1 -1
  24. metadata +4 -3
@@ -91,8 +91,22 @@ $after-button-padding-left: govuk-spacing(4);
91
91
 
92
92
  .gem-c-layout-super-navigation-header__container {
93
93
  position: relative;
94
+ }
94
95
 
95
- @include govuk-media-query($from: "desktop") {
96
+ .gem-c-layout-super-navigation-header__button-width-container {
97
+ position: relative;
98
+ }
99
+
100
+ .gem-c-layout-super-navigation-header__button-container {
101
+ @include govuk-media-query($until: "tablet") {
102
+ margin-right: govuk-spacing(-3);
103
+ }
104
+
105
+ top: -$black-bar-height;
106
+ position: absolute;
107
+ right: 0;
108
+
109
+ @include govuk-media-query($until: 300px) {
96
110
  position: static;
97
111
  }
98
112
  }
@@ -105,47 +119,13 @@ $after-button-padding-left: govuk-spacing(4);
105
119
  }
106
120
 
107
121
  .gem-c-layout-super-navigation-header__content {
108
- @include govuk-media-query($until: "tablet") {
109
- margin-right: govuk-spacing(-3);
110
- }
111
-
112
- display: inline-block;
113
- float: right;
122
+ width: 100%;
114
123
  }
115
124
 
116
125
  .gem-c-layout-super-navigation-header__navigation-toggle-wrapper {
117
126
  position: relative;
118
127
  }
119
128
 
120
- // Top level navigation and search.
121
- .gem-c-layout-super-navigation-header__navigation-items,
122
- .gem-c-layout-super-navigation-header__search-items {
123
- display: block;
124
- float: left;
125
- list-style: none;
126
- padding: 0;
127
- margin: 0;
128
- }
129
-
130
- .gem-c-layout-super-navigation-header__navigation-items {
131
- border-bottom: 1px solid $govuk-border-colour;
132
-
133
- .js-module-initialised & {
134
- &:last-child {
135
- border-bottom: none;
136
- }
137
- }
138
-
139
- @include govuk-media-query($from: "desktop") {
140
- border-bottom: 0;
141
- padding: 0;
142
-
143
- &:first-of-type {
144
- margin-right: -1px;
145
- }
146
- }
147
- }
148
-
149
129
  .gem-c-layout-super-navigation-header__navigation-item,
150
130
  .gem-c-layout-super-navigation-header__search-item {
151
131
  background: govuk-colour("black");
@@ -165,7 +145,7 @@ $after-button-padding-left: govuk-spacing(4);
165
145
  font-size: 19px;
166
146
  font-size: govuk-px-to-rem(19px);
167
147
  font-weight: bold;
168
- margin: govuk-spacing(3) 0;
148
+ padding: govuk-spacing(3) 0;
169
149
  position: relative;
170
150
 
171
151
  @include govuk-media-query($from: "desktop") {
@@ -204,7 +184,7 @@ $after-button-padding-left: govuk-spacing(4);
204
184
 
205
185
  &:after {
206
186
  @include make-selectable-area-bigger;
207
- @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding, $width: calc(100% - $after-button-padding-right));
187
+ @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding);
208
188
  }
209
189
 
210
190
  // stylelint-disable max-nesting-depth
@@ -413,7 +393,7 @@ $after-button-padding-left: govuk-spacing(4);
413
393
  height: $black-bar-height;
414
394
  padding: 0;
415
395
  position: relative;
416
- margin: 0 -3px 0 0; // overlap with the search button to hide right border on mobile
396
+ margin: 0;
417
397
  vertical-align: top;
418
398
 
419
399
  @include govuk-media-query($from: "desktop") {
@@ -566,7 +546,7 @@ $after-button-padding-left: govuk-spacing(4);
566
546
  // Styles for search toggle button.
567
547
  .gem-c-layout-super-navigation-header__search-toggle-button {
568
548
  @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
569
- background: govuk-colour("black");
549
+ background: none;
570
550
  border: 0;
571
551
  color: govuk-colour("white");
572
552
  cursor: pointer;
@@ -657,25 +637,22 @@ $after-button-padding-left: govuk-spacing(4);
657
637
  }
658
638
  }
659
639
 
640
+ .gem-c-layout-super-navigation-header__search-container {
641
+ padding-bottom: govuk-spacing(3);
642
+ }
643
+
660
644
  // Dropdown menu.
661
645
  .gem-c-layout-super-navigation-header__navigation-dropdown-menu {
646
+ @include govuk-media-query($until: 300px) {
647
+ padding-top: 80px;
648
+ }
649
+
662
650
  background: govuk-colour("light-grey");
663
651
  border-bottom: 1px govuk-colour("mid-grey") solid;
664
- top: govuk-spacing(8);
665
- left: govuk-spacing(-3);
666
- padding: 0 govuk-spacing(3);
667
- position: absolute;
668
- right: govuk-spacing(-3);
669
-
670
- @include govuk-media-query($from: "tablet") {
671
- padding: 0 govuk-spacing(6);
672
- left: govuk-spacing(-6);
673
- right: govuk-spacing(-6);
674
- }
652
+ padding-top: govuk-spacing(6);
675
653
 
676
654
  @include govuk-media-query($from: "desktop") {
677
- left: 0;
678
- right: 0;
655
+ padding-top: govuk-spacing(5);
679
656
  }
680
657
  }
681
658
 
@@ -692,31 +669,24 @@ $after-button-padding-left: govuk-spacing(4);
692
669
  // Dropdown menu items.
693
670
  .gem-c-layout-super-navigation-header__dropdown-list-item {
694
671
  box-sizing: border-box;
695
- padding: 0 0 govuk-spacing(5) 0;
672
+ padding: 0 0 govuk-spacing(3) 0;
696
673
  position: relative;
674
+ margin: 0 0 govuk-spacing(2) 0;
697
675
  @include govuk-media-query($from: "desktop") {
698
- padding: 0 0 govuk-spacing(4) 0;
676
+ padding: 0 0 govuk-spacing(3) 0;
677
+ margin: 0 govuk-spacing(3) govuk-spacing(1) govuk-spacing(3);
699
678
  }
700
679
  }
701
680
 
702
681
  // Navigation menu items.
703
682
  .gem-c-layout-super-navigation-header__navigation-second-items {
704
-
705
683
  list-style: none;
706
684
  margin: 0;
707
685
  padding: govuk-spacing(3) govuk-spacing(5) govuk-spacing(5) 0;
708
686
 
709
- & > li {
710
- margin: 0;
711
- }
712
-
713
687
  @include govuk-media-query($from: "desktop") {
714
688
  margin: 0 (0 - govuk-spacing(3)) govuk-spacing(9);
715
689
  padding: govuk-spacing(2) 0 0 0;
716
-
717
- & > li {
718
- margin: 0 govuk-spacing(3);
719
- }
720
690
  }
721
691
  }
722
692
 
@@ -743,11 +713,15 @@ $after-button-padding-left: govuk-spacing(4);
743
713
  font-size: govuk-px-to-rem(16px);
744
714
  font-weight: bold;
745
715
 
716
+ &:after {
717
+ @include make-selectable-area-bigger;
718
+ }
719
+
746
720
  @include govuk-media-query($from: "desktop") {
747
721
  padding: 0;
748
722
 
749
723
  &:after {
750
- content: none;
724
+ @include make-selectable-area-bigger;
751
725
  }
752
726
  }
753
727
  }
@@ -771,29 +745,8 @@ $after-button-padding-left: govuk-spacing(4);
771
745
  margin: govuk-spacing(1) 0 0 0;
772
746
  }
773
747
 
774
- // Search dropdown.
775
- .gem-c-layout-super-navigation-header__search-items {
776
- .js-module-initialised & {
777
- margin: 0 (0 - govuk-spacing(3));
778
- position: absolute;
779
-
780
- @include govuk-media-query($from: "tablet") {
781
- margin: 0 (0 - govuk-spacing(6));
782
- }
783
- }
784
-
785
- background: govuk-colour("light-grey");
786
- left: 0;
787
- right: 0;
788
- z-index: 999;
789
-
790
- @include govuk-media-query($from: "desktop") {
791
- margin: 0;
792
- }
793
- }
794
-
795
748
  .gem-c-layout-super-navigation-header__search-form {
796
- padding: govuk-spacing(3) 0 govuk-spacing(6) 0;
749
+ padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
797
750
  }
798
751
 
799
752
  // Popular links.
@@ -811,12 +764,6 @@ $after-button-padding-left: govuk-spacing(4);
811
764
  &:after {
812
765
  @include make-selectable-area-bigger;
813
766
  }
814
-
815
- @include govuk-media-query($from: "desktop") {
816
- &:after {
817
- content: none;
818
- }
819
- }
820
767
  }
821
768
 
822
769
  .gem-c-layout-super-navigation-header__width-container {
@@ -826,8 +773,9 @@ $after-button-padding-left: govuk-spacing(4);
826
773
  }
827
774
 
828
775
  @include govuk-media-query($from: "desktop") {
829
- margin: govuk-spacing(5) auto 0;
776
+ margin: 0 auto;
830
777
  max-width: 960px;
778
+ padding: govuk-spacing(5);
831
779
  }
832
780
  }
833
781
 
@@ -34,12 +34,19 @@ module GovukPublishingComponents
34
34
  private
35
35
 
36
36
  def compile_data(path)
37
+ component_file_details = get_component_file_details(path)
38
+ helper_usage = get_helper_usage(component_file_details)
39
+
40
+ # remove the template file reference as not needed
41
+ component_file_details.map { |detail| detail.delete(:template_file) }
42
+
37
43
  {
38
44
  gem_found: true,
39
45
  component_code: clean_files(@all_templates, @templates_full_path).sort,
40
46
  components_containing_components: find_all_partials_in(@all_templates),
41
- component_file_details: get_component_file_details(path),
47
+ component_file_details: component_file_details,
42
48
  component_numbers: @component_numbers,
49
+ helper_usage: helper_usage,
43
50
  }
44
51
  end
45
52
 
@@ -96,6 +103,8 @@ module GovukPublishingComponents
96
103
  type = detail[:type]
97
104
  file = detail[:file]
98
105
  details["#{type}_exists".to_sym] = false
106
+ # save the location of the template to later grep for helper use
107
+ details["#{type}_file".to_sym] = file if type == "template"
99
108
  if File.file?(file)
100
109
  # we don't have separate print stylesheets anymore
101
110
  # so check the main stylesheet for print styles
@@ -215,5 +224,50 @@ module GovukPublishingComponents
215
224
 
216
225
  link
217
226
  end
227
+
228
+ def get_helper_usage(components)
229
+ helpers = [
230
+ {
231
+ name: "Brand helper",
232
+ link: "lib/govuk_publishing_components/app_helpers/brand_helper.rb",
233
+ match: /(GovukPublishingComponents::AppHelpers::BrandHelper.new)/,
234
+ used_by: [],
235
+ },
236
+ {
237
+ name: "Component wrapper helper",
238
+ link: "lib/govuk_publishing_components/presenters/component_wrapper_helper.rb",
239
+ match: /(GovukPublishingComponents::Presenters::ComponentWrapperHelper.new)/,
240
+ used_by: [],
241
+ },
242
+ {
243
+ name: "Heading helper",
244
+ link: "lib/govuk_publishing_components/presenters/heading_helper.rb",
245
+ match: /(GovukPublishingComponents::Presenters::HeadingHelper.new)/,
246
+ used_by: [],
247
+ },
248
+ {
249
+ name: "Shared helper",
250
+ link: "lib/govuk_publishing_components/presenters/shared_helper.rb",
251
+ match: /(GovukPublishingComponents::Presenters::SharedHelper.new)/,
252
+ used_by: [],
253
+ },
254
+ ]
255
+
256
+ components.each do |component|
257
+ file = component[:template_file]
258
+ next unless File.file?(file)
259
+
260
+ helpers.each do |helper|
261
+ next unless File.foreach(file).grep(helper[:match]).present?
262
+
263
+ helper[:used_by] << {
264
+ name: component[:name],
265
+ link: component[:template_file].split("/components/")[1],
266
+ }
267
+ end
268
+ end
269
+
270
+ helpers
271
+ end
218
272
  end
219
273
  end
@@ -63,9 +63,54 @@
63
63
  items: component_items
64
64
  %>
65
65
 
66
+ <% helpers_by_component = capture do %>
67
+ <dl class="govuk-summary-list">
68
+ <% @components[:helper_usage].each do |helper| %>
69
+ <div class="govuk-summary-list__row">
70
+ <dt class="govuk-summary-list__key">
71
+ <a href="https://github.com/alphagov/govuk_publishing_components/blob/main/<%= helper[:link] %>" class="govuk-link"><%= helper[:name] %></a>
72
+ </dt>
73
+ <dd class="govuk-summary-list__value">
74
+ <details class="govuk-details" data-module="govuk-details">
75
+ <summary class="govuk-details__summary">
76
+ <span class="govuk-details__summary-text">
77
+ Used by <%= helper[:used_by].length %> components
78
+ </span>
79
+ </summary>
80
+ <div class="govuk-details__text">
81
+ <ul class="govuk-list govuk-list--bullet">
82
+ <% helper[:used_by].each do |component| %>
83
+ <% github_link = 'https://github.com/alphagov/govuk_publishing_components/tree/main/app/views/govuk_publishing_components/components/' %>
84
+ <li>
85
+ <a href="<%= github_link %><%= component[:link] %>" class="govuk-link"><%= component[:name] %></a>
86
+ </li>
87
+ <% end %>
88
+ </ul>
89
+ </div>
90
+ </details>
91
+ </dd>
92
+ </div>
93
+ <% end %>
94
+ </dl>
95
+ <% end %>
96
+
97
+ <%
98
+ component_items << {
99
+ heading: {
100
+ text: "Helpers by component",
101
+ },
102
+ summary: {
103
+ text: "Shows which components use common helpers",
104
+ },
105
+ content: {
106
+ html: helpers_by_component
107
+ },
108
+ }
109
+ %>
110
+
66
111
  <%= render 'items_in_applications',
67
112
  heading: 'Helpers by application',
68
- summary: 'Shows any applications that use helper classes from the components gem',
113
+ summary: 'Shows any applications that use helpers from the components gem',
69
114
  content: @components[:helpers_used_by_applications],
70
115
  items: component_items
71
116
  %>
@@ -13,7 +13,7 @@
13
13
 
14
14
  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
15
15
  component_helper.add_class(classes.join(" "))
16
- component_helper.add_data_attribute({ module: "gem-track-click" })
16
+ component_helper.add_data_attribute({ module: "gem-track-click ga4-link-tracker" })
17
17
  %>
18
18
 
19
19
  <script type="application/ld+json">