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

@@ -563,14 +563,16 @@ None.
 
 ### Events
 
-| Event name   | Type       | Detail |
+| Event name   | Type       | Detail            |
-| :----------- | :--------- | :----- |
+| :----------- | :--------- | :---------------- |
-| click        | forwarded  | --     |
+| expand       | dispatched | <code>null</code> |
-| mouseover    | forwarded  | --     |
+| collapse     | dispatched | <code>null</code> |
-| mouseenter   | forwarded  | --     |
+| click        | forwarded  | --                |
-| mouseleave   | forwarded  | --     |
+| mouseover    | forwarded  | --                |
-| animationend | forwarded  | --     |
+| mouseenter   | forwarded  | --                |
-| copy         | dispatched | --     |
+| mouseleave   | forwarded  | --                |
+| animationend | forwarded  | --                |
+| copy         | dispatched | --                |
 
 ## `CodeSnippetSkeleton`
 

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";
+  import { CodeSnippet } 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.
-`;
 </script>
 
-<InlineNotification
+<CodeSnippet
-  svx-ignore
+  type="inline"
-  lowContrast
+  copy="{(text) => text}"
-  title="Note:"
+  code=""
-  subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic."
+  hideCopyButton
-  kind="info"
+  disabled
-  hideCloseButton
+  skeleton
-/>
+  wrapText
-
+  expanded
-<CodeSnippet copy="{(text) => text}"
+  on:animationend
-  >yarn add -D carbon-components-svelte</CodeSnippet
+  on:click
+  on:copy
+  on:expand
+  on:collapse
 >
-
+  yarn add -D carbon-components-svelte
-<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
+</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 />

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