44 lines
1.4 KiB
Text
44 lines
1.4 KiB
Text
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} />
|
|
```
|