@reuters-graphics/graphics-components 0.0.2 → 0.0.5

package/dist/@types/components/Framer/Typeahead/fuzzy.d.ts

@@ -0,0 +1,10 @@
+export default fuzzy;
+declare namespace fuzzy {
+    function simpleFilter(pattern: any, array: any): any;
+    function test(pattern: any, str: any): boolean;
+    function match(pattern: any, str: any, opts: any): {
+        rendered: string;
+        score: number;
+    };
+    function filter(pattern: any, arr: any, opts: any): any;
+}

package/dist/@types/components/Framer/Typeahead/index.svelte.d.ts

@@ -0,0 +1,143 @@
+/** @typedef {typeof __propDef.props}  IndexProps */
+/** @typedef {typeof __propDef.events}  IndexEvents */
+/** @typedef {typeof __propDef.slots}  IndexSlots */
+export default class Index extends SvelteComponentTyped<{
+    [x: string]: any;
+    value?: string;
+    extract?: (item: {
+        index: number;
+        embed: string;
+    }) => any;
+    id?: string;
+    data?: {
+        index: number;
+        embed: string;
+    }[];
+    disable?: (item: {
+        index: number;
+        embed: string;
+    }) => boolean;
+    filter?: (item: {
+        index: number;
+        embed: string;
+    }) => boolean;
+    autoselect?: boolean;
+    inputAfterSelect?: "update" | "clear" | "keep";
+    results?: {
+        original: {
+            index: number;
+            embed: string;
+        };
+        index: number;
+        score: number;
+        string: string;
+        disabled?: boolean;
+    }[];
+    focusAfterSelect?: boolean;
+    showDropdownOnFocus?: boolean;
+    limit?: number;
+}, {
+    type: CustomEvent<string>;
+    input: Event;
+    change: Event;
+    focus: FocusEvent;
+    clear: CustomEvent<any>;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    select: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        result: {
+            original: {
+                index: number;
+                embed: string;
+            };
+            index: number;
+            score: number;
+            string: string;
+            disabled?: boolean;
+        };
+        index: any;
+        value: string;
+    };
+    'no-results': {
+        value: string;
+    };
+}> {
+}
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string;
+        extract?: (item: {
+            index: number;
+            embed: string;
+        }) => any;
+        id?: string;
+        data?: {
+            index: number;
+            embed: string;
+        }[];
+        disable?: (item: {
+            index: number;
+            embed: string;
+        }) => boolean;
+        filter?: (item: {
+            index: number;
+            embed: string;
+        }) => boolean;
+        autoselect?: boolean;
+        inputAfterSelect?: "update" | "clear" | "keep";
+        results?: {
+            original: {
+                index: number;
+                embed: string;
+            };
+            index: number;
+            score: number;
+            string: string;
+            disabled?: boolean;
+        }[];
+        focusAfterSelect?: boolean;
+        showDropdownOnFocus?: boolean;
+        limit?: number;
+    };
+    events: {
+        type: CustomEvent<string>;
+        input: Event;
+        change: Event;
+        focus: FocusEvent;
+        clear: CustomEvent<any>;
+        blur: FocusEvent;
+        keydown: KeyboardEvent;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            result: {
+                original: {
+                    index: number;
+                    embed: string;
+                };
+                index: number;
+                score: number;
+                string: string;
+                disabled?: boolean;
+            };
+            index: any;
+            value: string;
+        };
+        'no-results': {
+            value: string;
+        };
+    };
+};
+export {};

package/dist/@types/components/Headline/Headline.svelte.d.ts

@@ -2,13 +2,16 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         /**
-           * Headline
+           * Headline, parsed as an _inline_ markdown string in an `h1` element.
+           * @type {string}
            */ hed?: string;
         /**
-           * Dek
+           * Dek, parsed as a markdown string.
+           * @type {string}
            */ dek?: string | null;
         /**
            * Section title
+           * @type {string}
            */ section?: string | null;
     };
     events: {
@@ -17,6 +20,7 @@ declare const __propDef: {
     slots: {
         crown: {};
         hed: {};
+        dek: {};
         byline: {};
         dateline: {};
     };

package/dist/@types/components/SimpleTimeline/SimpleTimeline.svelte.d.ts

@@ -0,0 +1,43 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * An array of dates with events.
+           * @required
+           */ dates: {
+            date: string;
+            events: {
+                title: string;
+                titleLink?: string;
+                context?: string;
+            }[];
+        }[];
+        /**
+           * Set a colour for the timeline bullet symbols and line.
+           * @type {string}
+           */ symbolColour?: string;
+        /**
+           * Set a colour for the date headings in the timeline.
+           * @type {string}
+           */ dateColour?: string;
+        /**
+           * Set a class to target with SCSS.
+           * @type {string}
+           */ cls?: string;
+        /**
+           * Set an ID to target with SCSS.
+           * @type {string}
+           */ id?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SimpleTimelineProps = typeof __propDef.props;
+export declare type SimpleTimelineEvents = typeof __propDef.events;
+export declare type SimpleTimelineSlots = typeof __propDef.slots;
+/** `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SimpleTimeline--default) */
+export default class SimpleTimeline extends SvelteComponentTyped<SimpleTimelineProps, SimpleTimelineEvents, SimpleTimelineSlots> {
+}
+export {};

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

@@ -17,6 +17,7 @@ export { default as ReutersLogo } from "./components/ReutersLogo/ReutersLogo.sve
 export { default as Scroller } from "./components/Scroller/Scroller.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";
 export { default as SiteFooter } from "./components/SiteFooter/SiteFooter.svelte";
 export { default as SiteHeader } from "./components/SiteHeader/SiteHeader.svelte";
 export { default as Spinner } from "./components/Spinner/Spinner.svelte";

package/dist/components/Framer/Framer.svelte

@@ -7,6 +7,7 @@
   import Resizer from './Resizer/index.svelte';
   import { width } from './stores.js';
   import getUniqNames from './uniqNames.js';
+  import Typeahead from './Typeahead/index.svelte';
 
   export let embeds;
   export let breakpoints = [330, 510, 660, 930, 1200];
@@ -46,22 +47,33 @@
     />
   </header>
 
-  <nav>
-    {#each embeds as embed, i}
-      <button
-        on:click="{() => {
-          activeEmbed = embed;
-        }}"
-        class:active="{activeEmbed === embed}"
+  <div id="typeahead-container">
+    <div class="embed-link">
+      <a
+        rel="external"
+        target="_blank"
+        href="{activeEmbed}"
+        title="{activeEmbed}"
       >
-        {embedTitles[i]}
-        <a rel="external" target="_blank" href="{embed}" title="{embed}">
-          <Fa icon="{faLink}" />
-        </a>
-      </button>
-    {/each}
-  </nav>
+        Live link <Fa icon="{faLink}" />
+      </a>
+    </div>
+    <Typeahead
+      label="Select an embed"
+      value="{embedTitles[0]}"
+      extract="{(d) => embedTitles[d.index]}"
+      data="{embeds.map((embed, index) => ({ index, embed }))}"
+      placeholder="{'Search'}"
+      showDropdownOnFocus="{true}"
+      on:select="{({ detail }) => {
+        activeEmbed = detail.original.embed;
+      }}"
+    />
+  </div>
 
+  <div id="preview-label" style="width:{$width}px;">
+    <p>Preview</p>
+  </div>
   <div id="frame-parent" style="width:{$width}px;"></div>
 </div>
 
@@ -86,36 +98,38 @@
   margin: 20px 0;
 }
 
-nav {
-  text-align: center;
-  margin: 0 auto 20px;
-  max-width: 900px;
-}
-nav button {
-  margin: 0 4px 5px;
-  background-color: transparent;
-  border: 0;
-  color: #999;
-  padding: 2px 2px;
-  cursor: pointer;
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
-  font-weight: 400;
-}
-nav button.active {
-  border-bottom: 2px solid #666;
-  color: #666;
+div#typeahead-container {
+  max-width: 660px;
+  margin: 0 auto 15px;
+  position: relative;
 }
-nav button:focus {
-  outline: none;
+div#typeahead-container div.embed-link {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-block;
+  z-index: 2;
 }
-nav button a {
+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;
 }
-nav button a:hover {
+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;

package/dist/components/Framer/Typeahead/fuzzy.js

@@ -0,0 +1,133 @@
+/*
+ * Fuzzy
+ * https://github.com/myork/fuzzy
+ *
+ * Copyright (c) 2012 Matt York
+ * Licensed under the MIT license.
+ */
+
+const fuzzy = {};
+
+// Return all elements of `array` that have a fuzzy
+// match against `pattern`.
+fuzzy.simpleFilter = function (pattern, array) {
+  return array.filter(function (str) {
+    return fuzzy.test(pattern, str);
+  });
+};
+
+// Does `pattern` fuzzy match `str`?
+fuzzy.test = function (pattern, str) {
+  return fuzzy.match(pattern, str) !== null;
+};
+
+// If `pattern` matches `str`, wrap each matching character
+// in `opts.pre` and `opts.post`. If no match, return null
+fuzzy.match = function (pattern, str, opts) {
+  opts = opts || {};
+  let patternIdx = 0;
+  const result = [];
+  const len = str.length;
+  let totalScore = 0;
+  let currScore = 0;
+  // prefix
+  const pre = opts.pre || '';
+  // suffix
+  const post = opts.post || '';
+  // String to compare against. This might be a lowercase version of the
+  // raw string
+  const compareString = (opts.caseSensitive && str) || str.toLowerCase();
+  let ch;
+
+  pattern = (opts.caseSensitive && pattern) || pattern.toLowerCase();
+
+  // For each character in the string, either add it to the result
+  // or wrap in template if it's the next string in the pattern
+  for (let idx = 0; idx < len; idx++) {
+    ch = str[idx];
+    if (compareString[idx] === pattern[patternIdx]) {
+      ch = pre + ch + post;
+      patternIdx += 1;
+
+      // consecutive characters should increase the score more than linearly
+      currScore += 1 + currScore;
+    } else {
+      currScore = 0;
+    }
+    totalScore += currScore;
+    result[result.length] = ch;
+  }
+
+  // return rendered string if we have a match for every char
+  if (patternIdx === pattern.length) {
+    // if the string is an exact match with pattern, totalScore should be maxed
+    totalScore = compareString === pattern ? Infinity : totalScore;
+    return { rendered: result.join(''), score: totalScore };
+  }
+
+  return null;
+};
+
+// The normal entry point. Filters `arr` for matches against `pattern`.
+// It returns an array with matching values of the type:
+//
+//     [{
+//         string:   '<b>lah' // The rendered string
+//       , index:    2        // The index of the element in `arr`
+//       , original: 'blah'   // The original element in `arr`
+//     }]
+//
+// `opts` is an optional argument bag. Details:
+//
+//    opts = {
+//        // string to put before a matching character
+//        pre:     '<b>'
+//
+//        // string to put after matching character
+//      , post:    '</b>'
+//
+//        // Optional function. Input is an entry in the given arr`,
+//        // output should be the string to test `pattern` against.
+//        // In this example, if `arr = [{crying: 'koala'}]` we would return
+//        // 'koala'.
+//      , extract: function(arg) { return arg.crying; }
+//    }
+fuzzy.filter = function (pattern, arr, opts) {
+  if (!arr || arr.length === 0) {
+    return [];
+  }
+  if (typeof pattern !== 'string') {
+    return arr;
+  }
+  opts = opts || {};
+  return (
+    arr
+      .reduce(function (prev, element, idx, arr) {
+        let str = element;
+        if (opts.extract) {
+          str = opts.extract(element);
+        }
+        const rendered = fuzzy.match(pattern, str, opts);
+        if (rendered != null) {
+          prev[prev.length] = {
+            string: rendered.rendered,
+            score: rendered.score,
+            index: idx,
+            original: element,
+          };
+        }
+        return prev;
+      }, [])
+
+      // Sort by score. Browsers are inconsistent wrt stable/unstable
+      // sorting, so force stable by using the index in the case of tie.
+      // See http://ofb.net/~sethml/is-sort-stable.html
+      .sort(function (a, b) {
+        const compare = b.score - a.score;
+        if (compare) return compare;
+        return a.index - b.index;
+      })
+  );
+};
+
+export default fuzzy;

package/dist/components/Framer/Typeahead/index.svelte

@@ -0,0 +1,344 @@
+<script>
+  /**
+   * @typedef {Object} TItem
+   * @property {number} index
+   * @property {string} embed
+   */
+
+  export let id = 'typeahead-' + Math.random().toString(36);
+  export let value = '';
+
+  /** @type {TItem[]} */
+  export let data = [];
+
+  /** @type {(item: TItem) => any} */
+  export let extract = (item) => item;
+
+  /** @type {(item: TItem) => boolean} */
+  export let disable = (item) => false;
+
+  /** @type {(item: TItem) => boolean} */
+  export let filter = (item) => false;
+
+  /** Set to `false` to prevent the first result from being selected */
+  export let autoselect = true;
+
+  /**
+   * Set to `keep` to keep the search field unchanged after select, set to `clear` to auto-clear search field
+   * @type {"update" | "clear" | "keep"}
+   */
+  export let inputAfterSelect = 'update';
+
+  /** @type {{ original: TItem; index: number; score: number; string: string; disabled?: boolean; }[]} */
+  export let results = [];
+
+  /** Set to `true` to re-focus the input after selecting a result */
+  export let focusAfterSelect = false;
+
+  /** Set to `true` to only show results when the input is focused */
+  export let showDropdownOnFocus = false;
+
+  /**
+   * Specify the maximum number of results to return
+   * @type {number}
+   */
+  export let limit = Infinity;
+
+  import fuzzy from './fuzzy.js';
+  import Search from 'svelte-search';
+  import { tick, createEventDispatcher, afterUpdate } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  let comboboxRef = null;
+  let searchRef = null;
+  let hideDropdown = false;
+  let selectedIndex = -1;
+  let prevResults = '';
+  let isFocused = false;
+
+  afterUpdate(() => {
+    if (prevResults !== resultsId && autoselect) {
+      selectedIndex = getNextNonDisabledIndex();
+    }
+
+    if (prevResults !== resultsId && !$$slots['no-results']) {
+      hideDropdown = results.length === 0;
+    }
+
+    prevResults = resultsId;
+  });
+
+  async function select() {
+    const result = results[selectedIndex];
+
+    if (result.disabled) return;
+
+    const selectedValue = extract(result.original);
+    const searchedValue = value;
+
+    if (inputAfterSelect === 'clear') value = '';
+    if (inputAfterSelect === 'update') value = selectedValue;
+
+    dispatch('select', {
+      selectedIndex,
+      searched: searchedValue,
+      selected: selectedValue,
+      original: result.original,
+      originalIndex: result.index,
+    });
+
+    await tick();
+
+    if (focusAfterSelect) searchRef.focus();
+    close();
+  }
+
+  /** @type {() => number} */
+  function getNextNonDisabledIndex() {
+    let index = 0;
+    let disabled = results[index]?.disabled ?? false;
+
+    while (disabled) {
+      if (index === results.length) {
+        index = 0;
+      } else {
+        index += 1;
+      }
+
+      disabled = results[index]?.disabled ?? false;
+    }
+
+    return index;
+  }
+
+  /** @type {(direction: -1 | 1) => void} */
+  function change(direction) {
+    let index =
+      direction === 1 && selectedIndex === results.length - 1
+        ? 0
+        : selectedIndex + direction;
+    if (index < 0) index = results.length - 1;
+
+    let disabled = results[index].disabled;
+
+    while (disabled) {
+      if (index === results.length) {
+        index = 0;
+      } else {
+        index += direction;
+      }
+
+      disabled = results[index].disabled;
+    }
+
+    selectedIndex = index;
+  }
+
+  const open = () => (hideDropdown = false);
+  const close = () => (hideDropdown = true);
+
+  $: options = { pre: '<mark>', post: '</mark>', extract };
+  $: results =
+    value !== ''
+      ? fuzzy
+          .filter(value, data, options)
+          .filter(({ score }) => score > 0)
+          .slice(0, limit)
+          .filter((result) => !filter(result.original))
+          .map((result) => ({ ...result, disabled: disable(result.original) }))
+      : data.slice(0, 10).map((d) => ({ string: extract(d), original: d }));
+
+  $: resultsId = results.map((result) => extract(result.original)).join('');
+  $: showResults = !hideDropdown && results.length > 0 && isFocused;
+  $: if (showDropdownOnFocus) {
+    showResults = showResults && isFocused;
+  }
+</script>
+
+<svelte:window
+  on:click="{({ target }) => {
+    if (!hideDropdown && !comboboxRef?.contains(target)) {
+      close();
+    }
+  }}"
+/>
+
+<div
+  data-svelte-typeahead
+  bind:this="{comboboxRef}"
+  role="combobox"
+  aria-haspopup="listbox"
+  aria-owns="{id}-listbox"
+  class:dropdown="{results.length > 0}"
+  aria-expanded="{showResults}"
+  id="{id}-typeahead"
+>
+  <Search
+    id="{id}"
+    removeFormAriaAttributes="{true}"
+    {...$$restProps}
+    bind:ref="{searchRef}"
+    aria-autocomplete="list"
+    aria-controls="{id}-listbox"
+    aria-labelledby="{id}-label"
+    aria-activedescendant="{selectedIndex >= 0 &&
+    !hideDropdown &&
+    results.length > 0
+      ? `${id}-result-${selectedIndex}`
+      : null}"
+    bind:value
+    on:type
+    on:input
+    on:change
+    on:focus
+    on:focus="{() => {
+      open();
+      if (showDropdownOnFocus) {
+        showResults = true;
+        isFocused = true;
+      }
+    }}"
+    on:clear
+    on:clear="{open}"
+    on:blur
+    on:keydown
+    on:keydown="{(e) => {
+      if (results.length === 0) return;
+
+      switch (e.key) {
+        case 'Enter':
+          select();
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          change(1);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          change(-1);
+          break;
+        case 'Escape':
+          e.preventDefault();
+          value = '';
+          searchRef?.focus();
+          close();
+          break;
+      }
+    }}"
+  />
+  <ul
+    class:svelte-typeahead-list="{true}"
+    role="listbox"
+    aria-labelledby="{id}-label"
+    id="{id}-listbox"
+  >
+    {#if showResults}
+      {#each results as result, index}
+        <li
+          role="option"
+          id="{id}-result-{index}"
+          class:selected="{selectedIndex === index}"
+          class:disabled="{result.disabled}"
+          aria-selected="{selectedIndex === index}"
+          on:click="{() => {
+            if (result.disabled) return;
+            selectedIndex = index;
+            select();
+          }}"
+          on:mouseenter="{() => {
+            if (result.disabled) return;
+            selectedIndex = index;
+          }}"
+        >
+          <slot result="{result}" index="{index}" value="{value}">
+            {@html result.string}
+          </slot>
+        </li>
+      {/each}
+    {/if}
+    {#if $$slots['no-results'] && !hideDropdown && value.length > 0 && results.length === 0}
+      <div class:no-results="{true}">
+        <slot name="no-results" value="{value}" />
+      </div>
+    {/if}
+  </ul>
+</div>
+
+<style>[data-svelte-typeahead] {
+  position: relative;
+  background-color: #fff;
+}
+
+ul {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  padding: 0;
+  list-style: none;
+  background-color: inherit;
+}
+
+[aria-expanded=true] ul {
+  z-index: 1;
+  border: 1px solid #ddd;
+}
+
+li,
+.no-results {
+  padding: 0.25rem 1rem;
+}
+
+li {
+  cursor: pointer;
+}
+li :global(mark) {
+  padding: 0;
+  background-color: #ffff9a;
+}
+
+li:not(:last-of-type) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+li:hover {
+  background-color: #efefef;
+}
+
+.selected {
+  background-color: #efefef;
+}
+
+.selected:hover {
+  background-color: #e5e5e5;
+}
+
+.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+:global([data-svelte-search] label) {
+  margin-bottom: 0.25rem;
+  display: inline-flex;
+  font-size: 0.75rem;
+  color: #aaa;
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+}
+
+:global([data-svelte-search] input) {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: none;
+  font-size: 1rem;
+  border: 0;
+  border-radius: 0 !important;
+  border: 1px solid #ddd;
+  font-family: var(--theme-font-family-sans-serif, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif);
+}
+
+:global([data-svelte-search] input:focus) {
+  outline: none;
+  border: 1px solid #ccc;
+}</style>

package/dist/components/Headline/Headline.svelte

@@ -1,17 +1,21 @@
 <!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
 <script>/**
- * Headline
+ * Headline, parsed as an _inline_ markdown string in an `h1` element.
+ * @type {string}
  */
 export let hed = 'Reuters Graphics Interactive';
 /**
- * Dek
+ * Dek, parsed as a markdown string.
+ * @type {string}
  */
 export let dek = null;
 /**
  * Section title
+ * @type {string}
  */
 export let section = null;
 import Block from '../Block/Block.svelte';
+import { marked } from 'marked';
 </script>
 
 <Block cls="mb-1">
@@ -27,13 +31,16 @@ import Block from '../Block/Block.svelte';
         <p class="{'section-title'}">{section}</p>
       {/if}
       {#if $$slots.hed}
-        <!-- Headline override named slot -->
+        <!-- Headline named slot -->
         <slot name="hed" />
       {:else}
-        <h1>{hed}</h1>
+        <h1>{@html marked.parseInline(hed)}</h1>
       {/if}
-      {#if dek}
-        <p>{dek}</p>
+      {#if $$slots.dek}
+        <!-- Dek named slot-->
+        <slot name="dek" />
+      {:else if dek}
+        {@html marked(dek)}
       {/if}
     </div>
     {#if $$slots.byline || $$slots.dateline}

package/dist/components/SimpleTimeline/SimpleTimeline.svelte

@@ -0,0 +1,126 @@
+<!-- @component `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SimpleTimeline--default) -->
+<script>/**
+ * An array of dates with events.
+ * @required
+ */
+export let dates;
+/**
+ * Set a colour for the timeline bullet symbols and line.
+ * @type {string}
+ */
+export let symbolColour = '#ccc';
+/**
+ * Set a colour for the date headings in the timeline.
+ * @type {string}
+ */
+export let dateColour = 'var(--theme-colour-accent, red)';
+/**
+ * Set a class to target with SCSS.
+ * @type {string}
+ */
+export let cls = '';
+/**
+ * Set an ID to target with SCSS.
+ * @type {string}
+ */
+export let id = '';
+import Block from '../Block/Block.svelte';
+import Fa from 'svelte-fa/src/fa.svelte';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { marked } from 'marked';
+</script>
+
+<Block width="normal" id="{id}" cls="simple-timeline-container {cls}">
+  <div class="timeline" style="--symbol-colour:{symbolColour};">
+    {#each dates as date}
+      <div class="date">
+        <svg height="25" width="20">
+          <circle
+            cx="10"
+            cy="12"
+            r="5"
+            stroke="{symbolColour}"
+            stroke-width="2"
+            fill="transparent"></circle>
+        </svg>
+        <h5 style:color="{dateColour}">{date.date}</h5>
+        {#each date.events as event}
+          <div class="event pb-2">
+            {#if event.titleLink}
+              <a href="{event.titleLink}" target="_blank">
+                <h6>
+                  {event.title} <span><Fa fw icon="{faLink}" /></span>
+                </h6>
+              </a>
+            {:else}
+              <h6>{event.title}</h6>
+            {/if}
+            {#if event.context}
+              {@html marked(event.context)}
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {/each}
+  </div>
+</Block>
+
+<style>.timeline {
+  margin-top: 2rem;
+  padding-left: 8px;
+  padding-right: 15px;
+}
+.timeline .date {
+  border-left: 1px solid var(--symbol-colour);
+  padding-left: 20px;
+  padding-bottom: 1rem;
+  position: relative;
+  margin: 0;
+  display: block;
+}
+.timeline .date:last-child {
+  border-left: 1px solid var(--theme-colour-background, #fff);
+}
+.timeline .date h5 {
+  font-size: 0.95rem;
+  margin-top: 0px;
+}
+.timeline svg {
+  background-color: var(--theme-colour-background, #fff);
+  position: absolute;
+  top: -1px;
+  left: -10px;
+}
+.timeline div.event h6 {
+  margin: 0;
+  font-size: 1.2rem;
+  color: var(--theme-colour-text-primary, #666);
+}
+.timeline div.event a {
+  color: var(--theme-colour-text-primary, #666);
+  text-decoration: none;
+}
+.timeline div.event a:hover {
+  text-decoration: underline;
+}
+.timeline div.event a h6 span {
+  opacity: 0.5;
+  font-size: 1rem;
+}
+.timeline div.event a h6:hover span {
+  opacity: 0.8;
+}
+.timeline div.event :global(p) {
+  margin-top: 0;
+  margin-bottom: 0.7rem;
+  font-size: 1rem;
+  font-weight: 300;
+  color: var(--theme-colour-text-primary, #666);
+  font-family: var(--theme-font-family-sans-serif);
+}
+.timeline div.event :global(p):last-of-type {
+  margin-bottom: 0;
+}
+.timeline div.event :global(a) {
+  color: var(--theme-colour-text-primary, #666);
+}</style>

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.sve
 export { default as Scroller } from './components/Scroller/Scroller.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';
 export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte';
 export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -89,6 +89,7 @@
     "pym.js": "^1.3.2",
     "svelte-fa": "^2.4.0",
     "svelte-intersection-observer": "^0.10.0",
+    "svelte-search": "^2.0.1",
     "ua-parser-js": "^0.7.27"
   },
   "exports": {
@@ -105,6 +106,8 @@
     "./components/FeaturePhoto/FeaturePhoto.svelte": "./dist/components/FeaturePhoto/FeaturePhoto.svelte",
     "./components/Framer/Framer.svelte": "./dist/components/Framer/Framer.svelte",
     "./components/Framer/Resizer/index.svelte": "./dist/components/Framer/Resizer/index.svelte",
+    "./components/Framer/Typeahead/fuzzy": "./dist/components/Framer/Typeahead/fuzzy.js",
+    "./components/Framer/Typeahead/index.svelte": "./dist/components/Framer/Typeahead/index.svelte",
     "./components/Framer/stores": "./dist/components/Framer/stores.js",
     "./components/Framer/uniqNames": "./dist/components/Framer/uniqNames.js",
     "./components/GraphicBlock/AriaHidden.svelte": "./dist/components/GraphicBlock/AriaHidden.svelte",
@@ -133,6 +136,7 @@
     "./components/Sharer/utils/facebook": "./dist/components/Sharer/utils/facebook.js",
     "./components/Sharer/utils/meta": "./dist/components/Sharer/utils/meta.js",
     "./components/Sharer/utils/twitter": "./dist/components/Sharer/utils/twitter.js",
+    "./components/SimpleTimeline/SimpleTimeline.svelte": "./dist/components/SimpleTimeline/SimpleTimeline.svelte",
     "./components/SiteFooter/CompanyLinks.svelte": "./dist/components/SiteFooter/CompanyLinks.svelte",
     "./components/SiteFooter/LegalLinks.svelte": "./dist/components/SiteFooter/LegalLinks.svelte",
     "./components/SiteFooter/QuickLinks.svelte": "./dist/components/SiteFooter/QuickLinks.svelte",