import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as t}from"./index-CO-0pc0F.js";import{M as r,C as o}from"./index-Z-6k0Xrj.js";import{H as a,P as d,T as h,A as c,V as l,I as p,C as m}from"./HeroHeadline.stories-BIueMLFQ.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Block-D3Ui8rd-.js";import"./GraphicBlock-uLJTqaY1.js";import"./PaddingReset-_TGvg1_B.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";import"./Headline-C-tkYFZ6.js";import"./Byline-BhU2Zjcl.js";import"./index-CX1x869l.js";import"./journalize-K6hK94UL.js";import"./FeaturePhoto-CKELMwR8.js";import"./index-client-BAw8T8-V.js";import"./this-CrUBQEQ_.js";import"./SiteHeader-D-9D6sLa.js";import"./ReutersLogo-B33L6wtg.js";import"./window-DXjFTZv5.js";import"./index-TQx7jkZs.js";import"./time-7uMnD1vs.js";import"./advancedFormat-DF-l3-BJ.js";import"./dayjs.min-CfWDS3UC.js";import"./Video-yHzv19g_.js";import"./size-DMdj3-I9.js";import"./slot-B1isFuVn.js";import"./fa-layers-text.svelte_svelte_type_style_lang-rD9gd1As.js";import"./index-C3C5q_jF.js";function i(s){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...t(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:a}),`
`,e.jsx(n.h1,{id:"heroheadline",children:"HeroHeadline"}),`
`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"HeroHeadline"})," component creates a Reuters Graphics headline with a hero media, which can be a graphic, photo, video or other media."]}),`
`,e.jsxs(n.p,{children:["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 ",e.jsx(n.code,{children:"stacked: false"}),". ",e.jsx(n.a,{href:"?/iframe.html?viewMode=docs&id=components-text-elements-heroheadline--docs&globals=&args=#inline-hero",children:"Read more."})]}),`
`,e.jsx(n.h2,{id:"photo-hero",children:"Photo hero"}),`
`,e.jsxs(n.p,{children:["To use a photo as the hero, simply pass the image source to the ",e.jsx(n.code,{children:"img"})," prop."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
<script>
  import { HeroHeadline } from '@reuters-graphics/graphics-components';
  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...

  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
<\/script>

<HeroHeadline
  {embedded}
  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'}
  authors={['Jane Doe', 'John Doe']}
/>
`})}),`
`,e.jsx(o,{of:d}),`
`,e.jsx(n.h2,{id:"transparent-site-header",children:"Transparent site header"}),`
`,e.jsxs(n.p,{children:["In the graphics kit, set styles in ",e.jsx(n.code,{children:"global.scss"})," to make the Reuters site header transparent and make the hero go all the way to the top of the page:"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// global.scss
.nav-container {
  background-color: transparent !important;
}
.nav-container .inner {
  background-color: transparent !important;
  border: none !important;
}
.hero-wrapper {
  margin-block-start: -64px;
}
`})}),`
`,e.jsx(o,{of:h}),`
`,e.jsx(n.h2,{id:"ai2svelte-hero",children:"Ai2svelte hero"}),`
`,e.jsxs(n.p,{children:["To use an ai2svelte graphic as the hero, wrap your ai2svelte component in a ",e.jsx(n.code,{children:"GraphicBlock"})," component and insert it inside ",e.jsx(n.code,{children:"HeroHeadline"}),"."]}),`
`,e.jsxs(n.p,{children:["To customise styles, use CSS to target the class passed to ",e.jsx(n.code,{children:"HeroHeadline"}),"."]}),`
`,e.jsxs(n.blockquote,{children:[`
`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," Pass ",e.jsx(n.code,{children:"notes"})," and ",e.jsx(n.code,{children:"ariaDescription"})," to the ",e.jsx(n.code,{children:"GraphicBlock"})," component to provide additional information about the ai2svelte graphic."]}),`
`]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
<script>
  import {
    HeroHeadline,
    GraphicBlock,
  } from '@reuters-graphics/graphics-components';

  import QuakeMap from './ai2svelte/graphic.svelte'; // Your ai2svelte component

  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...

  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
<\/script>

<HeroHeadline
  {embedded}
  hed="Earthquake devastates Afghanistan"
  hedSize="big"
  hedWidth="wide"
  class="custom-hero mb-0"
  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()}
>
  <GraphicBlock
    width="widest"
    role="figure"
    class="my-0"
    ariaDescription="Earthquake impact map"
  >
    <!-- Pass \`assetsPath\` if in graphics kit -->
    <QuakeMap assetsPath={assets || '/'} />
  </GraphicBlock>
</HeroHeadline>
`})}),`
`,e.jsxs(n.p,{children:["Add styles in ",e.jsx(n.code,{children:"global.scss"}),":"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// 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;

    @media (max-width: 1100px) {
      // Adjust line length of title
      max-width: var(--normal-column-width) !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;
  }
}

// Override default fixed height for hero layout in embeds
.hero-wrapper.embedded {
  --heroHeight: 1000px;
}
`})}),`
`,e.jsx(o,{of:c}),`
`,e.jsx(n.h2,{id:"video-hero",children:"Video hero"}),`
`,e.jsxs(n.p,{children:["To add a video as the hero, use the ",e.jsx(n.a,{href:"?path=/docs/components-multimedia-video--docs",children:"Video"})," component. To customise styles, use CSS to target the class passed to ",e.jsx(n.code,{children:"HeroHeadline"}),"."]}),`
`,e.jsxs(n.blockquote,{children:[`
`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," Pass ",e.jsx(n.code,{children:"notes"})," and ",e.jsx(n.code,{children:"ariaDescription"})," to the ",e.jsx(n.code,{children:"GraphicBlock"})," component to provide additional information about the video."]}),`
`]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...

  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
<\/script>

<HeroHeadline
  {embedded}
  class="video-hero"
  hed="The conflict in Ethiopia"
  hedSize="bigger"
  hedWidth="wide"
  authors={['Aditi Bhandari ', 'David Lewis']}
  publishTime={new Date('2020-12-18').toISOString()}
>
  <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>
`})}),`
`,e.jsxs(n.p,{children:["Add styles in ",e.jsx(n.code,{children:"global.scss"}),":"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// 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);
    }
  }
}
`})}),`
`,e.jsx(o,{of:l}),`
`,e.jsx(n.h2,{id:"inline-hero",children:"Inline hero"}),`
`,e.jsxs(n.p,{children:["To use a photo, graphic, video, etc. as an inline hero -- i.e., to make the hero appear ",e.jsx(n.em,{children:"after"})," the headline and dek, instead of stacked underneath -- set ",e.jsx(n.code,{children:"stacked"})," to ",e.jsx(n.code,{children:"false"}),". Otherwise, add your hero media in the same way as documented above."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
<script>
  import {
    HeroHeadline,
    GraphicBlock,
  } from '@reuters-graphics/graphics-components';
  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...

  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
<\/script>

<!-- Set \`stacked\` to \`false\` -->
<HeroHeadline
  {embedded}
  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"
  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
  publishTime={new Date('2020-01-01').toISOString()}
>
  <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>
`})}),`
`,e.jsx(o,{of:p}),`
`,e.jsx(n.h2,{id:"custom-hed-dek-and-byline",children:"Custom hed, dek and byline"}),`
`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"HeroHeadline"})," component internally uses the ",e.jsx(n.a,{href:"?path=/docs/components-text-elements-headline--docs",children:"Headline"})," component to render the headline and dek, which lets you to customise the headline and dek by passing ",e.jsx(n.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippets"})," into the ",e.jsx(n.code,{children:"hed"})," and ",e.jsx(n.code,{children:"dek"})," props."]}),`
`,e.jsxs(n.p,{children:["Since ",e.jsx(n.code,{children:"Headline"})," internally uses the ",e.jsx(n.a,{href:"?path=/docs/components-text-elements-headline--docs",children:"Byline"})," component, you can also customise the author page hyperlink and bylines with the ",e.jsx(n.code,{children:"getAuthorPage"}),", ",e.jsx(n.code,{children:"byline"}),", ",e.jsx(n.code,{children:"published"})," and ",e.jsx(n.code,{children:"updated"})," props."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
<HeroHeadline
  class="custom-hed"
  authors={[
    'Prasanta Kumar Dutta',
    'Dea Bankova',
    'Aditi Bhandari',
    'Anurag Rao',
  ]}
  publishTime={new Date('2023-05-11').toISOString()}
  img={eurovisImgSrc}
  getAuthorPage={(author) => {
    return \`mailto:\${author.replace(' ', '')}@example.com\`;
  }}
>
  <!-- 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}

  <!-- 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}
</HeroHeadline>
`})}),`
`,e.jsxs(n.p,{children:["Add styles in ",e.jsx(n.code,{children:"global.scss"}),":"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// 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-block-start: 1rem;
    p {
      color: #ffffff;
      text-shadow: 1px 1px 8px #ff7c88;
      filter: drop-shadow(0px 0px 12px #ff7c88);
    }
  }
}
`})}),`
`,e.jsx(o,{of:m})]})}function ne(s={}){const{wrapper:n}={...t(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(i,{...s})}):i(s)}export{ne as default};