Add styles for component

app/assets/config/govuk_publishing_components_sassc-rails_manifest.js

@@ -77,6 +77,7 @@
 //= link govuk_publishing_components/components/_signup-link.css
 //= link govuk_publishing_components/components/_single-page-notification-button.css
 //= link govuk_publishing_components/components/_skip-link.css
+//= link govuk_publishing_components/components/_status-page-alert.css
 //= link govuk_publishing_components/components/_step-by-step-nav-header.css
 //= link govuk_publishing_components/components/_step-by-step-nav-related.css
 //= link govuk_publishing_components/components/_step-by-step-nav.css

app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -74,6 +74,7 @@ $govuk-new-link-styles: true;
 @import "components/signup-link";
 @import "components/single-page-notification-button";
 @import "components/skip-link";
+@import "components/status-page-alert";
 @import "components/step-by-step-nav-header";
 @import "components/step-by-step-nav-related";
 @import "components/step-by-step-nav";

app/assets/stylesheets/govuk_publishing_components/components/_status-page-alert.scss

@@ -0,0 +1,19 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.gem-c-status-page-alert {
+  .alert-message {
+    @include govuk-responsive-padding(3, "top");
+
+    display: none;
+
+    p {
+      @include govuk-responsive-margin(3, "bottom");
+    }
+
+    .govuk-details__text {
+      p:last-child {
+        margin: 0;
+      }
+    }
+  }
+}

app/views/govuk_publishing_components/components/_status_page_alert.html.erb

@@ -1,4 +1,8 @@
-<div class="gem-c-status-page-alert govuk-width-container" data-module="status-page-alert">
+<%
+  add_gem_component_stylesheet("status-page-alert")
+%>
+
+<div class="gem-c-status-page-alert" data-module="status-page-alert">
   <div class="alert-message">
     <p class="govuk-body">GOV.UK status: publishing apps are working and there is no maintenance planned.</p>
   </div>