@reuters-graphics/graphics-components 1.0.30 → 1.1.0

package/dist/components/ToolsHeader/ToolsHeader.svelte

@@ -1,37 +1,20 @@
 <!-- @component `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ToolsHeader--default) -->
-<script>/** Add an ID to target with SCSS. */
-export let id = '';
-/** Add a class to target with SCSS. */
-let cls = '';
+<script>export let id = "";
+let cls = "";
 export { cls as class };
-/**
- * Make the header stick when user scrolls.
- */
 export let sticky = false;
-/**
- * Background CSS
- */
-export let background = 'transparent';
-/**
- * Border bottom CSS
- */
-export let borderBottom = '1px solid #dedede';
-/**
- * Colour props passed to `ReutersGraphicsLogo` component.
- */
-export let logoProps = { logoColour: '#404040' };
-/**
- * Link the logo points to.
- */
-export let homeLink = '/';
-import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
+export let background = "transparent";
+export let borderBottom = "1px solid #dedede";
+export let logoProps = { logoColour: "#404040" };
+export let homeLink = "/";
+import ReutersGraphicsLogo from "../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte";
 </script>
 
 <header
-  id="{id}"
+  {id}
   class="{cls}"
-  class:sticky="{sticky}"
-  style:background="{background}"
+  class:sticky
+  style:background
   style:border-bottom="{borderBottom}"
 >
   <div class="logo-container">

package/dist/{@types/components → components}/ToolsHeader/ToolsHeader.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /** Add an ID to target with SCSS. */ id?: string;
@@ -29,11 +29,13 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ToolsHeaderProps = typeof __propDef.props;
 export type ToolsHeaderEvents = typeof __propDef.events;
 export type ToolsHeaderSlots = typeof __propDef.slots;
 /** `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ToolsHeader--default) */
-export default class ToolsHeader extends SvelteComponentTyped<ToolsHeaderProps, ToolsHeaderEvents, ToolsHeaderSlots> {
+export default class ToolsHeader extends SvelteComponent<ToolsHeaderProps, ToolsHeaderEvents, ToolsHeaderSlots> {
 }
 export {};

package/dist/components/ToolsHeader/stories/docs/component.md

@@ -0,0 +1,13 @@
+A header for internal tooling sites.
+
+> **Note:** Don't use this component for public pages.
+
+```svelte
+<script>
+  import { ToolsHeader } from '@reuters-graphics/graphics-components';
+</script>
+
+<ToolsHeader>
+  <!-- Anything else goes right of the logo -->
+</ToolsHeader>
+```

package/dist/components/Video/Controls.svelte

@@ -30,17 +30,19 @@
   on:click="{forwardBtnClick}"
   style="
     opacity: {controlsOpacity};
-    top: {controlsPosition === 'top left' || controlsPosition === 'top right'
-    ? `${10}px`
-    : controlsPosition === 'center'
-    ? `${(heightVideoContainer - controlsBorderOffset) / 2}px`
-    : `${heightVideoContainer - controlsBorderOffset}px`};
+    top: {controlsPosition === 'top left' || controlsPosition === 'top right' ?
+    `${10}px`
+  : controlsPosition === 'center' ?
+    `${(heightVideoContainer - controlsBorderOffset) / 2}px`
+  : `${heightVideoContainer - controlsBorderOffset}px`};
 
-    left: {controlsPosition === 'top left' || controlsPosition === 'bottom left'
-    ? `${10}px`
-    : controlsPosition === 'center'
-    ? `${(widthVideoContainer - controlsBorderOffset) / 2}px`
-    : `${widthVideoContainer - controlsBorderOffset}px`};
+    left: {(
+    controlsPosition === 'top left' || controlsPosition === 'bottom left'
+  ) ?
+    `${10}px`
+  : controlsPosition === 'center' ?
+    `${(widthVideoContainer - controlsBorderOffset) / 2}px`
+  : `${widthVideoContainer - controlsBorderOffset}px`};
     "
 >
   {#if resetCondition}

package/dist/{@types/components → components}/Video/Controls.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  ControlsProps */
 /** @typedef {typeof __propDef.events}  ControlsEvents */
 /** @typedef {typeof __propDef.slots}  ControlsSlots */
-export default class Controls extends SvelteComponentTyped<{
+export default class Controls extends SvelteComponent<{
     paused: any;
     clickedOnPauseBtn: any;
     controlsOpacity: any;
@@ -21,7 +21,7 @@ export default class Controls extends SvelteComponentTyped<{
 export type ControlsProps = typeof __propDef.props;
 export type ControlsEvents = typeof __propDef.events;
 export type ControlsSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         paused: any;
@@ -41,5 +41,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/Video/Video.stories.svelte

@@ -0,0 +1,95 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore raw
+  import playAndLoopDocs from './stories/docs/playAndLoop.md?raw';
+  // @ts-ignore raw
+  import controlsDocs from './stories/docs/controls.md?raw';
+  // @ts-ignore raw
+  // import withSoundDocs from './stories/docs/withSound.md?raw';
+
+  // @ts-ignore raw
+  import SilentVideo from './stories/videos/silent-video.mp4';
+  // @ts-ignore raw
+  import SoundVideo from './stories/videos/sound-video.mp4';
+
+  import Video from './Video.svelte';
+
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '../../lib/docs/utils/withParams.js';
+</script>
+
+<Meta
+  title="Components/Video"
+  component="{Video}"
+  {...withComponentDocs(componentDocs)}
+/>
+
+<Template let:args>
+  <Video {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    ariaDescription: 'Compulsory description of your video for screen readers.',
+    src: SilentVideo,
+    width: 'wide',
+    notes: 'Optional caption for your video.',
+  }}"
+/>
+
+<Story
+  name="Playing and looping"
+  args="{{
+    ariaDescription: 'Compulsory description of your video for screen readers.',
+    src: SilentVideo,
+    width: 'normal',
+    loopVideo: true,
+    notes:
+      "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
+    playVideoThreshold: 0.9,
+  }}"
+  {...withStoryDocs(playAndLoopDocs)}
+/>
+
+<Story
+  name="Controls"
+  args="{{
+    ariaDescription: 'Compulsory description of your video for screen readers.',
+    src: SilentVideo,
+    width: 'normal',
+    notes:
+      "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
+    playVideoThreshold: 0.9,
+    controlsColour: 'white',
+    controlsOpacity: 1,
+    controlsPosition: 'bottom right',
+    separateReplayIcon: true,
+    loopVideo: false,
+    hoverToSeeControls: true,
+  }}"
+  {...withStoryDocs(controlsDocs)}
+/>
+
+<Story
+  name="Videos with sound"
+  args="{{
+    ariaDescription: 'Compulsory description of your video for screen readers.',
+    src: SoundVideo,
+    width: 'normal',
+    notes:
+      "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
+    playVideoThreshold: 0.9,
+    showControls: true,
+    loopVideo: false,
+    muteVideo: false,
+    playVideoWhenInView: true,
+    allowSoundToAutoplay: true,
+  }}"
+  {...withStoryDocs(controlsDocs)}
+/>

package/dist/components/Video/Video.stories.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  VideoProps */
+/** @typedef {typeof __propDef.events}  VideoEvents */
+/** @typedef {typeof __propDef.slots}  VideoSlots */
+export default class Video extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type VideoProps = typeof __propDef.props;
+export type VideoEvents = typeof __propDef.events;
+export type VideoSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/Video/Video.svelte

@@ -1,138 +1,68 @@
 <!-- @component `Video` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Video--default) -->
-<script>import IntersectionObserver from 'svelte-intersection-observer';
-import Controls from './Controls.svelte';
-import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
-/// //////////////////////////////////
-/// /////////// Props ////////////////
-/// //////////////////////////////////
-/**
- * Video src
- * @type {string}
- * @required
- */
+<script>import IntersectionObserver from "svelte-intersection-observer";
+import Controls from "./Controls.svelte";
+import GraphicBlock from "../GraphicBlock/GraphicBlock.svelte";
 export let src;
-/**
- * Image to be shown while the video is downloading
- */
-export let poster = '';
-/**
- * Whether to wrap the graphic with an aria hidden tag.
- */
+export let poster = "";
 export let hidden = true;
-/**
- * ARIA description, passed in as a markdown string.
- * @type {string}
- */
 export let ariaDescription = null;
-/** Add extra classes to the block tag to target it with custom CSS. */
-let cls = '';
+let cls = "";
 export { cls as class };
-/**
- * Title of the graphic
- * @type {string}
- */
 export let title = null;
-/**
- * Notes to the graphic, passed in as a markdown string.
- * @type {string}
- */
 export let notes = null;
-/**
- * Description of the graphic, passed in as a markdown string.
- * @type {string}
- */
 export let description = null;
-/**
- * Width of the block within the article well.
- * @type {string}
- */
-export let width = 'normal';
-/**
- * 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 = 'normal';
-/**
- * Preload options. `auto` is ignored if `autoplay` is true. Can also be `none` or `metadata`.
- * @type {string}
- */
-export let preloadVideo = 'auto';
-/**
- * Whether the video should loop.
- */
+export let width = "normal";
+export let textWidth = "normal";
+export let preloadVideo = "auto";
 export let loopVideo = true;
-/**
- * Whether video should have sound or not.
- */
 export let muteVideo = true;
-export let allowSoundToAutoplay = false; // for video with sound, whether video should be allowed to autoplay if the user has previously interacted with DOM
-export let playVideoWhenInView = true; // whether the video should play when it comes into view or just on page load
-export let playVideoThreshold = 0.5; // if video plays with intersection observer, how much of it should be into view to start playing
-export let possibleToPlayPause = true; // whether to have the option to pause and play video
-export let showControls = true; // whetner to show the play / pause buttons
-export let hoverToSeeControls = false; // whether you need to hover over the video to see the controls
-export let separateReplayIcon = false; // whether to use a separate replay icon or use the play icon for replay as well
-export let controlsColour = '#333'; // change the colour of the play/pause button
-export let controlsOpacity = 0.5; // change the opacity of the play/pause button
+export let allowSoundToAutoplay = false;
+export let playVideoWhenInView = true;
+export let playVideoThreshold = 0.5;
+export let possibleToPlayPause = true;
+export let showControls = true;
+export let hoverToSeeControls = false;
+export let separateReplayIcon = false;
+export let controlsColour = "#333";
+export let controlsOpacity = 0.5;
 $: interactiveControlsOpacity = 0;
-export let controlsPosition = 'top left'; // have four options for controls position - top right, top left, bottom right, bottom left
-/// //////////////////////////////////
-/// /////// Internal Logic ///////////
-/// //////////////////////////////////
-// Internal props
+export let controlsPosition = "top left";
 let time = 0;
 let duration;
 let paused = true;
-let clickedOnPauseBtn = false; // special variable to track if user clicked on 'pause' btn to help with audio logic
-$: resetCondition = time >= duration; // - 0.1;
-// Dimensions etc other useful things
+let clickedOnPauseBtn = false;
+$: resetCondition = time >= duration;
 let heightVideo;
 let widthVideo;
 let heightVideoContainer;
 let widthVideoContainer;
 const controlsBorderOffset = 50;
-// For intersection observer
 let intersecting;
 let element;
 let videoElement;
-// For video with sound, check if there has been an interaction with the DOM
 let interactedWithDom = false;
 const setInteractedWithDom = () => {
-    interactedWithDom = true;
+  interactedWithDom = true;
 };
-// Play the video (with no sound) if it's intersecting; pause when it's no longer intersecting
-$: if (playVideoWhenInView && intersecting && muteVideo)
-    paused = false;
-$: if (playVideoWhenInView && !intersecting)
-    paused = true;
-// Special case for video with sound
-// Only ff you've clicked on play button or interacted with DOM in any way previously, video with audio will play
-$: if (allowSoundToAutoplay &&
-    playVideoWhenInView &&
-    intersecting &&
-    !muteVideo &&
-    interactedWithDom &&
-    !clickedOnPauseBtn // so video doesn't autoplay when coming into view again if paused previously
-) {
-    paused = false;
+$: if (playVideoWhenInView && intersecting && muteVideo) paused = false;
+$: if (playVideoWhenInView && !intersecting) paused = true;
+$: if (allowSoundToAutoplay && playVideoWhenInView && intersecting && !muteVideo && interactedWithDom && !clickedOnPauseBtn) {
+  paused = false;
 }
 $: if (allowSoundToAutoplay && !muteVideo && !interactedWithDom) {
-    paused = true;
+  paused = true;
 }
-$: if (!possibleToPlayPause)
-    showControls = true;
-// To get the pause state passed up from the Controls
+$: if (!possibleToPlayPause) showControls = true;
 const pausePlayEvent = (e) => {
-    const fwdPaused = e.detail.paused;
-    const fwdClickedOnPauseBtn = e.detail.clickedOnPauseBtn;
-    paused = fwdPaused;
-    clickedOnPauseBtn = fwdClickedOnPauseBtn;
+  const fwdPaused = e.detail.paused;
+  const fwdClickedOnPauseBtn = e.detail.clickedOnPauseBtn;
+  paused = fwdPaused;
+  clickedOnPauseBtn = fwdClickedOnPauseBtn;
 };
-// Warning to missing aria attributes
 if (hidden && !ariaDescription) {
-    console.warn('Must provide aria description for video components if hidden is true.');
+  console.warn(
+    "Must provide aria description for video components if hidden is true."
+  );
 }
 </script>
 
@@ -142,11 +72,11 @@ if (hidden && !ariaDescription) {
 />
 
 <GraphicBlock
-  textWidth="{textWidth}"
-  title="{title}"
-  description="{description}"
-  notes="{notes}"
-  width="{width}"
+  {textWidth}
+  {title}
+  {description}
+  {notes}
+  {width}
   class="video {cls}"
 >
   <div
@@ -172,8 +102,8 @@ if (hidden && !ariaDescription) {
       {#if playVideoWhenInView}
         <!-- Video element with Intersection Observer -->
         <IntersectionObserver
-          element="{element}"
-          bind:intersecting="{intersecting}"
+          {element}
+          bind:intersecting
           threshold="{playVideoThreshold}"
           once="{false}"
         >
@@ -188,24 +118,28 @@ if (hidden && !ariaDescription) {
               {#if showControls}
                 <Controls
                   on:pausePlayEvent="{pausePlayEvent}"
-                  paused="{paused}"
-                  clickedOnPauseBtn="{clickedOnPauseBtn}"
-                  controlsOpacity="{hoverToSeeControls
-                    ? interactiveControlsOpacity
-                    : controlsOpacity}"
-                  controlsPosition="{controlsPosition}"
-                  widthVideoContainer="{widthVideoContainer}"
-                  heightVideoContainer="{heightVideoContainer}"
-                  controlsBorderOffset="{controlsBorderOffset}"
-                  resetCondition="{resetCondition}"
-                  separateReplayIcon="{separateReplayIcon}"
-                  controlsColour="{controlsColour}"
+                  {paused}
+                  {clickedOnPauseBtn}
+                  controlsOpacity="{hoverToSeeControls ?
+                    interactiveControlsOpacity
+                  : controlsOpacity}"
+                  {controlsPosition}
+                  {widthVideoContainer}
+                  {heightVideoContainer}
+                  {controlsBorderOffset}
+                  {resetCondition}
+                  {separateReplayIcon}
+                  {controlsColour}
                 />
               {:else}
                 <button
                   class="border-0 m-0 p-0 bg-transparent absolute"
                   on:click="{() => {
-                    paused === true ? (paused = false) : (paused = true);
+                    if (paused === true) {
+                      paused = false;
+                    } else {
+                      paused = true;
+                    }
                   }}"
                   style="top: 0; left: 0; width: {widthVideoContainer}px; height: {heightVideoContainer}px;"
                 ></button>
@@ -213,8 +147,8 @@ if (hidden && !ariaDescription) {
             {/if}
             <video
               bind:this="{videoElement}"
-              src="{src}"
-              poster="{poster}"
+              {src}
+              {poster}
               class="pointer-events-none relative"
               width="100%"
               muted="{muteVideo}"
@@ -222,8 +156,8 @@ if (hidden && !ariaDescription) {
               preload="{preloadVideo}"
               loop="{loopVideo}"
               bind:currentTime="{time}"
-              bind:duration="{duration}"
-              bind:paused="{paused}"
+              bind:duration
+              bind:paused
               bind:clientWidth="{widthVideo}"
               bind:clientHeight="{heightVideo}"
             >
@@ -243,22 +177,26 @@ if (hidden && !ariaDescription) {
             {#if showControls}
               <Controls
                 on:pausePlayEvent="{pausePlayEvent}"
-                paused="{paused}"
-                clickedOnPauseBtn="{clickedOnPauseBtn}"
-                controlsOpacity="{controlsOpacity}"
-                controlsPosition="{controlsPosition}"
-                widthVideoContainer="{widthVideoContainer}"
-                heightVideoContainer="{heightVideoContainer}"
-                controlsBorderOffset="{controlsBorderOffset}"
-                resetCondition="{resetCondition}"
-                separateReplayIcon="{separateReplayIcon}"
-                controlsColour="{controlsColour}"
+                {paused}
+                {clickedOnPauseBtn}
+                {controlsOpacity}
+                {controlsPosition}
+                {widthVideoContainer}
+                {heightVideoContainer}
+                {controlsBorderOffset}
+                {resetCondition}
+                {separateReplayIcon}
+                {controlsColour}
               />
             {:else}
               <button
                 class="border-0 m-0 p-0 bg-transparent absolute"
                 on:click="{() => {
-                  paused === true ? (paused = false) : (paused = true);
+                  if (paused === true) {
+                    paused = false;
+                  } else {
+                    paused = true;
+                  }
                 }}"
                 style="top: 0; left: 0; width: {widthVideoContainer}px; height: {heightVideoContainer}px;"
               ></button>
@@ -266,8 +204,8 @@ if (hidden && !ariaDescription) {
           {/if}
           <video
             bind:this="{videoElement}"
-            src="{src}"
-            poster="{poster}"
+            {src}
+            {poster}
             class="pointer-events-none relative"
             width="100%"
             muted="{muteVideo}"
@@ -275,8 +213,8 @@ if (hidden && !ariaDescription) {
             preload="{preloadVideo}"
             loop="{loopVideo}"
             bind:currentTime="{time}"
-            bind:duration="{duration}"
-            bind:paused="{paused}"
+            bind:duration
+            bind:paused
             autoplay
             bind:clientWidth="{widthVideo}"
             bind:clientHeight="{heightVideo}"

package/dist/{@types/components → components}/Video/Video.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { ContainerWidth } from '../@types/global';
 declare const __propDef: {
     props: {
@@ -67,11 +67,13 @@ declare const __propDef: {
     slots: {
         notes: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type VideoProps = typeof __propDef.props;
 export type VideoEvents = typeof __propDef.events;
 export type VideoSlots = typeof __propDef.slots;
 /** `Video` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Video--default) */
-export default class Video extends SvelteComponentTyped<VideoProps, VideoEvents, VideoSlots> {
+export default class Video extends SvelteComponent<VideoProps, VideoEvents, VideoSlots> {
 }
 export {};