feat: initial commit

src/components/SkeletonText/SkeletonText.Story.svelte

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

src/components/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)'),
+    lineCount: number('The number of lines in a paragraph (lineCount)', 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/components/SkeletonText/SkeletonText.svelte

@@ -0,0 +1,37 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let paragraph = false;
+  export let lineCount = 3;
+  export let width = '100%';
+  export let heading = false;
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
+  const _class = cx('--skeleton__text', heading && '--skeleton__heading', className);
+  const widthNum = parseInt(width, 10);
+  const widthPx = width.includes('px');
+  const widthPercent = width.includes('%');
+  let lines = [];
+
+  $: if (paragraph) {
+    for (let i = 0; i < lineCount; i++) {
+      const min = widthPx ? widthNum - 75 : 0;
+      const max = widthPx ? widthNum : 75;
+      const randomWidth = Math.floor(randoms[i % 3] * (max - min + 1)) + min + 'px';
+      lines = [...lines, { width: widthPx ? randomWidth : `calc(${width} - ${randomWidth})` }];
+    }
+  }
+</script>
+
+{#if paragraph}
+  <div>
+    {#each lines as { width }}
+      <p {...props} class={_class} style={`width: ${width};`} />
+    {/each}
+  </div>
+{:else}
+  <p {...props} class={_class} style={`width: ${width};`} />
+{/if}

src/components/SkeletonText/index.js

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