110 lines
2.5 KiB
Text
110 lines
2.5 KiB
Text
import { Meta, Canvas } from '@storybook/blocks';
|
|
|
|
import * as BylineStories from './Byline.stories.svelte';
|
|
|
|
<Meta of={BylineStories} />
|
|
|
|
# Byline
|
|
|
|
The `Byline` component adds a byline, published and updated datelines to your page.
|
|
|
|
```svelte
|
|
<script>
|
|
import { Byline } from '@reuters-graphics/graphics-components';
|
|
</script>
|
|
|
|
<Byline
|
|
authors={[
|
|
'Dea Bankova',
|
|
'Prasanta Kumar Dutta',
|
|
'Anurag Rao',
|
|
'Mariano Zafra',
|
|
]}
|
|
publishTime="2021-09-12T00:00:00.000Z"
|
|
updateTime="2021-09-12T12:57:00.000Z"
|
|
/>
|
|
```
|
|
|
|
## Using with ArchieML docs
|
|
|
|
With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
|
|
|
|
```yaml
|
|
# ArchieML doc
|
|
[authors]
|
|
* Dea Bankova
|
|
* Prasanta Kumar Dutta
|
|
* Anurag Rao
|
|
* Mariano Zafra
|
|
[]
|
|
publishTime: 2021-09-12T00:00:00.000Z
|
|
updateTime: 2021-09-12T12:57:00.000Z
|
|
```
|
|
|
|
... which you'll pass to the `Byline` component.
|
|
|
|
```svelte
|
|
<script>
|
|
import { Byline } from '@reuters-graphics/graphics-components';
|
|
import content from '$locales/en/content.json';
|
|
</script>
|
|
|
|
<Byline
|
|
authors={content.authors}
|
|
publishTime={content.publishTime}
|
|
updateTime={content.updateTime}
|
|
/>
|
|
```
|
|
|
|
<Canvas of={BylineStories.Demo} />
|
|
|
|
## Custom byline, published and updated datelines
|
|
|
|
Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the byline, published and updated datelines.
|
|
|
|
```svelte
|
|
<Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
|
|
<!-- Optional custom byline -->
|
|
{#snippet byline()}
|
|
<strong>BY REUTERS GRAPHICS</strong>
|
|
{/snippet}
|
|
|
|
<!-- Optional custom published dateline -->
|
|
{#snippet published()}
|
|
PUBLISHED on some custom date and time
|
|
{/snippet}
|
|
|
|
<!-- Optional custom updated dateline -->
|
|
{#snippet updated()}
|
|
<em>Updated every 5 minutes</em>
|
|
{/snippet}
|
|
</Byline>
|
|
```
|
|
|
|
<Canvas of={BylineStories.Customised} />
|
|
|
|
## Custom author page
|
|
|
|
By default, the `Byline` component will hyperlink each author's byline to their Reuters.com page, formatted `https://www.reuters.com/authors/{author-slug}/`.
|
|
|
|
To hyperlink to different pages or email addresses, pass a custom function to the `getAuthorPage` prop.
|
|
|
|
```svelte
|
|
<!-- Pass a custom function as `getAuthorPage` -->
|
|
<Byline
|
|
authors={[
|
|
'Dea Bankova',
|
|
'Prasanta Kumar Dutta',
|
|
'Anurag Rao',
|
|
'Mariano Zafra',
|
|
]}
|
|
publishTime="2021-09-12T00:00:00Z"
|
|
updateTime="2021-09-12T13:57:00Z"
|
|
getAuthorPage={(author) => {
|
|
return `mailto:${author.replace(' ', '')}@example.com`;
|
|
}}
|
|
/>
|
|
```
|
|
|
|
<Canvas of={BylineStories.CustomAuthorPage} />
|
|
````
|