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
-
+
- 
-
- Europa
+ {#snippet crown()}
+
+ {/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}