Merge pull request #252 from reuters-graphics/mf-referral
Updates ReferralBlock
This commit is contained in:
MinamiFunakoshiTR
GitHub
commit
d9a44f4b28
5 changed files with 122 additions and 110 deletions
44
src/components/ReferralBlock/ReferralBlock.mdx
Normal file
44
src/components/ReferralBlock/ReferralBlock.mdx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
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} />
|
||||
```
|
||||
|
|
@ -1,17 +1,10 @@
|
|||
<script module lang="ts">
|
||||
// @ts-ignore raw
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
// @ts-ignore raw
|
||||
import collectionDocs from './stories/docs/collection.md?raw';
|
||||
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import ReferralBlock from './ReferralBlock.svelte';
|
||||
|
||||
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
export const meta = {
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/Page furniture/ReferralBlock',
|
||||
component: ReferralBlock,
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
width: {
|
||||
control: 'select',
|
||||
|
|
@ -34,24 +27,13 @@
|
|||
options: [2, 4, 6, 8],
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { Template, Story } from '@storybook/addon-svelte-csf';
|
||||
</script>
|
||||
|
||||
<Template>
|
||||
{#snippet children({ args })}
|
||||
<ReferralBlock {...args} />
|
||||
{/snippet}
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
name="Demo"
|
||||
args={{
|
||||
section: '/lifestyle/sports/',
|
||||
number: 4,
|
||||
class: 'fmy-0',
|
||||
heading: 'More World Cup coverage',
|
||||
}}
|
||||
|
|
@ -59,11 +41,11 @@
|
|||
|
||||
<Story
|
||||
name="By collection"
|
||||
exportName="ByCollection"
|
||||
args={{
|
||||
collection: 'x-trump',
|
||||
number: 6,
|
||||
class: 'fmy-8',
|
||||
heading: 'The latest Trump coverage',
|
||||
}}
|
||||
{...withStoryDocs(collectionDocs)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,65 +1,70 @@
|
|||
<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
|
||||
<!-- @component `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-referralblock--docs) -->
|
||||
<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.
|
||||
*/
|
||||
export let section: string | undefined = '/world/';
|
||||
|
||||
/**
|
||||
* Collection alias, as defined in Arc Collections editor.
|
||||
*/
|
||||
export let collection: string | undefined;
|
||||
|
||||
/**
|
||||
* 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. */
|
||||
let cls: string = 'fmy-8';
|
||||
export { cls as class };
|
||||
|
||||
import Block from '../Block/Block.svelte';
|
||||
|
||||
// Utils
|
||||
import { onMount } from 'svelte';
|
||||
import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
|
||||
import type { Referrals } from './types';
|
||||
import { articleIsNotCurrentPage } from './filterCurrentPage';
|
||||
import type { Article } from './types';
|
||||
|
||||
let clientWidth: number;
|
||||
// Components
|
||||
import Block from '../Block/Block.svelte';
|
||||
|
||||
// Types
|
||||
import type { Article } from './types';
|
||||
import type { Referrals } from './types';
|
||||
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
section?: string;
|
||||
/**
|
||||
* Collection alias, as defined in Arc Collections editor.
|
||||
*/
|
||||
collection?: string;
|
||||
/**
|
||||
* Number of referrals to show.
|
||||
*/
|
||||
number?: number;
|
||||
/**
|
||||
* Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
|
||||
*/
|
||||
linkTarget: string;
|
||||
/**
|
||||
* Add a heading to the referral block.
|
||||
*/
|
||||
heading: string;
|
||||
/**
|
||||
* Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid'
|
||||
*/
|
||||
width?: ContainerWidth;
|
||||
/** Add an ID to target with SCSS. */
|
||||
id?: string;
|
||||
/** Add a class to target with SCSS. */
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
section = '/world/',
|
||||
collection,
|
||||
number = 4,
|
||||
linkTarget = '_self',
|
||||
heading = '',
|
||||
width = 'wide',
|
||||
id = '',
|
||||
class: cls = 'fmy-8',
|
||||
}: Props = $props();
|
||||
|
||||
let clientWidth = $state(0);
|
||||
|
||||
const SECTION_API = 'recent-stories-by-sections-v1';
|
||||
|
||||
/** @TODO - Check if collections alias API still exists*/
|
||||
const COLLECTION_API = 'articles-by-collection-alias-or-id-v1';
|
||||
|
||||
let referrals: Article[] = [];
|
||||
let referrals: Article[] = $state([]);
|
||||
|
||||
const getReferrals = async () => {
|
||||
const isCollection = Boolean(collection);
|
||||
|
|
@ -76,13 +81,16 @@
|
|||
}),
|
||||
})
|
||||
);
|
||||
|
||||
const data = (await response.json()) as Referrals;
|
||||
|
||||
const articles = data.result.articles
|
||||
.filter((a) => a?.headline_category || a?.kicker?.name)
|
||||
.filter((a) => a?.thumbnail?.renditions?.landscape?.['240w'])
|
||||
.filter((a) => a?.thumbnail?.url)
|
||||
.filter((a) => !a?.content?.third_party)
|
||||
.filter(articleIsNotCurrentPage)
|
||||
.slice(0, number);
|
||||
|
||||
referrals = articles;
|
||||
} catch {
|
||||
console.warn('Unable to fetch referral links.');
|
||||
|
|
@ -150,9 +158,9 @@
|
|||
<img
|
||||
class="block object-cover m-0 w-full"
|
||||
data-chromatic="ignore"
|
||||
src={referral.thumbnail.renditions.landscape['240w']}
|
||||
alt={referral.thumbnail.caption ||
|
||||
referral.thumbnail.alt_text}
|
||||
src={referral.thumbnail.url}
|
||||
alt={referral.thumbnail.alt_text ||
|
||||
referral.thumbnail.caption}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -165,7 +173,7 @@
|
|||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
@use '../../scss/mixins' as *;
|
||||
@use '../../scss/mixins' as mixins;
|
||||
|
||||
div.block-container.stacked {
|
||||
display: flex;
|
||||
|
|
@ -198,7 +206,7 @@
|
|||
display: block;
|
||||
width: calc(50% - 30px);
|
||||
max-width: 450px;
|
||||
@include fmy-1;
|
||||
@include mixins.fmy-1;
|
||||
|
||||
&:hover {
|
||||
.title {
|
||||
|
|
@ -212,25 +220,25 @@
|
|||
.headline {
|
||||
display: inline-block;
|
||||
width: calc(100% - 9rem);
|
||||
@include fpr-2;
|
||||
@include mixins.fpr-2;
|
||||
.kicker {
|
||||
@include text-xxs;
|
||||
@include mixins.text-xxs;
|
||||
font-family: Knowledge, sans-serif;
|
||||
}
|
||||
.title {
|
||||
@include font-medium;
|
||||
@include text-sm;
|
||||
@include text-primary;
|
||||
@include mixins.font-medium;
|
||||
@include mixins.text-sm;
|
||||
@include mixins.text-primary;
|
||||
font-family: Knowledge, sans-serif;
|
||||
}
|
||||
.publish-time {
|
||||
@include text-xxs;
|
||||
@include mixins.text-xxs;
|
||||
font-family: Knowledge, sans-serif;
|
||||
}
|
||||
}
|
||||
.image-container {
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid $theme-colour-brand-rules;
|
||||
border: 1px solid mixins.$theme-colour-brand-rules;
|
||||
width: 9rem;
|
||||
&.xs {
|
||||
width: 7rem;
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
```svelte
|
||||
<script>
|
||||
import { ReferralBlock } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<ReferralBlock collection="x-trump" number="{6}" class="fmy-8" />
|
||||
```
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
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) or the [articles by collection API](https://www.reuters.com/pf/api/v3/content/fetch/articles-by-collection-alias-or-id-v1?query=%7B%22collection_alias%22%3A%22x-trump%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D).
|
||||
|
||||
> The `section` or `collection` prop determines which section or collection 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!)
|
||||
>
|
||||
> You should get a collection alias from the dotcom team.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { ReferralBlock } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<ReferralBlock section="/lifestyle/sports/" />
|
||||
```
|
||||
Loading…
Reference in a new issue