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] 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;
-}
-```