@reuters-graphics/graphics-components 0.0.1-beta.1

package/dist/components/BodyText/BodyText.svelte

@@ -0,0 +1,193 @@
+<script>/**
+ * A markdown text string.
+ * @type {string}
+ * @required
+ */
+export let text;
+import { marked } from 'marked';
+import Block from '../Block/Block.svelte';
+</script>
+
+<Block cls="body-text">
+  {#if text}
+    {@html marked.parse(text)}
+  {/if}
+</Block>
+
+<!-- svelte-ignore css-unused-selector -->
+<style global>:global(.paragraph-size), :global(div.article-block.body-text) :global(p), :global(div.article-block.body-text) :global(ul) :global(li), :global(div.article-block.body-text) :global(ul) :global(li) :global(p), :global(div.article-block.body-text) :global(ol) :global(li), :global(div.article-block.body-text) :global(ol) :global(li) :global(p) {
+  font-size: 1.3rem;
+  line-height: 2.1rem;
+}
+:global(.paragraph-size.font-sans), :global(div.article-block.body-text) :global(p.font-sans), :global(div.article-block.body-text) :global(ul) :global(li.font-sans), :global(div.article-block.body-text) :global(ol) :global(li.font-sans) {
+  font-size: 1.1rem;
+  line-height: 1.75rem;
+}
+@media (max-width: 540px) {
+  :global(.paragraph-size), :global(div.article-block.body-text) :global(p), :global(div.article-block.body-text) :global(ul) :global(li), :global(div.article-block.body-text) :global(ul) :global(li) :global(p), :global(div.article-block.body-text) :global(ol) :global(li), :global(div.article-block.body-text) :global(ol) :global(li) :global(p) {
+    font-size: 1.1rem;
+    line-height: 1.8rem;
+  }
+  :global(.paragraph-size.font-sans), :global(div.article-block.body-text) :global(p.font-sans), :global(div.article-block.body-text) :global(ul) :global(li.font-sans), :global(div.article-block.body-text) :global(ol) :global(li.font-sans) {
+    font-size: 1rem;
+    line-height: 1.6rem;
+  }
+}
+:global(.paragraph-size.important), :global(div.article-block.body-text) :global(p.important), :global(div.article-block.body-text) :global(ul) :global(li.important), :global(div.article-block.body-text) :global(ol) :global(li.important) {
+  font-size: 1.3rem !important;
+  line-height: 2.1rem !important;
+}
+:global(.paragraph-size.important.font-sans), :global(div.article-block.body-text) :global(p.important.font-sans), :global(div.article-block.body-text) :global(ul) :global(li.important.font-sans), :global(div.article-block.body-text) :global(ol) :global(li.important.font-sans) {
+  font-size: 1.1rem !important;
+  line-height: 1.8rem !important;
+}
+@media (max-width: 540px) {
+  :global(.paragraph-size.important), :global(div.article-block.body-text) :global(p.important), :global(div.article-block.body-text) :global(ul) :global(li.important), :global(div.article-block.body-text) :global(ol) :global(li.important) {
+    font-size: 1.1rem !important;
+    line-height: 1.8rem !important;
+  }
+  :global(.paragraph-size.important.font-sans), :global(div.article-block.body-text) :global(p.important.font-sans), :global(div.article-block.body-text) :global(ul) :global(li.important.font-sans), :global(div.article-block.body-text) :global(ol) :global(li.important.font-sans) {
+    font-size: 1rem !important;
+    line-height: 1.6rem !important;
+  }
+}
+
+:global(.small-size) {
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+}
+@media (max-width: 540px) {
+  :global(.small-size) {
+    font-size: 0.8rem;
+    line-height: 1.1rem;
+  }
+}
+:global(.small-size.important) {
+  font-size: 0.9rem !important;
+  line-height: 1.2rem !important;
+}
+@media (max-width: 540px) {
+  :global(.small-size.important) {
+    font-size: 0.8rem !important;
+    line-height: 1.1rem !important;
+  }
+}
+
+:global(.blockquote-size), :global(div.article-block.body-text) :global(blockquote) :global(p) {
+  font-size: 1.6rem;
+  line-height: 2.1rem;
+}
+@media (max-width: 540px) {
+  :global(.blockquote-size), :global(div.article-block.body-text) :global(blockquote) :global(p) {
+    font-size: 1.3rem;
+    line-height: 1.9rem;
+  }
+}
+:global(.blockquote-size.important), :global(div.article-block.body-text) :global(blockquote) :global(p.important) {
+  font-size: 1.6rem !important;
+  line-height: 2rem !important;
+}
+@media (max-width: 540px) {
+  :global(.blockquote-size.important), :global(div.article-block.body-text) :global(blockquote) :global(p.important) {
+    font-size: 1.3rem !important;
+    line-height: 1.8rem !important;
+  }
+}
+
+:global(div.article-block.body-text) :global(h2),
+:global(div.article-block.body-text) :global(h3),
+:global(div.article-block.body-text) :global(h4),
+:global(div.article-block.body-text) :global(h5),
+:global(div.article-block.body-text) :global(h6),
+:global(div.article-block.body-text) :global(p),
+:global(div.article-block.body-text) :global(li),
+:global(div.article-block.body-text) :global(blockquote) {
+  color: var(--theme-colour-text-primary, #404040);
+}
+:global(div.article-block.body-text) :global(p),
+:global(div.article-block.body-text) :global(ul) :global(li),
+:global(div.article-block.body-text) :global(ul) :global(li) :global(p),
+:global(div.article-block.body-text) :global(ol) :global(li),
+:global(div.article-block.body-text) :global(ol) :global(li) :global(p) {
+  -webkit-font-smoothing: antialiased;
+  font-family: var(--theme-font-family-body, var(--theme-font-family-serif, "freight-book", serif));
+  color: var(--theme-colour-text-primary, #404040);
+}
+:global(div.article-block.body-text) :global(p) :global(a),
+:global(div.article-block.body-text) :global(ul) :global(li) :global(a),
+:global(div.article-block.body-text) :global(ul) :global(li) :global(p) :global(a),
+:global(div.article-block.body-text) :global(ol) :global(li) :global(a),
+:global(div.article-block.body-text) :global(ol) :global(li) :global(p) :global(a) {
+  color: currentColor;
+  background-size: 1px 1px;
+  background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" style="stroke: currentColor; opacity: 0.8;" /></svg>');
+  background-position: 0 1.3rem;
+  background-repeat: repeat-x;
+  text-decoration: none;
+  text-shadow: 1px 1px var(--theme-colour-background, #ffffff), 1px -1px var(--theme-colour-background, #ffffff), -1px 1px var(--theme-colour-background, #ffffff), -1px -1px var(--theme-colour-background, #ffffff);
+}
+@media (max-width: 540px) {
+  :global(div.article-block.body-text) :global(p) :global(a),
+:global(div.article-block.body-text) :global(ul) :global(li) :global(a),
+:global(div.article-block.body-text) :global(ul) :global(li) :global(p) :global(a),
+:global(div.article-block.body-text) :global(ol) :global(li) :global(a),
+:global(div.article-block.body-text) :global(ol) :global(li) :global(p) :global(a) {
+    background-position: 0 1.1rem;
+  }
+}
+:global(div.article-block.body-text) :global(p) :global(a:hover),
+:global(div.article-block.body-text) :global(ul) :global(li) :global(a:hover),
+:global(div.article-block.body-text) :global(ul) :global(li) :global(p) :global(a:hover),
+:global(div.article-block.body-text) :global(ol) :global(li) :global(a:hover),
+:global(div.article-block.body-text) :global(ol) :global(li) :global(p) :global(a:hover) {
+  text-decoration: none;
+}
+:global(div.article-block.body-text) :global(h2) {
+  margin: 4rem 0 2rem;
+  text-align: center;
+  font-weight: 600;
+}
+:global(div.article-block.body-text) :global(h2::after) {
+  display: block;
+  content: "";
+  background: var(--theme-colour-text-secondary, #666666);
+  height: 3px;
+  width: 100px;
+  margin: 10px auto 2rem;
+}
+:global(div.article-block.body-text) :global(ul) {
+  padding-left: 1.75rem;
+  list-style-type: square;
+}
+:global(div.article-block.body-text) :global(p) + :global(ul) {
+  margin-top: -0.75rem;
+}
+:global(div.article-block.body-text) :global(blockquote) {
+  margin: 30px 0;
+  border-left: 2px solid var(--theme-colour-text-secondary, #666666);
+  padding-left: 15px;
+}
+:global(div.article-block.body-text) :global(blockquote) :global(p) {
+  font-family: var(--theme-font-family-body, var(--theme-font-family-serif, "freight-book", serif));
+}
+:global(div.article-block.body-text) :global(blockquote) :global(blockquote) {
+  border: 0;
+  padding: 0;
+  margin: -5px 0 0;
+}
+:global(div.article-block.body-text) :global(blockquote) :global(blockquote) :global(p) {
+  font-family: var(--theme-font-family-body, var(--theme-font-family-serif, "freight-book", serif));
+  color: var(--theme-colour-text-primary, #404040);
+  font-size: 1rem;
+}
+@media (max-width: 540px) {
+  :global(div.article-block.body-text) :global(blockquote) :global(blockquote) :global(p) {
+    font-size: 0.9rem;
+  }
+}
+:global(div.article-block.body-text) :global(blockquote) :global(blockquote) :global(blockquote) {
+  display: none;
+}
+:global(div.article-block.body-text.font-sans) {
+  font-family: var(--theme-font-family-sans-serif, var(--theme-font-family-sans-serif, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif)) !important;
+}</style>

package/dist/components/DatawrapperChart/DatawrapperChart.svelte

@@ -0,0 +1,105 @@
+<script>import { onMount, onDestroy } from 'svelte';
+import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+/**
+ * Title of the graphic
+ * @type {string}
+ */
+export let title = null;
+/**
+ * Description of the graphic, passed in as a markdown string.
+ * @type {string}
+ */
+export let description = null;
+/**
+ * iframe title
+ * @required
+ */
+export let frameTitle = '';
+/**
+ * Notes to the graphic, passed in as a markdown string.
+ * @type {string}
+ */
+export let notes = null;
+/**
+ * iframe aria label
+ * @required
+ */
+export let ariaLabel = '';
+/** iframe id */
+export let id = '';
+/**
+ * Datawrapper embed URL
+ * @required
+ */
+export let src;
+/** iframe scrolling option */
+export let scrolling = 'no';
+/** Width of the chart within the text well. */
+export let width = 'normal'; // options: wide, wider, widest, fluid
+/**
+ * Set a different width for the text within the text well, for example,
+ * "normal" to keep the title, description and notes inline with the rest
+ * of the text well. Can't ever be wider than `width`.
+ * @type {string}
+ */
+export let textWidth = null;
+let frameElement;
+$: frameFiller = (e) => {
+    /* eslint-disable */
+    if (void 0 !== e.data['datawrapper-height']) {
+        const t = [frameElement];
+        for (const a in e.data['datawrapper-height']) {
+            for (let r = 0; r < t.length; r++) {
+                if (t[r].contentWindow === e.source) {
+                    t[r].style.height = e.data['datawrapper-height'][a] + 'px';
+                }
+            }
+        }
+    }
+    /* eslint-enable */
+};
+onMount(() => {
+    if (typeof window !== 'undefined') {
+        window.addEventListener('message', frameFiller);
+    }
+});
+onDestroy(() => {
+    if (typeof window !== 'undefined') {
+        window.removeEventListener('message', frameFiller);
+    }
+});
+</script>
+
+<GraphicBlock
+  width="{width}"
+  textWidth="{textWidth}"
+  title="{title}"
+  description="{description}"
+  notes="{notes}"
+>
+  {#if $$slots.title}
+    <!-- Custom headline and chatter slot -->
+    <slot name="title" />
+  {/if}
+
+  <div class="datawrapper-chart">
+    <iframe
+      bind:this="{frameElement}"
+      title="{frameTitle}"
+      aria-label="{ariaLabel}"
+      id="{id}"
+      src="{src}"
+      scrolling="{scrolling}"
+      frameborder="0"
+      style="width: 0; min-width: 100% !important; border: none;"></iframe>
+  </div>
+
+  {#if $$slots.notes}
+    <!-- Custom notes and source slot -->
+    <slot name="notes" />
+  {/if}
+</GraphicBlock>
+
+<style>.datawrapper-chart {
+  margin: auto;
+}</style>

package/dist/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte

@@ -0,0 +1,26 @@
+<script>export let dev = false;
+import Fa from 'svelte-fa/src/fa.svelte';
+import { faWindowRestore } from '@fortawesome/free-regular-svg-icons';
+</script>
+
+{#if dev}
+  <div>
+    <a rel="external" href="/embed-previewer">
+      <Fa icon={faWindowRestore} />
+    </a>
+  </div>
+{/if}
+
+
+<style>div {
+  position: fixed;
+  bottom: 5px;
+  left: 10px;
+  font-size: 18px;
+}
+div a {
+  color: #ccc;
+}
+div a:hover {
+  color: #666;
+}</style>

package/dist/components/FeaturePhoto/FeaturePhoto.svelte

@@ -0,0 +1,113 @@
+<script>import { onMount } from 'svelte';
+import Block from '../Block/Block.svelte';
+/**
+ * Photo src
+ * @type {string}
+ * @required
+ */
+export let src;
+/**
+ * Photo altText
+ * @type {string}
+ * @required
+ */
+export let altText;
+/**
+ * Caption below the photo
+ * @type {string}
+ */
+export let caption;
+/**
+ * Height of the photo placeholder when lazy-loading
+ */
+export let height = 100;
+/**
+ * Width of the container, one of: normal, wide, wider, widest or fluid
+ */
+export let width = 'normal';
+/**
+ * Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ */
+export let lazy = false;
+/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading. */
+export let top = 0;
+/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading. */
+export let bottom = 0;
+/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` when lazy loading. */
+export let left = 0;
+/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` when lazy loading. */
+export let right = 0;
+let intersecting = false;
+let container;
+const intersectable = typeof IntersectionObserver !== 'undefined';
+onMount(() => {
+    if (!lazy)
+        return;
+    if (intersectable) {
+        const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+        const observer = new IntersectionObserver((entries) => {
+            intersecting = entries[0].isIntersecting;
+            if (intersecting) {
+                observer.unobserve(container);
+            }
+        }, {
+            rootMargin,
+        });
+        observer.observe(container);
+        return () => observer.unobserve(container);
+    }
+});
+</script>
+
+<Block width="{width}" cls="photo">
+  <figure
+    bind:this="{container}"
+    aria-label="media"
+    class:fluid="{width === 'fluid'}"
+  >
+    {#if !lazy || (intersectable && intersecting)}
+      <img src="{src}" alt="{altText}" />
+    {:else}
+      <div class="placeholder" height="{`${height}px`}"></div>
+    {/if}
+    {#if caption}
+      <figcaption>{caption}</figcaption>
+    {/if}
+    {#if !altText}
+      <div class="alt-warning">altText</div>
+    {/if}
+  </figure>
+</Block>
+
+<style>figure {
+  width: 100%;
+  position: relative;
+}
+figure img {
+  width: 100%;
+  margin: 0;
+}
+figure .placeholder {
+  background-color: #ccc;
+  width: 100%;
+}
+figure div.alt-warning {
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  padding: 5px 10px;
+  background-color: red;
+  color: white;
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 14px;
+  line-height: 16px;
+}
+figure figcaption {
+  font-weight: 400;
+  font-size: 0.8rem;
+  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  color: var(--theme-colour-text-secondary, #666666);
+}
+figure.fluid figcaption {
+  padding-left: 15px;
+}</style>

package/dist/components/Framer/Framer.svelte

@@ -0,0 +1,136 @@
+<script>
+  import Fa from 'svelte-fa/src/fa.svelte';
+  import { faDesktop, faLink } from '@fortawesome/free-solid-svg-icons';
+  import { onMount, afterUpdate } from 'svelte';
+  import pym from 'pym.js';
+  import urljoin from 'proper-url-join';
+  import Resizer from './Resizer/index.svelte';
+  import { width } from './stores.js';
+  import getUniqNames from './uniqNames.js';
+
+  export let embeds;
+  export let breakpoints = [330, 510, 660, 930, 1200];
+  export let minFrameWidth = 320;
+  export let maxFrameWidth = 1200;
+
+  let activeEmbed = embeds[0];
+
+  $: embedTitles = getUniqNames(embeds);
+
+  // @ts-ignore
+  let pymParent;
+
+  const reframe = (embed) => {
+    pymParent = new pym.Parent(
+      'frame-parent',
+      /^http/.test(embed)
+        ? embed
+        : urljoin(window.location.origin, embed, { trailingSlash: true })
+    );
+  };
+
+  onMount(() => {
+    reframe(activeEmbed);
+  });
+
+  afterUpdate(() => {
+    reframe(activeEmbed);
+  });
+</script>
+
+<div class="container">
+  <header>
+    <img
+      src="https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-dark.svg"
+      alt=""
+    />
+  </header>
+
+  <nav>
+    {#each embeds as embed, i}
+      <button
+        on:click="{() => {
+          activeEmbed = embed;
+        }}"
+        class:active="{activeEmbed === embed}"
+      >
+        {embedTitles[i]}
+        <a rel="external" target="_blank" href="{embed}" title="{embed}">
+          <Fa icon="{faLink}" />
+        </a>
+      </button>
+    {/each}
+  </nav>
+
+  <div id="frame-parent" style="width:{$width}px;"></div>
+</div>
+
+<div id="home-link">
+  <a rel="external" href="./../">
+    <Fa icon="{faDesktop}" />
+  </a>
+</div>
+
+<Resizer
+  breakpoints="{breakpoints}"
+  minFrameWidth="{minFrameWidth}"
+  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;
+}
+
+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;
+}
+nav button:focus {
+  outline: none;
+}
+nav button a {
+  color: #bbb;
+  font-size: 12px;
+}
+nav button a:hover {
+  color: #666;
+}
+
+#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>