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/FileUploader/FileUploader.svelte

@@ -1,62 +1,63 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export const clearFiles = () => (files = []);
+  export let status = "uploading"; // "uploading" | "edit" | "complete"
   export let accept = [];
-  export let buttonLabel = '';
   export let files = [];
-  export let iconDescription = 'Provide icon description';
-  export let kind = 'primary';
-  export let labelDescription = '';
-  export let labelTitle = '';
+  export const clearFiles = () => (files = []);
+  export let buttonLabel = "";
+  export let iconDescription = "Provide icon description";
+  export let kind = "primary";
+  export let labelDescription = "";
+  export let labelTitle = "";
   export let multiple = false;
-  export let name = '';
-  export let status = 'uploading';
-  export let style = undefined;
+  export let name = "";
 
-  import { createEventDispatcher, afterUpdate } from 'svelte';
-  import { cx } from '../../lib';
-  import Filename from './Filename.svelte';
-  import FileUploaderButton from './FileUploaderButton.svelte';
+  import { createEventDispatcher, afterUpdate } from "svelte";
+  import Filename from "./Filename.svelte";
+  import FileUploaderButton from "./FileUploaderButton.svelte";
 
   const dispatch = createEventDispatcher();
 
-  let prevFiles = [];
+  $: prevFiles = [];
 
   afterUpdate(() => {
     if (files.length > prevFiles.length) {
-      dispatch('add', files);
+      dispatch("add", files);
     } else {
-      dispatch(
-        'remove',
-        prevFiles.filter(_ => !files.includes(_))
-      );
+      dispatch("remove", prevFiles.filter(_ => !files.includes(_)));
     }
 
     prevFiles = [...files];
   });
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
-  <strong class={cx('--file--label')}>{labelTitle}</strong>
-  <p class={cx('--label-description')}>{labelDescription}</p>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <strong class:bx--file--label={true}>{labelTitle}</strong>
+  <p class:bx--label-description={true}>{labelDescription}</p>
   <FileUploaderButton
     disableLabelChanges
     labelText={buttonLabel}
-    on:change
-    on:change={({ target }) => {
-      files = [...target.files].map(({ name }) => name);
-    }}
     {accept}
     {name}
     {multiple}
-    {kind} />
-  <div class={cx('--file-container')}>
+    {kind}
+    on:change
+    on:change={({ target }) => {
+      files = [...target.files].map(({ name }) => name);
+    }} />
+  <div class:bx--file-container={true}>
     {#each files as name, i (name)}
-      <span class={cx('--file__selected-file')}>
-        <p class={cx('--file-filename')}>{name}</p>
-        <span class={cx('--file__state-container')}>
+      <span class:bx--file__selected-file={true}>
+        <p class:bx--file-filename={true}>{name}</p>
+        <span class:bx--file__state-container={true}>
           <Filename
+            {iconDescription}
+            {status}
             on:keydown
             on:keydown={({ key }) => {
               if (key === ' ' || key === 'Enter') {
@@ -66,9 +67,7 @@
             on:click
             on:click={() => {
               files = files.filter((_, index) => index !== i);
-            }}
-            {iconDescription}
-            {status} />
+            }} />
         </span>
       </span>
     {/each}