adding HeadlineBreakingNews component
This commit is contained in:
deaxmachina
parent
95e3b519d5
commit
68c586684a
7 changed files with 332 additions and 1 deletions
|
|
@ -82,6 +82,7 @@
|
||||||
"bootstrap": "^5.2.0",
|
"bootstrap": "^5.2.0",
|
||||||
"classnames": "^2.3.1",
|
"classnames": "^2.3.1",
|
||||||
"dayjs": "^1.11.3",
|
"dayjs": "^1.11.3",
|
||||||
|
"journalize": "^2.5.1",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
"lottie-web": "^5.7.13",
|
"lottie-web": "^5.7.13",
|
||||||
"marked": "^4.0.8",
|
"marked": "^4.0.8",
|
||||||
|
|
@ -214,4 +215,4 @@
|
||||||
".": "./dist/index.js"
|
".": "./dist/index.js"
|
||||||
},
|
},
|
||||||
"svelte": "./dist/index.js"
|
"svelte": "./dist/index.js"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
153
src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
Normal file
153
src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
Normal file
|
|
@ -0,0 +1,153 @@
|
||||||
|
<script lang="ts">
|
||||||
|
/**
|
||||||
|
* Headline, parsed as an _inline_ markdown string in an `h1` element.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
export let hed: string = 'Reuters Graphics Interactive';
|
||||||
|
/**
|
||||||
|
* Section title, defaulting to 'Reuters Graphics'. Change to custom title if desired.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
export let section: string = 'Reuters Graphics';
|
||||||
|
/**
|
||||||
|
* Section url, parsed as a string, defaulting to graphics.reuters.com. Set to blank to remove link.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
export let sectionUrl: string = 'https://graphics.reuters.com/';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Margin bottom, passed as CSS string, defining distance between Headline and body; can be negative.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
export let marginBottom = '4rem';
|
||||||
|
|
||||||
|
import Block from '../Block/Block.svelte';
|
||||||
|
import { marked } from 'marked';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Block cls="mb-1" width="normal">
|
||||||
|
<header class="headline" style="--marginBottom: {marginBottom};">
|
||||||
|
<div class="title">
|
||||||
|
{#if section}
|
||||||
|
<p class="{'section-title'}">
|
||||||
|
{#if sectionUrl}
|
||||||
|
<a href="{sectionUrl}">{section}</a>
|
||||||
|
{:else}
|
||||||
|
{section}
|
||||||
|
{/if}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
{#if hed}
|
||||||
|
<h1>{@html marked.parseInline(hed)}</h1>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if $$slots.byline || $$slots.dateline}
|
||||||
|
<aside class="article-metadata" class:pt-1="{false}">
|
||||||
|
{#if $$slots.byline}
|
||||||
|
<div class="byline-container">
|
||||||
|
<div class="byline">
|
||||||
|
<!-- Byline named slot -->
|
||||||
|
<slot name="byline" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if $$slots.dateline}
|
||||||
|
<div class="dateline-container">
|
||||||
|
<div class="published">
|
||||||
|
<!-- Dateline named slot -->
|
||||||
|
<slot name="dateline" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</aside>
|
||||||
|
{/if}
|
||||||
|
</header>
|
||||||
|
</Block>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../scss/colours/thematic/tr';
|
||||||
|
@import '../../scss/fonts/variables';
|
||||||
|
|
||||||
|
// Official styles
|
||||||
|
header.headline {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 4rem;
|
||||||
|
margin-bottom: var(--marginBottom);
|
||||||
|
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global {
|
||||||
|
h1 {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 3rem;
|
||||||
|
line-height: 1.14;
|
||||||
|
margin: 0.6rem 0;
|
||||||
|
font-family: var(--theme-font-family-hed, $font-family-display);
|
||||||
|
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
font-size: 2.6rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
font-size: 2.1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-family: var(--theme-font-family-subhed, $font-family-display);
|
||||||
|
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 200;
|
||||||
|
|
||||||
|
&.section-title {
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--theme-colour-accent, $tr-dark-red);
|
||||||
|
text-align: left;
|
||||||
|
color: #999;
|
||||||
|
font-size: 16px;
|
||||||
|
a {
|
||||||
|
color: #999;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.article-metadata {
|
||||||
|
padding: 40px 0;
|
||||||
|
padding-top: 0;
|
||||||
|
font-family: var(--theme-font-family-note, $font-family-display);
|
||||||
|
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.byline-container {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.byline {
|
||||||
|
font-weight: bold;
|
||||||
|
//color: #404040;
|
||||||
|
font-weight: 600;
|
||||||
|
strong {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
:global {
|
||||||
|
a {
|
||||||
|
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dateline-container {
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--theme-colour-text-secondary, $tr-medium-grey);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
<script>
|
||||||
|
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||||
|
import { apdate } from 'journalize';
|
||||||
|
import { marked } from 'marked';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import componentDocs from './stories/docs/component.md?raw';
|
||||||
|
// @ts-ignore
|
||||||
|
import withByline from './stories/docs/withByline.md?raw';
|
||||||
|
// @ts-ignore
|
||||||
|
import quickitDocs from './stories/docs/quickit.md?raw';
|
||||||
|
|
||||||
|
import HeadlineBreakingNews from './HeadlineBreakingNews.svelte';
|
||||||
|
|
||||||
|
import {
|
||||||
|
withComponentDocs,
|
||||||
|
withStoryDocs,
|
||||||
|
} from '$lib/docs/utils/withParams.js';
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: 'Components/HeadlineBreakingNews',
|
||||||
|
component: HeadlineBreakingNews,
|
||||||
|
...withComponentDocs(componentDocs),
|
||||||
|
};
|
||||||
|
|
||||||
|
const content = {
|
||||||
|
Kicker: 'Global News',
|
||||||
|
KickerUrl: '',
|
||||||
|
Hed: 'Reuters Graphics Interactive',
|
||||||
|
Byline: 'Sherlock Holmes',
|
||||||
|
Published: '2022-09-12T08:30:00.000Z',
|
||||||
|
Updated: '',
|
||||||
|
MarginBottom: '2rem',
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Meta {...meta} />
|
||||||
|
|
||||||
|
<Template let:args>
|
||||||
|
<HeadlineBreakingNews {...args} />
|
||||||
|
</Template>
|
||||||
|
|
||||||
|
<Story
|
||||||
|
name="Default"
|
||||||
|
args="{{
|
||||||
|
hed: 'Reuters Graphics interactive',
|
||||||
|
}}"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Story
|
||||||
|
name="With byline, dateline, without a link to Reuters Graphics"
|
||||||
|
{...withStoryDocs(withByline)}
|
||||||
|
>
|
||||||
|
<HeadlineBreakingNews
|
||||||
|
hed="{'Reuters Graphics Interactive'}"
|
||||||
|
section="{'World News'}"
|
||||||
|
sectionUrl=""
|
||||||
|
>
|
||||||
|
<!-- Use named slots to add a byline... -->
|
||||||
|
<span slot="byline">By <strong>Peppa Pig</strong></span>
|
||||||
|
<!-- ...and a dateline. -->
|
||||||
|
<span slot="dateline"
|
||||||
|
>Published <time datetime="{new Date('2020-01-01').toISOString()}"
|
||||||
|
>Jan. 1, 2020</time
|
||||||
|
></span
|
||||||
|
>
|
||||||
|
</HeadlineBreakingNews>
|
||||||
|
</Story>
|
||||||
|
|
||||||
|
<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
|
||||||
|
<HeadlineBreakingNews
|
||||||
|
hed="{content.Hed}"
|
||||||
|
section="{content.Kicker}"
|
||||||
|
sectionUrl="{content.KickerUrl}"
|
||||||
|
marginBottom="{content.MarginBottom}"
|
||||||
|
>
|
||||||
|
<span slot="byline">By {@html marked.parseInline(content.Byline)} </span>
|
||||||
|
<div slot="dateline">
|
||||||
|
Published <time datetime="{content.Published}">
|
||||||
|
{apdate(new Date(content.Published))}</time
|
||||||
|
>
|
||||||
|
{#if content.Updated}
|
||||||
|
<br /> Updated
|
||||||
|
<time datetime="{content.Updated}">
|
||||||
|
{apdate(new Date(content.Updated))}
|
||||||
|
</time>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</HeadlineBreakingNews>
|
||||||
|
</Story>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
Reuters Graphics headline for breaking news pages
|
||||||
|
|
||||||
|
This is a simplified version of the `Headline` component. It doesn't allow for the addition of crown, the dek is removed, and the styles are
|
||||||
|
simplified. It is meant to serve as a unifying style for quick turnaround pages.
|
||||||
|
|
||||||
|
```svelte
|
||||||
|
<script>
|
||||||
|
import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Headline hed="{'Reuters Graphics Interactive'}" />
|
||||||
|
```
|
||||||
47
src/components/HeadlineBreakingNews/stories/docs/quickit.md
Normal file
47
src/components/HeadlineBreakingNews/stories/docs/quickit.md
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
Setup your Google Doc to work with the `HeadlineBreakingNews` component.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# Beginning of your Google doc
|
||||||
|
Kicker: Global News
|
||||||
|
KickerUrl:
|
||||||
|
Hed: A beautiful page
|
||||||
|
Byline: Sherlock Holmes
|
||||||
|
Published: 2022-09-12T08:30:00.000Z
|
||||||
|
Updated:
|
||||||
|
MarginBottom: 2rem
|
||||||
|
```
|
||||||
|
|
||||||
|
Note that this works in exactly the same way as the `Headline` component, but for the extra prop of `KickerUrl` which you need to add if
|
||||||
|
you don't want your kicker to be a link to Reuters Graphics. You can also additionally have a `MarginBottom` prop.
|
||||||
|
|
||||||
|
```svelte
|
||||||
|
<!-- App.svelte -->
|
||||||
|
<script>
|
||||||
|
import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
|
||||||
|
|
||||||
|
// These should be already imported for you.
|
||||||
|
import content from '$locales/en/content.json';
|
||||||
|
import { apdate } from 'journalize';
|
||||||
|
import { marked } from 'marked';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<HeadlineBreakingNews
|
||||||
|
section="{content.Kicker}"
|
||||||
|
sectionUrl="{content.KickerUrl}"
|
||||||
|
hed="{content.Hed}"
|
||||||
|
marginBottom="{content.MarginBottom}"
|
||||||
|
>
|
||||||
|
<span slot="byline">By {@html marked.parseInline(content.Byline)} </span>
|
||||||
|
<div slot="dateline">
|
||||||
|
Published <time datetime="{content.Published}">
|
||||||
|
{apdate(new Date(content.Published))}</time
|
||||||
|
>
|
||||||
|
{#if content.Updated}
|
||||||
|
<br /> Updated
|
||||||
|
<time datetime="{content.Updated}">
|
||||||
|
{apdate(new Date(content.Updated))}
|
||||||
|
</time>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</HeadlineBreakingNews>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
Add a byline and dateline with `byline` and `dateline` named slots.
|
||||||
|
If you don't want to display 'Global Graphics' with a link to graphics.reuters.com at the top, you can
|
||||||
|
replace with a section title using the `section` prop and leaving the `sectionUrl` blank.
|
||||||
|
|
||||||
|
```svelte
|
||||||
|
<script>
|
||||||
|
import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<HeadlineBreakingNews
|
||||||
|
hed="{'Reuters Graphics Interactive'}"
|
||||||
|
section="{'World News'}"
|
||||||
|
sectionUrl=""
|
||||||
|
>
|
||||||
|
<!-- Use named slots to add a byline... -->
|
||||||
|
<span slot="byline">By <strong>Peppa Pig</strong></span>
|
||||||
|
<!-- ...and a dateline. -->
|
||||||
|
<span slot="dateline">Published Jan. 1, 2020</span>
|
||||||
|
</HeadlineBreakingNews>
|
||||||
|
```
|
||||||
|
|
@ -7748,6 +7748,11 @@ jest-worker@^27.4.5:
|
||||||
merge-stream "^2.0.0"
|
merge-stream "^2.0.0"
|
||||||
supports-color "^8.0.0"
|
supports-color "^8.0.0"
|
||||||
|
|
||||||
|
journalize@^2.5.1:
|
||||||
|
version "2.5.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/journalize/-/journalize-2.5.1.tgz#d9c70452566e2b40f99b02b0263281c493c8c9b0"
|
||||||
|
integrity sha512-ha19m4ZiRitEsdMuwk0QMyjqTVicsJUJxz9TNkWBFJHIKAgEmXBJ8A6XR/GM1oW9fpRoGCBNLYej5U7ZdnDBMg==
|
||||||
|
|
||||||
js-string-escape@^1.0.1:
|
js-string-escape@^1.0.1:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
|
resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue