Merge pull request #293 from reuters-graphics/jon-framer-search

Framer searchType

.changeset/easy-dryers-chew.md

@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Adds a simple dropdown option to search embeds for Framer

src/components/Framer/Dropdown/index.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  interface Props {
+    data: {
+      index: number;
+      embed: string;
+      title: string;
+    }[];
+    selected: string;
+  }
+
+  let { data = [], selected = $bindable() }: Props = $props();
+</script>
+
+<form>
+  <label for="embed-options">Select an embed</label>
+  <select id="embed-options" bind:value={selected}>
+    {#each data as d (d.index)}
+      <option value={d.embed}>{d.title}</option>
+    {/each}
+  </select>
+</form>
+
+<style lang="scss">
+  @use '../../../scss/mixins' as mixins;
+
+  label {
+    margin-bottom: 0.25rem;
+    display: inline-flex;
+    font-size: 0.75rem;
+    color: #aaa;
+    @include mixins.font-sans;
+  }
+
+  select {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: none;
+    font-size: 1rem;
+    border: 0;
+    border-radius: 0 !important;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    @include mixins.font-sans;
+  }
+
+  select:focus {
+    outline: none;
+    border: 1px solid #ccc;
+  }
+</style>

src/components/Framer/Framer.svelte

@@ -7,6 +7,7 @@
   import { width } from './stores';
   import getUniqNames from './uniqNames';
   import Typeahead from './Typeahead/index.svelte';
+  import Dropdown from './Dropdown/index.svelte';
   import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
 
   interface Props {
@@ -14,6 +15,7 @@
     breakpoints?: number[];
     minFrameWidth?: number;
     maxFrameWidth?: number;
+    searchType?: 'dropdown' | 'typeahead';
   }
 
   let {
@@ -21,6 +23,7 @@
     breakpoints = [330, 510, 660, 930, 1200],
     minFrameWidth = 320,
     maxFrameWidth = 1200,
+    searchType = 'dropdown',
   }: Props = $props();
 
   const getDefaultEmbed = (embeds: Props['embeds']) => {
@@ -71,6 +74,7 @@
       <p>No embeds to show.</p>
     </div>
   {:else}
+    {#if searchType === 'typeahead'}
       <div id="typeahead-container">
         <div class="embed-link">
           <a
@@ -102,6 +106,30 @@
           }}
         />
       </div>
+    {:else}
+      <div id="dropdown-container">
+        <div>
+          <div class="embed-link">
+            <a
+              rel="external"
+              target="_blank"
+              href={activeEmbed}
+              title={activeEmbed}
+            >
+              Live link <Fa icon={faLink} />
+            </a>
+          </div>
+        </div>
+        <Dropdown
+          data={embeds.map((embed, index) => ({
+            index,
+            embed,
+            title: embedTitles[index],
+          }))}
+          bind:selected={activeEmbed}
+        />
+      </div>
+    {/if}
 
     <div id="preview-label" style="width:{$width}px;">
       <p>Preview</p>
@@ -139,27 +167,28 @@
     }
   }
 
-  div#typeahead-container {
+  div#typeahead-container,
+  div#dropdown-container {
     max-width: 660px;
     margin: 0 auto 15px;
     position: relative;
-  }
-  div#typeahead-container div.embed-link {
+    div.embed-link {
       position: absolute;
       top: 0;
       right: 0;
       display: inline-block;
       z-index: 2;
-  }
-  div#typeahead-container div.embed-link a {
+      a {
         font-family: 'Knowledge', 'Source Sans Pro', Arial, sans-serif;
         color: #bbb;
         font-size: 12px;
         text-decoration: none !important;
-  }
-  div#typeahead-container div.embed-link a:hover {
+        &:hover {
           color: #666;
         }
+      }
+    }
+  }
 
   div#preview-label {
     margin: 0 auto;