Merge pull request #73 from reuters-graphics/search-input

Break out the SearchInput from Table into its own component

src/components/SearchInput/SearchInput.stories.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // Don't lose the "?raw" in markdown imports!
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import SearchInput from './SearchInput.svelte';
+
+  import { withComponentDocs } from '$docs/utils/withParams.js';
+
+  const meta = {
+    title: 'Components/SearchInput',
+    component: SearchInput,
+    ...withComponentDocs(componentDocs),
+  };
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <SearchInput {...args} />
+</Template>
+
+<Story name="Default" args="{{}}" />

src/components/SearchInput/SearchInput.svelte

@@ -1,3 +1,4 @@
+<!-- @component `SearchInput` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SearchInput--default) -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import MagnifyingGlass from './MagnifyingGlass.svelte';
@@ -7,7 +8,7 @@
    * The placeholder text that appears in the search box.
    * @type {string}
    */
-  export let searchPlaceholder: string = 'Search in table';
+  export let searchPlaceholder: string = 'Search...';
 
   let value = '';
   $: active = value !== '';

src/components/SearchInput/stories/docs/component.md

@@ -0,0 +1,17 @@
+Invite users to search for something.
+
+```svelte
+<script>
+  import { SearchInput } from '@reuters-graphics/graphics-components';
+
+  function handleSearchInput(event) {
+    const searchText = event.detail.value;
+    // Here's where you might update a variable,
+    // filter a dataset or make an API call
+    // based on the user's input.
+    console.log(`Search for ${searchText}`);
+  }
+</script>
+
+<SearchInput on:search="{handleSearchInput}" />
+```

src/components/Table/Table.svelte

@@ -135,7 +135,7 @@
   /** Import local helpers */
   import Block from '../Block/Block.svelte';
   import Pagination from './Pagination.svelte';
-  import Search from './Search.svelte';
+  import SearchInput from '../SearchInput/SearchInput.svelte';
   import Select from './Select.svelte';
   import SortArrow from './SortArrow.svelte';
   import { filterArray, paginateArray, getOptions } from './utils.js';
@@ -236,7 +236,7 @@
             {/if}
             {#if searchable}
               <div class="table--header--search">
-                <Search
+                <SearchInput
                   bind:searchPlaceholder
                   on:search="{handleSearchInput}"
                 />

src/index.js

@@ -22,6 +22,7 @@ export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlo
 export { default as ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
 export { default as Scroller } from './components/Scroller/Scroller.svelte';
+export { default as SearchInput } from './components/SearchInput/SearchInput.svelte';
 export { default as SEO } from './components/SEO/SEO.svelte';
 export { default as Sharer } from './components/Sharer/Sharer.svelte';
 export { default as SimpleTimeline } from './components/SimpleTimeline/SimpleTimeline.svelte';