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

test: add TS types

Browse source
This commit is contained in:
Eric Liu 2020-11-19 14:16:01 -08:00
commit eed617433b
126 changed files with 3378 additions and 226 deletions
Download patch file Download diff file Expand all files Collapse all files

219
tests/Accordion.test.svelte Normal file
View file

@ -0,0 +1,219 @@
<script lang="ts">
import { Accordion, AccordionItem } from "../types";
</script>
<Accordion>
<AccordionItem title="Natural Language Classifier">
<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 title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<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>
</Accordion>
<Accordion align="start">
<AccordionItem title="Natural Language Classifier">
<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 title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<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>
</Accordion>
<Accordion>
<AccordionItem>
<div slot="title">
<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>
<div slot="title">
<h5>Natural Language Understanding</h5>
<div>AI / Machine Learning</div>
</div>
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem>
<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>
</Accordion>
<Accordion>
<AccordionItem open title="Natural Language Classifier">
<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 title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<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>
</Accordion>
<Accordion size="xl">
<AccordionItem title="Natural Language Classifier">
<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 title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<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>
</Accordion>
<Accordion size="sm">
<AccordionItem title="Natural Language Classifier">
<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 title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<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>
</Accordion>
<Accordion disabled>
<AccordionItem title="Natural Language Classifier">
<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 title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<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>
</Accordion>
<Accordion>
<AccordionItem disabled title="Natural Language Classifier">
<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 title="Natural Language Understanding">
<p>
Analyze text to extract meta-data from content such as concepts, entities,
emotion, relations, sentiment and more.
</p>
</AccordionItem>
<AccordionItem title="Language Translator">
<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>
</Accordion>
<Accordion skeleton />
<Accordion skeleton align="start" />
<Accordion skeleton count="{3}" />
<Accordion skeleton open="{false}" />
<Accordion skeleton size="xl" />
<Accordion skeleton size="sm" />

35
tests/AspectRatio.test.svelte Normal file
View file

@ -0,0 +1,35 @@
<script lang="ts">
import { AspectRatio, Tile } from "../types";
</script>
<AspectRatio style="outline: 1px solid var(--cds-interactive-04)">
2x1
</AspectRatio>
<AspectRatio ratio="16x9" style="outline: 1px solid var(--cds-interactive-04)">
16x9
</AspectRatio>
<AspectRatio ratio="4x3" style="outline: 1px solid var(--cds-interactive-04)">
4x3
</AspectRatio>
<AspectRatio ratio="1x1" style="outline: 1px solid var(--cds-interactive-04)">
1x1
</AspectRatio>
<AspectRatio ratio="3x4" style="outline: 1px solid var(--cds-interactive-04)">
3x4
</AspectRatio>
<AspectRatio ratio="9x16" style="outline: 1px solid var(--cds-interactive-04)">
9x16
</AspectRatio>
<AspectRatio ratio="1x2" style="outline: 1px solid var(--cds-interactive-04)">
1x2
</AspectRatio>
<AspectRatio ratio="16x9">
<Tile style="height: 100%">Content</Tile>
</AspectRatio>

20
tests/AspectRatioColumns.test.svelte Normal file
View file

@ -0,0 +1,20 @@
<script lang="ts">
import { Grid, Row, Column } from "../types";
</script>
<Grid>
<Row>
<Column
aspectRatio="2x1"
style="outline: 1px solid var(--cds-interactive-04)"
>
2x1
</Column>
<Column
aspectRatio="2x1"
style="outline: 1px solid var(--cds-interactive-04)"
>
2x1
</Column>
</Row>
</Grid>

16
tests/Breadcrumb.test.svelte Normal file
View file

@ -0,0 +1,16 @@
<script lang="ts">
import { Breadcrumb, BreadcrumbItem } from "../types";
</script>
<Breadcrumb>
<BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
<BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
<BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
</Breadcrumb>
<Breadcrumb noTrailingSlash>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
</Breadcrumb>
<Breadcrumb noTrailingSlash skeleton count="{3}" />

26
tests/Breadcrumbs.test.svelte Normal file
View file

@ -0,0 +1,26 @@
<script lang="ts">
type Items = { href?: string; text: string }[];
export let items: Items = [
{ href: "/", text: "Dashboard" },
{ href: "/reports", text: "Annual reports" },
{ href: "/reports/2019", text: "2019" },
];
import { Row, Column, Breadcrumb, BreadcrumbItem } from "../types";
</script>
<Row>
<Column>
<Breadcrumb>
{#each items as item, i}
<BreadcrumbItem
href="{item.href}"
isCurrentPage="{i === items.length - 1}"
>
{item.text}
</BreadcrumbItem>
{/each}
</Breadcrumb>
</Column>
</Row>

62
tests/Button.test.svelte Normal file
View file

@ -0,0 +1,62 @@
<script lang="ts">
import { Button } from "../types";
import Add16 from "carbon-icons-svelte/lib/Add16";
</script>
<Button>Primary button</Button>
<Button kind="secondary">Secondary button</Button>
<Button kind="tertiary">Tertiary button</Button>
<Button kind="ghost">Ghost button</Button>
<Button kind="danger">Danger button</Button>
<Button kind="danger-tertiary">Danger tertiary button</Button>
<Button kind="danger-ghost">Danger ghost button</Button>
<Button icon="{Add16}">With icon</Button>
<Button
icon="{Add16}"
hasIconOnly
tooltipPosition="bottom"
tooltipAlignment="center"
iconDescription="Tooltip text"
/>
<Button href="#">Link button</Button>
<Button as let:props>
<p {...props}>Custom element</p>
</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>
<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>
<Button disabled>Disabled button</Button>
<Button skeleton />
<Button skeleton size="field" />
<Button skeleton size="small" />

15
tests/Checkbox.test.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
import { Checkbox } from "../types";
</script>
<Checkbox labelText="Label text" />
<Checkbox labelText="Label text" checked />
<Checkbox labelText="Label text" indeterminate />
<Checkbox labelText="Label text" hideLabel />
<Checkbox labelText="Label text" disabled />
<Checkbox skeleton />

11
tests/ClickableTile.test.svelte Normal file
View file

@ -0,0 +1,11 @@
<script lang="ts">
import { ClickableTile } from "../types";
</script>
<ClickableTile href="https://www.carbondesignsystem.com/">
Carbon Design System
</ClickableTile>
<ClickableTile light href="https://www.carbondesignsystem.com/">
Carbon Design System
</ClickableTile>

50
tests/CodeSnippet.test.svelte Normal file
View file

@ -0,0 +1,50 @@
<script lang="ts">
import { CodeSnippet, InlineNotification } from "../types";
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;
}`;
let comment = `
> \`../types\` is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
> A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility.
`;
</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
/>
<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
<CodeSnippet type="multi" code="{code}" />
<CodeSnippet type="multi" code="{code}" hideCopyButton />
<CodeSnippet wrapText type="multi" code="{comment}" />
<CodeSnippet skeleton />
<CodeSnippet type="multi" skeleton />

44
tests/ComboBox.test.svelte Normal file
View file

@ -0,0 +1,44 @@
<script lang="ts">
import { ComboBox } from "../types";
</script>
<ComboBox
titleText="Contact"
placeholder="Select contact method"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<ComboBox
titleText="Contact"
placeholder="Select contact method"
selectedIndex="{1}"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<ComboBox
light
titleText="Contact"
placeholder="Select contact method"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<ComboBox
titleText="Contact"
placeholder="Select contact method"
size="xl"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<ComboBox
titleText="Contact"
placeholder="Select contact method"
size="sm"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<ComboBox
disabled
titleText="Contact"
placeholder="Select contact method"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>

19
tests/ComposedModal.test.svelte Normal file
View file

@ -0,0 +1,19 @@
<script lang="ts">
import {
ComposedModal,
ModalHeader,
ModalBody,
ModalFooter,
Checkbox,
} from "../types";
let checked = false;
</script>
<ComposedModal open>
<ModalHeader title="Confirm changes" />
<ModalBody hasForm>
<Checkbox labelText="I have reviewed the changes" bind:checked />
</ModalBody>
<ModalFooter primaryButtonText="Proceed" primaryButtonDisabled="{!checked}" />
</ComposedModal>

12
tests/CondensedGrid.test.svelte Normal file
View file

@ -0,0 +1,12 @@
<script lang="ts">
import { Grid, Row, Column } from "../types";
</script>
<Grid condensed>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>

55
tests/ContentSwitcher.test.svelte Normal file
View file

@ -0,0 +1,55 @@
<script lang="ts">
import { ContentSwitcher, Switch } from "../types";
import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
</script>
<ContentSwitcher>
<Switch text="Latest news" />
<Switch text="Trending" />
</ContentSwitcher>
<ContentSwitcher selectedIndex="{1}">
<Switch text="Latest news" />
<Switch text="Trending" />
<Switch text="Recommended" />
</ContentSwitcher>
<ContentSwitcher light>
<Switch text="Latest news" />
<Switch text="Trending" />
</ContentSwitcher>
<ContentSwitcher>
<Switch>
<div style="display: flex; align-items: center;">
<Bullhorn16 style="margin-right: 0.5rem;" />
Latest news
</div>
</Switch>
<Switch>
<div style="display: flex; align-items: center;">
<Analytics16 style="margin-right: 0.5rem;" />
Trending
</div>
</Switch>
</ContentSwitcher>
<Bullhorn16 style="margin-right: 0.5rem;" />
<Analytics16 style="margin-right: 0.5rem;" />
<ContentSwitcher size="xl">
<Switch text="All" />
<Switch text="Archived" />
</ContentSwitcher>
<ContentSwitcher size="sm">
<Switch text="All" />
<Switch text="Archived" />
</ContentSwitcher>
<ContentSwitcher>
<Switch disabled text="All" />
<Switch disabled text="Archived" />
</ContentSwitcher>

16
tests/CopyButton.test.svelte Normal file
View file

@ -0,0 +1,16 @@
<script lang="ts">
import { CopyButton, InlineNotification } from "../types";
</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
/>
<CopyButton on:click />
<CopyButton on:click feedback="Copied to clipboard" />

8
tests/CopyableCodeSnippet.test.svelte Normal file
View file

@ -0,0 +1,8 @@
<script lang="ts">
export let copy = (text: string) => text;
export let code = "yarn add -D carbon-component-svelte";
import { CodeSnippet } from "../types";
</script>
<CodeSnippet on:click="{() => copy(code)}">{code}</CodeSnippet>

21
tests/DangerModal.test.svelte Normal file
View file

@ -0,0 +1,21 @@
<script lang="ts">
import { Button, Modal } from "../types";
let open = false;
</script>
<Button kind="danger" on:click="{() => (open = true)}">Delete all</Button>
<Modal
danger
bind:open
modalHeading="Delete all instances"
primaryButtonText="Delete"
secondaryButtonText="Cancel"
on:click:button--secondary="{() => (open = false)}"
on:open
on:close
on:submit
>
<p>This is a permanent action and cannot be undone.</p>
</Modal>

192
tests/DataTable.test.svelte Normal file
View file

@ -0,0 +1,192 @@
<script lang="ts">
import {
DataTable,
DataTableSkeleton,
Toolbar,
ToolbarContent,
ToolbarSearch,
ToolbarMenu,
ToolbarMenuItem,
Button,
Link,
} from "../types";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
const headers = [
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
];
const 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",
},
];
function sort(a: any, b: any) {
if (new Date(a) > new Date(b)) return 1;
return 0;
}
</script>
<DataTable headers="{headers}" rows="{rows}" />
<DataTable headers="{headers}" rows="{rows}">
<span slot="cell-header" let:header>
{#if header.key === 'port'}
{header.value}
(network)
{:else}{header.value}{/if}
</span>
<span slot="cell" let:cell>
{#if cell.key === 'rule' && cell.value === 'Round robin'}
<Link
inline
href="https://en.wikipedia.org/wiki/Round-robin_DNS"
target="_blank"
>
{cell.value}
<Launch16 />
</Link>
{:else}{cell.value}{/if}
</span>
</DataTable>
<DataTable
title="Load balancers"
description="Your organization's active load balancers."
headers="{headers}"
rows="{rows}"
/>
<DataTable
title="Load balancers"
description="Your organization's active load balancers."
headers="{headers}"
rows="{rows}"
>
<Toolbar>
<ToolbarContent>
<ToolbarSearch />
<ToolbarMenu>
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
API documentation
</ToolbarMenuItem>
<ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
</ToolbarMenu>
<Button>Create balancer</Button>
</ToolbarContent>
</Toolbar>
</DataTable>
<DataTable
size="short"
title="Load balancers"
description="Your organization's active load balancers."
headers="{headers}"
rows="{rows}"
>
<Toolbar size="sm">
<ToolbarContent>
<ToolbarSearch />
<ToolbarMenu>
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
API documentation
</ToolbarMenuItem>
<ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
</ToolbarMenu>
<Button>Create balancer</Button>
</ToolbarContent>
</Toolbar>
</DataTable>
<DataTable zebra headers="{headers}" rows="{rows}" />
<DataTable size="tall" headers="{headers}" rows="{rows}" />
<DataTable size="short" headers="{headers}" rows="{rows}" />
<DataTable size="compact" headers="{headers}" rows="{rows}" />
<DataTable sortable headers="{headers}" rows="{rows}" />
<DataTable
sortable
title="Load balancers"
description="Your organization's active load balancers."
headers="{[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'cost', value: 'Cost', display: (cost) => cost + ' €' }, { key: 'expireDate', value: 'Expire date', display: (date) => new Date(date).toLocaleString(), sort }]}"
rows="{[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, cost: 100, expireDate: '2020-10-21' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, cost: 200, expireDate: '2020-09-10' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, cost: 150, expireDate: '2020-11-24' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, cost: 250, expireDate: '2020-12-01' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, cost: 550, expireDate: '2021-03-21' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, cost: 400, expireDate: '2020-11-14' }]}"
/>
<DataTable expandable headers="{headers}" rows="{rows}">
<div slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
</div>
</DataTable>
<DataTable batchExpansion headers="{headers}" rows="{rows}">
<div slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
</div>
</DataTable>
<DataTableSkeleton />
<DataTableSkeleton
headers="{['Name', 'Protocol', 'Port', 'Rule']}"
rows="{10}"
/>
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="tall" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" />

34
tests/DataTableAppendColumns.test.svelte Normal file
View file

@ -0,0 +1,34 @@
<script lang="ts">
import { DataTable, OverflowMenu, OverflowMenuItem } from "../types";
const headers = [
{ key: "name", value: "Name" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
{ key: "overflow", empty: true },
];
const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
];
</script>
<DataTable sortable headers="{headers}" rows="{rows}">
<span slot="cell" let:cell>
{#if cell.key === 'overflow'}
<OverflowMenu flipped>
<OverflowMenuItem text="Restart" />
<OverflowMenuItem
href="https://cloud.ibm.com/docs/loadbalancer-service"
text="API documentation"
/>
<OverflowMenuItem danger text="Stop" />
</OverflowMenu>
{:else}{cell.value}{/if}
</span>
</DataTable>

29
tests/DataTableBatchSelection.test.svelte Normal file
View file

@ -0,0 +1,29 @@
<script lang="ts">
import { DataTable } from "../types";
const headers = [
{ key: "name", value: "Name" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
];
const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
];
let selectedRowIds = [rows[0].id, rows[1].id];
$: console.log("selectedRowIds", selectedRowIds);
</script>
<DataTable
batchSelection
bind:selectedRowIds
headers="{headers}"
rows="{rows}"
/>

51
tests/DataTableBatchSelectionToolbar.test.svelte Normal file
View file

@ -0,0 +1,51 @@
<script lang="ts">
import {
DataTable,
Toolbar,
ToolbarContent,
ToolbarSearch,
ToolbarMenu,
ToolbarMenuItem,
ToolbarBatchActions,
Button,
} from "../types";
import Save16 from "carbon-icons-svelte/lib/Save16";
const headers = [
{ key: "name", value: "Name" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
];
const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
];
let selectedRowIds = [rows[0].id, rows[1].id];
$: console.log("selectedRowIds", selectedRowIds);
</script>
<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
<Toolbar>
<ToolbarBatchActions>
<Button icon="{Save16}">Save</Button>
</ToolbarBatchActions>
<ToolbarContent>
<ToolbarSearch />
<ToolbarMenu>
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
API documentation
</ToolbarMenuItem>
<ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
</ToolbarMenu>
<Button>Create balancer</Button>
</ToolbarContent>
</Toolbar>
</DataTable>

58
tests/DatePicker.test.svelte Normal file
View file

@ -0,0 +1,58 @@
<script lang="ts">
import { DatePicker, DatePickerSkeleton, DatePickerInput } from "../types";
</script>
<DatePicker>
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
<DatePicker>
<DatePickerInput
hideLabel
labelText="Date of birth"
placeholder="mm/dd/yyyy"
/>
</DatePicker>
<DatePicker light>
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
<DatePicker>
<DatePickerInput
size="xl"
labelText="Date of birth"
placeholder="mm/dd/yyyy"
/>
</DatePicker>
<DatePicker>
<DatePickerInput
size="sm"
labelText="Date of birth"
placeholder="mm/dd/yyyy"
/>
</DatePicker>
<DatePicker>
<DatePickerInput
invalid
invalidText="Invalid date"
labelText="Date of birth"
placeholder="mm/dd/yyyy"
/>
</DatePicker>
<DatePicker>
<DatePickerInput
disabled
labelText="Date of birth"
placeholder="mm/dd/yyyy"
/>
</DatePicker>
<DatePicker datePickerType="single">
<DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
</DatePicker>
<DatePickerSkeleton />

55
tests/Dropdown.test.svelte Normal file
View file

@ -0,0 +1,55 @@
<script lang="ts">
import { Dropdown, DropdownSkeleton } from "../types";
</script>
<Dropdown
titleText="Contact"
selectedIndex="{0}"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<Dropdown
itemToString="{(item) => {
return item.text + ' (' + item.id + ')';
}}"
titleText="Contact"
selectedIndex="{0}"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<Dropdown
light
titleText="Contact"
selectedIndex="{0}"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<Dropdown
type="inline"
titleText="Contact"
selectedIndex="{0}"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<Dropdown
size="xl"
titleText="Contact"
selectedIndex="{0}"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<Dropdown
size="sm"
titleText="Contact"
selectedIndex="{0}"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<Dropdown
disabled
titleText="Contact"
selectedIndex="{0}"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<DropdownSkeleton />

15
tests/DynamicCodeSnippet.test.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
import { ToggleSmall, CodeSnippet } from "../types";
let toggled = false;
$: length = toggled ? 20 : 10;
$: code = Array.from({ length }, (_, i) => i + 1).join("\n");
</script>
<ToggleSmall
style="margin-bottom: var(--cds-spacing-05)"
labelText="Trigger snippet overflow"
bind:toggled
/>
<CodeSnippet type="multi" code="{code}" />

18
tests/ExpandableTile.test.svelte Normal file
View file

@ -0,0 +1,18 @@
<script lang="ts">
import { ExpandableTile } from "../types";
</script>
<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>
<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>
<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>

33
tests/FileUploader.test.svelte Normal file
View file

@ -0,0 +1,33 @@
<script lang="ts">
import {
FileUploaderButton,
FileUploader,
FileUploaderDropContainer,
FileUploaderItem,
FileUploaderSkeleton,
} from "../types";
</script>
<FileUploaderButton labelText="Add files" />
<FileUploader
multiple
labelTitle="Upload files"
buttonLabel="Add files"
labelDescription="Only JPEG files are accepted."
accept="{['.jpg', '.jpeg']}"
status="complete"
/>
<FileUploaderItem name="README.md" status="uploading" />
<FileUploaderItem name="README.md" status="complete" />
<FileUploaderItem invalid name="README.md" status="edit" />
<FileUploaderDropContainer
labelText="Drag and drop files here or click to upload"
multiple
/>
<FileUploaderSkeleton />

15
tests/FilterableComboBox.test.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
import { ComboBox } from "../types";
function shouldFilterItem(item: { text: string }, value?: any) {
if (!value) return true;
return item.text.toLowerCase().includes(value.toLowerCase());
}
</script>
<ComboBox
titleText="Contact"
placeholder="Select contact method"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
shouldFilterItem="{shouldFilterItem}"
/>

13
tests/FluidForm.test.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import { FluidForm, TextInput, PasswordInput } from "../types";
</script>
<FluidForm>
<TextInput labelText="User name" placeholder="Enter user name..." required />
<PasswordInput
required
type="password"
labelText="Password"
placeholder="Enter password..."
/>
</FluidForm>

54
tests/Form.test.svelte Normal file
View file

@ -0,0 +1,54 @@
<script lang="ts">
import {
Form,
FormGroup,
Checkbox,
RadioButtonGroup,
RadioButton,
Select,
SelectItem,
Button,
} from "../types";
</script>
<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>

12
tests/FullWidthGrid.test.svelte Normal file
View file

@ -0,0 +1,12 @@
<script lang="ts">
import { Grid, Row, Column } from "../types";
</script>
<Grid fullWidth>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>

12
tests/Grid.test.svelte Normal file
View file

@ -0,0 +1,12 @@
<script lang="ts">
import { Grid, Row, Column } from "../types";
</script>
<Grid>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>

60
tests/HeaderNav.test.svelte Normal file
View file

@ -0,0 +1,60 @@
<script lang="ts">
import {
Header,
HeaderNav,
HeaderNavItem,
HeaderNavMenu,
SideNav,
SideNavItems,
SideNavMenu,
SideNavMenuItem,
SideNavLink,
SkipToContent,
Content,
Grid,
Row,
Column,
} from "../types";
let isSideNavOpen = false;
</script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderNav>
<HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" />
<HeaderNavItem href="/" text="Link 3" />
<HeaderNavMenu text="Menu">
<HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" />
<HeaderNavItem href="/" text="Link 3" />
</HeaderNavMenu>
</HeaderNav>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNavItems>
<SideNavLink text="Link 1" />
<SideNavLink text="Link 2" />
<SideNavLink text="Link 3" />
<SideNavMenu text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
</SideNavItems>
</SideNav>
<Content>
<Grid>
<Row>
<Column>
<h1>Welcome</h1>
</Column>
</Row>
</Grid>
</Content>

66
tests/HeaderSwitcher.test.svelte Normal file
View file

@ -0,0 +1,66 @@
<script lang="ts">
import {
Header,
HeaderUtilities,
HeaderAction,
HeaderPanelLinks,
HeaderPanelDivider,
HeaderPanelLink,
SideNav,
SideNavItems,
SideNavMenu,
SideNavMenuItem,
SideNavLink,
SkipToContent,
Content,
Grid,
Row,
Column,
} from "../types";
let isSideNavOpen = false;
let isOpen = false;
</script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderUtilities>
<HeaderAction bind:isOpen>
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
<HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
<HeaderPanelLink>Switcher item 3</HeaderPanelLink>
<HeaderPanelLink>Switcher item 4</HeaderPanelLink>
<HeaderPanelLink>Switcher item 5</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
</HeaderUtilities>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNavItems>
<SideNavLink text="Link 1" />
<SideNavLink text="Link 2" />
<SideNavLink text="Link 3" />
<SideNavMenu text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
</SideNavItems>
</SideNav>
<Content>
<Grid>
<Row>
<Column>
<h1>Welcome</h1>
</Column>
</Row>
</Grid>
</Content>

71
tests/HeaderUtilities.test.svelte Normal file
View file

@ -0,0 +1,71 @@
<script lang="ts">
import {
Header,
HeaderUtilities,
HeaderAction,
HeaderActionSearch,
HeaderGlobalAction,
HeaderPanelLinks,
HeaderPanelDivider,
HeaderPanelLink,
SideNav,
SideNavItems,
SideNavMenu,
SideNavMenuItem,
SideNavLink,
SkipToContent,
Content,
Grid,
Row,
Column,
} from "../types";
import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
let isSideNavOpen = false;
let isOpen = false;
</script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderUtilities>
<HeaderActionSearch />
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
<HeaderAction bind:isOpen>
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
<HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
<HeaderPanelLink>Switcher item 3</HeaderPanelLink>
<HeaderPanelLink>Switcher item 4</HeaderPanelLink>
<HeaderPanelLink>Switcher item 5</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
</HeaderUtilities>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNavItems>
<SideNavLink text="Link 1" />
<SideNavLink text="Link 2" />
<SideNavLink text="Link 3" />
<SideNavMenu text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
</SideNavItems>
</SideNav>
<Content>
<Grid>
<Row>
<Column>
<h1>Welcome</h1>
</Column>
</Row>
</Grid>
</Content>

34
tests/HiddenCodeSnippet.test.svelte Normal file
View file

@ -0,0 +1,34 @@
<script lang="ts">
import { ToggleSmall, CodeSnippet } from "../types";
let toggled = false;
const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
</script>
<style>
.hidden {
display: none;
}
</style>
<ToggleSmall
style="margin-bottom: var(--cds-spacing-05)"
labelText="Show code snippets"
bind:toggled
/>
{#if toggled}
<h5>"Show more" will not render</h5><br />
{/if}
<div class:hidden="{!toggled}">
<CodeSnippet type="multi" code="{code}" />
</div>
{#if toggled}
<br /><br />
<h5>"Show more" will render</h5><br />
<div class:hidden="{!toggled}">
<CodeSnippet type="multi" code="{code}" />
</div>
{/if}

23
tests/Icon.test.svelte Normal file
View file

@ -0,0 +1,23 @@
<script lang="ts">
import { Icon } from "../types";
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";
</script>
<Icon render="{Add16}" />
<Icon render="{Add20}" />
<Icon render="{Add24}" />
<Icon render="{Add32}" />
<Icon skeleton render="{Add16}" />
<Icon skeleton size="{20}" render="{Add20}" />
<Icon skeleton size="{24}" render="{Add24}" />
<Icon skeleton size="{32}" render="{Add32}" />

15
tests/InlineLoading.test.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
import { InlineLoading } from "../types";
</script>
<InlineLoading />
<InlineLoading description="Loading metrics..." />
<InlineLoading status="active" description="Submitting..." />
<InlineLoading status="inactive" description="Cancelling..." />
<InlineLoading status="finished" description="Success" />
<InlineLoading status="error" description="An error occurred" />

52
tests/InlineLoadingUx.test.svelte Normal file
View file

@ -0,0 +1,52 @@
<script lang="ts">
import { Button, ButtonSet, InlineLoading } from "../types";
import { onDestroy } from "svelte";
type State = "dormant" | "active" | "finished" | "inactive";
const descriptionMap = {
active: "Submitting...",
finished: "Success",
inactive: "Cancelling...",
};
const stateMap = {
active: "finished",
inactive: "dormant",
finished: "dormant",
};
let timeout = undefined;
let state: State = "dormant";
function reset(incomingState?: State) {
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>

43
tests/InlineNotification.test.svelte Normal file
View file

@ -0,0 +1,43 @@
<script lang="ts">
import { InlineNotification, NotificationActionButton } from "../types";
</script>
<InlineNotification on:close />
<InlineNotification
hideCloseButton
kind="warning"
title="Upcoming scheduled maintenance"
/>
<InlineNotification kind="warning" title="Upcoming scheduled maintenance">
<div slot="actions">
<NotificationActionButton>Learn more</NotificationActionButton>
</div>
</InlineNotification>
<NotificationActionButton>Learn more</NotificationActionButton>
<InlineNotification kind="error" />
<InlineNotification kind="info" />
<InlineNotification kind="info-square" />
<InlineNotification kind="success" />
<InlineNotification kind="warning" />
<InlineNotification kind="warning-alt" />
<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" />

29
tests/Link.test.svelte Normal file
View file

@ -0,0 +1,29 @@
<script lang="ts">
import { Link } from "../types";
</script>
<Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
<Link href="https://www.carbondesignsystem.com/" target="_blank">
Carbon Design System
</Link>
<Link inline href="https://www.carbondesignsystem.com/">
Carbon Design System
</Link>
<Link size="lg" href="https://www.carbondesignsystem.com/">
Carbon Design System
</Link>
<Link size="sm" href="https://www.carbondesignsystem.com/">
Carbon Design System
</Link>
<Link disabled href="https://www.carbondesignsystem.com/">
Carbon Design System
</Link>
<Link visited href="https://www.carbondesignsystem.com/">
Carbon Design System
</Link>

7
tests/Loading.test.svelte Normal file
View file

@ -0,0 +1,7 @@
<script lang="ts">
import { Loading } from "../types";
</script>
<Loading withOverlay="{false}" />
<Loading withOverlay="{false}" small />

20
tests/Modal.test.svelte Normal file
View file

@ -0,0 +1,20 @@
<script lang="ts">
import { Button, Modal } from "../types";
let open = false;
</script>
<Button on:click="{() => (open = true)}">Create database</Button>
<Modal
bind:open
modalHeading="Create database"
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
on:click:button--secondary="{() => (open = false)}"
on:open
on:close
on:submit
>
<p>Create a new Cloudant database in the US South region.</p>
</Modal>

17
tests/ModalExtraSmall.test.svelte Normal file
View file

@ -0,0 +1,17 @@
<script lang="ts">
import { Modal } from "../types";
</script>
<Modal
size="xs"
open
modalHeading="Create database"
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
on:click:button--secondary
on:open
on:close
on:submit
>
<p>Create a new Cloudant database in the US South region.</p>
</Modal>

17
tests/ModalLarge.test.svelte Normal file
View file

@ -0,0 +1,17 @@
<script lang="ts">
import { Modal } from "../types";
</script>
<Modal
size="lg"
open
modalHeading="Create database"
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
on:click:button--secondary
on:open
on:close
on:submit
>
<p>Create a new Cloudant database in the US South region.</p>
</Modal>

17
tests/ModalPreventOutsideClick.test.svelte Normal file
View file

@ -0,0 +1,17 @@
<script lang="ts">
import { Modal } from "../types";
</script>
<Modal
preventCloseOnClickOutside
open
modalHeading="Create database"
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
on:click:button--secondary
on:open
on:close
on:submit
>
<p>Create a new Cloudant database in the US South region.</p>
</Modal>

17
tests/ModalSmall.test.svelte Normal file
View file

@ -0,0 +1,17 @@
<script lang="ts">
import { Modal } from "../types";
</script>
<Modal
size="sm"
open
modalHeading="Create database"
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
on:click:button--secondary
on:open
on:close
on:submit
>
<p>Create a new Cloudant database in the US South region.</p>
</Modal>

68
tests/MultiSelect.test.svelte Normal file
View file

@ -0,0 +1,68 @@
<script lang="ts">
import { MultiSelect } from "../types";
</script>
<MultiSelect
titleText="Contact"
label="Select contact methods..."
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<MultiSelect
titleText="Contact"
label="Select contact methods..."
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
sortItem="{() => {}}"
/>
<MultiSelect
selectedIds="{['0', '1']}"
titleText="Contact"
label="Select contact methods..."
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<MultiSelect
itemToString="{(item) => {
return item.text + ' (' + item.id + ')';
}}"
titleText="Contact"
label="Select contact methods..."
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
sortItem="{() => {}}"
/>
<MultiSelect
light
titleText="Contact"
label="Select contact methods..."
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<MultiSelect
type="inline"
titleText="Contact"
label="Select contact methods..."
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<MultiSelect
size="xl"
titleText="Contact"
label="Select contact methods..."
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<MultiSelect
size="sm"
titleText="Contact"
label="Select contact methods..."
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>
<MultiSelect
filterable
titleText="Contact"
placeholder="Filter contact methods..."
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
/>

12
tests/NarrowGrid.test.svelte Normal file
View file

@ -0,0 +1,12 @@
<script lang="ts">
import { Grid, Row, Column } from "../types";
</script>
<Grid narrow>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>

37
tests/NumberInput.test.svelte Normal file
View file

@ -0,0 +1,37 @@
<script lang="ts">
import { NumberInput, NumberInputSkeleton } from "../types";
</script>
<NumberInput label="Clusters" />
<NumberInput
label="Clusters"
helperText="Clusters provisioned in your region"
/>
<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)"
/>
<NumberInput hideLabel label="Clusters" />
<NumberInput light label="Clusters" />
<NumberInput mobile label="Clusters" />
<NumberInput size="xl" label="Clusters" />
<NumberInput size="sm" label="Clusters" />
<NumberInput invalid invalidText="An error occurred" label="Clusters" />
<NumberInput disabled label="Clusters" />
<NumberInputSkeleton />
<NumberInputSkeleton hideLabel />

32
tests/OffsetColumns.test.svelte Normal file
View file

@ -0,0 +1,32 @@
<script lang="ts">
import { Grid, Row, Column } from "../types";
</script>
<Grid>
<Row>
<Column
sm="{{ span: 1, offset: 3 }}"
style="outline: 1px solid var(--cds-interactive-04)"
>
Offset 3
</Column>
<Column
sm="{{ span: 2, offset: 2 }}"
style="outline: 1px solid var(--cds-interactive-04)"
>
Offset 2
</Column>
<Column
sm="{{ span: 3, offset: 1 }}"
style="outline: 1px solid var(--cds-interactive-04)"
>
Offset 1
</Column>
<Column
sm="{{ span: 4, offset: 0 }}"
style="outline: 1px solid var(--cds-interactive-04)"
>
Offset 0
</Column>
</Row>
</Grid>

57
tests/OrderedList.test.svelte Normal file
View file

@ -0,0 +1,57 @@
<script lang="ts">
import { OrderedList, ListItem, Link } from "../types";
</script>
<OrderedList>
<ListItem>Ordered list item</ListItem>
<ListItem>Ordered list item</ListItem>
<ListItem>Ordered list item</ListItem>
</OrderedList>
<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>
<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>
<OrderedList native>
<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>

77
tests/OverflowMenu.test.svelte Normal file
View file

@ -0,0 +1,77 @@
<script lang="ts">
import { OverflowMenu, OverflowMenuItem } from "../types";
import Add16 from "carbon-icons-svelte/lib/Add16";
</script>
<OverflowMenu>
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem
href="https://cloud.ibm.com/docs/api-gateway/"
text="API documentation"
/>
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
<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>
<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>
<OverflowMenu size="xl">
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem
href="https://cloud.ibm.com/docs/api-gateway/"
text="API documentation"
/>
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
<OverflowMenu size="sm">
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem
href="https://cloud.ibm.com/docs/api-gateway/"
text="API documentation"
/>
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
<OverflowMenu>
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem
href="https://cloud.ibm.com/docs/api-gateway/"
text="API documentation"
/>
<OverflowMenuItem primaryFocus danger text="Delete service" />
</OverflowMenu>
<OverflowMenu icon="{Add16}">
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem
href="https://cloud.ibm.com/docs/api-gateway/"
text="API documentation"
/>
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
<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>

15
tests/Pagination.test.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
import { Pagination, PaginationSkeleton } from "../types";
</script>
<Pagination totalItems="{102}" pageSizes="{[10, 15, 20]}" />
<Pagination totalItems="{102}" page="{4}" />
<Pagination totalItems="{102}" pageSizes="{[16, 36, 99]}" pageSize="{36}" />
<Pagination totalItems="{102}" pageInputDisabled />
<Pagination totalItems="{102}" pageSizeInputDisabled />
<PaginationSkeleton />

7
tests/PaginationNav.test.svelte Normal file
View file

@ -0,0 +1,7 @@
<script lang="ts">
import { PaginationNav } from "../types";
</script>
<PaginationNav />
<PaginationNav total="{3}" loop />

14
tests/PassiveModal.test.svelte Normal file
View file

@ -0,0 +1,14 @@
<script lang="ts">
import { Button, Modal } from "../types";
let open = false;
</script>
<Button kind="tertiary" on:click="{() => (open = true)}">Learn more</Button>
<Modal passiveModal bind:open modalHeading="IBM Cloudant" on:open on:close>
<p>
IBM Cloudant is a distributed, secure database with global availability and
zero vendor lock-in used to build web and mobile apps at scale.
</p>
</Modal>

29
tests/PasswordInput.test.svelte Normal file
View file

@ -0,0 +1,29 @@
<script lang="ts">
import { PasswordInput } from "../types";
</script>
<PasswordInput labelText="Password" placeholder="Enter password..." />
<PasswordInput
labelText="Password"
type="text"
placeholder="Enter password..."
value="as_lta0890sdfpo__!9901"
/>
<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />
<PasswordInput light labelText="Password" placeholder="Enter password..." />
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
<PasswordInput
invalid
invalidText="Incorrect user name or password."
labelText="Password"
placeholder="Enter password..."
/>
<PasswordInput disabled labelText="Password" placeholder="Enter password..." />

65
tests/PersistedHamburgerMenu.test.svelte Normal file
View file

@ -0,0 +1,65 @@
<script lang="ts">
import {
Header,
HeaderNav,
HeaderNavItem,
HeaderNavMenu,
SideNav,
SideNavItems,
SideNavMenu,
SideNavMenuItem,
SideNavLink,
SkipToContent,
Content,
Grid,
Row,
Column,
} from "../types";
let isSideNavOpen = false;
</script>
<Header
persistentHamburgerMenu="{true}"
company="IBM"
platformName="Carbon Svelte"
bind:isSideNavOpen
>
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderNav>
<HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" />
<HeaderNavItem href="/" text="Link 3" />
<HeaderNavMenu text="Menu">
<HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" />
<HeaderNavItem href="/" text="Link 3" />
</HeaderNavMenu>
</HeaderNav>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNavItems>
<SideNavLink text="Link 1" />
<SideNavLink text="Link 2" />
<SideNavLink text="Link 3" />
<SideNavMenu text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
</SideNavItems>
</SideNav>
<Content>
<Grid>
<Row>
<Column>
<h1>Welcome</h1>
</Column>
</Row>
</Grid>
</Content>

83
tests/ProgressIndicator.test.svelte Normal file
View file

@ -0,0 +1,83 @@
<script lang="ts">
import {
ProgressIndicator,
ProgressStep,
ProgressIndicatorSkeleton,
} from "../types";
</script>
<ProgressIndicator currentIndex="{2}">
<ProgressStep
complete
label="Step 1"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
complete
label="Step 2"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
complete
label="Step 3"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
label="Step 4"
description="The progress indicator will listen for clicks on the steps"
/>
</ProgressIndicator>
<ProgressIndicator preventChangeOnClick currentIndex="{2}">
<ProgressStep
complete
label="Step 1"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
complete
label="Step 2"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
complete
label="Step 3"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
label="Step 4"
description="The progress indicator will listen for clicks on the steps"
/>
</ProgressIndicator>
<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>
<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>
<ProgressIndicatorSkeleton count="{3}" />

48
tests/RadioButton.test.svelte Normal file
View file

@ -0,0 +1,48 @@
<script lang="ts">
import {
FormGroup,
RadioButton,
RadioButtonSkeleton,
RadioButtonGroup,
} from "../types";
</script>
<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>
<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>
<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>
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup>
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>
</FormGroup>
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup orientation="vertical">
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>
</FormGroup>

24
tests/RadioSelectableDataTable.test.svelte Normal file
View file

@ -0,0 +1,24 @@
<script lang="ts">
import { DataTable } from "../types";
const headers = [
{ key: "name", value: "Name" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
];
const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
];
let selectedRowIds = [rows[1].id];
$: console.log("selectedRowIds", selectedRowIds);
</script>
<DataTable radio bind:selectedRowIds headers="{headers}" rows="{rows}" />

15
tests/RadioTile.test.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
import { TileGroup, RadioTile } from "../types";
</script>
<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>
<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>

40
tests/ResponsiveGrid.test.svelte Normal file
View file

@ -0,0 +1,40 @@
<script lang="ts">
import { Grid, Row, Column } from "../types";
</script>
<Grid>
<Row>
<Column
sm="{1}"
md="{4}"
lg="{8}"
style="outline: 1px solid var(--cds-interactive-04)"
>
sm: 1, md: 4, lg: 8
</Column>
<Column
sm="{1}"
md="{2}"
lg="{2}"
style="outline: 1px solid var(--cds-interactive-04)"
>
sm: 1, md: 2, lg: 2
</Column>
<Column
sm="{1}"
md="{1}"
lg="{1}"
style="outline: 1px solid var(--cds-interactive-04)"
>
sm: 1, md: 1, lg: 1
</Column>
<Column
sm="{1}"
md="{1}"
lg="{1}"
style="outline: 1px solid var(--cds-interactive-04)"
>
sm: 1, md: 1, lg: 1
</Column>
</Row>
</Grid>

21
tests/Search.test.svelte Normal file
View file

@ -0,0 +1,21 @@
<script lang="ts">
import { Search } from "../types";
</script>
<Search />
<Search placeholder="Search catalog..." value="Cloud functions" />
<Search light />
<Search size="lg" />
<Search size="sm" />
<Search disabled />
<Search skeleton />
<Search size="lg" skeleton />
<Search size="sm" skeleton />

64
tests/Select.test.svelte Normal file
View file

@ -0,0 +1,64 @@
<script lang="ts">
import {
Select,
SelectItem,
SelectItemGroup,
SelectSkeleton,
} from "../types";
</script>
<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>
<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>
<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>
<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>
<Select size="xl" 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>
<Select size="sm" 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>
<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>
<SelectSkeleton />

24
tests/SelectableDataTable.test.svelte Normal file
View file

@ -0,0 +1,24 @@
<script lang="ts">
import { DataTable } from "../types";
const headers = [
{ key: "name", value: "Name" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
];
const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
];
let selectedRowIds = [];
$: console.log("selectedRowIds", selectedRowIds);
</script>
<DataTable selectable bind:selectedRowIds headers="{headers}" rows="{rows}" />

15
tests/SelectableTile.test.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
import { SelectableTile } from "../types";
</script>
<SelectableTile selected>Multi-select Tile</SelectableTile>
<SelectableTile selected>Multi-select Tile</SelectableTile>
<SelectableTile>Multi-select Tile</SelectableTile>
<SelectableTile light selected>Multi-select Tile</SelectableTile>
<SelectableTile light selected>Multi-select Tile</SelectableTile>
<SelectableTile light>Multi-select Tile</SelectableTile>

7
tests/SkeletonPlaceholder.test.svelte Normal file
View file

@ -0,0 +1,7 @@
<script lang="ts">
import { SkeletonPlaceholder } from "../types";
</script>
<SkeletonPlaceholder />
<SkeletonPlaceholder style="height: 12rem; width: 12rem;" />

15
tests/SkeletonText.test.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
import { SkeletonText } from "../types";
</script>
<SkeletonText />
<SkeletonText heading />
<SkeletonText heading />
<SkeletonText paragraph />
<SkeletonText paragraph lines="{8}" />
<SkeletonText paragraph width="50%" />

36
tests/Slider.test.svelte Normal file
View file

@ -0,0 +1,36 @@
<script lang="ts">
import { Slider, SliderSkeleton } from "../types";
</script>
<Slider />
<Slider
labelText="Runtime memory (MB)"
min="{10}"
max="{990}"
maxLabel="990 MB"
value="{100}"
/>
<Slider
labelText="Runtime memory (MB)"
min="{10}"
max="{990}"
maxLabel="990 MB"
value="{100}"
step="{10}"
/>
<Slider
light
labelText="Runtime memory (MB)"
min="{10}"
max="{990}"
maxLabel="990 MB"
value="{100}"
step="{10}"
/>
<SliderSkeleton />
<SliderSkeleton hideLabel />

94
tests/StructuredList.test.svelte Normal file
View file

@ -0,0 +1,94 @@
<script lang="ts">
import {
StructuredList,
StructuredListSkeleton,
StructuredListBody,
StructuredListHead,
StructuredListCell,
StructuredListRow,
StructuredListInput,
} from "../types";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
</script>
<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>
<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>
<StructuredListSkeleton rows="{3}" />

39
tests/Tabs.test.svelte Normal file
View file

@ -0,0 +1,39 @@
<script lang="ts">
import { Tabs, Tab, TabContent, TabsSkeleton } from "../types";
</script>
<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>
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
<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>
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
<TabsSkeleton count="{3}" />

31
tests/Tag.test.svelte Normal file
View file

@ -0,0 +1,31 @@
<script lang="ts">
import { Tag } from "../types";
</script>
<Tag class="my-class" style="margin: 1rem;">IBM Cloud</Tag>
<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>
<Tag filter on:click>Filterable</Tag>
<Tag skeleton />

46
tests/TextArea.test.svelte Normal file
View file

@ -0,0 +1,46 @@
<script lang="ts">
import { TextArea, TextAreaSkeleton } from "../types";
</script>
<TextArea labelText="App description" placeholder="Enter a description..." />
<TextArea
labelText="App description"
helperText="A rich description helps us better recommend related products and services"
placeholder="Enter a description..."
/>
<TextArea
hideLabel
labelText="App description"
placeholder="Enter a description..."
/>
<TextArea
light
labelText="App description"
placeholder="Enter a description..."
/>
<TextArea
rows="{10}"
labelText="App description"
placeholder="Enter a description..."
/>
<TextArea
invalid
invalidText="Only plain text characters are allowed"
labelText="App description"
placeholder="Enter a description..."
/>
<TextArea
disabled
labelText="App description"
placeholder="Enter a description..."
/>
<TextAreaSkeleton />
<TextAreaSkeleton hideLabel />

34
tests/TextInput.test.svelte Normal file
View file

@ -0,0 +1,34 @@
<script lang="ts">
import { TextInput, TextInputSkeleton } from "../types";
</script>
<TextInput labelText="User name" placeholder="Enter user name..." />
<TextInput
labelText="User name"
helperText="Your user name is associated with your email"
placeholder="Enter user name..."
/>
<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
<TextInput light labelText="User name" placeholder="Enter user name..." />
<TextInput inline labelText="User name" placeholder="Enter user name..." />
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
<TextInput
invalid
invalidText="User name is already taken. Please try another."
labelText="User name"
placeholder="Enter user name..."
/>
<TextInput disabled labelText="User name" placeholder="Enter user name..." />
<TextInputSkeleton />
<TextInputSkeleton hideLabel />

7
tests/Tile.test.svelte Normal file
View file

@ -0,0 +1,7 @@
<script lang="ts">
import { Tile } from "../types";
</script>
<Tile>Content</Tile>
<Tile light>Content</Tile>

58
tests/TimePicker.test.svelte Normal file
View file

@ -0,0 +1,58 @@
<script lang="ts">
import { TimePicker, TimePickerSelect, SelectItem } from "../types";
</script>
<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>
<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>
<TimePicker size="xl" 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>
<TimePicker size="sm" 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>
<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>

35
tests/ToastNotification.test.svelte Normal file
View file

@ -0,0 +1,35 @@
<script lang="ts">
import { ToastNotification } from "../types";
</script>
<ToastNotification />
<ToastNotification
hideCloseButton
kind="warning"
title="Upcoming scheduled maintenance"
/>
<ToastNotification kind="error" />
<ToastNotification kind="info" />
<ToastNotification kind="info-square" />
<ToastNotification kind="success" />
<ToastNotification kind="warning" />
<ToastNotification kind="warning-alt" />
<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" />

13
tests/Toggle.test.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import { Toggle, ToggleSkeleton } from "../types";
</script>
<Toggle labelText="Push notifications" />
<Toggle labelText="Push notifications" toggled />
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
<Toggle labelText="Push notifications" disabled />
<ToggleSkeleton />

13
tests/ToggleSmall.test.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import { ToggleSmall, ToggleSmallSkeleton } from "../types";
</script>
<ToggleSmall labelText="Push notifications" />
<ToggleSmall labelText="Push notifications" toggled />
<ToggleSmall labelText="Push notifications" labelA="No" labelB="Yes" />
<ToggleSmall labelText="Push notifications" disabled />
<ToggleSmallSkeleton />

52
tests/Tooltip.test.svelte Normal file
View file

@ -0,0 +1,52 @@
<script lang="ts">
import { Tooltip, Link, Button } from "../types";
import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
</script>
<Tooltip>
<p>Resources are provisioned based on your account's organization.</p>
</Tooltip>
<Tooltip triggerText="Resource list">
<p>Resources are provisioned based on your account's organization.</p>
</Tooltip>
<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>
<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>
<Link href="/">Learn more</Link>
<Button size="small">Manage</Button>
<Tooltip triggerText="Resource list" icon="{Catalog16}">
<p>Resources are provisioned based on your account's organization.</p>
</Tooltip>
<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>

24
tests/TooltipDefinition.test.svelte Normal file
View file

@ -0,0 +1,24 @@
<script lang="ts">
import { TooltipDefinition } from "../types";
</script>
<TooltipDefinition
tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
>
Armonk
</TooltipDefinition>
<TooltipDefinition
direction="top"
align="start"
tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
>
Armonk
</TooltipDefinition>
<TooltipDefinition>
Armonk
<span slot="tooltip" style="color: red">
IBM Corporate Headquarters is based in Armonk, New York.
</span>
</TooltipDefinition>

25
tests/TooltipIcon.test.svelte Normal file
View file

@ -0,0 +1,25 @@
<script lang="ts">
import { TooltipIcon } from "../types";
import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
import Filter20 from "carbon-icons-svelte/lib/Filter20";
</script>
<TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
<Carbon24 />
</TooltipIcon>
<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>

39
tests/UnorderedList.test.svelte Normal file
View file

@ -0,0 +1,39 @@
<script lang="ts">
import { UnorderedList, ListItem, Link } from "../types";
</script>
<UnorderedList>
<ListItem>Unordered list item</ListItem>
<ListItem>Unordered list item</ListItem>
<ListItem>Unordered list item</ListItem>
</UnorderedList>
<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>
<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>

21
tests/carbon-components-svelte-tests.svelte
View file

@ -1,21 +0,0 @@
<script lang="ts">
// example of a base import
import { Tag } from "../types";
// example of a direct import
import TagSkeleton from "../types/Tag/TagSkeleton";
</script>
<!-- the "class", "style" attributes should not cause an error -->
<Tag
class="class-name"
style="color: red;"
type="red"
on:click="{(e) => {
console.log(e);
}}"
>
text
</Tag>
<TagSkeleton class="class-name" style="color: red;" />