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

chore: update dependencies, remove jest

Browse source 
- remove docs/palimpsest folders (to be replaced)
- remove Layout Storybook component
This commit is contained in:
Eric Liu 2020-07-19 06:53:10 -07:00
commit 76df51674d
110 changed files with 2604 additions and 17979 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/Breadcrumb/Breadcrumb.test.js
View file

@ -1,46 +0,0 @@
import { render } from "@testing-library/svelte";
import Component from "./Breadcrumb.Story.svelte";
describe("Breadcrumb", () => {
function getLastBreadcrumbItem(container) {
const breadcrumbItems = container.querySelectorAll(".bx--breadcrumb-item");
return breadcrumbItems[breadcrumbItems.length - 1];
}
test("default", () => {
const { getByText, container, rerender } = render(Component, {
noTrailingSlash: false,
});
const selector = ".bx--breadcrumb--no-trailing-slash";
expect(getByText("Breadcrumb 1")).toBeInTheDocument();
expect(getByText("Breadcrumb 2")).toBeInTheDocument();
expect(getByText("Breadcrumb 3")).toBeInTheDocument();
expect(container.querySelector(selector)).not.toBeInTheDocument();
expect(container.innerHTML).toMatchSnapshot();
rerender({ props: { noTrailingSlash: true } });
expect(container.querySelector(selector)).toBeInTheDocument();
expect(container.innerHTML).toMatchSnapshot();
});
test("skeleton", () => {
const { container } = render(Component, { story: "skeleton" });
expect(container.innerHTML).toMatchSnapshot();
});
test("current page", () => {
const { container } = render(Component, { story: "current page" });
const lastItem = getLastBreadcrumbItem(container);
expect(lastItem.classList.contains("bx--breadcrumb-item--current")).toEqual(
true
);
});
test("current page with aria-current", () => {
const { container } = render(Component, {
story: "current page with aria-current",
});
const lastItem = getLastBreadcrumbItem(container);
expect(lastItem.querySelector('[aria-current="page"]')).toBeTruthy();
});
});

7
src/components/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap
View file

@ -1,7 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Breadcrumb default 1`] = `"<div><div class=\\"layout\\"><nav aria-label=\\"Breadcrumb\\"><ol class=\\"bx--breadcrumb\\"><li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"/#\\">Breadcrumb 1</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 2</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 3</a></li></ol></nav></div></div>"`;
exports[`Breadcrumb default 2`] = `"<div><div class=\\"layout\\"><nav aria-label=\\"Breadcrumb\\"><ol class=\\"bx--breadcrumb bx--breadcrumb--no-trailing-slash\\"><li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"/#\\">Breadcrumb 1</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 2</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 3</a></li></ol></nav></div></div>"`;
exports[`Breadcrumb skeleton 1`] = `"<div><div class=\\"layout\\"><div class=\\"bx--breadcrumb bx--skeleton\\"><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\">&nbsp;</span> </div><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\">&nbsp;</span> </div><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\">&nbsp;</span> </div></div></div></div>"`;

278
src/components/ComposedModal/ComposedModal.Story.svelte
View file

@ -2,7 +2,6 @@
export let story = undefined;
const { modalBody } = $$props;
import Layout from "../../internal/ui/Layout.svelte";
import { Button } from "../Button";
import ComposedModal from "./ComposedModal.svelte";
import ModalHeader from "./ModalHeader.svelte";
@ -12,152 +11,147 @@
$: open = false;
</script>
<Layout>
{#if story === undefined}
<ComposedModal {...$$props.composedModal}>
<ModalHeader {...$$props.modalHeader} />
<ModalBody
{...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
{#if story === undefined}
<ComposedModal {...$$props.composedModal}>
<ModalHeader {...$$props.modalHeader} />
<ModalBody
{...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
<p>
Please see ModalWrapper for more examples and demo of the functionality.
</p>
{#if modalBody.hasScrollingContent}
<p>
Please see ModalWrapper for more examples and demo of the
functionality.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
{#if modalBody.hasScrollingContent}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis,
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
tellus. Quisque consectetur non risus eu rutrum.{' '}
</p>
{/if}
</ModalBody>
<ModalFooter {...$$props.modalFooter} />
</ComposedModal>
{/if}
{/if}
</ModalBody>
<ModalFooter {...$$props.modalFooter} />
</ComposedModal>
{/if}
{#if story === 'child nodes'}
<ComposedModal {...$$props.composedModal}>
<ModalHeader {...$$props.modalHeader}>
<h1>Testing</h1>
</ModalHeader>
<ModalBody
{...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
{#if story === 'child nodes'}
<ComposedModal {...$$props.composedModal}>
<ModalHeader {...$$props.modalHeader}>
<h1>Testing</h1>
</ModalHeader>
<ModalBody
{...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
<p>
Please see ModalWrapper for more examples and demo of the functionality.
</p>
{#if modalBody.hasScrollingContent}
<p>
Please see ModalWrapper for more examples and demo of the
functionality.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
{#if modalBody.hasScrollingContent}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis,
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
tellus. Quisque consectetur non risus eu rutrum.{' '}
</p>
{/if}
</ModalBody>
<ModalFooter>
<Button kind="secondary">Cancel</Button>
<Button kind={$$props.composedModal.danger ? 'danger' : 'primary'}>
Primary
</Button>
</ModalFooter>
</ComposedModal>
{/if}
{#if story === 'title'}
<ComposedModal
{...$$props.composedModal}
open
on:close={() => {}}
on:submit={() => {}}>
<ModalHeader
{...$$props.modalHeader}
title="Passive modal title as the message. Should be direct and 3 lines
or less." />
<ModalBody {...$$props.modalBody} />
<ModalFooter {...$$props.modalFooter} />
</ComposedModal>
{/if}
{#if story === 'trigger'}
<div>
<Button
on:click={() => {
open = true;
}}>
Launch composed modal
{/if}
</ModalBody>
<ModalFooter>
<Button kind="secondary">Cancel</Button>
<Button kind={$$props.composedModal.danger ? 'danger' : 'primary'}>
Primary
</Button>
</div>
<ComposedModal
{...$$props.composedModal}
{open}
on:close={() => (open = false)}>
<ModalHeader {...$$props.modalHeader} />
<ModalBody
{...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
</ModalFooter>
</ComposedModal>
{/if}
{#if story === 'title'}
<ComposedModal
{...$$props.composedModal}
open
on:close={() => {}}
on:submit={() => {}}>
<ModalHeader
{...$$props.modalHeader}
title="Passive modal title as the message. Should be direct and 3 lines or
less." />
<ModalBody {...$$props.modalBody} />
<ModalFooter {...$$props.modalFooter} />
</ComposedModal>
{/if}
{#if story === 'trigger'}
<div>
<Button
on:click={() => {
open = true;
}}>
Launch composed modal
</Button>
</div>
<ComposedModal
{...$$props.composedModal}
{open}
on:close={() => (open = false)}>
<ModalHeader {...$$props.modalHeader} />
<ModalBody
{...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
<p>
Please see ModalWrapper for more examples and demo of the functionality.
</p>
{#if modalBody.hasScrollingContent}
<p>
Please see ModalWrapper for more examples and demo of the
functionality.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
{#if modalBody.hasScrollingContent}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis,
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
tellus. Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis,
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
tellus. Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis,
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
tellus. Quisque consectetur non risus eu rutrum.{' '}
</p>
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis,
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
tellus. Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis,
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
tellus. Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis,
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
tellus. Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis,
ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
tellus. Quisque consectetur non risus eu rutrum.{' '}
</p>
{/if}
</ModalBody>
<ModalFooter {...$$props.modalFooter} />
</ComposedModal>
{/if}
</Layout>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
{/if}
</ModalBody>
<ModalFooter {...$$props.modalFooter} />
</ComposedModal>
{/if}

67
src/components/ContentSwitcher/ContentSwitcher.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import ContentSwitcher from "./ContentSwitcher.svelte";
import Switch from "./Switch.svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
@ -10,37 +9,35 @@
$: console.log("bind selectedIndex", selectedIndex);
</script>
<Layout>
{#if story === 'selected'}
<ContentSwitcher
on:change={({ detail }) => {
console.log('on:change', detail);
}}>
<Switch {...$$props} text="First section" />
<Switch {...$$props} text="Second section" selected />
<Switch {...$$props} text="Third section" />
</ContentSwitcher>
{:else}
<ContentSwitcher
bind:selectedIndex
on:change={({ detail }) => {
console.log('on:change', detail);
}}>
<Switch {...$$props} text="First section" />
<Switch {...$$props} text="Second section" />
<Switch {...$$props}>
<div style="display: flex; align-items:center;">
<Add16 style="margin-right: .25rem;" />
Third section
</div>
</Switch>
</ContentSwitcher>
<div
style="margin-top: 1.5rem"
on:click={() => {
selectedIndex = 1;
}}>
Programmatically set to second index
</div>
{/if}
</Layout>
{#if story === 'selected'}
<ContentSwitcher
on:change={({ detail }) => {
console.log('on:change', detail);
}}>
<Switch {...$$props} text="First section" />
<Switch {...$$props} text="Second section" selected />
<Switch {...$$props} text="Third section" />
</ContentSwitcher>
{:else}
<ContentSwitcher
bind:selectedIndex
on:change={({ detail }) => {
console.log('on:change', detail);
}}>
<Switch {...$$props} text="First section" />
<Switch {...$$props} text="Second section" />
<Switch {...$$props}>
<div style="display: flex; align-items:center;">
<Add16 style="margin-right: .25rem;" />
Third section
</div>
</Switch>
</ContentSwitcher>
<div
style="margin-top: 1.5rem"
on:click={() => {
selectedIndex = 1;
}}>
Programmatically set to second index
</div>
{/if}

19
src/components/CopyButton/CopyButton.Story.svelte
View file

@ -1,15 +1,12 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import CopyButton from "./CopyButton.svelte";
</script>
<Layout>
<CopyButton
{...$$props}
on:click={() => {
console.log('click');
}}
on:animationend={e => {
console.log('animation end', e.animationName);
}} />
</Layout>
<CopyButton
{...$$props}
on:click={() => {
console.log('click');
}}
on:animationend={e => {
console.log('animation end', e.animationName);
}} />

143
src/components/DataTable/DataTable.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import DataTable from "./DataTable.svelte";
import Table from "./Table.svelte";
import TableBody from "./TableBody.svelte";
@ -78,77 +77,75 @@
$: sortable = true;
</script>
<Layout>
{#if story === 'composed'}
<DataTable {...$$props} {rows} {headers} let:props>
<TableContainer
title="DataTable"
description="With default options"
{...props.getTableContainerProps()}>
<Table {...props.getTableProps()}>
<TableHead>
<TableRow>
{#each props.headers as header, i (header.key)}
<TableHeader {...props.getHeaderProps({ header })}>
{header.header}
</TableHeader>
{#if story === 'composed'}
<DataTable {...$$props} {rows} {headers} let:props>
<TableContainer
title="DataTable"
description="With default options"
{...props.getTableContainerProps()}>
<Table {...props.getTableProps()}>
<TableHead>
<TableRow>
{#each props.headers as header, i (header.key)}
<TableHeader {...props.getHeaderProps({ header })}>
{header.header}
</TableHeader>
{/each}
</TableRow>
</TableHead>
<TableBody>
{#each props.rows as row, i}
<TableRow {...props.getRowProps({ row })}>
{#each row.cells as cell, j}
<TableCell>{cell.value}</TableCell>
{/each}
</TableRow>
</TableHead>
<TableBody>
{#each props.rows as row, i}
<TableRow {...props.getRowProps({ row })}>
{#each row.cells as cell, j}
<TableCell>{cell.value}</TableCell>
{/each}
</TableRow>
{/each}
</TableBody>
</Table>
</TableContainer>
</DataTable>
{:else if story === 'sortable'}
<DataTable
bind:sortable
title={$$props.title}
description={$$props.description}
zebra={$$props.zebra}
size={$$props.size}
stickyHeader={$$props.stickyHeader}
on:click={({ detail }) => {
console.log('on:click', detail);
}}
on:click:header={({ detail }) => {
console.log('on:click:header', detail);
}}
on:click:row={({ detail }) => {
console.log('on:click:row', detail);
}}
on:click:cell={({ detail }) => {
console.log('on:click:cell', detail);
}}
{rows}
{headers} />
{:else}
<DataTable
title={$$props.title}
description={$$props.description}
zebra={$$props.zebra}
size={$$props.size}
stickyHeader={$$props.stickyHeader}
on:click={({ detail }) => {
console.log('on:click', detail);
}}
on:click:header={({ detail }) => {
console.log('on:click:header', detail);
}}
on:click:row={({ detail }) => {
console.log('on:click:row', detail);
}}
on:click:cell={({ detail }) => {
console.log('on:click:cell', detail);
}}
{rows}
{headers} />
{/if}
</Layout>
{/each}
</TableBody>
</Table>
</TableContainer>
</DataTable>
{:else if story === 'sortable'}
<DataTable
bind:sortable
title={$$props.title}
description={$$props.description}
zebra={$$props.zebra}
size={$$props.size}
stickyHeader={$$props.stickyHeader}
on:click={({ detail }) => {
console.log('on:click', detail);
}}
on:click:header={({ detail }) => {
console.log('on:click:header', detail);
}}
on:click:row={({ detail }) => {
console.log('on:click:row', detail);
}}
on:click:cell={({ detail }) => {
console.log('on:click:cell', detail);
}}
{rows}
{headers} />
{:else}
<DataTable
title={$$props.title}
description={$$props.description}
zebra={$$props.zebra}
size={$$props.size}
stickyHeader={$$props.stickyHeader}
on:click={({ detail }) => {
console.log('on:click', detail);
}}
on:click:header={({ detail }) => {
console.log('on:click:header', detail);
}}
on:click:row={({ detail }) => {
console.log('on:click:row', detail);
}}
on:click:cell={({ detail }) => {
console.log('on:click:cell', detail);
}}
{rows}
{headers} />
{/if}

9
src/components/DataTableSkeleton/DataTableSkeleton.Story.svelte
View file

@ -1,10 +1,7 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import DataTableSkeleton from "./DataTableSkeleton.svelte";
</script>
<Layout>
<div style="width: 800px">
<DataTableSkeleton {...$$props} />
</div>
</Layout>
<div style="width: 800px">
<DataTableSkeleton {...$$props} />
</div>

92
src/components/DatePicker/DatePicker.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import DatePicker from "./DatePicker.svelte";
import DatePickerInput from "./DatePickerInput.svelte";
import DatePickerSkeleton from "./DatePicker.Skeleton.svelte";
@ -10,56 +9,53 @@
$: value = "";
</script>
<Layout>
{#if story === 'skeleton'}
<DatePickerSkeleton range />
{:else if story === 'single'}
<div>
<DatePicker
{...$$props.datePicker}
bind:value
datePickerType="single"
on:change={({ detail }) => {
console.log('change', detail);
}}>
<DatePickerInput
{...$$props.datePickerInput}
on:close={() => {
console.log('on:close');
}}
on:input={() => {
console.log('on:input');
}} />
</DatePicker>
<button
on:click|preventDefault={() => {
value = '12/12/2020';
}}
style="margin-top: 1rem">
Set date to 12/12/2020
</button>
</div>
{:else if story === 'range'}
<DatePicker {...$$props.datePicker} bind:value datePickerType="range">
<DatePickerInput
{...$$props.datePickerInput}
id="date-picker-input-id-start"
labelText="Start date" />
<DatePickerInput
{...$$props.datePickerInput}
id="date-picker-input-id-end"
labelText="End date" />
</DatePicker>
{:else}
{#if story === 'skeleton'}
<DatePickerSkeleton range />
{:else if story === 'single'}
<div>
<DatePicker
{...$$props.datePicker}
bind:datePickerType
bind:value
datePickerType="single"
on:change={({ detail }) => {
console.log('on:change', detail);
console.log('change', detail);
}}>
<DatePickerInput {...$$props.datePickerInput} />
<DatePickerInput
{...$$props.datePickerInput}
on:close={() => {
console.log('on:close');
}}
on:input={() => {
console.log('on:input');
}} />
</DatePicker>
{/if}
</Layout>
<button
on:click|preventDefault={() => {
value = '12/12/2020';
}}
style="margin-top: 1rem">
Set date to 12/12/2020
</button>
</div>
{:else if story === 'range'}
<DatePicker {...$$props.datePicker} bind:value datePickerType="range">
<DatePickerInput
{...$$props.datePickerInput}
id="date-picker-input-id-start"
labelText="Start date" />
<DatePickerInput
{...$$props.datePickerInput}
id="date-picker-input-id-end"
labelText="End date" />
</DatePicker>
{:else}
<DatePicker
{...$$props.datePicker}
bind:datePickerType
bind:value
on:change={({ detail }) => {
console.log('on:change', detail);
}}>
<DatePickerInput {...$$props.datePickerInput} />
</DatePicker>
{/if}

60
src/components/Dropdown/Dropdown.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import { Button } from "../Button";
import Dropdown from "./Dropdown.svelte";
import DropdownSkeleton from "./Dropdown.Skeleton.svelte";
@ -15,34 +14,31 @@
$: selectedIndex = -1;
</script>
<Layout>
{#if story === 'skeleton'}
<div style="width: 300px">
<DropdownSkeleton />
&nbsp;
<DropdownSkeleton inline />
</div>
{:else}
<p>Currently, this component does not support items as slots.</p>
<p>
<code>items</code>
must be an array of objects; mandatory fields are `id` and `text`.
</p>
<pre style="margin-top: 1rem;">
<code>{'items = Array<{ id: string; text: string; }>'}</code>
</pre>
<div style="margin-top: 2rem; margin-bottom: 2rem;">
<Button
size="small"
on:click={() => {
selectedIndex = selectedIndex > -1 ? -1 : 1;
}}>
{selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"}
</Button>
</div>
<div style="width: 300px">
<Dropdown {...$$props} bind:selectedIndex {items} />
</div>
{/if}
</Layout>
{#if story === 'skeleton'}
<div style="width: 300px">
<DropdownSkeleton />
&nbsp;
<DropdownSkeleton inline />
</div>
{:else}
<p>Currently, this component does not support items as slots.</p>
<p>
<code>items</code>
must be an array of objects; mandatory fields are `id` and `text`.
</p>
<pre style="margin-top: 1rem;">
<code>{'items = Array<{ id: string; text: string; }>'}</code>
</pre>
<div style="margin-top: 2rem; margin-bottom: 2rem;">
<Button
size="small"
on:click={() => {
selectedIndex = selectedIndex > -1 ? -1 : 1;
}}>
{selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"}
</Button>
</div>
<div style="width: 300px">
<Dropdown {...$$props} bind:selectedIndex {items} />
</div>
{/if}

85
src/components/FileUploader/FileUploader.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import { Button } from "../Button";
import FileUploader from "./FileUploader.svelte";
import FileUploaderButton from "./FileUploaderButton.svelte";
@ -14,50 +13,48 @@
$: disabled = files.length === 0;
</script>
<Layout>
<div>
{#if story === 'button'}
<FileUploaderButton {...$$props} />
{:else if story === 'drop container'}
<FileUploaderDropContainer
<div>
{#if story === 'button'}
<FileUploaderButton {...$$props} />
{:else if story === 'drop container'}
<FileUploaderDropContainer
{...$$props}
on:add={({ detail }) => {
console.log(detail);
}} />
{:else if story === 'item'}
<FileUploaderItem
{...$$props}
on:delete={({ detail }) => {
console.log(detail);
}}
on:click={() => {
console.log('click');
}} />
{:else if story === 'uploader'}
<div class="bx--file__container">
<FileUploader
bind:this={fileUploader}
{...$$props}
bind:files
on:add={({ detail }) => {
console.log(detail);
}} />
{:else if story === 'item'}
<FileUploaderItem
{...$$props}
on:delete={({ detail }) => {
console.log(detail);
console.log('add', detail);
}}
on:click={() => {
console.log('click');
on:remove={({ detail }) => {
console.log('remove', detail);
}} />
{:else if story === 'uploader'}
<div class="bx--file__container">
<FileUploader
bind:this={fileUploader}
{...$$props}
bind:files
on:add={({ detail }) => {
console.log('add', detail);
}}
on:remove={({ detail }) => {
console.log('remove', detail);
}} />
<Button
kind="secondary"
size="small"
style="margin-top: 1rem"
{disabled}
on:click={fileUploader.clearFiles}>
Clear File{files.length === 1 ? '' : 's'}
</Button>
</div>
{:else if story === 'skeleton'}
<div style="width: 500px">
<FileUploaderSkeleton />
</div>
{/if}
</div>
</Layout>
<Button
kind="secondary"
size="small"
style="margin-top: 1rem"
{disabled}
on:click={fileUploader.clearFiles}>
Clear File{files.length === 1 ? '' : 's'}
</Button>
</div>
{:else if story === 'skeleton'}
<div style="width: 500px">
<FileUploaderSkeleton />
</div>
{/if}
</div>

173
src/components/Form/Form.Story.svelte
View file

@ -1,5 +1,4 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import { Checkbox } from "../Checkbox";
import { FormGroup } from "../FormGroup";
import { FileUploader } from "../FileUploader";
@ -15,92 +14,86 @@
import Form from "./Form.svelte";
</script>
<Layout>
<Form
on:submit={event => {
console.log('on:submit', event);
}}>
<FormGroup {...$$props}>
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
<Checkbox id="checkbox-1" labelText="Checkbox Label" />
<Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
</FormGroup>
<NumberInput
id="number-input-1"
label="Number Input"
min={0}
max={100}
value={50}
step={10} />
<FormGroup legendText="Toggle heading">
<Toggle id="toggle-1" />
<Toggle id="toggle-2" disabled />
</FormGroup>
<FormGroup legendText="File Uploader">
<FileUploader
id="file-1"
buttonLabel="Add files"
labelDescription="Choose Files..." />
</FormGroup>
<FormGroup legendText="Radio Button heading">
<RadioButtonGroup
name="radio-button-group"
defaultSelected="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-3"
value="blue"
labelText="Standard Radio Button" />
<RadioButton
id="radio-4"
value="disabled"
labelText="Disabled Radio Button"
disabled />
</RadioButtonGroup>
</FormGroup>
<FormGroup legendText="Search">
<Search id="search-1" labelText="Search" placeholder="Search" />
</FormGroup>
<Select id="select-1" defaultValue="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>
<TextInput
id="text-input-1"
labelText="Text Input label"
placeholder="Placeholder text" />
<TextInput
id="text-input-2"
type="password"
labelText="Password"
required />
<TextInput
id="text-input-3"
type="password"
labelText="Password"
invalidText="Your password must be at least 6 characters as well as
contain at least one uppercase, one lowercase, and one number."
required
invalid />
<TextArea
id="text-area"
labelText="Text Area label"
placeholder="Placeholder text"
rows={4}
cols={50} />
<Button type="submit">Submit</Button>
</Form>
</Layout>
<Form
on:submit={event => {
console.log('on:submit', event);
}}>
<FormGroup {...$$props}>
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
<Checkbox id="checkbox-1" labelText="Checkbox Label" />
<Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
</FormGroup>
<NumberInput
id="number-input-1"
label="Number Input"
min={0}
max={100}
value={50}
step={10} />
<FormGroup legendText="Toggle heading">
<Toggle id="toggle-1" />
<Toggle id="toggle-2" disabled />
</FormGroup>
<FormGroup legendText="File Uploader">
<FileUploader
id="file-1"
buttonLabel="Add files"
labelDescription="Choose Files..." />
</FormGroup>
<FormGroup legendText="Radio Button heading">
<RadioButtonGroup
name="radio-button-group"
defaultSelected="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-3"
value="blue"
labelText="Standard Radio Button" />
<RadioButton
id="radio-4"
value="disabled"
labelText="Disabled Radio Button"
disabled />
</RadioButtonGroup>
</FormGroup>
<FormGroup legendText="Search">
<Search id="search-1" labelText="Search" placeholder="Search" />
</FormGroup>
<Select id="select-1" defaultValue="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>
<TextInput
id="text-input-1"
labelText="Text Input label"
placeholder="Placeholder text" />
<TextInput id="text-input-2" type="password" labelText="Password" required />
<TextInput
id="text-input-3"
type="password"
labelText="Password"
invalidText="Your password must be at least 6 characters as well as contain
at least one uppercase, one lowercase, and one number."
required
invalid />
<TextArea
id="text-area"
labelText="Text Area label"
placeholder="Placeholder text"
rows={4}
cols={50} />
<Button type="submit">Submit</Button>
</Form>

9
src/components/FormItem/FormItem.Story.svelte
View file

@ -1,11 +1,8 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import { NumberInput } from "../NumberInput";
import FormItem from "./FormItem.svelte";
</script>
<Layout>
<FormItem>
<NumberInput id="number-input-1" />
</FormItem>
</Layout>
<FormItem>
<NumberInput id="number-input-1" />
</FormItem>

17
src/components/FormLabel/FormLabel.Story.svelte
View file

@ -1,17 +1,14 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import { Tooltip } from "../Tooltip";
import FormLabel from "./FormLabel.svelte";
</script>
<Layout>
{#if story === 'tooltip'}
<FormLabel>
<Tooltip triggerText="Label">This is the content of the tooltip.</Tooltip>
</FormLabel>
{:else}
<FormLabel>Label</FormLabel>
{/if}
</Layout>
{#if story === 'tooltip'}
<FormLabel>
<Tooltip triggerText="Label">This is the content of the tooltip.</Tooltip>
</FormLabel>
{:else}
<FormLabel>Label</FormLabel>
{/if}

20
src/components/Icon/Icon.Story.svelte
View file

@ -4,20 +4,18 @@
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
import ArrowLeft20 from "carbon-icons-svelte/lib/ArrowLeft20";
import Add24 from "carbon-icons-svelte/lib/Add24";
import Layout from "../../internal/ui/Layout.svelte";
import Icon from "./Icon.svelte";
import IconSkeleton from "./Icon.Skeleton.svelte";
const icons = { ChevronDown16, ArrowLeft20, Add24 };
</script>
<Layout>
{#if story === 'skeleton'}
<div>
<IconSkeleton size={16} style="margin: 2rem;" />
<IconSkeleton size={32} style="margin: 2rem" />
</div>
{:else}
<Icon {...$$props} render={icons[$$props.icon]} />
{/if}
</Layout>
{#if story === 'skeleton'}
<div>
<IconSkeleton size={16} style="margin: 2rem;" />
<IconSkeleton size={32} style="margin: 2rem" />
</div>
{:else}
<Icon {...$$props} render={icons[$$props.icon]} />
{/if}

35
src/components/InlineLoading/InlineLoading.Story.svelte
View file

@ -5,7 +5,6 @@
export let description = undefined;
export let successDelay = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import { Button } from "../Button";
import InlineLoading from "./InlineLoading.svelte";
@ -36,21 +35,19 @@
$: disabled = isSubmitting || success;
</script>
<Layout>
{#if story === 'ux-example'}
<div style="display: flex; width: 300px">
<Button kind="secondary" {disabled}>Cancel</Button>
{#if disabled}
<InlineLoading
style="margin-left: 1rem;"
description={loadingDescription}
status={success ? 'finished' : 'active'}
aria-live={ariaLive} />
{:else}
<Button on:click={handleSubmit}>Submit</Button>
{/if}
</div>
{:else}
<InlineLoading {...props} />
{/if}
</Layout>
{#if story === 'ux-example'}
<div style="display: flex; width: 300px">
<Button kind="secondary" {disabled}>Cancel</Button>
{#if disabled}
<InlineLoading
style="margin-left: 1rem;"
description={loadingDescription}
status={success ? 'finished' : 'active'}
aria-live={ariaLive} />
{:else}
<Button on:click={handleSubmit}>Submit</Button>
{/if}
</div>
{:else}
<InlineLoading {...props} />
{/if}

24
src/components/InlineLoading/InlineLoading.test.js
View file

@ -1,24 +0,0 @@
import { render } from "@testing-library/svelte";
import Component from "./InlineLoading.svelte";
test("InlineLoading", () => {
const { container, rerender } = render(Component, {
description: "description",
iconDescription: "icon description",
});
expect(container.querySelector(".bx--inline-loading")).toHaveTextContent(
"description"
);
expect(container.querySelector(".bx--loading")).toBeInTheDocument();
rerender({ props: { status: "error" } });
expect(
container.querySelector(".bx--inline-loading--error")
).toBeInTheDocument();
rerender({ props: { status: "finished" } });
expect(
container.querySelector(".bx--inline-loading__checkmark-container")
).toBeInTheDocument();
});

9
src/components/Link/Link.Story.svelte
View file

@ -1,13 +1,10 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import Link from "./Link.svelte";
$: ref = null;
$: ref && console.log(ref);
</script>
<Layout>
<div>
<Link {...$$props} bind:ref>Link</Link>
</div>
</Layout>
<div>
<Link {...$$props} bind:ref>Link</Link>
</div>

23
src/components/Link/Link.test.js
View file

@ -1,23 +0,0 @@
import { render } from "@testing-library/svelte";
import Component from "./Link.Story.svelte";
test("Link", () => {
const { container, rerender } = render(Component, {
href: "#",
inline: false,
disabled: false,
});
const selector = ".bx--link";
let element = null;
element = container.querySelector(selector);
expect(element).toHaveAttribute("href", "#");
expect(element).not.toHaveClass("bx--link--inline", "bx--link--disabled");
expect(element).toHaveTextContent("Link");
rerender({ props: { inline: true, disabled: true } });
element = container.querySelector(selector);
expect(element).toHaveClass("bx--link--inline", "bx--link--disabled");
});

5
src/components/Loading/Loading.Story.svelte
View file

@ -1,8 +1,5 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import Loading from "./Loading.svelte";
</script>
<Layout>
<Loading {...$$props} />
</Layout>
<Loading {...$$props} />

24
src/components/Loading/Loading.test.js
View file

@ -1,24 +0,0 @@
import { render } from "@testing-library/svelte";
import Component from "./Loading.svelte";
test("Loading", () => {
const { container, rerender } = render(Component);
let element = container.querySelector(".bx--loading-overlay");
expect(element).toBeInTheDocument();
expect(element).not.toHaveClass("bx--loading-overlay--stop");
expect(element.querySelector(".bx--loading__stroke")).toHaveAttribute(
"r",
"37.5"
);
rerender({ props: { active: false, small: true, withOverlay: false } });
element = container.querySelector(".bx--loading");
expect(element).toHaveClass("bx--loading--small", "bx--loading--stop");
expect(element.querySelector(".bx--loading__background")).toHaveAttribute(
"r",
"26.8125"
);
});

159
src/components/Modal/Modal.Story.svelte
View file

@ -1,91 +1,88 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import { Button } from "../Button";
import Modal from "./Modal.svelte";
let open = $$props.open;
</script>
<Layout>
<div>
<Button
on:click={() => {
open = true;
}}>
Launch modal
</Button>
</div>
<Modal
{...$$props}
bind:open
on:click:button--secondary={() => {
console.log('click button secondary');
open = false;
}}
on:open={() => {
console.log('open');
}}
on:close={() => {
console.log('close');
}}
on:submit={() => {
console.log('submit');
<div>
<Button
on:click={() => {
open = true;
}}>
Launch modal
</Button>
</div>
<Modal
{...$$props}
bind:open
on:click:button--secondary={() => {
console.log('click button secondary');
open = false;
}}
on:open={() => {
console.log('open');
}}
on:close={() => {
console.log('close');
}}
on:submit={() => {
console.log('submit');
}}>
<p>
This component supports two-way binding by default. Please see ComposedModal
for piecemeal functionality.
</p>
{#if $$props.hasScrollingContent}
<p>
This component supports two-way binding by default. Please see
ComposedModal for piecemeal functionality.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
{#if $$props.hasScrollingContent}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
{/if}
</Modal>
</Layout>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
{/if}
</Modal>

41
src/components/MultiSelect/MultiSelect.Story.svelte
View file

@ -1,5 +1,4 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import { Button } from "../Button";
import MultiSelect from "./MultiSelect.svelte";
@ -18,24 +17,22 @@
];
</script>
<Layout>
<div>
<Button
size="small"
on:click={() => {
selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id];
}}>
{selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items
</Button>
</div>
<div style="width: 300px; margin-top: 2rem;">
<MultiSelect
{...$$props}
id="multi-select-id"
name="multi-select-name"
placeholder="Filter..."
bind:selectedIds
bind:items
bind:value />
</div>
</Layout>
<div>
<Button
size="small"
on:click={() => {
selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id];
}}>
{selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items
</Button>
</div>
<div style="width: 300px; margin-top: 2rem;">
<MultiSelect
{...$$props}
id="multi-select-id"
name="multi-select-name"
placeholder="Filter..."
bind:selectedIds
bind:items
bind:value />
</div>

39
src/components/Notification/Notification.Story.svelte
View file

@ -1,29 +1,26 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import InlineNotification from "./InlineNotification.svelte";
import NotificationActionButton from "./NotificationActionButton.svelte";
import ToastNotification from "./ToastNotification.svelte";
</script>
<Layout>
{#if story === 'inline'}
<InlineNotification
{...$$props}
on:close={() => {
console.log('on:close');
}}>
<div slot="actions">
<NotificationActionButton>{$$props.action}</NotificationActionButton>
</div>
</InlineNotification>
{:else if story === 'toast'}
<ToastNotification
{...$$props}
on:close={() => {
console.log('on:close');
}}
style="min-width: 30rem; margin-bottom: .5rem" />
{/if}
</Layout>
{#if story === 'inline'}
<InlineNotification
{...$$props}
on:close={() => {
console.log('on:close');
}}>
<div slot="actions">
<NotificationActionButton>{$$props.action}</NotificationActionButton>
</div>
</InlineNotification>
{:else if story === 'toast'}
<ToastNotification
{...$$props}
on:close={() => {
console.log('on:close');
}}
style="min-width: 30rem; margin-bottom: .5rem" />
{/if}

27
src/components/NumberInput/NumberInput.Story.svelte
View file

@ -1,24 +1,21 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import NumberInput from "./NumberInput.svelte";
import NumberInputSkeleton from "./NumberInput.Skeleton.svelte";
$: value = $$props.value;
</script>
<Layout>
{#if story === 'skeleton'}
<NumberInputSkeleton {...$$props} />
{:else}
<NumberInput
{...$$props}
id="number-input-id"
name="number-input-id"
bind:value
on:change={({ detail }) => {
console.log('on:change', detail);
}} />
{/if}
</Layout>
{#if story === 'skeleton'}
<NumberInputSkeleton {...$$props} />
{:else}
<NumberInput
{...$$props}
id="number-input-id"
name="number-input-id"
bind:value
on:change={({ detail }) => {
console.log('on:change', detail);
}} />
{/if}

57
src/components/OrderedList/OrderedList.Story.svelte
View file

@ -1,37 +1,34 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import { ListItem } from "../ListItem";
import OrderedList from "./OrderedList.svelte";
</script>
<Layout>
<div>
{#if story === 'nested'}
<OrderedList>
<ListItem>
Unordered List level 1
<OrderedList nested>
<ListItem>Ordered List level 2</ListItem>
<ListItem>
Ordered List level 2
<OrderedList nested>
<ListItem>Ordered List level 2</ListItem>
<ListItem>Ordered List level 2</ListItem>
</OrderedList>
</ListItem>
</OrderedList>
</ListItem>
<ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem>
</OrderedList>
{:else}
<OrderedList>
<ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem>
</OrderedList>
{/if}
</div>
</Layout>
<div>
{#if story === 'nested'}
<OrderedList>
<ListItem>
Unordered List level 1
<OrderedList nested>
<ListItem>Ordered List level 2</ListItem>
<ListItem>
Ordered List level 2
<OrderedList nested>
<ListItem>Ordered List level 2</ListItem>
<ListItem>Ordered List level 2</ListItem>
</OrderedList>
</ListItem>
</OrderedList>
</ListItem>
<ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem>
</OrderedList>
{:else}
<OrderedList>
<ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem>
</OrderedList>
{/if}
</div>

154
src/components/OverflowMenu/OverflowMenu.Story.svelte
View file

@ -1,88 +1,84 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import OverflowMenu from "./OverflowMenu.svelte";
import OverflowMenuItem from "./OverflowMenuItem.svelte";
$: primaryFocus = true;
</script>
<Layout>
<div style="padding-left: 6rem">
{#if story === 'links'}
<OverflowMenu
{...$$props.menu}
on:close={({ detail }) => {
console.log('close', detail);
}}>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 1"
bind:primaryFocus />
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 2 is an example of a really long string and how we
recommend handling this"
requireTitle />
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 3"
disabled />
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 4" />
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Danger option"
danger />
</OverflowMenu>
{:else if story === 'trigger'}
<OverflowMenu
{...$$props.menu}
on:close={({ detail }) => {
console.log('close', detail);
}}
style="width: auto">
<div slot="menu" style="padding: 0 1rem">Menu</div>
<OverflowMenuItem
{...$$props.menuItem}
text="Option 1"
bind:primaryFocus />
<OverflowMenuItem
{...$$props.menuItem}
text="Option 2 is an example of a really long string and how we
recommend handling this"
requireTitle />
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
</OverflowMenu>
{:else}
<OverflowMenu
{...$$props.menu}
on:close={({ detail }) => {
console.log('close', detail);
}}>
<OverflowMenuItem
{...$$props.menuItem}
text="Option 1"
bind:primaryFocus />
<OverflowMenuItem
{...$$props.menuItem}
text="Option 2 is an example of a really long string and how we
recommend handling this"
requireTitle />
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
</OverflowMenu>
{/if}
</div>
</Layout>
<div style="padding-left: 6rem">
{#if story === 'links'}
<OverflowMenu
{...$$props.menu}
on:close={({ detail }) => {
console.log('close', detail);
}}>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 1"
bind:primaryFocus />
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 2 is an example of a really long string and how we
recommend handling this"
requireTitle />
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 3"
disabled />
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 4" />
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Danger option"
danger />
</OverflowMenu>
{:else if story === 'trigger'}
<OverflowMenu
{...$$props.menu}
on:close={({ detail }) => {
console.log('close', detail);
}}
style="width: auto">
<div slot="menu" style="padding: 0 1rem">Menu</div>
<OverflowMenuItem
{...$$props.menuItem}
text="Option 1"
bind:primaryFocus />
<OverflowMenuItem
{...$$props.menuItem}
text="Option 2 is an example of a really long string and how we
recommend handling this"
requireTitle />
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
</OverflowMenu>
{:else}
<OverflowMenu
{...$$props.menu}
on:close={({ detail }) => {
console.log('close', detail);
}}>
<OverflowMenuItem
{...$$props.menuItem}
text="Option 1"
bind:primaryFocus />
<OverflowMenuItem
{...$$props.menuItem}
text="Option 2 is an example of a really long string and how we
recommend handling this"
requireTitle />
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
</OverflowMenu>
{/if}
</div>

23
src/components/Pagination/Pagination.Story.svelte
View file

@ -1,20 +1,17 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Pagination from "./Pagination.svelte";
import PaginationSkeleton from "./Pagination.Skeleton.svelte";
</script>
<Layout>
<div style="width: 800px;">
{#if story === 'multiple'}
<Pagination {...$$props}>Pagination</Pagination>
<Pagination {...$$props}>Pagination</Pagination>
{:else if story === 'skeleton'}
<PaginationSkeleton />
{:else}
<Pagination {...$$props}>Pagination</Pagination>
{/if}
</div>
</Layout>
<div style="width: 800px;">
{#if story === 'multiple'}
<Pagination {...$$props}>Pagination</Pagination>
<Pagination {...$$props}>Pagination</Pagination>
{:else if story === 'skeleton'}
<PaginationSkeleton />
{:else}
<Pagination {...$$props}>Pagination</Pagination>
{/if}
</div>

85
src/components/ProgressIndicator/ProgressIndicator.Story.svelte
View file

@ -1,53 +1,48 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import ProgressIndicator from "./ProgressIndicator.svelte";
import ProgressIndicatorSkeleton from "./ProgressIndicator.Skeleton.svelte";
import ProgressStep from "./ProgressStep.svelte";
</script>
<Layout>
<div>
{#if story === 'skeleton'}
<ProgressIndicatorSkeleton {...$$props} />
{:else if story === 'interactive'}
<ProgressIndicator {...$$props}>
<ProgressStep description="Step 1: Register a onChange event" let:props>
<div {...props}>Click me</div>
</ProgressStep>
<ProgressStep
label="Really long label"
description="The progress indicator will listen for clicks on the
steps" />
<ProgressStep
label="Tooltip and really long label"
description="The progress indicator will listen for clicks on the
steps" />
</ProgressIndicator>
{:else}
<ProgressIndicator {...$$props}>
<ProgressStep
label="First step"
description="Step 1: Getting started with Carbon Design System"
secondaryLabel="Optional label" />
<ProgressStep
label="Second step with tooltip"
description="Step 2: Getting started with Carbon Design System"
secondaryLabel="Optional label" />
<ProgressStep
label="Third step with tooltip"
description="Step 3: Getting started with Carbon Design System" />
<ProgressStep
label="Fourth step"
description="Step 4: Getting started with Carbon Design System"
secondaryLabel="Example invalid step"
invalid />
<ProgressStep
label="Fifth step"
description="Step 5: Getting started with Carbon Design System"
disabled />
</ProgressIndicator>
{/if}
</div>
</Layout>
<div>
{#if story === 'skeleton'}
<ProgressIndicatorSkeleton {...$$props} />
{:else if story === 'interactive'}
<ProgressIndicator {...$$props}>
<ProgressStep description="Step 1: Register a onChange event" let:props>
<div {...props}>Click me</div>
</ProgressStep>
<ProgressStep
label="Really long label"
description="The progress indicator will listen for clicks on the steps" />
<ProgressStep
label="Tooltip and really long label"
description="The progress indicator will listen for clicks on the steps" />
</ProgressIndicator>
{:else}
<ProgressIndicator {...$$props}>
<ProgressStep
label="First step"
description="Step 1: Getting started with Carbon Design System"
secondaryLabel="Optional label" />
<ProgressStep
label="Second step with tooltip"
description="Step 2: Getting started with Carbon Design System"
secondaryLabel="Optional label" />
<ProgressStep
label="Third step with tooltip"
description="Step 3: Getting started with Carbon Design System" />
<ProgressStep
label="Fourth step"
description="Step 4: Getting started with Carbon Design System"
secondaryLabel="Example invalid step"
invalid />
<ProgressStep
label="Fifth step"
description="Step 5: Getting started with Carbon Design System"
disabled />
</ProgressIndicator>
{/if}
</div>

13
src/components/RadioButton/RadioButton.Story.svelte
View file

@ -1,17 +1,14 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import RadioButton from "./RadioButton.svelte";
import RadioButtonSkeleton from "./RadioButton.Skeleton.svelte";
$: checked = false;
</script>
<Layout>
{#if story === 'skeleton'}
<RadioButtonSkeleton />
{:else}
<RadioButton {...$$props} bind:checked id="radio-1" />
{/if}
</Layout>
{#if story === 'skeleton'}
<RadioButtonSkeleton />
{:else}
<RadioButton {...$$props} bind:checked id="radio-1" />
{/if}

17
src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
View file

@ -1,5 +1,4 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import RadioButtonGroup from "./RadioButtonGroup.svelte";
import { RadioButton } from "../RadioButton";
import { FormGroup } from "../FormGroup";
@ -7,12 +6,10 @@
$: selected = "default-selected";
</script>
<Layout>
<FormGroup legendText="Radio Button heading">
<RadioButtonGroup {...$$props.group} legend="Group Legend" bind:selected>
<RadioButton {...$$props.radio} value="standard" id="radio-1" />
<RadioButton {...$$props.radio} value="default-selected" id="radio-2" />
<RadioButton {...$$props.radio} value="disabled" id="radio-3" />
</RadioButtonGroup>
</FormGroup>
</Layout>
<FormGroup legendText="Radio Button heading">
<RadioButtonGroup {...$$props.group} legend="Group Legend" bind:selected>
<RadioButton {...$$props.radio} value="standard" id="radio-1" />
<RadioButton {...$$props.radio} value="default-selected" id="radio-2" />
<RadioButton {...$$props.radio} value="disabled" id="radio-3" />
</RadioButtonGroup>
</FormGroup>

17
src/components/Search/Search.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Search from "./Search.svelte";
import SearchSkeleton from "./Search.Skeleton.svelte";
@ -16,12 +15,10 @@
}
</script>
<Layout>
<div>
{#if story === 'skeleton'}
<SearchSkeleton />
{:else}
<Search {...$$props} bind:value />
{/if}
</div>
</Layout>
<div>
{#if story === 'skeleton'}
<SearchSkeleton />
{:else}
<Search {...$$props} bind:value />
{/if}
</div>

49
src/components/Select/Select.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Select from "./Select.svelte";
import SelectItem from "./SelectItem.svelte";
import SelectSkeleton from "./Select.Skeleton.svelte";
@ -11,30 +10,24 @@
$: console.log(selected);
</script>
<Layout>
<div>
{#if story === 'skeleton'}
<SelectSkeleton {...$$props} />
{:else}
<Select
{...$$props.select}
id="select-id"
name="select-name"
bind:selected>
<SelectItem
value="placeholder-item"
text="Choose an option"
disabled
hidden />
<SelectItemGroup {...$$props.group} label="Category 1">
<SelectItem value="option-1" text="Option 1" />
<SelectItem value="option-2" text="Option 2" />
</SelectItemGroup>
<SelectItemGroup {...$$props.group} label="Category 2">
<SelectItem value="option-3" text="Option 3" />
<SelectItem value="option-4" text="Option 4" />
</SelectItemGroup>
</Select>
{/if}
</div>
</Layout>
<div>
{#if story === 'skeleton'}
<SelectSkeleton {...$$props} />
{:else}
<Select {...$$props.select} id="select-id" name="select-name" bind:selected>
<SelectItem
value="placeholder-item"
text="Choose an option"
disabled
hidden />
<SelectItemGroup {...$$props.group} label="Category 1">
<SelectItem value="option-1" text="Option 1" />
<SelectItem value="option-2" text="Option 2" />
</SelectItemGroup>
<SelectItemGroup {...$$props.group} label="Category 2">
<SelectItem value="option-3" text="Option 3" />
<SelectItem value="option-4" text="Option 4" />
</SelectItemGroup>
</Select>
{/if}
</div>

9
src/components/SkeletonPlaceholder/SkeletonPlaceholder.Story.svelte
View file

@ -1,5 +1,4 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import SkeletonPlaceholder from "./SkeletonPlaceholder.svelte";
</script>
@ -20,8 +19,6 @@
}
</style>
<Layout>
<div style="height: 250px; width: 250px;">
<SkeletonPlaceholder {...$$props} />
</div>
</Layout>
<div style="height: 250px; width: 250px;">
<SkeletonPlaceholder {...$$props} />
</div>

9
src/components/SkeletonText/SkeletonText.Story.svelte
View file

@ -1,10 +1,7 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import SkeletonText from "./SkeletonText.svelte";
</script>
<Layout>
<div style="width: 300px">
<SkeletonText {...$$props} />
</div>
</Layout>
<div style="width: 300px">
<SkeletonText {...$$props} />
</div>

25
src/components/Slider/Slider.Story.svelte
View file

@ -1,23 +1,20 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Slider from "./Slider.svelte";
import SliderSkeleton from "./Slider.Skeleton.svelte";
$: value = 50;
</script>
<Layout>
{#if story === 'skeleton'}
<SliderSkeleton {...$$props} />
{:else}
<Slider
{...$$props}
id="slider-id"
bind:value
on:change={({ detail }) => {
console.log('on:change', detail);
}} />
{/if}
</Layout>
{#if story === 'skeleton'}
<SliderSkeleton {...$$props} />
{:else}
<Slider
{...$$props}
id="slider-id"
bind:value
on:change={({ detail }) => {
console.log('on:change', detail);
}} />
{/if}

136
src/components/StructuredList/StructuredList.Story.svelte
View file

@ -2,7 +2,7 @@
export let story = undefined;
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import Layout from "../../internal/ui/Layout.svelte";
import StructuredListBody from "./StructuredListBody.svelte";
import StructuredListCell from "./StructuredListCell.svelte";
import StructuredListHead from "./StructuredListHead.svelte";
@ -14,80 +14,78 @@
$: selected = "row-1-value";
</script>
<Layout>
<div>
{#if story === 'skeleton'}
<div style="width: 800px">
<StructuredListSkeleton />
</div>
{:else if story === 'selection'}
<StructuredList selection border bind:selected>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
<StructuredListCell head>{''}</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
{#each [0, 1, 2, 3] as item, i (item)}
<StructuredListRow label for="row-{i}">
<StructuredListCell>Row {i}</StructuredListCell>
<StructuredListCell>Row {i}</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-{i}"
value="row-{i}-value"
title="row-{i}-title"
name="row-{i}-name" />
<StructuredListCell>
<CheckmarkFilled16
class="bx--structured-list-svg"
aria-label="select an option"
title="select an option" />
</StructuredListCell>
</StructuredListRow>
{/each}
</StructuredListBody>
</StructuredList>
{:else}
<StructuredList>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell noWrap>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell>
<div>
{#if story === 'skeleton'}
<div style="width: 800px">
<StructuredListSkeleton />
</div>
{:else if story === 'selection'}
<StructuredList selection border bind:selected>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
<StructuredListCell head>{''}</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
{#each [0, 1, 2, 3] as item, i (item)}
<StructuredListRow label for="row-{i}">
<StructuredListCell>Row {i}</StructuredListCell>
<StructuredListCell>Row {i}</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>
<StructuredListInput
id="row-{i}"
value="row-{i}-value"
title="row-{i}-title"
name="row-{i}-name" />
<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.
<CheckmarkFilled16
class="bx--structured-list-svg"
aria-label="select an option"
title="select an option" />
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredList>
{/if}
</div>
</Layout>
{/each}
</StructuredListBody>
</StructuredList>
{:else}
<StructuredList>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</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>
</StructuredListBody>
</StructuredList>
{/if}
</div>

57
src/components/Tabs/Tabs.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Tab from "./Tab.svelte";
import TabContent from "./TabContent.svelte";
import Tabs from "./Tabs.svelte";
@ -12,32 +11,30 @@
$: selected = 0;
</script>
<Layout>
{#if story === 'skeleton'}
<TabsSkeleton />
{:else if story === 'container'}
<Tabs {...tabsProps} type="container" bind:selected>
<Tab {...tabProps} label="Tab label 1" />
<Tab {...tabProps} label="Tab label 2" />
<Tab {...tabProps} label="Tab label 3" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
</div>
</Tabs>
{:else}
<Tabs {...tabsProps} bind:selected>
<Tab {...tabProps} label="Tab label 1" />
<Tab {...tabProps} label="Tab label 2" />
<Tab {...tabProps} label="Tab label 3" disabled />
<Tab {...tabProps} label="Tab label 4" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
<TabContent>Content 4</TabContent>
</div>
</Tabs>
{/if}
</Layout>
{#if story === 'skeleton'}
<TabsSkeleton />
{:else if story === 'container'}
<Tabs {...tabsProps} type="container" bind:selected>
<Tab {...tabProps} label="Tab label 1" />
<Tab {...tabProps} label="Tab label 2" />
<Tab {...tabProps} label="Tab label 3" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
</div>
</Tabs>
{:else}
<Tabs {...tabsProps} bind:selected>
<Tab {...tabProps} label="Tab label 1" />
<Tab {...tabProps} label="Tab label 2" />
<Tab {...tabProps} label="Tab label 3" disabled />
<Tab {...tabProps} label="Tab label 4" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
<TabContent>Content 4</TabContent>
</div>
</Tabs>
{/if}

33
src/components/Tag/Tag.Story.svelte
View file

@ -5,25 +5,22 @@
export let story = undefined;
export let type = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Tag from "./Tag.svelte";
import TagSkeleton from "./Tag.Skeleton.svelte";
</script>
<Layout>
<div>
{#if story === 'filter'}
<Tag
{filter}
on:click={() => {
console.log('click');
}}>
{slot}
</Tag>
{:else if story === 'skeleton'}
<TagSkeleton />
{:else}
<Tag {disabled} {type} class="class">{slot}</Tag>
{/if}
</div>
</Layout>
<div>
{#if story === 'filter'}
<Tag
{filter}
on:click={() => {
console.log('click');
}}>
{slot}
</Tag>
{:else if story === 'skeleton'}
<TagSkeleton />
{:else}
<Tag {disabled} {type} class="class">{slot}</Tag>
{/if}
</div>

13
src/components/TextArea/TextArea.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import TextArea from "./TextArea.svelte";
import TextAreaSkeleton from "./TextArea.Skeleton.svelte";
@ -11,10 +10,8 @@
$: console.log("bound value:", value);
</script>
<Layout>
{#if story === 'skeleton'}
<TextAreaSkeleton {...$$props} />
{:else}
<TextArea {...$$props} bind:value bind:ref />
{/if}
</Layout>
{#if story === 'skeleton'}
<TextAreaSkeleton {...$$props} />
{:else}
<TextArea {...$$props} bind:value bind:ref />
{/if}

77
src/components/TextInput/TextInput.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import PasswordInput from "./PasswordInput.svelte";
import TextInput from "./TextInput.svelte";
import TextInputSkeleton from "./TextInput.Skeleton.svelte";
@ -12,42 +11,40 @@
$: console.log(ref);
</script>
<Layout>
{#if story === 'skeleton'}
<div
aria-label="loading text input"
aria-live="assertive"
role="status"
tabindex="0">
<TextInputSkeleton />
<br />
<TextInputSkeleton hideLabel />
</div>
{:else if story === 'password-visibility'}
<PasswordInput {...$$props} aria-level="" />
{:else if story === 'controlled'}
<PasswordInput {...$$props} {type} />
<div>
<button
on:click={() => {
type = 'text';
}}>
Show password
</button>
<button
on:click={() => {
type = 'password';
}}>
Hide password
</button>
</div>
{:else}
<TextInput
bind:ref
{...$$props}
bind:value
on:change={() => {
console.log('change');
}} />
{/if}
</Layout>
{#if story === 'skeleton'}
<div
aria-label="loading text input"
aria-live="assertive"
role="status"
tabindex="0">
<TextInputSkeleton />
<br />
<TextInputSkeleton hideLabel />
</div>
{:else if story === 'password-visibility'}
<PasswordInput {...$$props} aria-level="" />
{:else if story === 'controlled'}
<PasswordInput {...$$props} {type} />
<div>
<button
on:click={() => {
type = 'text';
}}>
Show password
</button>
<button
on:click={() => {
type = 'password';
}}>
Hide password
</button>
</div>
{:else}
<TextInput
bind:ref
{...$$props}
bind:value
on:change={() => {
console.log('change');
}} />
{/if}

95
src/components/Tile/Tile.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import ClickableTile from "./ClickableTile.svelte";
import ExpandableTile from "./ExpandableTile.svelte";
import RadioTile from "./RadioTile.svelte";
@ -19,53 +18,47 @@
$: selectedTile1 = false;
</script>
<Layout>
<div>
{#if story === 'filter'}
<Tile {...$$props} />
{:else if story === 'clickable'}
<ClickableTile {...$$props}>Clickable Tile</ClickableTile>
{:else if story === 'multi-select'}
<div role="group" aria-label="selectable tiles">
<SelectableTile
{...$$props}
id="tile-1"
name="tiles"
bind:selected={selectedTile1}
on:select={({ detail }) => {
console.log('on:select', detail);
}}
on:deselect={({ detail }) => {
console.log('on:deselect', detail);
}}>
Multi-select Tile
</SelectableTile>
<SelectableTile {...$$props} id="tile-2" name="tiles">
Multi-select Tile
</SelectableTile>
<SelectableTile {...$$props} id="tile-3" name="tiles">
Multi-select Tile
</SelectableTile>
</div>
{:else if story === 'selectable'}
<TileGroup legend="Selectable Tile Group" bind:selected>
{#each radioTiles as { value, id, labelText }, i (id)}
<RadioTile {...$$props} {value} {id} {labelText}>
Selectable Tile
</RadioTile>
{/each}
</TileGroup>
{:else if story === 'expandable'}
<ExpandableTile {...$$props}>
<div slot="above" style="height: 200px">
Above the fold content here
</div>
<div slot="below" style="height: 400px">
Below the fold content here
</div>
</ExpandableTile>
{:else}
<Tile {...$$props}>Default Tile</Tile>
{/if}
</div>
</Layout>
<div>
{#if story === 'filter'}
<Tile {...$$props} />
{:else if story === 'clickable'}
<ClickableTile {...$$props}>Clickable Tile</ClickableTile>
{:else if story === 'multi-select'}
<div role="group" aria-label="selectable tiles">
<SelectableTile
{...$$props}
id="tile-1"
name="tiles"
bind:selected={selectedTile1}
on:select={({ detail }) => {
console.log('on:select', detail);
}}
on:deselect={({ detail }) => {
console.log('on:deselect', detail);
}}>
Multi-select Tile
</SelectableTile>
<SelectableTile {...$$props} id="tile-2" name="tiles">
Multi-select Tile
</SelectableTile>
<SelectableTile {...$$props} id="tile-3" name="tiles">
Multi-select Tile
</SelectableTile>
</div>
{:else if story === 'selectable'}
<TileGroup legend="Selectable Tile Group" bind:selected>
{#each radioTiles as { value, id, labelText }, i (id)}
<RadioTile {...$$props} {value} {id} {labelText}>
Selectable Tile
</RadioTile>
{/each}
</TileGroup>
{:else if story === 'expandable'}
<ExpandableTile {...$$props}>
<div slot="above" style="height: 200px">Above the fold content here</div>
<div slot="below" style="height: 400px">Below the fold content here</div>
</ExpandableTile>
{:else}
<Tile {...$$props}>Default Tile</Tile>
{/if}
</div>

35
src/components/TimePicker/TimePicker.Story.svelte
View file

@ -1,5 +1,4 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import { SelectItem } from "../Select";
import TimePicker from "./TimePicker.svelte";
import TimePickerSelect from "./TimePickerSelect.svelte";
@ -10,21 +9,19 @@
$: console.log(value, select1, select2);
</script>
<Layout>
<TimePicker id="time-picker" {...$$props.timepicker} bind:value>
<TimePickerSelect
{...$$props.select}
id="time-picker-select-1"
bind:value={select1}>
<SelectItem value="AM" text="AM" />
<SelectItem value="PM" text="PM" />
</TimePickerSelect>
<TimePickerSelect
{...$$props.select}
id="time-picker-select-2"
bind:value={select2}>
<SelectItem value="Time zone 1" text="Time zone 1" />
<SelectItem value="Time zone 2" text="Time zone 2" />
</TimePickerSelect>
</TimePicker>
</Layout>
<TimePicker id="time-picker" {...$$props.timepicker} bind:value>
<TimePickerSelect
{...$$props.select}
id="time-picker-select-1"
bind:value={select1}>
<SelectItem value="AM" text="AM" />
<SelectItem value="PM" text="PM" />
</TimePickerSelect>
<TimePickerSelect
{...$$props.select}
id="time-picker-select-2"
bind:value={select2}>
<SelectItem value="Time zone 1" text="Time zone 1" />
<SelectItem value="Time zone 2" text="Time zone 2" />
</TimePickerSelect>
</TimePicker>

17
src/components/Toggle/Toggle.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import Toggle from "./Toggle.svelte";
import ToggleSkeleton from "./Toggle.Skeleton.svelte";
@ -9,12 +8,10 @@
$: console.log("bind:toggled", toggled);
</script>
<Layout>
{#if story === 'toggled'}
<Toggle {...$$props} id="toggle-id" name="toggle-name" bind:toggled />
{:else if story === 'skeleton'}
<ToggleSkeleton />
{:else}
<Toggle {...$$props} id="toggle-1" />
{/if}
</Layout>
{#if story === 'toggled'}
<Toggle {...$$props} id="toggle-id" name="toggle-name" bind:toggled />
{:else if story === 'skeleton'}
<ToggleSkeleton />
{:else}
<Toggle {...$$props} id="toggle-1" />
{/if}

25
src/components/ToggleSmall/ToggleSmall.Story.svelte
View file

@ -1,7 +1,6 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import ToggleSmall from "./ToggleSmall.svelte";
import ToggleSmallSkeleton from "./ToggleSmall.Skeleton.svelte";
@ -9,16 +8,14 @@
$: console.log("bind:toggled", toggled);
</script>
<Layout>
{#if story === 'toggled'}
<ToggleSmall
{...$$props}
id="toggle-small-id"
name="toggle-small-name"
bind:toggled />
{:else if story === 'skeleton'}
<ToggleSmallSkeleton />
{:else}
<ToggleSmall {...$$props} id="toggle-small-id" name="toggle-small-name" />
{/if}
</Layout>
{#if story === 'toggled'}
<ToggleSmall
{...$$props}
id="toggle-small-id"
name="toggle-small-name"
bind:toggled />
{:else if story === 'skeleton'}
<ToggleSmallSkeleton />
{:else}
<ToggleSmall {...$$props} id="toggle-small-id" name="toggle-small-name" />
{/if}

136
src/components/Tooltip/Tooltip.Story.svelte
View file

@ -2,7 +2,7 @@
export let story = undefined;
import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
import Layout from "../../internal/ui/Layout.svelte";
import { Link } from "../Link";
import { Button } from "../Button";
import Tooltip from "./Tooltip.svelte";
@ -21,73 +21,71 @@
}
</style>
<Layout>
<div style="margin: 3rem">
{#if story === 'custom icon'}
<Tooltip
{...$$props}
bind:ref
bind:open
on:open={() => {
console.log('on:open');
}}
on:close={() => {
console.log('on:close');
}}>
<div slot="icon" class="custom-icon-class" />
<p>
This is some tooltip text. This box shows the maximum amount of text
that should appear inside. If more room is needed please use a modal
instead.
</p>
<div class="bx--tooltip__footer">
<Link href="/">Learn More</Link>
<Button size="small">Create</Button>
</div>
</Tooltip>
{:else if story === 'uncontrolled'}
<Button
style="padding: 15px 20px; margin: 4px 20px"
on:click={() => {
open = false;
}}>
Hide
</Button>
<Button
style="padding: 15px 20px; margin: 4px 20px"
on:click={() => {
open = true;
}}>
Show
</Button>
<div style="padding: 15px 20px; margin: 4px 20px">
<Tooltip {...$$props} bind:ref bind:open hideIcon>
<div slot="triggerText">My text wrapped with tooltip</div>
Tooltip content
</Tooltip>
<div style="margin: 3rem">
{#if story === 'custom icon'}
<Tooltip
{...$$props}
bind:ref
bind:open
on:open={() => {
console.log('on:open');
}}
on:close={() => {
console.log('on:close');
}}>
<div slot="icon" class="custom-icon-class" />
<p>
This is some tooltip text. This box shows the maximum amount of text
that should appear inside. If more room is needed please use a modal
instead.
</p>
<div class="bx--tooltip__footer">
<Link href="/">Learn More</Link>
<Button size="small">Create</Button>
</div>
{:else}
<Tooltip
{...$$props}
bind:ref
bind:open
on:open={() => {
console.log('on:open');
}}
on:close={() => {
console.log('on:close');
}}
icon={story === 'custom icon only' ? OverflowMenuVertical16 : undefined}>
<p>
This is some tooltip text. This box shows the maximum amount of text
that should appear inside. If more room is needed please use a modal
instead.
</p>
<div class="bx--tooltip__footer">
<Link href="/">Learn More</Link>
<Button size="small">Create</Button>
</div>
</Tooltip>
{:else if story === 'uncontrolled'}
<Button
style="padding: 15px 20px; margin: 4px 20px"
on:click={() => {
open = false;
}}>
Hide
</Button>
<Button
style="padding: 15px 20px; margin: 4px 20px"
on:click={() => {
open = true;
}}>
Show
</Button>
<div style="padding: 15px 20px; margin: 4px 20px">
<Tooltip {...$$props} bind:ref bind:open hideIcon>
<div slot="triggerText">My text wrapped with tooltip</div>
Tooltip content
</Tooltip>
{/if}
</div>
</Layout>
</div>
{:else}
<Tooltip
{...$$props}
bind:ref
bind:open
on:open={() => {
console.log('on:open');
}}
on:close={() => {
console.log('on:close');
}}
icon={story === 'custom icon only' ? OverflowMenuVertical16 : undefined}>
<p>
This is some tooltip text. This box shows the maximum amount of text
that should appear inside. If more room is needed please use a modal
instead.
</p>
<div class="bx--tooltip__footer">
<Link href="/">Learn More</Link>
<Button size="small">Create</Button>
</div>
</Tooltip>
{/if}
</div>

5
src/components/TooltipDefinition/TooltipDefinition.Story.svelte
View file

@ -1,8 +1,5 @@
<script>
import Layout from "../../internal/ui/Layout.svelte";
import TooltipDefinition from "./TooltipDefinition.svelte";
</script>
<Layout>
<TooltipDefinition {...$$props}>Definition Tooltip</TooltipDefinition>
</Layout>
<TooltipDefinition {...$$props}>Definition Tooltip</TooltipDefinition>

14
src/components/TooltipIcon/TooltipIcon.Story.svelte
View file

@ -1,13 +1,11 @@
<script>
import Filter16 from "carbon-icons-svelte/lib/Filter16";
import Layout from "../../internal/ui/Layout.svelte";
import TooltipIcon from "./TooltipIcon.svelte";
</script>
<Layout>
<div>
<TooltipIcon {...$$props}>
<Filter16 />
</TooltipIcon>
</div>
</Layout>
<div>
<TooltipIcon {...$$props}>
<Filter16 />
</TooltipIcon>
</div>

57
src/components/UnorderedList/UnorderedList.Story.svelte
View file

@ -1,37 +1,34 @@
<script>
export let story = undefined;
import Layout from "../../internal/ui/Layout.svelte";
import { ListItem } from "../ListItem";
import UnorderedList from "./UnorderedList.svelte";
</script>
<Layout>
<div>
{#if story === 'nested'}
<UnorderedList>
<ListItem>
Unordered List level 1
<UnorderedList nested>
<ListItem>Unordered List level 2</ListItem>
<ListItem>
Unordered List level 2
<UnorderedList nested>
<ListItem>Unordered List level 2</ListItem>
<ListItem>Unordered List level 2</ListItem>
</UnorderedList>
</ListItem>
</UnorderedList>
</ListItem>
<ListItem>Unordered List level 1</ListItem>
<ListItem>Unordered List level 1</ListItem>
</UnorderedList>
{:else}
<UnorderedList>
<ListItem>Unordered List level 1</ListItem>
<ListItem>Unordered List level 1</ListItem>
<ListItem>Unordered List level 1</ListItem>
</UnorderedList>
{/if}
</div>
</Layout>
<div>
{#if story === 'nested'}
<UnorderedList>
<ListItem>
Unordered List level 1
<UnorderedList nested>
<ListItem>Unordered List level 2</ListItem>
<ListItem>
Unordered List level 2
<UnorderedList nested>
<ListItem>Unordered List level 2</ListItem>
<ListItem>Unordered List level 2</ListItem>
</UnorderedList>
</ListItem>
</UnorderedList>
</ListItem>
<ListItem>Unordered List level 1</ListItem>
<ListItem>Unordered List level 1</ListItem>
</UnorderedList>
{:else}
<UnorderedList>
<ListItem>Unordered List level 1</ListItem>
<ListItem>Unordered List level 1</ListItem>
<ListItem>Unordered List level 1</ListItem>
</UnorderedList>
{/if}
</div>

45
src/internal/Icon.stub.svelte
View file

@ -1,45 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = 'will-change: transform;';
const preserveAspectRatio = 'xMidYMid meet';
$: ariaLabel = $$props['aria-label'];
$: ariaLabelledBy = $$props['aria-labelledby'];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
'aria-hidden': labelled ? undefined : true,
role: labelled ? 'img' : undefined,
focusable: tabindex === '0' ? true : focusable,
tabindex
};
</script>
<svg
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
width="16"
height="16"
class={className}
{preserveAspectRatio}
{style}
{id}
{...attributes}>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

1
src/internal/ui/Layout.svelte
View file

@ -1 +0,0 @@
<slot />