From 1454eeae192072145e2d59236ad87d9aa1bd24ca Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Thu, 12 May 2022 19:52:31 -0700
Subject: [PATCH] feat(code-snippet): dispatch "expand" and "collapse" events
 (#1291)

* test(code-snippet): simply assertions

* feat(code-snippet): dispatch "expand," "collapse" events

* Run "yarn build:docs"

* test(code-snippet): assert events
---
 COMPONENT_INDEX.md                        | 18 ++++---
 docs/src/COMPONENT_API.json               |  2 +
 src/CodeSnippet/CodeSnippet.svelte        |  6 +++
 tests/CodeSnippet.test.svelte             | 65 ++++++-----------------
 types/CodeSnippet/CodeSnippet.svelte.d.ts |  2 +
 5 files changed, 37 insertions(+), 56 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index c842cb44..192fffe4 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -563,14 +563,16 @@ None.
 
 ### Events
 
-| Event name   | Type       | Detail |
-| :----------- | :--------- | :----- |
-| click        | forwarded  | --     |
-| mouseover    | forwarded  | --     |
-| mouseenter   | forwarded  | --     |
-| mouseleave   | forwarded  | --     |
-| animationend | forwarded  | --     |
-| copy         | dispatched | --     |
+| Event name   | Type       | Detail            |
+| :----------- | :--------- | :---------------- |
+| expand       | dispatched | <code>null</code> |
+| collapse     | dispatched | <code>null</code> |
+| click        | forwarded  | --                |
+| mouseover    | forwarded  | --                |
+| mouseenter   | forwarded  | --                |
+| mouseleave   | forwarded  | --                |
+| animationend | forwarded  | --                |
+| copy         | dispatched | --                |
 
 ## `CodeSnippetSkeleton`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 7632a17f..6f71b1c1 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1158,6 +1158,8 @@
         }
       ],
       "events": [
+        { "type": "dispatched", "name": "expand", "detail": "null" },
+        { "type": "dispatched", "name": "collapse", "detail": "null" },
         {
           "type": "forwarded",
           "name": "click",
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 849a6bd6..82eb63a3 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -1,4 +1,9 @@
 <script>
+  /**
+   * @event {null} expand
+   * @event {null} collapse
+   */
+
   /**
    * Set the type of code snippet
    * @type {"single" | "inline" | "multi"}
@@ -117,6 +122,7 @@
     if (code === undefined) setShowMoreLess();
     if (code) tick().then(setShowMoreLess);
   }
+  $: if (type === "multi") dispatch(expanded ? "expand" : "collapse");
 
   onMount(() => {
     return () => clearTimeout(timeout);
diff --git a/tests/CodeSnippet.test.svelte b/tests/CodeSnippet.test.svelte
index 30904774..a695212e 100644
--- a/tests/CodeSnippet.test.svelte
+++ b/tests/CodeSnippet.test.svelte
@@ -1,52 +1,21 @@
 <script lang="ts">
-  import { CodeSnippet, InlineNotification } from "../types";
-
-  let code = `// helpers.js
-  
-export function multiply(a: number, b: number) {
-  return a * b;
-}
-
-export function divide(a: number, b: number) {
-  return a / b;
-}
-
-export function add(a: number, b: number) {
-  return a + b;
-}
-
-export function subtract(a: number, b: number) {
-  return a - b;
-}`;
-
-  let comment = `
-> \`../types\` is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
-
-> A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility.
-`;
+  import { CodeSnippet } from "../types";
 </script>
 
-<InlineNotification
-  svx-ignore
-  lowContrast
-  title="Note:"
-  subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic."
-  kind="info"
-  hideCloseButton
-/>
-
-<CodeSnippet copy="{(text) => text}"
-  >yarn add -D carbon-components-svelte</CodeSnippet
+<CodeSnippet
+  type="inline"
+  copy="{(text) => text}"
+  code=""
+  hideCopyButton
+  disabled
+  skeleton
+  wrapText
+  expanded
+  on:animationend
+  on:click
+  on:copy
+  on:expand
+  on:collapse
 >
-
-<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
-
-<CodeSnippet type="multi" code="{code}" />
-
-<CodeSnippet type="multi" code="{code}" hideCopyButton />
-
-<CodeSnippet wrapText type="multi" code="{comment}" />
-
-<CodeSnippet skeleton />
-
-<CodeSnippet type="multi" disabled skeleton />
+  yarn add -D carbon-components-svelte
+</CodeSnippet>
diff --git a/types/CodeSnippet/CodeSnippet.svelte.d.ts b/types/CodeSnippet/CodeSnippet.svelte.d.ts
index e80d5353..35f4fa5c 100644
--- a/types/CodeSnippet/CodeSnippet.svelte.d.ts
+++ b/types/CodeSnippet/CodeSnippet.svelte.d.ts
@@ -120,6 +120,8 @@ export interface CodeSnippetProps {
 export default class CodeSnippet extends SvelteComponentTyped<
   CodeSnippetProps,
   {
+    expand: CustomEvent<null>;
+    collapse: CustomEvent<null>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];