mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: tweak body copy, link to CopyableCodeSnippet recipe

Browse source
This commit is contained in:
Eric Liu 2020-11-22 09:50:46 -08:00
commit f5509060d5
8 changed files with 24 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

7
docs/src/pages/_layout.svelte
View file

@ -35,6 +35,13 @@
</script> </script>
<style global> <style global>
.body-short-01 {
font-size: var(--cds-body-short-01-font-size);
font-weight: var(--cds-body-short-01-font-weight);
letter-spacing: var(--cds-body-short-01-letter-spacing);
line-height: var(--cds-body-short-01-line-height);
}
.bx--col > h1 { .bx--col > h1 {
font-size: var(--cds-display-01-font-size); font-size: var(--cds-display-01-font-size);
font-weight: var(--cds-display-01-font-weight); font-weight: var(--cds-display-01-font-weight);

2
docs/src/pages/components/Breadcrumb.svx
View file

@ -10,7 +10,7 @@ components: ["Breadcrumb", "BreadcrumbItem"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for building a reusable breadcrumbs component. See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs component.
### Default ### Default

6
docs/src/pages/components/CodeSnippet.svx
View file

@ -1,5 +1,5 @@
<script> <script>
import { CodeSnippet, InlineNotification } from "carbon-components-svelte"; import { CodeSnippet, InlineNotification, Link } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
let code = `// helpers.js let code = `// helpers.js
@ -27,7 +27,9 @@ let comment = `
` `
</script> </script>
<InlineNotification svx-ignore 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 /> <InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
</InlineNotification>
### Default (single-line) ### Default (single-line)

2
docs/src/pages/components/ComposedModal.svx
View file

@ -1,5 +1,5 @@
--- ---
components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter", "Checkbox"] components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"]
--- ---
<script> <script>

6
docs/src/pages/components/CopyButton.svx
View file

@ -1,9 +1,11 @@
<script> <script>
import { CopyButton, InlineNotification } from "carbon-components-svelte"; import { CopyButton, InlineNotification, Link } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
<InlineNotification svx-ignore 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 /> <InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
</InlineNotification>
### Default ### Default

4
docs/src/pages/components/ToggleSmall.svx
View file

@ -7,9 +7,9 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton> <InlineNotification svx-ignore title="Deprecation warning:" kind="warning" hideCloseButton>
<div> <div>
This component will be removed in version 1.0.0. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead. This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
</div> </div>
</InlineNotification> </InlineNotification>

2
docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte
View file

@ -5,4 +5,4 @@
import copy from "clipboard-copy"; import copy from "clipboard-copy";
</script> </script>
<CodeSnippet on:click="{() => copy(code)}">{code}</CodeSnippet> <CodeSnippet on:click="{() => copy(code)}" code="{code}" />

6
docs/src/pages/recipes/CopyableCodeSnippet.svx
View file

@ -6,10 +6,12 @@ layout: recipe
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) do not include logic to copy the supplied `code` text. The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) components do not include logic to copy the supplied `code` text.
You can use a third party open source module like [clipboard-copy](https://www.npmjs.com/package/clipboard-copy) that is compatible with modern web browsers.
## clipboard-copy ## clipboard-copy
This example uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy), a lightweight module designed for the web. This documentation website uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy).
<FileSource src="/framed/CopyableCodeSnippet/CopyableCodeSnippet" /> <FileSource src="/framed/CopyableCodeSnippet/CopyableCodeSnippet" />