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

@@ -1,39 +1,42 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let appendTo = document.body;
-  export let dateFormat = 'm/d/Y';
-  export let datePickerType = 'simple';
-  export let id = Math.random();
+  export let dateFormat = "m/d/Y";
+  export let datePickerType = "simple";
+  export let id = "ccs-" + Math.random().toString(36);
   export let light = false;
-  export let locale = 'en';
+  export let locale = "en";
   export let maxDate = null;
   export let minDate = null;
   export let short = false;
-  export let style = undefined;
-  export let value = '';
+  export let value = "";
 
-  import { createEventDispatcher, setContext, afterUpdate, onDestroy } from 'svelte';
-  import { writable, derived } from 'svelte/store';
-  import { createCalendar } from './createCalendar';
-  import { cx } from '../../lib';
+  import {
+    createEventDispatcher,
+    setContext,
+    afterUpdate,
+    onDestroy
+  } from "svelte";
+  import { writable, derived } from "svelte/store";
+  import { createCalendar } from "./createCalendar";
 
   const dispatch = createEventDispatcher();
-
-  let inputs = writable([]);
-  let inputIds = derived(inputs, _ => _.map(({ id }) => id));
-  let labelTextEmpty = derived(inputs, _ => _.filter(({ labelText }) => !!labelText).length === 0);
-  let inputValue = writable(value);
-  let mode = writable(datePickerType);
-  let range = derived(mode, _ => _ === 'range');
-  let hasCalendar = derived(mode, _ => _ === 'single' || _ === 'range');
+  const inputs = writable([]);
+  const inputIds = derived(inputs, _ => _.map(({ id }) => id));
+  const labelTextEmpty = derived(
+    inputs,
+    _ => _.filter(({ labelText }) => !!labelText).length === 0
+  );
+  const inputValue = writable(value);
+  const mode = writable(datePickerType);
+  const range = derived(mode, _ => _ === "range");
+  const hasCalendar = derived(mode, _ => _ === "single" || _ === "range");
 
   let calendar = undefined;
   let datePickerRef = undefined;
   let inputRef = undefined;
   let inputRefTo = undefined;
 
-  setContext('DatePicker', {
+  setContext("DatePicker", {
     range,
     inputValue,
     hasCalendar,
@@ -48,12 +51,12 @@
       }
     },
     updateValue: ({ type, value }) => {
-      if ((!calendar && type === 'input') || type === 'change') {
+      if ((!calendar && type === "input") || type === "change") {
         inputValue.set(value);
       }
 
-      if (!calendar && type === 'change') {
-        dispatch('change', value);
+      if (!calendar && type === "change") {
+        dispatch("change", value);
       }
     },
     blurInput: relatedTarget => {
@@ -68,7 +71,7 @@
       (
         calendar.selectedDateElem ||
         calendar.todayDateElem ||
-        calendar.calendarContainer.querySelector('.flatpickr-day[tabindex]') ||
+        calendar.calendarContainer.querySelector(".flatpickr-day[tabindex]") ||
         calendar.calendarContainer
       ).focus();
     }
@@ -133,11 +136,21 @@
     }
   }} />
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   <div
     bind:this={datePickerRef}
-    class={cx('--date-picker', short && '--date-picker--short', light && '--date-picker--light', datePickerType && `--date-picker--${datePickerType}`, datePickerType === 'range' && $labelTextEmpty && '--date-picker--nolabel')}
-    {id}>
+    {id}
+    class:bx--date-picker={true}
+    class:bx--date-picker--short={short}
+    class:bx--date-picker--light={light}
+    class="{datePickerType && `--date-picker--${datePickerType}`}
+    {datePickerType === 'range' && $labelTextEmpty && '--date-picker--nolabel'}">
     <slot />
   </div>
 </div>