hero, photo, video fixes #116

src/components/FeaturePhoto/FeaturePhoto.svelte

@@ -103,7 +103,7 @@
     {/if}
     {#if caption}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <Block width="{textWidth}" class="fmx-auto fmy-0">
+        <Block width="{textWidth}" class="notes w-full fmy-0">
           <figcaption>
             {caption}
           </figcaption>

src/components/GraphicBlock/TextBlock.svelte

@@ -7,7 +7,7 @@
 </script>
 
 {#if width}
-  <Block width="{width}" class="fmx-auto fmy-0">
+  <Block width="{width}" class="notes fmy-0">
     <slot />
   </Block>
 {:else}

src/components/HeroHeadline/Hero.stories.svelte

@@ -8,6 +8,8 @@
   // @ts-ignore
   import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
   // @ts-ignore
+  import inlinePhotoDocs from './stories/docs/inlinePhoto.md?raw';
+  // @ts-ignore
   import transparentHeaderDocs from './stories/docs/transparentHeader.md?raw';
   // @ts-ignore
   import videoDocs from './stories/docs/backgroundVideo.md?raw';
@@ -23,6 +25,8 @@
   import SiteHeader from '../SiteHeader/SiteHeader.svelte';
   import HeroHeadline from './Hero.svelte';
   import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
+  import Video from '../Video/Video.svelte';
 
   import CrashMap from './stories/graphics/crash.svelte';
   import QuakeMap from './stories/graphics/quakemap.svelte';
@@ -187,27 +191,17 @@
     publishTime="{new Date('2020-12-18').toISOString()}"
   >
     <div slot="background">
-      <GraphicBlock
+      <Video
         width="widest"
-        role="figure"
         class="my-0"
-        textWidth="normal"
+        showControls="{false}"
+        preloadVideo="auto"
+        playVideoWhenInView="{false}"
+        src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
+        poster="https://www.reuters.com/resizer/vexYmtEuXKmfnsCbfS6jSMVbHms=/1080x0/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/VKJHKJEENVO4DASDND3VLHPV5Y.jpg"
         notes="Drone footage from the Village 8 refugee camp in Sudan."
         ariaDescription="Aerial footage of people houses in refugee camp"
-      >
+      />
-        <!-- svelte-ignore a11y-media-has-caption -->
-        <video
-          autoplay
-          muted
-          playsinline
-          loop
-          preload="true"
-          width="100%"
-          poster="video-poster.png"
-          src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
-        >
-        </video>
-      </GraphicBlock>
     </div>
   </HeroHeadline>
   <style lang="scss">
@@ -228,6 +222,32 @@
   </style>
 </Story>
 
+<Story name="With inline photo" {...withStoryDocs(inlinePhotoDocs)}>
+  <Block width="fluid">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    hed="{'Buried under the bricks'}"
+    hedWidth="wide"
+    class="mb-0"
+    dek="{'How mud-brick housing made the Morocco earthquake so deadly'}"
+    section="{'Global news'}"
+    authors="{['Mariano Zafra']}"
+    publishTime="{new Date('2020-01-01').toISOString()}"
+  >
+    <div slot="inline">
+      <FeaturePhoto
+        width="widest"
+        class="my-0"
+        src="https://www.reuters.com/graphics/MOROCCO-QUAKE/CONSTRUCTION/xmpjlblojpr/cdn/images/opening.jpg"
+        caption="Photo by REUTERS/Nacho Doce."
+        altText="A photo of the town of Adassil, Morocco, showing severe damage to many houses, which have collapsed after the earthquake. The houses are all made of mud brick."
+      />
+    </div>
+  </HeroHeadline>
+</Story>
+
 <Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
   <Block width="fluid">
     <SiteHeader />
@@ -245,7 +265,7 @@
     <div slot="inline">
       <GraphicBlock
         width="widest"
-        role="figure"
+        role="img"
         class="my-0"
         textWidth="normal"
         notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
@@ -257,6 +277,35 @@
   </HeroHeadline>
 </Story>
 
+<Story name="With inline video" {...withStoryDocs(inlinePhotoDocs)}>
+  <Block width="fluid">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    hed="{'Devastation in Derna'}"
+    hedWidth="wide"
+    class="mb-0"
+    dek="{'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}"
+    section="{'Global news'}"
+    authors="{['Simon Scarr']}"
+    publishTime="{new Date('2020-01-01').toISOString()}"
+  >
+    <div slot="inline">
+      <Video
+        width="widest"
+        class="my-0"
+        showControls="{false}"
+        preloadVideo="auto"
+        playVideoWhenInView="{false}"
+        src="https://www.reuters.com/graphics/LIBYA-STORM/EXPLAINER/klvyzqebzpg/cdn/video/drone.mp4"
+        notes="Drone shots of Derna, Libya. September 14, 2023. REUTERS"
+        ariaDescription="alttext fot video"
+      />
+    </div>
+  </HeroHeadline>
+</Story>
+
 <Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
   <HeroHeadline
     class="custom-hed"

src/components/HeroHeadline/Hero.svelte

@@ -245,7 +245,7 @@
       @include body-caption;
     }
 
-    :global(video) {
+    :global(.background-hero video) {
       position: relative;
       display: block;
       width: 100%;
@@ -253,7 +253,7 @@
       object-fit: cover;
     }
 
-    :global(.graphic-container .article-block:not(.graphic)) {
+    :global(.graphic-container .article-block.notes) {
       @media (max-width: 690px) {
         width: 100%;
         padding: 0 15px;

src/components/HeroHeadline/stories/docs/backgroundGraphic.md

@@ -2,12 +2,18 @@ Reuters Graphics headline with ai2svelte graphic as background.
 
 ```svelte
 <script>
-  import { HeroHeadline } from '@reuters-graphics/graphics-components';
+  import {
+    HeroHeadline,
+    GraphicBlock,
+  } from '@reuters-graphics/graphics-components';
   import QuakeMap from './ai2svelte/graphic.svelte';
   import { assets } from '$app/paths';
+
+  export let embedded = false;
 </script>
 
 <HeroHeadline
+  embedded="{embedded}"
   hed="{'Earthquake devastates Afghanistan'}"
   hedSize="{'big'}"
   hedWidth="wide"

src/components/HeroHeadline/stories/docs/backgroundVideo.md

@@ -2,11 +2,14 @@ Add a cover video and position the title with ease.
 
 ```svelte
 <script>
-  import { HeroHeadline } from '@reuters-graphics/graphics-components';
+  import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
   import { assets } from '$app/paths';
+
+  export let embedded = false;
 </script>
 
 <HeroHeadline
+  embedded="{embedded}"
   class="custom-hero"
   hed="The conflict in Ethiopia"
   hedSize="bigger"
@@ -15,27 +18,17 @@ Add a cover video and position the title with ease.
   publishTime="{new Date('2020-12-18').toISOString()}"
 >
   <div slot="background">
-    <GraphicBlock
+    <Video
       width="widest"
-      role="figure"
       class="my-0"
-      textWidth="normal"
+      showControls="{false}"
+      preloadVideo="auto"
+      playVideoWhenInView="{false}"
+      src="{assets}/videos/intro.mp4"
+      poster="{assets}/images/video-poster-intro.jpg"
       notes="Drone footage from the Village 8 refugee camp in Sudan."
       ariaDescription="Aerial footage of people houses in refugee camp"
-    >
+    />
-      <!-- svelte-ignore a11y-media-has-caption -->
-      <video
-        autoplay
-        muted
-        playsinline
-        loop
-        preload="true"
-        width="100%"
-        poster="video-poster.png"
-        src="{assets}/videos/intro.mp4"
-      >
-      </video>
-    </GraphicBlock>
   </div>
 </HeroHeadline>
 

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

@@ -4,9 +4,12 @@ Reuters Graphics headline with a Hero media
 <script>
   import { HeroHeadline } from '@reuters-graphics/graphics-components';
   import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+
+  export let embedded = false;
 </script>
 
 <HeroHeadline
+  embedded="{embedded}"
   img="{`${assets}/images/myImage.jpg`}"
   hed="{'Reuters Graphics Interactive'}"
   dek="{'The beginning of a beautiful page'}"

src/components/HeroHeadline/stories/docs/customHed.md

@@ -4,9 +4,12 @@ Add a custom styled headline.
 <script>
   import { HeroHeadline } from '@reuters-graphics/graphics-components';
   import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+
+  export let embedded = false;
 </script>
 
 <HeroHeadline
+  embedded="{embedded}"
   class="custom-hed"
   authors="{[
     'Prasanta Kumar Dutta',

src/components/HeroHeadline/stories/docs/inlineGraphic.md

@@ -2,12 +2,18 @@ Reuters Graphics headline followed by a graphic or any media block.
 
 ```svelte
 <script>
-  import { HeroHeadline } from '@reuters-graphics/graphics-components';
+  import {
+    HeroHeadline,
+    GraphicBlock,
+  } from '@reuters-graphics/graphics-components';
   import Map from './ai2svelte/graphic.svelte';
   import { assets } from '$app/paths';
+
+  export let embedded = false;
 </script>
 
 <HeroHeadline
+  embedded="{embedded}"
   hed="{'The plunge from 29,000 feet'}"
   hedWidth="wide"
   class="mb-0"
@@ -19,7 +25,7 @@ Reuters Graphics headline followed by a graphic or any media block.
   <div slot="inline">
     <GraphicBlock
       width="widest"
-      role="figure"
+      role="img"
       class="my-0"
       textWidth="normal"
       notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"

src/components/HeroHeadline/stories/docs/inlinePhoto.md

@@ -0,0 +1,34 @@
+Reuters Graphics headline followed by a graphic or any media block.
+
+```svelte
+<script>
+  import {
+    HeroHeadline,
+    FeaturePhoto,
+  } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
+
+  export let embedded = false;
+</script>
+
+<HeroHeadline
+  embedded="{embedded}"
+  hed="{'Buried under the bricks'}"
+  hedWidth="wide"
+  class="mb-0"
+  dek="{'How mud-brick housing made the Morocco earthquake so deadly'}"
+  section="{'Global news'}"
+  authors="{['Mariano Zafra']}"
+  publishTime="{new Date('2020-01-01').toISOString()}"
+>
+  <div slot="inline">
+    <FeaturePhoto
+      width="widest"
+      class="my-0"
+      src="{`${assets}/images/myImage.jpg`}"
+      caption="Photo by REUTERS/Nacho Doce."
+      altText="A photo of the town of Adassil, Morocco, showing severe damage to many houses, which have collapsed after the earthquake. The houses are all made of mud brick."
+    />
+  </div>
+</HeroHeadline>
+```

src/components/HeroHeadline/stories/docs/inlineVideo.md

@@ -0,0 +1,34 @@
+Add a cover video and position the title with ease.
+
+```svelte
+<script>
+  import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
+
+  export let embedded = false;
+</script>
+
+<HeroHeadline
+  embedded="{embedded}"
+  hed="{'Devastation in Derna'}"
+  hedWidth="wide"
+  class="mb-0"
+  dek="{'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}"
+  section="{'Global news'}"
+  authors="{['Simon Scarr']}"
+  publishTime="{new Date('2020-01-01').toISOString()}"
+>
+  <div slot="inline">
+    <Video
+      width="widest"
+      class="my-0"
+      showControls="{false}"
+      preloadVideo="auto"
+      playVideoWhenInView="{false}"
+      src="{assets}/videos/intro.mp4"
+      notes="Drone shots of Derna, Libya. September 14, 2023. REUTERS"
+      ariaDescription="alttext fot video"
+    />
+  </div>
+</HeroHeadline>
+```

src/components/Video/Video.svelte

@@ -10,11 +10,31 @@
   /// //////////////////////////////////
 
   /**
-   * Video src.
+   * Video src
+   * @type {string}
+   * @required
    */
-  export let src = '';
+  export let src: string;
-  export let ariaHidden = true;
+
-  export let ariaDescription = null;
+  /**
+   * Image to be shown while the video is downloading
+   */
+  export let poster: string = '';
+
+  /**
+   * Whether to wrap the graphic with an aria hidden tag.
+   */
+  export let hidden: boolean = true;
+
+  /**
+   * ARIA description, passed in as a markdown string.
+   * @type {string}
+   */
+  export let ariaDescription: string | null = null;
+
+  /** Add extra classes to the block tag to target it with custom CSS. */
+  let cls: string = '';
+  export { cls as class };
 
   /**
    * Title of the graphic
@@ -136,9 +156,9 @@
   };
 
   // Warning to missing aria attributes
-  if (ariaHidden && !ariaDescription) {
+  if (hidden && !ariaDescription) {
     console.warn(
-      'Must provide aria description for video components if ariaHidden is true.'
+      'Must provide aria description for video components if hidden is true.'
     );
   }
 </script>
@@ -154,7 +174,7 @@
   description="{description}"
   notes="{notes}"
   width="{width}"
-  class="video-container"
+  class="video {cls}"
 >
   <div
     role="figure"
@@ -171,7 +191,7 @@
       interactiveControlsOpacity = 0;
     }}"
   >
-    {#if (ariaHidden && ariaDescription) || !ariaHidden}
+    {#if (hidden && ariaDescription) || !hidden}
       {#if ariaDescription}
         <p class="visually-hidden">{ariaDescription}</p>
       {/if}
@@ -187,7 +207,7 @@
           <div
             bind:this="{element}"
             class="video-wrapper relative block"
-            aria-hidden="{ariaHidden}"
+            aria-hidden="{hidden}"
             bind:clientWidth="{widthVideoContainer}"
             bind:clientHeight="{heightVideoContainer}"
           >
@@ -221,6 +241,7 @@
             <video
               bind:this="{videoElement}"
               src="{src}"
+              poster="{poster}"
               class="pointer-events-none relative"
               width="100%"
               muted="{muteVideo}"
@@ -241,7 +262,7 @@
         <!-- Video element without Intersection observer -->
         <div
           class="video-wrapper relative"
-          aria-hidden="{ariaHidden}"
+          aria-hidden="{hidden}"
           bind:clientWidth="{widthVideoContainer}"
           bind:clientHeight="{heightVideoContainer}"
         >
@@ -273,6 +294,7 @@
           <video
             bind:this="{videoElement}"
             src="{src}"
+            poster="{poster}"
             class="pointer-events-none relative"
             width="100%"
             muted="{muteVideo}"