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

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

@@ -0,0 +1,223 @@
+<script>
+  import { faDesktop, faMobileAlt } from '@fortawesome/free-solid-svg-icons';
+  import Fa from 'svelte-fa/src/fa.svelte';
+  import { width } from './../stores.js';
+
+  export let breakpoints = [330, 510, 660, 930, 1200];
+  export let maxFrameWidth = 1200;
+  export let minFrameWidth = 320;
+
+  let container;
+
+  const sliderWidth = 90;
+  let windowInnerWidth = 1200;
+  $: minWidth = minFrameWidth;
+  $: maxWidth = Math.min(windowInnerWidth - 70, maxFrameWidth);
+  $: pixelRange = maxWidth - minWidth;
+  $: if ($width > maxWidth) width.set(maxWidth);
+  $: offset = ($width - minWidth) / pixelRange;
+
+  let sliding = false;
+  let isFocused = false;
+
+  const roundToNearestFive = (d) => Math.ceil(d / 5) * 5;
+  const getPx = () => Math.round(pixelRange * offset + minWidth);
+
+  let pixelLabel = null;
+
+  const move = (e) => {
+    if (!sliding || !container) return;
+    const { left } = container.getBoundingClientRect();
+    offset = Math.min(Math.max(0, e.pageX - left), sliderWidth) / sliderWidth;
+    pixelLabel = roundToNearestFive(getPx());
+  };
+  const handleKeyDown = (e) => {
+    if (!isFocused) return;
+    const { keyCode } = e;
+    const pixelWidth = sliderWidth / pixelRange;
+    // right
+    if (keyCode === 39) {
+      offset = Math.min(1, offset + pixelWidth / sliderWidth);
+      // left
+    } else if (keyCode === 37) {
+      offset = Math.max(0, offset - pixelWidth / sliderWidth);
+    }
+    width.set(getPx());
+  };
+  const start = (e) => {
+    sliding = true;
+    move(e);
+  };
+  const end = () => {
+    sliding = false;
+    pixelLabel = null;
+    width.set(roundToNearestFive(getPx()));
+  };
+  const onFocus = () => {
+    isFocused = true;
+  };
+  const onBlur = () => {
+    isFocused = false;
+  };
+  const increment = () => {
+    const availableBreakpoints = breakpoints
+      .filter((b) => b <= maxWidth)
+      .filter((b) => b > $width);
+    if (availableBreakpoints.length === 0) {
+      width.set(maxWidth);
+    } else {
+      width.set(availableBreakpoints[0]);
+    }
+  };
+  const decrement = () => {
+    const availableBreakpoints = breakpoints.filter((b) => b < $width);
+    if (availableBreakpoints.length === 0) {
+      width.set(minWidth);
+    } else {
+      width.set(availableBreakpoints.slice(-1)[0]);
+    }
+  };
+</script>
+
+<svelte:window
+  on:mousemove="{move}"
+  on:mouseup="{end}"
+  on:keydown="{handleKeyDown}"
+  bind:innerWidth="{windowInnerWidth}"
+/>
+
+<div id="resizer">
+  <div class="slider">
+    <div class="label" style="{`opacity: ${sliding || isFocused ? 1 : 0};`}">
+      {pixelLabel || $width}px
+    </div>
+    <button
+      class="icon left"
+      disabled="{$width === minWidth}"
+      on:click="{decrement}"
+      on:focus="{onFocus}"
+      on:mouseover="{onFocus}"
+      on:mouseleave="{onBlur}"
+    >
+      <Fa icon="{faMobileAlt}" fw />
+    </button>
+    <div class="slider-container" bind:this="{container}">
+      <div class="track"></div>
+      <div
+        class="handle"
+        tabindex="0"
+        style="left: calc({offset * 100}% - 5px);"
+        on:mousedown="{start}"
+        on:focus="{onFocus}"
+        on:blur="{onBlur}"
+      ></div>
+    </div>
+    <button
+      class="icon right"
+      disabled="{$width === maxWidth}"
+      on:click="{increment}"
+      on:focus="{onFocus}"
+      on:mouseover="{onFocus}"
+      on:mouseleave="{onBlur}"
+    >
+      <Fa icon="{faDesktop}" fw />
+    </button>
+  </div>
+</div>
+
+<style>#resizer {
+  width: 250px;
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+  padding: 15px;
+}
+#resizer .slider {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+#resizer .slider > div,
+#resizer .slider button {
+  display: inline-block;
+}
+#resizer div.label {
+  font-family: monospace;
+  font-size: 13px;
+  line-height: 13px;
+  text-align: center;
+  transition: opacity 0.2s;
+  color: grey;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-right: 5px;
+}
+#resizer button.icon {
+  font-size: 14px;
+  line-height: 14px;
+  color: #bbb;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+}
+#resizer button.icon:active, #resizer button.icon:focus {
+  outline: none;
+}
+#resizer button.icon:hover {
+  color: #999;
+}
+#resizer button.icon:active {
+  transform: translate(1px, 1px);
+}
+#resizer button.icon[disabled] {
+  color: #ccc;
+  cursor: default;
+}
+#resizer button.icon[disabled]:hover {
+  color: #ccc;
+}
+#resizer button.icon[disabled]:active {
+  transform: translate(0px, 0px);
+}
+#resizer button.icon.left {
+  text-align: right;
+  padding-right: 3px;
+}
+#resizer button.icon.right {
+  padding-left: 6px;
+  text-align: left;
+}
+#resizer div.slider-container {
+  width: 90px;
+  height: 20px;
+  position: relative;
+}
+#resizer div.slider-container div.track {
+  height: 4px;
+  width: 100%;
+  position: absolute;
+  border-radius: 2px;
+  top: calc(50% - 2px);
+  background-color: lightgrey;
+}
+
+.handle {
+  z-index: 30;
+  width: 10px;
+  height: 20px;
+  cursor: ew-resize;
+  background: #bbb;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  position: absolute;
+  border-radius: 4px;
+  border: 1px solid grey;
+  top: calc(50% - 10px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+.handle:active, .handle:focus {
+  outline: none;
+}</style>

package/dist/components/Framer/stores.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const width = writable(660);

package/dist/components/Framer/uniqNames.js

@@ -0,0 +1,54 @@
+export default (embeds) => {
+  const nakedEmbeds = embeds
+    .map((e) => e.replace(/\?.+$/, ''))
+    .map((e) => e.replace(/index\.html$/, ''))
+    .map((e) => e.replace(/^http[s]*:\/\/[\w.]+\.com/, ''));
+
+  // If just one, get the last path part
+  if (nakedEmbeds.length === 1) {
+    return [
+      nakedEmbeds[0]
+        .split('/')
+        .filter((d) => d)
+        .slice(-1)[0],
+    ];
+  }
+
+  // If many, test each path part for unique-ness
+  const test = nakedEmbeds[0];
+  let replacementForward = 0;
+  for (const i in test.split('/')) {
+    const pathPart = test.split('/')[i];
+    const notUniq = nakedEmbeds.every((e) => e.split('/')[i] === pathPart);
+    if (notUniq) {
+      replacementForward += 1;
+    } else {
+      break;
+    }
+  }
+
+  if (replacementForward === test.split('/').length) return nakedEmbeds;
+
+  let replacementBackward = 0;
+  for (const i in test.split('/').reverse()) {
+    const pathPart = test.split('/').reverse()[i];
+    const notUniq = nakedEmbeds.every(
+      (e) => e.split('/').reverse()[i] === pathPart
+    );
+    if (notUniq) {
+      replacementBackward += 1;
+    } else {
+      break;
+    }
+  }
+
+  return nakedEmbeds.map((e) => {
+    if (replacementBackward > 0) {
+      return e
+        .split('/')
+        .slice(replacementForward, replacementBackward * -1)
+        .join('/');
+    }
+    return e.split('/').slice(replacementForward).join('/');
+  });
+};

package/dist/components/GraphicBlock/AriaHidden.svelte

@@ -0,0 +1,13 @@
+<script>/**
+ * Whether to wrap the graphic with an aria hidden tag.
+ */
+export let hidden = false;
+</script>
+
+{#if hidden}
+  <div aria-hidden="true">
+    <slot></slot>
+  </div>
+{:else}
+  <slot></slot>
+{/if}

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -0,0 +1,269 @@
+<script>/**
+ * Width of the component within the text well.
+ * @type {string}
+ */
+export let width = 'normal';
+/**
+ * Add an id to the block tag to target it with custom CSS.
+ * @type {string}
+ */
+export let id = '';
+/**
+ * Add extra classes to the block tag to target it with custom CSS.
+ * @type {string}
+ */
+export let cls = '';
+/** Snap block to column widths, rather than fluidly resizing them. */
+export let snap = false;
+/**
+ * ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block
+ * @type {string}
+ */
+export let role = null;
+/**
+ * Notes to the graphic, passed in as a markdown string.
+ * @type {string}
+ */
+export let notes = null;
+/**
+ * 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;
+/**
+ * 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;
+/**
+ * ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block
+ * @type {string}
+ */
+export let ariaLabel = 'chart';
+/**
+ * ARIA description, passed in as a markdown string.
+ * @type {string}
+ */
+export let ariaDescription = null;
+import AriaHidden from './AriaHidden.svelte';
+import TextBlock from './TextBlock.svelte';
+import Block from '../Block/Block.svelte';
+import PaddingReset from '../PaddingReset/index.svelte';
+import { marked } from 'marked';
+</script>
+
+<Block
+  id="{id}"
+  snap="{snap}"
+  role="{role}"
+  width="{width}"
+  ariaLabel="{ariaLabel}"
+  cls="graphic {cls}"
+>
+  <div>
+    {#if $$slots.title}
+      <PaddingReset width="{width}">
+        <TextBlock width="{textWidth}">
+          <!-- Custom title content -->
+          <slot name="title" />
+        </TextBlock>
+      </PaddingReset>
+    {:else if title}
+      <PaddingReset width="{width}">
+        <TextBlock width="{textWidth}">
+          <h3>{title}</h3>
+          {#if description}
+            {@html marked(description)}
+          {/if}
+        </TextBlock>
+      </PaddingReset>
+    {/if}
+    <AriaHidden hidden="{!!$$slots.aria || !!ariaDescription}">
+      <!-- Graphic content -->
+      <slot />
+    </AriaHidden>
+    {#if $$slots.aria || ariaDescription}
+      <div class="visually-hidden">
+        {#if $$slots.aria}
+          <!-- Custom ARIA markup -->
+          <slot name="aria" />
+        {:else}
+          {@html marked(ariaDescription)}
+        {/if}
+      </div>
+    {/if}
+    {#if $$slots.notes}
+      <PaddingReset width="{width}">
+        <TextBlock width="{textWidth}">
+          <!-- Custom notes content -->
+          <slot name="notes" />
+        </TextBlock>
+      </PaddingReset>
+    {:else if notes}
+      <PaddingReset width="{width}">
+        <TextBlock width="{textWidth}">
+          <aside>
+            {@html marked(notes)}
+          </aside>
+        </TextBlock>
+      </PaddingReset>
+    {/if}
+  </div>
+</Block>
+
+<!-- svelte-ignore css-unused-selector -->
+<style>.paragraph-size {
+  font-size: 1.3rem;
+  line-height: 2.1rem;
+}
+.paragraph-size.font-sans {
+  font-size: 1.1rem;
+  line-height: 1.75rem;
+}
+@media (max-width: 540px) {
+  .paragraph-size {
+    font-size: 1.1rem;
+    line-height: 1.8rem;
+  }
+  .paragraph-size.font-sans {
+    font-size: 1rem;
+    line-height: 1.6rem;
+  }
+}
+.paragraph-size.important {
+  font-size: 1.3rem !important;
+  line-height: 2.1rem !important;
+}
+.paragraph-size.important.font-sans {
+  font-size: 1.1rem !important;
+  line-height: 1.8rem !important;
+}
+@media (max-width: 540px) {
+  .paragraph-size.important {
+    font-size: 1.1rem !important;
+    line-height: 1.8rem !important;
+  }
+  .paragraph-size.important.font-sans {
+    font-size: 1rem !important;
+    line-height: 1.6rem !important;
+  }
+}
+
+.small-size {
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+}
+@media (max-width: 540px) {
+  .small-size {
+    font-size: 0.8rem;
+    line-height: 1.1rem;
+  }
+}
+.small-size.important {
+  font-size: 0.9rem !important;
+  line-height: 1.2rem !important;
+}
+@media (max-width: 540px) {
+  .small-size.important {
+    font-size: 0.8rem !important;
+    line-height: 1.1rem !important;
+  }
+}
+
+.blockquote-size {
+  font-size: 1.6rem;
+  line-height: 2.1rem;
+}
+@media (max-width: 540px) {
+  .blockquote-size {
+    font-size: 1.3rem;
+    line-height: 1.9rem;
+  }
+}
+.blockquote-size.important {
+  font-size: 1.6rem !important;
+  line-height: 2rem !important;
+}
+@media (max-width: 540px) {
+  .blockquote-size.important {
+    font-size: 1.3rem !important;
+    line-height: 1.8rem !important;
+  }
+}
+
+div :global(h3) {
+  margin-bottom: 0.5rem;
+  color: var(--theme-colour-text-primary, #404040);
+}
+div :global(p) {
+  -webkit-font-smoothing: antialiased;
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-size: 1.1rem;
+  line-height: 1.5rem;
+  color: var(--theme-colour-text-primary, #404040);
+  margin-bottom: 1rem;
+}
+div :global(p:last-of-type) {
+  margin-bottom: 1rem;
+}
+@media (max-width: 540px) {
+  div :global(p) {
+    font-size: 1rem;
+    line-height: 1.35rem;
+  }
+}
+div :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" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
+  background-position: 0 1.1rem;
+  background-repeat: repeat-x;
+  text-decoration: none;
+}
+div :global(p) :global(a:hover) {
+  text-decoration: none;
+}
+div :global(aside) :global(p) {
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  margin-bottom: 0;
+  color: var(--theme-colour-text-secondary, #666666);
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+}
+div :global(aside) :global(p:last-of-type) {
+  margin-bottom: 0;
+}
+@media (max-width: 540px) {
+  div :global(aside) :global(p) {
+    font-size: 0.8rem;
+    line-height: 1.1rem;
+  }
+}
+div :global(aside) :global(p) :global(a) {
+  color: currentColor;
+  text-decoration: underline;
+}
+div :global(aside) :global(p) :global(a:hover) {
+  text-decoration: underline;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+          clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  white-space: nowrap !important;
+  border: 0 !important;
+}</style>

package/dist/components/GraphicBlock/TextBlock.svelte

@@ -0,0 +1,12 @@
+<script>/** Width of the component within the text well. */
+export let width = null;
+import Block from '../Block/Block.svelte';
+</script>
+
+{#if width}
+  <Block width="{width}" cls="m-0">
+    <slot />
+  </Block>
+{:else}
+  <slot />
+{/if}

package/dist/components/Headline/Headline.svelte

@@ -0,0 +1,109 @@
+<script>/**
+ * Headline
+ */
+export let hed = 'Reuters Graphics Interactive';
+/**
+ * Dek
+ */
+export let dek = null;
+/**
+ * Section title
+ */
+export let section = null;
+import Block from '../Block/Block.svelte';
+</script>
+
+<Block cls="mb-1">
+  <header class="headline">
+    {#if $$slots.crown}
+      <div class="crown-container">
+        <!-- Crown named slot -->
+        <slot name="crown" />
+      </div>
+    {/if}
+    <div class="title">
+      {#if section}
+        <p class="{'section-title'}">{section}</p>
+      {/if}
+      {#if $$slots.hed}
+        <!-- Headline override named slot -->
+        <slot name="hed" />
+      {:else}
+        <h1>{hed}</h1>
+      {/if}
+      {#if dek}
+        <p>{dek}</p>
+      {/if}
+    </div>
+    {#if $$slots.byline || $$slots.dateline}
+      <aside class="article-metadata" class:pt-1="{!dek}">
+        {#if $$slots.byline}
+          <div class="byline-container">
+            <div class="byline">
+              <!-- Byline named slot -->
+              <slot name="byline" />
+            </div>
+          </div>
+        {/if}
+        {#if $$slots.dateline}
+          <div class="dateline-container">
+            <div class="published">
+              <!-- Dateline named slot -->
+              <slot name="dateline" />
+            </div>
+          </div>
+        {/if}
+      </aside>
+    {/if}
+  </header>
+</Block>
+
+<style>header.headline {
+  text-align: center;
+  margin-top: 4rem;
+  margin-bottom: 0;
+  color: var(--theme-colour-text-primary, #404040);
+}
+header.headline :global(h1) {
+  font-size: 4rem;
+  margin: 5px 0;
+  line-height: 1.1;
+  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  color: var(--theme-colour-text-primary, #404040);
+}
+header.headline :global(p) {
+  font-family: var(--theme-font-family-subhed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  color: var(--theme-colour-text-primary, #404040);
+  margin: 0;
+  font-weight: 200;
+}
+header.headline :global(p.section-title) {
+  font-size: 1rem;
+  font-weight: 800;
+  color: var(--theme-colour-accent, #a00000);
+}
+header.headline .article-metadata {
+  padding: 40px 0;
+  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  color: var(--theme-colour-text-primary, #404040);
+  text-align: center;
+}
+header.headline .article-metadata .byline-container {
+  margin-bottom: 2px;
+}
+header.headline .article-metadata .byline :global(a) {
+  color: var(--theme-colour-text-primary, #404040);
+  text-decoration: none;
+}
+header.headline .article-metadata .dateline-container {
+  text-transform: uppercase;
+  color: var(--theme-colour-text-secondary, #666666);
+  font-size: 0.8rem;
+  line-height: 1.2rem;
+  letter-spacing: 0.2px;
+}
+header.headline div.crown-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}</style>