From 37e2855c83feb442ffc5ad52b704ea1326c36e1e Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 4 Jan 2020 09:10:40 -0800
Subject: [PATCH] feat(search): export skeleton prop

---
 src/components/Search/Search.svelte | 81 +++++++++++++++++------------
 1 file changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/components/Search/Search.svelte b/src/components/Search/Search.svelte
index 14b6a841..77bdf84e 100644
--- a/src/components/Search/Search.svelte
+++ b/src/components/Search/Search.svelte
@@ -6,9 +6,10 @@
   export let id = Math.random();
   export let labelText = '';
   export let light = false;
-  export let placeholder = '';
-  export let size = small ? 'sm' : 'xl';
+  export let placeholder = 'Search...';
   export let small = false;
+  export let size = small ? 'sm' : 'xl';
+  export let skeleton = false;
   export let style = undefined;
   export let type = 'text';
   export let value = '';
@@ -17,39 +18,53 @@
   import Close20 from 'carbon-icons-svelte/lib/Close20';
   import Search16 from 'carbon-icons-svelte/lib/Search16';
   import { cx } from '../../lib';
+  import SearchSkeleton from './Search.Skeleton.svelte';
 
   let inputRef = undefined;
 </script>
 
-<div
-  class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
-  {style}>
-  <Search16 class={cx('--search-magnifier')} />
-  <label class={cx('--label')} for={id}>{labelText}</label>
-  <!-- svelte-ignore a11y-autofocus -->
-  <input
-    bind:this={inputRef}
-    role="searchbox"
-    class={cx('--search-input')}
-    on:change
-    on:input
-    on:input={({ target }) => {
-      value = target.value;
-    }}
-    {autofocus}
-    {type}
-    {id}
-    {value}
-    {placeholder} />
-  <button
-    type="button"
-    aria-label={closeButtonLabelText}
-    class={cx('--search-close', value === '' && '--search-close--hidden')}
+{#if skeleton}
+  <SearchSkeleton
     on:click
-    on:click={() => {
-      value = '';
-      inputRef.focus();
-    }}>
-    <svelte:component this={size === 'xl' ? Close20 : Close16} />
-  </button>
-</div>
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    class={className}
+    {style}
+    {small} />
+{/if}
+
+{#if !skeleton}
+  <div
+    class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
+    {style}>
+    <Search16 class={cx('--search-magnifier')} />
+    <label class={cx('--label')} for={id}>{labelText}</label>
+    <!-- svelte-ignore a11y-autofocus -->
+    <input
+      bind:this={inputRef}
+      role="searchbox"
+      class={cx('--search-input')}
+      on:change
+      on:input
+      on:input={({ target }) => {
+        value = target.value;
+      }}
+      {autofocus}
+      {type}
+      {id}
+      {value}
+      {placeholder} />
+    <button
+      type="button"
+      aria-label={closeButtonLabelText}
+      class={cx('--search-close', value === '' && '--search-close--hidden')}
+      on:click
+      on:click={() => {
+        value = '';
+        inputRef.focus();
+      }}>
+      <svelte:component this={size === 'xl' ? Close20 : Close16} />
+    </button>
+  </div>
+{/if}