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} />
````