chore: lift components folder

src/SkeletonPlaceholder/SkeletonPlaceholder.Story.svelte

@@ -0,0 +1,24 @@
+<script>
+  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>
+
+<div style="height: 250px; width: 250px;">
+  <SkeletonPlaceholder {...$$props} />
+</div>

src/SkeletonPlaceholder/SkeletonPlaceholder.stories.js

@@ -0,0 +1,17 @@
+import { withKnobs, select } from "@storybook/addon-knobs";
+import Component from "./SkeletonPlaceholder.Story.svelte";
+
+export default { title: "SkeletonPlaceholder", 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/SkeletonPlaceholder/SkeletonPlaceholder.svelte

@@ -0,0 +1,7 @@
+<div
+  class:bx--skeleton__placeholder={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave />

src/SkeletonPlaceholder/index.js

@@ -0,0 +1 @@
+export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder.svelte";