@reuters-graphics/graphics-components 0.0.13 → 0.0.15

package/dist/@types/index.d.ts

@@ -20,6 +20,7 @@ export { default as Sharer } from "./components/Sharer/Sharer.svelte";
 export { default as SimpleTimeline } from "./components/SimpleTimeline/SimpleTimeline.svelte";
 export { default as SiteFooter } from "./components/SiteFooter/SiteFooter.svelte";
 export { default as SiteHeader } from "./components/SiteHeader/SiteHeader.svelte";
+export { default as SiteHeadline } from "./components/SiteHeadline/SiteHeadline.svelte";
 export { default as Spinner } from "./components/Spinner/Spinner.svelte";
 export { default as Video } from "./components/Video/Video.svelte";
 export { default as Visible } from "./components/Visible/Visible.svelte";

package/dist/components/Framer/Framer.svelte

@@ -23,6 +23,7 @@
   };
 
   let activeEmbed = getDefaultEmbed();
+  let activeEmbedIndex = embeds.indexOf(activeEmbed);
 
   $: embedTitles = getUniqNames(embeds);
 
@@ -30,11 +31,17 @@
   let pymParent;
 
   const reframe = (embed) => {
+    // Bit of hack for handling adding query strings dynamically to embeds.
+    // cf. also the value prop on the Typeahead component...
+    const activeEmbed =
+      embeds.indexOf(embed) > -1
+        ? embed
+        : embeds[activeEmbedIndex] || embeds[0];
     pymParent = new pym.Parent(
       'frame-parent',
-      /^http/.test(embed)
-        ? embed
-        : urljoin(window.location.origin, embed, { trailingSlash: true })
+      /^http/.test(activeEmbed)
+        ? activeEmbed
+        : urljoin(window.location.origin, activeEmbed, { trailingSlash: true })
     );
   };
 
@@ -68,7 +75,9 @@
     </div>
     <Typeahead
       label="Select an embed"
-      value="{embedTitles[embeds.indexOf(activeEmbed)]}"
+      value="{embedTitles[embeds.indexOf(activeEmbed)] ||
+        embedTitles[activeEmbedIndex] ||
+        embedTitles[0]}"
       extract="{(d) => embedTitles[d.index]}"
       data="{embeds.map((embed, index) => ({ index, embed }))}"
       placeholder="{'Search'}"
@@ -81,6 +90,7 @@
           );
         }
         activeEmbed = detail.original.embed;
+        activeEmbedIndex = detail.original.index;
       }}"
     />
   </div>
@@ -103,62 +113,63 @@
   maxFrameWidth="{maxFrameWidth}"
 />
 
-<style>header {
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
-  font-size: 50px;
-  text-align: center;
-  text-transform: uppercase;
-  font-weight: 700;
-  margin: 20px 0;
-}
-
-div#typeahead-container {
-  max-width: 660px;
-  margin: 0 auto 15px;
-  position: relative;
-}
-div#typeahead-container div.embed-link {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: inline-block;
-  z-index: 2;
-}
-div#typeahead-container div.embed-link 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 {
-  color: #666;
-}
-
-div#preview-label {
-  margin: 0 auto;
-}
-div#preview-label p {
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
-  color: #aaa;
-  font-size: 0.75rem;
-  margin: 0 0 0.25rem;
-}
-
-#frame-parent {
-  border: 1px solid #ddd;
-  margin: 0 auto;
-  width: var(--width);
-}
-
-div#home-link {
-  position: fixed;
-  bottom: 5px;
-  left: 10px;
-  font-size: 18px;
-}
-div#home-link a {
-  color: #ccc;
-}
-div#home-link a:hover {
-  color: #666;
-}</style>
+<style>
+  header {
+    font-family: 'Knowledge', 'Source Sans Pro', Arial, sans-serif;
+    font-size: 50px;
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: 700;
+    margin: 20px 0;
+  }
+
+  div#typeahead-container {
+    max-width: 660px;
+    margin: 0 auto 15px;
+    position: relative;
+  }
+  div#typeahead-container div.embed-link {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: inline-block;
+    z-index: 2;
+  }
+  div#typeahead-container div.embed-link 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 {
+    color: #666;
+  }
+
+  div#preview-label {
+    margin: 0 auto;
+  }
+  div#preview-label p {
+    font-family: 'Knowledge', 'Source Sans Pro', Arial, sans-serif;
+    color: #aaa;
+    font-size: 0.75rem;
+    margin: 0 0 0.25rem;
+  }
+
+  #frame-parent {
+    border: 1px solid #ddd;
+    margin: 0 auto;
+    width: var(--width);
+  }
+
+  div#home-link {
+    position: fixed;
+    bottom: 5px;
+    left: 10px;
+    font-size: 18px;
+  }
+  div#home-link a {
+    color: #ccc;
+  }
+  div#home-link a:hover {
+    color: #666;
+  }</style>

package/dist/index.js

@@ -21,6 +21,7 @@ export { default as Sharer } from './components/Sharer/Sharer.svelte';
 export { default as SimpleTimeline } from './components/SimpleTimeline/SimpleTimeline.svelte';
 export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte';
 export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
+export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';
 export {
   default as Theme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",