import { Meta, Canvas } from '@storybook/blocks';

import * as ReferralBlockStories from './ReferralBlock.stories.svelte';

<Meta of={ReferralBlockStories} />

# ReferralBlock

The `ReferralBlock` component creates a set of referral links from recent Reuters.com stories using the [recent stories by section API](https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?query=%7B%22section_ids%22%3A%22%2Fworld%2F%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D).

> Note: The `section` or `collection` prop determines which section or collection stories are from.
>
> You can get the section ID from the URL for the Reuters.com section pages. For example, the section ID for [World - Europe](https://www.reuters.com/world/europe/) stories at `www.reuters.com/world/europe/` would be `/world/europe/`. (The leading and trailing slashes are required!)
>
> You should get the collection alias from the dotcom team.

```svelte
<script>
  import { ReferralBlock } from '@reuters-graphics/graphics-components';
</script>

<ReferralBlock
  section="/lifestyle/sports/"
  class="fmy-0"
  heading="More World Cup coverage"
/>
```

<Canvas of={ReferralBlockStories.Demo} />

## Collections

TK - Check if this is still relevant.

```svelte
<script>
  import { ReferralBlock } from '@reuters-graphics/graphics-components';
</script>

<ReferralBlock collection="x-trump" number={6} class="fmy-8" />
```

<Canvas of={ReferralBlockStories.ByCollection} />
```