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

feat(structured-list)!: integration StructuredList with v11

Browse source
This commit is contained in:
Eric Liu 2024-04-22 22:15:56 -07:00
commit 2e5cce7f42
19 changed files with 245 additions and 410 deletions
Download patch file Download diff file Expand all files Collapse all files

67
tests/StructuredList.test.svelte
View file

@ -13,82 +13,33 @@
<StructuredList>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>Column A</StructuredListCell>
<StructuredListCell head>Column B</StructuredListCell>
<StructuredListCell head>Column C</StructuredListCell>
<StructuredListRow>
<StructuredListCell>Column A</StructuredListCell>
<StructuredListCell>Column B</StructuredListCell>
<StructuredListCell>Column C</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>
<StructuredListCell>Row 1.</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>
<StructuredListRow>
<StructuredListCell noWrap>Row 3</StructuredListCell>
<StructuredListCell>Row 3</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>
<StructuredList selection selected="row-1-value">
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
<StructuredListCell head>{""}</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
{#each [1, 2, 3] as item}
<StructuredListRow label for="row-{item}">
<StructuredListRow tag="label" for="row-{item}" selected={false}>
<StructuredListCell>Row {item}</StructuredListCell>
<StructuredListCell>Row {item}</StructuredListCell>
<StructuredListCell>Row {item}</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-{item}"
value="row-{item}-value"
title="row-{item}-title"
name="row-{item}-name"
icon={CheckmarkFilled}
/>
<StructuredListCell>
<CheckmarkFilled
class="bx--structured-list-svg"
aria-label="select an option"
title="select an option"
/>
</StructuredListCell>
</StructuredListRow>
{/each}
</StructuredListBody>
</StructuredList>
<StructuredListSkeleton rows="{3}" />
<StructuredListSkeleton count="{3}" />