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

docs: add new component docs

Browse source
This commit is contained in:
Eric Liu 2020-10-02 20:13:02 -07:00
commit 2008d0035f
130 changed files with 6662 additions and 3801 deletions
Download patch file Download diff file Expand all files Collapse all files

72
docs/src/pages/components/Accordion.svx Normal file
View file

@ -0,0 +1,72 @@
<script>
import {
Accordion,
AccordionItem,
} from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Accordion>
<AccordionItem title="Title 1">
Content 1
</AccordionItem>
<AccordionItem title="Title 2">
Content 2
</AccordionItem>
<AccordionItem title="Title 3">
Content 3
</AccordionItem>
</Accordion>
### Chevron aligned left
<Accordion align="start">
<AccordionItem title="Title 1">
Content 1
</AccordionItem>
<AccordionItem title="Title 2">
Content 2
</AccordionItem>
<AccordionItem title="Title 3">
Content 3
</AccordionItem>
</Accordion>
### Custom title slot
<Accordion>
<AccordionItem>
<h5 slot="title" style="color: red;">Custom title slot</h5>
Content 1
</AccordionItem>
<AccordionItem title="Title 2">
Content 2
</AccordionItem>
<AccordionItem title="Title 3">
Content 3
</AccordionItem>
</Accordion>
### First item open
<Accordion>
<AccordionItem title="Title 1" open>
Content 1
</AccordionItem>
<AccordionItem title="Title 2">
Content 2
</AccordionItem>
<AccordionItem title="Title 3">
Content 3
</AccordionItem>
</Accordion>
### Skeleton
<Accordion skeleton count={3} />
### Skeleton (closed)
<Accordion skeleton open={false} count={3} />

26
docs/src/pages/components/Breadcrumb.svx Normal file
View file

@ -0,0 +1,26 @@
<script>
import {
Breadcrumb,
BreadcrumbItem,
} from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Breadcrumb>
<BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
<BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
<BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
</Breadcrumb>
### No trailing slash
<Breadcrumb noTrailingSlash>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
</Breadcrumb>
### Skeleton
<Breadcrumb skeleton count={3} />

71
docs/src/pages/components/Button.svx Normal file
View file

@ -0,0 +1,71 @@
---
description: High-level description
---
<script>
import { Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import Preview from "../../components/Preview.svelte";
</script>
### Primary button
<Button>Primary button</Button>
### Secondary button
<Button kind="secondary">Secondary button</Button>
### Tertiary button
<Button kind="tertiary">Tertiary button</Button>
### Ghost button
<Button kind="ghost">Ghost button</Button>
### Danger button
<Button kind="danger">Danger button</Button>
### Button with icon
<Button icon={Add16}>With icon</Button>
### Icon-only button
<Button icon={Add16} hasIconOnly tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Tooltip text" />
### Link button
<Button href="#">Link button</Button>
### Custom element
<Button as let:props>
<p {...props}>Custom element</p>
</Button>
### Field button
<Button size="field">Primary</Button>
<Button size="field" kind="secondary">Secondary</Button>
<Button size="field" kind="tertiary">Tertiary</Button>
<Button size="field" kind="ghost">Ghost</Button>
<Button size="field" kind="danger">Danger</Button>
### Small button
<Button size="small">Primary</Button>
<Button size="small" kind="secondary">Secondary</Button>
<Button size="small" kind="tertiary">Tertiary</Button>
<Button size="small" kind="ghost">Ghost</Button>
<Button size="small" kind="danger">Danger</Button>
### Disabled button
<Button disabled>Disabled button</Button>
### Skeleton
<Button skeleton />

22
docs/src/pages/components/ButtonSet.svx Normal file
View file

@ -0,0 +1,22 @@
---
source: Button/ButtonSet.svelte
---
<script>
import { Button, ButtonSet } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default (juxtaposed)
<ButtonSet>
<Button kind="secondary">Cancel</Button>
<Button>Submit</Button>
</ButtonSet>
### Stacked
<ButtonSet stacked>
<Button>Login</Button>
<Button kind="ghost">Sign up</Button>
</ButtonSet>

28
docs/src/pages/components/Checkbox.svx Normal file
View file

@ -0,0 +1,28 @@
<script>
import { Checkbox } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default (unchecked)
<Checkbox labelText="Label text" />
### Checked
<Checkbox labelText="Label text" checked />
### Indeterminate
<Checkbox labelText="Label text" indeterminate />
### Hidden label
<Checkbox labelText="Label text" hideLabel />
### Disabled
<Checkbox labelText="Label text" disabled />
### Skeleton
<Checkbox skeleton />

16
docs/src/pages/components/ClickableTile.svx Normal file
View file

@ -0,0 +1,16 @@
---
source: Tile/ClickableTile.svelte
---
<script>
import { ClickableTile } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<ClickableTile href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>
### Light variant
<ClickableTile light href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>

44
docs/src/pages/components/CodeSnippet.svx Normal file
View file

@ -0,0 +1,44 @@
<script>
import { CodeSnippet, InlineNotification } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
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;
}`;
</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 />
### Default (single-line)
<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
### Inline
<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
### Multi-line
<CodeSnippet type="multi" {code} />
### Hidden copy button
<CodeSnippet type="multi" {code} hideCopyButton />
### Skeleton
<CodeSnippet skeleton />

53
docs/src/pages/components/ComboBox.svx Normal file
View file

@ -0,0 +1,53 @@
<script>
import { ComboBox } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<ComboBox titleText="Contact" placeholder="Select contact method"
items={[
{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}
]} />
### Selected index
<ComboBox titleText="Contact" placeholder="Select contact method"
selectedIndex={1}
items={[
{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}
]} />
### Extra-large size
<ComboBox titleText="Contact" placeholder="Select contact method"
size="xl"
items={[
{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}
]} />
### Small size
<ComboBox titleText="Contact" placeholder="Select contact method"
size="sm"
items={[
{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}
]} />
### Disabled
<ComboBox titleText="Contact" placeholder="Select contact method"
disabled
items={[
{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}
]} />

7
docs/src/pages/components/ComposedModal.svx Normal file
View file

@ -0,0 +1,7 @@
<script>
import Preview from "../../components/Preview.svelte";
</script>
### Composed modal
<FileSource src="/framed/Modal/ComposedModal" />

39
docs/src/pages/components/ContentSwitcher.svx Normal file
View file

@ -0,0 +1,39 @@
<script>
import { ContentSwitcher, Switch } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<ContentSwitcher>
<Switch text="Switch 1" />
<Switch text="Switch 2" />
<Switch text="Switch 3" />
</ContentSwitcher>
### Light variant
<ContentSwitcher light>
<Switch text="Switch 1" />
<Switch text="Switch 2" />
<Switch text="Switch 3" />
</ContentSwitcher>
### Custom switch slot
<ContentSwitcher>
<Switch>
<div style="display: flex; align-items: center;">
Third section <Add16 style="margin-left: .25rem;" />
</div>
</Switch>
<Switch text="Switch 2" />
</ContentSwitcher>
### Disabled
<ContentSwitcher>
<Switch text="Switch 1" disabled />
<Switch text="Switch 2" disabled />
</ContentSwitcher>

14
docs/src/pages/components/CopyButton.svx Normal file
View file

@ -0,0 +1,14 @@
<script>
import { CopyButton, InlineNotification } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</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 />
### Default
<CopyButton on:click />
### Custom feedback
<CopyButton on:click feedback="Copied to clipboard" />

346
docs/src/pages/components/DataTable.svx Normal file
View file

@ -0,0 +1,346 @@
<script>
import { DataTable, DataTableSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<DataTable
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
/>
### With title, description
<DataTable title="Load balancers" description="Your organization's active load balancers."
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
/>
### Zebra stripes
<DataTable zebra
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
/>
### Short rows
<DataTable size="short"
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
/>
### Compact rows
<DataTable size="compact"
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
/>
### Sortable
<DataTable sortable
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
/>
### Skeleton
<DataTableSkeleton />
### Skeleton with headers, row count
<DataTableSkeleton headers={["Name", "Protocol", "Port", "Rule"]} rows={10} />
### Skeleton without header, toolbar
<DataTableSkeleton showHeader={false} showToolbar={false} />

56
docs/src/pages/components/DatePicker.svx Normal file
View file

@ -0,0 +1,56 @@
<script>
import { DatePicker, DatePickerSkeleton, DatePickerInput } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default (simple)
<DatePicker>
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### Hidden label
<DatePicker>
<DatePickerInput hideLabel labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### Light variant
<DatePicker light>
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### Extra-large size
<DatePicker>
<DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### Small size
<DatePicker>
<DatePickerInput size="sm" labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### Invalid state
<DatePicker>
<DatePickerInput invalid invalidText="Invalid date" labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### Disabled state
<DatePicker>
<DatePickerInput disabled labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### Single
<DatePicker datePickerType="single">
<DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
</DatePicker>
### Skeleton
<DatePickerSkeleton />

32
docs/src/pages/components/Dropdown.svx Normal file
View file

@ -0,0 +1,32 @@
<script>
import { Dropdown, DropdownSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Dropdown titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Light variant
<Dropdown light titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Inline type
<Dropdown type="inline" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Disabled state
<Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Skeleton
<DropdownSkeleton />

29
docs/src/pages/components/ExpandableTile.svx Normal file
View file

@ -0,0 +1,29 @@
---
source: Tile/ExpandableTile.svelte
---
<script>
import { ExpandableTile } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default (unexpanded)
<ExpandableTile>
<div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>
### Expanded
<ExpandableTile expanded>
<div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>
### Light variant
<ExpandableTile light>
<div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>

32
docs/src/pages/components/FileUploader.svx Normal file
View file

@ -0,0 +1,32 @@
<script>
import { FileUploaderButton, FileUploader, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### File uploader (button-only)
<FileUploaderButton labelText="Add files" />
### File uploader
<FileUploader multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
### Item (uploading)
<FileUploaderItem name="README.md" status="uploading" />
### Item (complete)
<FileUploaderItem name="README.md" status="complete" />
### Item (invalid)
<FileUploaderItem invalid name="README.md" status="edit" />
### Drop container
<FileUploaderDropContainer labelText="Drag and drop files here or click to upload" multiple />
### Skeleton
<FileUploaderSkeleton />

19
docs/src/pages/components/FluidForm.svx Normal file
View file

@ -0,0 +1,19 @@
<script>
import { FluidForm, FormGroup, TextInput, PasswordInput, Button,} from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Fluid form
<FluidForm>
<TextInput
labelText="User name"
placeholder="Enter user name..."
required />
<PasswordInput
required
type="password"
labelText="Password"
placeholder="Enter password..."
/>
</FluidForm>

58
docs/src/pages/components/Form.svx Normal file
View file

@ -0,0 +1,58 @@
<script>
import { Form,
FormGroup,
Checkbox,
RadioButtonGroup,
RadioButton,
Select,
SelectItem,
Button,} from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Form
<Form on:submit>
<FormGroup legendText="Checkboxes">
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
<Checkbox id="checkbox-1" labelText="Checkbox Label" />
<Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
</FormGroup>
<FormGroup legendText="Radio buttons">
<RadioButtonGroup
name="radio-button-group"
selected="default-selected"
>
<RadioButton
id="radio-1"
value="standard"
labelText="Standard Radio Button"
/>
<RadioButton
id="radio-2"
value="default-selected"
labelText="Default Selected Radio Button"
/>
<RadioButton
id="radio-4"
value="disabled"
labelText="Disabled Radio Button"
disabled
/>
</RadioButtonGroup>
</FormGroup>
<FormGroup>
<Select id="select-1" labelText="Select menu" value="placeholder-item">
<SelectItem
disabled
hidden
value="placeholder-item"
text="Choose an option"
/>
<SelectItem value="option-1" text="Option 1" />
<SelectItem value="option-2" text="Option 2" />
<SelectItem value="option-3" text="Option 3" />
</Select>
</FormGroup>
<Button type="submit">Submit</Button>
</Form>

31
docs/src/pages/components/Grid.svx Normal file
View file

@ -0,0 +1,31 @@
<script>
import Preview from "../../components/Preview.svelte";
</script>
### Default
<FileSource src="/framed/Grid/Grid" />
### Full width
<FileSource src="/framed/Grid/FullWidthGrid" />
### Narrow
<FileSource src="/framed/Grid/NarrowGrid" />
### Condensed
<FileSource src="/framed/Grid/CondensedGrid" />
### Responsive
<FileSource src="/framed/Grid/ResponsiveGrid" />
### Offset columns
<FileSource src="/framed/Grid/OffsetColumns" />
### Aspect ratio columns
<FileSource src="/framed/Grid/AspectRatioColumns" />

22
docs/src/pages/components/Icon.svx Normal file
View file

@ -0,0 +1,22 @@
<script>
import { Icon } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import Add20 from "carbon-icons-svelte/lib/Add20";
import Add24 from "carbon-icons-svelte/lib/Add24";
import Add32 from "carbon-icons-svelte/lib/Add32";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Icon render={Add16} />
<Icon render={Add20} />
<Icon render={Add24} />
<Icon render={Add32} />
### Skeleton
<Icon skeleton render={Add16} />
<Icon skeleton size={20} render={Add20} />
<Icon skeleton size={24} render={Add24} />
<Icon skeleton size={32} render={Add32} />

19
docs/src/pages/components/InlineLoading.svx Normal file
View file

@ -0,0 +1,19 @@
<script>
import { InlineLoading } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<InlineLoading />
### With description
<InlineLoading description="Loading metrics..." />
### Status states
<InlineLoading status="active" />
<InlineLoading status="inactive" />
<InlineLoading status="finished" />
<InlineLoading status="error" />

42
docs/src/pages/components/InlineNotification.svx Normal file
View file

@ -0,0 +1,42 @@
---
source: Notification/InlineNotification.svelte
---
<script>
import { InlineNotification, NotificationActionButton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default (error)
<InlineNotification on:close />
### Hidden close button
<InlineNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" />
### With actions
<InlineNotification kind="warning" title="Upcoming scheduled maintenance">
<div slot="actions">
<NotificationActionButton>Learn more</NotificationActionButton>
</div>
</InlineNotification>
### Notification variants
<InlineNotification kind="error" />
<InlineNotification kind="info" />
<InlineNotification kind="info-square" />
<InlineNotification kind="success" />
<InlineNotification kind="warning" />
<InlineNotification kind="warning-alt" />
### Low contrast
<InlineNotification lowContrast kind="error" />
<InlineNotification lowContrast kind="info" />
<InlineNotification lowContrast kind="info-square" />
<InlineNotification lowContrast kind="success" />
<InlineNotification lowContrast kind="warning" />
<InlineNotification lowContrast kind="warning-alt" />

23
docs/src/pages/components/Link.svx Normal file
View file

@ -0,0 +1,23 @@
<script>
import { Link } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
### Inline variant
<div>
Visit the
<Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
</div>
### Disabled
<Link disabled href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
### Visited styles
<Link visited href="https://www.carbondesignsystem.com/">Carbon Design System</Link>

16
docs/src/pages/components/Loading.svx Normal file
View file

@ -0,0 +1,16 @@
<script>
import { Loading } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default (with overlay)
<FileSource src="/framed/Loading/Loading" />
### No overlay
<Loading withOverlay={false} />
### Small size
<Loading withOverlay={false} small />

34
docs/src/pages/components/Modal.svx Normal file
View file

@ -0,0 +1,34 @@
<script>
import Preview from "../../components/Preview.svelte";
</script>
### Default (transactional)
<FileSource src="/framed/Modal/Modal" />
### Danger modal
<FileSource src="/framed/Modal/DangerModal" />
### Passive modal
<FileSource src="/framed/Modal/PassiveModal" />
### Extra-small size
<FileSource src="/framed/Modal/ModalExtraSmall" />
### Small size
<FileSource src="/framed/Modal/ModalSmall" />
### Large size
<FileSource src="/framed/Modal/ModalLarge" />
### Prevent close on outside click
`preventCloseOnClickOutside` prevents the modal from being closed when clicking outside of an open modal. This prop is intended to be used for transactional modals.
<FileSource src="/framed/Modal/ModalPreventOutsideClick" />

36
docs/src/pages/components/MultiSelect.svx Normal file
View file

@ -0,0 +1,36 @@
<script>
import { MultiSelect } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<MultiSelect titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" selectedIds="{["0", "1"]}"
/>
### Light variant
<MultiSelect light titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Inline type
<MultiSelect type="inline" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Filterable
<MultiSelect filterable titleText="Contact" placeholder="Filter contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>

52
docs/src/pages/components/NumberInput.svx Normal file
View file

@ -0,0 +1,52 @@
<script>
import { NumberInput, NumberInputSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<NumberInput label="Clusters" />
### With helper text
<NumberInput label="Clusters" helperText="Clusters provisioned in your region" />
### Minimum and maximum values
<NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" />
### Hidden label
<NumberInput hideLabel label="Clusters" />
### Light variant
<NumberInput light label="Clusters" />
### Mobile variant
<NumberInput mobile label="Clusters" />
### Extra-large size
<NumberInput size="xl" label="Clusters" />
### Small size
<NumberInput size="sm" label="Clusters" />
### Invalid state
<NumberInput invalid invalidText="An error occurred" label="Clusters" />
### Disabled state
<NumberInput disabled label="Clusters" />
### Skeleton
<NumberInputSkeleton />
### Skeleton without label
<NumberInputSkeleton hideLabel />

46
docs/src/pages/components/OrderedList.svx Normal file
View file

@ -0,0 +1,46 @@
<script>
import { OrderedList, ListItem, Link } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<OrderedList>
<ListItem>Ordered list item</ListItem>
<ListItem>Ordered list item</ListItem>
<ListItem>Ordered list item</ListItem>
</OrderedList>
### With links
<OrderedList>
<ListItem>
<Link href="#">Ordered list item</Link>
</ListItem>
<ListItem>
<Link href="#">Ordered list item</Link>
</ListItem>
<ListItem>
<Link href="#">Ordered list item</Link>
</ListItem>
</OrderedList>
### Nested
<OrderedList>
<ListItem>
Ordered list level 1
<OrderedList nested>
<ListItem>Ordered list level 2</ListItem>
<ListItem>
Ordered list level 3
<OrderedList nested>
<ListItem>Ordered list level 3</ListItem>
<ListItem>Ordered list level 3</ListItem>
</OrderedList>
</ListItem>
</OrderedList>
</ListItem>
<ListItem>Ordered list level 1</ListItem>
<ListItem>Ordered list level 1</ListItem>
</OrderedList>

47
docs/src/pages/components/OverflowMenu.svx Normal file
View file

@ -0,0 +1,47 @@
<script>
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<OverflowMenu>
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
### Flipped
<OverflowMenu open flipped>
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
### Menu direction top
<OverflowMenu flipped direction="top">
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
### Custom primary focus
By default, the first overflow menu item is focused when opening the dropdown.
<OverflowMenu>
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem primaryFocus danger text="Delete service" />
</OverflowMenu>
### Custom trigger slot
<OverflowMenu style="width: auto;">
<div slot="menu" style="padding: 1rem; color: red;">Custom trigger</div>
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>

24
docs/src/pages/components/Pagination.svx Normal file
View file

@ -0,0 +1,24 @@
<script>
import { Pagination, PaginationSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Pagination totalItems={102} pageSizes="{[10, 15, 20]}" />
### Current page
<Pagination totalItems={102} page={4} />
### Custom page sizes
<Pagination totalItems={102} pageSizes="{[16, 36, 99]}" pageSize="{36}" />
### Hidden page input
<Pagination totalItems={102} pageInputDisabled />
### Skeleton
<PaginationSkeleton />

12
docs/src/pages/components/PaginationNav.svx Normal file
View file

@ -0,0 +1,12 @@
<script>
import { PaginationNav } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<PaginationNav />
### Loopable
<PaginationNav total={3} loop />

38
docs/src/pages/components/PasswordInput.svx Normal file
View file

@ -0,0 +1,38 @@
<script>
import { PasswordInput } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<PasswordInput labelText="Password" placeholder="Enter password..." />
### Password is visible
Set prop `type` to `"text"` to toggle password visibility.
<PasswordInput labelText="Password" type="text" placeholder="Enter password..." value="as_lta0890sdfpo__!9901" />
### Hidden label
<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />
### Light variant
<PasswordInput light labelText="Password" placeholder="Enter password..." />
### Extra-large size
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
### Small size
<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
### Invalid state
<PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />
### Disabled state
<PasswordInput disabled labelText="Password" placeholder="Enter password..." />

59
docs/src/pages/components/ProgressIndicator.svx Normal file
View file

@ -0,0 +1,59 @@
<script>
import { ProgressIndicator, ProgressStep, ProgressIndicatorSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default (horizontal)
<ProgressIndicator>
<ProgressStep
label="Really long label"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
label="Really long label"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
label="Really long label"
description="The progress indicator will listen for clicks on the steps"
/>
</ProgressIndicator>
### Spaced-equally
<ProgressIndicator spaceEqually>
<ProgressStep
label="Really long label"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
label="Really long label"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
label="Really long label"
description="The progress indicator will listen for clicks on the steps"
/>
</ProgressIndicator>
### Vertical
<ProgressIndicator vertical>
<ProgressStep
label="Really long label"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
label="Really long label"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
label="Really long label"
description="The progress indicator will listen for clicks on the steps"
/>
</ProgressIndicator>
### Skeleton
<ProgressIndicatorSkeleton />

54
docs/src/pages/components/RadioButton.svx Normal file
View file

@ -0,0 +1,54 @@
<script>
import { FormGroup, RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
</FormGroup>
### Label text aligned left
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup labelPosition="left" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
</FormGroup>
### Vertical orientation
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup orientation="vertical" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
</FormGroup>
### Skeleton
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup>
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>
</FormGroup>
### Skeleton (vertical orientation)
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup orientation="vertical">
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>
</FormGroup>

32
docs/src/pages/components/RadioTile.svx Normal file
View file

@ -0,0 +1,32 @@
<script>
import { TileGroup, RadioTile } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<TileGroup legend="Service pricing tiers">
<RadioTile value="0" checked>
Lite plan
</RadioTile>
<RadioTile value="1">
Standard plan
</RadioTile>
<RadioTile value="2">
Plus plan
</RadioTile>
</TileGroup>
### Light variant
<TileGroup legend="Service pricing tiers">
<RadioTile value="0" checked>
Lite plan
</RadioTile>
<RadioTile value="1">
Standard plan
</RadioTile>
<RadioTile value="2">
Plus plan
</RadioTile>
</TileGroup>

28
docs/src/pages/components/Search.svx Normal file
View file

@ -0,0 +1,28 @@
<script>
import { Search } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Search />
### Default value
<Search placeholder="Search catalog..." value="Cloud functions" />
### Light variant
<Search light />
### Large size
<Search size="lg" />
### Small size
<Search size="sm" />
### Skeleton
<Search skeleton />

58
docs/src/pages/components/Select.svx Normal file
View file

@ -0,0 +1,58 @@
<script>
import { Select, SelectItem, SelectItemGroup, SelectSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Select labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Item groups
<Select labelText="Carbon theme" selected="g10" >
<SelectItem value="0" text="Select a theme" disabled hidden />
<SelectItemGroup label="Light theme">
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
</SelectItemGroup>
<SelectItemGroup label="Dark theme">
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</SelectItemGroup>
</Select>
### Light variant
<Select light labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Inline type
<Select inline labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Disabled
<Select disabled labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Skeleton
<SelectSkeleton />

32
docs/src/pages/components/SelectableTile.svx Normal file
View file

@ -0,0 +1,32 @@
<script>
import { TileGroup, SelectableTile } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Multi-selectable tiles
<div role="group" aria-label="selectable tiles">
<SelectableTile selected>
Multi-select Tile
</SelectableTile>
<SelectableTile selected>
Multi-select Tile
</SelectableTile>
<SelectableTile>
Multi-select Tile
</SelectableTile>
</div>
### Light variant
<div role="group" aria-label="selectable tiles">
<SelectableTile light selected>
Multi-select Tile
</SelectableTile>
<SelectableTile light selected>
Multi-select Tile
</SelectableTile>
<SelectableTile light>
Multi-select Tile
</SelectableTile>
</div>

12
docs/src/pages/components/SkeletonPlaceholder.svx Normal file
View file

@ -0,0 +1,12 @@
<script>
import { SkeletonPlaceholder } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<SkeletonPlaceholder />
### Custom size
<SkeletonPlaceholder style="height: 12rem; width: 12rem;" />

24
docs/src/pages/components/SkeletonText.svx Normal file
View file

@ -0,0 +1,24 @@
<script>
import { SkeletonText } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<SkeletonText />
### Heading variant
<SkeletonText heading />
### Heading variant
<SkeletonText heading />
### Paragraph variant
<SkeletonText paragraph />
### Paragraph with max width
<SkeletonText paragraph width="50%" />

28
docs/src/pages/components/Slider.svx Normal file
View file

@ -0,0 +1,28 @@
<script>
import { Slider, SliderSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Slider />
### Custom minimum, maximum values
<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} />
### Custom step value
<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
### Light variant
<Slider light labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
### Skeleton
<SliderSkeleton />
### Skeleton (hidden label)
<SliderSkeleton hideLabel />

93
docs/src/pages/components/StructuredList.svx Normal file
View file

@ -0,0 +1,93 @@
<script>
import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import Preview from "../../components/Preview.svelte";
</script>
### Default (read-only)
<StructuredList>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>Column A</StructuredListCell>
<StructuredListCell head>Column B</StructuredListCell>
<StructuredListCell head>Column C</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell noWrap>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 2</StructuredListCell>
<StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 3</StructuredListCell>
<StructuredListCell>Row 3</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredList>
### Selectable rows
<StructuredList selection selected="row-1-value">
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
<StructuredListCell head>{''}</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
{#each [1, 2, 3] as item}
<StructuredListRow label for="row-{item}">
<StructuredListCell>Row {item}</StructuredListCell>
<StructuredListCell>Row {item}</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean
posuere sem vel euismod dignissim. Nulla ut cursus dolor.
Pellentesque vulputate nisl a porttitor interdum.
</StructuredListCell>
<StructuredListInput
id="row-{item}"
value="row-{item}-value"
title="row-{item}-title"
name="row-{item}-name"
/>
<StructuredListCell>
<CheckmarkFilled16
class="bx--structured-list-svg"
aria-label="select an option"
title="select an option"
/>
</StructuredListCell>
</StructuredListRow>
{/each}
</StructuredListBody>
</StructuredList>
### Skeleton
<StructuredListSkeleton rows={3} />

34
docs/src/pages/components/Tabs.svx Normal file
View file

@ -0,0 +1,34 @@
<script>
import { Tabs, Tab, TabContent, TabsSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Tabs>
<Tab label="Tab label 1" />
<Tab label="Tab label 2" />
<Tab label="Tab label 3" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
</div>
</Tabs>
### Container type
<Tabs type="container">
<Tab label="Tab label 1" />
<Tab label="Tab label 2" />
<Tab label="Tab label 3" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
</div>
</Tabs>
### Skeleton
<TabsSkeleton count={3} />

30
docs/src/pages/components/Tag.svx Normal file
View file

@ -0,0 +1,30 @@
<script>
import { Tag } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Tag>IBM Cloud</Tag>
### Tag types
<Tag type="red">red</Tag>
<Tag type="magenta">magenta</Tag>
<Tag type="purple">purple</Tag>
<Tag type="blue">blue</Tag>
<Tag type="cyan">cyan</Tag>
<Tag type="teal">teal</Tag>
<Tag type="green">green</Tag>
<Tag type="gray">gray</Tag>
<Tag type="cool-gray">cool-gray</Tag>
<Tag type="warm-gray">warm-gray</Tag>
<Tag type="high-contrast">high-contrast</Tag>
### Filterable
<Tag filter on:click>Filterable</Tag>
### Skeleton
<Tag skeleton />

40
docs/src/pages/components/TextArea.svx Normal file
View file

@ -0,0 +1,40 @@
<script>
import { TextArea, TextAreaSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<TextArea labelText="App description" placeholder="Enter a description..." />
### With helper text
<TextArea labelText="App description" helperText="A rich description helps us better recommend related products and services" placeholder="Enter a description..." />
### Hidden label
<TextArea hideLabel labelText="App description" placeholder="Enter a description..." />
### Light variant
<TextArea light labelText="App description" placeholder="Enter a description..." />
### Custom rows
<TextArea rows={10} labelText="App description" placeholder="Enter a description..." />
### Invalid state
<TextArea invalid invalidText="Only plain text characters are allowed" labelText="App description" placeholder="Enter a description..." />
### Disabled state
<TextArea disabled labelText="App description" placeholder="Enter a description..." />
### Skeleton
<TextAreaSkeleton />
### Skeleton without label
<TextAreaSkeleton hideLabel />

48
docs/src/pages/components/TextInput.svx Normal file
View file

@ -0,0 +1,48 @@
<script>
import { TextInput, TextInputSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<TextInput labelText="User name" placeholder="Enter user name..." />
### With helper text
<TextInput labelText="User name" helperText="Your user name is associated with your email" placeholder="Enter user name..." />
### Hidden label
<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
### Light variant
<TextInput light labelText="User name" placeholder="Enter user name..." />
### Inline
<TextInput inline labelText="User name" placeholder="Enter user name..." />
### Extra-large size
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
### Small size
<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
### Invalid state
<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />
### Disabled state
<TextInput disabled labelText="User name" placeholder="Enter user name..." />
### Skeleton
<TextInputSkeleton />
### Skeleton without label
<TextInputSkeleton hideLabel />

16
docs/src/pages/components/Tile.svx Normal file
View file

@ -0,0 +1,16 @@
---
source: Tile/Tile.svelte
---
<script>
import { Tile } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Tile>Content</Tile>
### Light variant
<Tile light>Content</Tile>

43
docs/src/pages/components/TimePicker.svx Normal file
View file

@ -0,0 +1,43 @@
<script>
import { TimePicker, TimePickerSelect, SelectItem } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<TimePicker labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
</TimePicker>
### Light variant
<TimePicker light labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
</TimePicker>
### Disabled
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
<TimePickerSelect value="PM" disabled>
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT" disabled>
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
</TimePicker>

34
docs/src/pages/components/ToastNotification.svx Normal file
View file

@ -0,0 +1,34 @@
---
source: Notification/ToastNotification.svelte
---
<script>
import { ToastNotification } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default (error)
<ToastNotification />
### Hidden close button
<ToastNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" />
### Notification variants
<ToastNotification kind="error" />
<ToastNotification kind="info" />
<ToastNotification kind="info-square" />
<ToastNotification kind="success" />
<ToastNotification kind="warning" />
<ToastNotification kind="warning-alt" />
### Low contrast
<ToastNotification lowContrast kind="error" />
<ToastNotification lowContrast kind="info" />
<ToastNotification lowContrast kind="info-square" />
<ToastNotification lowContrast kind="success" />
<ToastNotification lowContrast kind="warning" />
<ToastNotification lowContrast kind="warning-alt" />

24
docs/src/pages/components/Toggle.svx Normal file
View file

@ -0,0 +1,24 @@
<script>
import { Toggle, ToggleSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default (untoggled)
<Toggle labelText="Push notifications" />
### Toggled
<Toggle labelText="Push notifications" toggled />
### Custom labels
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
### Disabled
<Toggle labelText="Push notifications" disabled />
### Skeleton
<ToggleSkeleton />

24
docs/src/pages/components/ToggleSmall.svx Normal file
View file

@ -0,0 +1,24 @@
<script>
import { ToggleSmall, ToggleSmallSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default (untoggled)
<ToggleSmall labelText="Push notifications" />
### Toggled
<ToggleSmall labelText="Push notifications" toggled />
### Custom labels
<ToggleSmall labelText="Push notifications" labelA="No" labelB="Yes" />
### Disabled
<ToggleSmall labelText="Push notifications" disabled />
### Skeleton
<ToggleSmallSkeleton />

57
docs/src/pages/components/Tooltip.svx Normal file
View file

@ -0,0 +1,57 @@
<script>
import { Tooltip, Link, Button } from "carbon-components-svelte";
import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
import Preview from "../../components/Preview.svelte";
</script>
### Default (icon-only, "bottom" direction)
<Tooltip>
<p>
Resources are provisioned based on your account's organization.
</p>
</Tooltip>
### With trigger text
<Tooltip triggerText="Resource list">
<p>
Resources are provisioned based on your account's organization.
</p>
</Tooltip>
### Directions
<Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
<Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
<Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
<Tooltip triggerText="Left" direction="left"><p>Left</p></Tooltip>
### Interactive
<Tooltip triggerText="Resource list">
<p>
Resources are provisioned based on your account's organization.
</p>
<div class="bx--tooltip__footer">
<Link href="/">Learn more</Link>
<Button size="small">Manage</Button>
</div>
</Tooltip>
### Custom icon (component)
<Tooltip triggerText="Resource list" icon={Catalog16}>
<p>
Resources are provisioned based on your account's organization.
</p>
</Tooltip>
### Custom icon (slot)
<Tooltip triggerText="Resource list">
<div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;"></div>
<p>
Resources are provisioned based on your account's organization.
</p>
</Tooltip>

16
docs/src/pages/components/TooltipDefinition.svx Normal file
View file

@ -0,0 +1,16 @@
<script>
import { TooltipDefinition } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default ("bottom" direction, "center" aligned)
<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
Armonk
</TooltipDefinition>
### Custom direction, alignment
<TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
Armonk
</TooltipDefinition>

19
docs/src/pages/components/TooltipIcon.svx Normal file
View file

@ -0,0 +1,19 @@
<script>
import { TooltipIcon } from "carbon-components-svelte";
import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
import Filter20 from "carbon-icons-svelte/lib/Filter20";
import Preview from "../../components/Preview.svelte";
</script>
### Default ("bottom" direction, "center" aligned)
<TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
<Carbon24 />
</TooltipIcon>
### Directions
<TooltipIcon tooltipText="Top start" direction="top" align="start"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Right end" direction="right" align="end"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>

15
docs/src/pages/components/UIShell.svx Normal file
View file

@ -0,0 +1,15 @@
<script>
import Preview from "../../components/Preview.svelte";
</script>
### Header with side navigation
<FileSource src="/framed/UIShell/HeaderNav" />
### Header with app switcher
<FileSource src="/framed/UIShell/HeaderSwitcher" />
### Header with utilities
<FileSource src="/framed/UIShell/HeaderUtilities" />

46
docs/src/pages/components/UnorderedList.svx Normal file
View file

@ -0,0 +1,46 @@
<script>
import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<UnorderedList>
<ListItem>Unordered list item</ListItem>
<ListItem>Unordered list item</ListItem>
<ListItem>Unordered list item</ListItem>
</UnorderedList>
### With links
<UnorderedList>
<ListItem>
<Link href="#">Unordered list item</Link>
</ListItem>
<ListItem>
<Link href="#">Unordered list item</Link>
</ListItem>
<ListItem>
<Link href="#">Unordered list item</Link>
</ListItem>
</UnorderedList>
### Nested
<UnorderedList>
<ListItem>
Unordered list level 1
<UnorderedList nested>
<ListItem>Unordered list level 2</ListItem>
<ListItem>
Unordered list level 3
<UnorderedList nested>
<ListItem>Unordered list level 3</ListItem>
<ListItem>Unordered list level 3</ListItem>
</UnorderedList>
</ListItem>
</UnorderedList>
</ListItem>
<ListItem>Unordered list level 1</ListItem>
<ListItem>Unordered list level 1</ListItem>
</UnorderedList>