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.
|
||||
*/
|
||||
updateTime: string;
|
||||
updateTime?: string;
|
||||
/**
|
||||
* Alignment of the byline.
|
||||
*/
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
<div class="whitespace-nowrap inline-block">
|
||||
Published
|
||||
<time datetime={publishTime}>
|
||||
{#if isValidDate(updateTime)}
|
||||
{#if updateTime && isValidDate(updateTime)}
|
||||
{apdate(new Date(publishTime))}
|
||||
{:else}
|
||||
{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'}
|
||||
authors={['Jane Doe']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
getAuthorPage={(author: string) => {
|
||||
getAuthorPage={(author: string) => {
|
||||
return `mailto:${author.replace(' ', '')}@example.com`;
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
interface Props {
|
||||
/** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
|
||||
hed: string | Snippet;
|
||||
|
||||
/** Add extra classes to the block tag to target it with custom CSS. */
|
||||
class?: string;
|
||||
/** 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 BodyText } from './components/BodyText/BodyText.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 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 GraphicBlock } from './components/GraphicBlock/GraphicBlock.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 InfoBox } from './components/InfoBox/InfoBox.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 Video } from './components/Video/Video.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