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
This commit is contained in:
metonym 2022-05-12 19:52:31 -07:00 committed by GitHub
commit 1454eeae19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 56 deletions

View file

@ -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>