Use warning component on travel advice page

- this was previously built using styles from the warning component but not the component itself
- component could not be used because this part of the page required a heading
- component has since been upgraded to include an option to display as a heading, so can now be used

app/assets/stylesheets/application.scss

@@ -39,6 +39,7 @@ $govuk-use-legacy-palette: false;
 @import 'govuk_publishing_components/components/subscription-links';
 @import 'govuk_publishing_components/components/title';
 @import 'govuk_publishing_components/components/translation-nav';
+@import 'govuk_publishing_components/components/warning-text';
 
 // government-frontend mixins
 @import 'mixins/margins';
@@ -87,10 +88,18 @@ $govuk-use-legacy-palette: false;
   background-color: govuk-colour("light-grey");
   border: 1px solid $govuk-border-colour;
   margin-bottom: govuk-spacing(7);
-  padding: govuk-spacing(4) govuk-spacing(4) 0 govuk-spacing(9);
   position: relative;
 }
 
+.travel-advice-notice__header {
+  padding: govuk-spacing(4) govuk-spacing(4) 0 govuk-spacing(3);
+}
+
+.travel-advice-notice__content {
+  margin-top: - govuk-spacing(3);
+  padding: 0 govuk-spacing(4) 0 govuk-spacing(9);
+}
+
 .travel-advice-notice__icon {
   margin-left: govuk-spacing(3);
 }

app/views/content_items/travel_advice.html.erb

@@ -16,13 +16,19 @@
     <%= render 'govuk_publishing_components/components/title', @content_item.title_and_context %>
 
     <div class="travel-advice-notice">
-      <span class="govuk-warning-text__icon travel-advice-notice__icon" aria-hidden="true">!</span>
-      <h2 class="govuk-heading-m" aria-label="Important - COVID-19 Exceptional Travel Advisory Notice">
-        COVID-19 Exceptional Travel Advisory Notice
-      </h2>
-      <p class="govuk-body">
-        As countries respond to the COVID-19 pandemic, including travel and border restrictions, <strong>the FCO advises British nationals against all but essential international travel</strong>. Any country or area may restrict travel without notice. If you live in the UK and are currently travelling abroad, <strong>you are strongly advised to return now</strong>, where and while there are still commercial routes available. Many airlines are suspending flights and many airports are closing, preventing flights from leaving.
-      </p>
+      <div class="travel-advice-notice__header">
+        <%= render "govuk_publishing_components/components/warning_text", {
+          text: "COVID-19 Exceptional Travel Advisory Notice",
+          text_assistive: "Important",
+          large_font: true,
+          heading_level: 2
+        } %>
+      </div>
+      <div class="travel-advice-notice__content">
+        <p class="govuk-body">
+          As countries respond to the COVID-19 pandemic, including travel and border restrictions, <strong>the FCO advises British nationals against all but essential international travel</strong>. Any country or area may restrict travel without notice. If you live in the UK and are currently travelling abroad, <strong>you are strongly advised to return now</strong>, where and while there are still commercial routes available. Many airlines are suspending flights and many airports are closing, preventing flights from leaving.
+        </p>
+      </div>
     </div>
 
     <aside class="part-navigation-container" role="complementary">