refactor(skeleton-text): rename lineCount

src/components/SkeletonText/SkeletonText.stories.js

@@ -8,7 +8,7 @@ export const Default = () => ({
   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),
+    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' },

src/components/SkeletonText/SkeletonText.svelte

@@ -2,7 +2,7 @@
   let className = undefined;
   export { className as class };
   export let paragraph = false;
-  export let lineCount = 3;
+  export let lines = 3;
   export let width = '100%';
   export let heading = false;
   export let style = undefined;
@@ -10,26 +10,27 @@
   import { cx } from '../../lib';
 
   const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
-  let lines = [];
+
+  let rows = [];
 
   $: widthNum = parseInt(width, 10);
   $: widthPx = width.includes('px');
   $: widthPercent = width.includes('%');
   $: if (paragraph) {
-    for (let i = 0; i < lineCount; i++) {
+    for (let i = 0; i < lines; 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})` }];
+      rows = [...rows, { width: widthPx ? randomWidth : `calc(${width} - ${randomWidth})` }];
     }
   }
 </script>
 
 {#if paragraph}
-  <div on:click on:mouseover on:mouseenter on:mouseleave {style}>
+  <div on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
-    {#each lines as { width }}
+    {#each rows as { width }, i (width)}
       <p
-        class={cx('--skeleton__text', heading && '--skeleton__heading', className)}
+        class={cx('--skeleton__text', heading && '--skeleton__heading')}
         style={`width: ${width};`} />
     {/each}
   </div>