govuk_publishing_components 23.12.2 → 23.15.0

data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json

@@ -6,44 +6,53 @@
             "options": {
                 "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
             },
-            "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>"
+            "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>",
+            "hidden": false
         },
         {
             "name": "with html",
             "options": {
                 "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"
             },
-            "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>"
+            "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>",
+            "hidden": false
         },
         {
             "name": "classes",
             "options": {
-                "classes": "app-inset-text--custom-modifier"
+                "classes": "app-inset-text--custom-modifier",
+                "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
             },
-            "html": "<div class=\"govuk-inset-text app-inset-text--custom-modifier\">\n  \n</div>"
+            "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>",
+            "hidden": true
         },
         {
             "name": "id",
             "options": {
-                "id": "my-inset-text"
+                "id": "my-inset-text",
+                "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
             },
-            "html": "<div id=\"my-inset-text\" class=\"govuk-inset-text\">\n  \n</div>"
+            "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>",
+            "hidden": true
         },
         {
             "name": "html as text",
             "options": {
                 "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."
             },
-            "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>"
+            "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>",
+            "hidden": true
         },
         {
             "name": "attributes",
             "options": {
+                "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.",
                 "attributes": {
                     "data-attribute": "my data value"
                 }
             },
-            "html": "<div class=\"govuk-inset-text\" data-attribute=\"my data value\">\n  \n</div>"
+            "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>",
+            "hidden": true
         }
     ]
 }

data/node_modules/govuk-frontend/govuk/components/label/fixtures.json

@@ -6,7 +6,8 @@
             "options": {
                 "text": "National Insurance number"
             },
-            "html": "<label class=\"govuk-label\">\n  National Insurance number\n</label>"
+            "html": "<label class=\"govuk-label\">\n  National Insurance number\n</label>",
+            "hidden": false
         },
         {
             "name": "with bold text",
@@ -14,7 +15,8 @@
                 "classes": "govuk-label--s",
                 "text": "National Insurance number"
             },
-            "html": "<label class=\"govuk-label govuk-label--s\">\n  National Insurance number\n</label>"
+            "html": "<label class=\"govuk-label govuk-label--s\">\n  National Insurance number\n</label>",
+            "hidden": false
         },
         {
             "name": "as page heading",
@@ -23,12 +25,14 @@
                 "classes": "govuk-label--xl",
                 "isPageHeading": true
             },
-            "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label govuk-label--xl\">\n    National Insurance number\n  </label>\n  </h1>"
+            "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label govuk-label--xl\">\n    National Insurance number\n  </label>\n  </h1>",
+            "hidden": false
         },
         {
             "name": "empty",
             "options": {},
-            "html": ""
+            "html": "",
+            "hidden": true
         },
         {
             "name": "classes",
@@ -36,21 +40,24 @@
                 "text": "National Insurance number",
                 "classes": "extra-class one-more-class"
             },
-            "html": "<label class=\"govuk-label extra-class one-more-class\">\n  National Insurance number\n</label>"
+            "html": "<label class=\"govuk-label extra-class one-more-class\">\n  National Insurance number\n</label>",
+            "hidden": true
         },
         {
             "name": "html as text",
             "options": {
                 "text": "National Insurance number, <em>NINO</em>"
             },
-            "html": "<label class=\"govuk-label\">\n  National Insurance number, &lt;em&gt;NINO&lt;/em&gt;\n</label>"
+            "html": "<label class=\"govuk-label\">\n  National Insurance number, &lt;em&gt;NINO&lt;/em&gt;\n</label>",
+            "hidden": true
         },
         {
             "name": "html",
             "options": {
                 "html": "National Insurance number <em>NINO</em>"
             },
-            "html": "<label class=\"govuk-label\">\n  National Insurance number <em>NINO</em>\n</label>"
+            "html": "<label class=\"govuk-label\">\n  National Insurance number <em>NINO</em>\n</label>",
+            "hidden": true
         },
         {
             "name": "for",
@@ -58,18 +65,20 @@
                 "for": "#dummy-input",
                 "text": "National Insurance number"
             },
-            "html": "<label class=\"govuk-label\" for=\"#dummy-input\">\n  National Insurance number\n</label>"
+            "html": "<label class=\"govuk-label\" for=\"#dummy-input\">\n  National Insurance number\n</label>",
+            "hidden": true
         },
         {
             "name": "attributes",
             "options": {
                 "text": "National Insurance number",
                 "attributes": {
-                    "first-attribute": "true",
-                    "second-attribute": "false"
+                    "first-attribute": "foo",
+                    "second-attribute": "bar"
                 }
             },
-            "html": "<label class=\"govuk-label\" first-attribute=\"true\" second-attribute=\"false\">\n  National Insurance number\n</label>"
+            "html": "<label class=\"govuk-label\" first-attribute=\"foo\" second-attribute=\"bar\">\n  National Insurance number\n</label>",
+            "hidden": true
         }
     ]
 }

data/node_modules/govuk-frontend/govuk/components/label/macro-options.json

@@ -14,7 +14,7 @@
     {
         "name": "for",
         "type": "string",
-        "required": true,
+        "required": false,
         "description": "The value of the for attribute, the id of the input the label is associated with."
     },
     {

data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md

@@ -0,0 +1,15 @@
+# Notification banner
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+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).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/notification-banner/#options-notification-banner-example) for details.

data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss

@@ -0,0 +1,89 @@
+@include govuk-exports("govuk/component/notification-banner") {
+  .govuk-notification-banner {
+    @include govuk-font($size: 19);
+    @include govuk-responsive-margin(8, "bottom");
+
+    border: $govuk-border-width solid $govuk-brand-colour;
+
+    background-color: $govuk-brand-colour;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+    }
+  }
+
+  .govuk-notification-banner__header {
+    padding: 2px govuk-spacing(3) govuk-spacing(1);
+
+    // Ensures the notification header appears separate to the notification body text in high contrast mode
+    border-bottom: 1px solid transparent;
+
+    @include govuk-media-query($from: tablet) {
+      padding: 2px govuk-spacing(4) govuk-spacing(1);
+    }
+  }
+
+  .govuk-notification-banner__title {
+    @include govuk-font($size: 19, $weight: bold);
+
+    margin: 0;
+
+    padding: 0;
+
+    color: govuk-colour("white");
+  }
+
+  .govuk-notification-banner__content {
+    $padding-tablet: govuk-spacing(4);
+    @include govuk-text-colour;
+    padding: govuk-spacing(3);
+
+    background-color: $govuk-body-background-colour;
+
+    @include govuk-media-query($from: tablet) {
+      padding: $padding-tablet;
+    }
+
+    // Wrap content at the same place that a 2/3 grid column ends, to maintain
+    // shorter line-lengths when the notification banner is full width
+    > * {
+      // When elements have their own padding (like lists), include the padding
+      // in the max-width calculation
+      box-sizing: border-box;
+
+      // Calculate the internal width of a two-thirds column...
+      $two-col-width: ($govuk-page-width * 2 / 3) - ($govuk-gutter * 1 / 3);
+
+      // ...and then factor in the left border and padding
+      $banner-exterior: ($padding-tablet + $govuk-border-width);
+      max-width: $two-col-width - $banner-exterior;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-notification-banner__heading {
+    @include govuk-font($size: 24, $weight: bold);
+
+    margin: 0 0 govuk-spacing(3) 0;
+
+    padding: 0;
+  }
+
+  .govuk-notification-banner__link {
+    @include govuk-link-common;
+    @include govuk-link-style-no-visited-state;
+  }
+
+  .govuk-notification-banner--success {
+    border-color: $govuk-success-colour;
+
+    background-color: $govuk-success-colour;
+
+    .govuk-notification-banner__link {
+      @include govuk-link-style-success;
+    }
+  }
+}

data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json

@@ -0,0 +1,212 @@
+{
+    "component": "notification-banner",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "text": "This publication was withdrawn on 7 March 2014."
+            },
+            "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>",
+            "hidden": false
+        },
+        {
+            "name": "paragraph as html heading",
+            "options": {
+                "html": "<p class=\"govuk-notification-banner__heading\">You have 9 days to send a response.</p>"
+            },
+            "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>",
+            "hidden": false
+        },
+        {
+            "name": "with text as html",
+            "options": {
+                "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"
+            },
+            "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>",
+            "hidden": false
+        },
+        {
+            "name": "with type as success",
+            "options": {
+                "type": "success",
+                "text": "Email sent to example@email.com"
+            },
+            "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>",
+            "hidden": false
+        },
+        {
+            "name": "success with custom html",
+            "options": {
+                "type": "success",
+                "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"
+            },
+            "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>",
+            "hidden": false
+        },
+        {
+            "name": "with a list",
+            "options": {
+                "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"
+            },
+            "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>",
+            "hidden": false
+        },
+        {
+            "name": "with long heading",
+            "options": {
+                "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."
+            },
+            "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>",
+            "hidden": false
+        },
+        {
+            "name": "with lots of content",
+            "options": {
+                "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"
+            },
+            "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>",
+            "hidden": false
+        },
+        {
+            "name": "auto-focus disabled, with type as success",
+            "options": {
+                "type": "success",
+                "disableAutoFocus": true,
+                "text": "Email sent to example@email.com"
+            },
+            "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>",
+            "hidden": false
+        },
+        {
+            "name": "role=alert overridden to role=region, with type as success",
+            "options": {
+                "type": "success",
+                "role": "region",
+                "text": "Email sent to example@email.com"
+            },
+            "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>",
+            "hidden": false
+        },
+        {
+            "name": "custom tabindex",
+            "options": {
+                "type": "success",
+                "text": "Email sent to example@email.com",
+                "attributes": {
+                    "tabindex": 2
+                }
+            },
+            "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>",
+            "hidden": false
+        },
+        {
+            "name": "custom title",
+            "options": {
+                "titleText": "Important information",
+                "text": "This publication was withdrawn on 7 March 2014."
+            },
+            "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>",
+            "hidden": true
+        },
+        {
+            "name": "title as html",
+            "options": {
+                "titleHtml": "<span>Important information</span>",
+                "text": "This publication was withdrawn on 7 March 2014."
+            },
+            "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>",
+            "hidden": true
+        },
+        {
+            "name": "title html as text",
+            "options": {
+                "titleText": "<span>Important information</span>",
+                "text": "This publication was withdrawn on 7 March 2014."
+            },
+            "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>",
+            "hidden": true
+        },
+        {
+            "name": "custom title heading level",
+            "options": {
+                "titleHeadingLevel": 3,
+                "text": "This publication was withdrawn on 7 March 2014."
+            },
+            "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>",
+            "hidden": true
+        },
+        {
+            "name": "custom title id",
+            "options": {
+                "titleId": "my-id",
+                "text": "This publication was withdrawn on 7 March 2014."
+            },
+            "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>",
+            "hidden": true
+        },
+        {
+            "name": "custom title id with type as success",
+            "options": {
+                "type": "success",
+                "titleId": "my-id",
+                "text": "Email sent to example@email.com"
+            },
+            "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>",
+            "hidden": true
+        },
+        {
+            "name": "custom text",
+            "options": {
+                "text": "This publication was withdrawn on 7 March 2014."
+            },
+            "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>",
+            "hidden": true
+        },
+        {
+            "name": "html as text",
+            "options": {
+                "text": "<span>This publication was withdrawn on 7 March 2014.</span>"
+            },
+            "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>",
+            "hidden": true
+        },
+        {
+            "name": "custom role",
+            "options": {
+                "role": "banner",
+                "text": "This publication was withdrawn on 7 March 2014."
+            },
+            "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>",
+            "hidden": true
+        },
+        {
+            "name": "classes",
+            "options": {
+                "text": "This publication was withdrawn on 7 March 2014.",
+                "classes": "app-my-class"
+            },
+            "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>",
+            "hidden": true
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "text": "This publication was withdrawn on 7 March 2014.",
+                "attributes": {
+                    "my-attribute": "value"
+                }
+            },
+            "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>",
+            "hidden": true
+        },
+        {
+            "name": "with invalid type",
+            "options": {
+                "type": "some-type",
+                "text": "This publication was withdrawn on 7 March 2014."
+            },
+            "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>",
+            "hidden": true
+        }
+    ]
+}