Merge pull request #486 from adobe/deprecation-banner

feat: deprecation banner

blocks/deprecation/deprecation.css

@@ -0,0 +1,15 @@
+.deprecation {
+  padding: 10px 16px;
+  margin-bottom: 16px;
+  background-color: #d31510;
+  color: #fff;
+  border-radius: var(--image-border-radius-l);
+  font-size: var(--type-body-s-size);
+  line-height: var(--type-body-s-lh);
+}
+
+.deprecation .header {
+  font-weight: 700;
+  font-size: var(--type-body-m-size);
+  text-transform: uppercase;
+}

blocks/deprecation/deprecation.js

@@ -0,0 +1,6 @@
+export default function decorate(block) {
+  const header = document.createElement('div');
+  header.className = 'header';
+  header.textContent = 'Deprecation notice';
+  block.prepend(header);
+}

scripts/scripts.js

@@ -623,6 +623,20 @@ async function loadEager(doc) {
     }
   }
 
+  // deprecation banner
+  const deprecation = getMetadata('deprecation');
+  if (deprecation) {
+    const deprecationBanner = buildBlock('deprecation', deprecation);
+    const h1 = document.querySelector('h1');
+    if (h1) {
+      // insert above title
+      h1.parentElement.insertBefore(deprecationBanner, h1);
+    } else {
+      // insert at top of page
+      document.querySelector('main > div').append(deprecationBanner);
+    }
+  }
+
   const main = doc.querySelector('main');
   if (main) {
     decorateMain(main);