283 lines
13 KiB
JavaScript
283 lines
13 KiB
JavaScript
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};
|