From ced967368114c42e1f0a23616cbfc8d5fb62926b Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 18 Feb 2024 19:36:46 -0800
Subject: [PATCH] docs(toast-notification): add "Autoclose" example

---
 .../pages/components/ToastNotification.svx    |  8 +++++
 .../ToastNotificationTimeout.svelte           | 32 +++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 docs/src/pages/framed/ToastNotification/ToastNotificationTimeout.svelte

diff --git a/docs/src/pages/components/ToastNotification.svx b/docs/src/pages/components/ToastNotification.svx
index 571b6289..d924de80 100644
--- a/docs/src/pages/components/ToastNotification.svx
+++ b/docs/src/pages/components/ToastNotification.svx
@@ -14,6 +14,14 @@ See also: [InlineNotification](InlineNotification)
 
 <ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
 
+## Autoclose
+
+By default, `ToastNotification` does not automatically close.
+
+Specify the `timeout` prop to automatically close the notification after a specified duration (in milliseconds).
+
+<FileSource src="/framed/ToastNotification/ToastNotificationTimeout" />
+
 ## Prevent default close behavior
 
 `ToastNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
diff --git a/docs/src/pages/framed/ToastNotification/ToastNotificationTimeout.svelte b/docs/src/pages/framed/ToastNotification/ToastNotificationTimeout.svelte
new file mode 100644
index 00000000..547ba581
--- /dev/null
+++ b/docs/src/pages/framed/ToastNotification/ToastNotificationTimeout.svelte
@@ -0,0 +1,32 @@
+<script>
+  import { Button, ToastNotification } from "carbon-components-svelte";
+  import { fade } from "svelte/transition";
+
+  let timeout = undefined;
+  $: showNotification = timeout !== undefined;
+</script>
+
+<Button
+  disabled="{showNotification}"
+  on:click="{() => {
+    timeout = 3_000; // 3 seconds
+  }}"
+>
+  Show notification
+</Button>
+
+{#if showNotification}
+  <div transition:fade>
+    <ToastNotification
+      timeout="{timeout}"
+      kind="success"
+      title="Success"
+      subtitle="This notification will autoclose in {timeout.toLocaleString()} ms."
+      caption="{new Date().toLocaleString()}"
+      on:close="{(e) => {
+        timeout = undefined;
+        console.log(e.detail.timeout); // true if closed via timeout
+      }}"
+    />
+  </div>
+{/if}