From f339e3651d025f14322cd4c10b73110a3996ade2 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 13 May 2022 19:15:49 -0700
Subject: [PATCH] docs(code-snippet): add "Reactive example"

---
 docs/src/pages/components/CodeSnippet.svx     | 12 ++++++++++++
 .../CodeSnippet/CodeSnippetReactive.svelte    | 19 +++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte

diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
index 0fc0d2ba..e952a2ac 100644
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@@ -60,6 +60,18 @@ To prevent text from being copied entirely, pass a no-op function to the `copy`
 
 <CodeSnippet type="multi" {code} />
 
+### Expanded by default
+
+Use the `expanded` prop to control whether the multi-line code snippet is expanded or not.
+
+<CodeSnippet type="multi" {code} expanded />
+
+### Reactive example
+
+The multi-line code snippet also dispatches "expand" and "collapse" events.
+
+<FileSource src="/framed/CodeSnippet/CodeSnippetReactive" />
+
 ### Custom copy feedback text
 
 Use the `feedback` prop to override the default copy button feedback text.
diff --git a/docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte b/docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte
new file mode 100644
index 00000000..0d307c9e
--- /dev/null
+++ b/docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte
@@ -0,0 +1,19 @@
+<script>
+  import { CodeSnippet, Button } from "carbon-components-svelte";
+
+  let expanded = false;
+</script>
+
+<Button on:click="{() => (expanded = !expanded)}">Toggle expansion</Button>
+
+<CodeSnippet
+  type="multi"
+  code="{Array.from({ length: 30 }, (_, i) => i + 1).join('\n')}"
+  bind:expanded
+  on:expand="{() => {
+    console.log('on:expand');
+  }}"
+  on:collapse="{() => {
+    console.log('on:collapse');
+  }}"
+/>