From 3c4582bb6af5efd3c8af3972c9dfe59f1ef6f5bd Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 25 Mar 2025 09:46:50 -0700
Subject: [PATCH 1/2] search bar

---
 .../docs/component.md => SearchInput.mdx}     | 14 ++++++-
 .../SearchInput/SearchInput.stories.svelte    | 23 ++----------
 src/components/SearchInput/SearchInput.svelte | 37 ++++++-------------
 .../{ => components}/MagnifyingGlass.svelte   |  6 +--
 .../SearchInput/{ => components}/X.svelte     |  8 ++--
 5 files changed, 35 insertions(+), 53 deletions(-)
 rename src/components/SearchInput/{stories/docs/component.md => SearchInput.mdx} (54%)
 rename src/components/SearchInput/{ => components}/MagnifyingGlass.svelte (94%)
 rename src/components/SearchInput/{ => components}/X.svelte (93%)

diff --git a/src/components/SearchInput/stories/docs/component.md b/src/components/SearchInput/SearchInput.mdx
similarity index 54%
rename from src/components/SearchInput/stories/docs/component.md
rename to src/components/SearchInput/SearchInput.mdx
index 1adc87e4..cd743181 100644
--- a/src/components/SearchInput/stories/docs/component.md
+++ b/src/components/SearchInput/SearchInput.mdx
@@ -1,4 +1,12 @@
-Invite users to search for something.
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SearchInputStories from './SearchInput.stories.svelte';
+
+<Meta of={SearchInputStories} />
+
+# SearchInput
+
+The `SearchInput` component creates a search bar.
 
 ```svelte
 <script>
@@ -13,5 +21,7 @@ Invite users to search for something.
   }
 </script>
 
-<SearchInput on:search="{handleSearchInput}" />
+<SearchInput on:search={handleSearchInput} />
 ```
+
+<Canvas of={SearchInputStories.Demo} />
\ No newline at end of file
diff --git a/src/components/SearchInput/SearchInput.stories.svelte b/src/components/SearchInput/SearchInput.stories.svelte
index 55fbdf5a..bca718e7 100644
--- a/src/components/SearchInput/SearchInput.stories.svelte
+++ b/src/components/SearchInput/SearchInput.stories.svelte
@@ -1,26 +1,11 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import SearchInput from './SearchInput.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Controls/SearchInput',
     component: SearchInput,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <SearchInput {...args} />
-  {/snippet}
-</Template>
-
-<Story name="Default" args="{{}}" />
+<Story name="Demo" />
\ No newline at end of file
diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index b0761c69..c89a83dc 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -1,14 +1,10 @@
 <!-- @component `SearchInput` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-controls-searchinput--docs) -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import MagnifyingGlass from './MagnifyingGlass.svelte';
-  import X from './X.svelte';
+  import MagnifyingGlass from './components/MagnifyingGlass.svelte';
+  import X from './components/X.svelte';
 
   interface Props {
-    /**
-     * The placeholder text that appears in the search box.
-     * @type {string}
-     */
+    /** The placeholder text that appears in the search box.*/
     searchPlaceholder?: string;
   }
 
@@ -17,16 +13,8 @@
   let value = $state('');
   let active = $derived(value !== '');
 
-  const dispatch = createEventDispatcher();
-
-  function input(event) {
-    value = event.target.value;
-    dispatch('search', { value });
-  }
-
   function clear() {
     value = '';
-    dispatch('search', { value: '' });
   }
 </script>
 
@@ -38,24 +26,23 @@
     id="search--input"
     class="search--input body-caption pl-8"
     type="text"
-    placeholder="{searchPlaceholder}"
-    oninput="{input}"
+    placeholder={searchPlaceholder}
     bind:value
   />
   <div
     class="search--x absolute"
     role="button"
     tabindex="0"
-    class:invisible="{!active}"
-    onclick="{clear}"
-    onkeyup="{clear}"
+    class:invisible={!active}
+    onclick={clear}
+    onkeyup={clear}
   >
     <X />
   </div>
 </div>
 
 <style lang="scss">
-  @use '../../scss/mixins' as *;
+  @use '../../scss/mixins' as mixins;
 
   .search {
     width: 250px;
@@ -64,11 +51,11 @@
       top: 0.55rem;
       width: 1.5rem;
       height: 1.5rem;
-      fill: $theme-colour-brand-rules;
+      fill: mixins.$theme-colour-brand-rules;
     }
     .search--input {
       height: 2.15rem;
-      border: 1px solid $theme-colour-brand-rules;
+      border: 1px solid mixins.$theme-colour-brand-rules;
       background: transparent;
       border-radius: 0.25rem;
       width: 100%;
@@ -78,11 +65,11 @@
       top: 0.55rem;
       width: 1.5rem;
       height: 1.5rem;
-      fill: $theme-colour-text-primary;
+      fill: mixins.$theme-colour-text-primary;
       cursor: pointer;
       &.invisible {
         display: none;
       }
     }
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/SearchInput/MagnifyingGlass.svelte b/src/components/SearchInput/components/MagnifyingGlass.svelte
similarity index 94%
rename from src/components/SearchInput/MagnifyingGlass.svelte
rename to src/components/SearchInput/components/MagnifyingGlass.svelte
index 1310ae96..c144a167 100644
--- a/src/components/SearchInput/MagnifyingGlass.svelte
+++ b/src/components/SearchInput/components/MagnifyingGlass.svelte
@@ -11,11 +11,11 @@
 </svg>
 
 <style lang="scss">
-  @use '../../scss/mixins' as *;
+  @use '../../../scss/mixins' as mixins;
   svg {
     vertical-align: middle;
     path {
-      fill: $theme-colour-brand-rules;
+      fill: mixins.$theme-colour-brand-rules;
     }
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/SearchInput/X.svelte b/src/components/SearchInput/components/X.svelte
similarity index 93%
rename from src/components/SearchInput/X.svelte
rename to src/components/SearchInput/components/X.svelte
index 8dfdf8c1..a774df7f 100644
--- a/src/components/SearchInput/X.svelte
+++ b/src/components/SearchInput/components/X.svelte
@@ -20,14 +20,14 @@
 </svg>
 
 <style lang="scss">
-  @use '../../scss/mixins' as *;
+  @use '../../../scss/mixins' as mixins;
   svg {
     vertical-align: middle;
     path {
-      fill: $theme-colour-brand-rules;
+      fill: mixins.$theme-colour-brand-rules;
     }
     rect {
-      fill: $theme-colour-background;
+      fill: mixins.$theme-colour-background;
     }
   }
-</style>
+</style>
\ No newline at end of file

From 12f6515710ef16d32255014cbe07909d2e8f1b0e Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 31 Mar 2025 15:09:02 -0700
Subject: [PATCH 2/2] adds onsearch

---
 src/components/SearchInput/SearchInput.mdx     | 18 ++++++++++--------
 .../SearchInput/SearchInput.stories.svelte     | 15 ++++++++++++++-
 src/components/SearchInput/SearchInput.svelte  | 14 ++++++++++++--
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/SearchInput/SearchInput.mdx b/src/components/SearchInput/SearchInput.mdx
index cd743181..6c347cd5 100644
--- a/src/components/SearchInput/SearchInput.mdx
+++ b/src/components/SearchInput/SearchInput.mdx
@@ -12,16 +12,18 @@ The `SearchInput` component creates a search bar.
 <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}`);
+  function filterData(newSearchText: string) {
+    /** This function would typically filter a dataset based on the search input.*/
+    console.log('Filtering data with:', newSearchText);
+  }
+  function handleSearchInput(newSearchText: string) {
+    /** Here's where you might update a variable, 
+    filter a dataset or make an API call based on the user's input.*/
+    filterData(newSearchText);
   }
 </script>
 
-<SearchInput on:search={handleSearchInput} />
+<SearchInput onsearch={handleSearchInput} />
 ```
 
-<Canvas of={SearchInputStories.Demo} />
\ No newline at end of file
+<Canvas of={SearchInputStories.Demo} />
diff --git a/src/components/SearchInput/SearchInput.stories.svelte b/src/components/SearchInput/SearchInput.stories.svelte
index bca718e7..ae596d55 100644
--- a/src/components/SearchInput/SearchInput.stories.svelte
+++ b/src/components/SearchInput/SearchInput.stories.svelte
@@ -8,4 +8,17 @@
   });
 </script>
 
-<Story name="Demo" />
\ No newline at end of file
+<script lang="ts">
+  function filterData(newSearchText: string) {
+    /** This function would typically filter a dataset based on the search input.*/
+    console.log('Filtering data with:', newSearchText);
+  }
+  function handleSearchInput(newSearchText: string) {
+    /** Here's where you might update a variable, filter a dataset or make an API call based on the user's input.*/
+    filterData(newSearchText);
+  }
+</script>
+
+<Story name="Demo">
+  <SearchInput onsearch={handleSearchInput} />
+</Story>
diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index c89a83dc..01e78d05 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -6,15 +6,23 @@
   interface Props {
     /** The placeholder text that appears in the search box.*/
     searchPlaceholder?: string;
+    /** Optional function that runs when the input value changes. */
+    onsearch?: (newValue: string) => void;
   }
 
-  let { searchPlaceholder = 'Search...' }: Props = $props();
+  let { searchPlaceholder = 'Search...', onsearch }: Props = $props();
 
   let value = $state('');
   let active = $derived(value !== '');
 
   function clear() {
     value = '';
+    if (onsearch) onsearch(value); // Call the prop to update the parent when cleared
+  }
+
+  function oninput(event: Event) {
+    value = (event.target as HTMLInputElement).value;
+    if (onsearch) onsearch(value); // Update the parent on every input change
   }
 </script>
 
@@ -22,12 +30,14 @@
   <div class="search--icon absolute">
     <MagnifyingGlass />
   </div>
+
   <input
     id="search--input"
     class="search--input body-caption pl-8"
     type="text"
     placeholder={searchPlaceholder}
     bind:value
+    {oninput}
   />
   <div
     class="search--x absolute"
@@ -72,4 +82,4 @@
       }
     }
   }
-</style>
\ No newline at end of file
+</style>