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

refactor: use $$restProps API

Browse source 
- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities
This commit is contained in:
Eric Liu 2020-07-18 20:00:20 -07:00
commit e886d772c7
288 changed files with 4681 additions and 4498 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,18 +1,17 @@
<script>
export let story = undefined;
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
import Layout from '../../internal/ui/Layout.svelte';
import { cx } from '../../lib';
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';
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import Layout from "../../internal/ui/Layout.svelte";
import StructuredListBody from "./StructuredListBody.svelte";
import StructuredListCell from "./StructuredListCell.svelte";
import StructuredListHead from "./StructuredListHead.svelte";
import StructuredListInput from "./StructuredListInput.svelte";
import StructuredListRow from "./StructuredListRow.svelte";
import StructuredListSkeleton from "./StructuredList.Skeleton.svelte";
import StructuredList from "./StructuredList.svelte";
let selected = 'row-1-value';
$: selected = "row-1-value";
</script>
<Layout>
@ -33,22 +32,23 @@
</StructuredListHead>
<StructuredListBody>
{#each [0, 1, 2, 3] as item, i (item)}
<StructuredListRow label for={`row-${i}`}>
<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.
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`} />
id="row-{i}"
value="row-{i}-value"
title="row-{i}-title"
name="row-{i}-name" />
<StructuredListCell>
<CheckmarkFilled16
class={cx('--structured-list-svg')}
class="bx--structured-list-svg"
aria-label="select an option"
title="select an option" />
</StructuredListCell>
@ -70,18 +70,20 @@
<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.
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.
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>