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

chore: remove storybook

Browse source
This commit is contained in:
Eric Liu 2020-10-14 16:23:44 -07:00
commit 378fe06e03
116 changed files with 103 additions and 14249 deletions
Download patch file Download diff file Expand all files Collapse all files

154
src/DataTable/DataTable.Story.svelte
View file

@ -1,154 +0,0 @@
<script>
export let story = undefined;
import DataTable from "./DataTable.svelte";
import Table from "./Table.svelte";
import TableBody from "./TableBody.svelte";
import TableCell from "./TableCell.svelte";
import TableContainer from "./TableContainer.svelte";
import TableHead from "./TableHead.svelte";
import TableHeader from "./TableHeader.svelte";
import TableRow from "./TableRow.svelte";
const rows = [
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
attached_groups: "Kevins VM Groups",
status: "Disabled",
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin",
attached_groups: "Maureens VM Groups",
status: "Starting",
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
attached_groups: "Andrews VM Groups",
status: "Active",
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
attached_groups: "Marcs VM Groups",
status: "Disabled",
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin",
attached_groups: "Mels VM Groups",
status: "Starting",
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
attached_groups: "Ronjas VM Groups",
status: "Active",
},
];
const headers = [
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
{ key: "attached_groups", value: "Attached Groups" },
{ key: "status", value: "Status" },
];
$: sortable = true;
</script>
{#if story === 'composed'}
<DataTable {...$$props} rows="{rows}" headers="{headers}" let:props>
<TableContainer
title="DataTable"
description="With default options"
{...props.getTableContainerProps()}
>
<Table {...props.getTableProps()}>
<TableHead>
<TableRow>
{#each props.headers as header, i (header.key)}
<TableHeader {...props.getHeaderProps({ header })}>
{header.header}
</TableHeader>
{/each}
</TableRow>
</TableHead>
<TableBody>
{#each props.rows as row, i}
<TableRow {...props.getRowProps({ row })}>
{#each row.cells as cell, j}
<TableCell>{cell.value}</TableCell>
{/each}
</TableRow>
{/each}
</TableBody>
</Table>
</TableContainer>
</DataTable>
{:else if story === 'sortable'}
<DataTable
bind:sortable
title="{$$props.title}"
description="{$$props.description}"
zebra="{$$props.zebra}"
size="{$$props.size}"
stickyHeader="{$$props.stickyHeader}"
on:click="{({ detail }) => {
console.log('on:click', detail);
}}"
on:click:header="{({ detail }) => {
console.log('on:click:header', detail);
}}"
on:click:row="{({ detail }) => {
console.log('on:click:row', detail);
}}"
on:click:cell="{({ detail }) => {
console.log('on:click:cell', detail);
}}"
rows="{rows}"
headers="{headers}"
/>
{:else}
<DataTable
title="{$$props.title}"
description="{$$props.description}"
zebra="{$$props.zebra}"
size="{$$props.size}"
stickyHeader="{$$props.stickyHeader}"
on:click="{({ detail }) => {
console.log('on:click', detail);
}}"
on:click:header="{({ detail }) => {
console.log('on:click:header', detail);
}}"
on:click:row="{({ detail }) => {
console.log('on:click:row', detail);
}}"
on:click:cell="{({ detail }) => {
console.log('on:click:cell', detail);
}}"
rows="{rows}"
headers="{headers}"
/>
{/if}

35
src/DataTable/DataTable.stories.js
View file

@ -1,35 +0,0 @@
import { withKnobs, boolean, select, text } from "@storybook/addon-knobs";
import Component from "./DataTable.Story.svelte";
export default { title: "DataTable", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
title: text("Optional DataTable title (title)", ""),
description: text("Optional DataTable description (description)", ""),
zebra: boolean("Zebra row styles (zebra)", false),
size: select(
"Row height (size)",
{ compact: "compact", short: "short", tall: "tall", none: null },
null
),
stickyHeader: boolean("Sticky header (experimental)", false),
},
});
export const Sortable = () => ({
Component,
props: {
story: "sortable",
title: text("Optional DataTable title (title)", ""),
description: text("Optional DataTable description (description)", ""),
zebra: boolean("Zebra row styles (zebra)", false),
size: select(
"Row height (size)",
{ compact: "compact", short: "short", tall: "tall", none: null },
null
),
stickyHeader: boolean("Sticky header (experimental)", false),
},
});