66 lines
1.6 KiB
Text
66 lines
1.6 KiB
Text
import { Meta, Canvas } from '@storybook/blocks';
|
|
|
|
import * as SiteHeadlineStories from './SiteHeadline.stories.svelte';
|
|
|
|
<Meta of={SiteHeadlineStories} />
|
|
|
|
# SiteHeadline
|
|
|
|
The `SiteHeadline` component creates a simplified Reuters Graphics headline, loosely modelled off the Reuters.com styles.
|
|
|
|
Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround breaking news pages.
|
|
|
|
```svelte
|
|
<script>
|
|
import { SiteHeadline } from '@reuters-graphics/graphics-components';
|
|
</script>
|
|
|
|
<SiteHeadline
|
|
hed="Ukraine makes suprising gains in swift counteroffensive"
|
|
authors={[
|
|
'Dea Bankova',
|
|
'Michael Ovaska',
|
|
'Samuel Granados',
|
|
'Prasanta Kumar Dutta',
|
|
]}
|
|
publishTime="2021-09-12T00:00:00.000Z"
|
|
updateTime="2021-09-12T12:57:00.000Z"
|
|
/>
|
|
```
|
|
|
|
<Canvas of={SiteHeadlineStories.Demo} />
|
|
|
|
## Using with ArchieML docs
|
|
|
|
With the graphics kit, you'll likely get your text value from an ArchieML doc...
|
|
|
|
```yaml
|
|
# ArchieML doc
|
|
section: Global News # Optional
|
|
sectionUrl: https://www.reuters.com/graphics/ # Optional
|
|
hed: A beautiful page
|
|
authors: Samuel Granados, Dea Bankova
|
|
published: 2022-09-12T08:30:00.000Z
|
|
updated:
|
|
```
|
|
|
|
... which you'll pass to the `SiteHeadline` component.
|
|
|
|
```svelte
|
|
<!-- App.svelte -->
|
|
<script>
|
|
import { SiteHeadline } from '@reuters-graphics/graphics-components';
|
|
import content from '$locales/en/content.json';
|
|
</script>
|
|
|
|
<SiteHeadline
|
|
section={content.section}
|
|
sectionUrl={content.sectionUrl}
|
|
hed={content.hed}
|
|
authors={content.authors.split(',')}
|
|
publishTime={content.publishTime}
|
|
updateTime={content.updatTime}
|
|
/>
|
|
```
|
|
|
|
<Canvas of={SiteHeadlineStories.ArchieML} />
|