From 62cf3be27851c55dd946001b5480446b8a17a892 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 1 Aug 2020 15:46:28 -0700
Subject: [PATCH] feat(ui-shell): add Header platform name slot

---
 src/UIShell/GlobalHeader/Header.svelte |  3 ++-
 src/UIShell/UIShell.Story.svelte       | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte
index 4275e87c..897b3905 100644
--- a/src/UIShell/GlobalHeader/Header.svelte
+++ b/src/UIShell/GlobalHeader/Header.svelte
@@ -25,6 +25,7 @@
 
   /**
    * Specify the platform name
+   * Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>)
    * @type {string} [platformName]
    */
   export let platformName = undefined;
@@ -50,7 +51,7 @@
       <span class:bx--header__name--prefix={true}>{company}</span>
       &nbsp;
     {/if}
-    {platformName}
+    <slot name="platform">{platformName}</slot>
   </a>
   <slot />
 </header>
diff --git a/src/UIShell/UIShell.Story.svelte b/src/UIShell/UIShell.Story.svelte
index e09971b3..b8147348 100644
--- a/src/UIShell/UIShell.Story.svelte
+++ b/src/UIShell/UIShell.Story.svelte
@@ -113,9 +113,27 @@
   let isOpen = !true;
 </script>
 
+<style>
+  .platform-name {
+    display: flex;
+    align-items: baseline;
+  }
+
+  .platform-name small {
+    margin-left: 0.5rem;
+    font-size: 0.625rem;
+    font-weight: 400;
+    color: #a8a8a8;
+  }
+</style>
+
 {#if story === 'header'}
   <Header {...$$props} company={undefined}>
     <SkipToContent />
+    <span slot="platform" class="platform-name">
+      Platform Name
+      <small>1.12.2</small>
+    </span>
   </Header>
 {:else if story === 'sidenav'}
   <SideNav isOpen={true}>