updates site headline
This commit is contained in:
MinamiFunakoshiTR
parent
afb6270b46
commit
da5c61d4f9
5 changed files with 130 additions and 144 deletions
66
src/components/SiteHeadline/SiteHeadline.mdx
Normal file
66
src/components/SiteHeadline/SiteHeadline.mdx
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { Meta, Canvas } from '@storybook/blocks';
|
||||
|
||||
import * as SiteHeadlineStories from './SiteHeadline.stories.svelte';
|
||||
|
||||
<Meta of={SiteHeadlineStories} />
|
||||
|
||||
# SiteHeadline
|
||||
|
||||
The `SiteHeadline` component creates a simplified Reuters Graphics headline, loosely modelled off the Reuters.com styles.
|
||||
|
||||
Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround breaking news pages.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { SiteHeadline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<SiteHeadline
|
||||
hed="Ukraine makes suprising gains in swift counteroffensive"
|
||||
authors={[
|
||||
'Dea Bankova',
|
||||
'Michael Ovaska',
|
||||
'Samuel Granados',
|
||||
'Prasanta Kumar Dutta',
|
||||
]}
|
||||
publishTime="2021-09-12T00:00:00.000Z"
|
||||
updateTime="2021-09-12T12:57:00.000Z"
|
||||
/>
|
||||
```
|
||||
|
||||
<Canvas of={SiteHeadlineStories.Demo} />
|
||||
|
||||
## Using with ArchieML docs
|
||||
|
||||
With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
|
||||
|
||||
```yaml
|
||||
# ArchieML doc
|
||||
section: Global News # Optional
|
||||
sectionUrl: https://www.reuters.com/graphics/ # Optional
|
||||
hed: A beautiful page
|
||||
authors: Samuel Granados, Dea Bankova
|
||||
published: 2022-09-12T08:30:00.000Z
|
||||
updated:
|
||||
```
|
||||
|
||||
... which you'll pass to the `SiteHeadline` component.
|
||||
|
||||
```svelte
|
||||
<!-- App.svelte -->
|
||||
<script>
|
||||
import { SiteHeadline } from '@reuters-graphics/graphics-components';
|
||||
import content from '$locales/en/content.json';
|
||||
</script>
|
||||
|
||||
<SiteHeadline
|
||||
section={content.section}
|
||||
sectionUrl={content.sectionUrl}
|
||||
hed={content.hed}
|
||||
authors={content.authors.split(',')}
|
||||
publishTime={content.published}
|
||||
updateTime={content.updated}
|
||||
/>
|
||||
```
|
||||
|
||||
<Canvas of={SiteHeadlineStories.ArchieML} />
|
||||
|
|
@ -1,51 +1,32 @@
|
|||
<script module>
|
||||
<script module lang="ts">
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import SiteHeadline from './SiteHeadline.svelte';
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
// @ts-ignore raw
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
|
||||
export const meta = {
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/Text elements/SiteHeadline',
|
||||
component: SiteHeadline,
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
hedSize: {
|
||||
control: 'select',
|
||||
options: ['small', 'normal', 'big'],
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { Template, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// @ts-ignore raw
|
||||
import archieML from './stories/docs/archieML.md?raw';
|
||||
|
||||
import { withStoryDocs } from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const content = {
|
||||
Section: 'Global News',
|
||||
SectionUrl: '',
|
||||
Hed: 'A beautiful page',
|
||||
Authors: 'Samuel Granados, Dea Bankova',
|
||||
Published: '2022-09-12T08:30:00.000Z',
|
||||
Updated: '',
|
||||
section: 'Global News',
|
||||
hed: 'A beautiful page',
|
||||
authors: 'Samuel Granados, Dea Bankova',
|
||||
published: '2022-09-12T08:30:00.000Z',
|
||||
updated: '',
|
||||
};
|
||||
</script>
|
||||
|
||||
<Template >
|
||||
{#snippet children({ args })}
|
||||
<SiteHeadline {...args} />
|
||||
{/snippet}
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args="{{
|
||||
section: 'Graphics',
|
||||
sectionUrl: 'https://graphics.reuters.com',
|
||||
name="Demo"
|
||||
args={{
|
||||
hed: 'Ukraine makes surprising gains in counteroffensive',
|
||||
authors: [
|
||||
'Dea Bankova',
|
||||
|
|
@ -55,15 +36,14 @@
|
|||
],
|
||||
publishTime: new Date('2021-09-12').toISOString(),
|
||||
updateTime: new Date('2021-09-12T13:57:00').toISOString(),
|
||||
}}"
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story name="ArchieML" {...withStoryDocs(archieML)}>
|
||||
<Story name="ArchieML" tags={['!autodocs', '!dev']}>
|
||||
<SiteHeadline
|
||||
hed="{content.Hed}"
|
||||
section="{content.Section}"
|
||||
sectionUrl="{content.SectionUrl}"
|
||||
authors="{content.Authors.split(',')}"
|
||||
publishTime="{content.Published}"
|
||||
hed={content.hed}
|
||||
section={content.section}
|
||||
authors={content.authors.split(',')}
|
||||
publishTime={content.published}
|
||||
/>
|
||||
</Story>
|
||||
|
|
|
|||
|
|
@ -1,75 +1,62 @@
|
|||
<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
|
||||
<!-- @component `SiteHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-siteheadline--docs) -->
|
||||
<script lang="ts">
|
||||
import Block from '../Block/Block.svelte';
|
||||
import Byline from '../Byline/Byline.svelte';
|
||||
|
||||
/**
|
||||
* Used to set headline class fluid size from text-2xl to text-4xl
|
||||
*/
|
||||
type HeadlineSize = 'small' | 'normal' | 'big';
|
||||
|
||||
interface Props {
|
||||
/** Headline */
|
||||
hed?: string;
|
||||
/** Headline size */
|
||||
hedSize?: HeadlineSize;
|
||||
/** Section title */
|
||||
section?: string;
|
||||
/** Section URL, parsed as a string. Set to blank to remove link */
|
||||
sectionUrl?: string;
|
||||
/** Array of author names, which will be slugified to create links to Reuters author pages */
|
||||
authors: string[];
|
||||
/** Publish time as a datetime string */
|
||||
publishTime: string;
|
||||
/** Update time as a datetime string */
|
||||
updateTime?: string;
|
||||
/** Add an id to to target with custom CSS */
|
||||
id?: string;
|
||||
/** Add extra classes to target with custom CSS */
|
||||
class?: string;
|
||||
/**
|
||||
* Headline
|
||||
* @type {string}
|
||||
* @required
|
||||
* Custom function that returns an author page URL.
|
||||
*/
|
||||
export let hed: string = 'Reuters Graphics Interactive';
|
||||
/**
|
||||
* Headline size
|
||||
* @type {string}
|
||||
* @
|
||||
*/
|
||||
export let hedSize: HeadlineSize = 'normal';
|
||||
/**
|
||||
* Section title.
|
||||
* @type {string}
|
||||
*/
|
||||
export let section: string = 'Graphics';
|
||||
/**
|
||||
* Section url, parsed as a string. Set to blank to remove link.
|
||||
* @type {string}
|
||||
*/
|
||||
export let sectionUrl: string = 'https://graphics.reuters.com';
|
||||
/**
|
||||
* Array of author names, which will be slugified to create links to Reuters author pages
|
||||
*/
|
||||
export let authors: string[] = [];
|
||||
/**
|
||||
* Publish time as a datetime string.
|
||||
* @type {string}
|
||||
*/
|
||||
export let publishTime: string = '';
|
||||
/**
|
||||
* Update time as a datetime string.
|
||||
* @type {string}
|
||||
*/
|
||||
export let updateTime: string = '';
|
||||
/**
|
||||
* Add an id to to target with custom CSS.
|
||||
* @type {string}
|
||||
*/
|
||||
export let id: string = '';
|
||||
/**
|
||||
* Add extra classes to target with custom CSS.
|
||||
* @type {string}
|
||||
*/
|
||||
let cls: string = '';
|
||||
export { cls as class };
|
||||
getAuthorPage?: (author: string) => string;
|
||||
}
|
||||
|
||||
import Block from '../Block/Block.svelte';
|
||||
import Byline from '../Byline/Byline.svelte';
|
||||
let {
|
||||
hed,
|
||||
hedSize = 'normal',
|
||||
section = 'Graphics',
|
||||
sectionUrl = 'https://graphics.reuters.com',
|
||||
authors,
|
||||
publishTime,
|
||||
updateTime = '',
|
||||
id = '',
|
||||
class: cls = '',
|
||||
getAuthorPage,
|
||||
}: Props = $props();
|
||||
|
||||
let hedClass;
|
||||
$: {
|
||||
// Set the headline text size class based on the `hedSize` prop
|
||||
let hedClass = $derived.by(() => {
|
||||
switch (hedSize) {
|
||||
case 'big':
|
||||
hedClass = 'text-4xl';
|
||||
break;
|
||||
return 'text-4xl';
|
||||
case 'small':
|
||||
hedClass = 'text-2xl';
|
||||
break;
|
||||
return 'text-2xl';
|
||||
default:
|
||||
hedClass = 'text-3xl';
|
||||
}
|
||||
return 'text-3xl';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<Block {id} class="headline-container fmt-7 fmb-6 {cls}" width="normal">
|
||||
|
|
@ -80,7 +67,7 @@
|
|||
class="section-title mb-0 font-subhed text-xs text-secondary font-bold uppercase whitespace-nowrap tracking-wider"
|
||||
>
|
||||
{#if sectionUrl}
|
||||
<a class="no-underline !text-secondary" href="{sectionUrl}"
|
||||
<a class="no-underline !text-secondary" href={sectionUrl}
|
||||
>{section}</a
|
||||
>
|
||||
{:else}
|
||||
|
|
@ -94,6 +81,6 @@
|
|||
</h1>
|
||||
{/if}
|
||||
</div>
|
||||
<Byline {authors} {publishTime} {updateTime} />
|
||||
<Byline {authors} {publishTime} {updateTime} {getAuthorPage} />
|
||||
</header>
|
||||
</Block>
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
```yaml
|
||||
section: Graphics
|
||||
sectionUrl: https://www.reuters.com/graphics/
|
||||
hed: A beautiful page
|
||||
authors: Samuel Granados,Dea Bankova
|
||||
published: 2022-09-12T08:30:00.000Z
|
||||
updated:
|
||||
```
|
||||
|
||||
```svelte
|
||||
<!-- App.svelte -->
|
||||
<script>
|
||||
import { SiteHeadline } from '@reuters-graphics/graphics-components';
|
||||
|
||||
import content from '$locales/en/content.json';
|
||||
</script>
|
||||
|
||||
<SiteHeadline
|
||||
section="{content.section}"
|
||||
sectionUrl="{content.sectionUrl}"
|
||||
hed="{content.hed}"
|
||||
authors="{content.authors.split(',')}"
|
||||
publishTime="{content.published}"
|
||||
updateTime="{content.updated}"
|
||||
/>
|
||||
```
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
A simplified Reuters Graphics headline, loosely modelled off our dotcom site.
|
||||
|
||||
Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround, usually shorter breaking news pages.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { SiteHeadline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<SiteHeadline
|
||||
hed="Ukraine makes suprising gains in swift counteroffensive"
|
||||
authors="{[
|
||||
'Dea Bankova',
|
||||
'Michael Ovaska',
|
||||
'Samuel Granados',
|
||||
'Prasanta Kumar Dutta',
|
||||
]}"
|
||||
publishTime="2021-09-12T00:00:00.000Z"
|
||||
updateTime="2021-09-12T12:57:00.000Z"
|
||||
/>
|
||||
```
|
||||
Loading…
Reference in a new issue