From a1e76712edeeeff061f3f8d69e6d399b66d9bcc3 Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Sat, 2 Sep 2023 21:41:23 +0530
Subject: [PATCH] video comp edits for #116

---
 src/components/NoteText/NoteText.svelte       |  1 +
 src/components/Video/Video.stories.svelte     |  8 +--
 src/components/Video/Video.svelte             | 62 +++++++++++++------
 .../Video/stories/docs/component.md           |  5 +-
 src/components/Video/stories/docs/controls.md |  5 +-
 .../Video/stories/docs/playAndLoop.md         |  5 +-
 .../Video/stories/docs/withSound.md           |  5 +-
 7 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
index 01865563..09d76c5f 100644
--- a/src/components/NoteText/NoteText.svelte
+++ b/src/components/NoteText/NoteText.svelte
@@ -39,6 +39,7 @@
     p {
       @include body-note;
       @include text-sm;
+      @include font-light;
     }
   }
 </style>
diff --git a/src/components/Video/Video.stories.svelte b/src/components/Video/Video.stories.svelte
index 77ea26ec..468711f9 100644
--- a/src/components/Video/Video.stories.svelte
+++ b/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,
diff --git a/src/components/Video/Video.svelte b/src/components/Video/Video.svelte
index 71eb9367..2c3398c2 100644
--- a/src/components/Video/Video.svelte
+++ b/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>
-
-<style lang="scss">
-  @import '../../scss/mixins';
-  // Caption and Sources
-  aside {
-    :global(p) {
-      @include body-caption;
-    }
-  }
-</style>
+  {#if $$slots.notes}
+    <!-- Custom notes and source slot -->
+    <slot name="notes" />
+  {/if}
+</GraphicBlock>
diff --git a/src/components/Video/stories/docs/component.md b/src/components/Video/stories/docs/component.md
index c1076636..207bd677 100644
--- a/src/components/Video/stories/docs/component.md
+++ b/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.'}"
+/>
 ```
diff --git a/src/components/Video/stories/docs/controls.md b/src/components/Video/stories/docs/controls.md
index b101c40c..87e8f916 100644
--- a/src/components/Video/stories/docs/controls.md
+++ b/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}"
+/>
 ```
diff --git a/src/components/Video/stories/docs/playAndLoop.md b/src/components/Video/stories/docs/playAndLoop.md
index 584dbc21..03427fd0 100644
--- a/src/components/Video/stories/docs/playAndLoop.md
+++ b/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}"
+/>
 ```
diff --git a/src/components/Video/stories/docs/withSound.md b/src/components/Video/stories/docs/withSound.md
index 1287da4b..50620899 100644
--- a/src/components/Video/stories/docs/withSound.md
+++ b/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}"
+/>
 ```