Merge pull request #2 from IBM/skeleton-placeholder

feat(components): add SkeletonPlaceholder

README.md

@@ -34,6 +34,7 @@ Currently, the following components are supported:
 - OrderedList
 - Search
 - SearchSkeleton
+- SkeletonPlaceholder
 - SkeletonText
 - Tag
 - TagSkeleton

src/components/SkeletonPlaceholder/SkeletonPlaceholder.Story.svelte

@@ -0,0 +1,27 @@
+<script>
+  import Layout from '../../internal/ui/Layout.svelte';
+  import SkeletonPlaceholder from './SkeletonPlaceholder.svelte';
+</script>
+
+<style>
+  :global(.my--skeleton__placeholder--small) {
+    height: 100px;
+    width: 100px;
+  }
+
+  :global(.my--skeleton__placeholder--medium) {
+    height: 150px;
+    width: 150px;
+  }
+
+  :global(.my--skeleton__placeholder--large) {
+    height: 250px;
+    width: 250px;
+  }
+</style>
+
+<Layout>
+  <div style="height: 250px; width: 250px;">
+    <SkeletonPlaceholder {...$$props} />
+  </div>
+</Layout>

src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js

@@ -0,0 +1,17 @@
+import { withKnobs, select } from '@storybook/addon-knobs';
+import Component from './SkeletonPlaceholder.Story.svelte';
+
+export default { title: 'Skeleton Placeholder', decorators: [withKnobs] };
+
+const classes = {
+  'my--skeleton__placeholder--small': 'my--skeleton__placeholder--small',
+  'my--skeleton__placeholder--medium': 'my--skeleton__placeholder--medium',
+  'my--skeleton__placeholder--large': 'my--skeleton__placeholder--large'
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    class: select('Classes with different sizes', classes)
+  }
+});

src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte

@@ -0,0 +1,11 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--skeleton__placeholder', className);
+</script>
+
+<div {...props} class={_class} />

src/components/SkeletonPlaceholder/index.js

@@ -0,0 +1,3 @@
+import SkeletonPlaceholder from './SkeletonPlaceholder.svelte';
+
+export default SkeletonPlaceholder;

src/index.js

@@ -11,6 +11,7 @@ import Link from './components/Link';
 import ListItem from './components/ListItem';
 import OrderedList from './components/OrderedList';
 import Search, { SearchSkeleton } from './components/Search';
+import SkeletonPlaceholder from './components/SkeletonPlaceholder';
 import SkeletonText from './components/SkeletonText';
 import Tag, { TagSkeleton } from './components/Tag';
 import TextArea, { TextAreaSkeleton } from './components/TextArea';
@@ -42,6 +43,7 @@ export {
   OrderedList,
   Search,
   SearchSkeleton,
+  SkeletonPlaceholder,
   SkeletonText,
   Tag,
   TagSkeleton,