wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

suggested changes

Browse source
This commit is contained in:
Jon McClure 2022-09-12 22:47:59 +01:00
parent 68c586684a
commit ad61eb558f
11 changed files with 334 additions and 325 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -88,6 +88,7 @@
"marked": "^4.0.8", "marked": "^4.0.8",
"proper-url-join": "^2.1.1", "proper-url-join": "^2.1.1",
"pym.js": "^1.3.2", "pym.js": "^1.3.2",
"slugify": "^1.6.5",
"svelte-fa": "^2.4.0", "svelte-fa": "^2.4.0",
"svelte-intersection-observer": "^0.10.0", "svelte-intersection-observer": "^0.10.0",
"svelte-search": "^2.0.1", "svelte-search": "^2.0.1",

153
src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
View file

@ -1,153 +0,0 @@
<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>

93
src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte
View file

@ -1,93 +0,0 @@
<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>

12
src/components/HeadlineBreakingNews/stories/docs/component.md
View file

@ -1,12 +0,0 @@
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
View file

@ -1,47 +0,0 @@
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>
```

20
src/components/HeadlineBreakingNews/stories/docs/withByline.md
View file

@ -1,20 +0,0 @@
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>
```

66
src/components/SiteHeadline/SiteHeadline.stories.svelte Normal file
View file

@ -0,0 +1,66 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
// @ts-ignore
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore
import quickitDocs from './stories/docs/quickit.md?raw';
import SiteHeadline from './SiteHeadline.svelte';
import {
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Components/SiteHeadline',
component: SiteHeadline,
...withComponentDocs(componentDocs),
};
const content = {
Section: 'Global News',
SectionUrl: '',
Hed: 'A beautiful page',
Authors: 'Samuel Granados, Dea Bankova',
Published: '2022-09-12T08:30:00.000Z',
Updated: '',
};
</script>
<Meta {...meta} />
<Template let:args>
<SiteHeadline {...args} />
</Template>
<Story
name="Default"
args="{{
section: 'Graphics',
sectionUrl: 'https://graphics.reuters.com',
hed: 'Ukraine makes surprising gains in swift counteroffensive',
authors: [
'Dea Bankova',
'Michael Ovaska',
'Samuel Granados',
'Prasanta Kumar Dutta',
],
publishTime: new Date('2021-09-12').toISOString(),
updateTime: new Date('2021-09-12T13:57:00').toISOString(),
}}"
/>
<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
<SiteHeadline
hed="{content.Hed}"
section="{content.Section}"
sectionUrl="{content.SectionUrl}"
authors="{content.Authors.split(',')}"
publishTime="{content.Published}"
/>
</Story>
<style lang="scss">
</style>

223
src/components/SiteHeadline/SiteHeadline.svelte Normal file
View file

@ -0,0 +1,223 @@
<script lang="ts">
/**
* Headline
* @type {string}
* @required
*/
export let hed: string = 'Reuters Graphics Interactive';
/**
* Section title.
* @type {string}
*/
export let section: string = 'Graphics';
/**
* Section url, parsed as a string. Set to blank to remove link.
* @type {string}
*/
export let sectionUrl: string = 'https://graphics.reuters.com';
/**
* 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 = '';
/**
* Add an id to to target with custom CSS.
* @type {string}
*/
export let id: string = '';
/**
* Add extra classes to target with custom CSS.
* @type {string}
*/
export let cls: string = '';
import Block from '../Block/Block.svelte';
import slugify from 'slugify';
import { apdate } from 'journalize';
const isValidDate = (datetime) => {
if (!datetime) return false;
if (!Date.parse(datetime)) return false;
return true;
};
const formatTime = (datetime) =>
new Date(datetime).toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
timeZoneName: 'short',
});
const areSameDay = (first, second) =>
first.getFullYear() === second.getFullYear() &&
first.getMonth() === second.getMonth() &&
first.getDate() === second.getDate();
</script>
<Block id="{id}" cls="headline-container {cls}" width="normal">
<header class="headline">
<div class="title">
{#if section}
<p class="section-title">
{#if sectionUrl}
<a href="{sectionUrl}">{section}</a>
{:else}
{section}
{/if}
</p>
{/if}
{#if hed}
<h1>{hed}</h1>
{/if}
</div>
<aside class="article-metadata">
<div class="byline-container">
<div class="byline">
By
{#if authors.length > 0}
{#each authors as author, i}
<a
href="https://www.reuters.com/authors/{slugify(author.trim(), {
lower: true,
})}/"
rel="author"
>
{author.trim()}</a
>{#if authors.length > 1 && i < authors.length - 2},{/if}
{#if authors.length > 1 && i === authors.length - 2}and&nbsp;{/if}
{/each}
{:else}
Reuters
{/if}
</div>
</div>
<div class="dateline-container">
{#if isValidDate(publishTime)}
<div>
Published
<time datetime="{publishTime}">
{#if isValidDate(updateTime)}
{apdate(new Date(publishTime))}
{:else}
{apdate(new Date(publishTime))}&nbsp;&nbsp;{formatTime(
publishTime
)}
{/if}
</time>
</div>
{/if}
{#if isValidDate(publishTime) && isValidDate(updateTime)}
<div>
Last updated
<time datetime="{updateTime}">
{#if areSameDay(new Date(publishTime), new Date(updateTime))}
{formatTime(updateTime)}
{:else}
{apdate(new Date(updateTime))}&nbsp;&nbsp;{formatTime(
updateTime
)}
{/if}
</time>
</div>
{/if}
</div>
</aside>
</header>
</Block>
<style lang="scss">
@import '../../scss/colours/thematic/tr';
@import '../../scss/fonts/variables';
:global(div.article-block.headline-container) {
margin: 4rem auto;
}
// Official styles
header.headline {
text-align: center;
color: var(--theme-colour-text-primary, $tr-dark-grey);
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-text-secondary, $tr-light-grey);
text-align: left;
font-size: 1.2rem;
opacity: 0.8;
@media (max-width: 600px) {
font-size: 1rem;
}
a {
color: var(--theme-colour-text-secondary, $tr-light-grey);
text-decoration: none;
}
}
}
.article-metadata {
padding: 40px 0 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: 0px;
}
.byline {
font-weight: bold;
font-weight: 600;
font-size: 1rem;
line-height: 1.4rem;
a {
color: var(--theme-colour-text-primary, $tr-dark-grey);
text-decoration: none;
white-space: nowrap;
&:hover {
text-decoration: underline;
}
}
}
.dateline-container {
text-transform: uppercase;
color: var(--theme-colour-text-secondary, $tr-medium-grey);
font-size: 0.8rem;
line-height: 1.1rem;
letter-spacing: 0.3px;
margin-top: 0.5rem;
}
}
}
</style>

11
src/components/SiteHeadline/stories/docs/component.md Normal file
View file

@ -0,0 +1,11 @@
A simplified Reuters Graphics headline, loosely modelled off our dotcom site.
Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround, usually shorter breaking news pages.
```svelte
<script>
import { SiteHeadline } from '@reuters-graphics/graphics-components';
</script>
<SiteHeadline hed="{'Reuters Graphics Interactive'}" />
```

28
src/components/SiteHeadline/stories/docs/quickit.md Normal file
View file

@ -0,0 +1,28 @@
Setup your Google Doc to work with the `SiteHeadline` component.
```yaml
# Beginning of your Google doc
Section: Global News
SectionUrl:
Hed: A beautiful page
Authors: Samuel Granados, Dea Bankova
Published: 2022-09-12T08:30:00.000Z
Updated:
```
```svelte
<!-- App.svelte -->
<script>
import { SiteHeadline } from '@reuters-graphics/graphics-components';
// These should be already imported for you.
import content from '$locales/en/content.json';
</script>
<SiteHeadline
section="{content.Section}"
sectionUrl="{content.SectionUrl}"
hed="{content.Hed}"
authors="{content.Authors.split(',')}"
/>
```

5
yarn.lock
View file

@ -10816,6 +10816,11 @@ slice-ansi@^2.1.0:
astral-regex "^1.0.0" astral-regex "^1.0.0"
is-fullwidth-code-point "^2.0.0" is-fullwidth-code-point "^2.0.0"
slugify@^1.6.5:
version "1.6.5"
resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.5.tgz#c8f5c072bf2135b80703589b39a3d41451fbe8c8"
integrity sha512-8mo9bslnBO3tr5PEVFzMPIWwWnipGS0xVbYf65zxDqfNwmzYn1LpiKNrR6DlClusuvo+hDHd1zKpmfAe83NQSQ==
snake-case@^3.0.4: snake-case@^3.0.4:
version "3.0.4" version "3.0.4"
resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c" resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"