@reuters-graphics/graphics-components 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,13 +2,16 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: {
|
|
4
4
|
/**
|
|
5
|
-
* Headline
|
|
5
|
+
* Headline, parsed as an _inline_ markdown string in an `h1` element.
|
|
6
|
+
* @type {string}
|
|
6
7
|
*/ hed?: string;
|
|
7
8
|
/**
|
|
8
|
-
* Dek
|
|
9
|
+
* Dek, parsed as a markdown string.
|
|
10
|
+
* @type {string}
|
|
9
11
|
*/ dek?: string | null;
|
|
10
12
|
/**
|
|
11
13
|
* Section title
|
|
14
|
+
* @type {string}
|
|
12
15
|
*/ section?: string | null;
|
|
13
16
|
};
|
|
14
17
|
events: {
|
|
@@ -17,6 +20,7 @@ declare const __propDef: {
|
|
|
17
20
|
slots: {
|
|
18
21
|
crown: {};
|
|
19
22
|
hed: {};
|
|
23
|
+
dek: {};
|
|
20
24
|
byline: {};
|
|
21
25
|
dateline: {};
|
|
22
26
|
};
|
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
<!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
|
|
2
2
|
<script>/**
|
|
3
|
-
* Headline
|
|
3
|
+
* Headline, parsed as an _inline_ markdown string in an `h1` element.
|
|
4
|
+
* @type {string}
|
|
4
5
|
*/
|
|
5
6
|
export let hed = 'Reuters Graphics Interactive';
|
|
6
7
|
/**
|
|
7
|
-
* Dek
|
|
8
|
+
* Dek, parsed as a markdown string.
|
|
9
|
+
* @type {string}
|
|
8
10
|
*/
|
|
9
11
|
export let dek = null;
|
|
10
12
|
/**
|
|
11
13
|
* Section title
|
|
14
|
+
* @type {string}
|
|
12
15
|
*/
|
|
13
16
|
export let section = null;
|
|
14
17
|
import Block from '../Block/Block.svelte';
|
|
18
|
+
import { marked } from 'marked';
|
|
15
19
|
</script>
|
|
16
20
|
|
|
17
21
|
<Block cls="mb-1">
|
|
@@ -27,13 +31,16 @@ import Block from '../Block/Block.svelte';
|
|
|
27
31
|
<p class="{'section-title'}">{section}</p>
|
|
28
32
|
{/if}
|
|
29
33
|
{#if $$slots.hed}
|
|
30
|
-
<!-- Headline
|
|
34
|
+
<!-- Headline named slot -->
|
|
31
35
|
<slot name="hed" />
|
|
32
36
|
{:else}
|
|
33
|
-
<h1>{hed}</h1>
|
|
37
|
+
<h1>{@html marked.parseInline(hed)}</h1>
|
|
34
38
|
{/if}
|
|
35
|
-
{#if dek}
|
|
36
|
-
|
|
39
|
+
{#if $$slots.dek}
|
|
40
|
+
<!-- Dek named slot-->
|
|
41
|
+
<slot name="dek" />
|
|
42
|
+
{:else if dek}
|
|
43
|
+
{@html marked(dek)}
|
|
37
44
|
{/if}
|
|
38
45
|
</div>
|
|
39
46
|
{#if $$slots.byline || $$slots.dateline}
|