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

chore: update dependencies, remove jest

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

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

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