diff --git a/README.md b/README.md index ac413ff6..66506219 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,14 @@ Currently, the following components are supported: - SelectItemGroup - SkeletonPlaceholder - SkeletonText +- StructuredList + - StructuredListSkeleton + - StructuredListBody + - StructuredListHead + - StructuredListCell + - StructuredListRow + - StructuredListInput + - StructuredListWrapper - Tag - TagSkeleton - TextArea diff --git a/src/components/StructuredList/StructuredList.Skeleton.svelte b/src/components/StructuredList/StructuredList.Skeleton.svelte new file mode 100644 index 00000000..2f190069 --- /dev/null +++ b/src/components/StructuredList/StructuredList.Skeleton.svelte @@ -0,0 +1,42 @@ + + +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ {#each rows as row, i (row)} +
+
+
+
+
+ {/each} +
+
diff --git a/src/components/StructuredList/StructuredList.Story.svelte b/src/components/StructuredList/StructuredList.Story.svelte new file mode 100644 index 00000000..75eaa452 --- /dev/null +++ b/src/components/StructuredList/StructuredList.Story.svelte @@ -0,0 +1,90 @@ + + + +
+ {#if story === 'skeleton'} +
+ + +
+ {:else if story === 'selection'} + + + + ColumnA + ColumnB + ColumnC + {''} + + + + {#each [0, 1, 2, 3] as item, i (item)} + + Row {i} + Row {i} + + 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. + + + + + + + {/each} + + + {:else} + + + + ColumnA + ColumnB + ColumnC + + + + + Row 1 + Row 1 + + 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. + + + + Row 2 + Row 2 + + 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. + + + + + {/if} +
+
diff --git a/src/components/StructuredList/StructuredList.stories.js b/src/components/StructuredList/StructuredList.stories.js new file mode 100644 index 00000000..c8604080 --- /dev/null +++ b/src/components/StructuredList/StructuredList.stories.js @@ -0,0 +1,10 @@ +import { withKnobs, select, boolean, text } from '@storybook/addon-knobs'; +import Component from './StructuredList.Story.svelte'; + +export default { title: 'StructuredList', decorators: [withKnobs] }; + +export const Default = () => ({ Component }); + +export const Selection = () => ({ Component, props: { story: 'selection' } }); + +export const Skeleton = () => ({ Component, props: { story: 'skeleton' } }); diff --git a/src/components/StructuredList/StructuredListBody.svelte b/src/components/StructuredList/StructuredListBody.svelte new file mode 100644 index 00000000..5f0bf82d --- /dev/null +++ b/src/components/StructuredList/StructuredListBody.svelte @@ -0,0 +1,13 @@ + + +
+ +
diff --git a/src/components/StructuredList/StructuredListCell.svelte b/src/components/StructuredList/StructuredListCell.svelte new file mode 100644 index 00000000..b4dda1f8 --- /dev/null +++ b/src/components/StructuredList/StructuredListCell.svelte @@ -0,0 +1,20 @@ + + +
+ +
diff --git a/src/components/StructuredList/StructuredListHead.svelte b/src/components/StructuredList/StructuredListHead.svelte new file mode 100644 index 00000000..d4552235 --- /dev/null +++ b/src/components/StructuredList/StructuredListHead.svelte @@ -0,0 +1,13 @@ + + +
+ +
diff --git a/src/components/StructuredList/StructuredListInput.svelte b/src/components/StructuredList/StructuredListInput.svelte new file mode 100644 index 00000000..04f34851 --- /dev/null +++ b/src/components/StructuredList/StructuredListInput.svelte @@ -0,0 +1,37 @@ + + + { + update(value); + }} + {value} + {name} + {title} + {style} + {id} + {checked} /> diff --git a/src/components/StructuredList/StructuredListRow.svelte b/src/components/StructuredList/StructuredListRow.svelte new file mode 100644 index 00000000..fc0ab49b --- /dev/null +++ b/src/components/StructuredList/StructuredListRow.svelte @@ -0,0 +1,36 @@ + + +{#if label} + +{:else} +
+ +
+{/if} diff --git a/src/components/StructuredList/StructuredListWrapper.svelte b/src/components/StructuredList/StructuredListWrapper.svelte new file mode 100644 index 00000000..161c8e19 --- /dev/null +++ b/src/components/StructuredList/StructuredListWrapper.svelte @@ -0,0 +1,45 @@ + + +
+ +
diff --git a/src/components/StructuredList/index.js b/src/components/StructuredList/index.js new file mode 100644 index 00000000..fffa5c44 --- /dev/null +++ b/src/components/StructuredList/index.js @@ -0,0 +1,10 @@ +import StructuredList from './StructuredList.svelte'; + +export default StructuredList; +export { default as StructuredListSkeleton } from './StructuredList.Skeleton.svelte'; +export { default as StructuredListBody } from './StructuredListBody.svelte'; +export { default as StructuredListHead } from './StructuredListHead.svelte'; +export { default as StructuredListCell } from './StructuredListCell.svelte'; +export { default as StructuredListRow } from './StructuredListRow.svelte'; +export { default as StructuredListInput } from './StructuredListInput.svelte'; +export { default as StructuredListWrapper } from './StructuredListWrapper.svelte'; diff --git a/src/index.js b/src/index.js index 948910bf..d9f67d15 100644 --- a/src/index.js +++ b/src/index.js @@ -30,6 +30,15 @@ import Search, { SearchSkeleton } from './components/Search'; import Select, { SelectSkeleton, SelectItem, SelectItemGroup } from './components/Select'; import SkeletonPlaceholder from './components/SkeletonPlaceholder'; import SkeletonText from './components/SkeletonText'; +import StructuredList, { + StructuredListSkeleton, + StructuredListBody, + StructuredListHead, + StructuredListCell, + StructuredListRow, + StructuredListInput, + StructuredListWrapper +} from './components/StructuredList'; import Tag, { TagSkeleton } from './components/Tag'; import TextArea, { TextAreaSkeleton } from './components/TextArea'; import TextInput, { TextInputSkeleton, PasswordInput } from './components/TextInput'; @@ -93,6 +102,14 @@ export { SkeletonPlaceholder, SkeletonText, Switch, + StructuredList, + StructuredListSkeleton, + StructuredListBody, + StructuredListHead, + StructuredListCell, + StructuredListRow, + StructuredListInput, + StructuredListWrapper, Tag, TagSkeleton, TextArea,