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: lift components folder

Browse source
This commit is contained in:
Eric Liu 2020-07-19 09:06:08 -07:00
commit 2200b29b92
301 changed files with 57 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,64 +0,0 @@
<script>
export let story = undefined;
import ClickableTile from "./ClickableTile.svelte";
import ExpandableTile from "./ExpandableTile.svelte";
import RadioTile from "./RadioTile.svelte";
import SelectableTile from "./SelectableTile.svelte";
import Tile from "./Tile.svelte";
import TileGroup from "./TileGroup.svelte";
const radioTiles = [
{ value: "standard", id: "tile-1", labelText: "Selectable Tile" },
{ value: "default-selected", id: "tile-2", labelText: "Selectable Tile" },
{ value: "selected", id: "tile-3", labelText: "Selectable Tile" }
];
$: selected = radioTiles[1].value;
$: selectedTile1 = false;
</script>
<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>