mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improve documentation (#730)

Browse source 
* docs: fix "no-op" typo

* docs: add carbon-preprocess-svelte

* docs: use lg size for outbound link to source code

* docs: update copy

* docs: default to white theme

* docs(recursive-list): simplify copy

* docs(recursive-list): simplify copy

* docs: apply noGutter to installation code snippets
This commit is contained in:
Eric Liu 2021-07-08 16:30:53 -07:00 • committed by GitHub
commit 569d7021cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 32 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" theme="white">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />

2
docs/src/components/ComponentApi.svelte
View file

@ -44,7 +44,7 @@
<p style="margin-bottom: var(--cds-layout-02)">
Source code:
<OutboundLink inline href="{source}">
<OutboundLink size="lg" inline href="{source}">
{component.filePath}
</OutboundLink>
</p>

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

@ -79,6 +79,11 @@
>
Carbon Charts Svelte
</HeaderPanelLink>
<HeaderPanelLink
href="https://github.com/IBM/carbon-preprocess-svelte"
>
Carbon Preprocess Svelte
</HeaderPanelLink>
<HeaderPanelDivider>Resources</HeaderPanelDivider>
<HeaderPanelLink href="https://www.carbondesignsystem.com/">
Carbon Design System

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

@ -31,7 +31,7 @@ This component uses the native, asynchronous [Clipboard API](https://developer.m
Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3 or lower](https://caniuse.com/mdn-api_clipboard_writetext).
You can override the default copy functionality with your own copy text implementation. See [Overriding copy functionality](#overriding-copy-functionality).
You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
### Default (single-line)
@ -48,7 +48,7 @@ In this example, we use the open source module [clipboard-copy](https://github.c
### Preventing copy functionality
To prevent text from being copied entirely, pass a "noop" function to the `copy` prop.
To prevent text from being copied entirely, pass a no-op function to the `copy` prop.
<CodeSnippet code="yarn add -D carbon-components-svelte" copy={() => {}} />

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

@ -7,7 +7,7 @@ This component uses the native, asynchronous [Clipboard API](https://developer.m
Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3 or lower](https://caniuse.com/mdn-api_clipboard_writetext).
You can override the default copy functionality with your own copy text implementation. See [Overriding copy functionality](#overriding-copy-functionality).
You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
### Default
@ -27,6 +27,6 @@ In this example, we use the open source module [clipboard-copy](https://github.c
### Preventing copy functionality
To prevent text from being copied entirely, pass a "noop" function to the `copy` prop.
To prevent text from being copied entirely, pass a no-op function to the `copy` prop.
<CopyButton text="This text should not be copied" copy={() => {}} />

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

@ -3,9 +3,9 @@
import Preview from "../../components/Preview.svelte";
</script>
This component uses the [svelte:self API](https://svelte.dev/docs#svelte_self) to render the [UnorderedList](/components/UnorderedList) and [OrderedList](/components/OrderedList) components with data formatted as a tree structure. This is especially useful when the depth of the tree is unknown.
This component uses the [svelte:self API](https://svelte.dev/docs#svelte_self) to render the [UnorderedList](/components/UnorderedList) and [OrderedList](/components/OrderedList) components with tree structured data.
A child node can render text (`text`), a link (`href`), HTML content (`html`), and other `children`.
A child node can render text, a link, HTML content, and other children.
<InlineNotification svx-ignore title="Warning:" kind="warning" hideCloseButton>
<div class="body-short-01">

20
docs/src/pages/index.svelte
View file

@ -52,9 +52,13 @@
<Column>
<h3>Install</h3>
<h4>Installing with yarn:</h4>
<CodeSnippet code="{installYarn}" />
<Row noGutter>
<CodeSnippet code="{installYarn}" />
</Row>
<h4>Using npm:</h4>
<CodeSnippet code="{installNpm}" />
<Row noGutter>
<CodeSnippet code="{installNpm}" />
</Row>
</Column>
</Row>
<Row>
@ -90,6 +94,7 @@
<Row noGutter>
<Column xlg="{5}" lg="{8}" md="{4}">
<TileCard
borderBottom
borderRight
title="Carbon Pictograms Svelte"
subtitle="700+ pictograms"
@ -99,6 +104,7 @@
</Column>
<Column xlg="{5}" lg="{8}" md="{4}">
<TileCard
borderBottom
title="Carbon Charts Svelte"
subtitle="20 chart types, powered by d3"
target="_blank"
@ -106,5 +112,15 @@
/>
</Column>
</Row>
<Row noGutter>
<Column xlg="{5}" lg="{8}" md="{4}">
<TileCard
title="Carbon Preprocess Svelte"
subtitle="Collection of Carbon Svelte preprocessors"
target="_blank"
href="https://github.com/IBM/carbon-preprocess-svelte"
/>
</Column>
</Row>
</Grid>
</Content>

2
docs/src/store.js
View file

@ -1,3 +1,3 @@
import { writable } from "svelte/store";
export const theme = writable("g100");
export const theme = writable("white");