diff --git a/src/components/Byline/Byline.mdx b/src/components/Byline/Byline.mdx index 94106e99..3f812644 100644 --- a/src/components/Byline/Byline.mdx +++ b/src/components/Byline/Byline.mdx @@ -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`; + }} /> ``` diff --git a/src/components/Byline/Byline.stories.svelte b/src/components/Byline/Byline.stories.svelte index 6a81142a..33705d5a 100644 --- a/src/components/Byline/Byline.stories.svelte +++ b/src/components/Byline/Byline.stories.svelte @@ -46,6 +46,7 @@ -## 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 -

- The secret to - “The Nutcracker's” - success -

-

- How “The Nutcracker” ballet became anAmerican holday stapleand a financial pillar of ballet companies across the country -

+ + {#snippet hed()} +

+ The secret to + “The Nutcracker's” + success +

+ {/snippet} + + + {#snippet dek()} +

+ How “The Nutcracker” ballet became anAmerican holday stapleand a financial pillar of ballet companies across the country +

+ {/snippet}
+ ``` + + ## 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 - + - Illustration of Europe - -

Europa

+ {#snippet crown()} + Illustration of Europe + {/snippet}
``` + + ## 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 -
- -
+ {#snippet crown()} + + + {/snippet}
``` + + diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte index f2637248..0b48df75 100644 --- a/src/components/Headline/Headline.stories.svelte +++ b/src/components/Headline/Headline.stories.svelte @@ -32,25 +32,20 @@ }} /> - + - - - - { + return `mailto:${author.replace(' ', '')}@example.com`; + }} /> - + {#snippet hed()}

@@ -70,7 +65,11 @@ - + {#snippet crown()} Illustration of Europe {/snippet} - - {#snippet hed()} -

Europa

- {/snippet}
@@ -99,9 +94,7 @@ > {#snippet crown()} -
- -
+ {/snippet} diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte index 02a8d7ef..07e77005 100644 --- a/src/components/Headline/Headline.svelte +++ b/src/components/Headline/Headline.svelte @@ -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}