removing unused import

src/components/Video/Video.stories.svelte

@@ -8,7 +8,7 @@
   // @ts-ignore
   import controlsDocs from './stories/docs/controls.md?raw';
   // @ts-ignore
-  import withSoundDocs from './stories/docs/withSound.md?raw';
+  // import withSoundDocs from './stories/docs/withSound.md?raw';
 
   // @ts-ignore
   import SilentVideo from './stories/videos/silent-video.mp4';
@@ -19,7 +19,7 @@
 
   import {
     withComponentDocs,
-    withStoryDocs
+    withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
 
   const meta = {
@@ -35,39 +35,38 @@
   <Video {...args} />
 </Template>
 
-
-
-
 <Story
   name="Default"
-  args={{
-    ariaDescription: "Compulsory description of your video for screen readers.",
+  args="{{
+    ariaDescription: 'Compulsory description of your video for screen readers.',
     src: SilentVideo,
     width: 'wide',
     caption: 'Optional caption for your video.',
-  }}
+  }}"
 />
 
 <Story
   name="Playing and looping"
-  args={{
-    ariaDescription: "Compulsory description of your video for screen readers.",
+  args="{{
+    ariaDescription: 'Compulsory description of your video for screen readers.',
     src: SilentVideo,
     width: 'normal',
     loopVideo: true,
-    caption: 'World\'s longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters',
+    caption:
+      "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.",
+  args="{{
+    ariaDescription: 'Compulsory description of your video for screen readers.',
     src: SilentVideo,
     width: 'normal',
-    caption: 'World\'s longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters',
+    caption:
+      "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
     playVideoThreshold: 0.9,
     controlsColour: 'white',
     controlsOpacity: 1,
@@ -75,23 +74,24 @@
     separateReplayIcon: true,
     loopVideo: false,
     hoverToSeeControls: true,
-  }}
+  }}"
   {...withStoryDocs(controlsDocs)}
 />
 
 <Story
   name="Videos with sound"
-  args={{
-    ariaDescription: "Compulsory description of your video for screen readers.",
+  args="{{
+    ariaDescription: 'Compulsory description of your video for screen readers.',
     src: SoundVideo,
     width: 'normal',
-    caption: 'World\'s longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters',
+    caption:
+      "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)}
-/>
+/>

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

@@ -6,10 +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 
-  ariaDescription={"Compulsory description of your video for screen readers."}
-  src={`${assets}/videos/myVideo.mp4`}
-  size={'wide'}
-  caption={'Optional caption for your video.'}
+<Video
+  ariaDescription="{'Compulsory description of your video for screen readers.'}"
+  src="{`${assets}/videos/myVideo.mp4`}"
+  width="{'wide'}"
+  caption="{'Optional caption for your video.'}"
 />
 ```

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

@@ -1,12 +1,12 @@
 `showControls`
 
 - By default, the video has a play/pause button, which corresponds to
-`showControls={true}`. If you don't want these, just set `showControls={false}`.
-When you do that, the icons themselves will disappear but the functionality of playing and pausing remains and can be done by clicking on the video itself.
-If you don't want to enable any play/pause functionality, add `possibleToPlayPause={false}`.
+  `showControls={true}`. If you don't want these, just set `showControls={false}`.
+  When you do that, the icons themselves will disappear but the functionality of playing and pausing remains and can be done by clicking on the video itself.
+  If you don't want to enable any play/pause functionality, add `possibleToPlayPause={false}`.
 - If you want to show the controls only when the video is hovered, set `hoverToSeeControls={true}`.
 
-`controlsColour`, `controlsOpacity`,  `controlsPosition`, `separateReplayIcon`
+`controlsColour`, `controlsOpacity`, `controlsPosition`, `separateReplayIcon`
 
 If you do want to leave the controls, you have a couple of options to style them:
 
@@ -22,17 +22,17 @@ Here is an example with bottom right corner white opaque controls, with a replay
   import { Video } from '@reuters-graphics/graphics-components';
 </script>
 
-<Video 
-  ariaDescription={"Compulsory description of your video for screen readers."}
-  src={'path-to-video-or-external-url'} 
-  size={'normal'}
-  caption={'Optional caption for your video.'}
-  playVideoThreshold={0.1}
-  controlsColour={'white'}
-  controlsOpacity={1}
-  controlsPosition={'bottom right'}
-  separateReplayIcon={true}
-  loopVideo={false}
-  hoverToSeeControls={true}
+<Video
+  ariaDescription="{'Compulsory description of your video for screen readers.'}"
+  src="{'path-to-video-or-external-url'}"
+  width="{'normal'}"
+  caption="{'Optional caption for your video.'}"
+  playVideoThreshold="{0.1}"
+  controlsColour="{'white'}"
+  controlsOpacity="{1}"
+  controlsPosition="{'bottom right'}"
+  separateReplayIcon="{true}"
+  loopVideo="{false}"
+  hoverToSeeControls="{true}"
 />
 ```

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

@@ -1,11 +1,11 @@
 `playVideoWhenInView`, `playVideoThreshold`
 
 - By default, the video will **start playing when 50% of the video element's height is visible on the page**.
-To control the threshold of visibility at which the video starts playing, add the prop `playVideoThreshold` and set it to a value between 0 and 1,
-where 0 means that the video will start playing as soon as its top enters the viewport, while 1 means it will start when the whole video is in the viewport.
+  To control the threshold of visibility at which the video starts playing, add the prop `playVideoThreshold` and set it to a value between 0 and 1,
+  where 0 means that the video will start playing as soon as its top enters the viewport, while 1 means it will start when the whole video is in the viewport.
 
 - If you don't want the video to play when you scroll to it, but **on page load**, add the prop `playVideoWhenInView={false}`. The default of the prop is `true`,
-which corresponds to the behaviour described above.
+  which corresponds to the behaviour described above.
 
 `loopVideo`
 
@@ -18,11 +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 
-  ariaDescription={"Compulsory description of your video for screen readers."}
-  src={'path-to-video-or-external-url'} 
-  size={'normal'}
-  loopVideo={false}
-  playVideoThreshold={0.9}
+<Video
+  ariaDescription="{'Compulsory description of your video for screen readers.'}"
+  src="{'path-to-video-or-external-url'}"
+  width="{'normal'}"
+  loopVideo="{false}"
+  playVideoThreshold="{0.9}"
 />
 ```

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

@@ -27,7 +27,7 @@ and go to the top. Click anywhere on the page before scrolling down to the video
 <Video
   ariaDescription="{'Compulsory description of your video for screen readers.'}"
   src="{'path-to-video-or-external-url'}"
-  size="{'normal'}"
+  width="{'normal'}"
   controlsOpacity="{1}"
   loopVideo="{false}"
   muteVideo="{false}"