Add new component to Publishing Components

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/javascripts/govuk_publishing_components/components/status-page-alert.js

@@ -0,0 +1,97 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function StatusPageAlert ($module) {
+    this.$module = $module
+    this.items = {}
+    this.incidentCurrent = []
+    this.incidentPast = []
+    this.maintenanceCurrent = []
+    this.maintenanceFuture = []
+    this.maintenancePast = []
+    this.xmlString = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <channel>
+    <title>GOV.UK Status - Incident History</title>
+    <link>https://status.publishing.service.gov.uk</link>
+    <description>Statuspage</description>
+    <pubDate>Mon, 08 Jan 2024 17:43:10 +0000</pubDate>
+    <item>
+      <title>[maintenanceFuture] GOV.UK Publishing maintenance Tue 16 Jan 12:00-16:00 GMT (future planned maintenance)</title>
+      <description>
+&lt;p&gt;&lt;strong&gt;THIS IS A SCHEDULED EVENT Jan &lt;var data-var=&apos;date&apos;&gt;16&lt;/var&gt;, &lt;var data-var=&apos;time&apos;&gt;12:00&lt;/var&gt; - &lt;var data-var=&apos;time&apos;&gt;16:00&lt;/var&gt; GMT&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;small&gt;Jan &lt;var data-var=&apos;date&apos;&gt; 8&lt;/var&gt;, &lt;var data-var=&apos;time&apos;&gt;16:20&lt;/var&gt; GMT&lt;/small&gt;&lt;br&gt;&lt;strong&gt;Scheduled&lt;/strong&gt; - Hello,&lt;br /&gt;&lt;br /&gt;We plan to do some maintenance work on the GOV.UK Publishing applications on Tue 16 January 2024 between 12:00 and 16:00 GMT.&lt;br /&gt;&lt;br /&gt;Everything should continue to work normally throughout.&lt;br /&gt;&lt;br /&gt;However, if we encounter unforeseen difficulties then there is a chance that publishing new content or changing URLs of existing content might be delayed in taking effect until the maintenance is finished.&lt;br /&gt;&lt;br /&gt;We&apos;re letting you know so that you can plan around these times if you so wish.&lt;br /&gt;If you have highly time-sensitive content to publish at the same time as the maintenance, contact [email protected] in advance and we can reschedule. If emergency publishing is needed on the day, we’ll either roll back the changes or finish them if that will be faster.&lt;br /&gt;&lt;br /&gt;If you encounter problems during or after the maintenance, please contact GOV.​UK support as normal.&lt;br /&gt;&lt;br /&gt;You can follow updates on the GOV.UK Status Page.&lt;br /&gt;&lt;br /&gt;Best wishes,&lt;br /&gt;Chris Banks, on behalf of the GOV.UK Platform Engineering team&lt;br /&gt;&lt;br /&gt;Background information for the curious:&lt;br /&gt;&lt;br /&gt;GOV.UK has a component called Router, which has a database that keeps track of all the pages on www.gov.uk and where to fetch them when users browse the website. We need to move this database to our new Kubernetes infrastructure so that we can finally switch off the old infrastructure. This reduces our engineering costs and helps us keep GOV.UK secure and reliable.&lt;br /&gt;&lt;br /&gt;We&apos;ve designed and tested this change to be zero-impact to you as the user, but we still need to let you know about it because with these things there&apos;s always a chance of unforeseen circumstances arising in production that didn&apos;t come up during testing.&lt;/p&gt;      </description>
+      <pubDate>Tue, 16 Jan 2024 12:00:00 +0000</pubDate>
+      <maintenanceEndDate>Tue, 16 Jan 2024 16:00:00 +0000</maintenanceEndDate>
+      <link>https://status.publishing.service.gov.uk/incidents/cnntrg2j816c</link>
+      <guid>https://status.publishing.service.gov.uk/incidents/cnntrg2j816c</guid>
+    </item>
+  </channel>
+</rss>`;
+  }
+
+  StatusPageAlert.prototype.init = function () {
+    var parser = new DOMParser();
+    var xmlDoc = parser.parseFromString(this.xmlString, "text/xml");
+
+    this.items = xmlDoc.documentElement.querySelectorAll("item");
+    this.itemsCategorise()
+  }
+
+  StatusPageAlert.prototype.itemsCategorise = function() {
+    var now = new Date();
+
+    this.items.forEach((item) => {
+      // Planned maintenance
+      if (item.querySelector('maintenanceEndDate')) {
+        var pubDate = Date.parse(item.querySelector('pubDate').textContent)
+        var MaintenanceEndDate = Date.parse(item.querySelector('maintenanceEndDate').textContent)
+        var currentTime = Date.parse(now)
+
+        if (pubDate > currentTime) {
+          this.maintenanceFuture.push(item)
+        } else if (pubDate < currentTime && MaintenanceEndDate > currentTime) {
+          this.maintenanceCurrent.push(item)
+        } else {
+          this.maintenancePast.push(item)
+        }
+      // Incidents
+      } else {
+        if (item.querySelector('description').textContent.includes('<strong>Resolved</strong>')) {
+          this.incidentPast.push(item)
+        } else {
+          this.incidentCurrent.push(item)
+        }
+      }
+    })
+
+    this.addAlert()
+  }
+
+  StatusPageAlert.prototype.addAlert = function() {
+    var alertLocation = this.$module
+    var alertMessages = alertLocation.querySelectorAll('.alert-message')
+
+    if (this.maintenanceFuture.length > 0 && (this.maintenanceCurrent.length > 0 || this.incidentCurrent.length > 0)) {
+      alertMessages[3].style.display = "block"
+    } else if (this.maintenanceCurrent.length > 0 || this.incidentCurrent.length > 0) {
+      alertMessages[1].style.display = "block"
+    } else if (this.maintenanceFuture.length > 0 && this.maintenanceCurrent.length == 0 && this.incidentCurrent.length == 0) {
+      var start = new Date(this.maintenanceFuture[0].querySelector('pubDate').textContent)
+      var end = new Date(this.maintenanceFuture[0].querySelector('maintenanceEndDate').textContent)
+
+      var startDate = start.toLocaleDateString('en-GB')
+      var endDate = end.toLocaleDateString('en-GB')
+      var startTime = start.toLocaleTimeString('en-GB')
+      var endTime = end.toLocaleTimeString('en-GB')
+
+      alertMessages[2].querySelector('.startDateTime').textContent = `${startDate} at ${startTime}`
+      alertMessages[2].querySelector('.startEndTime').textContent = `${endDate} at ${endTime}`
+      alertMessages[2].style.display = "block"
+    } else {
+      alertMessages[0].style.display = "block"
+    }
+  }
+
+  Modules.StatusPageAlert = StatusPageAlert
+})(window.GOVUK.Modules)

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

@@ -0,0 +1,57 @@
+<%
+  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>
+
+  <div class="alert-message">
+    <%= render "govuk_publishing_components/components/details", {
+      title: "GOV.UK status: there’s something happening right now that may affect you."
+    } do %>
+      <p class="govuk-!-font-weight-bold">Happening now</p>
+
+      <ul>
+        <li>Some publications can't be retrieved for GOV.UK frontend applications</li>
+      </ul>
+
+      <p>To learn more visit the <a href="https://status.publishing.service.gov.uk/" target="_blank">GOV.UK status page</a> (opens in a new tab)</p>
+    <% end %>
+  </div>
+
+  <div class="alert-message">
+    <%= render "govuk_publishing_components/components/details", {
+      title: "GOV.UK status: there’s some maintenance coming up that may affect you."
+    } do %>
+      <p class="govuk-!-font-weight-bold">Happening soon</p>
+
+      <ul>
+        <li>Delayed publishing due to scheduled maintenance from <span class="startDateTime">[datetime]</span> to <span class="startEndTime">[datetime]</span></li>
+      </ul>
+
+      <p>To learn more visit the <a href="https://status.publishing.service.gov.uk/" target="_blank">GOV.UK status page</a> (opens in a new tab)</p>
+    <% end %>
+  </div>
+
+  <div class="alert-message">
+    <%= render "govuk_publishing_components/components/details", {
+      title: "GOV.UK status: there’s something happening right now that may affect you and there’s some maintenance coming up."
+    } do %>
+      <p class="govuk-!-font-weight-bold">Happening now</p>
+
+      <ul>
+        <li>Some publications can't be retrieved for GOV.UK frontend applications</li>
+      </ul>
+
+      <p class="govuk-!-font-weight-bold">Happening soon</p>
+
+      <ul>
+        <li>Delayed publishing due to scheduled maintenance from [datetime] to [datetime]</li>
+      </ul>
+
+      <p>To learn more visit the <a href="https://status.publishing.service.gov.uk/" target="_blank">GOV.UK status page</a> (opens in a new tab)</p>
+    <% end %>
+  </div>
+</div>

app/views/govuk_publishing_components/components/docs/status_page_alert.yml

@@ -0,0 +1,7 @@
+name: Status page alert (experimental)
+description: Displays an alert in a publishing app to inform users of incidents or ongoing and imminent maintenance that may effect them. 
+accessibility_criteria: |
+  - stuff
+examples:
+  default:
+    data: