refactor: use $$restProps API

- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities

src/components/DataTable/DataTable.svelte

@@ -1,39 +1,39 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let title = '';
-  export let description = '';
+  export let size = undefined; // "compact" | "short" | "tall"
+  export let title = "";
+  export let description = "";
   export let zebra = false;
+  export let sortable = false;
+  export let stickyHeader = false;
   export let rows = [];
   export let headers = [];
-  export let stickyHeader = false;
-  export let size = undefined;
-  export let sortable = false;
-  export let style = undefined;
 
-  import { createEventDispatcher, setContext } from 'svelte';
-  import { writable, derived } from 'svelte/store';
-  import Table from './Table.svelte';
-  import TableBody from './TableBody.svelte';
-  import TableCell from './TableCell.svelte';
-  import TableContainer from './TableContainer.svelte';
-  import TableHead from './TableHead.svelte';
-  import TableHeader from './TableHeader.svelte';
-  import TableRow from './TableRow.svelte';
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+  import Table from "./Table.svelte";
+  import TableBody from "./TableBody.svelte";
+  import TableCell from "./TableCell.svelte";
+  import TableContainer from "./TableContainer.svelte";
+  import TableHead from "./TableHead.svelte";
+  import TableHeader from "./TableHeader.svelte";
+  import TableRow from "./TableRow.svelte";
 
+  const sortDirectionMap = {
+    none: "ascending",
+    ascending: "descending",
+    descending: "none"
+  };
   const dispatch = createEventDispatcher();
-  const sortDirectionMap = { none: 'ascending', ascending: 'descending', descending: 'none' };
-
-  let tableSortable = writable(sortable);
-  let sortHeader = writable({ id: null, key: null, sortDirection: 'none' });
-  let headerItems = writable([]);
-  let thKeys = derived(headerItems, () =>
+  const tableSortable = writable(sortable);
+  const sortHeader = writable({ id: null, key: null, sortDirection: "none" });
+  const headerItems = writable([]);
+  const thKeys = derived(headerItems, () =>
     headers
       .map(({ key }, i) => ({ key, id: $headerItems[i] }))
       .reduce((a, c) => ({ ...a, [c.key]: c.id }), {})
   );
 
-  setContext('DataTable', {
+  setContext("DataTable", {
     sortHeader,
     tableSortable,
     add: id => {
@@ -43,24 +43,29 @@
 
   $: tableSortable.set(sortable);
   $: headerKeys = headers.map(({ key }) => key);
-  $: rows = rows.map(row => ({ ...row, cells: headerKeys.map(key => ({ key, value: row[key] })) }));
+  $: rows = rows.map(row => ({
+    ...row,
+    cells: headerKeys.map(key => ({ key, value: row[key] }))
+  }));
   $: sortedRows = rows;
-  $: ascending = $sortHeader.sortDirection === 'ascending';
+  $: ascending = $sortHeader.sortDirection === "ascending";
   $: sortKey = $sortHeader.key;
   $: sorting = sortable && sortKey != null;
   $: if (sorting) {
-    if ($sortHeader.sortDirection === 'none') {
+    if ($sortHeader.sortDirection === "none") {
       sortedRows = rows;
     } else {
       sortedRows = [...rows].sort((a, b) => {
         const itemA = ascending ? a[sortKey] : b[sortKey];
         const itemB = ascending ? b[sortKey] : a[sortKey];
 
-        if (typeof itemA === 'number' && typeof itemB === 'number') {
+        if (typeof itemA === "number" && typeof itemB === "number") {
           return itemA - itemB;
         }
 
-        return itemA.toString().localeCompare(itemB.toString(), 'en', { numeric: true });
+        return itemA
+          .toString()
+          .localeCompare(itemB.toString(), "en", { numeric: true });
       });
     }
   }
@@ -71,7 +76,7 @@
 </script>
 
 <slot {props}>
-  <TableContainer class={className} {title} {description} {style}>
+  <TableContainer {title} {description} {...$$restProps}>
     <Table {zebra} {size} {stickyHeader} {sortable}>
       <TableHead>
         <TableRow>
@@ -82,7 +87,7 @@
                 let active = header.key === $sortHeader.key;
                 let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
                 let sortDirection = sortDirectionMap[currentSortDirection];
-                dispatch('click:header', {header, sortDirection});
+                dispatch('click:header', { header, sortDirection });
                 sortHeader.set({
                   id: sortDirection === 'none' ? null : $thKeys[header.key],
                   key: header.key,