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

Merge pull request #354 from IBM/improve-docs

Browse source 
Improve docs
This commit is contained in:
Eric Liu 2020-10-22 17:37:33 -07:00 • committed by GitHub
commit b5bd56318a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 169 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/src/components/Preview.svelte
View file

@ -62,6 +62,10 @@
color: #3ddbd9; /* teal 30 */ color: #3ddbd9; /* teal 30 */
} }
.token.function {
color: #9ef0f0;
}
.token.token.language-javascript, .token.token.language-javascript,
.token.attr-value { .token.attr-value {
color: #d4bbff; /* purple 30 */ color: #d4bbff; /* purple 30 */

115
docs/src/pages/components/Accordion.svx
View file

@ -13,28 +13,30 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
### Default ### Default
<Accordion> <Accordion>
<AccordionItem title="Title 1"> <AccordionItem title="Natural Language Classifier">
Content 1 <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 2"> <AccordionItem title="Natural Language Understanding">
Content 2 Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 3"> <AccordionItem title="Language Translator">
Content 3 <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
### Chevron aligned left ### Chevron aligned left
<Accordion align="start"> <Accordion align="start">
<AccordionItem title="Title 1"> <AccordionItem title="Natural Language Classifier">
Content 1 <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 2"> <AccordionItem title="Natural Language Understanding">
Content 2 Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 3"> <AccordionItem title="Language Translator">
Content 3 <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
@ -42,84 +44,101 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
<Accordion> <Accordion>
<AccordionItem> <AccordionItem>
<h5 slot="title" style="color: red;">Custom title slot</h5> <div slot="title">
Content 1 <h5>Natural Language Classifier</h5>
<div>AI / Machine Learning</div>
</div>
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 2"> <AccordionItem>
Content 2 <div slot="title">
<h5>Natural Language Understanding</h5>
<div>AI / Machine Learning</div>
</div>
Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 3"> <AccordionItem>
Content 3 <div slot="title">
<h5>Language Translator</h5>
<div>AI / Machine Learning</div>
</div>
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
### First item open ### First item open
<Accordion> <Accordion>
<AccordionItem title="Title 1" open> <AccordionItem open title="Natural Language Classifier">
Content 1 <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 2"> <AccordionItem title="Natural Language Understanding">
Content 2 Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 3"> <AccordionItem title="Language Translator">
Content 3 <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
### Extra-large size ### Extra-large size
<Accordion size="xl"> <Accordion size="xl">
<AccordionItem title="Title 1"> <AccordionItem title="Natural Language Classifier">
Content 1 <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 2"> <AccordionItem title="Natural Language Understanding">
Content 2 Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 3"> <AccordionItem title="Language Translator">
Content 3 <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
### Small size ### Small size
<Accordion size="sm"> <Accordion size="sm">
<AccordionItem title="Title 1"> <AccordionItem title="Natural Language Classifier">
Content 1 <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 2"> <AccordionItem title="Natural Language Understanding">
Content 2 Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 3"> <AccordionItem title="Language Translator">
Content 3 <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
### Disabled ### Disabled
<Accordion disabled> <Accordion disabled>
<AccordionItem title="Title 1"> <AccordionItem title="Natural Language Classifier">
Content 1 <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 2"> <AccordionItem title="Natural Language Understanding">
Content 2 Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 3"> <AccordionItem title="Language Translator">
Content 3 <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
### Disabled (item) ### Disabled (item)
<Accordion> <Accordion>
<AccordionItem disabled title="Title 1"> <AccordionItem disabled title="Natural Language Classifier">
Content 1 <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 2"> <AccordionItem title="Natural Language Understanding">
Content 2 Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
</AccordionItem> </AccordionItem>
<AccordionItem title="Title 3"> <AccordionItem title="Language Translator">
Content 3 <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>

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

@ -10,6 +10,8 @@ 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.
### Default ### Default
<Breadcrumb> <Breadcrumb>

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

@ -45,12 +45,18 @@ let comment = `
<CodeSnippet type="multi" {code} hideCopyButton /> <CodeSnippet type="multi" {code} hideCopyButton />
### Wrap text ### Wrapped text
Note that `wrapText` only applies to the `"multi"` type. `wrapText` only applies to the `"multi"` type.
<CodeSnippet wrapText type="multi" code="{comment}" /> <CodeSnippet wrapText type="multi" code="{comment}" />
### Skeleton ### Skeleton
<CodeSnippet skeleton /> The default skeleton type is `"single"`.
<CodeSnippet skeleton />
### Skeleton (multi-line)
<CodeSnippet type="multi" skeleton />

45
docs/src/pages/components/ContentSwitcher.svx
View file

@ -4,24 +4,31 @@ components: ["ContentSwitcher", "Switch"]
<script> <script>
import { ContentSwitcher, Switch } from "carbon-components-svelte"; import { ContentSwitcher, Switch } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16"; import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
### Default ### Default
<ContentSwitcher> <ContentSwitcher>
<Switch text="Switch 1" /> <Switch text="Latest news" />
<Switch text="Switch 2" /> <Switch text="Trending" />
<Switch text="Switch 3" /> </ContentSwitcher>
### Initial selected index
<ContentSwitcher selectedIndex={1}>
<Switch text="Latest news" />
<Switch text="Trending" />
<Switch text="Recommended" />
</ContentSwitcher> </ContentSwitcher>
### Light variant ### Light variant
<ContentSwitcher light> <ContentSwitcher light>
<Switch text="Switch 1" /> <Switch text="Latest news" />
<Switch text="Switch 2" /> <Switch text="Trending" />
<Switch text="Switch 3" />
</ContentSwitcher> </ContentSwitcher>
### Custom switch slot ### Custom switch slot
@ -29,31 +36,33 @@ components: ["ContentSwitcher", "Switch"]
<ContentSwitcher> <ContentSwitcher>
<Switch> <Switch>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
Third section <Add16 style="margin-left: .25rem;" /> <Bullhorn16 style="margin-right: 0.5rem;" /> Latest news
</div> </div>
</Switch>
<Switch>
<div style="display: flex; align-items: center;">
<Analytics16 style="margin-right: 0.5rem;" /> Trending
</div>
</Switch> </Switch>
<Switch text="Switch 2" />
</ContentSwitcher> </ContentSwitcher>
### Extra-large size ### Extra-large size
<ContentSwitcher size="xl"> <ContentSwitcher size="xl">
<Switch text="Switch 1" /> <Switch text="All" />
<Switch text="Switch 2" /> <Switch text="Archived" />
<Switch text="Switch 3" />
</ContentSwitcher> </ContentSwitcher>
### Small size ### Small size
<ContentSwitcher size="sm"> <ContentSwitcher size="sm">
<Switch text="Switch 1" /> <Switch text="All" />
<Switch text="Switch 2" /> <Switch text="Archived" />
<Switch text="Switch 3" />
</ContentSwitcher> </ContentSwitcher>
### Disabled ### Disabled
<ContentSwitcher> <ContentSwitcher>
<Switch text="Switch 1" disabled /> <Switch disabled text="All" />
<Switch text="Switch 2" disabled /> <Switch disabled text="Archived" />
</ContentSwitcher> </ContentSwitcher>

12
docs/src/pages/components/InlineLoading.svx
View file

@ -13,7 +13,11 @@
### Status states ### Status states
<InlineLoading status="active" /> <InlineLoading status="active" description="Submitting..." />
<InlineLoading status="inactive" /> <InlineLoading status="inactive" description="Cancelling..." />
<InlineLoading status="finished" /> <InlineLoading status="finished" description="Success" />
<InlineLoading status="error" /> <InlineLoading status="error" description="An error occurred" />
### UX example
<FileSource src="/framed/InlineLoading/InlineLoadingUx" />

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

@ -5,6 +5,8 @@
### Default ### Default
The `Search` component is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.
<Search /> <Search />
### Default value ### Default value

50
docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte Normal file
View file

@ -0,0 +1,50 @@
<script>
import { Button, ButtonSet, InlineLoading } from "carbon-components-svelte";
import { onDestroy } from "svelte";
const descriptionMap = {
active: "Submitting...",
finished: "Success",
inactive: "Cancelling...",
};
const stateMap = {
active: "finished",
inactive: "dormant",
finished: "dormant",
};
let timeout = undefined;
let state = "dormant"; // "dormant" | "active" | "finished" | "inactive"
function reset(incomingState) {
if (typeof timeout === "number") {
clearTimeout(timeout);
}
if (incomingState) {
timeout = setTimeout(() => {
state = incomingState;
}, 2000);
}
}
onDestroy(reset);
$: reset(stateMap[state]);
</script>
<ButtonSet>
<Button
kind="ghost"
disabled="{state === 'dormant' || state === 'finished'}"
on:click="{() => (state = 'inactive')}"
>
Cancel
</Button>
{#if state !== 'dormant'}
<InlineLoading status="{state}" description="{descriptionMap[state]}" />
{:else}
<Button on:click="{() => (state = 'active')}">Submit</Button>
{/if}
</ButtonSet>