chore: lift components folder

src/SkeletonText/SkeletonText.Story.svelte

@@ -0,0 +1,7 @@
+<script>
+  import SkeletonText from "./SkeletonText.svelte";
+</script>
+
+<div style="width: 300px">
+  <SkeletonText {...$$props} />
+</div>

src/SkeletonText/SkeletonText.stories.js

@@ -0,0 +1,18 @@
+import { withKnobs, select, boolean, number } from "@storybook/addon-knobs";
+import Component from "./SkeletonText.Story.svelte";
+
+export default { title: "SkeletonText", decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    heading: boolean("Skeleton text at a larger size (heading)"),
+    paragraph: boolean("Use multiple lines of text (paragraph)"),
+    lines: number("The number of lines in a paragraph (lines)", 3),
+    width: select(
+      "Width (in px or %) of single line of text or max-width of paragraph lines (width)",
+      { "100%": "100%", "250px": "250px" },
+      "100%"
+    ),
+  },
+});

src/SkeletonText/SkeletonText.svelte

@@ -0,0 +1,41 @@
+<script>
+  export let lines = 3;
+  export let heading = false;
+  export let paragraph = false;
+  export let width = "100%";
+
+  const randoms = [0.973, 0.153, 0.567];
+
+  $: rows = [];
+  $: widthNum = parseInt(width, 10);
+  $: widthPx = width.includes("px");
+  $: if (paragraph) {
+    for (let i = 0; i < lines; i++) {
+      const min = widthPx ? widthNum - 75 : 0;
+      const max = widthPx ? widthNum : 75;
+      const rand = Math.floor(randoms[i % 3] * (max - min + 1)) + min + "px";
+      rows = [...rows, { width: widthPx ? rand : `calc(${width} - ${rand})` }];
+    }
+  }
+</script>
+
+{#if paragraph}
+  <div {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
+    {#each rows as { width }, i (width)}
+      <p
+        class:bx--skeleton__text={true}
+        class:bx--skeleton__heading={heading}
+        style="width: {width}" />
+    {/each}
+  </div>
+{:else}
+  <p
+    class:bx--skeleton__text={true}
+    class:bx--skeleton__heading={heading}
+    {...$$restProps}
+    style="width: {width};{$$restProps.style}"
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{/if}

src/SkeletonText/index.js

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