wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cleaned up headline docs

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-03-19 08:53:08 -07:00
parent 0a4155949a
commit afb6270b46
Failed to extract signature
5 changed files with 102 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Byline/Byline.mdx
View file

@ -96,8 +96,8 @@ To hyperlink to different pages or email addresses, pass a custom function to th
publishTime="2021-09-12T00:00:00Z"
updateTime="2021-09-12T13:57:00Z"
getAuthorPage={(author: string) => {
return `mailto:${author.replace(' ', '')}@example.com`;
}}
return `mailto:${author.replace(' ', '')}@example.com`;
}}
/>
```

1
src/components/Byline/Byline.stories.svelte
View file

@ -46,6 +46,7 @@
<Story
name="Custom author page"
exportName="CustomAuthorPage"
tags={['!autodocs', '!dev']}
args={{
authors: [
'Dea Bankova',

88
src/components/Headline/Headline.mdx
View file

@ -22,7 +22,11 @@ The `Headline` component creates headlines in the legacy Reuters Graphics style,
<Canvas of={HeadlineStories.Demo} />
## With authors and publish time
## With bylines and dateline
Optionally, you can add authors and a publish time to the headline, which the `Headline` component internally renders with the [Byline](./?path=/docs/components-text-elements-byline--docs) component.
> **Note**: Since `Headline` uses `Byline`, you can customise the author page hyperlink and bylines with the `getAuthorPage`, `byline`, `published` and `updated` props.
```svelte
<script>
@ -33,14 +37,19 @@ The `Headline` component creates headlines in the legacy Reuters Graphics style,
hed={'Reuters Graphics Interactive'}
dek={'The beginning of a beautiful page'}
section={'Global news'}
authors={['Dea Bankova', 'Aditi Bhandari']}
authors={['Jane Doe']}
publishTime={new Date('2020-01-01').toISOString()}
getAuthorPage={(author: string) => {
return `mailto:${author.replace(' ', '')}@example.com`;
}}
/>
```
## With custom hed
<Canvas of={HeadlineStories.Byline} />
Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to override those elements with completely custom markup.
## Custom hed and dek
Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to override those elements with custom elements.
```svelte
<script>
@ -48,18 +57,26 @@ Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to
</script>
<Headline width="wide">
<h1 class="custom-hed" slot="hed">
<span class="small block text-base">The secret to</span>
“The Nutcracker's”
<span class="small block text-base fpt-1">success</span>
</h1>
<p class="custom-dek !fmt-3" slot="dek">
How “The Nutcracker” ballet became an<span
class="font-medium mx-1 px-1.5 py-1">American holday staple</span
>and a financial pillar of ballet companies across the country
</p>
<!-- Custom hed snippet -->
{#snippet hed()}
<h1 class="custom-hed">
<span class="small block text-base">The secret to</span>
“The Nutcracker's”
<span class="small block text-base fpt-1">success</span>
</h1>
{/snippet}
<!-- Custom dek snippet -->
{#snippet dek()}
<p class="custom-dek !fmt-3">
How “The Nutcracker” ballet became an<span
class="font-medium mx-1 px-1.5 py-1">American holday staple</span
>and a financial pillar of ballet companies across the country
</p>
{/snippet}
</Headline>
<!-- Custom styles -->
<style lang="scss">
.custom-hed {
line-height: 0.9;
@ -72,9 +89,11 @@ Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to
</style>
```
<Canvas of={HeadlineStories.CustomHedDek} />
## With crown image
Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
To add a crown image, use the `crown` [snippet](https://svelte.dev/docs/svelte/snippet).
```svelte
<script>
@ -82,20 +101,25 @@ Add a crown image in the `crown` named slot and override the headline in the `he
import { assets } from '$app/paths';
</script>
<Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
<Headline
class="!fmt-3"
hed="Europa"
publishTime={new Date('2020-01-01').toISOString()}
>
<!-- Add a crown -->
<img
slot="crown"
src={crownImgSrc}
width="100"
class="mx-auto mb-0"
alt="Illustration of Europe"
/>
<!-- Override the hed with a named slot -->
<h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
{#snippet crown()}
<img
src={crownImgSrc}
width="100"
class="mx-auto mb-0"
alt="Illustration of Europe"
/>
{/snippet}
</Headline>
```
<Canvas of={HeadlineStories.CrownImage} />
## With crown graphic
Add a full graphic or any other component in the crown.
@ -103,8 +127,9 @@ Add a full graphic or any other component in the crown.
```svelte
<script>
import { Headline } from '@reuters-graphics/graphics-components';
import Map from './ai2svelte/graphic.svelte';
import { assets } from '$app/paths';
import { assets } from '$app/paths'; // If in Graphis Kit
import Map from './ai2svelte/graphic.svelte'; // Import the crown graphic component
</script>
<Headline
@ -117,8 +142,11 @@ Add a full graphic or any other component in the crown.
publishTime={new Date('2022-03-04').toISOString()}
>
<!-- Add a crown graphic -->
<div slot="crown">
<Map assetsPath={assets} />
</div>
{#snippet crown()}
<!-- Pass `assetsPath` if in Graphics Kit -->
<Map assetsPath={assets || '/'} />
{/snippet}
</Headline>
```
<Canvas of={HeadlineStories.CrownGraphic} />

31
src/components/Headline/Headline.stories.svelte
View file

@ -32,25 +32,20 @@
}}
/>
<Story name="Dek">
<Story name="With byline and dateline" exportName="Byline">
<Headline
hed={'Reuters Graphics Interactive'}
dek={'The beginning of a beautiful page'}
section={'Global news'}
/>
</Story>
<Story name="Byline">
<Headline
hed={'Reuters Graphics Interactive'}
dek={'The beginning of a beautiful page'}
section={'Global news'}
authors={['Dea Bankova', 'Aditi Bhandari']}
authors={['Jane Doe']}
publishTime={new Date('2020-01-01').toISOString()}
getAuthorPage={(author: string) => {
return `mailto:${author.replace(' ', '')}@example.com`;
}}
/>
</Story>
<Story name="Custom hed" exportName="CustomHed">
<Story name="Custom hed and dek" exportName="CustomHedDek">
<Headline width="wide">
{#snippet hed()}
<h1 class="custom-hed">
@ -70,7 +65,11 @@
</Story>
<Story name="Crown image" exportName="CrownImage">
<Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
<Headline
class="!fmt-3"
hed="Europa"
publishTime={new Date('2020-01-01').toISOString()}
>
<!-- Add a crown -->
{#snippet crown()}
<img
@ -80,10 +79,6 @@
alt="Illustration of Europe"
/>
{/snippet}
<!-- Override the hed with a snippet -->
{#snippet hed()}
<h1 class="!font-serif !tracking-wide">Europa</h1>
{/snippet}
</Headline>
</Story>
@ -99,9 +94,7 @@
>
<!-- Add a crown graphic -->
{#snippet crown()}
<div>
<Map />
</div>
<Map />
{/snippet}
</Headline>
</Story>

39
src/components/Headline/Headline.svelte
View file

@ -12,44 +12,60 @@
interface Props {
/** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
hed: string | Snippet;
/** Custom byline snippet */
byline?: Snippet;
/** Add extra classes to the block tag to target it with custom CSS. */
class?: string;
/** Headline size: small, normal, big, bigger, biggest */
hedSize?: HeadlineSize;
/** Dek, parsed as a markdown string OR as a custom snippet. */
dek?: string | Snippet;
/** Custom crown snippet */
crown?: Snippet;
/** Section title */
section?: string;
/** Array of author names, which will be slugified to create links to Reuters author pages */
authors?: string[];
/**
* Custom function that returns an author page URL.
*/
getAuthorPage?: (author: string) => string;
/** Publish time as a datetime string. */
publishTime?: string;
/** Update time as a datetime string. */
updateTime?: string;
/** Width of the headline: normal, wide, wider, widest */
width?: 'normal' | 'wide' | 'wider' | 'widest';
/**
* Custom function that returns an author page URL.
*/
getAuthorPage?: (author: string) => string;
/** Custom crown snippet */
crown?: Snippet;
/**
* Optional snippet for a custom byline.
*/
byline?: Snippet;
/**
* Optional snippet for a custom published dateline.
*/
published?: Snippet;
/**
* Optional snippet for a custom updated dateline.
*/
updated?: Snippet;
}
let {
hed = 'Reuters Graphics Interactive',
byline,
class: cls = '',
hedSize = 'normal',
dek,
crown,
section,
authors = [],
publishTime = '',
updateTime = '',
width = 'normal',
getAuthorPage,
crown,
byline,
published,
updated,
}: Props = $props();
// Set the headline text size class based on the `hedSize` prop
@ -116,6 +132,9 @@
{authors}
{publishTime}
{updateTime}
{getAuthorPage}
{published}
{updated}
align="center"
/>
{:else if byline}