From f6a61856cd2fb5be2a25927d11da0bc7bb55904f Mon Sep 17 00:00:00 2001
From: palewire <b@palewi.re>
Date: Mon, 3 Apr 2023 05:49:27 -0400
Subject: [PATCH] Drafted a Search component

---
 src/components/Table/MagnifyingGlass.svelte | 11 +++
 src/components/Table/Search.svelte          | 85 ++++++++++++++++++
 src/components/Table/Table.stories.svelte   |  2 +-
 src/components/Table/Table.svelte           | 99 ++++++++-------------
 src/components/Table/X.svelte               | 20 +++++
 src/components/Table/stories/docs/search.md | 11 +--
 6 files changed, 160 insertions(+), 68 deletions(-)
 create mode 100644 src/components/Table/MagnifyingGlass.svelte
 create mode 100644 src/components/Table/Search.svelte
 create mode 100644 src/components/Table/X.svelte

diff --git a/src/components/Table/MagnifyingGlass.svelte b/src/components/Table/MagnifyingGlass.svelte
new file mode 100644
index 00000000..169c2393
--- /dev/null
+++ b/src/components/Table/MagnifyingGlass.svelte
@@ -0,0 +1,11 @@
+<svg
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M3.41069 12.0711C2.83695 11.5053 2.38137 10.8311 2.07042 10.0878C1.75947 9.3444 1.59934 8.54666 1.59934 7.74088C1.59934 6.9351 1.75947 6.13735 2.07042 5.39399C2.38137 4.65063 2.83695 3.97647 3.41069 3.41069C3.97647 2.83695 4.65063 2.38137 5.39399 2.07042C6.13735 1.75947 6.9351 1.59934 7.74088 1.59934C8.54666 1.59934 9.3444 1.75947 10.0878 2.07042C10.8311 2.38137 11.5053 2.83695 12.0711 3.41069C12.6448 3.97647 13.1004 4.65063 13.4113 5.39399C13.7223 6.13735 13.8824 6.9351 13.8824 7.74088C13.8824 8.54666 13.7223 9.3444 13.4113 10.0878C13.1004 10.8311 12.6448 11.5053 12.0711 12.0711C11.5053 12.6448 10.8311 13.1004 10.0878 13.4113C9.3444 13.7223 8.54666 13.8824 7.74088 13.8824C6.9351 13.8824 6.13735 13.7223 5.39399 13.4113C4.65063 13.1004 3.97647 12.6448 3.41069 12.0711ZM17.8254 16.6899L13.7454 12.6099C14.9941 11.0703 15.6041 9.11021 15.4497 7.13395C15.2953 5.1577 14.3882 3.3161 12.9156 1.98914C11.4429 0.662179 9.51715 -0.0489011 7.53554 0.00261584C5.55393 0.0541328 3.66769 0.864316 2.266 2.266C0.864316 3.66769 0.0541328 5.55393 0.00261584 7.53554C-0.0489011 9.51715 0.662179 11.4429 1.98914 12.9156C3.3161 14.3882 5.1577 15.2953 7.13395 15.4497C9.11021 15.6041 11.0703 14.9941 12.6099 13.7454L16.6899 17.8254C16.8453 17.9485 17.0405 18.0101 17.2384 17.9986C17.4363 17.9872 17.6231 17.9034 17.7633 17.7633C17.9034 17.6231 17.9872 17.4363 17.9986 17.2384C18.0101 17.0405 17.9485 16.8453 17.8254 16.6899Z"
+    fill="#D0D0D0"></path>
+</svg>
diff --git a/src/components/Table/Search.svelte b/src/components/Table/Search.svelte
new file mode 100644
index 00000000..da41be80
--- /dev/null
+++ b/src/components/Table/Search.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import MagnifyingGlass from './MagnifyingGlass.svelte';
+  import X from './X.svelte';
+
+  /**
+   * The placeholder text that appears in the search box.
+   * @type {string}
+   */
+  export let searchPlaceholder: string = 'Search in table';
+
+  let value = '';
+  $: active = value !== '';
+
+  const dispatch = createEventDispatcher();
+
+  function input(event) {
+    value = event.target.value;
+    dispatch('search', { value });
+  }
+
+  function clear() {
+    value = '';
+    dispatch('search', { value: '' });
+  }
+</script>
+
+<div class="search" class:active>
+  <div class="search--icon">
+    <MagnifyingGlass />
+  </div>
+  <input
+    id="search--input"
+    class="search--input"
+    type="text"
+    placeholder="{searchPlaceholder}"
+    on:input="{input}"
+    bind:value
+  />
+  <div class="search--x" class:invisible="{!active}" on:click="{clear}">
+    <X />
+  </div>
+</div>
+
+<style lang="scss">
+  @import '../../scss/colours/thematic/tr';
+  @import '../../scss/fonts/variables';
+
+  .search {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: 256px;
+    padding: 0 0 0 0.1rem;
+    .search--icon {
+      position: absolute;
+      left: 0.5rem;
+      top: 0.15rem;
+      width: 1.5rem;
+      height: 1.5rem;
+      fill: $tr-muted-grey;
+    }
+    .search--input {
+      font-family: $font-family-display;
+      padding: 0 0 0 2rem;
+      font-size: 0.8rem;
+      height: 33px;
+      border: 1px solid $tr-muted-grey;
+      border-radius: 6px;
+      width: 100%;
+    }
+    .search--x {
+      position: absolute;
+      right: 0;
+      top: 0.15rem;
+      width: 1.5rem;
+      height: 1.5rem;
+      fill: $tr-dark-grey;
+      cursor: pointer;
+      &.invisible {
+        display: none;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Table/Table.stories.svelte b/src/components/Table/Table.stories.svelte
index 76d6f609..f4796c92 100644
--- a/src/components/Table/Table.stories.svelte
+++ b/src/components/Table/Table.stories.svelte
@@ -99,8 +99,8 @@
   {...withStoryDocs(searchDocs)}
   args="{{
     data: pressFreedom,
-    paginated: true,
     searchable: true,
+    paginated: true,
     title: 'Press Freedom Index',
     source:
       "Source: <a href='https://en.wikipedia.org/wiki/Press_Freedom_Index'>Reporters Without Borders</a>",
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 39470635..c59cfe38 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -71,17 +71,11 @@
    */
   export let searchable: boolean = false;
 
-  /**
-   * The label to place above the search box.
-   * @type {string}
-   */
-  export let searchLabel: string;
-
   /**
    * The placeholder text that appears in the search box.
    * @type {string}
    */
-  export let searchPlaceholder: string;
+  export let searchPlaceholder: string = 'Search in table';
 
   /**
    * A field to offer uses as an interactive filter.
@@ -133,6 +127,7 @@
   /** Import local helpers */
   import Block from '../Block/Block.svelte';
   import Pagination from './Pagination.svelte';
+  import Search from './Search.svelte';
   import SortArrow from './SortArrow.svelte';
   import {
     filterArray,
@@ -174,7 +169,7 @@
   }
 
   function handleSearchInput(event) {
-    searchText = event.target.value;
+    searchText = event.detail.value;
     pageNumber = 1;
   }
 
@@ -227,45 +222,6 @@
 
 <Block width="{width}" id="{id}" cls="{cls}">
   <section class="table-wrapper">
-    {#if searchable || filterList}
-      <section class="input">
-        {#if searchable}
-          <div class="search">
-            <label for="filter--select"
-              >{#if searchLabel}{searchLabel}{:else}Search{/if}</label
-            >
-            <input
-              id="search--input"
-              class="search--input"
-              type="text"
-              placeholder="{searchPlaceholder}"
-              on:input="{handleSearchInput}"
-            />
-          </div>
-        {/if}
-        {#if filterList}
-          {#if searchable}<div
-              style="clear: both; display: block; padding-top: 1rem;"
-            ></div>{/if}
-          <div class="filter">
-            <label for="filter--select"
-              >{#if filterLabel}{filterLabel}{:else}Filter by {filterField}{/if}</label
-            >
-            <select
-              class="filter--select"
-              name="filter--select"
-              id="filter--select"
-              on:input="{handleFilterInput}"
-            >
-              <option value="all">All</option>
-              {#each filterList as object}
-                <option value="{object}">{object}</option>
-              {/each}
-            </select>
-          </div>
-        {/if}
-      </section>
-    {/if}
     <section class="table">
       <table
         class:paginated
@@ -273,7 +229,7 @@
           !showAll &&
           data.length > truncateLength}"
       >
-        {#if title || dek}
+        {#if title || dek || searchable}
           <caption class="table--caption">
             {#if title}
               <div class="table--caption--title">{@html title}</div>
@@ -281,6 +237,37 @@
             {#if dek}
               <div class="table--caption--dek">{@html dek}</div>
             {/if}
+            {#if searchable || filterList}
+              <section class="input">
+                {#if searchable}
+                  <Search
+                    bind:searchPlaceholder
+                    on:search="{handleSearchInput}"
+                  />
+                {/if}
+                {#if filterList}
+                  {#if searchable}<div
+                      style="clear: both; display: block; padding-top: 1rem;"
+                    ></div>{/if}
+                  <div class="filter">
+                    <label for="filter--select"
+                      >{#if filterLabel}{filterLabel}{:else}Filter by {filterField}{/if}</label
+                    >
+                    <select
+                      class="filter--select"
+                      name="filter--select"
+                      id="filter--select"
+                      on:input="{handleFilterInput}"
+                    >
+                      <option value="all">All</option>
+                      {#each filterList as object}
+                        <option value="{object}">{object}</option>
+                      {/each}
+                    </select>
+                  </div>
+                {/if}
+              </section>
+            {/if}
           </caption>
         {/if}
         <thead class="table--thead">
@@ -456,12 +443,10 @@
   }
 
   section.input {
-    margin: 16px 0;
-    background-color: $tr-ultra-light-grey;
-    padding: 0.75rem;
+    margin: 0.5rem 0 0 0;
+    padding: 0;
     font-size: 1rem;
     width: 100%;
-    border: 1px solid $tr-light-muted-grey;
     label {
       line-height: 1.333;
       display: block;
@@ -469,16 +454,6 @@
       font-family: $font-family-display;
       font-weight: 500;
     }
-    .search {
-      .search--input {
-        padding: 0.33rem;
-        font-size: 1.1rem;
-        height: 2.3rem;
-        border: 1px solid $tr-muted-grey;
-        border-radius: 5px;
-        width: 300px;
-      }
-    }
     .filter {
       .filter--select {
         padding: 0.33rem;
diff --git a/src/components/Table/X.svelte b/src/components/Table/X.svelte
new file mode 100644
index 00000000..2c0e3a7f
--- /dev/null
+++ b/src/components/Table/X.svelte
@@ -0,0 +1,20 @@
+<svg
+  width="14"
+  height="14"
+  viewBox="0 0 14 14"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_25_237)">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0.300421 0.292131C0.392053 0.199685 0.50109 0.126304 0.621235 0.0762269C0.741381 0.0261493 0.870256 0.000366211 1.00042 0.000366211C1.13059 0.000366211 1.25946 0.0261493 1.37961 0.0762269C1.49975 0.126304 1.60879 0.199685 1.70042 0.292131L7.00082 5.45346L12.3012 0.292131C12.3929 0.199685 12.5019 0.126304 12.622 0.0762269C12.7422 0.0261493 12.8711 0.000366211 13.0012 0.000366211C13.1314 0.000366211 13.2603 0.0261493 13.3804 0.0762269C13.5006 0.126304 13.6096 0.199685 13.7012 0.292131C13.7954 0.378994 13.8706 0.48445 13.922 0.601837C13.9734 0.719225 13.9999 0.845993 13.9998 0.974136C13.9997 1.10228 13.973 1.22901 13.9215 1.34633C13.8699 1.46364 13.7946 1.569 13.7003 1.65573L8.21229 6.99906L13.7003 12.3443C14.0708 12.7064 14.0979 13.2365 13.7796 13.622L13.6994 13.7079C13.6077 13.8003 13.4987 13.8737 13.3785 13.9238C13.2584 13.9738 13.1295 13.9996 12.9994 13.9996C12.8692 13.9996 12.7403 13.9738 12.6202 13.9238C12.5 13.8737 12.391 13.8003 12.2994 13.7079L6.99895 8.54653L1.69855 13.7079C1.60692 13.8003 1.49789 13.8737 1.37774 13.9238C1.25759 13.9738 1.12872 13.9996 0.998554 13.9996C0.86839 13.9996 0.739515 13.9738 0.619369 13.9238C0.499223 13.8737 0.390186 13.8003 0.298554 13.7079C0.204346 13.621 0.129174 13.5155 0.0777863 13.3982C0.0263988 13.2808 -8.74916e-05 13.154 2.17122e-07 13.0259C8.79258e-05 12.8977 0.0267478 12.771 0.0782959 12.6537C0.129844 12.5364 0.20516 12.431 0.299488 12.3443L5.78655 7L0.300421 1.65573C-0.0710458 1.2936 -0.0981124 0.763464 0.220154 0.377998L0.300421 0.292131Z"
+      fill="#404040"></path>
+  </g>
+  <defs>
+    <clipPath id="clip0_25_237">
+      <rect width="14" height="14" fill="white"></rect>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/components/Table/stories/docs/search.md b/src/components/Table/stories/docs/search.md
index 55fbb053..aec6070f 100644
--- a/src/components/Table/stories/docs/search.md
+++ b/src/components/Table/stories/docs/search.md
@@ -1,10 +1,11 @@
-Allow users to search the table by setting the optional `searchable` variable to `true`.
+Allow users to search the table by setting the optional `searchable` variable. Modify the default text that appears in the box by supplying the `searchPlaceholder` option.
 
 ```svelte
 <Table
-  data={yourData},
-  searchable=true,
-  title='Press Freedom Index',
-  notes='Source: <a href="https://en.wikipedia.org/wiki/Press_Freedom_Index">Reporters Without Borders</a>',
+  data="{yourData},"
+  searchable="{true},"
+  paginated="{true},"
+  title="{'Press Freedom Index'},"
+  notes="{'Source: <a href="https://en.wikipedia.org/wiki/Press_Freedom_Index">Reporters Without Borders</a>'},"
 />
 ```