@reuters-graphics/graphics-components 0.0.28 → 0.0.30

package/dist/@types/components/@types/global.d.ts

@@ -7,6 +7,7 @@ export declare type ContainerWidth = 'narrower' | 'narrow' | 'normal' | 'wide' |
  * A step in the Scroller component.
  */
 export interface ScrollerStep {
+    altText?: string;
     /**
      * A background component
      * @required

package/dist/@types/components/SEO/analytics/chartbeat.d.ts

@@ -0,0 +1,2 @@
+declare function _default(authors: any): void;
+export default _default;

package/dist/@types/components/SEO/analytics/index.d.ts

@@ -0,0 +1,3 @@
+export { default as loadGA } from "./ga.js";
+export { default as loadChartbeat } from "./chartbeat.js";
+export { default as loadPublisherTags } from "./publisherTags.js";

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

@@ -11,9 +11,10 @@ declare const __propDef: {
            *
            * Each step object in the array can have:
            *
-           * - `background` A background component **REQUIRED**
+           * - `background` A background component. **REQUIRED**
            * - `backgroundProps` An object of props given to the background component
            * - `foreground` Either a markdown-formatted string or a foreground component **REQUIRED**
+           * - `altText` A string describing the background graphic, which is read aloud after the foreground blurb. You can add it to each step or, if you want to add just one alt text to describe all graphics in the scroll section, add it to just the first step. **RECOMMENDED**
            * - `foregroundProps` An object of props given to the foreground component
            *
            * @required

package/dist/@types/components/Scroller/docProps.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'svelte';
 interface BlockStep {
+    AltText?: string;
     Background: string;
     Text: string;
 }
@@ -27,6 +28,7 @@ export declare const getScrollerPropsFromDoc: (docBlock: Block, aiCharts: AiChar
             assetsPath: string;
         };
         foreground: string;
+        altText: string;
     }[];
 };
 export {};

package/dist/components/SEO/SEO.svelte

@@ -1,6 +1,5 @@
 <!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SEO--default) -->
-<script>import analytics from './analytics';
-import publisherTags from './publisherTags';
+<script>import { loadChartbeat, loadGA, loadPublisherTags, } from './analytics/index.js';
 /**
  * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
  * is globally available as `import.meta.env.BASE_URL`.
@@ -84,8 +83,9 @@ $: canonicalUrl = origin + pageUrl.pathname;
 // Only fire analytics on prod sites
 $: {
     if (typeof window !== 'undefined' && includeAnalytics) {
-        analytics(canonicalUrl, seoTitle);
-        publisherTags();
+        loadChartbeat(authors);
+        loadGA(canonicalUrl, seoTitle);
+        loadPublisherTags();
     }
 }
 const orgLdJson = {

package/dist/components/SEO/analytics/chartbeat.js

@@ -0,0 +1,33 @@
+/* eslint-disable */
+const attachScript = () => {
+  // If script is already attached, skip
+  if (
+    document.querySelector(
+      'script[src="//static.chartbeat.com/js/chartbeat.js"]'
+    )
+  )
+    return;
+  // ... else attach it.
+  const e = document.createElement('script');
+  const n = document.getElementsByTagName('script')[0];
+  e.type = 'text/javascript';
+  e.async = true;
+  e.src = '//static.chartbeat.com/js/chartbeat.js';
+  n.parentNode.insertBefore(e, n);
+};
+
+export default (authors) => {
+  // @ts-ignore
+  const _sf_async_config = (window._sf_async_config =
+    window._sf_async_config || {});
+  _sf_async_config.uid = 52639;
+  _sf_async_config.domain = 'reuters.com';
+  _sf_async_config.flickerControl = false;
+  _sf_async_config.useCanonical = true;
+  _sf_async_config.useCanonicalDomain = true;
+  _sf_async_config.sections = 'Graphics';
+  _sf_async_config.authors = authors.map((a) => a.name).join(',');
+  try {
+    attachScript();
+  } catch (e) {}
+};

package/dist/components/SEO/analytics/ga.js

@@ -0,0 +1,40 @@
+/* eslint-disable */
+const attachScript = function (i, s, o, g, r, a, m) {
+  i.GoogleAnalyticsObject = r;
+  (i[r] =
+    i[r] ||
+    function () {
+      (i[r].q = i[r].q || []).push(arguments);
+    }),
+    (i[r].l = Date.now());
+  (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+  a.async = 1;
+  a.src = g;
+  m.parentNode.insertBefore(a, m);
+};
+/* eslint-enable */
+
+export default (page, title) => {
+  try {
+    // @ts-ignore
+    if (!window.ga) {
+      attachScript(
+        window,
+        document,
+        'script',
+        'https://www.google-analytics.com/analytics.js',
+        'ga'
+      );
+
+      // @ts-ignore
+      window.ga('create', 'UA-41619329-3', { cookieDomain: 'auto' });
+      // @ts-ignore
+      window.ga('require', 'linkid', 'linkid.js');
+    }
+    // @ts-ignore
+    window.ga('send', 'pageview', {
+      page,
+      title,
+    });
+  } catch (e) {}
+};

package/dist/components/SEO/analytics/index.js

@@ -0,0 +1,3 @@
+export { default as loadGA } from './ga.js';
+export { default as loadChartbeat } from './chartbeat.js';
+export { default as loadPublisherTags } from './publisherTags.js';

package/dist/components/Scroller/Embedded/Background.svelte

@@ -4,8 +4,8 @@ export let index;
 import Block from '../../Block/Block.svelte';
 </script>
 
-<Block width={backgroundWidth} cls="background-container step-{index + 1}">
-  <div class="embedded-background step-{index + 1}">
+<Block width="{backgroundWidth}" cls="background-container step-{index + 1}">
+  <div class="embedded-background step-{index + 1}" aria-hidden="true">
     <svelte:component
       this="{step.background}"
       {...step.backgroundProps || {}}

package/dist/components/Scroller/Embedded/Foreground.svelte

@@ -7,11 +7,23 @@ import Block from '../../Block/Block.svelte';
 {#if step.foreground === '' || !step.foreground}
   <!-- Empty foreground -->
   <div class="empty-step-foreground step-{index + 1}"></div>
+
+  {#if typeof step.altText === 'string'}
+    <div class="background-alt-text visually-hidden">
+      {@html marked.parse(step.altText)}
+    </div>
+  {/if}
 {:else if typeof step.foreground === 'string'}
   <Block cls="body-text step-{index + 1}">
     <div class="embedded-foreground step-{index + 1}">
       {@html marked.parse(step.foreground)}
     </div>
+
+    {#if typeof step.altText === 'string'}
+      <div class="background-alt-text visually-hidden">
+        {@html marked.parse(step.altText)}
+      </div>
+    {/if}
   </Block>
 {:else}
   <div class="embedded-foreground step-{index + 1}">
@@ -200,4 +212,18 @@ div.embedded-foreground :global(.font-sans) {
 }
 div.embedded-foreground :global(p:last-child) {
   margin-bottom: 0;
+}
+
+.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/Scroller/Foreground.svelte

@@ -7,6 +7,11 @@ import { marked } from 'marked';
     {#if step.foreground === '' || !step.foreground}
       <!-- Empty foreground -->
       <div class="empty-step-foreground"></div>
+      {#if typeof step.altText === 'string'}
+        <div class="background-alt-text visually-hidden">
+          {@html marked.parse(step.altText)}
+        </div>
+      {/if}
     {:else}
       <div class="step-foreground">
         {#if typeof step.foreground === 'string'}
@@ -18,11 +23,95 @@ import { marked } from 'marked';
           />
         {/if}
       </div>
+      {#if typeof step.altText === 'string'}
+        <div class="background-alt-text visually-hidden">
+          {@html marked.parse(step.altText)}
+        </div>
+      {/if}
     {/if}
   </div>
 {/each}
 
-<style>div.step-foreground-container {
+<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.step-foreground-container {
   height: 100vh;
   width: initial;
   max-width: initial;
@@ -39,4 +128,18 @@ div.step-foreground-container .step-foreground {
 }
 div.step-foreground-container .step-foreground :global(p:last-child) {
   margin-bottom: 0;
+}
+
+.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/Scroller/Scroller.svelte

@@ -9,9 +9,10 @@ export let id = '';
  *
  * Each step object in the array can have:
  *
- * - `background` A background component **REQUIRED**
+ * - `background` A background component. **REQUIRED**
  * - `backgroundProps` An object of props given to the background component
  * - `foreground` Either a markdown-formatted string or a foreground component **REQUIRED**
+ * - `altText` A string describing the background graphic, which is read aloud after the foreground blurb. You can add it to each step or, if you want to add just one alt text to describe all graphics in the scroll section, add it to just the first step. **RECOMMENDED**
  * - `foregroundProps` An object of props given to the foreground component
  *
  * @required
@@ -99,6 +100,7 @@ let progress;
         class="background"
         class:right="{foregroundPosition === 'left opposite'}"
         class:left="{foregroundPosition === 'right opposite'}"
+        aria-hidden="true"
       >
         <div class="scroller-graphic-well">
           <Block

package/dist/components/Scroller/docProps.js

@@ -9,6 +9,7 @@ export const getScrollerPropsFromDoc = (docBlock, aiCharts, assetsPath = '') =>
             background: aiCharts[step.Background],
             backgroundProps: { assetsPath },
             foreground: step.Text,
+            altText: step.AltText,
         })),
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -130,8 +130,10 @@
     "./components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte": "./dist/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte",
     "./components/ReutersLogo/ReutersLogo.svelte": "./dist/components/ReutersLogo/ReutersLogo.svelte",
     "./components/SEO/SEO.svelte": "./dist/components/SEO/SEO.svelte",
-    "./components/SEO/analytics": "./dist/components/SEO/analytics.js",
-    "./components/SEO/publisherTags": "./dist/components/SEO/publisherTags.js",
+    "./components/SEO/analytics/chartbeat": "./dist/components/SEO/analytics/chartbeat.js",
+    "./components/SEO/analytics/ga": "./dist/components/SEO/analytics/ga.js",
+    "./components/SEO/analytics": "./dist/components/SEO/analytics/index.js",
+    "./components/SEO/analytics/publisherTags": "./dist/components/SEO/analytics/publisherTags.js",
     "./components/Scroller/Background.svelte": "./dist/components/Scroller/Background.svelte",
     "./components/Scroller/Embedded/Background.svelte": "./dist/components/Scroller/Embedded/Background.svelte",
     "./components/Scroller/Embedded/Foreground.svelte": "./dist/components/Scroller/Embedded/Foreground.svelte",

package/dist/components/SEO/analytics.js

@@ -1,333 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-const attachScript = function (i, s, o, g, r, a, m) {
-  i.GoogleAnalyticsObject = r;
-  (i[r] =
-    i[r] ||
-    function () {
-      (i[r].q = i[r].q || []).push(arguments);
-    }),
-    (i[r].l = 1 * new Date());
-  (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-  a.async = 1;
-  a.src = g;
-  m.parentNode.insertBefore(a, m);
-};
-/* eslint-enable */
-
-export default (page, title) => {
-  try {
-    if (!window.ga) {
-      attachScript(
-        window,
-        document,
-        'script',
-        'https://www.google-analytics.com/analytics.js',
-        'ga'
-      );
-
-      window.ga('create', 'UA-41619329-3', { cookieDomain: 'auto' });
-      window.ga('require', 'linkid', 'linkid.js');
-    }
-
-    window.ga('send', 'pageview', {
-      page,
-      title,
-    });
-
-    if (!inIframe()) {
-      // start time on page tracking if not in an iframe
-      riveted.init({
-        reportInterval: 30,
-      });
-    }
-  } catch (e) {}
-};
-
-// checks if page is in an iframe
-function inIframe() {
-  try {
-    return window.self !== window.top;
-  } catch (e) {
-    return true;
-  }
-}
-
-/*
- * START: Riveted time on page tracking code
- * see aditional documentation here: https://riveted.parsnip.io/
- */
-/* eslint-disable */
-var riveted = (function () {
-  let started = false;
-  let stopped = false;
-  let turnedOff = false;
-  let clockTime = 0;
-  const startTime = new Date();
-  let clockTimer = null;
-  let idleTimer = null;
-  let sendEvent;
-  let sendUserTiming;
-  let reportInterval;
-  let idleTimeout;
-  let nonInteraction;
-  let universalGA;
-  let classicGA;
-  let googleTagManager;
-
-  function init(options) {
-    /*
-     * Determine which version of GA is being used
-     * "ga", "_gaq", and "dataLayer" are the possible globals
-     */
-
-    if (typeof ga === 'function') {
-      universalGA = true;
-    }
-
-    if (typeof _gaq !== 'undefined' && typeof _gaq.push === 'function') {
-      classicGA = true;
-    }
-
-    if (
-      typeof dataLayer !== 'undefined' &&
-      typeof dataLayer.push === 'function'
-    ) {
-      googleTagManager = true;
-    }
-
-    // Set up options and defaults
-    options = options || {};
-    reportInterval = parseInt(options.reportInterval, 10) || 5;
-    idleTimeout = parseInt(options.idleTimeout, 10) || 30;
-
-    if (typeof options.eventHandler === 'function') {
-      sendEvent = options.eventHandler;
-    }
-
-    if (typeof options.userTimingHandler === 'function') {
-      sendUserTiming = options.userTimingHandler;
-    }
-
-    if (
-      'nonInteraction' in options &&
-      (options.nonInteraction === false || options.nonInteraction === 'false')
-    ) {
-      nonInteraction = false;
-    } else {
-      nonInteraction = true;
-    }
-
-    // Basic activity event listeners
-    addListener(document, 'keydown', trigger);
-    addListener(document, 'click', trigger);
-    addListener(window, 'mousemove', throttle(trigger, 500));
-    addListener(window, 'scroll', throttle(trigger, 500));
-
-    // Page visibility listeners
-    addListener(document, 'visibilitychange', visibilityChange);
-    addListener(document, 'webkitvisibilitychange', visibilityChange);
-
-    // sends initial zero value
-    sendEvent(0);
-  }
-
-  /*
-   * Throttle function borrowed from:
-   * Underscore.js 1.5.2
-   * http://underscorejs.org
-   * (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
-   * Underscore may be freely distributed under the MIT license.
-   */
-
-  function throttle(func, wait) {
-    let context, args, result;
-    let timeout = null;
-    let previous = 0;
-    const later = function () {
-      previous = new Date();
-      timeout = null;
-      result = func.apply(context, args);
-    };
-    return function () {
-      const now = new Date();
-      if (!previous) previous = now;
-      const remaining = wait - (now - previous);
-      context = this;
-      args = arguments;
-      if (remaining <= 0) {
-        clearTimeout(timeout);
-        timeout = null;
-        previous = now;
-        result = func.apply(context, args);
-      } else if (!timeout) {
-        timeout = setTimeout(later, remaining);
-      }
-      return result;
-    };
-  }
-
-  /*
-   * Cross-browser event listening
-   */
-
-  function addListener(element, eventName, handler) {
-    if (element.addEventListener) {
-      element.addEventListener(eventName, handler, false);
-    } else if (element.attachEvent) {
-      element.attachEvent('on' + eventName, handler);
-    } else {
-      element['on' + eventName] = handler;
-    }
-  }
-
-  /*
-   * Function for logging User Timing event on initial interaction
-   */
-
-  sendUserTiming = function (timingValue) {
-    if (googleTagManager) {
-      dataLayer.push({
-        event: 'RivetedTiming',
-        eventCategory: 'Riveted',
-        timingVar: 'First Interaction',
-        timingValue,
-      });
-    } else {
-      if (universalGA) {
-        ga('send', 'timing', 'Riveted', 'First Interaction', timingValue);
-      }
-
-      if (classicGA) {
-        _gaq.push([
-          '_trackTiming',
-          'Riveted',
-          'First Interaction',
-          timingValue,
-          null,
-          100,
-        ]);
-      }
-    }
-  };
-
-  /*
-   * Function for logging ping events
-   */
-
-  sendEvent = function (time) {
-    if (googleTagManager) {
-      dataLayer.push({
-        event: 'Riveted',
-        eventCategory: 'Riveted',
-        eventAction: 'Time Spent',
-        eventLabel: time,
-        eventValue: reportInterval,
-        eventNonInteraction: nonInteraction,
-      });
-    } else {
-      if (universalGA) {
-        ga(
-          'send',
-          'event',
-          'Riveted',
-          'Time Spent',
-          time.toString(),
-          reportInterval,
-          { nonInteraction }
-        );
-      }
-
-      if (classicGA) {
-        _gaq.push([
-          '_trackEvent',
-          'Riveted',
-          'Time Spent',
-          time.toString(),
-          reportInterval,
-          nonInteraction,
-        ]);
-      }
-    }
-  };
-
-  function setIdle() {
-    clearTimeout(idleTimer);
-    stopClock();
-  }
-
-  function visibilityChange() {
-    if (document.hidden || document.webkitHidden) {
-      setIdle();
-    }
-  }
-
-  function clock() {
-    clockTime += 1;
-    if (clockTime > 0 && clockTime % reportInterval === 0) {
-      sendEvent(clockTime);
-    }
-  }
-
-  function stopClock() {
-    stopped = true;
-    clearTimeout(clockTimer);
-  }
-
-  function turnOff() {
-    setIdle();
-    turnedOff = true;
-  }
-
-  function turnOn() {
-    turnedOff = false;
-  }
-
-  function restartClock() {
-    stopped = false;
-    clearTimeout(clockTimer);
-    clockTimer = setInterval(clock, 1000);
-  }
-
-  function startRiveted() {
-    // Calculate seconds from start to first interaction
-    const currentTime = new Date();
-    const diff = currentTime - startTime;
-
-    // Set global
-    started = true;
-
-    // Send User Timing Event
-    sendUserTiming(diff);
-
-    // Start clock
-    clockTimer = setInterval(clock, 1000);
-  }
-
-  function trigger() {
-    if (turnedOff) {
-      return;
-    }
-
-    if (!started) {
-      startRiveted();
-    }
-
-    if (stopped) {
-      restartClock();
-    }
-
-    clearTimeout(idleTimer);
-    idleTimer = setTimeout(setIdle, idleTimeout * 1000 + 100);
-  }
-
-  return {
-    init,
-    trigger,
-    setIdle,
-    on: turnOn,
-    off: turnOff,
-  };
-})();
-/* eslint-enable */
-/* END: Riveted time on page tracking code */