From 06a8454178ec31ee5a6f28d985356ec644c62b22 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 19 Mar 2025 09:26:56 -0700
Subject: [PATCH 01/10] set up .mdx

---
 src/components/HeroHeadline/HeroHeadline.mdx  | 366 ++++++++++++++++++
 ...es.svelte => HeroHeadline.stories..svelte} | 151 ++++----
 .../{Hero.svelte => HeroHeadline.svelte}      |  11 +-
 .../{stories => demo}/eurovis.jpeg            | Bin
 .../graphics/CRASH_1-lg.jpeg                  | Bin
 .../graphics/CRASH_1-md.jpeg                  | Bin
 .../graphics/CRASH_1-sm.jpeg                  | Bin
 .../graphics/CRASH_1-xl.jpeg                  | Bin
 .../graphics/CRASH_1-xl_copy.jpeg             | Bin
 .../graphics/CRASH_1-xs.jpeg                  | Bin
 .../{stories => demo}/graphics/crash.svelte   |   0
 .../graphics/quake-map-top-lg.jpeg            | Bin
 .../graphics/quake-map-top-md.jpeg            | Bin
 .../graphics/quake-map-top-sm.jpeg            | Bin
 .../graphics/quake-map-top-xl.jpeg            | Bin
 .../graphics/quake-map-top-xs.jpeg            | Bin
 .../graphics/quakemap.svelte                  |   0
 .../HeroHeadline/{stories => demo}/polar.jpg  | Bin
 .../stories/docs/backgroundGraphic.md         |  84 ----
 .../stories/docs/backgroundVideo.md           |  51 ---
 .../HeroHeadline/stories/docs/component.md    |  20 -
 .../HeroHeadline/stories/docs/customHed.md    |  43 --
 .../stories/docs/inlineGraphic.md             |  38 --
 .../HeroHeadline/stories/docs/inlinePhoto.md  |  34 --
 .../HeroHeadline/stories/docs/inlineVideo.md  |  34 --
 .../stories/docs/transparentHeader.md         |  17 -
 26 files changed, 439 insertions(+), 410 deletions(-)
 create mode 100644 src/components/HeroHeadline/HeroHeadline.mdx
 rename src/components/HeroHeadline/{Hero.stories.svelte => HeroHeadline.stories..svelte} (66%)
 rename src/components/HeroHeadline/{Hero.svelte => HeroHeadline.svelte} (95%)
 rename src/components/HeroHeadline/{stories => demo}/eurovis.jpeg (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/CRASH_1-lg.jpeg (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/CRASH_1-md.jpeg (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/CRASH_1-sm.jpeg (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/CRASH_1-xl.jpeg (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/CRASH_1-xl_copy.jpeg (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/CRASH_1-xs.jpeg (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/crash.svelte (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/quake-map-top-lg.jpeg (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/quake-map-top-md.jpeg (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/quake-map-top-sm.jpeg (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/quake-map-top-xl.jpeg (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/quake-map-top-xs.jpeg (100%)
 rename src/components/HeroHeadline/{stories => demo}/graphics/quakemap.svelte (100%)
 rename src/components/HeroHeadline/{stories => demo}/polar.jpg (100%)
 delete mode 100644 src/components/HeroHeadline/stories/docs/backgroundGraphic.md
 delete mode 100644 src/components/HeroHeadline/stories/docs/backgroundVideo.md
 delete mode 100644 src/components/HeroHeadline/stories/docs/component.md
 delete mode 100644 src/components/HeroHeadline/stories/docs/customHed.md
 delete mode 100644 src/components/HeroHeadline/stories/docs/inlineGraphic.md
 delete mode 100644 src/components/HeroHeadline/stories/docs/inlinePhoto.md
 delete mode 100644 src/components/HeroHeadline/stories/docs/inlineVideo.md
 delete mode 100644 src/components/HeroHeadline/stories/docs/transparentHeader.md

diff --git a/src/components/HeroHeadline/HeroHeadline.mdx b/src/components/HeroHeadline/HeroHeadline.mdx
new file mode 100644
index 00000000..b5336d58
--- /dev/null
+++ b/src/components/HeroHeadline/HeroHeadline.mdx
@@ -0,0 +1,366 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as HeroHeadlineStories from './HeroHeadline.stories.svelte';
+
+<Meta of={HeroHeadlineStories} />
+
+# HeroHeadline
+
+The `HeroHeadline` component creates a Reuters Graphics headline with a Hero media.
+
+```svelte
+<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}
+  img={`${assets}/images/myImage.jpg`}
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  section={'World News'}
+  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+  publishTime={new Date('2022-03-04').toISOString()}
+/>
+```
+
+<Canvas of={HeroHeadlineStories.Demo} />
+
+## Transparent site header
+
+Make the hero full bleed and under the header.
+
+```scss
+// global.scss
+
+.nav-container {
+  background-color: transparent !important;
+}
+.nav-container .inner {
+  background-color: transparent !important;
+  border: none;
+}
+
+.hero-wrapper {
+  margin-top: -64px;
+}
+```
+
+<Canvas of={HeroHeadlineStories.TransparentHeader} />
+
+## With background graphic
+
+Reuters Graphics headline with ai2svelte graphic as background.
+
+```svelte
+<script>
+  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}
+  hed={'Earthquake devastates Afghanistan'}
+  hedSize={'big'}
+  hedWidth="wide"
+  class="custom-hero mb-0"
+  dek=""
+  authors={[
+    'Anand Katakam',
+    'Vijdan Mohammad Kawoosa',
+    'Adolfo Arranz',
+    'Wen Foo',
+    'Simon Scarr',
+    'Aman Bhargava',
+    'Jitesh Chowdhury',
+    'Manas Sharma',
+    'Aditi Bhandari',
+  ]}
+  publishTime={new Date('2022-06-24').toISOString()}
+>
+  <div slot="background">
+    <GraphicBlock
+      width="widest"
+      role="figure"
+      class="my-0"
+      textWidth="normal"
+      notes=""
+      ariaDescription="Earthquake impact map"
+    >
+      <svelte:component this={QuakeMap} />
+    </GraphicBlock>
+  </div>
+</HeroHeadline>
+
+<style lang="scss">
+  .hero-wrapper {
+    .custom-hero.headline {
+      // Adjust vertical positioning
+      align-items: flex-end !important;
+
+      @media (max-width: 1100px) {
+        // Adjust line length of title
+        max-width: var(--normal-column-width) !important;
+      }
+    }
+
+    // Make hero smaller than 100vh
+    --heroHeight: 85svh;
+
+    @media (max-width: 960px) {
+      --heroHeight: 65svh;
+    }
+
+    // For small height
+    @media (max-height: 850px) {
+      --heroHeight: 100svh;
+    }
+
+    // Custom hero sizing for landscape mobile
+    @media (max-width: 960px) and (orientation: landscape) {
+      --heroHeight: 200svh;
+    }
+  }
+
+  // Override default fixed height for hero layout in embeds
+  .hero-wrapper.embedded {
+    --heroHeight: 1000px;
+  }
+</style>
+```
+
+<Canvas of={HeroHeadlineStories.BackgroundGraphic} />
+
+## With background video
+
+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}
+  class="custom-hero"
+  hed="The conflict in Ethiopia"
+  hedSize="bigger"
+  hedWidth="wide"
+  authors={['Aditi Bhandari ', 'David Lewis']}
+  publishTime={new Date('2020-12-18').toISOString()}
+>
+  <div slot="background">
+    <Video
+      width="widest"
+      class="my-0"
+      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"
+    />
+  </div>
+</HeroHeadline>
+
+<style lang="scss">
+  .hero-wrapper {
+    --heroHeight: calc(100svh - 60px);
+    .custom-hero.headline {
+      header {
+        // Adjust vertical position as offset from default center
+        top: calc(50svh - 250px);
+      }
+
+      h1 {
+        color: #ffd430;
+        text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+      }
+    }
+  }
+</style>
+```
+
+<Canvas of={HeroHeadlineStories.BackgroundVideo} />
+
+## With inline photo
+
+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}
+  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>
+```
+
+<Canvas of={HeroHeadlineStories.InlinePhoto} />
+
+## With inline graphic
+
+Reuters Graphics headline followed by a graphic or any media block.
+
+```svelte
+<script>
+  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}
+  hed={'The plunge from 29,000 feet'}
+  hedWidth="wide"
+  class="mb-0"
+  dek={'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}
+  section={'Global news'}
+  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+  publishTime={new Date('2020-01-01').toISOString()}
+>
+  <div slot="inline">
+    <GraphicBlock
+      width="widest"
+      role="img"
+      class="my-0"
+      textWidth="normal"
+      notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
+      ariaDescription="Aerial map showing trajectory of crash"
+    >
+      <svelte:component this={Map} assetsPath={assets || '/'} />
+    </GraphicBlock>
+  </div>
+</HeroHeadline>
+```
+
+<Canvas of={HeroHeadlineStories.InlineGraphic} />
+
+## With inline video
+
+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}
+  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>
+```
+
+<Canvas of={HeroHeadlineStories.InlineVideo} />
+
+## Custom hed
+
+Add a custom styled headline.
+
+```svelte
+<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}
+  class="custom-hed"
+  authors={[
+    'Prasanta Kumar Dutta',
+    'Dea Bankova',
+    'Aditi Bhandari',
+    'Anurag Rao',
+  ]}
+  publishTime={new Date('2023-05-11').toISOString()}
+  img={`${assets}/images/myImage.jpg`}
+>
+  <h1 slot="hed">
+    <div class="body-note">A visual guide to</div>
+    <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
+  </h1>
+</HeroHeadline>
+
+<style lang="scss">
+  .custom-hed {
+    h1 {
+      .body-note {
+        color: #ffffff;
+      }
+      .title {
+        color: #ffffff;
+        text-shadow: 1px 1px 8px #ff7c88;
+        filter: drop-shadow(0px 0px 12px #ff7c88);
+      }
+    }
+  }
+</style>
+```
+
+    <Canvas of={HeroHeadlineStories.CustomHed} />
diff --git a/src/components/HeroHeadline/Hero.stories.svelte b/src/components/HeroHeadline/HeroHeadline.stories..svelte
similarity index 66%
rename from src/components/HeroHeadline/Hero.stories.svelte
rename to src/components/HeroHeadline/HeroHeadline.stories..svelte
index 91b9e59a..ca03867f 100644
--- a/src/components/HeroHeadline/Hero.stories.svelte
+++ b/src/components/HeroHeadline/HeroHeadline.stories..svelte
@@ -1,31 +1,10 @@
-<!-- @migration-task Error while migrating Svelte code: end is out of bounds -->
-<script context="module" lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
-  // @ts-ignore raw
-  import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
-  // @ts-ignore raw
-  import inlinePhotoDocs from './stories/docs/inlinePhoto.md?raw';
-  // @ts-ignore raw
-  import transparentHeaderDocs from './stories/docs/transparentHeader.md?raw';
-  // @ts-ignore raw
-  import videoDocs from './stories/docs/backgroundVideo.md?raw';
-  // @ts-ignore raw
-  import customHedDocs from './stories/docs/customHed.md?raw';
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import HeroHeadline from './HeroHeadline.svelte';
 
-  import HeroHeadline from './Hero.svelte';
-
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/HeroHeadline',
     component: HeroHeadline,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       hedSize: {
         control: 'select',
@@ -44,16 +23,12 @@
         options: ['normal', 'wide', 'wider', 'widest'],
       },
     },
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore img
-  import polarImgSrc from './stories/polar.jpg';
-  // @ts-ignore img
-  import eurovisImgSrc from './stories/eurovis.jpeg';
+  import polarImgSrc from './demo/polar.jpg';
+  import eurovisImgSrc from './demo/eurovis.jpeg';
 
   import Block from '../Block/Block.svelte';
   import SiteHeader from '../SiteHeader/SiteHeader.svelte';
@@ -61,31 +36,41 @@
   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';
+  import CrashMap from './demo/graphics/crash.svelte';
+  import QuakeMap from './demo/graphics/quakemap.svelte';
 </script>
 
-<Template let:args>
+{#snippet template(args)}
   <Block width="fluid" class="chromatic-ignore">
     <SiteHeader />
   </Block>
 
   <HeroHeadline {...args} />
-</Template>
+{/snippet}
 
 <Story
-  name="With backdrop photo"
-  args="{{
+  name="Demo"
+  args={{
     section: 'World News',
     hed: 'Reuters Graphics Interactive',
     dek: 'The beginning of a beautiful page',
     authors: ['Simon Scarr', 'Vijdan Mohammad Kawoosa'],
     publishTime: new Date('2022-03-04').toISOString(),
     img: polarImgSrc,
-  }}"
-/>
+  }}
+>
+  {@render template({
+    section: 'World News',
+    hed: 'Reuters Graphics Interactive',
+    dek: 'The beginning of a beautiful page',
+    authors: ['Simon Scarr', 'Vijdan Mohammad Kawoosa'],
+    publishTime: new Date('2022-03-04').toISOString(),
+    img: polarImgSrc,
+  })}
+</Story>
 
-<Story name="With transparent header" {...withStoryDocs(transparentHeaderDocs)}>
+<!-- 
+<Story name="With transparent header">
   <div class="transparent-header">
     <Block width="fluid" class="chromatic-ignore">
       <SiteHeader />
@@ -95,25 +80,25 @@
       section="World News"
       hed="Reuters Graphics Interactive"
       dek="The beginning of a beautiful page"
-      authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-      publishTime="{new Date('2022-03-04').toISOString()}"
-      img="{polarImgSrc}"
+      authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+      publishTime={new Date('2022-03-04').toISOString()}
+      img={polarImgSrc}
     />
   </div>
 </Story>
 
-<Story name="With backdrop graphic" {...withStoryDocs(backgroundGraphicDocs)}>
+<Story name="With backdrop graphic">
   <Block width="fluid" class="chromatic-ignore">
     <SiteHeader />
   </Block>
 
   <HeroHeadline
-    hed="{'Earthquake devastates Afghanistan'}"
-    hedSize="{'big'}"
+    hed={'Earthquake devastates Afghanistan'}
+    hedSize={'big'}
     hedWidth="wide"
     class="custom-hero mb-0"
     dek=""
-    authors="{[
+    authors={[
       'Anand Katakam',
       'Vijdan Mohammad Kawoosa',
       'Adolfo Arranz',
@@ -123,8 +108,8 @@
       'Jitesh Chowdhury',
       'Manas Sharma',
       'Aditi Bhandari',
-    ]}"
-    publishTime="{new Date('2022-06-24').toISOString()}"
+    ]}
+    publishTime={new Date('2022-06-24').toISOString()}
   >
     <div slot="background">
       <GraphicBlock
@@ -135,7 +120,7 @@
         notes=""
         ariaDescription="Earthquake impact map"
       >
-        <svelte:component this="{QuakeMap}" />
+        <svelte:component this={QuakeMap} />
       </GraphicBlock>
     </div>
   </HeroHeadline>
@@ -176,7 +161,7 @@
   </style>
 </Story>
 
-<Story name="With backdrop video" {...withStoryDocs(videoDocs)}>
+<Story name="With backdrop video">
   <Block width="fluid" class="chromatic-ignore">
     <SiteHeader />
   </Block>
@@ -186,16 +171,16 @@
     hed="The conflict in Ethiopia"
     hedSize="bigger"
     hedWidth="wide"
-    authors="{['Aditi Bhandari ', 'David Lewis']}"
-    publishTime="{new Date('2020-12-18').toISOString()}"
+    authors={['Aditi Bhandari ', 'David Lewis']}
+    publishTime={new Date('2020-12-18').toISOString()}
   >
     <div slot="background">
       <Video
         width="widest"
         class="my-0"
-        showControls="{false}"
+        showControls={false}
         preloadVideo="auto"
-        playVideoWhenInView="{false}"
+        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."
@@ -221,19 +206,19 @@
   </style>
 </Story>
 
-<Story name="With inline photo" {...withStoryDocs(inlinePhotoDocs)}>
+<Story name="With inline photo">
   <Block width="fluid" class="chromatic-ignore">
     <SiteHeader />
   </Block>
 
   <HeroHeadline
-    hed="{'Buried under the bricks'}"
+    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()}"
+    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
@@ -247,19 +232,19 @@
   </HeroHeadline>
 </Story>
 
-<Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
+<Story name="With inline graphic">
   <Block width="fluid" class="chromatic-ignore">
     <SiteHeader />
   </Block>
 
   <HeroHeadline
-    hed="{'The plunge from 29,000 feet'}"
+    hed={'The plunge from 29,000 feet'}
     hedWidth="wide"
     class="mb-0"
-    dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
-    section="{'Global news'}"
-    authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-    publishTime="{new Date('2020-01-01').toISOString()}"
+    dek={'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}
+    section={'Global news'}
+    authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+    publishTime={new Date('2020-01-01').toISOString()}
   >
     <div slot="inline">
       <GraphicBlock
@@ -270,33 +255,33 @@
         notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
         ariaDescription="Aerial map showing trajectory of crash"
       >
-        <svelte:component this="{CrashMap}" />
+        <svelte:component this={CrashMap} />
       </GraphicBlock>
     </div>
   </HeroHeadline>
 </Story>
 
-<Story name="With inline video" {...withStoryDocs(inlinePhotoDocs)}>
+<Story name="With inline video">
   <Block width="fluid" class="chromatic-ignore">
     <SiteHeader />
   </Block>
 
   <HeroHeadline
-    hed="{'Devastation in Derna'}"
+    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()}"
+    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}"
+        showControls={false}
         preloadVideo="auto"
-        playVideoWhenInView="{false}"
+        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"
@@ -305,17 +290,17 @@
   </HeroHeadline>
 </Story>
 
-<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
+<Story name="With custom hed">
   <HeroHeadline
     class="custom-hed"
-    authors="{[
+    authors={[
       'Prasanta Kumar Dutta',
       'Dea Bankova',
       'Aditi Bhandari',
       'Anurag Rao',
-    ]}"
-    publishTime="{new Date('2023-05-11').toISOString()}"
-    img="{eurovisImgSrc}"
+    ]}
+    publishTime={new Date('2023-05-11').toISOString()}
+    img={eurovisImgSrc}
   >
     <h1 slot="hed">
       <div class="body-note">A visual guide to</div>
@@ -337,7 +322,7 @@
       }
     }
   </style>
-</Story>
+</Story> -->
 
 <style lang="scss">
   .transparent-header {
diff --git a/src/components/HeroHeadline/Hero.svelte b/src/components/HeroHeadline/HeroHeadline.svelte
similarity index 95%
rename from src/components/HeroHeadline/Hero.svelte
rename to src/components/HeroHeadline/HeroHeadline.svelte
index 8bc3e39e..cceaee8f 100644
--- a/src/components/HeroHeadline/Hero.svelte
+++ b/src/components/HeroHeadline/HeroHeadline.svelte
@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-heroheadline--docs) -->
 <script lang="ts">
   import type { HeadlineSize } from '../@types/global';
@@ -96,7 +95,7 @@
         {#if $$slots.hed}
           <Headline
             class="{cls} !text-{hedAlign}"
-            width="{hedWidth}"
+            width={hedWidth}
             {section}
             {hedSize}
             {hed}
@@ -110,7 +109,7 @@
         {:else}
           <Headline
             class="{cls} !text-{hedAlign}"
-            width="{hedWidth}"
+            width={hedWidth}
             {section}
             {hedSize}
             {hed}
@@ -144,11 +143,11 @@
     <!-- Inline hero -->
     {#if $$slots.inline}
       <Block width="fluid" class="hero-headline inline-hero">
-        <PaddingReset containerIsFluid="{true}">
+        <PaddingReset containerIsFluid={true}>
           {#if $$slots.hed}
             <Headline
               class="{cls} !text-{hedAlign}"
-              width="{hedWidth}"
+              width={hedWidth}
               {section}
               {hedSize}
               {hed}
@@ -162,7 +161,7 @@
           {:else}
             <Headline
               class="{cls} !text-{hedAlign}"
-              width="{hedWidth}"
+              width={hedWidth}
               {section}
               {hedSize}
               {hed}
diff --git a/src/components/HeroHeadline/stories/eurovis.jpeg b/src/components/HeroHeadline/demo/eurovis.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/eurovis.jpeg
rename to src/components/HeroHeadline/demo/eurovis.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-lg.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-lg.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/CRASH_1-lg.jpeg
rename to src/components/HeroHeadline/demo/graphics/CRASH_1-lg.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-md.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-md.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/CRASH_1-md.jpeg
rename to src/components/HeroHeadline/demo/graphics/CRASH_1-md.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-sm.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-sm.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/CRASH_1-sm.jpeg
rename to src/components/HeroHeadline/demo/graphics/CRASH_1-sm.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-xl.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-xl.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/CRASH_1-xl.jpeg
rename to src/components/HeroHeadline/demo/graphics/CRASH_1-xl.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-xl_copy.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-xl_copy.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/CRASH_1-xl_copy.jpeg
rename to src/components/HeroHeadline/demo/graphics/CRASH_1-xl_copy.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-xs.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-xs.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/CRASH_1-xs.jpeg
rename to src/components/HeroHeadline/demo/graphics/CRASH_1-xs.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/crash.svelte b/src/components/HeroHeadline/demo/graphics/crash.svelte
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/crash.svelte
rename to src/components/HeroHeadline/demo/graphics/crash.svelte
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-lg.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-lg.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/quake-map-top-lg.jpeg
rename to src/components/HeroHeadline/demo/graphics/quake-map-top-lg.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-md.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-md.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/quake-map-top-md.jpeg
rename to src/components/HeroHeadline/demo/graphics/quake-map-top-md.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-sm.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-sm.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/quake-map-top-sm.jpeg
rename to src/components/HeroHeadline/demo/graphics/quake-map-top-sm.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-xl.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-xl.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/quake-map-top-xl.jpeg
rename to src/components/HeroHeadline/demo/graphics/quake-map-top-xl.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-xs.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-xs.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/quake-map-top-xs.jpeg
rename to src/components/HeroHeadline/demo/graphics/quake-map-top-xs.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/quakemap.svelte b/src/components/HeroHeadline/demo/graphics/quakemap.svelte
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/quakemap.svelte
rename to src/components/HeroHeadline/demo/graphics/quakemap.svelte
diff --git a/src/components/HeroHeadline/stories/polar.jpg b/src/components/HeroHeadline/demo/polar.jpg
similarity index 100%
rename from src/components/HeroHeadline/stories/polar.jpg
rename to src/components/HeroHeadline/demo/polar.jpg
diff --git a/src/components/HeroHeadline/stories/docs/backgroundGraphic.md b/src/components/HeroHeadline/stories/docs/backgroundGraphic.md
deleted file mode 100644
index c07b7b67..00000000
--- a/src/components/HeroHeadline/stories/docs/backgroundGraphic.md
+++ /dev/null
@@ -1,84 +0,0 @@
-Reuters Graphics headline with ai2svelte graphic as background.
-
-```svelte
-<script>
-  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"
-  class="custom-hero mb-0"
-  dek=""
-  authors="{[
-    'Anand Katakam',
-    'Vijdan Mohammad Kawoosa',
-    'Adolfo Arranz',
-    'Wen Foo',
-    'Simon Scarr',
-    'Aman Bhargava',
-    'Jitesh Chowdhury',
-    'Manas Sharma',
-    'Aditi Bhandari',
-  ]}"
-  publishTime="{new Date('2022-06-24').toISOString()}"
->
-  <div slot="background">
-    <GraphicBlock
-      width="widest"
-      role="figure"
-      class="my-0"
-      textWidth="normal"
-      notes=""
-      ariaDescription="Earthquake impact map"
-    >
-      <svelte:component this="{QuakeMap}" />
-    </GraphicBlock>
-  </div>
-</HeroHeadline>
-
-<style lang="scss">
-  .hero-wrapper {
-    .custom-hero.headline {
-      // Adjust vertical positioning
-      align-items: flex-end !important;
-
-      @media (max-width: 1100px) {
-        // Adjust line length of title
-        max-width: var(--normal-column-width) !important;
-      }
-    }
-
-    // Make hero smaller than 100vh
-    --heroHeight: 85svh;
-
-    @media (max-width: 960px) {
-      --heroHeight: 65svh;
-    }
-
-    // For small height
-    @media (max-height: 850px) {
-      --heroHeight: 100svh;
-    }
-
-    // Custom hero sizing for landscape mobile
-    @media (max-width: 960px) and (orientation: landscape) {
-      --heroHeight: 200svh;
-    }
-  }
-
-  // Override default fixed height for hero layout in embeds
-  .hero-wrapper.embedded {
-    --heroHeight: 1000px;
-  }
-</style>
-```
diff --git a/src/components/HeroHeadline/stories/docs/backgroundVideo.md b/src/components/HeroHeadline/stories/docs/backgroundVideo.md
deleted file mode 100644
index 49de9a18..00000000
--- a/src/components/HeroHeadline/stories/docs/backgroundVideo.md
+++ /dev/null
@@ -1,51 +0,0 @@
-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}"
-  class="custom-hero"
-  hed="The conflict in Ethiopia"
-  hedSize="bigger"
-  hedWidth="wide"
-  authors="{['Aditi Bhandari ', 'David Lewis']}"
-  publishTime="{new Date('2020-12-18').toISOString()}"
->
-  <div slot="background">
-    <Video
-      width="widest"
-      class="my-0"
-      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"
-    />
-  </div>
-</HeroHeadline>
-
-<style lang="scss">
-  .hero-wrapper {
-    --heroHeight: calc(100svh - 60px);
-    .custom-hero.headline {
-      header {
-        // Adjust vertical position as offset from default center
-        top: calc(50svh - 250px);
-      }
-
-      h1 {
-        color: #ffd430;
-        text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
-      }
-    }
-  }
-</style>
-```
diff --git a/src/components/HeroHeadline/stories/docs/component.md b/src/components/HeroHeadline/stories/docs/component.md
deleted file mode 100644
index a70548c1..00000000
--- a/src/components/HeroHeadline/stories/docs/component.md
+++ /dev/null
@@ -1,20 +0,0 @@
-Reuters Graphics headline with a Hero media
-
-```svelte
-<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'}"
-  section="{'World News'}"
-  authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-  publishTime="{new Date('2022-03-04').toISOString()}"
-/>
-```
diff --git a/src/components/HeroHeadline/stories/docs/customHed.md b/src/components/HeroHeadline/stories/docs/customHed.md
deleted file mode 100644
index 65ae17da..00000000
--- a/src/components/HeroHeadline/stories/docs/customHed.md
+++ /dev/null
@@ -1,43 +0,0 @@
-Add a custom styled headline.
-
-```svelte
-<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',
-    'Dea Bankova',
-    'Aditi Bhandari',
-    'Anurag Rao',
-  ]}"
-  publishTime="{new Date('2023-05-11').toISOString()}"
-  img="{`${assets}/images/myImage.jpg`}"
->
-  <h1 slot="hed">
-    <div class="body-note">A visual guide to</div>
-    <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
-  </h1>
-</HeroHeadline>
-
-<style lang="scss">
-  .custom-hed {
-    h1 {
-      .body-note {
-        color: #ffffff;
-      }
-      .title {
-        color: #ffffff;
-        text-shadow: 1px 1px 8px #ff7c88;
-        filter: drop-shadow(0px 0px 12px #ff7c88);
-      }
-    }
-  }
-</style>
-```
diff --git a/src/components/HeroHeadline/stories/docs/inlineGraphic.md b/src/components/HeroHeadline/stories/docs/inlineGraphic.md
deleted file mode 100644
index fef464a0..00000000
--- a/src/components/HeroHeadline/stories/docs/inlineGraphic.md
+++ /dev/null
@@ -1,38 +0,0 @@
-Reuters Graphics headline followed by a graphic or any media block.
-
-```svelte
-<script>
-  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"
-  dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
-  section="{'Global news'}"
-  authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-  publishTime="{new Date('2020-01-01').toISOString()}"
->
-  <div slot="inline">
-    <GraphicBlock
-      width="widest"
-      role="img"
-      class="my-0"
-      textWidth="normal"
-      notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
-      ariaDescription="Aerial map showing trajectory of crash"
-    >
-      <svelte:component this="{Map}" assetsPath="{assets || '/'}" />
-    </GraphicBlock>
-  </div>
-</HeroHeadline>
-```
diff --git a/src/components/HeroHeadline/stories/docs/inlinePhoto.md b/src/components/HeroHeadline/stories/docs/inlinePhoto.md
deleted file mode 100644
index 69f8df9e..00000000
--- a/src/components/HeroHeadline/stories/docs/inlinePhoto.md
+++ /dev/null
@@ -1,34 +0,0 @@
-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>
-```
diff --git a/src/components/HeroHeadline/stories/docs/inlineVideo.md b/src/components/HeroHeadline/stories/docs/inlineVideo.md
deleted file mode 100644
index dcf7c745..00000000
--- a/src/components/HeroHeadline/stories/docs/inlineVideo.md
+++ /dev/null
@@ -1,34 +0,0 @@
-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>
-```
diff --git a/src/components/HeroHeadline/stories/docs/transparentHeader.md b/src/components/HeroHeadline/stories/docs/transparentHeader.md
deleted file mode 100644
index 55761f94..00000000
--- a/src/components/HeroHeadline/stories/docs/transparentHeader.md
+++ /dev/null
@@ -1,17 +0,0 @@
-Make the hero full bleed and under the header.
-
-```scss
-// global.scss
-
-.nav-container {
-  background-color: transparent !important;
-}
-.nav-container .inner {
-  background-color: transparent !important;
-  border: none;
-}
-
-.hero-wrapper {
-  margin-top: -64px;
-}
-```

From 4f04bed5718d093c8225c8423972e0157fa5e608 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 19 Mar 2025 14:25:54 -0700
Subject: [PATCH 02/10] finished hero docs

---
 src/components/Byline/Byline.svelte           |   4 +-
 src/components/Headline/Headline.svelte       |   1 -
 src/components/HeroHeadline/HeroHeadline.mdx  | 316 ++++++++----------
 ...es..svelte => HeroHeadline.stories.svelte} | 240 ++++++-------
 .../HeroHeadline/HeroHeadline.svelte          | 299 +++++++++--------
 5 files changed, 398 insertions(+), 462 deletions(-)
 rename src/components/HeroHeadline/{HeroHeadline.stories..svelte => HeroHeadline.stories.svelte} (54%)

diff --git a/src/components/Byline/Byline.svelte b/src/components/Byline/Byline.svelte
index fa8e2558..8b67574a 100644
--- a/src/components/Byline/Byline.svelte
+++ b/src/components/Byline/Byline.svelte
@@ -19,7 +19,7 @@
      * Update time as a datetime string.
      * @type {string}
      */
-    updateTime: string;
+    updateTime?: string;
     /**
      * Alignment of the byline.
      * @type {string}
@@ -130,7 +130,7 @@
         <div class="whitespace-nowrap inline-block">
           Published
           <time datetime={publishTime}>
-            {#if isValidDate(updateTime)}
+            {#if updateTime && isValidDate(updateTime)}
               {apdate(new Date(publishTime))}
             {:else}
               {apdate(new Date(publishTime))}&nbsp;&nbsp;{formatTime(
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 07e77005..1858db98 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -12,7 +12,6 @@
   interface Props {
     /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
     hed: string | Snippet;
-
     /** Add extra classes to the block tag to target it with custom CSS. */
     class?: string;
     /** Headline size: small, normal, big, bigger, biggest */
diff --git a/src/components/HeroHeadline/HeroHeadline.mdx b/src/components/HeroHeadline/HeroHeadline.mdx
index b5336d58..47051f80 100644
--- a/src/components/HeroHeadline/HeroHeadline.mdx
+++ b/src/components/HeroHeadline/HeroHeadline.mdx
@@ -6,44 +6,50 @@ import * as HeroHeadlineStories from './HeroHeadline.stories.svelte';
 
 # HeroHeadline
 
-The `HeroHeadline` component creates a Reuters Graphics headline with a Hero media.
+The `HeroHeadline` component creates a Reuters Graphics headline with a hero media, which can be a graphic, photo, video, or any other media.
+
+By default, the hero is in the background, i.e. the headline and dek are stacked on top of the hero. You can unstack and make the headline and dek come before or after the hero media by setting `stacked: true`. [Read more.](?path=/docs/components-text-elements-heroheadline--docs&globals=#transparent-site-header)
+
+## Photo hero
+
+To use a photo as the hero, simply pass the image source to the `img` prop.
 
 ```svelte
+<!-- App.svelte -->
 <script>
   import { HeroHeadline } from '@reuters-graphics/graphics-components';
   import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
 
-  export let embedded = false;
+  let { embedded = false } = $props(); // 👈 If using in the Graphics Kit...
 </script>
 
 <HeroHeadline
   {embedded}
-  img={`${assets}/images/myImage.jpg`}
+  img={`${assets}/images/polar-bear.jpg`}
+  ariaDescription="A photo of a polar bear"
+  notes="Photo by REUTERS"
+  section={'World News'}
   hed={'Reuters Graphics Interactive'}
   dek={'The beginning of a beautiful page'}
-  section={'World News'}
-  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
-  publishTime={new Date('2022-03-04').toISOString()}
+  authors={['Jane Doe', 'John Doe']}
 />
 ```
 
-<Canvas of={HeroHeadlineStories.Demo} />
+<Canvas of={HeroHeadlineStories.PhotoHero} />
 
 ## Transparent site header
 
-Make the hero full bleed and under the header.
+In the Graphics Kit, set styles in `global.scss` to make the Reuters site header transparent and make the hero go all the way to the top of the page:
 
 ```scss
 // global.scss
-
 .nav-container {
   background-color: transparent !important;
 }
 .nav-container .inner {
   background-color: transparent !important;
-  border: none;
+  border: none !important;
 }
-
 .hero-wrapper {
   margin-top: -64px;
 }
@@ -51,29 +57,35 @@ Make the hero full bleed and under the header.
 
 <Canvas of={HeroHeadlineStories.TransparentHeader} />
 
-## With background graphic
+## Ai2svelte hero
 
-Reuters Graphics headline with ai2svelte graphic as background.
+To use an ai2svelte graphic as the hero, wrap your ai2svelte component in a `GraphicBlock` component and insert it inside the `HeroHeadline` component.
+
+To customise styles, use CSS to target the class passed to `HeroHeadline`.
+
+> **Note:** Pass `notes` and `ariaDescription` to the `GraphicBlock` component to provide additional information about the ai2svelte graphic.
 
 ```svelte
+<!-- App.svelte -->
 <script>
   import {
     HeroHeadline,
     GraphicBlock,
   } from '@reuters-graphics/graphics-components';
-  import QuakeMap from './ai2svelte/graphic.svelte';
-  import { assets } from '$app/paths';
 
-  export let embedded = false;
+  import QuakeMap from './ai2svelte/graphic.svelte'; // Your ai2svelte component
+
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+
+  export let embedded = false; // 👈 If using in the Graphics Kit...
 </script>
 
 <HeroHeadline
   {embedded}
-  hed={'Earthquake devastates Afghanistan'}
-  hedSize={'big'}
+  hed="Earthquake devastates Afghanistan"
+  hedSize="big"
   hedWidth="wide"
   class="custom-hero mb-0"
-  dek=""
   authors={[
     'Anand Katakam',
     'Vijdan Mohammad Kawoosa',
@@ -87,20 +99,18 @@ Reuters Graphics headline with ai2svelte graphic as background.
   ]}
   publishTime={new Date('2022-06-24').toISOString()}
 >
-  <div slot="background">
-    <GraphicBlock
-      width="widest"
-      role="figure"
-      class="my-0"
-      textWidth="normal"
-      notes=""
-      ariaDescription="Earthquake impact map"
-    >
-      <svelte:component this={QuakeMap} />
-    </GraphicBlock>
-  </div>
+  <GraphicBlock
+    width="widest"
+    role="figure"
+    class="my-0"
+    ariaDescription="Earthquake impact map"
+  >
+    <!-- Pass `assetsPath` if in Graphics Kit -->
+    <QuakeMap assetsPath={assets || '/'} />
+  </GraphicBlock>
 </HeroHeadline>
 
+<!-- Customise styles using the class (e.g. `custom-hero` here) passed to `HeroHeadline` -->
 <style lang="scss">
   .hero-wrapper {
     .custom-hero.headline {
@@ -113,7 +123,7 @@ Reuters Graphics headline with ai2svelte graphic as background.
       }
     }
 
-    // Make hero smaller than 100vh
+    // Make hero shorter than 100vh
     --heroHeight: 85svh;
 
     @media (max-width: 960px) {
@@ -138,48 +148,49 @@ Reuters Graphics headline with ai2svelte graphic as background.
 </style>
 ```
 
-<Canvas of={HeroHeadlineStories.BackgroundGraphic} />
+<Canvas of={HeroHeadlineStories.Ai2svelteHero} />
 
-## With background video
+## Video hero
 
-Add a cover video and position the title with ease.
+To add a video as the hero, use the [Video](?path=/docs/components-multimedia-video--docs) component. To customise styles, use CSS to target the class passed to `HeroHeadline`.
+
+> **Note:** Pass `notes` and `ariaDescription` to the `GraphicBlock` component to provide additional information about the video.
 
 ```svelte
 <script>
   import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
 
-  export let embedded = false;
+  export let embedded = false; // 👈 If using in the Graphics Kit...
 </script>
 
 <HeroHeadline
   {embedded}
-  class="custom-hero"
+  class="video-hero"
   hed="The conflict in Ethiopia"
   hedSize="bigger"
   hedWidth="wide"
   authors={['Aditi Bhandari ', 'David Lewis']}
   publishTime={new Date('2020-12-18').toISOString()}
 >
-  <div slot="background">
-    <Video
-      width="widest"
-      class="my-0"
-      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"
-    />
-  </div>
+  <Video
+    width="widest"
+    class="my-0"
+    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"
+  />
 </HeroHeadline>
 
+<!-- Customise styles using the class (e.g. `video-hero` here) passed to `HeroHeadline` -->
 <style lang="scss">
   .hero-wrapper {
     --heroHeight: calc(100svh - 60px);
-    .custom-hero.headline {
+    .video-hero.headline {
       header {
         // Adjust vertical position as offset from default center
         top: calc(50svh - 250px);
@@ -194,143 +205,61 @@ Add a cover video and position the title with ease.
 </style>
 ```
 
-<Canvas of={HeroHeadlineStories.BackgroundVideo} />
+<Canvas of={HeroHeadlineStories.VideoHero} />
 
-## With inline photo
+## Inline hero
 
-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}
-  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>
-```
-
-<Canvas of={HeroHeadlineStories.InlinePhoto} />
-
-## With inline graphic
-
-Reuters Graphics headline followed by a graphic or any media block.
+To use a photo, graphic, video, etc. as an inline hero -- i.e. to make the hero appear below or above the headline and dek, not on top -- set `stacked` to `false`. Otherwise add your hero media as documented above.
+
+> **Note:** Pass `notes` and `ariaDescription` to the component you're inserting into `HeroHeadline` to provide additional information.
 
 ```svelte
+<!-- App.svelte -->
 <script>
   import {
     HeroHeadline,
     GraphicBlock,
   } from '@reuters-graphics/graphics-components';
-  import Map from './ai2svelte/graphic.svelte';
-  import { assets } from '$app/paths';
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
 
-  export let embedded = false;
+  export let embedded = false; // 👈 If using in the Graphics Kit...
 </script>
 
+<!-- Set `stacked` to `false` -->
 <HeroHeadline
   {embedded}
-  hed={'The plunge from 29,000 feet'}
-  hedWidth="wide"
+  stacked={false}
+  section="Global news"
+  hed="The plunge from 29,000 feet"
+  dek="How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes."
   class="mb-0"
-  dek={'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}
-  section={'Global news'}
   authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
   publishTime={new Date('2020-01-01').toISOString()}
 >
-  <div slot="inline">
-    <GraphicBlock
-      width="widest"
-      role="img"
-      class="my-0"
-      textWidth="normal"
-      notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
-      ariaDescription="Aerial map showing trajectory of crash"
-    >
-      <svelte:component this={Map} assetsPath={assets || '/'} />
-    </GraphicBlock>
-  </div>
+  <GraphicBlock
+    width="widest"
+    role="figure"
+    class="my-0"
+    ariaDescription="Earthquake impact map"
+    notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
+  >
+    <!-- Pass `assetsPath` if in Graphics Kit -->
+    <CrashMap assetsPath={assets || '/'} />
+  </GraphicBlock>
 </HeroHeadline>
 ```
 
-<Canvas of={HeroHeadlineStories.InlineGraphic} />
+<Canvas of={HeroHeadlineStories.InlineHero} />
 
-## With inline video
+## Custom hed and dek
 
-Add a cover video and position the title with ease.
+The `HeroHeadline` component internally uses the [Headline](?path=/docs/components-text-elements-headline--docs) component to render the headline and dek.
+
+If `hed` and `dek` values are strings, they are rendered according to the default Reuters style. To customise the headline and dek, pass custom `hed` and `dek` elements as [snippets](https://svelte.dev/docs/svelte/snippet) to `HeroHeadline` -- the same way as you would with `Headline`.
 
 ```svelte
-<script>
-  import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
-
-  export let embedded = false;
-</script>
-
+<!-- App.svelte -->
 <HeroHeadline
-  {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>
-```
-
-<Canvas of={HeroHeadlineStories.InlineVideo} />
-
-## Custom hed
-
-Add a custom styled headline.
-
-```svelte
-<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}
   class="custom-hed"
   authors={[
     'Prasanta Kumar Dutta',
@@ -339,28 +268,53 @@ Add a custom styled headline.
     'Anurag Rao',
   ]}
   publishTime={new Date('2023-05-11').toISOString()}
-  img={`${assets}/images/myImage.jpg`}
+  img={eurovisImgSrc}
 >
-  <h1 slot="hed">
-    <div class="body-note">A visual guide to</div>
-    <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
-  </h1>
-</HeroHeadline>
+  <!-- Custom hed snippet -->
+  {#snippet hed()}
+    <h1>
+      <div class="body-note">A visual guide to</div>
+      <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
+    </h1>
+  {/snippet}
 
-<style lang="scss">
-  .custom-hed {
-    h1 {
-      .body-note {
-        color: #ffffff;
+  <!-- Custom dek snippet -->
+  {#snippet dek()}
+    <div class="dek">
+      <p>
+        Performers from 37 countries are coming together May 9-13 in Liverpool,
+        England, for the 67th annual Eurovision Song Contest. The winner gets
+        the trophy and their country gets the right to host next year’s event,
+        produced by the European Broadcasting Union (EBU).
+      </p>
+    </div>
+  {/snippet}
+
+  <!-- Style your custom hed and dek -->
+  <style lang="scss">
+    .custom-hed {
+      h1 {
+        .body-note {
+          color: #ffffff;
+        }
+        .title {
+          color: #ffffff;
+          text-shadow: 1px 1px 8px #ff7c88;
+          filter: drop-shadow(0px 0px 12px #ff7c88);
+        }
       }
-      .title {
-        color: #ffffff;
-        text-shadow: 1px 1px 8px #ff7c88;
-        filter: drop-shadow(0px 0px 12px #ff7c88);
+
+      .dek {
+        margin-top: 1rem;
+        p {
+          color: #ffffff;
+          text-shadow: 1px 1px 8px #ff7c88;
+          filter: drop-shadow(0px 0px 12px #ff7c88);
+        }
       }
     }
-  }
-</style>
+  </style>
+</HeroHeadline>
 ```
 
-    <Canvas of={HeroHeadlineStories.CustomHed} />
+<Canvas of={HeroHeadlineStories.CustomHed} />
diff --git a/src/components/HeroHeadline/HeroHeadline.stories..svelte b/src/components/HeroHeadline/HeroHeadline.stories.svelte
similarity index 54%
rename from src/components/HeroHeadline/HeroHeadline.stories..svelte
rename to src/components/HeroHeadline/HeroHeadline.stories.svelte
index ca03867f..c2f3baf9 100644
--- a/src/components/HeroHeadline/HeroHeadline.stories..svelte
+++ b/src/components/HeroHeadline/HeroHeadline.stories.svelte
@@ -26,7 +26,7 @@
   });
 </script>
 
-<script>
+<script lang="ts">
   import polarImgSrc from './demo/polar.jpg';
   import eurovisImgSrc from './demo/eurovis.jpeg';
 
@@ -40,54 +40,61 @@
   import QuakeMap from './demo/graphics/quakemap.svelte';
 </script>
 
-{#snippet template(args)}
+<Story name="Photo hero" exportName="PhotoHero">
   <Block width="fluid" class="chromatic-ignore">
     <SiteHeader />
   </Block>
-
-  <HeroHeadline {...args} />
-{/snippet}
-
-<Story
-  name="Demo"
-  args={{
-    section: 'World News',
-    hed: 'Reuters Graphics Interactive',
-    dek: 'The beginning of a beautiful page',
-    authors: ['Simon Scarr', 'Vijdan Mohammad Kawoosa'],
-    publishTime: new Date('2022-03-04').toISOString(),
-    img: polarImgSrc,
-  }}
->
-  {@render template({
-    section: 'World News',
-    hed: 'Reuters Graphics Interactive',
-    dek: 'The beginning of a beautiful page',
-    authors: ['Simon Scarr', 'Vijdan Mohammad Kawoosa'],
-    publishTime: new Date('2022-03-04').toISOString(),
-    img: polarImgSrc,
-  })}
+  <HeroHeadline
+    section="World News"
+    hed="Reuters Graphics Interactive"
+    dek="The beginning of a beautiful page"
+    authors={['Jane Doe', 'John Doe']}
+    publishTime={new Date('2022-03-04').toISOString()}
+    img={polarImgSrc}
+    notes="Photo by REUTERS"
+    ariaDescription="A photo of a polar bear"
+  />
 </Story>
 
-<!-- 
-<Story name="With transparent header">
+<Story name="Feature photo hero" exportName="FeaturePhotoHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+  <HeroHeadline
+    section="World News"
+    hed="Reuters Graphics Interactive"
+    dek="The beginning of a beautiful page"
+    authors={['Jane Doe', 'John Doe']}
+    publishTime={new Date('2022-03-04').toISOString()}
+  >
+    <FeaturePhoto
+      width="widest"
+      class="my-0"
+      src={polarImgSrc}
+      caption="Photo by REUTERS."
+      altText="A photo of a polar bear."
+    />
+  </HeroHeadline>
+</Story>
+
+<Story name="Transparent header" exportName="TransparentHeader">
   <div class="transparent-header">
     <Block width="fluid" class="chromatic-ignore">
       <SiteHeader />
     </Block>
-
     <HeroHeadline
       section="World News"
       hed="Reuters Graphics Interactive"
       dek="The beginning of a beautiful page"
-      authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+      authors={['Jane Doe', 'John Doe']}
       publishTime={new Date('2022-03-04').toISOString()}
       img={polarImgSrc}
+      ariaDescription="A photo of a polar bear"
     />
   </div>
 </Story>
 
-<Story name="With backdrop graphic">
+<Story name="Ai2svelte hero" exportName="Ai2svelteHero">
   <Block width="fluid" class="chromatic-ignore">
     <SiteHeader />
   </Block>
@@ -97,7 +104,6 @@
     hedSize={'big'}
     hedWidth="wide"
     class="custom-hero mb-0"
-    dek=""
     authors={[
       'Anand Katakam',
       'Vijdan Mohammad Kawoosa',
@@ -111,18 +117,14 @@
     ]}
     publishTime={new Date('2022-06-24').toISOString()}
   >
-    <div slot="background">
-      <GraphicBlock
-        width="widest"
-        role="figure"
-        class="my-0"
-        textWidth="normal"
-        notes=""
-        ariaDescription="Earthquake impact map"
-      >
-        <svelte:component this={QuakeMap} />
-      </GraphicBlock>
-    </div>
+    <GraphicBlock
+      width="widest"
+      role="figure"
+      class="my-0"
+      ariaDescription="Earthquake impact map"
+    >
+      <QuakeMap />
+    </GraphicBlock>
   </HeroHeadline>
   <style lang="scss">
     .hero-wrapper {
@@ -136,7 +138,7 @@
         }
       }
 
-      // Make hero smaller than 100vh
+      // Make hero shorter than 100vh
       --heroHeight: 85svh;
 
       @media (max-width: 960px) {
@@ -161,12 +163,13 @@
   </style>
 </Story>
 
-<Story name="With backdrop video">
+<Story name="Video hero" exportName="VideoHero">
   <Block width="fluid" class="chromatic-ignore">
     <SiteHeader />
   </Block>
 
   <HeroHeadline
+    stacked={false}
     class="video-hero"
     hed="The conflict in Ethiopia"
     hedSize="bigger"
@@ -174,19 +177,17 @@
     authors={['Aditi Bhandari ', 'David Lewis']}
     publishTime={new Date('2020-12-18').toISOString()}
   >
-    <div slot="background">
-      <Video
-        width="widest"
-        class="my-0"
-        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"
-      />
-    </div>
+    <Video
+      width="widest"
+      class="my-0"
+      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"
+    />
   </HeroHeadline>
   <style lang="scss">
     .hero-wrapper {
@@ -206,91 +207,34 @@
   </style>
 </Story>
 
-<Story name="With inline photo">
+<Story name="Inline hero" exportName="InlineHero">
   <Block width="fluid" class="chromatic-ignore">
     <SiteHeader />
   </Block>
 
+  <!-- Set `stacked` to `false` -->
   <HeroHeadline
-    hed={'Buried under the bricks'}
-    hedWidth="wide"
+    stacked={false}
+    section="Global news"
+    hed="The plunge from 29,000 feet"
+    dek="How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes."
     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">
-  <Block width="fluid" class="chromatic-ignore">
-    <SiteHeader />
-  </Block>
-
-  <HeroHeadline
-    hed={'The plunge from 29,000 feet'}
-    hedWidth="wide"
-    class="mb-0"
-    dek={'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}
-    section={'Global news'}
     authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
     publishTime={new Date('2020-01-01').toISOString()}
   >
-    <div slot="inline">
-      <GraphicBlock
-        width="widest"
-        role="img"
-        class="my-0"
-        textWidth="normal"
-        notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
-        ariaDescription="Aerial map showing trajectory of crash"
-      >
-        <svelte:component this={CrashMap} />
-      </GraphicBlock>
-    </div>
+    <GraphicBlock
+      width="widest"
+      role="figure"
+      class="my-0"
+      ariaDescription="Earthquake impact map"
+      notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
+    >
+      <CrashMap />
+    </GraphicBlock>
   </HeroHeadline>
 </Story>
 
-<Story name="With inline video">
-  <Block width="fluid" class="chromatic-ignore">
-    <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">
+<Story name="Custom hed" exportName="CustomHed">
   <HeroHeadline
     class="custom-hed"
     authors={[
@@ -302,10 +246,23 @@
     publishTime={new Date('2023-05-11').toISOString()}
     img={eurovisImgSrc}
   >
-    <h1 slot="hed">
-      <div class="body-note">A visual guide to</div>
-      <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
-    </h1>
+    {#snippet hed()}
+      <h1>
+        <div class="body-note">A visual guide to</div>
+        <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
+      </h1>
+    {/snippet}
+
+    {#snippet dek()}
+      <div class="dek">
+        <p>
+          Performers from 37 countries are coming together May 9-13 in
+          Liverpool, England, for the 67th annual Eurovision Song Contest. The
+          winner gets the trophy and their country gets the right to host next
+          year’s event, produced by the European Broadcasting Union (EBU).
+        </p>
+      </div>
+    {/snippet}
   </HeroHeadline>
 
   <style lang="scss">
@@ -320,9 +277,18 @@
           filter: drop-shadow(0px 0px 12px #ff7c88);
         }
       }
+
+      .dek {
+        margin-top: 1rem;
+        p {
+          color: #ffffff;
+          text-shadow: 1px 1px 8px #ff7c88;
+          filter: drop-shadow(0px 0px 12px #ff7c88);
+        }
+      }
     }
   </style>
-</Story> -->
+</Story>
 
 <style lang="scss">
   .transparent-header {
@@ -331,7 +297,7 @@
     }
     :global(.nav-container .inner) {
       background-color: transparent !important;
-      border: none;
+      border: none !important;
     }
 
     :global(.hero-wrapper) {
diff --git a/src/components/HeroHeadline/HeroHeadline.svelte b/src/components/HeroHeadline/HeroHeadline.svelte
index cceaee8f..06de711c 100644
--- a/src/components/HeroHeadline/HeroHeadline.svelte
+++ b/src/components/HeroHeadline/HeroHeadline.svelte
@@ -1,127 +1,142 @@
 <!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-heroheadline--docs) -->
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import type { HeadlineSize } from '../@types/global';
 
-  /** Set to true for embeddables. */
-  export let embedded: boolean = false;
-
-  /**
-   * Path to background image
-   * @type {string}
-   */
-  export let img: string | null = null;
-
-  /**
-   * ARIA description, passed in as a markdown string.
-   * @type {string}
-   */
-  export let ariaDescription: string | null = null;
-
-  /**
-   * Notes to the graphic, passed in as a markdown string.
-   * @type {string}
-   */
-  export let notes: string | null = null;
-
-  /**
-   * Headline, parsed as an _inline_ markdown string in an `h1` element.
-   * @type {string}
-   */
-  export let hed: string = 'Reuters Graphics Interactive';
-
-  /** Add extra classes to the block tag to target it with custom CSS. */
-  let cls: string = '';
-  export { cls as class };
-
-  /**
-   * Headline size
-   * @type {string}
-   */
-  export let hedSize: HeadlineSize = 'normal';
-
-  /**
-   * Headline horizontal alignment
-   * @type {string}
-   */
-  export let hedAlign: 'left' | 'center' | 'right' = 'center';
-
-  /**
-   * Width of the headline.
-   */
-  export let hedWidth: 'normal' | 'wide' | 'wider' | 'widest' = 'normal';
-
-  /**
-   * Dek, parsed as a markdown string.
-   * @type {string}
-   */
-  export let dek: string | null = null;
-  /**
-   * Section title
-   * @type {string}
-   */
-  export let section: string | null = null;
-  /**
-   * Array of author names, which will be slugified to create links to Reuters author pages
-   */
-  export let authors: string[] = [];
-  /**
-   * Publish time as a datetime string.
-   * @type {string}
-   */
-  export let publishTime: string = '';
-  /**
-   * Update time as a datetime string.
-   * @type {string}
-   */
-  export let updateTime: string = '';
-
-  /**
-   * Width of the Hero graphic.
-   */
-  export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'widest';
-
-  import Headline from '../Headline/Headline.svelte';
-  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  // Components
   import Block from '../Block/Block.svelte';
-  import Byline from '../Byline/Byline.svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+  import Headline from '../Headline/Headline.svelte';
+  import Byline from '../Byline/Byline.svelte';
+
+  export interface Props {
+    /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
+    hed: string | Snippet;
+    /**
+     * Optional snippet for a custom hero graphic, photo, etc.
+     */
+    children?: Snippet;
+    /** Set to `false` for non-stacked hero headline */
+    stacked?: boolean;
+    /**
+     * Path to background image
+     */
+    img?: string;
+    /**
+     * ARIA description, passed in as a markdown string.
+     */
+    ariaDescription?: string;
+    /**
+     * Notes to the graphic, passed in as a markdown string.
+     */
+    notes?: string;
+
+    /** Add classes to the block tag to target it with custom CSS. */
+    class?: string;
+    /**
+     * Headline size
+     */
+    hedSize?: HeadlineSize;
+    /**
+     * Headline horizontal alignment: left, center, right
+     */
+    hedAlign?: 'left' | 'center' | 'right';
+    /**
+     * Width of the headline: normal, wide, wider, widest
+     */
+    hedWidth?: 'normal' | 'wide' | 'wider' | 'widest';
+    /**
+     * Dek, parsed as a markdown string OR as a custom snippet.
+     */
+    dek?: string | Snippet;
+    /**
+     * Section title
+     */
+    section?: string;
+    /**
+     * Array of author names, which will be slugified to create links to Reuters author pages
+     */
+    authors?: string[];
+    /**
+     * Publish time as a datetime string.
+     */
+    publishTime: string;
+    /**
+     * Update time as a datetime string.
+     */
+    updateTime?: string;
+    /**
+     * Width of the hero graphic: normal, wide, wider, widest
+     */
+    width?: 'normal' | 'wide' | 'wider' | 'widest';
+    /** Set to true for embeddables. */
+    embedded?: boolean;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+    /**
+     * Optional snippet for a custom byline.
+     */
+    byline?: Snippet;
+    /**
+     * Optional snippet for a custom published dateline.
+     */
+    published?: Snippet;
+    /**
+     * Optional snippet for a custom updated dateline.
+     */
+    updated?: Snippet;
+  }
+
+  let {
+    hed,
+    stacked = true,
+    img,
+    ariaDescription,
+    notes,
+    class: cls = '',
+    hedSize = 'normal',
+    hedAlign = 'center',
+    hedWidth = 'normal',
+    dek,
+    section,
+    authors = [],
+    publishTime,
+    updateTime,
+    width = 'widest',
+    embedded = false,
+    children,
+    getAuthorPage,
+    byline,
+    published,
+    updated,
+  }: Props = $props();
 </script>
 
 <div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">
   <div class="hero-wrapper fmb-6" class:embedded>
-    <!-- Background media hero-->
-    {#if $$slots.background || img}
+    <!-- stacked media hero-->
+    {#if stacked}
       <Block width="fluid" class="hero-headline background-hero fmt-0">
-        {#if $$slots.hed}
-          <Headline
-            class="{cls} !text-{hedAlign}"
-            width={hedWidth}
-            {section}
-            {hedSize}
-            {hed}
-            {dek}
-          >
-            <!-- Headline named slot -->
-            <div slot="hed">
-              <slot name="hed" />
-            </div>
-          </Headline>
-        {:else}
-          <Headline
-            class="{cls} !text-{hedAlign}"
-            width={hedWidth}
-            {section}
-            {hedSize}
-            {hed}
-            {dek}
-          />
-        {/if}
+        <!-- Handles string or snippet `hed` -->
+        <Headline
+          class="{cls} !text-{hedAlign}"
+          width={hedWidth}
+          {section}
+          {hedSize}
+          {hed}
+          {dek}
+        />
 
         <div class="graphic-container">
-          {#if $$slots.background}
-            <!-- Hero graphic named slot -->
-            <slot name="background" />
-          {:else}
+          <!-- Custom hero snippet -->
+          {#if children}
+            {@render children()}
+
+            <!-- Otherwise render the image if it exists -->
+          {:else if img}
             <GraphicBlock
               {width}
               role="img"
@@ -140,47 +155,49 @@
       </Block>
     {/if}
 
-    <!-- Inline hero -->
-    {#if $$slots.inline}
+    <!-- Non-stacked hero -->
+    {#if stacked === false}
       <Block width="fluid" class="hero-headline inline-hero">
         <PaddingReset containerIsFluid={true}>
-          {#if $$slots.hed}
-            <Headline
-              class="{cls} !text-{hedAlign}"
-              width={hedWidth}
-              {section}
-              {hedSize}
-              {hed}
-              {dek}
-            >
-              <!-- Headline named slot -->
-              <div slot="hed">
-                <slot name="hed" />
-              </div>
-            </Headline>
-          {:else}
-            <Headline
-              class="{cls} !text-{hedAlign}"
-              width={hedWidth}
-              {section}
-              {hedSize}
-              {hed}
-              {dek}
-            />
-          {/if}
+          <Headline
+            class="{cls} !text-{hedAlign}"
+            width={hedWidth}
+            {section}
+            {hedSize}
+            {hed}
+            {dek}
+          />
         </PaddingReset>
         <div class="graphic-container">
-          <!-- Hero named slot -->
-          <slot name="inline" />
+          <!-- Custom hero snippet -->
+          {#if children}
+            {@render children()}
+
+            <!-- Otherwise render the image if it exists -->
+          {:else if img}
+            <GraphicBlock
+              {width}
+              role="img"
+              class="my-0"
+              textWidth="normal"
+              {notes}
+              {ariaDescription}
+            >
+              <div
+                class="background-image"
+                style="background-image: url({img})"
+              ></div>
+            </GraphicBlock>
+          {/if}
         </div>
       </Block>
     {/if}
   </div>
 
   <div class="hero-byline fmb-6">
-    {#if $$slots.byline}
+    {#if byline}
       <!-- Custom byline/dateline -->
-      <slot name="byline" />
+      {@render byline()}
     {:else if authors.length > 0 || publishTime}
       <Byline {authors} {publishTime} {updateTime} align="left" />
     {/if}

From 7e7a2ed134b1c048df4b6002a3789c141b30b0a3 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 19 Mar 2025 14:49:55 -0700
Subject: [PATCH 03/10] cleans docs

---
 src/components/Headline/Headline.mdx          |  2 +-
 src/components/HeroHeadline/HeroHeadline.mdx  | 18 ++++++++++--------
 .../HeroHeadline/HeroHeadline.stories.svelte  |  3 +++
 .../HeroHeadline/HeroHeadline.svelte          | 19 +++++++++++++------
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/Headline/Headline.mdx b/src/components/Headline/Headline.mdx
index dd2f3e58..378f085a 100644
--- a/src/components/Headline/Headline.mdx
+++ b/src/components/Headline/Headline.mdx
@@ -39,7 +39,7 @@ Optionally, you can add authors and a publish time to the headline, which the `H
   section={'Global news'}
   authors={['Jane Doe']}
   publishTime={new Date('2020-01-01').toISOString()}
-    getAuthorPage={(author: string) => {
+  getAuthorPage={(author: string) => {
       return `mailto:${author.replace(' ', '')}@example.com`;
     }}
 />
diff --git a/src/components/HeroHeadline/HeroHeadline.mdx b/src/components/HeroHeadline/HeroHeadline.mdx
index 47051f80..195cef3e 100644
--- a/src/components/HeroHeadline/HeroHeadline.mdx
+++ b/src/components/HeroHeadline/HeroHeadline.mdx
@@ -8,7 +8,7 @@ import * as HeroHeadlineStories from './HeroHeadline.stories.svelte';
 
 The `HeroHeadline` component creates a Reuters Graphics headline with a hero media, which can be a graphic, photo, video, or any other media.
 
-By default, the hero is in the background, i.e. the headline and dek are stacked on top of the hero. You can unstack and make the headline and dek come before or after the hero media by setting `stacked: true`. [Read more.](?path=/docs/components-text-elements-heroheadline--docs&globals=#transparent-site-header)
+By default, the hero is in the background, i.e. the headline and dek are stacked on top of the hero. You can unstack and insert the hero media inline -- i.e. before or after the headline -- by setting `stacked: true`. [Read more.](?/iframe.html?viewMode=docs&id=components-text-elements-heroheadline--docs&globals=&args=#inline-hero)
 
 ## Photo hero
 
@@ -59,7 +59,7 @@ In the Graphics Kit, set styles in `global.scss` to make the Reuters site header
 
 ## Ai2svelte hero
 
-To use an ai2svelte graphic as the hero, wrap your ai2svelte component in a `GraphicBlock` component and insert it inside the `HeroHeadline` component.
+To use an ai2svelte graphic as the hero, wrap your ai2svelte component in a `GraphicBlock` component and insert it inside `HeroHeadline`.
 
 To customise styles, use CSS to target the class passed to `HeroHeadline`.
 
@@ -209,9 +209,7 @@ To add a video as the hero, use the [Video](?path=/docs/components-multimedia-vi
 
 ## Inline hero
 
-To use a photo, graphic, video, etc. as an inline hero -- i.e. to make the hero appear below or above the headline and dek, not on top -- set `stacked` to `false`. Otherwise add your hero media as documented above.
-
-> **Note:** Pass `notes` and `ariaDescription` to the component you're inserting into `HeroHeadline` to provide additional information.
+To use a photo, graphic, video, etc. as an inline hero -- i.e. to make the hero appear before or after the headline and dek, instead of stacked underneath -- set `stacked` to `false`. Otherwise, add your hero media in the same way as documented above.
 
 ```svelte
 <!-- App.svelte -->
@@ -251,11 +249,11 @@ To use a photo, graphic, video, etc. as an inline hero -- i.e. to make the hero
 
 <Canvas of={HeroHeadlineStories.InlineHero} />
 
-## Custom hed and dek
+## Custom hed, dek and byline
 
-The `HeroHeadline` component internally uses the [Headline](?path=/docs/components-text-elements-headline--docs) component to render the headline and dek.
+The `HeroHeadline` component internally uses the [Headline](?path=/docs/components-text-elements-headline--docs) component to render the headline and dek, which lets you to customise the headline and dek by passing [snippets](https://svelte.dev/docs/svelte/snippet) into the `hed` and `dek` props.
 
-If `hed` and `dek` values are strings, they are rendered according to the default Reuters style. To customise the headline and dek, pass custom `hed` and `dek` elements as [snippets](https://svelte.dev/docs/svelte/snippet) to `HeroHeadline` -- the same way as you would with `Headline`.
+Since `Headline` internally uses the [Byline](?path=/docs/components-text-elements-headline--docs) component, you can also customise the author page hyperlink and bylines with the `getAuthorPage`, `byline`, `published` and `updated` props.
 
 ```svelte
 <!-- App.svelte -->
@@ -269,6 +267,9 @@ If `hed` and `dek` values are strings, they are rendered according to the defaul
   ]}
   publishTime={new Date('2023-05-11').toISOString()}
   img={eurovisImgSrc}
+  getAuthorPage={(author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
 >
   <!-- Custom hed snippet -->
   {#snippet hed()}
@@ -289,6 +290,7 @@ If `hed` and `dek` values are strings, they are rendered according to the defaul
       </p>
     </div>
   {/snippet}
+</HeroHeadline>
 
   <!-- Style your custom hed and dek -->
   <style lang="scss">
diff --git a/src/components/HeroHeadline/HeroHeadline.stories.svelte b/src/components/HeroHeadline/HeroHeadline.stories.svelte
index c2f3baf9..9880739d 100644
--- a/src/components/HeroHeadline/HeroHeadline.stories.svelte
+++ b/src/components/HeroHeadline/HeroHeadline.stories.svelte
@@ -245,6 +245,9 @@
     ]}
     publishTime={new Date('2023-05-11').toISOString()}
     img={eurovisImgSrc}
+    getAuthorPage={(author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
   >
     {#snippet hed()}
       <h1>
diff --git a/src/components/HeroHeadline/HeroHeadline.svelte b/src/components/HeroHeadline/HeroHeadline.svelte
index 06de711c..6ff5695f 100644
--- a/src/components/HeroHeadline/HeroHeadline.svelte
+++ b/src/components/HeroHeadline/HeroHeadline.svelte
@@ -17,10 +17,10 @@
      * Optional snippet for a custom hero graphic, photo, etc.
      */
     children?: Snippet;
-    /** Set to `false` for non-stacked hero headline */
+    /** Set to `false` for inline hero media */
     stacked?: boolean;
     /**
-     * Path to background image
+     * Path to the background hero image
      */
     img?: string;
     /**
@@ -31,11 +31,10 @@
      * Notes to the graphic, passed in as a markdown string.
      */
     notes?: string;
-
     /** Add classes to the block tag to target it with custom CSS. */
     class?: string;
     /**
-     * Headline size
+     * Headline size: small, normal, big, bigger, biggest
      */
     hedSize?: HeadlineSize;
     /**
@@ -70,7 +69,7 @@
      * Width of the hero graphic: normal, wide, wider, widest
      */
     width?: 'normal' | 'wide' | 'wider' | 'widest';
-    /** Set to true for embeddables. */
+    /** Set to true for embeds. */
     embedded?: boolean;
     /**
      * Custom function that returns an author page URL.
@@ -199,7 +198,15 @@
       <!-- Custom byline/dateline -->
       {@render byline()}
     {:else if authors.length > 0 || publishTime}
-      <Byline {authors} {publishTime} {updateTime} align="left" />
+      <Byline
+        {authors}
+        {publishTime}
+        {updateTime}
+        {getAuthorPage}
+        {published}
+        {updated}
+        align="left"
+      />
     {/if}
   </div>
 </div>

From dcf943a01f3f44fc8e73698fcb589c7166997af8 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 19 Mar 2025 15:20:25 -0700
Subject: [PATCH 04/10] typo fix

---
 src/components/HeroHeadline/HeroHeadline.mdx            | 2 +-
 src/components/HeroHeadline/HeroHeadline.stories.svelte | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/HeroHeadline/HeroHeadline.mdx b/src/components/HeroHeadline/HeroHeadline.mdx
index 195cef3e..8aa99e63 100644
--- a/src/components/HeroHeadline/HeroHeadline.mdx
+++ b/src/components/HeroHeadline/HeroHeadline.mdx
@@ -209,7 +209,7 @@ To add a video as the hero, use the [Video](?path=/docs/components-multimedia-vi
 
 ## Inline hero
 
-To use a photo, graphic, video, etc. as an inline hero -- i.e. to make the hero appear before or after the headline and dek, instead of stacked underneath -- set `stacked` to `false`. Otherwise, add your hero media in the same way as documented above.
+To use a photo, graphic, video, etc. as an inline hero -- i.e. to make the hero appear _after_ the headline and dek, instead of stacked underneath -- set `stacked` to `false`. Otherwise, add your hero media in the same way as documented above.
 
 ```svelte
 <!-- App.svelte -->
diff --git a/src/components/HeroHeadline/HeroHeadline.stories.svelte b/src/components/HeroHeadline/HeroHeadline.stories.svelte
index 9880739d..6a2d3c62 100644
--- a/src/components/HeroHeadline/HeroHeadline.stories.svelte
+++ b/src/components/HeroHeadline/HeroHeadline.stories.svelte
@@ -169,7 +169,6 @@
   </Block>
 
   <HeroHeadline
-    stacked={false}
     class="video-hero"
     hed="The conflict in Ethiopia"
     hedSize="bigger"

From 254f7165bf9951a3e6c75a729d0c5ed844690dd2 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 27 Mar 2025 11:07:15 -0700
Subject: [PATCH 05/10] updates exports

---
 src/index.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/index.js b/src/index.js
index c647a932..f758e29c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,14 +13,14 @@ export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.sve
 export { default as Block } from './components/Block/Block.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';
 export { default as Byline } from './components/Byline/Byline.svelte';
-// export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
+export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
 export { default as DocumentCloud } from './components/DocumentCloud/DocumentCloud.svelte';
 export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte';
-// export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
+export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
 export { default as Framer } from './components/Framer/Framer.svelte';
 export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';
-export { default as HeroHeadline } from './components/HeroHeadline/Hero.svelte';
+export { default as HeroHeadline } from './components/HeroHeadline/HeroHeadline.svelte';
 export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
 export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
@@ -49,4 +49,3 @@ export { default as Theme, themes } from './components/Theme/Theme.svelte';
 export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
 export { default as Video } from './components/Video/Video.svelte';
 export { default as Visible } from './components/Visible/Visible.svelte';
-export { default as TestForSvelte5 } from './components/TestForSvelte5/TestForSvelte5.svelte';

From 90b0eb3a09977c2f00fef9f703fe39a7f17d52ad Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 10 Apr 2025 09:37:16 -0700
Subject: [PATCH 06/10] moves scss examples in docs to globa.scss

---
 src/components/HeroHeadline/HeroHeadline.mdx | 149 ++++++++++---------
 1 file changed, 78 insertions(+), 71 deletions(-)

diff --git a/src/components/HeroHeadline/HeroHeadline.mdx b/src/components/HeroHeadline/HeroHeadline.mdx
index 8aa99e63..a8f0a4cb 100644
--- a/src/components/HeroHeadline/HeroHeadline.mdx
+++ b/src/components/HeroHeadline/HeroHeadline.mdx
@@ -109,43 +109,46 @@ To customise styles, use CSS to target the class passed to `HeroHeadline`.
     <QuakeMap assetsPath={assets || '/'} />
   </GraphicBlock>
 </HeroHeadline>
+```
 
-<!-- Customise styles using the class (e.g. `custom-hero` here) passed to `HeroHeadline` -->
-<style lang="scss">
-  .hero-wrapper {
-    .custom-hero.headline {
-      // Adjust vertical positioning
-      align-items: flex-end !important;
+Add styles in `global.scss`:
 
-      @media (max-width: 1100px) {
-        // Adjust line length of title
-        max-width: var(--normal-column-width) !important;
-      }
-    }
+```scss
+// global.scss
+// Customise styles using the class (e.g. `custom-hero` here) passed to `HeroHeadline`
+.hero-wrapper {
+  .custom-hero.headline {
+    // Adjust vertical positioning
+    align-items: flex-end !important;
 
-    // Make hero shorter than 100vh
-    --heroHeight: 85svh;
-
-    @media (max-width: 960px) {
-      --heroHeight: 65svh;
-    }
-
-    // For small height
-    @media (max-height: 850px) {
-      --heroHeight: 100svh;
-    }
-
-    // Custom hero sizing for landscape mobile
-    @media (max-width: 960px) and (orientation: landscape) {
-      --heroHeight: 200svh;
+    @media (max-width: 1100px) {
+      // Adjust line length of title
+      max-width: var(--normal-column-width) !important;
     }
   }
 
-  // Override default fixed height for hero layout in embeds
-  .hero-wrapper.embedded {
-    --heroHeight: 1000px;
+  // Make hero shorter than 100vh
+  --heroHeight: 85svh;
+
+  @media (max-width: 960px) {
+    --heroHeight: 65svh;
   }
-</style>
+
+  // For small height
+  @media (max-height: 850px) {
+    --heroHeight: 100svh;
+  }
+
+  // Custom hero sizing for landscape mobile
+  @media (max-width: 960px) and (orientation: landscape) {
+    --heroHeight: 200svh;
+  }
+}
+
+// Override default fixed height for hero layout in embeds
+.hero-wrapper.embedded {
+  --heroHeight: 1000px;
+}
 ```
 
 <Canvas of={HeroHeadlineStories.Ai2svelteHero} />
@@ -185,24 +188,27 @@ To add a video as the hero, use the [Video](?path=/docs/components-multimedia-vi
     ariaDescription="Aerial footage of people houses in refugee camp"
   />
 </HeroHeadline>
+```
 
-<!-- Customise styles using the class (e.g. `video-hero` here) passed to `HeroHeadline` -->
-<style lang="scss">
-  .hero-wrapper {
-    --heroHeight: calc(100svh - 60px);
-    .video-hero.headline {
-      header {
-        // Adjust vertical position as offset from default center
-        top: calc(50svh - 250px);
-      }
+Add styles in `global.scss`:
 
-      h1 {
-        color: #ffd430;
-        text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
-      }
+```scss
+// global.scss
+// Customise styles using the class (e.g. `video-hero` here) passed to `HeroHeadline`
+.hero-wrapper {
+  --heroHeight: calc(100svh - 60px);
+  .video-hero.headline {
+    header {
+      // Adjust vertical position as offset from default center
+      top: calc(50svh - 250px);
+    }
+
+    h1 {
+      color: #ffd430;
+      text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
     }
   }
-</style>
+}
 ```
 
 <Canvas of={HeroHeadlineStories.VideoHero} />
@@ -291,32 +297,33 @@ Since `Headline` internally uses the [Byline](?path=/docs/components-text-elemen
     </div>
   {/snippet}
 </HeroHeadline>
-
-  <!-- Style your custom hed and dek -->
-  <style lang="scss">
-    .custom-hed {
-      h1 {
-        .body-note {
-          color: #ffffff;
-        }
-        .title {
-          color: #ffffff;
-          text-shadow: 1px 1px 8px #ff7c88;
-          filter: drop-shadow(0px 0px 12px #ff7c88);
-        }
-      }
-
-      .dek {
-        margin-top: 1rem;
-        p {
-          color: #ffffff;
-          text-shadow: 1px 1px 8px #ff7c88;
-          filter: drop-shadow(0px 0px 12px #ff7c88);
-        }
-      }
-    }
-  </style>
-</HeroHeadline>
 ```
 
-<Canvas of={HeroHeadlineStories.CustomHed} />
+Add styles in `global.scss`:
+
+```scss
+// global.scss
+.custom-hed {
+  h1 {
+    .body-note {
+      color: #ffffff;
+    }
+    .title {
+      color: #ffffff;
+      text-shadow: 1px 1px 8px #ff7c88;
+      filter: drop-shadow(0px 0px 12px #ff7c88);
+    }
+  }
+
+  .dek {
+    margin-top: 1rem;
+    p {
+      color: #ffffff;
+      text-shadow: 1px 1px 8px #ff7c88;
+      filter: drop-shadow(0px 0px 12px #ff7c88);
+    }
+  }
+}
+```
+
+<Canvas of={HeroHeadlineStories.CustomHed} />{' '}

From 9c7eaf3c4d52a985d7a2723063c5b6233ad66223 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 10 Apr 2025 09:38:46 -0700
Subject: [PATCH 07/10] fix stacked:true in docs to stacked:false

---
 src/components/HeroHeadline/HeroHeadline.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HeroHeadline/HeroHeadline.mdx b/src/components/HeroHeadline/HeroHeadline.mdx
index a8f0a4cb..d02805fd 100644
--- a/src/components/HeroHeadline/HeroHeadline.mdx
+++ b/src/components/HeroHeadline/HeroHeadline.mdx
@@ -8,7 +8,7 @@ import * as HeroHeadlineStories from './HeroHeadline.stories.svelte';
 
 The `HeroHeadline` component creates a Reuters Graphics headline with a hero media, which can be a graphic, photo, video, or any other media.
 
-By default, the hero is in the background, i.e. the headline and dek are stacked on top of the hero. You can unstack and insert the hero media inline -- i.e. before or after the headline -- by setting `stacked: true`. [Read more.](?/iframe.html?viewMode=docs&id=components-text-elements-heroheadline--docs&globals=&args=#inline-hero)
+By default, the hero is in the background, i.e. the headline and dek are stacked on top of the hero. You can unstack and insert the hero media inline -- i.e. before or after the headline -- by setting `stacked: false`. [Read more.](?/iframe.html?viewMode=docs&id=components-text-elements-heroheadline--docs&globals=&args=#inline-hero)
 
 ## Photo hero
 

From 7b1e56eec6bf94a699f1765127a30809a7cdc854 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 15 Apr 2025 13:55:23 -0700
Subject: [PATCH 08/10] deletes feature photo & stacked:true demo, defaults
 inline photo to feature photo not bg-img

---
 .../HeroHeadline/HeroHeadline.stories.svelte  | 22 -------------------
 .../HeroHeadline/HeroHeadline.svelte          | 12 ++++++----
 2 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/src/components/HeroHeadline/HeroHeadline.stories.svelte b/src/components/HeroHeadline/HeroHeadline.stories.svelte
index 6a2d3c62..320f677f 100644
--- a/src/components/HeroHeadline/HeroHeadline.stories.svelte
+++ b/src/components/HeroHeadline/HeroHeadline.stories.svelte
@@ -33,7 +33,6 @@
   import Block from '../Block/Block.svelte';
   import SiteHeader from '../SiteHeader/SiteHeader.svelte';
   import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
-  import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
   import Video from '../Video/Video.svelte';
 
   import CrashMap from './demo/graphics/crash.svelte';
@@ -56,27 +55,6 @@
   />
 </Story>
 
-<Story name="Feature photo hero" exportName="FeaturePhotoHero">
-  <Block width="fluid" class="chromatic-ignore">
-    <SiteHeader />
-  </Block>
-  <HeroHeadline
-    section="World News"
-    hed="Reuters Graphics Interactive"
-    dek="The beginning of a beautiful page"
-    authors={['Jane Doe', 'John Doe']}
-    publishTime={new Date('2022-03-04').toISOString()}
-  >
-    <FeaturePhoto
-      width="widest"
-      class="my-0"
-      src={polarImgSrc}
-      caption="Photo by REUTERS."
-      altText="A photo of a polar bear."
-    />
-  </HeroHeadline>
-</Story>
-
 <Story name="Transparent header" exportName="TransparentHeader">
   <div class="transparent-header">
     <Block width="fluid" class="chromatic-ignore">
diff --git a/src/components/HeroHeadline/HeroHeadline.svelte b/src/components/HeroHeadline/HeroHeadline.svelte
index 6ff5695f..9f04c038 100644
--- a/src/components/HeroHeadline/HeroHeadline.svelte
+++ b/src/components/HeroHeadline/HeroHeadline.svelte
@@ -9,6 +9,7 @@
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
   import Headline from '../Headline/Headline.svelte';
   import Byline from '../Byline/Byline.svelte';
+  import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
 
   export interface Props {
     /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
@@ -182,10 +183,13 @@
               {notes}
               {ariaDescription}
             >
-              <div
-                class="background-image"
-                style="background-image: url({img})"
-              ></div>
+              <FeaturePhoto
+                class="my-0"
+                width="fluid"
+                src={img}
+                caption={notes}
+                altText={ariaDescription || ''}
+              />
             </GraphicBlock>
           {/if}
         </div>

From f77abdd5714f3ccbb22ba2fa0c801f440cb9efe0 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 16 Apr 2025 12:18:29 +0100
Subject: [PATCH 09/10] docs edits

---
 src/components/HeroHeadline/HeroHeadline.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/HeroHeadline/HeroHeadline.mdx b/src/components/HeroHeadline/HeroHeadline.mdx
index d02805fd..31cdc513 100644
--- a/src/components/HeroHeadline/HeroHeadline.mdx
+++ b/src/components/HeroHeadline/HeroHeadline.mdx
@@ -6,9 +6,9 @@ import * as HeroHeadlineStories from './HeroHeadline.stories.svelte';
 
 # HeroHeadline
 
-The `HeroHeadline` component creates a Reuters Graphics headline with a hero media, which can be a graphic, photo, video, or any other media.
+The `HeroHeadline` component creates a Reuters Graphics headline with a hero media, which can be a graphic, photo, video or other media.
 
-By default, the hero is in the background, i.e. the headline and dek are stacked on top of the hero. You can unstack and insert the hero media inline -- i.e. before or after the headline -- by setting `stacked: false`. [Read more.](?/iframe.html?viewMode=docs&id=components-text-elements-heroheadline--docs&globals=&args=#inline-hero)
+By default, the hero is in the background, i.e., the headline and dek are stacked on top of the hero. You can unstack and insert the hero media inline -- i.e., before or after the headline -- by setting `stacked: false`. [Read more.](?/iframe.html?viewMode=docs&id=components-text-elements-heroheadline--docs&globals=&args=#inline-hero)
 
 ## Photo hero
 
@@ -39,7 +39,7 @@ To use a photo as the hero, simply pass the image source to the `img` prop.
 
 ## Transparent site header
 
-In the Graphics Kit, set styles in `global.scss` to make the Reuters site header transparent and make the hero go all the way to the top of the page:
+In the graphics kit, set styles in `global.scss` to make the Reuters site header transparent and make the hero go all the way to the top of the page:
 
 ```scss
 // global.scss
@@ -215,7 +215,7 @@ Add styles in `global.scss`:
 
 ## Inline hero
 
-To use a photo, graphic, video, etc. as an inline hero -- i.e. to make the hero appear _after_ the headline and dek, instead of stacked underneath -- set `stacked` to `false`. Otherwise, add your hero media in the same way as documented above.
+To use a photo, graphic, video, etc. as an inline hero -- i.e., to make the hero appear _after_ the headline and dek, instead of stacked underneath -- set `stacked` to `false`. Otherwise, add your hero media in the same way as documented above.
 
 ```svelte
 <!-- App.svelte -->

From 42d4de2396d4133c1fcde979ffd28fa3cd3db60a Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Fri, 18 Apr 2025 14:46:22 +0100
Subject: [PATCH 10/10] unwrap FeaturePhoto from GraphicBlock

---
 .../HeroHeadline/HeroHeadline.svelte          | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/components/HeroHeadline/HeroHeadline.svelte b/src/components/HeroHeadline/HeroHeadline.svelte
index 9f04c038..7f782581 100644
--- a/src/components/HeroHeadline/HeroHeadline.svelte
+++ b/src/components/HeroHeadline/HeroHeadline.svelte
@@ -175,22 +175,13 @@
 
             <!-- Otherwise render the image if it exists -->
           {:else if img}
-            <GraphicBlock
+            <FeaturePhoto
               {width}
-              role="img"
               class="my-0"
-              textWidth="normal"
-              {notes}
-              {ariaDescription}
-            >
-              <FeaturePhoto
-                class="my-0"
-                width="fluid"
-                src={img}
-                caption={notes}
-                altText={ariaDescription || ''}
-              />
-            </GraphicBlock>
+              src={img}
+              caption={notes}
+              altText={ariaDescription || ''}
+            />
           {/if}
         </div>
       </Block>