video comp edits for #116

src/components/NoteText/NoteText.svelte

@@ -39,6 +39,7 @@
     p {
       @include body-note;
       @include text-sm;
+      @include font-light;
     }
   }
 </style>

src/components/Video/Video.stories.svelte

@@ -39,7 +39,7 @@
     ariaDescription: 'Compulsory description of your video for screen readers.',
     src: SilentVideo,
     width: 'wide',
-    caption: 'Optional caption for your video.',
+    notes: 'Optional caption for your video.',
   }}"
 />
 
@@ -50,7 +50,7 @@
     src: SilentVideo,
     width: 'normal',
     loopVideo: true,
-    caption:
+    notes:
       "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
     playVideoThreshold: 0.9,
   }}"
@@ -63,7 +63,7 @@
     ariaDescription: 'Compulsory description of your video for screen readers.',
     src: SilentVideo,
     width: 'normal',
-    caption:
+    notes:
       "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
     playVideoThreshold: 0.9,
     controlsColour: 'white',
@@ -82,7 +82,7 @@
     ariaDescription: 'Compulsory description of your video for screen readers.',
     src: SoundVideo,
     width: 'normal',
-    caption:
+    notes:
       "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
     playVideoThreshold: 0.9,
     showControls: true,

src/components/Video/Video.svelte

@@ -2,9 +2,9 @@
 <script lang="ts">
   import IntersectionObserver from 'svelte-intersection-observer';
   import Controls from './Controls.svelte';
-  import Block from '../Block/Block.svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
   import type { ContainerWidth } from '../@types/global';
-  import { marked } from 'marked';
+
   /// //////////////////////////////////
   /// /////////// Props ////////////////
   /// //////////////////////////////////
@@ -15,7 +15,24 @@
   export let src = '';
   export let ariaHidden = true;
   export let ariaDescription = null;
-  export let caption = '';
+
+  /**
+   * Title of the graphic
+   * @type {string}
+   */
+  export let title: string | null = null;
+
+  /**
+   * Notes to the graphic, passed in as a markdown string.
+   * @type {string}
+   */
+  export let notes: string | null = null;
+
+  /**
+   * Description of the graphic, passed in as a markdown string.
+   * @type {string}
+   */
+  export let description: string | null = null;
 
   /**
    * Width of the block within the article well.
@@ -25,6 +42,14 @@
 
   type PreloadOptions = 'auto' | 'none' | 'metadata';
 
+  /**
+   * 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: ContainerWidth | null = 'normal';
+
   /**
    * Preload options. `auto` is ignored if `autoplay` is true. Can also be `none` or `metadata`.
    * @type {string}
@@ -123,8 +148,16 @@
   on:touchstart="{setInteractedWithDom}"
 />
 
-<Block width="{width}" class="video-container fmy-5">
+<GraphicBlock
+  textWidth="{textWidth}"
+  title="{title}"
+  description="{description}"
+  notes="{notes}"
+  width="{width}"
+  class="video-container fmy-5"
+>
   <div
+    role="figure"
     on:mouseover="{() => {
       interactiveControlsOpacity = controlsOpacity;
     }}"
@@ -257,21 +290,10 @@
           </video>
         </div>
       {/if}
-      {#if caption}
-        <aside class="fmt-2">
-          {@html marked(caption)}
-        </aside>
-      {/if}
     {/if}
   </div>
-</Block>
+  {#if $$slots.notes}
-
+    <!-- Custom notes and source slot -->
-<style lang="scss">
+    <slot name="notes" />
-  @import '../../scss/mixins';
+  {/if}
-  // Caption and Sources
+</GraphicBlock>
-  aside {
-    :global(p) {
-      @include body-caption;
-    }
-  }
-</style>

src/components/Video/stories/docs/component.md

@@ -6,9 +6,10 @@ General-purpose video component. Can play on load or when the video comes into v
   import { assets } from '$app/paths'; // If using local video in the Graphics Kit
 </script>
 
-<video
+<Video
   ariaDescription="{'Compulsory description of your video for screen readers.'}"
   src="{`${assets}/videos/myVideo.mp4`}"
   width="{'wide'}"
-  caption="{'Optional caption for your video.'}"></video>
+  caption="{'Optional caption for your video.'}"
+/>
 ```

src/components/Video/stories/docs/controls.md

@@ -22,7 +22,7 @@ Here is an example with bottom right corner white opaque controls, with a replay
   import { Video } from '@reuters-graphics/graphics-components';
 </script>
 
-<video
+<Video
   ariaDescription="{'Compulsory description of your video for screen readers.'}"
   src="{'path-to-video-or-external-url'}"
   width="{'normal'}"
@@ -33,5 +33,6 @@ Here is an example with bottom right corner white opaque controls, with a replay
   controlsPosition="{'bottom right'}"
   separateReplayIcon="{true}"
   loopVideo="{false}"
-  hoverToSeeControls="{true}"></video>
+  hoverToSeeControls="{true}"
+/>
 ```

src/components/Video/stories/docs/playAndLoop.md

@@ -18,10 +18,11 @@ Here is an example of what the same video would look like with a visibility thre
   import { Video } from '@reuters-graphics/graphics-components';
 </script>
 
-<video
+<Video
   ariaDescription="{'Compulsory description of your video for screen readers.'}"
   src="{'path-to-video-or-external-url'}"
   width="{'normal'}"
   loopVideo="{false}"
-  playVideoThreshold="{0.9}"></video>
+  playVideoThreshold="{0.9}"
+/>
 ```

src/components/Video/stories/docs/withSound.md

@@ -24,12 +24,13 @@ and go to the top. Click anywhere on the page before scrolling down to the video
   import { Video } from '@reuters-graphics/graphics-components';
 </script>
 
-<video
+<Video
   ariaDescription="{'Compulsory description of your video for screen readers.'}"
   src="{'path-to-video-or-external-url'}"
   width="{'normal'}"
   controlsOpacity="{1}"
   loopVideo="{false}"
   muteVideo="{false}"
-  allowSoundToAutoplay="{true}"></video>
+  allowSoundToAutoplay="{true}"
+/>
 ```