govuk_publishing_components 24.9.2 → 24.10.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics/pii.js +1 -1
  3. data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js +13 -248
  4. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +1 -2
  5. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +1 -0
  6. data/app/assets/javascripts/govuk_publishing_components/components/show-password.js +12 -0
  7. data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js +18 -0
  8. data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +34 -34
  9. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +0 -37
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss +1 -0
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss +15 -18
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_notice.scss +4 -2
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +4 -4
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +20 -20
  15. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss +27 -24
  16. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss +1 -1
  17. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss +1 -0
  18. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss +1 -0
  19. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +1 -0
  20. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +1 -0
  21. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss +1 -0
  22. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss +1 -0
  23. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss +19 -16
  24. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_fraction.scss +1 -0
  25. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss +30 -27
  26. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss +1 -0
  27. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss +1 -0
  28. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss +1 -0
  29. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss +26 -21
  30. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss +1 -0
  31. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss +19 -16
  32. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_summary.scss +21 -18
  33. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss +1 -0
  34. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss +1 -0
  35. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss +1 -0
  36. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_px-to-em.scss +2 -0
  37. data/app/views/govuk_publishing_components/components/_government_navigation.html.erb +7 -7
  38. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +1 -1
  39. data/app/views/govuk_publishing_components/components/_metadata.html.erb +9 -8
  40. data/app/views/govuk_publishing_components/components/_notice.html.erb +1 -1
  41. data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +1 -1
  42. data/app/views/govuk_publishing_components/components/_radio.html.erb +6 -11
  43. data/app/views/govuk_publishing_components/components/_show_password.html.erb +2 -0
  44. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +4 -4
  45. data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb +1 -1
  46. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +1 -1
  47. data/app/views/govuk_publishing_components/components/_success_alert.html.erb +1 -1
  48. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +9 -27
  49. data/app/views/govuk_publishing_components/components/docs/show_password.yml +10 -0
  50. data/app/views/govuk_publishing_components/components/docs/success_alert.yml +5 -0
  51. data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb +1 -1
  52. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +1 -1
  53. data/app/views/govuk_publishing_components/components/metadata/_sentence.html.erb +2 -2
  54. data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb +4 -3
  55. data/config/locales/cy.yml +0 -5
  56. data/config/locales/en.yml +12 -9
  57. data/lib/govuk_publishing_components/presenters/breadcrumb_selector.rb +5 -0
  58. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +4 -0
  59. data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb +0 -1
  60. data/lib/govuk_publishing_components/version.rb +1 -1
  61. metadata +17 -3
  62. data/app/assets/javascripts/component_guide/visual-regression.js +0 -71
@@ -7,8 +7,8 @@
7
7
 
8
8
  // stylelint-disable max-nesting-depth
9
9
 
10
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
10
11
  .gem-c-govspeak {
11
-
12
12
  // Scope attachment and attachment-link component styles to gem-c-govspeak
13
13
  @import "../attachment-link";
14
14
  @import "../attachment";
@@ -1,4 +1,5 @@
1
1
  // stylelint-disable scss/at-extend-no-missing-placeholder
2
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
2
3
  .gem-c-govspeak {
3
4
  @import "govuk/components/button/button";
4
5
 
@@ -6,6 +6,7 @@
6
6
  // - alphagov/whitehall: ✔︎
7
7
  // - alphagov/govspeak: ✔︎
8
8
 
9
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
9
10
  .gem-c-govspeak {
10
11
  .call-to-action {
11
12
  margin: 2em 0;
@@ -11,6 +11,7 @@
11
11
 
12
12
  // stylelint-disable max-nesting-depth
13
13
 
14
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
14
15
  .gem-c-govspeak {
15
16
  // DEFAULT CHART STYLES
16
17
 
@@ -7,6 +7,7 @@
7
7
 
8
8
  // stylelint-disable max-nesting-depth
9
9
 
10
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
10
11
  .gem-c-govspeak {
11
12
  // .address is used by the `$A` markdown pattern
12
13
  .address,
@@ -5,6 +5,7 @@
5
5
  // - alphagov/whitehall: ✔︎
6
6
  // - alphagov/govspeak: ✔︎
7
7
 
8
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
8
9
  .gem-c-govspeak {
9
10
  .example {
10
11
  border-left: 10px solid govuk-colour("mid-grey", $legacy: "grey-3");
@@ -11,6 +11,7 @@
11
11
 
12
12
  // stylelint-disable max-nesting-depth
13
13
 
14
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
14
15
  .gem-c-govspeak {
15
16
  .footnotes {
16
17
  border-top: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");
@@ -1,21 +1,24 @@
1
- .gem-c-govspeak .form-download {
2
- padding: .25em 0;
1
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
2
+ .gem-c-govspeak {
3
+ .form-download {
4
+ padding: .25em 0;
3
5
 
4
- @include govuk-media-query($until: tablet) {
5
- margin: 1em 0 1.5em;
6
- }
6
+ @include govuk-media-query($until: tablet) {
7
+ margin: 1em 0 1.5em;
8
+ }
7
9
 
8
- p {
9
- padding-right: 3em;
10
- }
10
+ p {
11
+ padding-right: 3em;
12
+ }
11
13
 
12
- a {
13
- display: block;
14
- font-weight: 600;
15
- background-image: image-url("govuk_publishing_components/icon-file-download.svg");
16
- background-repeat: no-repeat;
17
- background-size: 40px 40px;
18
- min-height: 2.5em;
19
- padding: 0 0 0 50px;
14
+ a {
15
+ display: block;
16
+ font-weight: 600;
17
+ background-image: image-url("govuk_publishing_components/icon-file-download.svg");
18
+ background-repeat: no-repeat;
19
+ background-size: 40px 40px;
20
+ min-height: 2.5em;
21
+ padding: 0 0 0 50px;
22
+ }
20
23
  }
21
24
  }
@@ -6,6 +6,7 @@
6
6
  // - alphagov/whitehall: ✔︎
7
7
  // - alphagov/govspeak: ✘
8
8
 
9
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
9
10
  .gem-c-govspeak {
10
11
  .fraction {
11
12
  sup,
@@ -3,41 +3,44 @@
3
3
  $highlight-answer-bg-color: govuk-colour("green");
4
4
  $highlight-answer-color: govuk-colour("white");
5
5
 
6
- .gem-c-govspeak .highlight-answer {
7
- background-color: $highlight-answer-bg-color;
8
- color: $highlight-answer-color;
9
- text-align: center;
10
- padding: 1.75em .75em 1.25em;
11
- margin: 0 -1em 1em;
12
-
13
- p {
14
- @include govuk-font($size: 24, $weight: bold);
6
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
7
+ .gem-c-govspeak {
8
+ .highlight-answer {
9
+ background-color: $highlight-answer-bg-color;
15
10
  color: $highlight-answer-color;
11
+ text-align: center;
12
+ padding: 1.75em .75em 1.25em;
13
+ margin: 0 -1em 1em;
16
14
 
17
- em {
18
- @include govuk-font($size: 80, $weight: bold);
19
- display: block;
20
- padding-top: .1em;
15
+ p {
16
+ @include govuk-font($size: 24, $weight: bold);
21
17
  color: $highlight-answer-color;
22
- }
23
- }
24
18
 
25
- p:last-child {
26
- margin-bottom: 0;
27
- }
19
+ em {
20
+ @include govuk-font($size: 80, $weight: bold);
21
+ display: block;
22
+ padding-top: .1em;
23
+ color: $highlight-answer-color;
24
+ }
25
+ }
28
26
 
29
- @include govuk-media-query($until: tablet) {
30
- margin: 0 0 1em;
31
- @include govuk-font($size: 48);
27
+ p:last-child {
28
+ margin-bottom: 0;
29
+ }
32
30
 
33
- p {
34
- font-size: 1em;
35
- line-height: inherit;
31
+ @include govuk-media-query($until: tablet) {
32
+ margin: 0 0 1em;
33
+ @include govuk-font($size: 48);
36
34
 
37
- em {
35
+ p {
38
36
  font-size: 1em;
39
- padding-top: 0;
40
- display: inline;
37
+ line-height: inherit;
38
+
39
+ em {
40
+ font-size: 1em;
41
+ padding-top: 0;
42
+ display: inline;
43
+ }
41
44
  }
42
45
  }
43
46
  }
@@ -4,6 +4,7 @@
4
4
  // - alphagov/whitehall: ✔︎
5
5
  // - alphagov/govspeak: ✔︎
6
6
 
7
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
7
8
  .gem-c-govspeak {
8
9
  img {
9
10
  width: auto;
@@ -6,6 +6,7 @@
6
6
  // - alphagov/whitehall: ✔︎
7
7
  // - alphagov/govspeak: ✔︎
8
8
 
9
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
9
10
  .gem-c-govspeak {
10
11
  .info-notice {
11
12
  border-left: 10px solid govuk-colour("mid-grey", $legacy: "grey-3");
@@ -5,6 +5,7 @@
5
5
  // - alphagov/whitehall: ✔︎
6
6
  // - alphagov/govspeak: ✔︎
7
7
 
8
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
8
9
  .gem-c-govspeak {
9
10
  .legislative-list {
10
11
  list-style: none;
@@ -1,29 +1,34 @@
1
- .gem-c-govspeak .place {
2
- margin: 1.5em 0;
3
- border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
4
- padding-bottom: 1.5em;
1
+ // stylelint-disable max-nesting-depth
2
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
3
+ .gem-c-govspeak {
4
+ .place {
5
+ margin: 1.5em 0;
6
+ border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
7
+ padding-bottom: 1.5em;
5
8
 
6
- .address {
7
- margin: 0;
8
- padding: 0;
9
- width: auto;
10
- display: block;
11
- }
9
+ .address {
10
+ margin: 0;
11
+ padding: 0;
12
+ width: auto;
13
+ display: block;
14
+ }
12
15
 
13
- .url {
14
- overflow: hidden;
15
- text-overflow: ellipsis;
16
- }
16
+ .url {
17
+ overflow: hidden;
18
+ text-overflow: ellipsis;
19
+ }
17
20
 
18
- .additional-information {
19
- @include govuk-font($size: 16);
21
+ .additional-information {
22
+ @include govuk-font($size: 16);
20
23
 
21
- p {
22
- margin: .25em 0;
24
+ p {
25
+ margin: .25em 0;
26
+ }
23
27
  }
24
- }
25
28
 
26
- @include govuk-media-query($until: tablet) {
27
- margin: .75em 0;
29
+ @include govuk-media-query($until: tablet) {
30
+ margin: .75em 0;
31
+ }
28
32
  }
29
33
  }
34
+ // stylelint-enable max-nesting-depth
@@ -5,6 +5,7 @@
5
5
  // - alphagov/whitehall: ✔︎
6
6
  // - alphagov/govspeak: ✔︎
7
7
 
8
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
8
9
  .gem-c-govspeak {
9
10
  .stat-headline {
10
11
  margin-bottom: govuk-spacing(3);
@@ -1,21 +1,24 @@
1
- .gem-c-govspeak .steps {
2
- padding-left: 0;
3
- margin-left: 0;
4
- overflow: hidden;
5
-
6
- > li {
7
- background-position: 0 .87em;
8
- background-repeat: no-repeat;
9
- list-style-type: decimal;
1
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
2
+ .gem-c-govspeak {
3
+ .steps {
4
+ padding-left: 0;
10
5
  margin-left: 0;
11
- padding: .75em 0 .75em 2.5em;
6
+ overflow: hidden;
7
+
8
+ > li {
9
+ background-position: 0 .87em;
10
+ background-repeat: no-repeat;
11
+ list-style-type: decimal;
12
+ margin-left: 0;
13
+ padding: .75em 0 .75em 2.5em;
12
14
 
13
- @for $i from 1 through 30 {
14
- &:nth-child(#{$i}) {
15
- background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250' preserveAspectRatio='xMinYMin meet'%3E%3Cg%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' class='circle-back'%3E%3C/circle%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='0.3em' font-family='nta,arial,sans-serif' font-size='8rem' fill='%23ffffff'%3E#{$i}%3C/text%3E%3C/g%3E%3C/svg%3E ");
16
- background-repeat: no-repeat;
17
- background-position: .2em .7em;
18
- background-size: 1.4em 1.4em;
15
+ @for $i from 1 through 30 {
16
+ &:nth-child(#{$i}) {
17
+ background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250' preserveAspectRatio='xMinYMin meet'%3E%3Cg%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' class='circle-back'%3E%3C/circle%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='0.3em' font-family='nta,arial,sans-serif' font-size='8rem' fill='%23ffffff'%3E#{$i}%3C/text%3E%3C/g%3E%3C/svg%3E ");
18
+ background-repeat: no-repeat;
19
+ background-position: .2em .7em;
20
+ background-size: 1.4em 1.4em;
21
+ }
19
22
  }
20
23
  }
21
24
  }
@@ -1,24 +1,27 @@
1
- .gem-c-govspeak .summary {
2
- margin: 0 0 2em;
3
- padding: 0;
4
- color: $govuk-text-colour;
5
-
6
- p {
7
- @include govuk-font($size: 19);
8
- }
9
-
10
- @include govuk-media-query($until: tablet) {
1
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
2
+ .gem-c-govspeak {
3
+ .summary {
11
4
  margin: 0 0 2em;
12
5
  padding: 0;
13
- }
6
+ color: $govuk-text-colour;
14
7
 
15
- p,
16
- h2 {
17
- border: 0;
18
- margin: 0 .75em 0 0;
19
- }
8
+ p {
9
+ @include govuk-font($size: 19);
10
+ }
11
+
12
+ @include govuk-media-query($until: tablet) {
13
+ margin: 0 0 2em;
14
+ padding: 0;
15
+ }
16
+
17
+ p,
18
+ h2 {
19
+ border: 0;
20
+ margin: 0 .75em 0 0;
21
+ }
20
22
 
21
- h2 {
22
- line-height: 1.35em;
23
+ h2 {
24
+ line-height: 1.35em;
25
+ }
23
26
  }
24
27
  }
@@ -5,6 +5,7 @@
5
5
  // - alphagov/whitehall: ✔︎
6
6
  // - alphagov/govspeak: ✔︎
7
7
 
8
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
8
9
  .gem-c-govspeak {
9
10
  table {
10
11
  border-collapse: collapse;
@@ -11,6 +11,7 @@
11
11
 
12
12
  // stylelint-disable max-nesting-depth
13
13
 
14
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
14
15
  .gem-c-govspeak {
15
16
  @include markdown-typography;
16
17
 
@@ -6,6 +6,7 @@
6
6
  // - alphagov/whitehall: ✔︎
7
7
  // - alphagov/govspeak: ✔︎
8
8
 
9
+ .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
9
10
  .gem-c-govspeak {
10
11
  .help-notice {
11
12
  $icon-size: 34px;
@@ -1,5 +1,7 @@
1
1
  // Convert pixels to em
2
2
  @function em($value, $gem-context-font-size) {
3
+ @warn "This function is deprecated and will be removed in the next major version release - use GOV.UK Frontend's `govuk-em()` instead.";
4
+
3
5
  @if (unitless($value)) {
4
6
  $value: $value * 1px;
5
7
  }
@@ -6,37 +6,37 @@
6
6
  <ul id="proposition-links">
7
7
  <li>
8
8
  <a class="<%= 'active' if active == 'departments' %>" href="/government/organisations">
9
- <%= t("govuk_component.government_navigation.departments", default: "Departments") %>
9
+ <%= t("components.government_navigation.departments", default: "Departments") %>
10
10
  </a>
11
11
  </li>
12
12
  <li>
13
13
  <a class="<%= 'active' if active == 'worldwide' %>" href="/government/world">
14
- <%= t("govuk_component.government_navigation.worldwide", default: "Worldwide") %>
14
+ <%= t("components.government_navigation.worldwide", default: "Worldwide") %>
15
15
  </a>
16
16
  </li>
17
17
  <li>
18
18
  <a class="<%= 'active' if active == 'how-government-works' %>" href="/government/how-government-works">
19
- <%= t("govuk_component.government_navigation.how-government-works", default: "How government works") %>
19
+ <%= t("components.government_navigation.how-government-works", default: "How government works") %>
20
20
  </a>
21
21
  </li>
22
22
  <li>
23
23
  <a class="<%= 'active' if active == 'get-involved' %>" href="/government/get-involved">
24
- <%= t("govuk_component.government_navigation.get-involved", default: "Get involved") %>
24
+ <%= t("components.government_navigation.get-involved", default: "Get involved") %>
25
25
  </a>
26
26
  </li>
27
27
  <li class="clear-child">
28
28
  <a class="<%= 'active' if active == 'consultations' %>" href="<%= CGI::escapeHTML('/search/policy-papers-and-consultations?content_store_document_type[]=open_consultations&content_store_document_type[]=closed_consultations') %>">
29
- <%= t("govuk_component.government_navigation.consultations", default: "Consultations") %>
29
+ <%= t("components.government_navigation.consultations", default: "Consultations") %>
30
30
  </a>
31
31
  </li>
32
32
  <li>
33
33
  <a class="<%= 'active' if active == 'statistics' %>" href="/search/research-and-statistics">
34
- <%= t("govuk_component.government_navigation.statistics", default: "Statistics") %>
34
+ <%= t("components.government_navigation.statistics", default: "Statistics") %>
35
35
  </a>
36
36
  </li>
37
37
  <li>
38
38
  <a class="<%= 'active' if active == 'announcements' %>" href="/news-and-communications">
39
- <%= t("govuk_component.government_navigation.news_and_communications", default: "News and communications") %>
39
+ <%= t("components.government_navigation.news_and_communications", default: "News and communications") %>
40
40
  </a>
41
41
  </li>
42
42
  </ul>