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",
|
||||
"classnames": "^2.3.1",
|
||||
"dayjs": "^1.11.3",
|
||||
"journalize": "^2.5.1",
|
||||
"lodash-es": "^4.17.21",
|
||||
"lottie-web": "^5.7.13",
|
||||
"marked": "^4.0.8",
|
||||
|
|
@ -214,4 +215,4 @@
|
|||
".": "./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"
|
||||
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:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
|
||||
|
|
|
|||
Loading…
Reference in a new issue