From f3e5da73db3b953178f744ca11e6fd7dfa541e12 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 15 Dec 2019 14:42:23 -0800
Subject: [PATCH] feat(components): add SkeletonPlaceholder

---
 README.md                                     |  1 +
 .../SkeletonPlaceholder.Story.svelte          | 27 +++++++++++++++++++
 .../SkeletonPlaceholder.stories.js            | 17 ++++++++++++
 .../SkeletonPlaceholder.svelte                | 11 ++++++++
 src/components/SkeletonPlaceholder/index.js   |  3 +++
 src/index.js                                  |  2 ++
 6 files changed, 61 insertions(+)
 create mode 100644 src/components/SkeletonPlaceholder/SkeletonPlaceholder.Story.svelte
 create mode 100644 src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
 create mode 100644 src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte
 create mode 100644 src/components/SkeletonPlaceholder/index.js

diff --git a/README.md b/README.md
index 7eab89f6..20ab4872 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,7 @@ Currently, the following components are supported:
 - Link
 - ListItem
 - OrderedList
+- SkeletonPlaceholder
 - SkeletonText
 - Tag
 - TagSkeleton
diff --git a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.Story.svelte b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.Story.svelte
new file mode 100644
index 00000000..815b0b42
--- /dev/null
+++ b/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>
diff --git a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
new file mode 100644
index 00000000..d660ec41
--- /dev/null
+++ b/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)
+  }
+});
diff --git a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte
new file mode 100644
index 00000000..94b8e9b7
--- /dev/null
+++ b/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} />
diff --git a/src/components/SkeletonPlaceholder/index.js b/src/components/SkeletonPlaceholder/index.js
new file mode 100644
index 00000000..e725e815
--- /dev/null
+++ b/src/components/SkeletonPlaceholder/index.js
@@ -0,0 +1,3 @@
+import SkeletonPlaceholder from './SkeletonPlaceholder.svelte';
+
+export default SkeletonPlaceholder;
diff --git a/src/index.js b/src/index.js
index 68192381..6ee3ab7b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,6 +10,7 @@ import Loading from './components/Loading';
 import Link from './components/Link';
 import ListItem from './components/ListItem';
 import OrderedList from './components/OrderedList';
+import SkeletonPlaceholder from './components/SkeletonPlaceholder';
 import SkeletonText from './components/SkeletonText';
 import Tag, { TagSkeleton } from './components/Tag';
 import TextArea, { TextAreaSkeleton } from './components/TextArea';
@@ -39,6 +40,7 @@ export {
   Link,
   ListItem,
   OrderedList,
+  SkeletonPlaceholder,
   SkeletonText,
   Tag,
   TagSkeleton,