From d1ac1f2e2791195397c1da47c397e896ffb8bef1 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 16 Oct 2020 11:06:20 -0700
Subject: [PATCH] docs: add banners for unreleased, unstable components

---
 docs/src/layouts/ComponentLayout.svelte | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 96b75171..a30b69d5 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -7,6 +7,7 @@
     Button,
     Select,
     SelectItem,
+    InlineNotification,
   } from "carbon-components-svelte";
   import Code16 from "carbon-icons-svelte/lib/Code16";
   import { page, metatags } from "@sveltech/routify";
@@ -15,6 +16,8 @@
 
   export let component = $page.title;
   export let source = "";
+  export let unreleased = false;
+  export let unstable = false;
 
   metatags.title = $page.title;
 
@@ -118,6 +121,24 @@
             Source code
           </Button>
         </div>
+        {#if unreleased}
+          <InlineNotification
+            lowContrast
+            kind="info"
+            title="Unreleased"
+            subtitle="This component has not been released yet."
+            hideCloseButton
+          />
+        {/if}
+        {#if unstable}
+          <InlineNotification
+            lowContrast
+            kind="warning"
+            title="Unstable component"
+            subtitle="Expect the API of this component to change. Use at your own risk."
+            hideCloseButton
+          />
+        {/if}
       </Column>
     </Row>