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

@@ -564,7 +564,9 @@ None.
 ### Events
 
 | Event name   | Type       | Detail            |
-| :----------- | :--------- | :----- |
+| :----------- | :--------- | :---------------- |
+| expand       | dispatched | <code>null</code> |
+| collapse     | dispatched | <code>null</code> |
 | click        | forwarded  | --                |
 | mouseover    | forwarded  | --                |
 | mouseenter   | forwarded  | --                |

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",

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);

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>

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"];