From 027b998c4d7ca7d42911f8aea7d5f291fd7a9e67 Mon Sep 17 00:00:00 2001
From: Nicholas Tsim <nicholastsim@gmail.com>
Date: Tue, 21 May 2024 17:43:06 +0100
Subject: [PATCH] Add prototype banner warning

---
 source/javascripts/application.js      |  1 +
 source/javascripts/prototype-banner.js | 24 ++++++++++++++++++++++++
 source/stylesheets/screen.css.scss     |  1 +
 3 files changed, 26 insertions(+)
 create mode 100644 source/javascripts/prototype-banner.js

diff --git a/source/javascripts/application.js b/source/javascripts/application.js
index 3c7f6ab..4fa8ab7 100644
--- a/source/javascripts/application.js
+++ b/source/javascripts/application.js
@@ -1,2 +1,3 @@
 //= require govuk_tech_docs
 //= require ./copy.js
+//= require ./prototype-banner.js
diff --git a/source/javascripts/prototype-banner.js b/source/javascripts/prototype-banner.js
new file mode 100644
index 0000000..c8f57d0
--- /dev/null
+++ b/source/javascripts/prototype-banner.js
@@ -0,0 +1,24 @@
+(function () {
+  const h1 = document.querySelector('h1');
+
+  const banner = document.createElement('div');
+
+  banner.innerHTML =
+'<div class="govuk-notification-banner" role="region" aria-labelledby="prototype-banner-title">' +
+  '<div class="govuk-notification-banner__header">' +
+    '<h2 class="govuk-notification-banner__title" id="prototype-banner-title">' +
+      'Warning' +
+    '</h2>' +
+  '</div>' +
+  '<div class="govuk-notification-banner__content">' +
+    '<p class="govuk-notification-banner__heading">' +
+      'This documentation is under development and should not be used.' +
+    '</p>' +
+    '<p>If you\'re interested in using the API in the future, please contact ' +
+      '<a href="mailto:explore.statistics@education.gov.uk">explore.statistics@education.gov.uk</a>.' +
+    '</p>' +
+  '</div>' +
+'</div>';
+
+  h1.insertAdjacentElement('afterend', banner);
+})();
diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
index 7a86dd4..e39d4a7 100644
--- a/source/stylesheets/screen.css.scss
+++ b/source/stylesheets/screen.css.scss
@@ -1,4 +1,5 @@
 @import "govuk_tech_docs";
+@import "govuk/components/notification-banner/index";
 @import "govuk/components/tabs/index";
 
 @import "./app";