From 3dec75c088222782002a83498d029424a82445b7 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 26 Nov 2020 17:05:10 -0800
Subject: [PATCH] docs(ui-shell): document transition prop in Header app
 switcher example

---
 docs/src/pages/components/UIShell.svx         |  4 +++
 .../framed/UIShell/HeaderSwitcher.svelte      | 31 +++++++++++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/UIShell.svx b/docs/src/pages/components/UIShell.svx
index 33a18b98..45e4bade 100644
--- a/docs/src/pages/components/UIShell.svx
+++ b/docs/src/pages/components/UIShell.svx
@@ -32,6 +32,10 @@ components: ["Header",
 
 ### Header with app switcher
 
+The `HeaderAction` component uses the [transition:slide API](https://svelte.dev/docs#slide); you can customize the transition duration, delay, and easing with the `transition` prop.
+
+You can disable the `transition` by setting it to `false`.
+
 <FileSource src="/framed/UIShell/HeaderSwitcher" />
 
 ### Header with global search
diff --git a/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte b/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
index 1ab25e10..d974ff1c 100644
--- a/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
@@ -16,10 +16,28 @@
     Grid,
     Row,
     Column,
+    TileGroup,
+    RadioTile,
   } from "carbon-components-svelte";
+  import { expoIn } from "svelte/easing";
 
   let isSideNavOpen = false;
   let isOpen = false;
+  let selected = "0";
+  let transitions = {
+    "0": {
+      text: "Default (duration: 200ms)",
+      value: { duration: 200 },
+    },
+    "1": {
+      text: "Custom (duration: 600ms, delay: 50ms, easing: expoIn)",
+      value: { duration: 600, delay: 50, easing: expoIn },
+    },
+    "2": {
+      text: "Disabled",
+      value: false,
+    },
+  };
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
@@ -27,7 +45,7 @@
     <SkipToContent />
   </div>
   <HeaderUtilities>
-    <HeaderAction bind:isOpen>
+    <HeaderAction bind:isOpen transition="{transitions[selected].value}">
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
         <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
@@ -59,7 +77,16 @@
   <Grid>
     <Row>
       <Column>
-        <h1>Welcome</h1>
+        <h1>HeaderSwitcher</h1>
+        <p>
+          Select a transition option below and click on the App Switcher icon in
+          the top right.
+        </p>
+        <TileGroup legend="App switcher transitions" bind:selected>
+          {#each Object.keys(transitions) as key}
+            <RadioTile value="{key}">{transitions[key].text}</RadioTile>
+          {/each}
+        </TileGroup>
       </Column>
     </Row>
   </Grid>