diff --git a/.vscode/settings.json b/.vscode/settings.json index fbaef8e1..a8ef4c90 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,7 +12,7 @@ "editor.wordWrap": "on" }, "[svelte]": { - "editor.defaultFormatter": "svelte.svelte-vscode" - }, + "editor.defaultFormatter": "svelte.svelte-vscode" + }, "typescript.tsdk": "node_modules/typescript/lib" } diff --git a/src/app.html b/src/app.html index 7bf73d49..61516813 100644 --- a/src/app.html +++ b/src/app.html @@ -1,11 +1,11 @@ - + - - - - %sveltekit.head% - - - %sveltekit.body% - - \ No newline at end of file + + + + %sveltekit.head% + + + %sveltekit.body% + + diff --git a/src/components/AdSlot/AdSlot.svelte b/src/components/AdSlot/AdSlot.svelte index 4fed36b9..c80e6925 100644 --- a/src/components/AdSlot/AdSlot.svelte +++ b/src/components/AdSlot/AdSlot.svelte @@ -55,7 +55,7 @@ }); -
+
diff --git a/src/components/InfoBox/InfoBox.svelte b/src/components/InfoBox/InfoBox.svelte index 98ddbd0a..52d915a8 100644 --- a/src/components/InfoBox/InfoBox.svelte +++ b/src/components/InfoBox/InfoBox.svelte @@ -1,47 +1,59 @@ - - - -``` diff --git a/src/components/Markdown/Markdown.svelte b/src/components/Markdown/Markdown.svelte index 5f503e4f..3033e3c1 100644 --- a/src/components/Markdown/Markdown.svelte +++ b/src/components/Markdown/Markdown.svelte @@ -4,9 +4,6 @@ import { marked } from 'marked'; import { staticMarkdown } from './stores'; - - - interface Props { /** A Markdown formatted string */ source?: string; @@ -16,7 +13,9 @@ let { source = '', parseInline = false }: Props = $props(); - let markdown = $derived(parseInline ? marked.parseInline(source) : marked.parse(source)); + let markdown = $derived( + parseInline ? marked.parseInline(source) : marked.parse(source) + ); const setInnerHTML: Action = (node, html) => { node.innerHTML = html; diff --git a/src/components/PymChild/PymChild.svelte b/src/components/PymChild/PymChild.svelte index 38425ea9..c60f870c 100644 --- a/src/components/PymChild/PymChild.svelte +++ b/src/components/PymChild/PymChild.svelte @@ -1,7 +1,5 @@ + + +``` + + diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte index c5243444..34093134 100644 --- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte +++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte @@ -1,26 +1,14 @@ - - - - - + diff --git a/src/components/ReutersGraphicsLogo/stories/docs/component.md b/src/components/ReutersGraphicsLogo/stories/docs/component.md deleted file mode 100644 index 6980dcaf..00000000 --- a/src/components/ReutersGraphicsLogo/stories/docs/component.md +++ /dev/null @@ -1,11 +0,0 @@ -Reuters Graphics team logo. - -> Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component. - -```svelte - - - -``` diff --git a/src/components/ReutersLogo/ReutersLogo.mdx b/src/components/ReutersLogo/ReutersLogo.mdx new file mode 100644 index 00000000..e4d3b63e --- /dev/null +++ b/src/components/ReutersLogo/ReutersLogo.mdx @@ -0,0 +1,19 @@ +import { Meta, Canvas } from '@storybook/blocks'; + +import * as ReutersLogoStories from './ReutersLogo.stories.svelte'; + + + +# ReutersLogo + +The `ReutersLogo` component contains the official Reuters logo. + +```svelte + + + +``` + + diff --git a/src/components/ReutersLogo/ReutersLogo.stories.svelte b/src/components/ReutersLogo/ReutersLogo.stories.svelte index 87499cf6..5ab6725f 100644 --- a/src/components/ReutersLogo/ReutersLogo.stories.svelte +++ b/src/components/ReutersLogo/ReutersLogo.stories.svelte @@ -1,30 +1,15 @@ - - - - - + diff --git a/src/components/ReutersLogo/ReutersLogo.svelte b/src/components/ReutersLogo/ReutersLogo.svelte index 49a4a00f..aadffaee 100644 --- a/src/components/ReutersLogo/ReutersLogo.svelte +++ b/src/components/ReutersLogo/ReutersLogo.svelte @@ -1,8 +1,5 @@ - - - + + diff --git a/src/components/ReutersLogo/stories/docs/component.md b/src/components/ReutersLogo/stories/docs/component.md deleted file mode 100644 index 18cd0d66..00000000 --- a/src/components/ReutersLogo/stories/docs/component.md +++ /dev/null @@ -1,9 +0,0 @@ -The official Reuters logo. - -```svelte - - - -``` diff --git a/src/components/Scroller/Embedded/index.svelte b/src/components/Scroller/Embedded/index.svelte index 1d95b023..6c1d0380 100644 --- a/src/components/Scroller/Embedded/index.svelte +++ b/src/components/Scroller/Embedded/index.svelte @@ -1,10 +1,8 @@ {#each steps as step, index} diff --git a/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte b/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte index dbb0565d..63c91bee 100644 --- a/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte +++ b/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte @@ -11,7 +11,7 @@

The count is {count}

Click Me diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte index ad908bb3..b0761c69 100644 --- a/src/components/SearchInput/SearchInput.svelte +++ b/src/components/SearchInput/SearchInput.svelte @@ -4,12 +4,11 @@ import MagnifyingGlass from './MagnifyingGlass.svelte'; import X from './X.svelte'; - interface Props { /** - * The placeholder text that appears in the search box. - * @type {string} - */ + * The placeholder text that appears in the search box. + * @type {string} + */ searchPlaceholder?: string; } @@ -40,7 +39,7 @@ class="search--input body-caption pl-8" type="text" placeholder="{searchPlaceholder}" - oninput={input} + oninput="{input}" bind:value />
diff --git a/src/components/SimpleTimeline/SimpleTimeline.mdx b/src/components/SimpleTimeline/SimpleTimeline.mdx new file mode 100644 index 00000000..205bf945 --- /dev/null +++ b/src/components/SimpleTimeline/SimpleTimeline.mdx @@ -0,0 +1,119 @@ +import { Meta, Canvas } from '@storybook/blocks'; + +import * as SimpleTimelineStories from './SimpleTimeline.stories.svelte'; + + + +# SimpleTimeline + +The `SimpleTimeline` component creates a basic timeline with dates, titles and descriptions of events. + +```svelte + + + +``` + + + +## Using with ArchieML docs + +With the graphics kit, you'll likely get your text value from an ArchieML doc. + +```yaml +# Archie ML doc + +[timeline] + +# date object with events +date: May 18 +[.events] +title: Mariupol defenders surrender to Russia but their fate is uncertain +context: More than 250 Ukrainian fighters surrendered to Russian forces at the Azovstal steelworks in Mariupol after weeks of desperate resistance, bringing an end to the most devastating siege of Russia's war in Ukraine and allowing President Vladimir Putin to claim a rare victory in his faltering campaign. +titleLink: https://www.reuters.com/world/europe/ukrainian-troops-evacuate-mariupol-ceding-control-russia-2022-05-17/ + +# More events... +[] + +date: May 10 +[.events] +title: U.S. House passes $40 bln bill to bolster Ukraine against Russian invasion +context: The U.S. House of Representatives approved more than $40 billion more aid for Ukraine on Tuesday, as Congress races to keep military aid flowing and boost the government in Kyiv as it grapples with the Russian invasion. +titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-package-tuesday-pelosi-2022-05-10/ +[] + +# More dates and events... +[] +``` + +... which you'll pass to the `SimpleTimeline` component. + +```svelte + + + + +``` + + + +# Multiple events + +You can add multiple events to a single date by adding objects to the `events` array. + +```svelte + + + +``` + + diff --git a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte index 94510714..bcf8d850 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte +++ b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte @@ -1,25 +1,18 @@ - - + diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte index beed4001..852eb2f9 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.svelte +++ b/src/components/SimpleTimeline/SimpleTimeline.svelte @@ -1,6 +1,10 @@ - @@ -52,24 +56,24 @@ cx="10" cy="12" r="5" - stroke="{symbolColour}" + stroke={symbolColour} stroke-width="2" fill="transparent" >
{date.date}
{#each date.events as event}
{#if event.titleLink} - +
{event.title} - +
{:else} @@ -78,7 +82,7 @@
{/if} {#if event.context} - + {/if} {/each} @@ -88,13 +92,13 @@