Add prototype banner warning

dfe-analytical-services · May 21, 2024 · aeeae2d · aeeae2d
1 parent 3e37f10
commit aeeae2d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git 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
@@ -0,0 +1,25 @@
+(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:[email protected]">[email protected]</a>.
+    </p>
+  </div>
+</div>
+`;
+
+  h1.insertAdjacentElement('afterend', banner);
+})();
diff --git 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";