referral block
This commit is contained in:
Jon McClure
parent
deac3476bf
commit
b065cf254d
5 changed files with 310 additions and 0 deletions
55
src/components/ReferralBlock/ReferralBlock.stories.svelte
Normal file
55
src/components/ReferralBlock/ReferralBlock.stories.svelte
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<script>
|
||||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// Don't lose the "?raw" in markdown imports!
|
||||
// @ts-ignore
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
|
||||
import ReferralBlock from './ReferralBlock.svelte';
|
||||
|
||||
import { withComponentDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/ReferralBlock',
|
||||
component: ReferralBlock,
|
||||
...withComponentDocs(componentDocs),
|
||||
// https://storybook.js.org/docs/svelte/essentials/controls
|
||||
argTypes: {
|
||||
width: {
|
||||
control: 'select',
|
||||
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
|
||||
},
|
||||
section: {
|
||||
control: 'select',
|
||||
options: [
|
||||
'/world/',
|
||||
'/world/europe/',
|
||||
'/lifestyle/',
|
||||
'/lifestyle/sports/',
|
||||
'/legal/',
|
||||
'/business/',
|
||||
'/business/energy/',
|
||||
],
|
||||
},
|
||||
number: {
|
||||
control: 'select',
|
||||
options: [2, 4, 6, 8],
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
|
||||
<Template let:args>
|
||||
<ReferralBlock {...args} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args="{{
|
||||
section: '/lifestyle/sports/',
|
||||
number: 4,
|
||||
cls: 'my-3',
|
||||
}}"
|
||||
/>
|
||||
238
src/components/ReferralBlock/ReferralBlock.svelte
Normal file
238
src/components/ReferralBlock/ReferralBlock.svelte
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
<!-- @component `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReferralBlock--default) -->
|
||||
<script lang="ts">
|
||||
/** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
|
||||
|
||||
/**
|
||||
* Section ID, which is often the URL path to the section page on reuters.com.
|
||||
*
|
||||
* Note that not all section pages will be available in the recent stories by section API.
|
||||
* @required
|
||||
*/
|
||||
export let section: string = '/world/';
|
||||
|
||||
/**
|
||||
* Number of referrals to show.
|
||||
* @required
|
||||
*/
|
||||
export let number: number = 4;
|
||||
|
||||
/**
|
||||
* Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
|
||||
*/
|
||||
export let linkTarget: string = '_self';
|
||||
|
||||
/**
|
||||
* Add a heading to the referral block.
|
||||
*/
|
||||
export let heading: string = '';
|
||||
|
||||
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||
|
||||
/**
|
||||
* Width of the component within the text well.
|
||||
* @required
|
||||
*/
|
||||
export let width: ContainerWidth = 'wide';
|
||||
|
||||
/** Add an ID to target with SCSS. */
|
||||
export let id: string = '';
|
||||
|
||||
/** Add a class to target with SCSS. */
|
||||
export let cls: string = '';
|
||||
|
||||
import Block from '../Block/Block.svelte';
|
||||
import { referrals } from './stores.js';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
|
||||
|
||||
let clientWidth;
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
'https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?' +
|
||||
new URLSearchParams({
|
||||
query: JSON.stringify({
|
||||
section_ids: section,
|
||||
size: 20,
|
||||
website: 'reuters',
|
||||
}),
|
||||
})
|
||||
);
|
||||
const articles = (await response.json()).result.articles
|
||||
.filter((a) => a?.kicker?.name)
|
||||
.filter((a) => a?.thumbnail?.renditions?.landscape?.['240w'])
|
||||
.filter((a) => !a?.content?.third_party)
|
||||
.slice(0, number);
|
||||
referrals.set(articles);
|
||||
} catch (e) {
|
||||
console.warn('Unable to fetch referral links.');
|
||||
}
|
||||
});
|
||||
|
||||
getTime();
|
||||
</script>
|
||||
|
||||
{#if $referrals.length === number}
|
||||
<Block width="{width}" id="{id}" cls="referrals-block {cls}">
|
||||
{#if heading}
|
||||
<h4 class:stacked="{clientWidth && clientWidth < 750}">{heading}</h4>
|
||||
{/if}
|
||||
<div
|
||||
class="referral-container"
|
||||
class:stacked="{clientWidth && clientWidth < 750}"
|
||||
class:xs="{clientWidth && clientWidth < 450}"
|
||||
bind:clientWidth
|
||||
>
|
||||
{#each $referrals as referral}
|
||||
<div class="referral">
|
||||
<a
|
||||
href="https://www.reuters.com{referral.canonical_url}"
|
||||
target="{linkTarget}"
|
||||
rel="{linkTarget === '_blank' ? 'noreferrer' : null}"
|
||||
>
|
||||
<div class="referral-pack">
|
||||
<div
|
||||
class="headline"
|
||||
class:xs="{clientWidth && clientWidth < 450}"
|
||||
>
|
||||
<div class="kicker">{referral.kicker.name}</div>
|
||||
<div class="title">{referral.title}</div>
|
||||
<div class="publish-time">
|
||||
{getTime(new Date(referral.display_time))}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="image-container"
|
||||
class:xs="{clientWidth && clientWidth < 450}"
|
||||
>
|
||||
<img
|
||||
src="{referral.thumbnail.renditions.landscape['240w']}"
|
||||
alt="{referral.thumbnail.caption ||
|
||||
referral.thumbnail.alt_text}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Block>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../scss/fonts/mixins';
|
||||
@import '../../scss/colours/thematic/tr';
|
||||
|
||||
h4 {
|
||||
font-family: var(--theme-font-family-subhed);
|
||||
color: var(--theme-colour-text-primary, #404040);
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 5px;
|
||||
font-weight: bold;
|
||||
&.stacked {
|
||||
max-width: 450px;
|
||||
margin: 0 auto 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.referral-container {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px 40px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
&.stacked {
|
||||
.referral {
|
||||
width: 100%;
|
||||
.headline {
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.referral {
|
||||
display: block;
|
||||
width: calc(50% - 20px);
|
||||
max-width: 450px;
|
||||
|
||||
&:hover {
|
||||
.title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
img {
|
||||
filter: brightness(85%);
|
||||
}
|
||||
}
|
||||
|
||||
div.referral-pack {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.headline {
|
||||
display: inline-block;
|
||||
width: calc(100% - 140px);
|
||||
padding: 0 10px 0 0;
|
||||
&.xs {
|
||||
width: calc(100% - 80px);
|
||||
.kicker {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.title {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
}
|
||||
.kicker {
|
||||
font-family: var(--theme-font-family-subhed);
|
||||
color: var(--theme-colour-text-secondary, #666666);
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
.title {
|
||||
font-family: var(--theme-font-family-subhed);
|
||||
color: var(--theme-colour-text-primary, #404040);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.15rem;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
.publish-time {
|
||||
font-family: var(--theme-font-family-subhed);
|
||||
color: var(--theme-colour-text-secondary, #666666);
|
||||
font-size: 0.75rem;
|
||||
margin: 2px 0 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.image-container {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--theme-colour-brand-rules, #d0d0d0);
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 90px;
|
||||
&.xs {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
}
|
||||
img {
|
||||
transition: filter 0.1s;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
object-fit: cover;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
3
src/components/ReferralBlock/stores.js
Normal file
3
src/components/ReferralBlock/stores.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { writable } from 'svelte/store';
|
||||
|
||||
export const referrals = writable([]);
|
||||
13
src/components/ReferralBlock/stories/docs/component.md
Normal file
13
src/components/ReferralBlock/stories/docs/component.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
The `ReferralBlock` component creates a set of referral links from recent dotcom 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).
|
||||
|
||||
> The `section` prop determines which section stories are from.
|
||||
>
|
||||
> You can get the section ID from the section page on dotcom. For example, the section ID for World - Europe stories at `www.reuters.com/world/europe/` would be `/world/europe/`. (The leading and trailing slashes are required!)
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { ReferralBlock } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<ReferralBlock section="/lifestyle/sports/" />
|
||||
```
|
||||
|
|
@ -15,6 +15,7 @@ export { default as PaddingReset } from './components/PaddingReset/PaddingReset.
|
|||
export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
|
||||
export { default as PymChild } from './components/PymChild/PymChild.svelte';
|
||||
export { pymChildStore } from './components/PymChild/stores.js';
|
||||
export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
|
||||
export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
|
||||
export { default as Scroller } from './components/Scroller/Scroller.svelte';
|
||||
export { default as SEO } from './components/SEO/SEO.svelte';
|
||||
|
|
|
|||
Loading…
Reference in a new issue