set up .mdx
This commit is contained in:
MinamiFunakoshiTR
parent
afb6270b46
commit
06a8454178
26 changed files with 439 additions and 410 deletions
366
src/components/HeroHeadline/HeroHeadline.mdx
Normal file
366
src/components/HeroHeadline/HeroHeadline.mdx
Normal file
|
|
@ -0,0 +1,366 @@
|
|||
import { Meta, Canvas } from '@storybook/blocks';
|
||||
|
||||
import * as HeroHeadlineStories from './HeroHeadline.stories.svelte';
|
||||
|
||||
<Meta of={HeroHeadlineStories} />
|
||||
|
||||
# HeroHeadline
|
||||
|
||||
The `HeroHeadline` component creates a Reuters Graphics headline with a Hero media.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { HeroHeadline } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||||
|
||||
export let embedded = false;
|
||||
</script>
|
||||
|
||||
<HeroHeadline
|
||||
{embedded}
|
||||
img={`${assets}/images/myImage.jpg`}
|
||||
hed={'Reuters Graphics Interactive'}
|
||||
dek={'The beginning of a beautiful page'}
|
||||
section={'World News'}
|
||||
authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
|
||||
publishTime={new Date('2022-03-04').toISOString()}
|
||||
/>
|
||||
```
|
||||
|
||||
<Canvas of={HeroHeadlineStories.Demo} />
|
||||
|
||||
## Transparent site header
|
||||
|
||||
Make the hero full bleed and under the header.
|
||||
|
||||
```scss
|
||||
// global.scss
|
||||
|
||||
.nav-container {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.nav-container .inner {
|
||||
background-color: transparent !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
margin-top: -64px;
|
||||
}
|
||||
```
|
||||
|
||||
<Canvas of={HeroHeadlineStories.TransparentHeader} />
|
||||
|
||||
## With background graphic
|
||||
|
||||
Reuters Graphics headline with ai2svelte graphic as background.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import {
|
||||
HeroHeadline,
|
||||
GraphicBlock,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import QuakeMap from './ai2svelte/graphic.svelte';
|
||||
import { assets } from '$app/paths';
|
||||
|
||||
export let embedded = false;
|
||||
</script>
|
||||
|
||||
<HeroHeadline
|
||||
{embedded}
|
||||
hed={'Earthquake devastates Afghanistan'}
|
||||
hedSize={'big'}
|
||||
hedWidth="wide"
|
||||
class="custom-hero mb-0"
|
||||
dek=""
|
||||
authors={[
|
||||
'Anand Katakam',
|
||||
'Vijdan Mohammad Kawoosa',
|
||||
'Adolfo Arranz',
|
||||
'Wen Foo',
|
||||
'Simon Scarr',
|
||||
'Aman Bhargava',
|
||||
'Jitesh Chowdhury',
|
||||
'Manas Sharma',
|
||||
'Aditi Bhandari',
|
||||
]}
|
||||
publishTime={new Date('2022-06-24').toISOString()}
|
||||
>
|
||||
<div slot="background">
|
||||
<GraphicBlock
|
||||
width="widest"
|
||||
role="figure"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
notes=""
|
||||
ariaDescription="Earthquake impact map"
|
||||
>
|
||||
<svelte:component this={QuakeMap} />
|
||||
</GraphicBlock>
|
||||
</div>
|
||||
</HeroHeadline>
|
||||
|
||||
<style lang="scss">
|
||||
.hero-wrapper {
|
||||
.custom-hero.headline {
|
||||
// Adjust vertical positioning
|
||||
align-items: flex-end !important;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
// Adjust line length of title
|
||||
max-width: var(--normal-column-width) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Make hero smaller than 100vh
|
||||
--heroHeight: 85svh;
|
||||
|
||||
@media (max-width: 960px) {
|
||||
--heroHeight: 65svh;
|
||||
}
|
||||
|
||||
// For small height
|
||||
@media (max-height: 850px) {
|
||||
--heroHeight: 100svh;
|
||||
}
|
||||
|
||||
// Custom hero sizing for landscape mobile
|
||||
@media (max-width: 960px) and (orientation: landscape) {
|
||||
--heroHeight: 200svh;
|
||||
}
|
||||
}
|
||||
|
||||
// Override default fixed height for hero layout in embeds
|
||||
.hero-wrapper.embedded {
|
||||
--heroHeight: 1000px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<Canvas of={HeroHeadlineStories.BackgroundGraphic} />
|
||||
|
||||
## With background video
|
||||
|
||||
Add a cover video and position the title with ease.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths';
|
||||
|
||||
export let embedded = false;
|
||||
</script>
|
||||
|
||||
<HeroHeadline
|
||||
{embedded}
|
||||
class="custom-hero"
|
||||
hed="The conflict in Ethiopia"
|
||||
hedSize="bigger"
|
||||
hedWidth="wide"
|
||||
authors={['Aditi Bhandari ', 'David Lewis']}
|
||||
publishTime={new Date('2020-12-18').toISOString()}
|
||||
>
|
||||
<div slot="background">
|
||||
<Video
|
||||
width="widest"
|
||||
class="my-0"
|
||||
showControls={false}
|
||||
preloadVideo="auto"
|
||||
playVideoWhenInView={false}
|
||||
src="{assets}/videos/intro.mp4"
|
||||
poster="{assets}/images/video-poster-intro.jpg"
|
||||
notes="Drone footage from the Village 8 refugee camp in Sudan."
|
||||
ariaDescription="Aerial footage of people houses in refugee camp"
|
||||
/>
|
||||
</div>
|
||||
</HeroHeadline>
|
||||
|
||||
<style lang="scss">
|
||||
.hero-wrapper {
|
||||
--heroHeight: calc(100svh - 60px);
|
||||
.custom-hero.headline {
|
||||
header {
|
||||
// Adjust vertical position as offset from default center
|
||||
top: calc(50svh - 250px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ffd430;
|
||||
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<Canvas of={HeroHeadlineStories.BackgroundVideo} />
|
||||
|
||||
## With inline photo
|
||||
|
||||
Reuters Graphics headline followed by a graphic or any media block.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import {
|
||||
HeroHeadline,
|
||||
FeaturePhoto,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths';
|
||||
|
||||
export let embedded = false;
|
||||
</script>
|
||||
|
||||
<HeroHeadline
|
||||
{embedded}
|
||||
hed={'Buried under the bricks'}
|
||||
hedWidth="wide"
|
||||
class="mb-0"
|
||||
dek={'How mud-brick housing made the Morocco earthquake so deadly'}
|
||||
section={'Global news'}
|
||||
authors={['Mariano Zafra']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
>
|
||||
<div slot="inline">
|
||||
<FeaturePhoto
|
||||
width="widest"
|
||||
class="my-0"
|
||||
src={`${assets}/images/myImage.jpg`}
|
||||
caption="Photo by REUTERS/Nacho Doce."
|
||||
altText="A photo of the town of Adassil, Morocco, showing severe damage to many houses, which have collapsed after the earthquake. The houses are all made of mud brick."
|
||||
/>
|
||||
</div>
|
||||
</HeroHeadline>
|
||||
```
|
||||
|
||||
<Canvas of={HeroHeadlineStories.InlinePhoto} />
|
||||
|
||||
## With inline graphic
|
||||
|
||||
Reuters Graphics headline followed by a graphic or any media block.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import {
|
||||
HeroHeadline,
|
||||
GraphicBlock,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import Map from './ai2svelte/graphic.svelte';
|
||||
import { assets } from '$app/paths';
|
||||
|
||||
export let embedded = false;
|
||||
</script>
|
||||
|
||||
<HeroHeadline
|
||||
{embedded}
|
||||
hed={'The plunge from 29,000 feet'}
|
||||
hedWidth="wide"
|
||||
class="mb-0"
|
||||
dek={'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}
|
||||
section={'Global news'}
|
||||
authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
>
|
||||
<div slot="inline">
|
||||
<GraphicBlock
|
||||
width="widest"
|
||||
role="img"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
|
||||
ariaDescription="Aerial map showing trajectory of crash"
|
||||
>
|
||||
<svelte:component this={Map} assetsPath={assets || '/'} />
|
||||
</GraphicBlock>
|
||||
</div>
|
||||
</HeroHeadline>
|
||||
```
|
||||
|
||||
<Canvas of={HeroHeadlineStories.InlineGraphic} />
|
||||
|
||||
## With inline video
|
||||
|
||||
Add a cover video and position the title with ease.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths';
|
||||
|
||||
export let embedded = false;
|
||||
</script>
|
||||
|
||||
<HeroHeadline
|
||||
{embedded}
|
||||
hed={'Devastation in Derna'}
|
||||
hedWidth="wide"
|
||||
class="mb-0"
|
||||
dek={'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}
|
||||
section={'Global news'}
|
||||
authors={['Simon Scarr']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
>
|
||||
<div slot="inline">
|
||||
<Video
|
||||
width="widest"
|
||||
class="my-0"
|
||||
showControls={false}
|
||||
preloadVideo="auto"
|
||||
playVideoWhenInView={false}
|
||||
src="{assets}/videos/intro.mp4"
|
||||
notes="Drone shots of Derna, Libya. September 14, 2023. REUTERS"
|
||||
ariaDescription="alttext fot video"
|
||||
/>
|
||||
</div>
|
||||
</HeroHeadline>
|
||||
```
|
||||
|
||||
<Canvas of={HeroHeadlineStories.InlineVideo} />
|
||||
|
||||
## Custom hed
|
||||
|
||||
Add a custom styled headline.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { HeroHeadline } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||||
|
||||
export let embedded = false;
|
||||
</script>
|
||||
|
||||
<HeroHeadline
|
||||
{embedded}
|
||||
class="custom-hed"
|
||||
authors={[
|
||||
'Prasanta Kumar Dutta',
|
||||
'Dea Bankova',
|
||||
'Aditi Bhandari',
|
||||
'Anurag Rao',
|
||||
]}
|
||||
publishTime={new Date('2023-05-11').toISOString()}
|
||||
img={`${assets}/images/myImage.jpg`}
|
||||
>
|
||||
<h1 slot="hed">
|
||||
<div class="body-note">A visual guide to</div>
|
||||
<div class="title text-6xl font-light tracking-widest">EUROVISION</div>
|
||||
</h1>
|
||||
</HeroHeadline>
|
||||
|
||||
<style lang="scss">
|
||||
.custom-hed {
|
||||
h1 {
|
||||
.body-note {
|
||||
color: #ffffff;
|
||||
}
|
||||
.title {
|
||||
color: #ffffff;
|
||||
text-shadow: 1px 1px 8px #ff7c88;
|
||||
filter: drop-shadow(0px 0px 12px #ff7c88);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<Canvas of={HeroHeadlineStories.CustomHed} />
|
||||
|
|
@ -1,31 +1,10 @@
|
|||
<!-- @migration-task Error while migrating Svelte code: end is out of bounds -->
|
||||
<script context="module" lang="ts">
|
||||
// @ts-ignore raw
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
// @ts-ignore raw
|
||||
import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
|
||||
// @ts-ignore raw
|
||||
import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
|
||||
// @ts-ignore raw
|
||||
import inlinePhotoDocs from './stories/docs/inlinePhoto.md?raw';
|
||||
// @ts-ignore raw
|
||||
import transparentHeaderDocs from './stories/docs/transparentHeader.md?raw';
|
||||
// @ts-ignore raw
|
||||
import videoDocs from './stories/docs/backgroundVideo.md?raw';
|
||||
// @ts-ignore raw
|
||||
import customHedDocs from './stories/docs/customHed.md?raw';
|
||||
<script module lang="ts">
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import HeroHeadline from './HeroHeadline.svelte';
|
||||
|
||||
import HeroHeadline from './Hero.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
export const meta = {
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/Text elements/HeroHeadline',
|
||||
component: HeroHeadline,
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
hedSize: {
|
||||
control: 'select',
|
||||
|
|
@ -44,16 +23,12 @@
|
|||
options: ['normal', 'wide', 'wider', 'widest'],
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { Template, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// @ts-ignore img
|
||||
import polarImgSrc from './stories/polar.jpg';
|
||||
// @ts-ignore img
|
||||
import eurovisImgSrc from './stories/eurovis.jpeg';
|
||||
import polarImgSrc from './demo/polar.jpg';
|
||||
import eurovisImgSrc from './demo/eurovis.jpeg';
|
||||
|
||||
import Block from '../Block/Block.svelte';
|
||||
import SiteHeader from '../SiteHeader/SiteHeader.svelte';
|
||||
|
|
@ -61,31 +36,41 @@
|
|||
import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
|
||||
import Video from '../Video/Video.svelte';
|
||||
|
||||
import CrashMap from './stories/graphics/crash.svelte';
|
||||
import QuakeMap from './stories/graphics/quakemap.svelte';
|
||||
import CrashMap from './demo/graphics/crash.svelte';
|
||||
import QuakeMap from './demo/graphics/quakemap.svelte';
|
||||
</script>
|
||||
|
||||
<Template let:args>
|
||||
{#snippet template(args)}
|
||||
<Block width="fluid" class="chromatic-ignore">
|
||||
<SiteHeader />
|
||||
</Block>
|
||||
|
||||
<HeroHeadline {...args} />
|
||||
</Template>
|
||||
{/snippet}
|
||||
|
||||
<Story
|
||||
name="With backdrop photo"
|
||||
args="{{
|
||||
name="Demo"
|
||||
args={{
|
||||
section: 'World News',
|
||||
hed: 'Reuters Graphics Interactive',
|
||||
dek: 'The beginning of a beautiful page',
|
||||
authors: ['Simon Scarr', 'Vijdan Mohammad Kawoosa'],
|
||||
publishTime: new Date('2022-03-04').toISOString(),
|
||||
img: polarImgSrc,
|
||||
}}"
|
||||
/>
|
||||
}}
|
||||
>
|
||||
{@render template({
|
||||
section: 'World News',
|
||||
hed: 'Reuters Graphics Interactive',
|
||||
dek: 'The beginning of a beautiful page',
|
||||
authors: ['Simon Scarr', 'Vijdan Mohammad Kawoosa'],
|
||||
publishTime: new Date('2022-03-04').toISOString(),
|
||||
img: polarImgSrc,
|
||||
})}
|
||||
</Story>
|
||||
|
||||
<Story name="With transparent header" {...withStoryDocs(transparentHeaderDocs)}>
|
||||
<!--
|
||||
<Story name="With transparent header">
|
||||
<div class="transparent-header">
|
||||
<Block width="fluid" class="chromatic-ignore">
|
||||
<SiteHeader />
|
||||
|
|
@ -95,25 +80,25 @@
|
|||
section="World News"
|
||||
hed="Reuters Graphics Interactive"
|
||||
dek="The beginning of a beautiful page"
|
||||
authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
|
||||
publishTime="{new Date('2022-03-04').toISOString()}"
|
||||
img="{polarImgSrc}"
|
||||
authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
|
||||
publishTime={new Date('2022-03-04').toISOString()}
|
||||
img={polarImgSrc}
|
||||
/>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="With backdrop graphic" {...withStoryDocs(backgroundGraphicDocs)}>
|
||||
<Story name="With backdrop graphic">
|
||||
<Block width="fluid" class="chromatic-ignore">
|
||||
<SiteHeader />
|
||||
</Block>
|
||||
|
||||
<HeroHeadline
|
||||
hed="{'Earthquake devastates Afghanistan'}"
|
||||
hedSize="{'big'}"
|
||||
hed={'Earthquake devastates Afghanistan'}
|
||||
hedSize={'big'}
|
||||
hedWidth="wide"
|
||||
class="custom-hero mb-0"
|
||||
dek=""
|
||||
authors="{[
|
||||
authors={[
|
||||
'Anand Katakam',
|
||||
'Vijdan Mohammad Kawoosa',
|
||||
'Adolfo Arranz',
|
||||
|
|
@ -123,8 +108,8 @@
|
|||
'Jitesh Chowdhury',
|
||||
'Manas Sharma',
|
||||
'Aditi Bhandari',
|
||||
]}"
|
||||
publishTime="{new Date('2022-06-24').toISOString()}"
|
||||
]}
|
||||
publishTime={new Date('2022-06-24').toISOString()}
|
||||
>
|
||||
<div slot="background">
|
||||
<GraphicBlock
|
||||
|
|
@ -135,7 +120,7 @@
|
|||
notes=""
|
||||
ariaDescription="Earthquake impact map"
|
||||
>
|
||||
<svelte:component this="{QuakeMap}" />
|
||||
<svelte:component this={QuakeMap} />
|
||||
</GraphicBlock>
|
||||
</div>
|
||||
</HeroHeadline>
|
||||
|
|
@ -176,7 +161,7 @@
|
|||
</style>
|
||||
</Story>
|
||||
|
||||
<Story name="With backdrop video" {...withStoryDocs(videoDocs)}>
|
||||
<Story name="With backdrop video">
|
||||
<Block width="fluid" class="chromatic-ignore">
|
||||
<SiteHeader />
|
||||
</Block>
|
||||
|
|
@ -186,16 +171,16 @@
|
|||
hed="The conflict in Ethiopia"
|
||||
hedSize="bigger"
|
||||
hedWidth="wide"
|
||||
authors="{['Aditi Bhandari ', 'David Lewis']}"
|
||||
publishTime="{new Date('2020-12-18').toISOString()}"
|
||||
authors={['Aditi Bhandari ', 'David Lewis']}
|
||||
publishTime={new Date('2020-12-18').toISOString()}
|
||||
>
|
||||
<div slot="background">
|
||||
<Video
|
||||
width="widest"
|
||||
class="my-0"
|
||||
showControls="{false}"
|
||||
showControls={false}
|
||||
preloadVideo="auto"
|
||||
playVideoWhenInView="{false}"
|
||||
playVideoWhenInView={false}
|
||||
src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
|
||||
poster="https://www.reuters.com/resizer/vexYmtEuXKmfnsCbfS6jSMVbHms=/1080x0/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/VKJHKJEENVO4DASDND3VLHPV5Y.jpg"
|
||||
notes="Drone footage from the Village 8 refugee camp in Sudan."
|
||||
|
|
@ -221,19 +206,19 @@
|
|||
</style>
|
||||
</Story>
|
||||
|
||||
<Story name="With inline photo" {...withStoryDocs(inlinePhotoDocs)}>
|
||||
<Story name="With inline photo">
|
||||
<Block width="fluid" class="chromatic-ignore">
|
||||
<SiteHeader />
|
||||
</Block>
|
||||
|
||||
<HeroHeadline
|
||||
hed="{'Buried under the bricks'}"
|
||||
hed={'Buried under the bricks'}
|
||||
hedWidth="wide"
|
||||
class="mb-0"
|
||||
dek="{'How mud-brick housing made the Morocco earthquake so deadly'}"
|
||||
section="{'Global news'}"
|
||||
authors="{['Mariano Zafra']}"
|
||||
publishTime="{new Date('2020-01-01').toISOString()}"
|
||||
dek={'How mud-brick housing made the Morocco earthquake so deadly'}
|
||||
section={'Global news'}
|
||||
authors={['Mariano Zafra']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
>
|
||||
<div slot="inline">
|
||||
<FeaturePhoto
|
||||
|
|
@ -247,19 +232,19 @@
|
|||
</HeroHeadline>
|
||||
</Story>
|
||||
|
||||
<Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
|
||||
<Story name="With inline graphic">
|
||||
<Block width="fluid" class="chromatic-ignore">
|
||||
<SiteHeader />
|
||||
</Block>
|
||||
|
||||
<HeroHeadline
|
||||
hed="{'The plunge from 29,000 feet'}"
|
||||
hed={'The plunge from 29,000 feet'}
|
||||
hedWidth="wide"
|
||||
class="mb-0"
|
||||
dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
|
||||
section="{'Global news'}"
|
||||
authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
|
||||
publishTime="{new Date('2020-01-01').toISOString()}"
|
||||
dek={'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}
|
||||
section={'Global news'}
|
||||
authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
>
|
||||
<div slot="inline">
|
||||
<GraphicBlock
|
||||
|
|
@ -270,33 +255,33 @@
|
|||
notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
|
||||
ariaDescription="Aerial map showing trajectory of crash"
|
||||
>
|
||||
<svelte:component this="{CrashMap}" />
|
||||
<svelte:component this={CrashMap} />
|
||||
</GraphicBlock>
|
||||
</div>
|
||||
</HeroHeadline>
|
||||
</Story>
|
||||
|
||||
<Story name="With inline video" {...withStoryDocs(inlinePhotoDocs)}>
|
||||
<Story name="With inline video">
|
||||
<Block width="fluid" class="chromatic-ignore">
|
||||
<SiteHeader />
|
||||
</Block>
|
||||
|
||||
<HeroHeadline
|
||||
hed="{'Devastation in Derna'}"
|
||||
hed={'Devastation in Derna'}
|
||||
hedWidth="wide"
|
||||
class="mb-0"
|
||||
dek="{'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}"
|
||||
section="{'Global news'}"
|
||||
authors="{['Simon Scarr']}"
|
||||
publishTime="{new Date('2020-01-01').toISOString()}"
|
||||
dek={'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}
|
||||
section={'Global news'}
|
||||
authors={['Simon Scarr']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
>
|
||||
<div slot="inline">
|
||||
<Video
|
||||
width="widest"
|
||||
class="my-0"
|
||||
showControls="{false}"
|
||||
showControls={false}
|
||||
preloadVideo="auto"
|
||||
playVideoWhenInView="{false}"
|
||||
playVideoWhenInView={false}
|
||||
src="https://www.reuters.com/graphics/LIBYA-STORM/EXPLAINER/klvyzqebzpg/cdn/video/drone.mp4"
|
||||
notes="Drone shots of Derna, Libya. September 14, 2023. REUTERS"
|
||||
ariaDescription="alttext fot video"
|
||||
|
|
@ -305,17 +290,17 @@
|
|||
</HeroHeadline>
|
||||
</Story>
|
||||
|
||||
<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
|
||||
<Story name="With custom hed">
|
||||
<HeroHeadline
|
||||
class="custom-hed"
|
||||
authors="{[
|
||||
authors={[
|
||||
'Prasanta Kumar Dutta',
|
||||
'Dea Bankova',
|
||||
'Aditi Bhandari',
|
||||
'Anurag Rao',
|
||||
]}"
|
||||
publishTime="{new Date('2023-05-11').toISOString()}"
|
||||
img="{eurovisImgSrc}"
|
||||
]}
|
||||
publishTime={new Date('2023-05-11').toISOString()}
|
||||
img={eurovisImgSrc}
|
||||
>
|
||||
<h1 slot="hed">
|
||||
<div class="body-note">A visual guide to</div>
|
||||
|
|
@ -337,7 +322,7 @@
|
|||
}
|
||||
}
|
||||
</style>
|
||||
</Story>
|
||||
</Story> -->
|
||||
|
||||
<style lang="scss">
|
||||
.transparent-header {
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
|
||||
<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-heroheadline--docs) -->
|
||||
<script lang="ts">
|
||||
import type { HeadlineSize } from '../@types/global';
|
||||
|
|
@ -96,7 +95,7 @@
|
|||
{#if $$slots.hed}
|
||||
<Headline
|
||||
class="{cls} !text-{hedAlign}"
|
||||
width="{hedWidth}"
|
||||
width={hedWidth}
|
||||
{section}
|
||||
{hedSize}
|
||||
{hed}
|
||||
|
|
@ -110,7 +109,7 @@
|
|||
{:else}
|
||||
<Headline
|
||||
class="{cls} !text-{hedAlign}"
|
||||
width="{hedWidth}"
|
||||
width={hedWidth}
|
||||
{section}
|
||||
{hedSize}
|
||||
{hed}
|
||||
|
|
@ -144,11 +143,11 @@
|
|||
<!-- Inline hero -->
|
||||
{#if $$slots.inline}
|
||||
<Block width="fluid" class="hero-headline inline-hero">
|
||||
<PaddingReset containerIsFluid="{true}">
|
||||
<PaddingReset containerIsFluid={true}>
|
||||
{#if $$slots.hed}
|
||||
<Headline
|
||||
class="{cls} !text-{hedAlign}"
|
||||
width="{hedWidth}"
|
||||
width={hedWidth}
|
||||
{section}
|
||||
{hedSize}
|
||||
{hed}
|
||||
|
|
@ -162,7 +161,7 @@
|
|||
{:else}
|
||||
<Headline
|
||||
class="{cls} !text-{hedAlign}"
|
||||
width="{hedWidth}"
|
||||
width={hedWidth}
|
||||
{section}
|
||||
{hedSize}
|
||||
{hed}
|
||||
|
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;
|
||||
}
|
||||
```
|
||||
Loading…
Reference in a new issue