feat(component): add DataTableSkeleton

src/components/DataTableSkeleton/DataTable.stories.js

@@ -0,0 +1,17 @@
+import { withKnobs, array, boolean } from '@storybook/addon-knobs';
+import Component from './DataTableSkeleton.Story.svelte';
+
+export default { title: 'DataTableSkeleton', decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    headers: array(
+      'Optional table headers (headers)',
+      ['Name', 'Protocol', 'Port', 'Rule', 'Attached Groups'],
+      ','
+    ),
+    zebra: boolean('Use zebra stripe (zebra)', false),
+    compact: boolean('Compact variant (compact)', false)
+  }
+});

src/components/DataTableSkeleton/DataTableSkeleton.Story.svelte

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

src/components/DataTableSkeleton/DataTableSkeleton.svelte

@@ -0,0 +1,52 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let zebra = false;
+  export let compact = false;
+  export let rowCount = 5;
+  export let columnCount = 5;
+  export let headers = [];
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const rows = Array.from({ length: rowCount - 1 }, (_, i) => i);
+  const columns = Array.from({ length: columnCount }, (_, i) => i);
+  const _headers =
+    headers[0] === Object(headers[0]) && !Array.isArray(headers[0])
+      ? headers.map(({ header }) => header)
+      : headers;
+  const _class = cx(
+    '--skeleton',
+    '--data-table',
+    zebra && '--data-table--zebra',
+    compact && '--data-table--compact',
+    className
+  );
+</script>
+
+<table {...props} on:click on:mouseover on:mouseenter on:mouseleave class={_class}>
+  <thead>
+    <tr>
+      {#each columns as column, i (column)}
+        <th>{_headers[column]}</th>
+      {/each}
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      {#each columns as column, i (column)}
+        <td>
+          <span />
+        </td>
+      {/each}
+    </tr>
+    {#each rows as row, i (row)}
+      <tr>
+        {#each columns as column, j (column)}
+          <td />
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+</table>

src/components/DataTableSkeleton/index.js

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

src/index.js

@@ -5,6 +5,7 @@ import Checkbox, { CheckboxSkeleton } from './components/Checkbox';
 import Copy from './components/Copy';
 import CopyButton from './components/CopyButton';
 import CodeSnippet, { CodeSnippetSkeleton } from './components/CodeSnippet';
+import DataTableSkeleton from './components/DataTableSkeleton';
 import InlineLoading from './components/InlineLoading';
 import Loading from './components/Loading';
 import Link from './components/Link';
@@ -38,6 +39,7 @@ export {
   CodeSnippetSkeleton,
   Copy,
   CopyButton,
+  DataTableSkeleton,
   InlineLoading,
   Loading,
   Link,