Merge pull request #2042 from alphagov/notification-banner-max-width

Wrap notification banner content at 2/3 grid width

CHANGELOG.md

@@ -8,6 +8,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests:
 
 - [#2035: Fix hairline gap between notification banner header and outer border on high resolution screens in Chrome/Edge (Blink)](https://github.com/alphagov/govuk-frontend/pull/2035)
 - [#2036: Explicitly set the text colour for notification banner content, rather than using the user-agent default text colour](https://github.com/alphagov/govuk-frontend/pull/2036)
+- [#2042: Wrap notification banner content at 2/3 grid width](https://github.com/alphagov/govuk-frontend/pull/2042)
 
 ## 3.10.0 (Feature release)
 

src/govuk/components/notification-banner/_index.scss

@@ -34,13 +34,29 @@
   }
 
   .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: 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 {

src/govuk/components/notification-banner/notification-banner.yaml

@@ -78,6 +78,24 @@ examples:
           <li><a href="#" class="govuk-notification-banner__link">government-strategy-v3-FINAL.pdf</a></li>
           <li><a href="#" class="govuk-notification-banner__link">government-strategy-v4-FINAL-v2.pdf</a></li>
       </ul>
+- name: with long heading
+  data:
+    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.
+- name: with lots of content
+  data:
+    html: >
+      <h3 class="govuk-notification-banner__heading">
+        Check if you need to apply the reverse charge to this application
+      </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">
+        <li>
+          constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services
+        </li>
+        <li>
+          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
+        </li>
+      </ul>
 - name: auto-focus disabled, with type as success
   data:
     type: success