Skip to content

Commit

Permalink
hero with graphic
Browse files Browse the repository at this point in the history
  • Loading branch information
@pkd2512
pkd2512 committed Aug 25, 2023
1 parent f1ae721 commit 10f4c55
Show file tree
Hide file tree
Showing 20 changed files with 1,690 additions and 91 deletions.
97 changes: 89 additions & 8 deletions src/components/HeroHeadline/Hero.stories.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,22 @@
// @ts-ignore
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore
// import backgroundImageDocs from './stories/docs/backgroundImage.md?raw';
import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
// @ts-ignore
import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
// @ts-ignore
import polarImgSrc from './stories/polar.jpg';
// import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
import HeroHeadline from './Hero.svelte';
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
import CrashMap from './stories/graphics/crash.svelte';
import QuakeMap from './stories/graphics/quakemap.svelte';
import {
withComponentDocs,
// withStoryDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
const metaProps = {
Expand All @@ -25,6 +30,10 @@
control: 'select',
options: ['small', 'normal', 'big', 'bigger', 'biggest'],
},
hedWidth: {
control: 'select',
options: ['normal', 'wide', 'wider', 'widest'],
},
width: {
control: 'select',
options: ['normal', 'wide', 'wider', 'widest'],
Expand All @@ -44,24 +53,96 @@
</Template>

<Story
name="Default"
name="With backdrop photo"
args="{{
section: 'World News',
hed: 'Reuters Graphics Interactive',
hedSize: 'normal',
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 inline media" {...withStoryDocs(backgroundImageDocs)}>
<Story name="With backdrop graphic" {...withStoryDocs(backgroundGraphicDocs)}>
<HeroHeadline
hed="{'Earthquake devastates Afghanistan'}"
hedSize="{'big'}"
hedWidth="wide"
class="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="fluid"
role="figure"
class="my-0"
textWidth="normal"
notes=""
ariaDescription="Earthquake impact map"
>
<svelte:component this="{QuakeMap}" />
</GraphicBlock>
</div>
</HeroHeadline>
<style lang="scss">
.hero-headline .headline {
align-items: flex-end;
@media (max-width: 1100px) {
max-width: var(--normal-column-width) !important;
}
}
.hero-wrapper {
// Make hero smaller than 100vh
--heroHeight: 85svh;
@media (max-width: 960px) {
--heroHeight: 65svh;
}
// Custom hero sizing for landscape mobile
@media (max-width: 960px) and (orientation: landscape) {
--heroHeight: 200svh;
}
}
</style>
</Story>

<Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
<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()}"
/>
</Story> -->
>
<div slot="inline">
<GraphicBlock
width="fluid"
role="figure"
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>
114 changes: 54 additions & 60 deletions src/components/HeroHeadline/Hero.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) -->
<script lang="ts">
import { HeadlineSize } from '../@types/global';
import cssVariables from '../../actions/cssVariables/index.js';
/** Set to true for embeddables. */
export let embedded: boolean = false;
Expand All @@ -10,19 +9,7 @@
* Path to background image
* @type {string}
*/
export let img: string;
/**
* Size value for CSS property background-size
* @type {string}
*/
export let backgroundSize: 'auto' | 'cover' | 'contain' = 'cover';
/**
* Position value for CSS property background-position
* @type {string}
*/
export let backgroundPos = 'center';
export let img: string | null = null;
/**
* ARIA description, passed in as a markdown string.
Expand All @@ -36,12 +23,6 @@
*/
export let notes: string | null = null;
/**
* Height as a percetange of viewport height
* @type {number}
*/
export let heroHeight: number = 100;
/**
* Headline, parsed as an _inline_ markdown string in an `h1` element.
* @type {string}
Expand All @@ -64,6 +45,11 @@
*/
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}
Expand All @@ -90,9 +76,9 @@
export let updateTime: string = '';
/**
* Width of the headline.
* Width of the Hero graphic.
*/
export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'normal';
export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'widest';
import Headline from '../Headline/Headline.svelte';
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
Expand Down Expand Up @@ -120,33 +106,27 @@
hedClass = 'text-3xl';
}
}
$: variables = {
heroHeight: embedded ? '850px' : heroHeight + 'svh',
backgroundSize,
backgroundPos,
};
</script>

<div class="hero-wrapper" use:cssVariables="{variables}">
<!-- Background media -->
<div class="hero-wrapper">
<!-- Background media hero-->
{#if $$slots.background || img}
<Block width="fluid" class="hero-headline fmt-0">
<Block width="fluid" class="hero-headline background-hero fmt-0">
<Headline
class="{cls} mt-0 !text-{hedAlign}"
width="{width}"
class="{cls} !text-{hedAlign}"
width="{hedWidth}"
section="{section}"
hedSize="{hedSize}"
hed="{hed}"
dek="{dek}"
/>
<div class="background-container">
{#if $$slots.background}
<!-- Hero named slot -->
<!-- Hero graphic named slot -->
<slot name="background" />
{:else}
<GraphicBlock
width="fluid"
width="{width}"
role="img"
class="my-0"
textWidth="normal"
Expand All @@ -160,23 +140,34 @@
{/if}
</div>
</Block>
{#if notes}
<TextBlock width="normal">
<aside class="fmt-2">
{@html marked(notes)}
</aside>
</TextBlock>
{/if}
{/if}
{#if notes}
<TextBlock width="normal">
<aside class="fmt-2">
{@html marked(notes)}
</aside>
</TextBlock>

<!-- Inline hero -->
{#if $$slots.inline}
<Block width="fluid" class="hero-headline inline-hero">
<Headline
class="{cls} !text-{hedAlign}"
width="{hedWidth}"
section="{section}"
hedSize="{hedSize}"
hed="{hed}"
dek="{dek}"
/>
<div class="graphic-container">
<!-- Hero named slot -->
<slot name="inline" />
</div>
</Block>
{/if}
</div>

{#if $$slots.inline}
<div class="crown-container">
<!-- Hero named slot -->
<slot name="inline" />
</div>
{/if}

{#if $$slots.byline}
<!-- Custom byline/dateline -->
<slot name="byline" />
Expand All @@ -194,26 +185,33 @@
@import '../../scss/mixins';
:global {
.hero-headline {
height: var(--heroHeight);
.background-hero {
height: var(--heroHeight, 100svh);
max-height: 1800px;
width: 100%;
position: relative;
.headline {
@include fmt-0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
position: absolute;
width: 100%;
top: 0;
left: 50%;
height: var(--heroHeight);
height: var(--heroHeight, 100svh);
max-height: 1800px;
transform: translateX(-50%);
}
}
.byline-container {
z-index: 1;
position: relative;
}
.hero-wrapper {
// Caption and Sources
aside {
Expand All @@ -224,17 +222,13 @@
}
}
.background-image {
position: absolute;
width: 100%;
height: var(--heroHeight);
width: auto;
height: var(--heroHeight, 100svh);
max-height: 1800px;
top: 0;
z-index: 0;
left: 0;
user-select: none;
background-repeat: no-repeat;
background-position: var(--backgroundPos);
background-size: var(--backgroundSize);
background-position: center;
background-size: cover;
}
</style>
Loading

0 comments on commit 10f4c55

Please sign in to comment.