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

chore: 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

91
src/StructuredList/StructuredList.Story.svelte Normal file
View file

@ -0,0 +1,91 @@
<script>
export let story = undefined;
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import StructuredListBody from "./StructuredListBody.svelte";
import StructuredListCell from "./StructuredListCell.svelte";
import StructuredListHead from "./StructuredListHead.svelte";
import StructuredListInput from "./StructuredListInput.svelte";
import StructuredListRow from "./StructuredListRow.svelte";
import StructuredListSkeleton from "./StructuredList.Skeleton.svelte";
import StructuredList from "./StructuredList.svelte";
$: selected = "row-1-value";
</script>
<div>
{#if story === 'skeleton'}
<div style="width: 800px">
<StructuredListSkeleton />
</div>
{:else if story === 'selection'}
<StructuredList selection border bind:selected>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
<StructuredListCell head>{''}</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
{#each [0, 1, 2, 3] as item, i (item)}
<StructuredListRow label for="row-{i}">
<StructuredListCell>Row {i}</StructuredListCell>
<StructuredListCell>Row {i}</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean
posuere sem vel euismod dignissim. Nulla ut cursus dolor.
Pellentesque vulputate nisl a porttitor interdum.
</StructuredListCell>
<StructuredListInput
id="row-{i}"
value="row-{i}-value"
title="row-{i}-title"
name="row-{i}-name" />
<StructuredListCell>
<CheckmarkFilled16
class="bx--structured-list-svg"
aria-label="select an option"
title="select an option" />
</StructuredListCell>
</StructuredListRow>
{/each}
</StructuredListBody>
</StructuredList>
{:else}
<StructuredList>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell noWrap>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 2</StructuredListCell>
<StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredList>
{/if}
</div>