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

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> <!DOCTYPE html>
<html lang="en"> <html lang="en" theme="white">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" /> <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)"> <p style="margin-bottom: var(--cds-layout-02)">
Source code: Source code:
<OutboundLink inline href="{source}"> <OutboundLink size="lg" inline href="{source}">
{component.filePath} {component.filePath}
</OutboundLink> </OutboundLink>
</p> </p>

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

@ -79,6 +79,11 @@
> >
Carbon Charts Svelte Carbon Charts Svelte
</HeaderPanelLink> </HeaderPanelLink>
<HeaderPanelLink
href="https://github.com/IBM/carbon-preprocess-svelte"
>
Carbon Preprocess Svelte
</HeaderPanelLink>
<HeaderPanelDivider>Resources</HeaderPanelDivider> <HeaderPanelDivider>Resources</HeaderPanelDivider>
<HeaderPanelLink href="https://www.carbondesignsystem.com/"> <HeaderPanelLink href="https://www.carbondesignsystem.com/">
Carbon Design System 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). 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) ### Default (single-line)
@ -48,7 +48,7 @@ In this example, we use the open source module [clipboard-copy](https://github.c
### Preventing copy functionality ### 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={() => {}} /> <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). 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 ### Default
@ -27,6 +27,6 @@ In this example, we use the open source module [clipboard-copy](https://github.c
### Preventing copy functionality ### 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={() => {}} /> <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"; import Preview from "../../components/Preview.svelte";
</script> </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> <InlineNotification svx-ignore title="Warning:" kind="warning" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">

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

@ -52,9 +52,13 @@
<Column> <Column>
<h3>Install</h3> <h3>Install</h3>
<h4>Installing with yarn:</h4> <h4>Installing with yarn:</h4>
<Row noGutter>
<CodeSnippet code="{installYarn}" /> <CodeSnippet code="{installYarn}" />
</Row>
<h4>Using npm:</h4> <h4>Using npm:</h4>
<Row noGutter>
<CodeSnippet code="{installNpm}" /> <CodeSnippet code="{installNpm}" />
</Row>
</Column> </Column>
</Row> </Row>
<Row> <Row>
@ -90,6 +94,7 @@
<Row noGutter> <Row noGutter>
<Column xlg="{5}" lg="{8}" md="{4}"> <Column xlg="{5}" lg="{8}" md="{4}">
<TileCard <TileCard
borderBottom
borderRight borderRight
title="Carbon Pictograms Svelte" title="Carbon Pictograms Svelte"
subtitle="700+ pictograms" subtitle="700+ pictograms"
@ -99,6 +104,7 @@
</Column> </Column>
<Column xlg="{5}" lg="{8}" md="{4}"> <Column xlg="{5}" lg="{8}" md="{4}">
<TileCard <TileCard
borderBottom
title="Carbon Charts Svelte" title="Carbon Charts Svelte"
subtitle="20 chart types, powered by d3" subtitle="20 chart types, powered by d3"
target="_blank" target="_blank"
@ -106,5 +112,15 @@
/> />
</Column> </Column>
</Row> </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> </Grid>
</Content> </Content>

2
docs/src/store.js
View file

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