Merge pull request #2050 from alphagov/release-3.10.1

Release v3.10.1

Author: Vanita Barrett

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.10.1 (Patch release)
+
 ### Fixes
 
 We’ve made fixes to GOV.UK Frontend in the following pull requests:

dist/VERSION.txt

@@ -1 +1 @@
-3.10.0
+3.10.1

dist/govuk-frontend-3.10.0.min.css dist/govuk-frontend-3.10.1.min.css

@@ -5,6 +5,8 @@
 
     border: $govuk-border-width solid $govuk-brand-colour;
 
+    background-color: $govuk-brand-colour;
+
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
     }
@@ -16,8 +18,6 @@
     // Ensures the notification header appears separate to the notification body text in high contrast mode
     border-bottom: 1px solid transparent;
 
-    background-color: $govuk-brand-colour;
-
     @include govuk-media-query($from: tablet) {
       padding: 2px govuk-spacing(4) govuk-spacing(1);
     }
@@ -34,10 +34,33 @@
   }
 
   .govuk-notification-banner__content {
-    margin: govuk-spacing(3);
+    $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) {
-      margin: govuk-spacing(4);
+      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;
     }
   }
 
@@ -57,9 +80,7 @@
   .govuk-notification-banner--success {
     border-color: $govuk-success-colour;
 
-    .govuk-notification-banner__header {
-      background-color: $govuk-success-colour;
-    }
+    background-color: $govuk-success-colour;
 
     .govuk-notification-banner__link {
       @include govuk-link-style-success;

dist/govuk-frontend-3.10.0.min.js dist/govuk-frontend-3.10.1.min.js

@@ -45,6 +45,20 @@
             },
             "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>"
         },
+        {
+            "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>"
+        },
+        {
+            "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>"
+        },
         {
             "name": "auto-focus disabled, with type as success",
             "options": {

dist/govuk-frontend-ie8-3.10.0.min.css dist/govuk-frontend-ie8-3.10.1.min.css

@@ -1,7 +1,7 @@
 {
   "name": "govuk-frontend",
   "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
-  "version": "3.10.0",
+  "version": "3.10.1",
   "main": "govuk/all.js",
   "sass": "govuk/all.scss",
   "engines": {