govuk_publishing_components 23.13.0 → 24.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (129) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/govuk_publishing_components/take-action-amber.svg +4 -0
  3. data/app/assets/images/govuk_publishing_components/take-action-green.svg +4 -0
  4. data/app/assets/images/govuk_publishing_components/take-action-red.svg +4 -0
  5. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +286 -4
  6. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +0 -4
  7. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +44 -39
  8. data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills/common.js +8 -0
  9. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/component_support.scss +0 -2
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +302 -14
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +34 -17
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +14 -8
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss +4 -4
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +35 -44
  16. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +112 -47
  17. data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +8 -8
  18. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +0 -5
  19. data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss +16 -9
  20. data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss +2 -2
  21. data/app/models/govuk_publishing_components/component_doc.rb +1 -1
  22. data/app/views/govuk_publishing_components/audit/show.html.erb +26 -26
  23. data/app/views/govuk_publishing_components/components/_accordion.html.erb +13 -20
  24. data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +2 -8
  25. data/app/views/govuk_publishing_components/components/_document_list.html.erb +12 -2
  26. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +9 -4
  27. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
  28. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +21 -0
  29. data/app/views/govuk_publishing_components/components/docs/accordion.yml +8 -3
  30. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +65 -1
  31. data/app/views/govuk_publishing_components/components/docs/document_list.yml +50 -7
  32. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +3 -3
  33. data/app/views/govuk_publishing_components/components/docs/layout_header.yml +11 -0
  34. data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb +1 -1
  35. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +9 -4
  36. data/config/initializers/assets.rb +3 -1
  37. data/config/locales/cy.yml +6 -1
  38. data/config/locales/en.yml +8 -3
  39. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +183 -2
  40. data/lib/govuk_publishing_components/version.rb +1 -1
  41. data/node_modules/govuk-frontend/govuk/all.js +58 -1
  42. data/node_modules/govuk-frontend/govuk/components/_all.scss +2 -0
  43. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
  44. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
  45. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
  46. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
  47. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
  48. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/template.njk +2 -2
  49. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +2 -0
  50. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
  51. data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +1 -0
  52. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +1 -1
  53. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +85 -15
  54. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
  55. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
  56. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
  57. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss +2 -0
  58. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +51 -0
  59. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +425 -0
  60. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +132 -0
  61. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro.njk +3 -0
  62. data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk +63 -0
  63. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
  64. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
  65. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
  66. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +35 -15
  67. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
  68. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
  69. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
  70. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
  71. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
  72. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
  73. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
  74. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
  75. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
  76. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
  77. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -4
  78. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
  79. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
  80. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
  81. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
  82. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
  83. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
  84. data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
  85. data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
  86. data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
  87. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
  88. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
  89. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
  90. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
  91. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
  92. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
  93. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
  94. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
  95. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
  96. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
  97. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
  98. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
  99. data/node_modules/govuk-frontend/govuk/components/table/_index.scss +21 -0
  100. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
  101. data/node_modules/govuk-frontend/govuk/components/table/macro-options.json +2 -2
  102. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
  103. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
  104. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
  105. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
  106. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
  107. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
  108. data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
  109. data/node_modules/govuk-frontend/govuk/objects/_button-group.scss +94 -0
  110. data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
  111. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
  112. data/node_modules/govuk-frontend/package.json +1 -1
  113. metadata +21 -18
  114. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small-focus.svg +0 -4
  115. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small.svg +0 -4
  116. data/app/assets/javascripts/govuk_publishing_components/components/header.js +0 -8
  117. data/app/assets/javascripts/govuk_publishing_components/lib/auto-track-event.js +0 -31
  118. data/app/assets/stylesheets/govuk_publishing_components/components/_chevron-banner.scss +0 -138
  119. data/app/assets/stylesheets/govuk_publishing_components/components/_list.scss +0 -1
  120. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss +0 -27
  121. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_back-arrow.scss +0 -13
  122. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_clearfix.scss +0 -8
  123. data/app/views/govuk_publishing_components/components/_chevron_banner.html.erb +0 -19
  124. data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +0 -85
  125. data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +0 -33
  126. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb +0 -6
  127. data/app/views/govuk_publishing_components/components/docs/chevron_banner.yml +0 -33
  128. data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +0 -103
  129. data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +0 -139
@@ -20,7 +20,7 @@
20
20
  {
21
21
  "name": "inputmode",
22
22
  "type": "string",
23
- "require": false,
23
+ "required": false,
24
24
  "description": "Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)."
25
25
  },
26
26
  {
@@ -6,44 +6,53 @@
6
6
  "options": {
7
7
  "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
8
8
  },
9
- "html": "<div class=\"govuk-inset-text\">\n It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.\n</div>"
9
+ "html": "<div class=\"govuk-inset-text\">\n It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.\n</div>",
10
+ "hidden": false
10
11
  },
11
12
  {
12
13
  "name": "with html",
13
14
  "options": {
14
15
  "html": "<p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n You can be fined up to £5,000 if you don’t register.\n </strong>\n</div>\n<p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n"
15
16
  },
16
- "html": "<div class=\"govuk-inset-text\">\n <p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n You can be fined up to £5,000 if you don’t register.\n </strong>\n</div>\n<p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n\n</div>"
17
+ "html": "<div class=\"govuk-inset-text\">\n <p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n You can be fined up to £5,000 if you don’t register.\n </strong>\n</div>\n<p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n\n</div>",
18
+ "hidden": false
17
19
  },
18
20
  {
19
21
  "name": "classes",
20
22
  "options": {
21
- "classes": "app-inset-text--custom-modifier"
23
+ "classes": "app-inset-text--custom-modifier",
24
+ "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
22
25
  },
23
- "html": "<div class=\"govuk-inset-text app-inset-text--custom-modifier\">\n \n</div>"
26
+ "html": "<div class=\"govuk-inset-text app-inset-text--custom-modifier\">\n It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.\n</div>",
27
+ "hidden": true
24
28
  },
25
29
  {
26
30
  "name": "id",
27
31
  "options": {
28
- "id": "my-inset-text"
32
+ "id": "my-inset-text",
33
+ "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
29
34
  },
30
- "html": "<div id=\"my-inset-text\" class=\"govuk-inset-text\">\n \n</div>"
35
+ "html": "<div id=\"my-inset-text\" class=\"govuk-inset-text\">\n It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.\n</div>",
36
+ "hidden": true
31
37
  },
32
38
  {
33
39
  "name": "html as text",
34
40
  "options": {
35
41
  "text": "It can take <b>up to 8 weeks</b> to register a lasting power of attorney if there are no mistakes in the application."
36
42
  },
37
- "html": "<div class=\"govuk-inset-text\">\n It can take &lt;b&gt;up to 8 weeks&lt;/b&gt; to register a lasting power of attorney if there are no mistakes in the application.\n</div>"
43
+ "html": "<div class=\"govuk-inset-text\">\n It can take &lt;b&gt;up to 8 weeks&lt;/b&gt; to register a lasting power of attorney if there are no mistakes in the application.\n</div>",
44
+ "hidden": true
38
45
  },
39
46
  {
40
47
  "name": "attributes",
41
48
  "options": {
49
+ "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.",
42
50
  "attributes": {
43
51
  "data-attribute": "my data value"
44
52
  }
45
53
  },
46
- "html": "<div class=\"govuk-inset-text\" data-attribute=\"my data value\">\n \n</div>"
54
+ "html": "<div class=\"govuk-inset-text\" data-attribute=\"my data value\">\n It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.\n</div>",
55
+ "hidden": true
47
56
  }
48
57
  ]
49
58
  }
@@ -6,7 +6,8 @@
6
6
  "options": {
7
7
  "text": "National Insurance number"
8
8
  },
9
- "html": "<label class=\"govuk-label\">\n National Insurance number\n</label>"
9
+ "html": "<label class=\"govuk-label\">\n National Insurance number\n</label>",
10
+ "hidden": false
10
11
  },
11
12
  {
12
13
  "name": "with bold text",
@@ -14,7 +15,8 @@
14
15
  "classes": "govuk-label--s",
15
16
  "text": "National Insurance number"
16
17
  },
17
- "html": "<label class=\"govuk-label govuk-label--s\">\n National Insurance number\n</label>"
18
+ "html": "<label class=\"govuk-label govuk-label--s\">\n National Insurance number\n</label>",
19
+ "hidden": false
18
20
  },
19
21
  {
20
22
  "name": "as page heading",
@@ -23,12 +25,14 @@
23
25
  "classes": "govuk-label--xl",
24
26
  "isPageHeading": true
25
27
  },
26
- "html": "<h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label govuk-label--xl\">\n National Insurance number\n </label>\n </h1>"
28
+ "html": "<h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label govuk-label--xl\">\n National Insurance number\n </label>\n </h1>",
29
+ "hidden": false
27
30
  },
28
31
  {
29
32
  "name": "empty",
30
33
  "options": {},
31
- "html": ""
34
+ "html": "",
35
+ "hidden": true
32
36
  },
33
37
  {
34
38
  "name": "classes",
@@ -36,21 +40,24 @@
36
40
  "text": "National Insurance number",
37
41
  "classes": "extra-class one-more-class"
38
42
  },
39
- "html": "<label class=\"govuk-label extra-class one-more-class\">\n National Insurance number\n</label>"
43
+ "html": "<label class=\"govuk-label extra-class one-more-class\">\n National Insurance number\n</label>",
44
+ "hidden": true
40
45
  },
41
46
  {
42
47
  "name": "html as text",
43
48
  "options": {
44
49
  "text": "National Insurance number, <em>NINO</em>"
45
50
  },
46
- "html": "<label class=\"govuk-label\">\n National Insurance number, &lt;em&gt;NINO&lt;/em&gt;\n</label>"
51
+ "html": "<label class=\"govuk-label\">\n National Insurance number, &lt;em&gt;NINO&lt;/em&gt;\n</label>",
52
+ "hidden": true
47
53
  },
48
54
  {
49
55
  "name": "html",
50
56
  "options": {
51
57
  "html": "National Insurance number <em>NINO</em>"
52
58
  },
53
- "html": "<label class=\"govuk-label\">\n National Insurance number <em>NINO</em>\n</label>"
59
+ "html": "<label class=\"govuk-label\">\n National Insurance number <em>NINO</em>\n</label>",
60
+ "hidden": true
54
61
  },
55
62
  {
56
63
  "name": "for",
@@ -58,18 +65,20 @@
58
65
  "for": "#dummy-input",
59
66
  "text": "National Insurance number"
60
67
  },
61
- "html": "<label class=\"govuk-label\" for=\"#dummy-input\">\n National Insurance number\n</label>"
68
+ "html": "<label class=\"govuk-label\" for=\"#dummy-input\">\n National Insurance number\n</label>",
69
+ "hidden": true
62
70
  },
63
71
  {
64
72
  "name": "attributes",
65
73
  "options": {
66
74
  "text": "National Insurance number",
67
75
  "attributes": {
68
- "first-attribute": "true",
69
- "second-attribute": "false"
76
+ "first-attribute": "foo",
77
+ "second-attribute": "bar"
70
78
  }
71
79
  },
72
- "html": "<label class=\"govuk-label\" first-attribute=\"true\" second-attribute=\"false\">\n National Insurance number\n</label>"
80
+ "html": "<label class=\"govuk-label\" first-attribute=\"foo\" second-attribute=\"bar\">\n National Insurance number\n</label>",
81
+ "hidden": true
73
82
  }
74
83
  ]
75
84
  }
@@ -14,7 +14,7 @@
14
14
  {
15
15
  "name": "for",
16
16
  "type": "string",
17
- "required": true,
17
+ "required": false,
18
18
  "description": "The value of the for attribute, the id of the input the label is associated with."
19
19
  },
20
20
  {
@@ -0,0 +1,15 @@
1
+ # Notification banner
2
+
3
+ ## Installation
4
+
5
+ See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
6
+
7
+ ## Guidance and Examples
8
+
9
+ Find out when to use the notification banner component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/notification-banner).
10
+
11
+ ## Component options
12
+
13
+ Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
14
+
15
+ See [options table](https://design-system.service.gov.uk/components/notification-banner/#options-notification-banner-example) for details.
@@ -0,0 +1,89 @@
1
+ @include govuk-exports("govuk/component/notification-banner") {
2
+ .govuk-notification-banner {
3
+ @include govuk-font($size: 19);
4
+ @include govuk-responsive-margin(8, "bottom");
5
+
6
+ border: $govuk-border-width solid $govuk-brand-colour;
7
+
8
+ background-color: $govuk-brand-colour;
9
+
10
+ &:focus {
11
+ outline: $govuk-focus-width solid $govuk-focus-colour;
12
+ }
13
+ }
14
+
15
+ .govuk-notification-banner__header {
16
+ padding: 2px govuk-spacing(3) govuk-spacing(1);
17
+
18
+ // Ensures the notification header appears separate to the notification body text in high contrast mode
19
+ border-bottom: 1px solid transparent;
20
+
21
+ @include govuk-media-query($from: tablet) {
22
+ padding: 2px govuk-spacing(4) govuk-spacing(1);
23
+ }
24
+ }
25
+
26
+ .govuk-notification-banner__title {
27
+ @include govuk-font($size: 19, $weight: bold);
28
+
29
+ margin: 0;
30
+
31
+ padding: 0;
32
+
33
+ color: govuk-colour("white");
34
+ }
35
+
36
+ .govuk-notification-banner__content {
37
+ $padding-tablet: govuk-spacing(4);
38
+ @include govuk-text-colour;
39
+ padding: govuk-spacing(3);
40
+
41
+ background-color: $govuk-body-background-colour;
42
+
43
+ @include govuk-media-query($from: tablet) {
44
+ padding: $padding-tablet;
45
+ }
46
+
47
+ // Wrap content at the same place that a 2/3 grid column ends, to maintain
48
+ // shorter line-lengths when the notification banner is full width
49
+ > * {
50
+ // When elements have their own padding (like lists), include the padding
51
+ // in the max-width calculation
52
+ box-sizing: border-box;
53
+
54
+ // Calculate the internal width of a two-thirds column...
55
+ $two-col-width: ($govuk-page-width * 2 / 3) - ($govuk-gutter * 1 / 3);
56
+
57
+ // ...and then factor in the left border and padding
58
+ $banner-exterior: ($padding-tablet + $govuk-border-width);
59
+ max-width: $two-col-width - $banner-exterior;
60
+ }
61
+
62
+ > :last-child {
63
+ margin-bottom: 0;
64
+ }
65
+ }
66
+
67
+ .govuk-notification-banner__heading {
68
+ @include govuk-font($size: 24, $weight: bold);
69
+
70
+ margin: 0 0 govuk-spacing(3) 0;
71
+
72
+ padding: 0;
73
+ }
74
+
75
+ .govuk-notification-banner__link {
76
+ @include govuk-link-common;
77
+ @include govuk-link-style-no-visited-state;
78
+ }
79
+
80
+ .govuk-notification-banner--success {
81
+ border-color: $govuk-success-colour;
82
+
83
+ background-color: $govuk-success-colour;
84
+
85
+ .govuk-notification-banner__link {
86
+ @include govuk-link-style-success;
87
+ }
88
+ }
89
+ }
@@ -0,0 +1,2 @@
1
+ @import "../../base";
2
+ @import "./index";
@@ -0,0 +1,212 @@
1
+ {
2
+ "component": "notification-banner",
3
+ "fixtures": [
4
+ {
5
+ "name": "default",
6
+ "options": {
7
+ "text": "This publication was withdrawn on 7 March 2014."
8
+ },
9
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>",
10
+ "hidden": false
11
+ },
12
+ {
13
+ "name": "paragraph as html heading",
14
+ "options": {
15
+ "html": "<p class=\"govuk-notification-banner__heading\">You have 9 days to send a response.</p>"
16
+ },
17
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\"><p class=\"govuk-notification-banner__heading\">You have 9 days to send a response.</p></div>\n</div>",
18
+ "hidden": false
19
+ },
20
+ {
21
+ "name": "with text as html",
22
+ "options": {
23
+ "html": "<h3 class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014</h3><p class=\"govuk-body\">Archived and replaced by the <a href=\"#\" class=\"govuk-notification-banner__link\">new planning guidance</a> launched 6 March 2014 on an external website</p>\n"
24
+ },
25
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\"><h3 class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014</h3><p class=\"govuk-body\">Archived and replaced by the <a href=\"#\" class=\"govuk-notification-banner__link\">new planning guidance</a> launched 6 March 2014 on an external website</p>\n</div>\n</div>",
26
+ "hidden": false
27
+ },
28
+ {
29
+ "name": "with type as success",
30
+ "options": {
31
+ "type": "success",
32
+ "text": "Email sent to example@email.com"
33
+ },
34
+ "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Success\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">Email sent to example@email.com</p></div>\n</div>",
35
+ "hidden": false
36
+ },
37
+ {
38
+ "name": "success with custom html",
39
+ "options": {
40
+ "type": "success",
41
+ "html": "<h3 class=\"govuk-notification-banner__heading\">4 files uploaded</h3><ul class=\"govuk-!-margin-0 govuk-list\"><li><a href=\"link-1\" class=\"govuk-notification-banner__link\">government-strategy.pdf</a></li><li><a href=\"link-2\" class=\"govuk-notification-banner__link\">government-strategy-v1.pdf</a></li></ul>\n"
42
+ },
43
+ "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Success\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\"><h3 class=\"govuk-notification-banner__heading\">4 files uploaded</h3><ul class=\"govuk-!-margin-0 govuk-list\"><li><a href=\"link-1\" class=\"govuk-notification-banner__link\">government-strategy.pdf</a></li><li><a href=\"link-2\" class=\"govuk-notification-banner__link\">government-strategy-v1.pdf</a></li></ul>\n</div>\n</div>",
44
+ "hidden": false
45
+ },
46
+ {
47
+ "name": "with a list",
48
+ "options": {
49
+ "html": "<h3 class=\"govuk-notification-banner__heading\">4 files uploaded</h3>\n<ul class=\"govuk-list govuk-list--bullet govuk-!-margin-bottom-0\">\n <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy.pdf</a></li>\n <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v2.pdf</a></li>\n <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v3-FINAL.pdf</a></li>\n <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v4-FINAL-v2.pdf</a></li>\n</ul>\n"
50
+ },
51
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\"><h3 class=\"govuk-notification-banner__heading\">4 files uploaded</h3>\n<ul class=\"govuk-list govuk-list--bullet govuk-!-margin-bottom-0\">\n <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy.pdf</a></li>\n <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v2.pdf</a></li>\n <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v3-FINAL.pdf</a></li>\n <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v4-FINAL-v2.pdf</a></li>\n</ul>\n</div>\n</div>",
52
+ "hidden": false
53
+ },
54
+ {
55
+ "name": "with long heading",
56
+ "options": {
57
+ "text": "This publication was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters."
58
+ },
59
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters.</p></div>\n</div>",
60
+ "hidden": false
61
+ },
62
+ {
63
+ "name": "with lots of content",
64
+ "options": {
65
+ "html": "<h3 class=\"govuk-notification-banner__heading\">\n Check if you need to apply the reverse charge to this application\n</h3> <p class=\"govuk-body\">You will have to apply the <a href=\"#\" class=\"govuk-notification-banner__link\">reverse charge</a> if the applicant supplies any of these services:</p> <ul class=\"govuk-list govuk-list--bullet govuk-list--spaced\">\n <li>\n constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services\n </li>\n <li>\n constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours\n </li>\n</ul>\n"
66
+ },
67
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\"><h3 class=\"govuk-notification-banner__heading\">\n Check if you need to apply the reverse charge to this application\n</h3> <p class=\"govuk-body\">You will have to apply the <a href=\"#\" class=\"govuk-notification-banner__link\">reverse charge</a> if the applicant supplies any of these services:</p> <ul class=\"govuk-list govuk-list--bullet govuk-list--spaced\">\n <li>\n constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services\n </li>\n <li>\n constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours\n </li>\n</ul>\n</div>\n</div>",
68
+ "hidden": false
69
+ },
70
+ {
71
+ "name": "auto-focus disabled, with type as success",
72
+ "options": {
73
+ "type": "success",
74
+ "disableAutoFocus": true,
75
+ "text": "Email sent to example@email.com"
76
+ },
77
+ "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\" data-disable-auto-focus=\"true\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Success\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">Email sent to example@email.com</p></div>\n</div>",
78
+ "hidden": false
79
+ },
80
+ {
81
+ "name": "role=alert overridden to role=region, with type as success",
82
+ "options": {
83
+ "type": "success",
84
+ "role": "region",
85
+ "text": "Email sent to example@email.com"
86
+ },
87
+ "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Success\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">Email sent to example@email.com</p></div>\n</div>",
88
+ "hidden": false
89
+ },
90
+ {
91
+ "name": "custom tabindex",
92
+ "options": {
93
+ "type": "success",
94
+ "text": "Email sent to example@email.com",
95
+ "attributes": {
96
+ "tabindex": 2
97
+ }
98
+ },
99
+ "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\" tabindex=\"2\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Success\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">Email sent to example@email.com</p></div>\n</div>",
100
+ "hidden": false
101
+ },
102
+ {
103
+ "name": "custom title",
104
+ "options": {
105
+ "titleText": "Important information",
106
+ "text": "This publication was withdrawn on 7 March 2014."
107
+ },
108
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important information\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>",
109
+ "hidden": true
110
+ },
111
+ {
112
+ "name": "title as html",
113
+ "options": {
114
+ "titleHtml": "<span>Important information</span>",
115
+ "text": "This publication was withdrawn on 7 March 2014."
116
+ },
117
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n <span>Important information</span>\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>",
118
+ "hidden": true
119
+ },
120
+ {
121
+ "name": "title html as text",
122
+ "options": {
123
+ "titleText": "<span>Important information</span>",
124
+ "text": "This publication was withdrawn on 7 March 2014."
125
+ },
126
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n &lt;span&gt;Important information&lt;/span&gt;\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>",
127
+ "hidden": true
128
+ },
129
+ {
130
+ "name": "custom title heading level",
131
+ "options": {
132
+ "titleHeadingLevel": 3,
133
+ "text": "This publication was withdrawn on 7 March 2014."
134
+ },
135
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h3 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h3>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>",
136
+ "hidden": true
137
+ },
138
+ {
139
+ "name": "custom title id",
140
+ "options": {
141
+ "titleId": "my-id",
142
+ "text": "This publication was withdrawn on 7 March 2014."
143
+ },
144
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"my-id\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"my-id\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>",
145
+ "hidden": true
146
+ },
147
+ {
148
+ "name": "custom title id with type as success",
149
+ "options": {
150
+ "type": "success",
151
+ "titleId": "my-id",
152
+ "text": "Email sent to example@email.com"
153
+ },
154
+ "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\"\n aria-labelledby=\"my-id\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"my-id\" >\n Success\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">Email sent to example@email.com</p></div>\n</div>",
155
+ "hidden": true
156
+ },
157
+ {
158
+ "name": "custom text",
159
+ "options": {
160
+ "text": "This publication was withdrawn on 7 March 2014."
161
+ },
162
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>",
163
+ "hidden": true
164
+ },
165
+ {
166
+ "name": "html as text",
167
+ "options": {
168
+ "text": "<span>This publication was withdrawn on 7 March 2014.</span>"
169
+ },
170
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">&lt;span&gt;This publication was withdrawn on 7 March 2014.&lt;/span&gt;</p></div>\n</div>",
171
+ "hidden": true
172
+ },
173
+ {
174
+ "name": "custom role",
175
+ "options": {
176
+ "role": "banner",
177
+ "text": "This publication was withdrawn on 7 March 2014."
178
+ },
179
+ "html": "<div class=\"govuk-notification-banner\" role=\"banner\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>",
180
+ "hidden": true
181
+ },
182
+ {
183
+ "name": "classes",
184
+ "options": {
185
+ "text": "This publication was withdrawn on 7 March 2014.",
186
+ "classes": "app-my-class"
187
+ },
188
+ "html": "<div class=\"govuk-notification-banner app-my-class\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>",
189
+ "hidden": true
190
+ },
191
+ {
192
+ "name": "attributes",
193
+ "options": {
194
+ "text": "This publication was withdrawn on 7 March 2014.",
195
+ "attributes": {
196
+ "my-attribute": "value"
197
+ }
198
+ },
199
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\" my-attribute=\"value\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>",
200
+ "hidden": true
201
+ },
202
+ {
203
+ "name": "with invalid type",
204
+ "options": {
205
+ "type": "some-type",
206
+ "text": "This publication was withdrawn on 7 March 2014."
207
+ },
208
+ "html": "<div class=\"govuk-notification-banner\" role=\"region\"\n aria-labelledby=\"govuk-notification-banner-title\"\n data-module=\"govuk-notification-banner\">\n <div class=\"govuk-notification-banner__header\">\n <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\" >\n Important\n </h2>\n </div>\n <div class=\"govuk-notification-banner__content\">\n <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>",
209
+ "hidden": true
210
+ }
211
+ ]
212
+ }