Merge pull request #246 from reuters-graphics/mf-hero
Updates HeroHeadline
This commit is contained in:
Jon McClure
GitHub
commit
912e2897ed
32 changed files with 898 additions and 943 deletions
|
|
@ -18,7 +18,7 @@
|
||||||
/**
|
/**
|
||||||
* Update time as a datetime string.
|
* Update time as a datetime string.
|
||||||
*/
|
*/
|
||||||
updateTime: string;
|
updateTime?: string;
|
||||||
/**
|
/**
|
||||||
* Alignment of the byline.
|
* Alignment of the byline.
|
||||||
*/
|
*/
|
||||||
|
|
@ -128,7 +128,7 @@
|
||||||
<div class="whitespace-nowrap inline-block">
|
<div class="whitespace-nowrap inline-block">
|
||||||
Published
|
Published
|
||||||
<time datetime={publishTime}>
|
<time datetime={publishTime}>
|
||||||
{#if isValidDate(updateTime)}
|
{#if updateTime && isValidDate(updateTime)}
|
||||||
{apdate(new Date(publishTime))}
|
{apdate(new Date(publishTime))}
|
||||||
{:else}
|
{:else}
|
||||||
{apdate(new Date(publishTime))} {formatTime(
|
{apdate(new Date(publishTime))} {formatTime(
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@ Optionally, you can add authors and a publish time to the headline, which the `H
|
||||||
section={'Global news'}
|
section={'Global news'}
|
||||||
authors={['Jane Doe']}
|
authors={['Jane Doe']}
|
||||||
publishTime={new Date('2020-01-01').toISOString()}
|
publishTime={new Date('2020-01-01').toISOString()}
|
||||||
getAuthorPage={(author: string) => {
|
getAuthorPage={(author: string) => {
|
||||||
return `mailto:${author.replace(' ', '')}@example.com`;
|
return `mailto:${author.replace(' ', '')}@example.com`;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@
|
||||||
interface Props {
|
interface Props {
|
||||||
/** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
|
/** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
|
||||||
hed: string | Snippet;
|
hed: string | Snippet;
|
||||||
|
|
||||||
/** Add extra classes to the block tag to target it with custom CSS. */
|
/** Add extra classes to the block tag to target it with custom CSS. */
|
||||||
class?: string;
|
class?: string;
|
||||||
/** Headline size: small, normal, big, bigger, biggest */
|
/** Headline size: small, normal, big, bigger, biggest */
|
||||||
|
|
|
||||||
|
|
@ -1,356 +0,0 @@
|
||||||
<!-- @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';
|
|
||||||
|
|
||||||
import HeroHeadline from './Hero.svelte';
|
|
||||||
|
|
||||||
import {
|
|
||||||
withComponentDocs,
|
|
||||||
withStoryDocs,
|
|
||||||
} from '$lib/docs/utils/withParams.js';
|
|
||||||
|
|
||||||
export const meta = {
|
|
||||||
title: 'Components/Text elements/HeroHeadline',
|
|
||||||
component: HeroHeadline,
|
|
||||||
...withComponentDocs(componentDocs),
|
|
||||||
argTypes: {
|
|
||||||
hedSize: {
|
|
||||||
control: 'select',
|
|
||||||
options: ['small', 'normal', 'big', 'bigger', 'biggest'],
|
|
||||||
},
|
|
||||||
hedWidth: {
|
|
||||||
control: 'select',
|
|
||||||
options: ['normal', 'wide', 'wider', 'widest'],
|
|
||||||
},
|
|
||||||
hedAlign: {
|
|
||||||
control: 'select',
|
|
||||||
options: ['left', 'center', 'right'],
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
control: 'select',
|
|
||||||
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 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 './stories/graphics/crash.svelte';
|
|
||||||
import QuakeMap from './stories/graphics/quakemap.svelte';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Template let:args>
|
|
||||||
<Block width="fluid" class="chromatic-ignore">
|
|
||||||
<SiteHeader />
|
|
||||||
</Block>
|
|
||||||
|
|
||||||
<HeroHeadline {...args} />
|
|
||||||
</Template>
|
|
||||||
|
|
||||||
<Story
|
|
||||||
name="With backdrop photo"
|
|
||||||
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,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Story name="With transparent header" {...withStoryDocs(transparentHeaderDocs)}>
|
|
||||||
<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']}
|
|
||||||
publishTime={new Date('2022-03-04').toISOString()}
|
|
||||||
img={polarImgSrc}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Story>
|
|
||||||
|
|
||||||
<Story name="With backdrop graphic" {...withStoryDocs(backgroundGraphicDocs)}>
|
|
||||||
<Block width="fluid" class="chromatic-ignore">
|
|
||||||
<SiteHeader />
|
|
||||||
</Block>
|
|
||||||
|
|
||||||
<HeroHeadline
|
|
||||||
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>
|
|
||||||
</Story>
|
|
||||||
|
|
||||||
<Story name="With backdrop video" {...withStoryDocs(videoDocs)}>
|
|
||||||
<Block width="fluid" class="chromatic-ignore">
|
|
||||||
<SiteHeader />
|
|
||||||
</Block>
|
|
||||||
|
|
||||||
<HeroHeadline
|
|
||||||
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="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>
|
|
||||||
</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);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: #ffd430;
|
|
||||||
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</Story>
|
|
||||||
|
|
||||||
<Story name="With inline photo" {...withStoryDocs(inlinePhotoDocs)}>
|
|
||||||
<Block width="fluid" class="chromatic-ignore">
|
|
||||||
<SiteHeader />
|
|
||||||
</Block>
|
|
||||||
|
|
||||||
<HeroHeadline
|
|
||||||
hed={'Buried under the bricks'}
|
|
||||||
hedWidth="wide"
|
|
||||||
class="mb-0"
|
|
||||||
dek={'How mud-brick housing made the Morocco earthquake so deadly'}
|
|
||||||
section={'Global news'}
|
|
||||||
authors={['Mariano Zafra']}
|
|
||||||
publishTime={new Date('2020-01-01').toISOString()}
|
|
||||||
>
|
|
||||||
<div slot="inline">
|
|
||||||
<FeaturePhoto
|
|
||||||
width="widest"
|
|
||||||
class="my-0"
|
|
||||||
src="https://www.reuters.com/graphics/MOROCCO-QUAKE/CONSTRUCTION/xmpjlblojpr/cdn/images/opening.jpg"
|
|
||||||
caption="Photo by REUTERS/Nacho Doce."
|
|
||||||
altText="A photo of the town of Adassil, Morocco, showing severe damage to many houses, which have collapsed after the earthquake. The houses are all made of mud brick."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</HeroHeadline>
|
|
||||||
</Story>
|
|
||||||
|
|
||||||
<Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
|
|
||||||
<Block width="fluid" 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>
|
|
||||||
</HeroHeadline>
|
|
||||||
</Story>
|
|
||||||
|
|
||||||
<Story name="With inline video" {...withStoryDocs(inlinePhotoDocs)}>
|
|
||||||
<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" {...withStoryDocs(customHedDocs)}>
|
|
||||||
<HeroHeadline
|
|
||||||
class="custom-hed"
|
|
||||||
authors={[
|
|
||||||
'Prasanta Kumar Dutta',
|
|
||||||
'Dea Bankova',
|
|
||||||
'Aditi Bhandari',
|
|
||||||
'Anurag Rao',
|
|
||||||
]}
|
|
||||||
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>
|
|
||||||
</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>
|
|
||||||
</Story>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.transparent-header {
|
|
||||||
:global(.nav-container) {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
:global(.nav-container .inner) {
|
|
||||||
background-color: transparent !important;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.hero-wrapper) {
|
|
||||||
margin-top: -64px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,258 +0,0 @@
|
||||||
<!-- @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';
|
|
||||||
|
|
||||||
/** 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';
|
|
||||||
import Block from '../Block/Block.svelte';
|
|
||||||
import Byline from '../Byline/Byline.svelte';
|
|
||||||
import PaddingReset from '../PaddingReset/PaddingReset.svelte';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">
|
|
||||||
<div class="hero-wrapper fmb-6" class:embedded>
|
|
||||||
<!-- Background media hero-->
|
|
||||||
{#if $$slots.background || img}
|
|
||||||
<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}
|
|
||||||
|
|
||||||
<div class="graphic-container">
|
|
||||||
{#if $$slots.background}
|
|
||||||
<!-- Hero graphic named slot -->
|
|
||||||
<slot name="background" />
|
|
||||||
{:else}
|
|
||||||
<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}
|
|
||||||
|
|
||||||
<!-- Inline hero -->
|
|
||||||
{#if $$slots.inline}
|
|
||||||
<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}
|
|
||||||
</PaddingReset>
|
|
||||||
<div class="graphic-container">
|
|
||||||
<!-- Hero named slot -->
|
|
||||||
<slot name="inline" />
|
|
||||||
</div>
|
|
||||||
</Block>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hero-byline fmb-6">
|
|
||||||
{#if $$slots.byline}
|
|
||||||
<!-- Custom byline/dateline -->
|
|
||||||
<slot name="byline" />
|
|
||||||
{:else if authors.length > 0 || publishTime}
|
|
||||||
<Byline {authors} {publishTime} {updateTime} align="left" />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@use '../../scss/mixins' as mixins;
|
|
||||||
|
|
||||||
.hero-wrapper {
|
|
||||||
:global(.background-hero) {
|
|
||||||
min-height: var(--heroHeight, 100svh);
|
|
||||||
max-height: 1800px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.background-hero .headline) {
|
|
||||||
@include mixins.fmt-0;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 50%;
|
|
||||||
height: var(--heroHeight, 100svh);
|
|
||||||
max-height: 1800px;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
|
|
||||||
@media (max-width: 690px) {
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(aside p) {
|
|
||||||
@include mixins.body-caption;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.background-hero video) {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: var(--heroHeight);
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.graphic-container .article-block.notes) {
|
|
||||||
@media (max-width: 690px) {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 15px;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-byline {
|
|
||||||
:global(.byline-container) {
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-image {
|
|
||||||
width: auto;
|
|
||||||
height: var(--heroHeight, 100svh);
|
|
||||||
max-height: 1800px;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
329
src/components/HeroHeadline/HeroHeadline.mdx
Normal file
329
src/components/HeroHeadline/HeroHeadline.mdx
Normal file
|
|
@ -0,0 +1,329 @@
|
||||||
|
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, 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)
|
||||||
|
|
||||||
|
## 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...
|
||||||
|
|
||||||
|
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']}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
<Canvas of={HeroHeadlineStories.PhotoHero} />
|
||||||
|
|
||||||
|
## 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:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
// global.scss
|
||||||
|
.nav-container {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
.nav-container .inner {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
.hero-wrapper {
|
||||||
|
margin-top: -64px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<Canvas of={HeroHeadlineStories.TransparentHeader} />
|
||||||
|
|
||||||
|
## Ai2svelte hero
|
||||||
|
|
||||||
|
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`.
|
||||||
|
|
||||||
|
> **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'; // 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"
|
||||||
|
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>
|
||||||
|
```
|
||||||
|
|
||||||
|
Add styles in `global.scss`:
|
||||||
|
|
||||||
|
```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;
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<Canvas of={HeroHeadlineStories.Ai2svelteHero} />
|
||||||
|
|
||||||
|
## Video hero
|
||||||
|
|
||||||
|
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'; // 👈 If using in the Graphics Kit...
|
||||||
|
|
||||||
|
export let embedded = false; // 👈 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>
|
||||||
|
```
|
||||||
|
|
||||||
|
Add styles in `global.scss`:
|
||||||
|
|
||||||
|
```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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<Canvas of={HeroHeadlineStories.VideoHero} />
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
```svelte
|
||||||
|
<!-- App.svelte -->
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
HeroHeadline,
|
||||||
|
GraphicBlock,
|
||||||
|
} from '@reuters-graphics/graphics-components';
|
||||||
|
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||||||
|
|
||||||
|
export let embedded = false; // 👈 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>
|
||||||
|
```
|
||||||
|
|
||||||
|
<Canvas of={HeroHeadlineStories.InlineHero} />
|
||||||
|
|
||||||
|
## 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, which lets you to customise the headline and dek by passing [snippets](https://svelte.dev/docs/svelte/snippet) into the `hed` and `dek` props.
|
||||||
|
|
||||||
|
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 -->
|
||||||
|
<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: string) => {
|
||||||
|
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>
|
||||||
|
```
|
||||||
|
|
||||||
|
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} />{' '}
|
||||||
287
src/components/HeroHeadline/HeroHeadline.stories.svelte
Normal file
287
src/components/HeroHeadline/HeroHeadline.stories.svelte
Normal file
|
|
@ -0,0 +1,287 @@
|
||||||
|
<script module lang="ts">
|
||||||
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||||
|
import HeroHeadline from './HeroHeadline.svelte';
|
||||||
|
|
||||||
|
const { Story } = defineMeta({
|
||||||
|
title: 'Components/Text elements/HeroHeadline',
|
||||||
|
component: HeroHeadline,
|
||||||
|
argTypes: {
|
||||||
|
hedSize: {
|
||||||
|
control: 'select',
|
||||||
|
options: ['small', 'normal', 'big', 'bigger', 'biggest'],
|
||||||
|
},
|
||||||
|
hedWidth: {
|
||||||
|
control: 'select',
|
||||||
|
options: ['normal', 'wide', 'wider', 'widest'],
|
||||||
|
},
|
||||||
|
hedAlign: {
|
||||||
|
control: 'select',
|
||||||
|
options: ['left', 'center', 'right'],
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
control: 'select',
|
||||||
|
options: ['normal', 'wide', 'wider', 'widest'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import polarImgSrc from './demo/polar.jpg';
|
||||||
|
import eurovisImgSrc from './demo/eurovis.jpeg';
|
||||||
|
|
||||||
|
import Block from '../Block/Block.svelte';
|
||||||
|
import SiteHeader from '../SiteHeader/SiteHeader.svelte';
|
||||||
|
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
|
||||||
|
import Video from '../Video/Video.svelte';
|
||||||
|
|
||||||
|
import CrashMap from './demo/graphics/crash.svelte';
|
||||||
|
import QuakeMap from './demo/graphics/quakemap.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Story name="Photo hero" exportName="PhotoHero">
|
||||||
|
<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()}
|
||||||
|
img={polarImgSrc}
|
||||||
|
notes="Photo by REUTERS"
|
||||||
|
ariaDescription="A photo of a polar bear"
|
||||||
|
/>
|
||||||
|
</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={['Jane Doe', 'John Doe']}
|
||||||
|
publishTime={new Date('2022-03-04').toISOString()}
|
||||||
|
img={polarImgSrc}
|
||||||
|
ariaDescription="A photo of a polar bear"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Story>
|
||||||
|
|
||||||
|
<Story name="Ai2svelte hero" exportName="Ai2svelteHero">
|
||||||
|
<Block width="fluid" class="chromatic-ignore">
|
||||||
|
<SiteHeader />
|
||||||
|
</Block>
|
||||||
|
|
||||||
|
<HeroHeadline
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<QuakeMap />
|
||||||
|
</GraphicBlock>
|
||||||
|
</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 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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</Story>
|
||||||
|
|
||||||
|
<Story name="Video hero" exportName="VideoHero">
|
||||||
|
<Block width="fluid" class="chromatic-ignore">
|
||||||
|
<SiteHeader />
|
||||||
|
</Block>
|
||||||
|
|
||||||
|
<HeroHeadline
|
||||||
|
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="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 {
|
||||||
|
--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>
|
||||||
|
</Story>
|
||||||
|
|
||||||
|
<Story name="Inline hero" exportName="InlineHero">
|
||||||
|
<Block width="fluid" class="chromatic-ignore">
|
||||||
|
<SiteHeader />
|
||||||
|
</Block>
|
||||||
|
|
||||||
|
<!-- Set `stacked` to `false` -->
|
||||||
|
<HeroHeadline
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<CrashMap />
|
||||||
|
</GraphicBlock>
|
||||||
|
</HeroHeadline>
|
||||||
|
</Story>
|
||||||
|
|
||||||
|
<Story name="Custom hed" exportName="CustomHed">
|
||||||
|
<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: string) => {
|
||||||
|
return `mailto:${author.replace(' ', '')}@example.com`;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{#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">
|
||||||
|
.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>
|
||||||
|
</Story>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.transparent-header {
|
||||||
|
:global(.nav-container) {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
:global(.nav-container .inner) {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.hero-wrapper) {
|
||||||
|
margin-top: -64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
276
src/components/HeroHeadline/HeroHeadline.svelte
Normal file
276
src/components/HeroHeadline/HeroHeadline.svelte
Normal file
|
|
@ -0,0 +1,276 @@
|
||||||
|
<!-- @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';
|
||||||
|
|
||||||
|
// Components
|
||||||
|
import Block from '../Block/Block.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';
|
||||||
|
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. */
|
||||||
|
hed: string | Snippet;
|
||||||
|
/**
|
||||||
|
* Optional snippet for a custom hero graphic, photo, etc.
|
||||||
|
*/
|
||||||
|
children?: Snippet;
|
||||||
|
/** Set to `false` for inline hero media */
|
||||||
|
stacked?: boolean;
|
||||||
|
/**
|
||||||
|
* Path to the background hero 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: small, normal, big, bigger, biggest
|
||||||
|
*/
|
||||||
|
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 embeds. */
|
||||||
|
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>
|
||||||
|
<!-- stacked media hero-->
|
||||||
|
{#if stacked}
|
||||||
|
<Block width="fluid" class="hero-headline background-hero fmt-0">
|
||||||
|
<!-- Handles string or snippet `hed` -->
|
||||||
|
<Headline
|
||||||
|
class="{cls} !text-{hedAlign}"
|
||||||
|
width={hedWidth}
|
||||||
|
{section}
|
||||||
|
{hedSize}
|
||||||
|
{hed}
|
||||||
|
{dek}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="graphic-container">
|
||||||
|
<!-- 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}
|
||||||
|
|
||||||
|
<!-- Non-stacked hero -->
|
||||||
|
{#if stacked === false}
|
||||||
|
<Block width="fluid" class="hero-headline inline-hero">
|
||||||
|
<PaddingReset containerIsFluid={true}>
|
||||||
|
<Headline
|
||||||
|
class="{cls} !text-{hedAlign}"
|
||||||
|
width={hedWidth}
|
||||||
|
{section}
|
||||||
|
{hedSize}
|
||||||
|
{hed}
|
||||||
|
{dek}
|
||||||
|
/>
|
||||||
|
</PaddingReset>
|
||||||
|
<div class="graphic-container">
|
||||||
|
<!-- Custom hero snippet -->
|
||||||
|
{#if children}
|
||||||
|
{@render children()}
|
||||||
|
|
||||||
|
<!-- Otherwise render the image if it exists -->
|
||||||
|
{:else if img}
|
||||||
|
<FeaturePhoto
|
||||||
|
{width}
|
||||||
|
class="my-0"
|
||||||
|
src={img}
|
||||||
|
caption={notes}
|
||||||
|
altText={ariaDescription || ''}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</Block>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-byline fmb-6">
|
||||||
|
{#if byline}
|
||||||
|
<!-- Custom byline/dateline -->
|
||||||
|
{@render byline()}
|
||||||
|
{:else if authors.length > 0 || publishTime}
|
||||||
|
<Byline
|
||||||
|
{authors}
|
||||||
|
{publishTime}
|
||||||
|
{updateTime}
|
||||||
|
{getAuthorPage}
|
||||||
|
{published}
|
||||||
|
{updated}
|
||||||
|
align="left"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use '../../scss/mixins' as mixins;
|
||||||
|
|
||||||
|
.hero-wrapper {
|
||||||
|
:global(.background-hero) {
|
||||||
|
min-height: var(--heroHeight, 100svh);
|
||||||
|
max-height: 1800px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.background-hero .headline) {
|
||||||
|
@include mixins.fmt-0;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
height: var(--heroHeight, 100svh);
|
||||||
|
max-height: 1800px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
|
||||||
|
@media (max-width: 690px) {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(aside p) {
|
||||||
|
@include mixins.body-caption;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.background-hero video) {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: var(--heroHeight);
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.graphic-container .article-block.notes) {
|
||||||
|
@media (max-width: 690px) {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 15px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-byline {
|
||||||
|
:global(.byline-container) {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-image {
|
||||||
|
width: auto;
|
||||||
|
height: var(--heroHeight, 100svh);
|
||||||
|
max-height: 1800px;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 497 KiB After Width: | Height: | Size: 497 KiB |
|
Before Width: | Height: | Size: 303 KiB After Width: | Height: | Size: 303 KiB |
|
Before Width: | Height: | Size: 216 KiB After Width: | Height: | Size: 216 KiB |
|
Before Width: | Height: | Size: 628 KiB After Width: | Height: | Size: 628 KiB |
|
Before Width: | Height: | Size: 787 KiB After Width: | Height: | Size: 787 KiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 118 KiB |
|
Before Width: | Height: | Size: 428 KiB After Width: | Height: | Size: 428 KiB |
|
Before Width: | Height: | Size: 256 KiB After Width: | Height: | Size: 256 KiB |
|
Before Width: | Height: | Size: 200 KiB After Width: | Height: | Size: 200 KiB |
|
Before Width: | Height: | Size: 486 KiB After Width: | Height: | Size: 486 KiB |
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 127 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
|
@ -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>
|
|
||||||
```
|
|
||||||
|
|
@ -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>
|
|
||||||
```
|
|
||||||
|
|
@ -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()}"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
@ -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>
|
|
||||||
```
|
|
||||||
|
|
@ -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>
|
|
||||||
```
|
|
||||||
|
|
@ -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>
|
|
||||||
```
|
|
||||||
|
|
@ -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>
|
|
||||||
```
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
@ -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 Block } from './components/Block/Block.svelte';
|
||||||
export { default as BodyText } from './components/BodyText/BodyText.svelte';
|
export { default as BodyText } from './components/BodyText/BodyText.svelte';
|
||||||
export { default as Byline } from './components/Byline/Byline.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 DocumentCloud } from './components/DocumentCloud/DocumentCloud.svelte';
|
||||||
export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.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 Framer } from './components/Framer/Framer.svelte';
|
||||||
export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
|
export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
|
||||||
export { default as Headline } from './components/Headline/Headline.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 EndNotes } from './components/EndNotes/EndNotes.svelte';
|
||||||
export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
|
export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
|
||||||
export { default as InlineAd } from './components/AdSlot/InlineAd.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 ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
|
||||||
export { default as Video } from './components/Video/Video.svelte';
|
export { default as Video } from './components/Video/Video.svelte';
|
||||||
export { default as Visible } from './components/Visible/Visible.svelte';
|
export { default as Visible } from './components/Visible/Visible.svelte';
|
||||||
export { default as TestForSvelte5 } from './components/TestForSvelte5/TestForSvelte5.svelte';
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue