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

chnages to sidenav

Browse source
This commit is contained in:
Adan Ulloa 2020-01-20 12:00:19 -06:00
commit a77127000d
186 changed files with 10791 additions and 833 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Accordion/Accordion.Skeleton.svelte
View file

@ -1,8 +1,8 @@
<script>
let className = undefined;
export { className as class };
export let open = true;
export let count = 4;
export let open = true;
export let style = undefined;
import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';

23
src/components/Accordion/Accordion.svelte
View file

@ -3,9 +3,26 @@
export { className as class };
export let style = undefined;
export let skeleton = false;
export let count = 4;
export let open = true;
import { cx } from '../../lib';
import AccordionSkeleton from './Accordion.Skeleton.svelte';
</script>
<ul on:click on:mouseover on:mouseenter on:mouseleave class={cx('--accordion', className)} {style}>
<slot />
</ul>
{#if skeleton}
<AccordionSkeleton {count} {open} class={className} {style} />
{/if}
{#if !skeleton}
<ul
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--accordion', className)}
{style}>
<slot />
</ul>
{/if}

2
src/components/Accordion/AccordionItem.svelte
View file

@ -1,10 +1,10 @@
<script>
let className = undefined;
export { className as class };
export let title = undefined;
export let iconDescription = 'Expand/Collapse';
export let open = false;
export let style = undefined;
export let title = undefined;
import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
import { cx } from '../../lib';

2
src/components/Button/Button.Skeleton.svelte
View file

@ -1,8 +1,8 @@
<script>
let className = undefined;
export { className as class };
export let small = false;
export let href = undefined;
export let small = false;
export let style = undefined;
import { cx } from '../../lib';

12
src/components/Button/Button.svelte
View file

@ -3,16 +3,16 @@
export { className as class };
export let as = undefined;
export let disabled = false;
export let size = 'default';
export let kind = 'primary';
export let href = undefined;
export let tabindex = '0';
export let type = 'button';
export let icon = undefined;
export let iconDescription = undefined;
export let tooltipPosition = undefined;
export let tooltipAlignment = undefined;
export let kind = 'primary';
export let size = 'default';
export let style = undefined;
export let tabindex = '0';
export let tooltipAlignment = undefined;
export let tooltipPosition = undefined;
export let type = 'button';
import { getContext } from 'svelte';
import { cx } from '../../lib';

4
src/components/Checkbox/Checkbox.stories.js
View file

@ -9,7 +9,7 @@ export const Checked = () => ({
labelText: text('Label text (labelText)', 'Checkbox label'),
indeterminate: boolean('Intermediate (indeterminate)', false),
disabled: boolean('Disabled (disabled)', false),
hideLabel: boolean('No label (hideLabel)', false)
hideLabel: boolean('Hide label (hideLabel)', false)
}
});
@ -20,7 +20,7 @@ export const Unchecked = () => ({
labelText: text('Label text (labelText)', 'Checkbox label'),
indeterminate: boolean('Intermediate (indeterminate)', false),
disabled: boolean('Disabled (disabled)', false),
hideLabel: boolean('No label (hideLabel)', false)
hideLabel: boolean('Hide label (hideLabel)', false)
}
});

14
src/components/Checkbox/Checkbox.svelte
View file

@ -2,13 +2,15 @@
let className = undefined;
export { className as class };
export let checked = false;
export let indeterminate = false;
export let disabled = false;
export let id = Math.random();
export let labelText = undefined;
export let hideLabel = false;
export let title = '';
export let id = Math.random();
export let indeterminate = false;
export let labelText = '';
export let name = '';
export let readonly = false;
export let style = undefined;
export let title = '';
import { createEventDispatcher } from 'svelte';
import { cx } from '../../lib';
@ -37,7 +39,9 @@
{indeterminate}
{disabled}
{checked}
{id} />
{name}
{id}
{readonly} />
<label class={cx('--checkbox-label')} for={id} title={title || undefined}>
<span class={cx('--checkbox-label-text', hideLabel && '--visually-hidden')}>{labelText}</span>
</label>

2
src/components/CodeSnippet/CodeSnippet.Skeleton.svelte
View file

@ -1,8 +1,8 @@
<script>
let className = undefined;
export { className as class };
export let type = 'single';
export let style = undefined;
export let type = 'single';
import { cx } from '../../lib';
</script>

130
src/components/CodeSnippet/CodeSnippet.svelte
View file

@ -1,15 +1,18 @@
<script>
let className = undefined;
export { className as class };
export let type = 'single';
export let feedback = undefined;
export let feedbackTimeout = undefined;
export let code = undefined;
export let copyButtonDescription = undefined;
export let copyLabel = undefined;
export let showMoreText = 'Show more';
export let showLessText = 'Show less';
export let feedback = undefined;
export let feedbackTimeout = undefined;
export let id = Math.random();
export let light = false;
export let showLessText = 'Show less';
export let showMoreText = 'Show more';
export let skeleton = false;
export let style = undefined;
export let type = 'single';
import { afterUpdate } from 'svelte';
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
@ -17,73 +20,80 @@
import Button from '../Button';
import Copy from '../Copy';
import CopyButton from '../CopyButton';
import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte';
const id = Math.random();
let codeRef = undefined;
let expanded = false;
let showMoreLess = false;
afterUpdate(() => {
showMoreLess = type === 'multi' && codeRef.getBoundingClientRect().height > 255;
if (type === 'multi' && codeRef) {
showMoreLess = codeRef.getBoundingClientRect().height > 255;
}
});
$: expandText = expanded ? showLessText : showMoreText;
</script>
{#if type === 'inline'}
<Copy
aria-label={$$props['aria-label'] || copyLabel}
aria-describedby={id}
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
{feedback}
{feedbackTimeout}
{style}>
<code {id}>
<slot />
</code>
</Copy>
{:else}
<div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
{style}>
<div
role="textbox"
tabindex="0"
class={cx('--snippet-container')}
aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}>
<code>
<pre bind:this={codeRef}>
<slot />
</pre>
</code>
</div>
<CopyButton
{#if skeleton}
<CodeSnippetSkeleton class={className} {type} {style} />
{/if}
{#if !skeleton}
{#if type === 'inline'}
<Copy
aria-label={$$props['aria-label'] || copyLabel}
aria-describedby={id}
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
on:click
class={cx('--snippet-button')}
on:mouseover
on:mouseenter
on:mouseleave
{feedback}
{feedbackTimeout}
iconDescription={copyButtonDescription} />
{#if showMoreLess}
<Button
kind="ghost"
size="small"
class={cx('--snippet-btn--expand')}
on:click={() => {
expanded = !expanded;
}}>
<span class={cx('--snippet-btn--text')}>{expandText}</span>
<ChevronDown16
aria-label={expandText}
class={cx('--icon-chevron--down', '--snippet__icon')} />
</Button>
{/if}
</div>
{style}>
<code {id}>
<slot>{code}</slot>
</code>
</Copy>
{:else}
<div
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
{style}>
<div
role="textbox"
tabindex="0"
class={cx('--snippet-container')}
aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}>
<code>
<pre bind:this={codeRef}>
<slot>{code}</slot>
</pre>
</code>
</div>
<CopyButton
iconDescription={copyButtonDescription}
class={cx('--snippet-button')}
on:click
{feedback}
{feedbackTimeout} />
{#if showMoreLess}
<Button
kind="ghost"
size="small"
class={cx('--snippet-btn--expand')}
on:click={() => {
expanded = !expanded;
}}>
<span class={cx('--snippet-btn--text')}>{expandText}</span>
<ChevronDown16
aria-label={expandText}
class={cx('--icon-chevron--down', '--snippet__icon')} />
</Button>
{/if}
</div>
{/if}
{/if}

53
src/components/ComboBox/ComboBox.Story.svelte Normal file
View file

@ -0,0 +1,53 @@
<script>
import Layout from '../../internal/ui/Layout.svelte';
import ToggleSmall from '../ToggleSmall';
import Button from '../Button';
import ComboBox from './ComboBox.svelte';
let items = [
{ id: 'option-0', text: 'Option 1' },
{ id: 'option-1', text: 'Option 2' },
{ id: 'option-2', text: 'Option 3' },
{ id: 'option-3', text: 'Option 4' },
{
id: 'option-4',
text: 'An example option that is really long to show what should be done to handle long text'
}
];
let toggled = false;
let value = undefined;
let selectedIndex = -1;
function shouldFilterItem(item, value) {
if (!toggled || !value) {
return true;
}
return item.text.toLowerCase().includes(value.toLowerCase());
}
</script>
<Layout>
<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;">
<ToggleSmall labelText="Enable filtering" bind:toggled />
<Button
size="small"
on:click={() => {
selectedIndex = 1;
}}>
Set item to 'Option 2'
</Button>
</div>
<div style="width: 300px; margin-top: 2rem;">
<ComboBox {...$$props} id="combobox" bind:value bind:selectedIndex {items} {shouldFilterItem} />
</div>
</Layout>

24
src/components/ComboBox/ComboBox.stories.js Normal file
View file

@ -0,0 +1,24 @@
import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
import Component from './ComboBox.Story.svelte';
export default { title: 'ComboBox', decorators: [withKnobs] };
const sizes = {
'Extra large size (xl)': 'xl',
'Regular size (lg)': '',
'Small size (sm)': 'sm'
};
export const Default = () => ({
Component,
props: {
size: select('Field size (size)', sizes, ''),
placeholder: text('Placeholder text (placeholder)', 'Filter...'),
titleText: text('Title (titleText)', 'Combobox title'),
helperText: text('Helper text (helperText)', 'Optional helper text here'),
light: boolean('Light (light)', false),
disabled: boolean('Disabled (disabled)', false),
invalid: boolean('Invalid (invalid)', false),
invalidText: text('Invalid text (invalidText)', 'A valid value is required')
}
});

188
src/components/ComboBox/ComboBox.svelte Normal file
View file

@ -0,0 +1,188 @@
<script>
let className = undefined;
export { className as class };
export let disabled = false;
export let helperText = '';
export let id = Math.random();
export let invalid = false;
export let invalidText = '';
export let items = [];
export let itemToString = item => item.text || item.id;
export let light = false;
export let open = false;
export let placeholder = '';
export let selectedIndex = -1;
export let shouldFilterItem = () => true;
export let size = undefined;
export let style = undefined;
export let titleText = '';
export let translateWithId = undefined;
export let value = '';
import { afterUpdate } from 'svelte';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import { cx } from '../../lib';
import ListBox, {
ListBoxField,
ListBoxMenu,
ListBoxMenuIcon,
ListBoxMenuItem,
ListBoxSelection
} from '../ListBox';
let selectedId = undefined;
let inputRef = undefined;
let inputValue = '';
let highlightedIndex = -1;
function change(direction) {
let index = highlightedIndex + direction;
if (index < 0) {
index = items.length - 1;
} else if (index >= items.length) {
index = 0;
}
highlightedIndex = index;
}
afterUpdate(() => {
if (open) {
inputRef.focus();
filteredItems = items.filter(item => shouldFilterItem(item, value));
} else {
highlightedIndex = -1;
inputValue = selectedItem ? selectedItem.text : '';
}
});
$: ariaLabel = $$props['aria-label'] || 'Choose an item';
$: menuId = `menu-${id}`;
$: comboId = `combo-${id}`;
$: highlightedId = items[highlightedIndex] ? items[highlightedIndex].id : undefined;
$: filteredItems = items.filter(item => shouldFilterItem(item, value));
$: selectedItem = items[selectedIndex];
$: inputValue = selectedItem ? selectedItem.text : undefined;
$: value = inputValue;
</script>
<svelte:body
on:click={({ target }) => {
if (open && inputRef && !inputRef.contains(target)) {
open = false;
}
}} />
<div class={cx('--list-box__wrapper', className)} {style}>
{#if titleText}
<label class={cx('--label', disabled && '--label--disabled')} for={id}>{titleText}</label>
{/if}
{#if helperText}
<div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
{helperText}
</div>
{/if}
<ListBox
class={cx('--combo-box')}
id={comboId}
aria-label={ariaLabel}
{disabled}
{invalid}
{invalidText}
{open}
{light}
{size}>
<ListBoxField
role="button"
aria-expanded={open}
on:click={() => {
open = true;
}}
{id}
{disabled}
{translateWithId}>
<input
bind:this={inputRef}
tabindex="0"
autocomplete="off"
aria-autocomplete="list"
aria-expanded={open}
aria-activedescendant={highlightedId}
aria-labelledby={comboId}
aria-disabled={disabled}
aria-controls={open ? menuId : undefined}
aria-owns={open ? menuId : undefined}
class={cx('--text-input', inputValue === '' && '--text-input--empty')}
on:input={({ target }) => {
inputValue = target.value;
}}
on:keydown
on:keydown|stopPropagation={({ key }) => {
if (key === 'Enter') {
open = !open;
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
selectedIndex = highlightedIndex;
open = false;
}
} else if (key === 'Tab') {
open = false;
} else if (key === 'ArrowDown') {
change(1);
} else if (key === 'ArrowUp') {
change(-1);
}
}}
on:focus
on:blur
on:blur={({ relatedTarget }) => {
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
inputRef.focus();
}
}}
{disabled}
{placeholder}
{id}
value={inputValue} />
{#if invalid}
<WarningFilled16 class={cx('--list-box__invalid-icon')} />
{/if}
{#if inputValue}
<ListBoxSelection
on:clear={() => {
selectedIndex = -1;
open = false;
}}
{translateWithId}
{disabled}
{open} />
{/if}
<ListBoxMenuIcon
on:click={() => {
open = !open;
}}
{translateWithId}
{open} />
</ListBoxField>
{#if open}
<ListBoxMenu aria-label={ariaLabel} {id}>
{#each filteredItems as item, i (item.id || i)}
<ListBoxMenuItem
id={item.id}
active={selectedIndex === i || selectedId === item.id}
highlighted={highlightedIndex === i || selectedIndex === i}
on:click={() => {
selectedId = item.id;
selectedIndex = items.map(({ id }) => id).indexOf(filteredItems[i].id);
open = false;
}}
on:mouseenter={() => {
highlightedIndex = i;
}}>
{itemToString(item)}
</ListBoxMenuItem>
{/each}
</ListBoxMenu>
{/if}
</ListBox>
</div>

3
src/components/ComboBox/index.js Normal file
View file

@ -0,0 +1,3 @@
import ComboBox from './ComboBox.svelte';
export default ComboBox;

2
src/components/ComposedModal/ComposedModal.svelte
View file

@ -2,8 +2,8 @@
let className = undefined;
export { className as class };
export let containerClass = undefined;
export let open = false;
export let danger = false;
export let open = false;
export let selectorPrimaryFocus = '[data-modal-primary-focus]';
export let size = undefined;
export let style = undefined;

1
src/components/ContentSwitcher/ContentSwitcher.svelte
View file

@ -9,6 +9,7 @@
import { cx } from '../../lib';
const dispatch = createEventDispatcher();
let currentId = writable(null);
let currentIndex = selectedIndex;
let switches = [];

2
src/components/CopyButton/CopyButton.svelte
View file

@ -1,9 +1,9 @@
<script>
let className = undefined;
export { className as class };
export let iconDescription = 'Copy to clipboard';
export let feedback = 'Copied!';
export let feedbackTimeout = 2000;
export let iconDescription = 'Copy to clipboard';
export let style = undefined;
import { afterUpdate, onDestroy } from 'svelte';

152
src/components/DataTable/DataTable.Story.svelte Normal file
View file

@ -0,0 +1,152 @@
<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';
import TableCell from './TableCell.svelte';
import TableContainer from './TableContainer.svelte';
import TableHead from './TableHead.svelte';
import TableHeader from './TableHeader.svelte';
import TableRow from './TableRow.svelte';
let rows = [
{
id: 'a',
name: 'Load Balancer 3',
protocol: 'HTTP',
port: 3000,
rule: 'Round robin',
attached_groups: 'Kevins VM Groups',
status: 'Disabled'
},
{
id: 'b',
name: 'Load Balancer 1',
protocol: 'HTTP',
port: 443,
rule: 'Round robin',
attached_groups: 'Maureens VM Groups',
status: 'Starting'
},
{
id: 'c',
name: 'Load Balancer 2',
protocol: 'HTTP',
port: 80,
rule: 'DNS delegation',
attached_groups: 'Andrews VM Groups',
status: 'Active'
},
{
id: 'd',
name: 'Load Balancer 6',
protocol: 'HTTP',
port: 3000,
rule: 'Round robin',
attached_groups: 'Marcs VM Groups',
status: 'Disabled'
},
{
id: 'e',
name: 'Load Balancer 4',
protocol: 'HTTP',
port: 443,
rule: 'Round robin',
attached_groups: 'Mels VM Groups',
status: 'Starting'
},
{
id: 'f',
name: 'Load Balancer 5',
protocol: 'HTTP',
port: 80,
rule: 'DNS delegation',
attached_groups: 'Ronjas VM Groups',
status: 'Active'
}
];
let headers = [
{ key: 'name', value: 'Name' },
{ key: 'protocol', value: 'Protocol' },
{ key: 'port', value: 'Port' },
{ key: 'rule', value: 'Rule' },
{ key: 'attached_groups', value: 'Attached Groups' },
{ key: 'status', value: 'Status' }
];
let 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>
{/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>

35
src/components/DataTable/DataTable.stories.js Normal file
View file

@ -0,0 +1,35 @@
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
import Component from './DataTable.Story.svelte';
export default { title: 'DataTable', decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
title: text('Optional DataTable title (title)', ''),
description: text('Optional DataTable description (description)', ''),
zebra: boolean('Zebra row styles (zebra)', false),
size: select(
'Row height (size)',
{ compact: 'compact', short: 'short', tall: 'tall', none: null },
null
),
stickyHeader: boolean('Sticky header (experimental)', false)
}
});
export const Sortable = () => ({
Component,
props: {
story: 'sortable',
title: text('Optional DataTable title (title)', ''),
description: text('Optional DataTable description (description)', ''),
zebra: boolean('Zebra row styles (zebra)', false),
size: select(
'Row height (size)',
{ compact: 'compact', short: 'short', tall: 'tall', none: null },
null
),
stickyHeader: boolean('Sticky header (experimental)', false)
}
});

118
src/components/DataTable/DataTable.svelte Normal file
View file

@ -0,0 +1,118 @@
<script>
let className = undefined;
export { className as class };
export let title = '';
export let description = '';
export let zebra = false;
export let rows = [];
export let headers = [];
export let stickyHeader = false;
export let size = undefined;
export let sortable = false;
export let style = undefined;
import { createEventDispatcher, setContext } from 'svelte';
import { writable, derived } from 'svelte/store';
import Table from './Table.svelte';
import TableBody from './TableBody.svelte';
import TableCell from './TableCell.svelte';
import TableContainer from './TableContainer.svelte';
import TableHead from './TableHead.svelte';
import TableHeader from './TableHeader.svelte';
import TableRow from './TableRow.svelte';
const dispatch = createEventDispatcher();
const sortDirectionMap = { none: 'ascending', ascending: 'descending', descending: 'none' };
let tableSortable = writable(sortable);
let sortHeader = writable({ id: null, key: null, sortDirection: 'none' });
let headerItems = writable([]);
let thKeys = derived(headerItems, () =>
headers
.map(({ key }, i) => ({ key, id: $headerItems[i] }))
.reduce((a, c) => ({ ...a, [c.key]: c.id }), {})
);
setContext('DataTable', {
sortHeader,
tableSortable,
add: id => {
headerItems.update(_ => [..._, id]);
}
});
$: tableSortable.set(sortable);
$: headerKeys = headers.map(({ key }) => key);
$: rows = rows.map(row => ({ ...row, cells: headerKeys.map(key => ({ key, value: row[key] })) }));
$: sortedRows = rows;
$: ascending = $sortHeader.sortDirection === 'ascending';
$: sortKey = $sortHeader.key;
$: sorting = sortable && sortKey != null;
$: if (sorting) {
if ($sortHeader.sortDirection === 'none') {
sortedRows = rows;
} else {
sortedRows = [...rows].sort((a, b) => {
const itemA = ascending ? a[sortKey] : b[sortKey];
const itemB = ascending ? b[sortKey] : a[sortKey];
if (typeof itemA === 'number' && typeof itemB === 'number') {
return itemA - itemB;
}
return itemA.toString().localeCompare(itemB.toString(), 'en', { numeric: true });
});
}
}
$: props = {
headers,
rows
};
</script>
<slot {props}>
<TableContainer class={className} {title} {description} {style}>
<Table {zebra} {size} {stickyHeader} {sortable}>
<TableHead>
<TableRow>
{#each headers as header, i (header.key)}
<TableHeader
on:click={() => {
dispatch('click', { header });
dispatch('click:header', header);
let active = header.key === $sortHeader.key;
let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
let sortDirection = sortDirectionMap[currentSortDirection];
sortHeader.set({
id: sortDirection === 'none' ? null : $thKeys[header.key],
key: header.key,
sortDirection
});
}}>
{header.value}
</TableHeader>
{/each}
</TableRow>
</TableHead>
<TableBody>
{#each sorting ? sortedRows : rows as row, i (row.id)}
<TableRow
on:click={() => {
dispatch('click', { row });
dispatch('click:row', row);
}}>
{#each row.cells as cell, j (cell.key)}
<TableCell
on:click={() => {
dispatch('click', { row, cell });
dispatch('click:cell', cell);
}}>
{cell.value}
</TableCell>
{/each}
</TableRow>
{/each}
</TableBody>
</Table>
</TableContainer>
</slot>

28
src/components/DataTable/Table.svelte Normal file
View file

@ -0,0 +1,28 @@
<script>
let className = undefined;
export { className as class };
export let zebra = false;
export let size = undefined;
export let useStaticWidth = false;
export let shouldShowBorder = false;
export let sortable = false;
export let stickyHeader = false;
export let style = undefined;
import { cx } from '../../lib';
</script>
{#if stickyHeader}
<section class={cx('--data-table_inner-container', className)} {style}>
<table
class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', sortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header')}>
<slot />
</table>
</section>
{:else}
<table
class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', sortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header', className)}
{style}>
<slot />
</table>
{/if}

9
src/components/DataTable/TableBody.svelte Normal file
View file

@ -0,0 +1,9 @@
<script>
let className = undefined;
export { className as class };
export let style = undefined;
</script>
<tbody aria-live={$$props['aria-live'] || 'polite'} class={className} {style}>
<slot />
</tbody>

9
src/components/DataTable/TableCell.svelte Normal file
View file

@ -0,0 +1,9 @@
<script>
let className = undefined;
export { className as class };
export let style = undefined;
</script>
<td on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
<slot />
</td>

22
src/components/DataTable/TableContainer.svelte Normal file
View file

@ -0,0 +1,22 @@
<script>
let className = undefined;
export { className as class };
export let stickyHeader = false;
export let title = '';
export let description = '';
export let style = undefined;
import { cx } from '../../lib';
</script>
<div
class={cx('--data-table-container', stickyHeader && '--data-table--max-width', className)}
{style}>
{#if title}
<div class={cx('--data-table-header')}>
<h4 class={cx('--data-table-header__title')}>{title}</h4>
<p class={cx('--data-table-header__description')}>{description}</p>
</div>
{/if}
<slot />
</div>

9
src/components/DataTable/TableHead.svelte Normal file
View file

@ -0,0 +1,9 @@
<script>
let className = undefined;
export { className as class };
export let style = undefined;
</script>
<thead on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
<slot />
</thead>

47
src/components/DataTable/TableHeader.svelte Normal file
View file

@ -0,0 +1,47 @@
<script>
let className = undefined;
export { className as class };
export let scope = 'col';
export let translateWithId = () => '';
export let style = undefined;
import { getContext } from 'svelte';
import ArrowUp20 from 'carbon-icons-svelte/lib/ArrowUp20';
import ArrowsVertical20 from 'carbon-icons-svelte/lib/ArrowsVertical20';
import { cx } from '../../lib';
const id = Math.random();
const { sortHeader, tableSortable, add } = getContext('DataTable');
add(id);
$: active = $sortHeader.id === id;
// TODO: translate with id
$: ariaLabel = translateWithId();
</script>
{#if $tableSortable}
<th
on:mouseover
on:mouseenter
on:mouseleave
class={className}
aria-sort={active ? $sortHeader.sortDirection : 'none'}
{scope}>
<button
class={cx('--table-sort', active && '--table-sort--active', active && $sortHeader.sortDirection === 'descending' && '--table-sort--ascending')}
on:click>
<span class={cx('--table-header-label')}>
<slot />
</span>
<ArrowUp20 class={cx('--table-sort__icon')} aria-label={ariaLabel} />
<ArrowsVertical20 class={cx('--table-sort__icon-unsorted')} aria-label={ariaLabel} />
</button>
</th>
{:else}
<th on:click on:mouseover on:mouseenter on:mouseleave class={className} {style} {scope}>
<span class={cx('--table-header-label')}>
<slot />
</span>
</th>
{/if}

9
src/components/Tile/TileAboveTheFoldContent.svelte → src/components/DataTable/TableRow.svelte
View file

@ -1,17 +1,20 @@
<script>
let className = undefined;
export { className as class };
export let isSelected = false;
export let style = undefined;
import { cx } from '../../lib';
// TODO: include ariaLabel, onExpand, isExpanded, isSelected
</script>
<span
<tr
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--tile-content__above-the-fold', className)}
class={cx(isSelected && '--data-table--selected', className)}
{style}>
<slot />
</span>
</tr>

3
src/components/DataTable/index.js Normal file
View file

@ -0,0 +1,3 @@
import DataTable from './DataTable.svelte';
export default DataTable;

4
src/components/DataTableSkeleton/DataTableSkeleton.svelte
View file

@ -1,12 +1,12 @@
<script>
let className = undefined;
export { className as class };
export let zebra = false;
export let columns = 5;
export let compact = false;
export let headers = [];
export let rows = 5;
export let columns = 5;
export let style = undefined;
export let zebra = false;
import { cx, fillArray } from '../../lib';

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

@ -3,8 +3,8 @@
import Layout from '../../internal/ui/Layout.svelte';
import DatePicker from './DatePicker.svelte';
import DatePickerSkeleton from './DatePicker.Skeleton.svelte';
import DatePickerInput from './DatePickerInput.svelte';
import DatePickerSkeleton from './DatePicker.Skeleton.svelte';
let datePickerType = 'simple';
let value = '';

18
src/components/DatePicker/DatePicker.svelte
View file

@ -1,21 +1,21 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let short = false;
export let datePickerType = 'simple';
export let dateFormat = 'm/d/Y';
export let locale = 'en';
export let value = '';
export let appendTo = document.body;
export let minDate = null;
export let maxDate = null;
export let dateFormat = 'm/d/Y';
export let datePickerType = 'simple';
export let id = Math.random();
export let light = false;
export let locale = 'en';
export let maxDate = null;
export let minDate = null;
export let short = false;
export let style = undefined;
export let value = '';
import { createEventDispatcher, setContext, afterUpdate, onDestroy } from 'svelte';
import { writable, derived } from 'svelte/store';
import { createCalendar } from './flatpickr';
import { createCalendar } from './createCalendar';
import { cx } from '../../lib';
const dispatch = createEventDispatcher();

14
src/components/DatePicker/DatePickerInput.svelte
View file

@ -1,17 +1,17 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let iconDescription = '';
export let labelText = '';
export let hideLabel = false;
export let pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}';
export let type = 'text';
export let placeholder = '';
export let disabled = false;
export let hideLabel = false;
export let iconDescription = '';
export let id = Math.random();
export let invalid = false;
export let invalidText = '';
export let labelText = '';
export let pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}';
export let placeholder = '';
export let style = undefined;
export let type = 'text';
import { getContext, onMount } from 'svelte';
import Calendar16 from 'carbon-icons-svelte/lib/Calendar16';

12
src/components/DatePicker/flatpickr.js → src/components/DatePicker/createCalendar.js
View file

@ -1,12 +1,14 @@
import flatpickr from 'flatpickr';
import l10n from 'flatpickr/dist/l10n';
import l10n from 'flatpickr/dist/l10n/index.js';
import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
import { cx } from '../../lib';
l10n.en.weekdays.shorthand.forEach((_, index) => {
const shorthand = _.slice(0, 2);
l10n.en.weekdays.shorthand[index] = shorthand === 'Th' ? 'Th' : shorthand.charAt(0);
});
if (l10n.en) {
l10n.en.weekdays.shorthand.forEach((_, index) => {
const shorthand = _.slice(0, 2);
l10n.en.weekdays.shorthand[index] = shorthand === 'Th' ? 'Th' : shorthand.charAt(0);
});
}
function updateClasses(instance) {
const { calendarContainer, days, daysContainer, weekdayContainer, selectedDates } = instance;

20
src/components/Dropdown/Dropdown.Skeleton.svelte Normal file
View file

@ -0,0 +1,20 @@
<script>
let className = undefined;
export { className as class };
export let inline = false;
export let style = undefined;
import { cx } from '../../lib';
</script>
<div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--skeleton', '--dropdown-v2', '--list-box', '--form-item', inline && '--list-box--inline', className)}
{style}>
<div role="button" class={cx('--list-box__field')}>
<span class={cx('--list-box__label')} />
</div>
</div>

49
src/components/Dropdown/Dropdown.Story.svelte Normal file
View file

@ -0,0 +1,49 @@
<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';
let items = [
{ id: 'option-0', text: 'Option 1' },
{ id: 'option-1', text: 'Option 2' },
{ id: 'option-2', text: 'Option 3' },
{ id: 'option-3', text: 'Option 4' }
];
let 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>

34
src/components/Dropdown/Dropdown.stories.js Normal file
View file

@ -0,0 +1,34 @@
import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
import Component from './Dropdown.Story.svelte';
export default { title: 'Dropdown', decorators: [withKnobs] };
const types = {
'Default (default)': 'default',
'Inline (inline)': 'inline'
};
const sizes = {
'Extra large size (xl)': 'xl',
'Regular size (lg)': '',
'Small size (sm)': 'sm'
};
export const Default = () => ({
Component,
props: {
id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
type: select('Dropdown type (type)', types, 'default'),
size: select('Field size (size)', sizes, '') || undefined,
label: text('Label (label)', 'Dropdown menu options'),
'aria-label': text('Aria Label (aria-label)', 'Dropdown'),
disabled: boolean('Disabled (disabled)', false),
light: boolean('Light variant (light)', false),
titleText: text('Title (titleText)', 'This is not a dropdown title.'),
helperText: text('Helper text (helperText)', 'This is not some helper text.'),
invalid: boolean('Show form validation UI (invalid)', false),
invalidText: text('Form validation UI content (invalidText)', 'A valid value is required')
}
});
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

144
src/components/Dropdown/Dropdown.svelte Normal file
View file

@ -0,0 +1,144 @@
<script>
let className = undefined;
export { className as class };
export let disabled = false;
export let helperText = '';
export let id = Math.random();
export let inline = false;
export let invalid = false;
export let invalidText = '';
export let items = [];
export let itemToString = item => item.text || item.id;
export let label = undefined;
export let light = false;
export let open = false;
export let selectedIndex = -1;
export let size = undefined;
export let style = undefined;
export let titleText = '';
export let translateWithId = undefined;
export let type = 'default';
import { setContext } from 'svelte';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import { cx } from '../../lib';
import ListBox, { ListBoxField, ListBoxMenu, ListBoxMenuIcon, ListBoxMenuItem } from '../ListBox';
let selectedId = undefined;
let fieldRef = undefined;
let highlightedIndex = -1;
setContext('Dropdown', {
declareRef: ({ ref }) => {
fieldRef = ref;
}
});
function change(direction) {
let index = highlightedIndex + direction;
if (index < 0) {
index = items.length - 1;
} else if (index >= items.length) {
index = 0;
}
highlightedIndex = index;
}
$: inline = type === 'inline';
$: selectedItem = items[selectedIndex];
$: if (!open) {
highlightedIndex = -1;
}
</script>
<svelte:body
on:click={({ target }) => {
if (open && fieldRef && !fieldRef.contains(target)) {
open = false;
}
}} />
<div
class={cx('--dropdown__wrapper', '--list-box__wrapper', inline && '--dropdown__wrapper--inline', inline && '--list-box__wrapper--inline', inline && invalid && '--dropdown__wrapper--inline--invalid', inline && invalid && '--list-box__wrapper--inline--invalid', className)}
{style}>
{#if titleText}
<label for={id} class={cx('--label', disabled && '--label--disabled')}>{titleText}</label>
{/if}
{#if !inline && helperText}
<div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
{helperText}
</div>
{/if}
<ListBox
{type}
{size}
{id}
aria-label={$$props['aria-label']}
class={cx('--dropdown', invalid && '--dropdown--invalid', open && '--dropdown--open', inline && '--dropdown--inline', disabled && '--dropdown--disabled', light && '--dropdown--light')}
on:click={({ target }) => {
open = fieldRef.contains(target) ? !open : false;
}}
{disabled}
{open}
{invalid}
{invalidText}
{light}>
{#if invalid}
<WarningFilled16 class={cx('--list-box__invalid-icon')} />
{/if}
<ListBoxField
tabindex="0"
role="button"
aria-expanded={open}
on:keydown={({ key }) => {
if (key === 'Enter') {
open = !open;
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
selectedIndex = highlightedIndex;
open = false;
}
} else if (key === 'Tab') {
open = false;
fieldRef.blur();
} else if (key === 'ArrowDown') {
change(1);
} else if (key === 'ArrowUp') {
change(-1);
}
}}
on:blur={({ relatedTarget }) => {
if (relatedTarget) {
fieldRef.focus();
}
}}
{disabled}
{translateWithId}
{id}>
<span class={cx('--list-box__label')}>
{#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
</span>
<ListBoxMenuIcon {open} {translateWithId} />
</ListBoxField>
{#if open}
<ListBoxMenu aria-labelledby={id} {id}>
{#each items as item, i (item.id || i)}
<ListBoxMenuItem
id={item.id}
active={selectedIndex === i || selectedId === item.id}
highlighted={highlightedIndex === i || selectedIndex === i}
on:click={() => {
selectedId = item.id;
selectedIndex = i;
}}
on:mouseenter={() => {
highlightedIndex = i;
}}>
{itemToString(item)}
</ListBoxMenuItem>
{/each}
</ListBoxMenu>
{/if}
</ListBox>
</div>

4
src/components/Dropdown/index.js Normal file
View file

@ -0,0 +1,4 @@
import Dropdown from './Dropdown.svelte';
export default Dropdown;
export { default as DropdownSkeleton } from './Dropdown.Skeleton.svelte';

2
src/components/FileUploader/FileUploader.Skeleton.svelte
View file

@ -4,8 +4,8 @@
export let style = undefined;
import { cx } from '../../lib';
import SkeletonText from '../SkeletonText';
import { ButtonSkeleton } from '../Button';
import SkeletonText from '../SkeletonText';
</script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>

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

@ -6,8 +6,8 @@
import Button from '../Button';
import FileUploader from './FileUploader.svelte';
import FileUploaderButton from './FileUploaderButton.svelte';
import FileUploaderItem from './FileUploaderItem.svelte';
import FileUploaderDropContainer from './FileUploaderDropContainer.svelte';
import FileUploaderItem from './FileUploaderItem.svelte';
import FileUploaderSkeleton from './FileUploader.Skeleton.svelte';
let fileUploader = undefined;

14
src/components/FileUploader/FileUploader.svelte
View file

@ -1,17 +1,17 @@
<script>
let className = undefined;
export { className as class };
export let files = [];
export const clearFiles = () => (files = []);
export let name = '';
export let accept = [];
export let buttonLabel = '';
export let files = [];
export let iconDescription = 'Provide icon description';
export let kind = 'primary';
export let labelDescription = '';
export let labelTitle = '';
export let iconDescription = 'Provide icon description';
export let status = 'uploading';
export let buttonLabel = '';
export let kind = 'primary';
export let multiple = false;
export let accept = [];
export let name = '';
export let status = 'uploading';
export let style = undefined;
import { createEventDispatcher, afterUpdate } from 'svelte';

8
src/components/FileUploader/FileUploaderButton.svelte
View file

@ -1,17 +1,17 @@
<script>
let className = undefined;
export { className as class };
export let accept = [];
export let disabled = false;
export let disableLabelChanges = false;
export let id = Math.random();
export let kind = 'primary';
export let labelText = 'Add file';
export let multiple = false;
export let name = '';
export let role = 'button';
export let tabindex = '0';
export let kind = 'primary';
export let accept = [];
export let disabled = false;
export let style = undefined;
export let tabindex = '0';
import { cx } from '../../lib';

12
src/components/FileUploader/FileUploaderDropContainer.svelte
View file

@ -1,16 +1,16 @@
<script>
let className = undefined;
export { className as class };
export let name = '';
export let role = 'button';
export let id = Math.random();
export let accept = [];
export let disabled = false;
export let tabindex = '0';
export let id = Math.random();
export let labelText = 'Add file';
export let multiple = false;
export let accept = [];
export let validateFiles = files => files;
export let name = '';
export let role = 'button';
export let style = undefined;
export let tabindex = '0';
export let validateFiles = files => files;
import { createEventDispatcher } from 'svelte';
import { cx } from '../../lib';

12
src/components/FileUploader/FileUploaderItem.svelte
View file

@ -1,13 +1,13 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let status = 'uploading';
export let iconDescription = '';
export let name = '';
export let invalid = false;
export let errorSubject = '';
export let errorBody = '';
export let errorSubject = '';
export let iconDescription = '';
export let id = Math.random();
export let invalid = false;
export let name = '';
export let status = 'uploading';
export let style = undefined;
import { createEventDispatcher } from 'svelte';

4
src/components/FileUploader/Filename.svelte
View file

@ -1,11 +1,11 @@
<script>
let className = undefined;
export { className as class };
export let status = 'uploading';
export let iconDescription = '';
export let invalid = false;
export let tabindex = '0';
export let status = 'uploading';
export let style = undefined;
export let tabindex = '0';
import Close16 from 'carbon-icons-svelte/lib/Close16';
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';

74
src/components/Form/Form.Story.svelte Normal file
View file

@ -0,0 +1,74 @@
<script>
import Layout from '../../internal/ui/Layout.svelte';
import Checkbox from '../Checkbox';
import FormGroup from '../FormGroup';
import FileUploader from '../FileUploader';
import NumberInput from '../NumberInput';
import RadioButton from '../RadioButton';
import RadioButtonGroup from '../RadioButtonGroup';
import Button from '../Button';
import Search from '../Search';
import Select, { SelectItem } from '../Select';
import TextArea from '../TextArea';
import TextInput from '../TextInput';
import Toggle from '../Toggle';
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>

14
src/components/Form/Form.stories.js Normal file
View file

@ -0,0 +1,14 @@
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
import Component from './Form.Story.svelte';
export default { title: 'Form', decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
legendText: text('Text in <legend> (legendText)', 'Checkbox heading'),
message: boolean('Show form requirement (message)', false),
messageText: text('Form requirement text (messageText)', ''),
invalid: boolean('Mark as invalid (invalid)', false)
}
});

9
src/components/Form/Form.svelte
View file

@ -6,6 +6,13 @@
import { cx } from '../../lib';
</script>
<form on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form', className)} {style}>
<form
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:submit|preventDefault
class={cx('--form', className)}
{style}>
<slot />
</form>

2
src/components/FormGroup/FormGroup.svelte
View file

@ -1,8 +1,8 @@
<script>
let className = undefined;
export { className as class };
export let legendText = '';
export let invalid = false;
export let legendText = '';
export let message = false;
export let messageText = '';
export let style = undefined;

11
src/components/FormItem/FormItem.Story.svelte Normal file
View file

@ -0,0 +1,11 @@
<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>

6
src/components/FormItem/FormItem.stories.js Normal file
View file

@ -0,0 +1,6 @@
import { withKnobs } from '@storybook/addon-knobs';
import Component from './FormItem.Story.svelte';
export default { title: 'FormItem', decorators: [withKnobs] };
export const Default = () => ({ Component });

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

@ -0,0 +1,17 @@
<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>

8
src/components/FormLabel/FormLabel.stories.js Normal file
View file

@ -0,0 +1,8 @@
import { withKnobs } from '@storybook/addon-knobs';
import Component from './FormLabel.Story.svelte';
export default { title: 'FormLabel', decorators: [withKnobs] };
export const Default = () => ({ Component });
export const WithTooltip = () => ({ Component, props: { story: 'tooltip' } });

2
src/components/FormLabel/FormLabel.svelte
View file

@ -13,7 +13,7 @@
on:mouseenter
on:mouseleave
for={id}
class={cx('--form-item', className)}
class={cx('--label', className)}
{style}>
<slot />
</label>

8
src/components/Icon/Icon.svelte
View file

@ -1,12 +1,12 @@
<script>
let className = undefined;
export { className as class };
export let skeleton = false;
export let render = undefined;
export let title = undefined;
export let tabindex = undefined;
export let focusable = false;
export let render = undefined;
export let skeleton = false;
export let style = undefined;
export let tabindex = undefined;
export let title = undefined;
import IconSkeleton from './Icon.Skeleton.svelte';

4
src/components/InlineLoading/InlineLoading.svelte
View file

@ -1,11 +1,11 @@
<script>
let className = undefined;
export { className as class };
export let status = 'active';
export let description = undefined;
export let iconDescription = undefined;
export let successDelay = 1500;
export let status = 'active';
export let style = undefined;
export let successDelay = 1500;
import { createEventDispatcher, afterUpdate, onDestroy } from 'svelte';
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';

18
src/components/InlineLoading/InlineLoading.test.js Normal file
View file

@ -0,0 +1,18 @@
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();
});

2
src/components/Link/Link.svelte
View file

@ -1,8 +1,8 @@
<script>
let className = undefined;
export { className as class };
export let href = undefined;
export let disabled = false;
export let href = undefined;
export let inline = false;
export let style = undefined;

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

@ -0,0 +1,23 @@
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');
});

11
src/components/ListBox/ListBox.svelte
View file

@ -1,14 +1,15 @@
<script>
let className = undefined;
export { className as class };
export let size = undefined;
export let type = 'default';
export let disabled = false;
export let id = Math.random();
export let invalid = false;
export let invalidText = '';
export let open = false;
export let light = false;
export let open = false;
export let size = undefined;
export let style = undefined;
export let type = 'default';
import { cx } from '../../lib';
</script>
@ -17,6 +18,7 @@
role="listbox"
tabindex="-1"
data-invalid={invalid || undefined}
aria-label={$$props['aria-label']}
class={cx('--list-box', size && `--list-box--${size}`, type === 'inline' && '--list-box--inline', disabled && '--list-box--disabled', open && '--list-box--expanded', light && '--list-box--light', className)}
on:keydown
on:keydown={event => {
@ -25,7 +27,8 @@
}
}}
on:click|preventDefault|stopPropagation
{style}>
{style}
{id}>
<slot />
</div>
{#if invalid}

27
src/components/ListBox/ListBoxField.svelte
View file

@ -1,32 +1,49 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let tabindex = '-1';
export let role = 'combobox';
export let disabled = false;
export const translationIds = { close: 'close', open: 'open' };
export let translateWithId = id => defaultTranslations[id];
export let disabled = false;
export let id = Math.random();
export let role = 'combobox';
export let style = undefined;
export let tabindex = '-1';
export let translateWithId = id => defaultTranslations[id];
import { getContext } from 'svelte';
import { cx } from '../../lib';
const defaultTranslations = {
[translationIds.close]: 'Close menu',
[translationIds.open]: 'Open menu'
};
const ctx = getContext('MultiSelect') || getContext('Dropdown');
let fieldRef = undefined;
$: if (ctx && fieldRef) {
ctx.declareRef({ key: 'field', ref: fieldRef });
}
$: ariaExpanded = $$props['aria-expanded'];
$: menuId = `menu-${id}`;
</script>
<div
bind:this={fieldRef}
role={ariaExpanded ? 'combobox' : role}
aria-expanded={ariaExpanded}
aria-owns={(ariaExpanded && menuId) || undefined}
aria-controls={(ariaExpanded && menuId) || undefined}
aria-disabled={disabled}
aria-label={ariaExpanded ? translateWithId('close') : translateWithId('open')}
tabindex={disabled ? '-1' : tabindex}
class={cx('--list-box__field', className)}
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keydown|preventDefault|stopPropagation
on:blur
{style}>
<slot />
</div>

10
src/components/ListBox/ListBoxMenu.svelte
View file

@ -1,7 +1,7 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random(); // TODO: Use context to re-use same id per ListBox
export let id = Math.random();
export let style = undefined;
import { cx } from '../../lib';
@ -9,6 +9,12 @@
$: menuId = `menu-${id}`;
</script>
<div role="listbox" id={menuId} class={cx('--list-box__menu', className)} {style}>
<div
role="listbox"
id={menuId}
aria-labelledby={$$props['aria-labelledby']}
aria-label={$$props['aria-label']}
class={cx('--list-box__menu', className)}
{style}>
<slot />
</div>

11
src/components/ListBox/ListBoxMenuIcon.svelte
View file

@ -1,10 +1,10 @@
<script>
let className = undefined;
export { className as class };
export let open = false;
export const translationIds = { close: 'close', open: 'open' };
export let translateWithId = id => defaultTranslations[id];
export let open = false;
export let style = undefined;
export let translateWithId = id => defaultTranslations[id];
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
import { cx } from '../../lib';
@ -17,6 +17,9 @@
$: description = open ? translateWithId('close') : translateWithId('open');
</script>
<div class={cx('--list-box__menu-icon', open && '--list-box__menu-icon--open', className)} {style}>
<ChevronDown16 name="chevron--down" aria-label={description} title={description} />
<div
on:click|preventDefault|stopPropagation
class={cx('--list-box__menu-icon', open && '--list-box__menu-icon--open', className)}
{style}>
<ChevronDown16 aria-label={description} title={description} />
</div>

11
src/components/ListBox/ListBoxMenuItem.svelte
View file

@ -1,16 +1,17 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let active = false;
export let highlighted = false;
export let style = undefined;
import { cx } from '../../lib';
</script>
<div
class={cx('--list-box__menu-item', active && '--list-box__menu-item--active', highlighted && '--list-box__menu-item--highlighted', className)}
{style}>
on:click
on:mouseenter
on:mouseleave
class={cx('--list-box__menu-item', active && '--list-box__menu-item--active', highlighted && '--list-box__menu-item--highlighted')}
{id}>
<div class={cx('--list-box__menu-item__option')}>
<slot />
</div>

23
src/components/ListBox/ListBoxSelection.svelte
View file

@ -1,45 +1,50 @@
<script>
let className = undefined;
export { className as class };
export const translationIds = { clearAll: 'clearAll', clearSelection: 'clearSelection' };
export let disabled = false;
export let selectionCount = undefined;
export const translationIds = { clearAll: 'clearAll', clearSelection: 'clearSelection' };
export let translateWithId = id => defaultTranslations[id];
export let style = undefined;
export let translateWithId = id => defaultTranslations[id];
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher, getContext } from 'svelte';
import Close16 from 'carbon-icons-svelte/lib/Close16';
import { cx } from '../../lib';
const dispatch = createEventDispatcher();
const defaultTranslations = {
[translationIds.clearAll]: 'Clear all selected items',
[translationIds.clearSelection]: 'Clear selected item'
};
const dispatch = createEventDispatcher();
const ctx = getContext('MultiSelect');
let selectionRef = undefined;
$: if (ctx && selectionRef) {
ctx.declareRef({ key: 'selection', ref: selectionRef });
}
$: description = selectionCount ? translateWithId('clearAll') : translateWithId('clearSelection');
</script>
<div
bind:this={selectionRef}
role="button"
aria-label="Clear Selection"
tabindex={disabled ? '-1' : '0'}
title={description}
class={cx('--list-box__selection', selectionCount && '--tag--filter', selectionCount && '--list-box__selection--multi', className)}
on:click
on:click|stopPropagation={event => {
on:click|preventDefault|stopPropagation={event => {
if (!disabled) {
dispatch('clear', event);
}
}}
on:keydown
on:keydown|stopPropagation={event => {
if (!disabled && event.key === 'Enter') {
dispatch('clear', event);
}
}}
{style}>
{selectionCount}
{#if selectionCount}{selectionCount}{/if}
<Close16 />
</div>

4
src/components/Loading/Loading.svelte
View file

@ -2,10 +2,10 @@
let className = undefined;
export { className as class };
export let active = true;
export let withOverlay = true;
export let small = false;
export let description = 'Active loading indicator';
export let small = false;
export let style = undefined;
export let withOverlay = true;
import { cx } from '../../lib';

18
src/components/Loading/Loading.test.js Normal file
View file

@ -0,0 +1,18 @@
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');
});

12
src/components/Modal/Modal.svelte
View file

@ -1,21 +1,21 @@
<script>
let className = undefined;
export { className as class };
export let passiveModal = false;
export let danger = false;
export let hasForm = false;
export let hasScrollingContent = false;
export let iconDescription = 'Close the modal';
export let id = Math.random();
export let modalAriaLabel = undefined;
export let modalHeading = undefined;
export let modalLabel = undefined;
export let modalAriaLabel = undefined;
export let open = false;
export let iconDescription = 'Close the modal';
export let passiveModal = false;
export let primaryButtonDisabled = false;
export let primaryButtonText = '';
export let secondaryButtonText = '';
export let danger = false;
export let shouldSubmitOnEnter = true;
export let hasScrollingContent = false;
export let selectorPrimaryFocus = '[data-modal-primary-focus]';
export let shouldSubmitOnEnter = true;
export let size = undefined;
export let style = undefined;

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

@ -0,0 +1,41 @@
<script>
import Layout from '../../internal/ui/Layout.svelte';
import Button from '../Button';
import MultiSelect from './MultiSelect.svelte';
let value = '';
let items = [
{ id: 'option-0', text: 'Option 1' },
{ id: 'option-1', text: 'Option 2' },
{ id: 'option-2', text: 'Option 3' },
{ id: 'option-3', text: 'Option 4' },
{
id: 'option-4',
text: 'An example option that is really long to show what should be done to handle long text'
}
];
let selectedIds = [];
</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="multiselect"
placeholder="Filter..."
bind:selectedIds
bind:items
bind:value />
</div>
</Layout>

38
src/components/MultiSelect/MultiSelect.stories.js Normal file
View file

@ -0,0 +1,38 @@
import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
import Component from './MultiSelect.Story.svelte';
export default { title: 'MultiSelect', decorators: [withKnobs] };
const types = {
'Default (default)': 'default',
'Inline (inline)': 'inline'
};
const sizes = {
'Extra large size (xl)': 'xl',
'Regular size (lg)': '',
'Small size (sm)': 'sm'
};
export const Default = () => ({
Component,
props: {
id: 'multiselect',
titleText: text('Title (titleText)', 'Multiselect Title'),
helperText: text('Helper text (helperText)', 'This is not helper text'),
filterable: boolean('Filterable (filterable)', false),
selectionFeedback: select(
'Selection feedback (selectionFeedback)',
['top', 'fixed', 'top-after-reopen'],
'top-after-reopen'
),
disabled: boolean('Disabled (disabled)', false),
light: boolean('Light variant (light)', false),
useTitleInItem: boolean('Show tooltip on hover', false),
type: select('UI type (Only for `<MultiSelect>`) (type)', types, 'default'),
size: select('Field size (size)', sizes, '') || undefined,
label: text('Label (label)', 'MultiSelect Label'),
invalid: boolean('Show form validation UI (invalid)', false),
invalidText: text('Form validation UI content (invalidText)', 'Invalid Selection')
}
});

295
src/components/MultiSelect/MultiSelect.svelte Normal file
View file

@ -0,0 +1,295 @@
<script>
let className = undefined;
export { className as class };
export let disabled = false;
export let filterable = false;
export let filterItem = (item, value) => item.text.toLowerCase().includes(value.toLowerCase());
export let helperText = '';
export let id = Math.random();
export let invalid = false;
export let invalidText = '';
export let items = [];
export let itemToString = item => item.text || item.id;
export let label = '';
export let light = false;
export let locale = 'en';
export let open = false;
export let placeholder = '';
export let selectedIds = [];
export let selectionFeedback = 'top-after-reopen';
export let size = undefined;
export let sortItem = (a, b) => a.text.localeCompare(b.text, locale, { numeric: true });
export let style = undefined;
export let titleText = '';
export let translateWithId = undefined;
export let type = 'default';
export let useTitleInItem = false;
export let value = '';
import { afterUpdate, setContext } from 'svelte';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import { cx } from '../../lib';
import Checkbox from '../Checkbox';
import ListBox, {
ListBoxField,
ListBoxMenu,
ListBoxMenuIcon,
ListBoxMenuItem,
ListBoxSelection
} from '../ListBox';
let multiSelectRef = undefined;
let fieldRef = undefined;
let selectionRef = undefined;
let inputRef = undefined;
let inputValue = '';
let initialSorted = false;
let highlightedIndex = -1;
let prevChecked = [];
setContext('MultiSelect', {
declareRef: ({ key, ref }) => {
switch (key) {
case 'field':
fieldRef = ref;
break;
case 'selection':
selectionRef = ref;
break;
}
}
});
function change(direction) {
let index = highlightedIndex + direction;
if (index < 0) {
index = items.length - 1;
} else if (index >= items.length) {
index = 0;
}
highlightedIndex = index;
}
function sort() {
return [
...(checked.length > 1 ? checked.sort(sortItem) : checked),
...unchecked.sort(sortItem)
];
}
afterUpdate(() => {
if (checked.length !== prevChecked.length) {
if (selectionFeedback === 'top') {
sortedItems = sort();
}
prevChecked = checked;
selectedIds = checked.map(({ id }) => id);
}
if (!open) {
if (!initialSorted || selectionFeedback !== 'fixed') {
sortedItems = sort();
initialSorted = true;
}
highlightedIndex = -1;
inputValue = '';
}
items = sortedItems;
});
$: menuId = `menu-${id}`;
$: inline = type === 'inline';
$: ariaLabel = $$props['aria-label'] || 'Choose an item';
$: sortedItems = items.map(item => ({ ...item, checked: selectedIds.includes(item.id) }));
$: checked = sortedItems.filter(({ checked }) => checked);
$: unchecked = sortedItems.filter(({ checked }) => !checked);
$: filteredItems = sortedItems.filter(item => filterItem(item, value));
$: highlightedId = sortedItems[highlightedIndex] ? sortedItems[highlightedIndex].id : undefined;
$: value = inputValue;
</script>
<svelte:body
on:click={({ target }) => {
if (open && multiSelectRef && !multiSelectRef.contains(target)) {
open = false;
}
}} />
<div
bind:this={multiSelectRef}
class={cx('--multi-select__wrapper', '--list-box__wrapper', inline && '--multi-select__wrapper--inline', inline && '--list-box__wrapper--inline', inline && invalid && '--multi-select__wrapper--inline--invalid', inline && invalid && '--list-box__wrapper--inline--invalid', className)}
{style}>
{#if titleText}
<label class={cx('--label', disabled && '--label--disabled')} for={id}>{titleText}</label>
{/if}
{#if !inline && helperText}
<div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
{helperText}
</div>
{/if}
<ListBox
aria-label={ariaLabel}
class={cx('--multi-select', filterable && '--combo-box', filterable && '--multi-select--filterable', invalid && '--multi-select--invalid', inline && '--multi-select--inline', checked.length > 0 && '--multi-select--selected')}
{id}
{disabled}
{invalid}
{invalidText}
{open}
{light}
{size}>
{#if invalid}
<WarningFilled16 class={cx('--list-box__invalid-icon')} />
{/if}
<ListBoxField
role="button"
tabindex="0"
aria-expanded={open}
on:click={() => {
if (filterable) {
open = true;
inputRef.focus();
} else {
open = !open;
}
}}
on:keydown={({ key }) => {
if (filterable) {
return;
}
if (key === ' ') {
open = !open;
} else if (key === 'Tab') {
if (selectionRef && checked.length > 0) {
selectionRef.focus();
} else {
open = false;
fieldRef.blur();
}
} else if (key === 'ArrowDown') {
change(1);
} else if (key === 'ArrowUp') {
change(-1);
} else if (key === 'Enter') {
if (highlightedIndex > -1) {
sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
}
}
}}
on:blur={({ relatedTarget }) => {
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
fieldRef.focus();
}
}}
{id}
{disabled}
{translateWithId}>
{#if checked.length > 0}
<ListBoxSelection
selectionCount={checked.length}
on:clear={() => {
sortedItems = sortedItems.map(item => ({ ...item, checked: false }));
fieldRef.blur();
}}
{translateWithId}
{disabled} />
{/if}
{#if filterable}
<input
bind:this={inputRef}
role="combobox"
tabindex="0"
autocomplete="off"
aria-autocomplete="list"
aria-expanded={open}
aria-activedescendant={highlightedId}
aria-disabled={disabled}
aria-controls={menuId}
class={cx('--text-input', inputValue === '' && '--text-input--empty')}
on:input={({ target }) => {
inputValue = target.value;
}}
on:keydown
on:keydown|stopPropagation={({ key }) => {
if (key === 'Enter') {
if (highlightedIndex > -1) {
sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
}
} else if (key === 'Tab') {
open = false;
} else if (key === 'ArrowDown') {
change(1);
} else if (key === 'ArrowUp') {
change(-1);
}
}}
on:focus
on:blur
on:blur={({ relatedTarget }) => {
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
inputRef.focus();
}
}}
{disabled}
{placeholder}
{id}
value={inputValue} />
{#if invalid}
<WarningFilled16 class={cx('--list-box__invalid-icon')} />
{/if}
{#if inputValue}
<ListBoxSelection
on:clear={() => {
inputValue = '';
open = false;
}}
{translateWithId}
{disabled}
{open} />
{/if}
<ListBoxMenuIcon
on:click={() => {
open = !open;
}}
{translateWithId}
{open} />
{/if}
{#if !filterable}
<span class={cx('--list-box__label')}>{label}</span>
<ListBoxMenuIcon {open} {translateWithId} />
{/if}
</ListBoxField>
{#if open}
<ListBoxMenu aria-label={ariaLabel} {id}>
{#each filterable ? filteredItems : sortedItems as item, i (item.id || i)}
<ListBoxMenuItem
id={item.id}
active={item.checked}
highlighted={highlightedIndex === i}
on:click={() => {
sortedItems = sortedItems.map(_ =>
_.id === item.id ? { ..._, checked: !_.checked } : _
);
fieldRef.focus();
}}
on:mouseenter={() => {
highlightedIndex = i;
}}>
<Checkbox
readonly
tabindex="-1"
id={`checkbox-${item.id}`}
title={useTitleInItem ? itemToString(item) : undefined}
name={itemToString(item)}
labelText={itemToString(item)}
checked={item.checked}
{disabled} />
</ListBoxMenuItem>
{/each}
</ListBoxMenu>
{/if}
</ListBox>
</div>

3
src/components/MultiSelect/index.js Normal file
View file

@ -0,0 +1,3 @@
import MultiSelect from './MultiSelect.svelte';
export default MultiSelect;

12
src/components/Notification/InlineNotification.svelte
View file

@ -1,15 +1,15 @@
<script>
let className = undefined;
export { className as class };
export let kind = 'error';
export let title = 'provide a title';
export let subtitle = ''; // TODO: support subtitle slot?
export let role = 'alert';
export let notificationType = 'inline';
export let iconDescription = 'closes notification';
export let hideCloseButton = false;
export let iconDescription = 'closes notification';
export let kind = 'error';
export let lowContrast = false;
export let notificationType = 'inline';
export let role = 'alert';
export let style = undefined;
export let subtitle = ''; // TODO: support subtitle slot?
export let title = 'provide a title';
import { createEventDispatcher } from 'svelte';
import NotificationIcon from './NotificationIcon.svelte';

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

@ -3,8 +3,8 @@
import Layout from '../../internal/ui/Layout.svelte';
import InlineNotification from './InlineNotification.svelte';
import ToastNotification from './ToastNotification.svelte';
import NotificationActionButton from './NotificationActionButton.svelte';
import ToastNotification from './ToastNotification.svelte';
</script>
<Layout>

2
src/components/Notification/NotificationActionButton.svelte
View file

@ -3,8 +3,8 @@
export { className as class };
export let style = undefined;
import Button from '../Button';
import { cx } from '../../lib';
import Button from '../Button';
</script>
<Button

6
src/components/Notification/NotificationButton.svelte
View file

@ -1,12 +1,12 @@
<script>
let className = undefined;
export { className as class };
export let notificationType = 'toast';
export let type = 'button';
export let iconDescription = 'close icon';
export let notificationType = 'toast';
export let renderIcon = Close20;
export let title = undefined;
export let style = undefined;
export let title = undefined;
export let type = 'button';
import Close20 from 'carbon-icons-svelte/lib/Close20';
import { cx } from '../../lib';

2
src/components/Notification/NotificationIcon.svelte
View file

@ -3,8 +3,8 @@
export let notificationType = 'toast';
export let iconDescription = 'closes notification';
import ErrorFilled20 from 'carbon-icons-svelte/lib/ErrorFilled20';
import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
import ErrorFilled20 from 'carbon-icons-svelte/lib/ErrorFilled20';
import WarningFilled20 from 'carbon-icons-svelte/lib/WarningFilled20';
import { cx } from '../../lib';

4
src/components/Notification/NotificationTextDetails.svelte
View file

@ -1,8 +1,8 @@
<script>
export let title = 'title';
export let subtitle = '';
export let caption = 'caption';
export let notificationType = 'toast';
export let subtitle = '';
export let title = 'title';
import { cx } from '../../lib';
</script>

16
src/components/Notification/ToastNotification.svelte
View file

@ -1,22 +1,22 @@
<script>
let className = undefined;
export { className as class };
export let kind = 'error';
export let title = 'provide a title';
export let subtitle = ''; // TODO: support subtitle slot?
export let caption = 'provide a caption';
export let role = 'alert';
export let notificationType = 'toast';
export let iconDescription = 'closes notification';
export let hideCloseButton = false;
export let iconDescription = 'closes notification';
export let kind = 'error';
export let lowContrast = false;
export let timeout = 0;
export let notificationType = 'toast';
export let role = 'alert';
export let style = undefined;
export let subtitle = ''; // TODO: support subtitle slot?
export let timeout = 0;
export let title = 'provide a title';
import { createEventDispatcher, onMount } from 'svelte';
import NotificationButton from './NotificationButton.svelte';
import NotificationIcon from './NotificationIcon.svelte';
import NotificationTextDetails from './NotificationTextDetails.svelte';
import NotificationButton from './NotificationButton.svelte';
import { cx } from '../../lib';
const dispatch = createEventDispatcher();

2
src/components/NumberInput/NumberInput.stories.js
View file

@ -16,7 +16,7 @@ export const Default = () => ({
disabled: boolean('Disabled (disabled)', false),
readonly: boolean('Read only (readonly)', false),
invalid: boolean('Show form validation UI (invalid)', false),
isMobile: boolean('Mobile variant', false),
mobile: boolean('Mobile variant (mobile)', false),
invalidText: text('Form validation UI content (invalidText)', 'Number is not valid'),
helperText: text('Helper text (helperText)', 'Optional helper text.'),
light: boolean('Light variant (light)', false)

28
src/components/NumberInput/NumberInput.svelte
View file

@ -1,30 +1,30 @@
<script>
let className = undefined;
export { className as class };
export const translationIds = { increment: 'increment', decrement: 'decrement' };
export let allowEmpty = false;
export let disabled = false;
export let helperText = '';
export let hideLabel = false;
export let iconDescription = '';
export let id = Math.random();
export let label = '';
export let max = undefined;
export let min = undefined;
export let step = 1;
export let value = '';
export let readonly = false;
export let invalid = false;
export let invalidText = 'Provide invalidText';
export let helperText = '';
export let mobile = false;
export let label = '';
export let light = false;
export let allowEmpty = false;
export let isMobile = false;
export const translationIds = { increment: 'increment', decrement: 'decrement' };
export let translateWithId = id => defaultTranslations[id];
export let max = undefined;
export let min = undefined;
export let readonly = false;
export let step = 1;
export let style = undefined;
export let translateWithId = id => defaultTranslations[id];
export let value = '';
import { createEventDispatcher, afterUpdate } from 'svelte';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import CaretDownGlyph from 'carbon-icons-svelte/lib/CaretDownGlyph';
import CaretUpGlyph from 'carbon-icons-svelte/lib/CaretUpGlyph';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import { cx } from '../../lib';
const defaultTranslations = {
@ -62,8 +62,8 @@
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<div
data-invalid={error || undefined}
class={cx('--number', '--number--helpertext', readonly && '--number--readonly', light && '--number--light', hideLabel && '--number--nolabel', isMobile && '--number--mobile')}>
{#if isMobile}
class={cx('--number', '--number--helpertext', readonly && '--number--readonly', light && '--number--light', hideLabel && '--number--nolabel', mobile && '--number--mobile')}>
{#if mobile}
{#if label}
<label class={cx('--label', hideLabel && '--visually-hidden')} for={id}>
<slot name="label">{label}</slot>

10
src/components/OverflowMenu/OverflowMenu.svelte
View file

@ -1,17 +1,17 @@
<script>
let className = undefined;
export { className as class };
export let open = false;
export let direction = 'bottom';
export let flipped = false;
export let tabindex = '0';
export let id = Math.random();
export let iconDescription = 'Open and close list of options';
export let iconClass = undefined;
export let icon = OverflowMenuVertical16;
export let iconClass = undefined;
export let iconDescription = 'Open and close list of options';
export let id = Math.random();
export let light = false;
export let menuOptionsClass = undefined;
export let open = false;
export let style = undefined;
export let tabindex = '0';
import { createEventDispatcher, setContext, afterUpdate } from 'svelte';
import { writable } from 'svelte/store';

6
src/components/OverflowMenu/OverflowMenuItem.svelte
View file

@ -1,14 +1,14 @@
<script>
let className = undefined;
export { className as class };
export let text = 'Provide text';
export let href = '';
export let hasDivider = false;
export let danger = false;
export let disabled = false;
export let hasDivider = false;
export let href = '';
export let primaryFocus = false;
export let requireTitle = true;
export let style = undefined;
export let text = 'Provide text';
import { getContext, afterUpdate } from 'svelte';
import { cx } from '../../lib';

2
src/components/Pagination/Pagination.Skeleton.svelte
View file

@ -3,8 +3,8 @@
export { className as class };
export let style = undefined;
import SkeletonText from '../SkeletonText';
import { cx } from '../../lib';
import SkeletonText from '../SkeletonText';
</script>
<div

20
src/components/Pagination/Pagination.svelte
View file

@ -2,26 +2,26 @@
let className = undefined;
export { className as class };
export let backwardText = 'Previous page';
export let itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`;
export let disabled = false;
export let forwardText = 'Next page';
export let id = Math.random();
export let itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`;
export let itemsPerPageText = 'Items per page:';
export let itemText = (min, max) => `${min}–${max} items`;
export let pageRangeText = (current, total) => `of ${total} pages`;
export let pageText = page => `page ${page}`;
export let pageSizes = [10];
export let totalItems = 0;
export let disabled = false;
export let page = 1;
export let pageSize = 10;
export let pagesUnknown = false;
export let pageInputDisabled = false;
export let pageRangeText = (current, total) => `of ${total} pages`;
export let pageSize = 10;
export let pageSizes = [10];
export let pagesUnknown = false;
export let pageText = page => `page ${page}`;
export let style = undefined;
export let totalItems = 0;
import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24';
import CaretLeft24 from 'carbon-icons-svelte/lib/CaretLeft24';
import Select, { SelectItem } from '../Select';
import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24';
import { cx, fillArray } from '../../lib';
import Select, { SelectItem } from '../Select';
$: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
$: selectItems = fillArray(totalPages);

2
src/components/ProgressIndicator/ProgressIndicator.Skeleton.svelte
View file

@ -1,8 +1,8 @@
<script>
let className = undefined;
export { className as class };
export let vertical = false;
export let style = undefined;
export let vertical = false;
import { cx } from '../../lib';
</script>

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

@ -3,8 +3,8 @@
import Layout from '../../internal/ui/Layout.svelte';
import ProgressIndicator from './ProgressIndicator.svelte';
import ProgressStep from './ProgressStep.svelte';
import ProgressIndicatorSkeleton from './ProgressIndicator.Skeleton.svelte';
import ProgressStep from './ProgressStep.svelte';
</script>
<Layout>
@ -39,8 +39,8 @@
<ProgressStep
label="Fourth step"
description="Step 4: Getting started with Carbon Design System"
invalid
secondaryLabel="Example invalid step" />
secondaryLabel="Example invalid step"
invalid />
<ProgressStep
label="Fifth step"
description="Step 5: Getting started with Carbon Design System"

2
src/components/ProgressIndicator/ProgressIndicator.svelte
View file

@ -2,8 +2,8 @@
let className = undefined;
export { className as class };
export let currentIndex = 0;
export let vertical = false;
export let style = undefined;
export let vertical = false;
import { createEventDispatcher, setContext } from 'svelte';
import { writable, derived } from 'svelte/store';

10
src/components/ProgressIndicator/ProgressStep.svelte
View file

@ -1,18 +1,18 @@
<script>
let className = undefined;
export { className as class };
export let label = '';
export let current = false;
export let complete = false;
export let current = false;
export let description = '';
export let invalid = false;
export let secondaryLabel = '';
export let disabled = false;
export let invalid = false;
export let label = '';
export let secondaryLabel = '';
export let style = undefined;
import { getContext } from 'svelte';
import Warning16 from 'carbon-icons-svelte/lib/Warning16';
import CheckmarkOutline16 from 'carbon-icons-svelte/lib/CheckmarkOutline16';
import Warning16 from 'carbon-icons-svelte/lib/Warning16';
import { cx } from '../../lib';
const id = Math.random();

10
src/components/RadioButton/RadioButton.svelte
View file

@ -1,15 +1,15 @@
<script>
let className = undefined;
export { className as class };
export let value = '';
export let checked = false;
export let disabled = false;
export let id = Math.random();
export let labelText = '';
export let hideLabel = false;
export let id = Math.random();
export let labelPosition = 'right';
export let labelText = '';
export let name = '';
export let style = undefined;
export let value = '';
import { getContext } from 'svelte';
import { writable } from 'svelte/store';
@ -17,13 +17,13 @@
const ctx = getContext('RadioButtonGroup');
let selected = ctx ? ctx.selected : writable(checked ? value : undefined);
let selectedValue = ctx ? ctx.selectedValue : writable(checked ? value : undefined);
if (ctx) {
ctx.add({ id, checked, disabled, value });
}
$: checked = $selected === value;
$: checked = $selectedValue === value;
</script>
<div

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

@ -3,11 +3,13 @@
import RadioButtonGroup from './RadioButtonGroup.svelte';
import RadioButton from '../RadioButton';
import FormGroup from '../FormGroup';
let selected = 'default-selected';
</script>
<Layout>
<FormGroup legendText="Radio Button heading">
<RadioButtonGroup {...$$props.group} defaultSelected="default-selected" legend="Group Legend">
<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" />

18
src/components/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -1,10 +1,10 @@
<script>
let className = undefined;
export { className as class };
export let orientation = 'horizontal';
export let labelPosition = 'right';
export let defaultSelected = undefined;
export let selected = undefined;
export let disabled = false;
export let labelPosition = 'right';
export let orientation = 'horizontal';
export let style = undefined;
import { createEventDispatcher, setContext } from 'svelte';
@ -13,23 +13,23 @@
const dispatch = createEventDispatcher();
let selected = writable(defaultSelected);
let selectedValue = writable(selected);
setContext('RadioButtonGroup', {
selected,
selectedValue,
add: ({ checked, value }) => {
if (checked) {
selected.set(value);
selectedValue.set(value);
}
},
update: value => {
selected.set(value);
selectedValue.set(value);
}
});
$: selected = $selectedValue;
$: {
defaultSelected = $selected;
dispatch('change', $selected);
dispatch('change', $selectedValue);
}
</script>

93
src/components/Search/Search.svelte
View file

@ -1,55 +1,70 @@
<script>
let className = undefined;
export { className as class };
export let value = '';
export let autofocus = false;
export let type = 'text';
export let small = false;
export let placeholder = '';
export let labelText = '';
export let closeButtonLabelText = 'Clear search input';
export let size = small ? 'sm' : 'xl';
export let light = false;
export let id = Math.random();
export let labelText = '';
export let light = false;
export let placeholder = 'Search...';
export let small = false;
export let size = small ? 'sm' : 'xl';
export let skeleton = false;
export let style = undefined;
export let type = 'text';
export let value = '';
import Search16 from 'carbon-icons-svelte/lib/Search16';
import Close16 from 'carbon-icons-svelte/lib/Close16';
import Close20 from 'carbon-icons-svelte/lib/Close20';
import Search16 from 'carbon-icons-svelte/lib/Search16';
import { cx } from '../../lib';
import SearchSkeleton from './Search.Skeleton.svelte';
let inputRef = undefined;
</script>
<div
class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
{style}>
<Search16 class={cx('--search-magnifier')} />
<label for={id} class={cx('--label')}>{labelText}</label>
<!-- svelte-ignore a11y-autofocus -->
<input
bind:this={inputRef}
role="searchbox"
class={cx('--search-input')}
on:change
on:input
on:input={({ target }) => {
value = target.value;
}}
{autofocus}
{type}
{id}
{value}
{placeholder} />
<button
type="button"
class={cx('--search-close', value === '' && '--search-close--hidden')}
{#if skeleton}
<SearchSkeleton
on:click
on:click={() => {
value = '';
inputRef.focus();
}}
aria-label={closeButtonLabelText}>
<svelte:component this={size === 'xl' ? Close20 : Close16} />
</button>
</div>
on:mouseover
on:mouseenter
on:mouseleave
class={className}
{style}
{small} />
{/if}
{#if !skeleton}
<div
class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
{style}>
<Search16 class={cx('--search-magnifier')} />
<label class={cx('--label')} for={id}>{labelText}</label>
<!-- svelte-ignore a11y-autofocus -->
<input
bind:this={inputRef}
role="searchbox"
class={cx('--search-input')}
on:change
on:input
on:input={({ target }) => {
value = target.value;
}}
{autofocus}
{type}
{id}
{value}
{placeholder} />
<button
type="button"
aria-label={closeButtonLabelText}
class={cx('--search-close', value === '' && '--search-close--hidden')}
on:click
on:click={() => {
value = '';
inputRef.focus();
}}>
<svelte:component this={size === 'xl' ? Close20 : Close16} />
</button>
</div>
{/if}

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

@ -6,14 +6,17 @@
import SelectItem from './SelectItem.svelte';
import SelectSkeleton from './Select.Skeleton.svelte';
import SelectItemGroup from './SelectItemGroup.svelte';
let selected = 'placeholder-item';
</script>
<Layout>
<div>
{selected}
{#if story === 'skeleton'}
<SelectSkeleton {...$$props} />
{:else}
<Select {...$$props.select} id="select-1" defaultValue="placeholder-item">
<Select {...$$props.select} id="select-1" 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" />

24
src/components/Select/Select.svelte
View file

@ -1,17 +1,17 @@
<script>
let className = undefined;
export { className as class };
export let disabled = false;
export let helperText = '';
export let hideLabel = false;
export let id = Math.random();
export let inline = false;
export let labelText = '';
export let disabled = false;
export let defaultValue = undefined;
export let hideLabel = false;
export let invalid = false;
export let invalidText = '';
export let helperText = '';
export let labelText = '';
export let light = false;
export let noLabel = false;
export let selected = undefined;
export let style = undefined;
import { createEventDispatcher, setContext } from 'svelte';
@ -22,16 +22,16 @@
const dispatch = createEventDispatcher();
let selected = writable(defaultValue);
let selectedValue = writable(selected);
setContext('Select', { selected });
setContext('Select', { selectedValue });
$: errorId = `error-${id}`;
$: selectedValue.set(selected);
$: selected = $selectedValue;
$: {
selected.set(defaultValue);
dispatch('change', $selected);
dispatch('change', $selectedValue);
}
$: defaultValue = $selected;
</script>
<div class={cx('--form-item')} {style}>
@ -58,7 +58,7 @@
disabled={disabled || undefined}
aria-invalid={invalid || undefined}
on:change={({ target }) => {
selected.set(target.value);
selectedValue.set(target.value);
}}
{id}>
<slot />
@ -87,7 +87,7 @@
aria-invalid={invalid || undefined}
on:change
on:change={({ target }) => {
selected.set(target.value);
selectedValue.set(target.value);
}}
{id}>
<slot />

22
src/components/Select/SelectItem.svelte
View file

@ -1,24 +1,26 @@
<script>
let className = undefined;
export { className as class };
export let value = '';
export let text = '';
export let disabled = false;
export let hidden = false;
export let style = undefined;
export let text = '';
export let value = '';
import { getContext } from 'svelte';
import { cx } from '../../lib';
const ctx = getContext('Select') || getContext('TimePickerSelect');
let selected = false;
ctx.selectedValue.subscribe(currentValue => {
if (currentValue === value) {
selected = true;
}
});
</script>
<option
selected={ctx.$selected === value}
class={cx('--select-option', className)}
{value}
{disabled}
{hidden}
{style}>
{text}
<option class={cx('--select-option', className)} {value} {disabled} {hidden} {style} {selected}>
{text || value}
</option>

6
src/components/SkeletonText/SkeletonText.svelte
View file

@ -1,11 +1,11 @@
<script>
let className = undefined;
export { className as class };
export let paragraph = false;
export let lines = 3;
export let width = '100%';
export let heading = false;
export let lines = 3;
export let paragraph = false;
export let style = undefined;
export let width = '100%';
import { cx } from '../../lib';

28
src/components/Slider/Slider.svelte
View file

@ -1,25 +1,23 @@
<script>
let className = undefined;
export { className as class };
export let disabled = false;
export let hideTextInput = false;
export let id = Math.random();
export let value = '';
export let min = 0;
export let max = 100;
export let minLabel = '';
export let maxLabel = '';
export let labelText = '';
export let formatLabel = (value, label) =>
typeof label === 'function' ? label(value) : `${value}${label}`;
export let step = 1;
export let stepMultiplier = 4;
export let disabled = false;
export let name = '';
export let inputType = 'number';
export let invalid = false;
export let required = false;
export let labelText = '';
export let light = false;
export let max = 100;
export let maxLabel = '';
export let min = 0;
export let minLabel = '';
export let name = '';
export let required = false;
export let step = 1;
export let stepMultiplier = 4;
export let style = undefined;
export let value = '';
import { createEventDispatcher, afterUpdate } from 'svelte';
import { cx } from '../../lib';
@ -82,7 +80,7 @@
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<label for={id} class={cx('--label', disabled && '--label--disabled')}>{labelText}</label>
<div class={cx('--slider-container')}>
<span class={cx('--slider__range-label')}>{formatLabel(min, minLabel)}</span>
<span class={cx('--slider__range-label')}>{minLabel || min}</span>
<div
bind:this={elementRef}
role="presentation"
@ -134,7 +132,7 @@
{max}
{step} />
</div>
<span class={cx('--slider__range-label')}>{formatLabel(max, maxLabel)}</span>
<span class={cx('--slider__range-label')}>{maxLabel || max}</span>
{#if !hideTextInput}
<input
type={inputType}

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

@ -9,8 +9,10 @@
import StructuredListHead from './StructuredListHead.svelte';
import StructuredListInput from './StructuredListInput.svelte';
import StructuredListRow from './StructuredListRow.svelte';
import StructuredListWrapper from './StructuredListWrapper.svelte';
import StructuredListSkeleton from './StructuredList.Skeleton.svelte';
import StructuredList from './StructuredList.svelte';
let selected = 'row-1-value';
</script>
<Layout>
@ -18,10 +20,9 @@
{#if story === 'skeleton'}
<div style="width: 800px">
<StructuredListSkeleton />
<StructuredListSkeleton border />
</div>
{:else if story === 'selection'}
<StructuredListWrapper selection border defaultSelected="row-1-value">
<StructuredList selection border bind:selected>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
@ -54,9 +55,9 @@
</StructuredListRow>
{/each}
</StructuredListBody>
</StructuredListWrapper>
</StructuredList>
{:else}
<StructuredListWrapper>
<StructuredList>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
@ -84,7 +85,7 @@
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
</StructuredList>
{/if}
</div>
</Layout>

14
src/components/StructuredList/StructuredListWrapper.svelte → src/components/StructuredList/StructuredList.svelte
View file

@ -1,7 +1,7 @@
<script>
let className = undefined;
export { className as class };
export let defaultSelected = undefined;
export let selected = undefined;
export let border = false;
export let selection = false;
export let style = undefined;
@ -12,18 +12,18 @@
const dispatch = createEventDispatcher();
let selected = writable(defaultSelected);
let selectedValue = writable(selected);
setContext('StructuredListWrapper', {
selected,
selectedValue,
update: value => {
selected.set(value);
selectedValue.set(value);
}
});
$: selected = $selectedValue;
$: {
defaultSelected = $selected;
dispatch('change', $selected);
dispatch('change', $selectedValue);
}
</script>
@ -32,8 +32,8 @@
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--structured-list', border && '--structured-list--border', selection && '--structured-list--selection', className)}
aria-label={$$props['aria-label'] || 'Structured list section'}
class={cx('--structured-list', border && '--structured-list--border', selection && '--structured-list--selection', className)}
{style}>
<slot />
</section>

22
src/components/StructuredList/StructuredListInput.svelte
View file

@ -1,23 +1,23 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let value = 'value';
export let title = 'title';
export let name = '';
export let checked = false;
export let id = Math.random();
export let name = '';
export let style = undefined;
export let title = 'title';
export let value = 'value';
import { getContext } from 'svelte';
import { cx } from '../../lib';
const { selected, update } = getContext('StructuredListWrapper');
const { selectedValue, update } = getContext('StructuredListWrapper');
if (checked) {
update(value);
}
$: checked = $selected === value;
$: checked = $selectedValue === value;
</script>
<input
@ -27,9 +27,9 @@
on:change={() => {
update(value);
}}
{value}
{name}
{title}
{style}
{checked}
{id}
{checked} />
{name}
{style}
{title}
{value} />

Some files were not shown because too many files have changed in this diff Show more