Added SearchInput

src/components/SearchInput/SearchInput.svelte

@@ -8,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

@@ -1,22 +1,17 @@
-> **Welcome to your new component!** Use this template to build your component and customise its storybook.
-
-- Build your component in `SearchInput/SearchInput.svelte`.
-- Write your component's storybook in `SearchInput/SearchInput.stories.svelte`.
-- Don't forget to add your component to `src/index.js`:
-
-  ```javascript
-  // ...
-  export { default as SearchInput } from './components/SearchInput/SearchInput.svelte';
-  ```
-
-- Commit your component to a new branch and push it to GitHub! 🏁
-
----
+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 />
+<SearchInput on:search="{handleSearchInput}" />
 ```

src/index.js

@@ -21,6 +21,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';