Add a class for paragraph text styling

alphagov · Oct 21, 2020 · 62b5b15 · 62b5b15
1 parent 8e410a9
commit 62b5b15
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/src/govuk/components/notification-banner/_index.scss b/src/govuk/components/notification-banner/_index.scss
@@ -34,15 +34,21 @@
   }
 
   .govuk-notification-banner__content {
-    @include govuk-font($size: 24, $weight: bold);
-
     padding: govuk-spacing(3);
 
     @include govuk-media-query($from: tablet) {
       padding: govuk-spacing(4);
     }
   }
 
+  .govuk-notification-banner__heading {
+    @include govuk-font($size: 24, $weight: bold);
+
+    margin: 0;
+
+    padding: 0;
+  }
+
   .govuk-notification-banner__link {
     @include govuk-link-common;
     @include govuk-link-style-default;

diff --git a/src/govuk/components/notification-banner/notification-banner.yaml b/src/govuk/components/notification-banner/notification-banner.yaml
@@ -52,10 +52,13 @@ examples:
 - name: default
   data:
     text: You have 9 days to send a response.
+- name: paragraph as html heading
+  data:
+    html: <p class="govuk-notification-banner__heading">You have 9 days to send a response.</p>
 - name: with text as html
   data:
     html: |
-      <h3 class="govuk-heading-m">This publication was withdrawn on 7 March 2014</h3><p>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>
+      <h3 class="govuk-heading-m">This publication was withdrawn on 7 March 2014</h3><p class="govuk-body govuk-!-margin-bottom-0">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>
 - name: with type as success
   data:
     type: success
@@ -78,7 +81,7 @@ examples:
   data:
     html: |
       <h3 class="govuk-heading-m">4 files uploaded</h3>
-      <ul class="govuk-list govuk-list--bullet">
+      <ul class="govuk-list govuk-list--bullet govuk-!-margin-bottom-0">
           <li><a href="#" class="govuk-notification-banner__link">government-strategy.pdf</a></li>
           <li><a href="#" class="govuk-notification-banner__link">government-strategy-v2.pdf</a></li>
           <li><a href="#" class="govuk-notification-banner__link">government-strategy-v3-FINAL.pdf</a></li>

diff --git a/src/govuk/components/notification-banner/template.njk b/src/govuk/components/notification-banner/template.njk
@@ -48,6 +48,11 @@
     </h{{ params.titleHeadingLevel | default(2) }}>
   </div>
   <div class="govuk-notification-banner__content">
-    {{ params.html | safe if params.html else params.text }}
+    {%- if params.html -%}
+      {{ params.html | safe }}
+    {%- elif params.text -%}
+      {# Set default style for single line content #}
+      <p class="govuk-notification-banner__heading">{{ params.text }}</p>
+    {%- endif -%}
   </div>
 </div>
diff --git a/src/govuk/components/notification-banner/template.test.js b/src/govuk/components/notification-banner/template.test.js
@@ -70,9 +70,9 @@ describe('Notification-banner', () => {
 
     it('renders content', () => {
       const $ = render('notification-banner', examples.default)
-      const $content = $('.govuk-notification-banner__content')
+      const $text = $('.govuk-notification-banner__heading')
 
-      expect($content.html().trim()).toEqual('You have 9 days to send a response.')
+      expect($text.html().trim()).toEqual('You have 9 days to send a response.')
     })
   })
 
@@ -86,9 +86,9 @@ describe('Notification-banner', () => {
 
     it('renders custom content', () => {
       const $ = render('notification-banner', examples['custom text'])
-      const $content = $('.govuk-notification-banner__content')
+      const $text = $('.govuk-notification-banner__heading')
 
-      expect($content.html().trim()).toEqual('This publication was withdrawn on 7 March 2014.')
+      expect($text.html().trim()).toEqual('This publication was withdrawn on 7 March 2014.')
     })
 
     it('renders custom heading level', () => {
@@ -187,16 +187,16 @@ describe('Notification-banner', () => {
 
     it('renders content as escaped html when passed as text', () => {
       const $ = render('notification-banner', examples['html as text'])
-      const $content = $('.govuk-notification-banner__content')
+      const $text = $('.govuk-notification-banner__heading')
 
-      expect($content.html().trim()).toEqual('&lt;span&gt;This publication was withdrawn on 7 March 2014.&lt;/span&gt;')
+      expect($text.html().trim()).toEqual('&lt;span&gt;This publication was withdrawn on 7 March 2014.&lt;/span&gt;')
     })
 
     it('renders content as html', () => {
       const $ = render('notification-banner', examples['with text as html'])
       const $contentHtml = $('.govuk-notification-banner__content')
 
-      expect($contentHtml.html().trim()).toEqual('<h3 class="govuk-heading-m">This publication was withdrawn on 7 March 2014</h3><p>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>')
+      expect($contentHtml.html().trim()).toEqual('<h3 class="govuk-heading-m">This publication was withdrawn on 7 March 2014</h3><p class="govuk-body govuk-!-margin-bottom-0">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>')
     })
   })