From 9b555434b4d10dd30e7a851b72a6babe42f30f2e Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Wed, 5 Mar 2025 14:05:34 -0800 Subject: [PATCH 01/23] makes byline mdx, deletes old md --- .vscode/settings.json | 4 +- src/app.html | 20 ++-- src/components/AdSlot/AdSlot.svelte | 2 +- src/components/AdSlot/InlineAd.mdx | 6 +- src/components/AdSlot/LeaderboardAd.svelte | 2 +- src/components/AdSlot/ResponsiveAd.svelte | 2 +- src/components/Article/Article.mdx | 4 +- .../{stories/docs/component.md => Byline.mdx} | 15 ++- .../DatawrapperChart.stories.svelte | 10 +- .../EmbedPreviewerLink.svelte | 1 - src/components/EndNotes/EndNotes.svelte | 8 +- src/components/Framer/Resizer/index.svelte | 34 ++++--- .../stories/ai2svelte/ai-chart.svelte | 1 - src/components/Markdown/Markdown.svelte | 7 +- src/components/PymChild/PymChild.svelte | 2 - .../ReutersGraphicsLogo.svelte | 9 +- src/components/ReutersLogo/ReutersLogo.svelte | 9 +- src/components/SEO/SEO.svelte | 99 +++++++++---------- src/components/Scroller/Embedded/index.svelte | 8 +- .../basic/InteractiveForeground.svelte | 4 +- src/components/SearchInput/SearchInput.svelte | 13 ++- src/components/SiteFooter/SiteFooter.svelte | 5 +- .../SiteHeader/MobileMenu/index.svelte | 8 +- .../NavBar/NavDropdown/SectionDropdown.svelte | 7 +- src/components/SiteHeader/NavBar/index.svelte | 36 +++---- src/components/SiteHeader/SiteHeader.svelte | 4 +- src/components/Table/Pagination.svelte | 37 +++---- src/components/Table/Select.svelte | 17 ++-- src/components/Table/SortArrow.svelte | 7 +- src/components/Video/Controls.svelte | 4 +- 30 files changed, 187 insertions(+), 198 deletions(-) rename src/components/Byline/{stories/docs/component.md => Byline.mdx} (59%) 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 f52a6fe8..52d915a8 100644 --- a/src/components/InfoBox/InfoBox.svelte +++ b/src/components/InfoBox/InfoBox.svelte @@ -13,7 +13,7 @@ /** * Contents of the note as a markdown string */ - text: string; + text?: string; /** * Additional footnotes */ From f03ef9e2dc5d67d5def10333ecd52ec99bb20b64 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 10 Mar 2025 09:51:01 -0700 Subject: [PATCH 09/23] updates dependencies, adds examples to docs --- src/components/Byline/Byline.mdx | 8 +++++--- src/components/Byline/Byline.stories.svelte | 2 +- src/components/Byline/Byline.svelte | 4 ++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/Byline/Byline.mdx b/src/components/Byline/Byline.mdx index a5c8a071..31352eb9 100644 --- a/src/components/Byline/Byline.mdx +++ b/src/components/Byline/Byline.mdx @@ -6,7 +6,7 @@ import * as BylineStories from './Byline.stories.svelte'; # Byline -Easily add a byline and dateline to your story. +The `Byline` component adds a byline, published and updated datelines to your page. ```svelte # Graphics Kit {#each content.blocks as block} - {#if block.type === 'text'} - + {#if block.type === 'info-box'} + {/if} {/each} ``` -## Theme + -Switch the theme prop to `dark` for a dark page infobox. +## Lists +Use markdown to add lists to `InfoBox`. + +```svelte + + + +``` + + ## Customisation -Use [snippets](https://svelte.dev/docs/svelte/snippet), which are the Svelte 5 version of slots, to customise the content as needed, e.g. adding tables, icons and thumbnail images, like in this [example](/story/components-text-elements-infobox--customised). +Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the `InfoBox`, such as adding tables, icons and thumbnail images. ```svelte {#snippet header()} -

COVID-19 deaths

+

Global video game market

{/snippet} {#snippet body()} - - - + + - - - + + - - - + + - - - + +
CountryInfectionsDeathsYearMarket size ($bln)
United States1,000,000100,0002024274.63
United Kingdom500,00050,0002023281.77
Italy250,00025,0002022249.55
{/snippet} {#snippet updated()} - Note: This is dummy data + Source: Precedence Research {/snippet} ``` + + diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte index 34033a82..fa8a23a5 100644 --- a/src/components/InfoBox/InfoBox.stories.svelte +++ b/src/components/InfoBox/InfoBox.stories.svelte @@ -35,47 +35,43 @@ - + {#snippet header()} -

COVID-19 deaths

+

Global video game market

{/snippet} {#snippet body()} - - - + + - - - + + - - - + + - - - + +
CountryInfectionsDeathsYearMarket size ($bln)
United States1,000,000100,0002024274.63
United Kingdom500,00050,0002023281.77
Italy250,00025,0002022249.55
{/snippet} {#snippet footer()} - Note: This is dummy data + Source: Precedence Research {/snippet} From 28d8f17e68d69bc2bfb93921bb62afa1e714f3f5 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 10 Mar 2025 11:01:33 -0700 Subject: [PATCH 14/23] tweak --- src/components/EndNotes/EndNotes.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/EndNotes/EndNotes.mdx b/src/components/EndNotes/EndNotes.mdx index f5633ac0..b6f64b5b 100644 --- a/src/components/EndNotes/EndNotes.mdx +++ b/src/components/EndNotes/EndNotes.mdx @@ -63,3 +63,5 @@ text: Editor, Copyeditor ``` + + From dc06946fe146e3f88ba2bcfbd3302a9e3d757990 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 10 Mar 2025 11:46:48 -0700 Subject: [PATCH 15/23] migrates reuters graphics logo --- .../ReutersGraphicsLogo.mdx | 21 ++++++++++++++++ .../ReutersGraphicsLogo.stories.svelte | 24 ++++--------------- .../ReutersGraphicsLogo.svelte | 9 +++---- .../stories/docs/component.md | 11 --------- 4 files changed, 30 insertions(+), 35 deletions(-) create mode 100644 src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx delete mode 100644 src/components/ReutersGraphicsLogo/stories/docs/component.md diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx new file mode 100644 index 00000000..6e7c817b --- /dev/null +++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx @@ -0,0 +1,21 @@ +import { Meta, Canvas } from '@storybook/blocks'; + +import * as ReutersGraphicsLogoStories from './ReutersGraphicsLogo.stories.svelte'; + + + +# ReutersGraphicsLogo + +The `ReutersGraphicsLogo` component contains the Reuters Graphics team logo. + +> Generally, used only for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component. + +```svelte + + + +``` + + diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte index c5243444..787cc903 100644 --- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte +++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte @@ -1,26 +1,10 @@ - - - - - + diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte index 6fe397dc..cb6e31bc 100644 --- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte +++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte @@ -1,8 +1,5 @@ Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component. - -```svelte - - - -``` From b901bb3c369e15e95154ddb4ad5a4cda6e992f36 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 10 Mar 2025 15:55:13 -0700 Subject: [PATCH 16/23] migrates reuters logo --- src/components/ReutersLogo/ReutersLogo.mdx | 19 +++++++++ .../ReutersLogo/ReutersLogo.stories.svelte | 23 ++--------- src/components/ReutersLogo/ReutersLogo.svelte | 40 +++++++++---------- .../ReutersLogo/stories/docs/component.md | 9 ----- 4 files changed, 43 insertions(+), 48 deletions(-) create mode 100644 src/components/ReutersLogo/ReutersLogo.mdx delete mode 100644 src/components/ReutersLogo/stories/docs/component.md 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 - - - -``` From 929dca2fd8d5d3a46400fa3e4a614d2673df8eb7 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 10 Mar 2025 16:04:31 -0700 Subject: [PATCH 17/23] migrated stories, mdx --- .../docs/component.md => SimpleTimeline.mdx} | 14 ++++++++-- .../SimpleTimeline.stories.svelte | 27 +++++-------------- .../SimpleTimeline/SimpleTimeline.svelte | 11 ++++---- 3 files changed, 24 insertions(+), 28 deletions(-) rename src/components/SimpleTimeline/{stories/docs/component.md => SimpleTimeline.mdx} (52%) diff --git a/src/components/SimpleTimeline/stories/docs/component.md b/src/components/SimpleTimeline/SimpleTimeline.mdx similarity index 52% rename from src/components/SimpleTimeline/stories/docs/component.md rename to src/components/SimpleTimeline/SimpleTimeline.mdx index 74a12385..0bfb9c78 100644 --- a/src/components/SimpleTimeline/stories/docs/component.md +++ b/src/components/SimpleTimeline/SimpleTimeline.mdx @@ -1,4 +1,12 @@ -A simple, clean text timeline. +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 - + ``` + + diff --git a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte index 94510714..fecd2df2 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..b9ccb2c4 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.svelte +++ b/src/components/SimpleTimeline/SimpleTimeline.svelte @@ -1,4 +1,3 @@ - + + +``` + + + +# 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 fecd2df2..bcf8d850 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte +++ b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte @@ -49,20 +49,9 @@ }, ], }, - { - date: 'Feb. 27', - events: [ - { - title: 'Russians push into Kharkiv', - titleLink: - 'https://www.reuters.com/world/europe/western-allies-expel-key-russian-banks-global-system-ukraine-fights-2022-02-27/', - }, - { - title: - 'Human rights groups and Ukrainian ambassador accuse Russia of using cluster and vacuum bombs', - }, - ], - }, + ]; + + const datesMultipleEvents = [ { date: 'Feb. 25', events: [ @@ -95,3 +84,12 @@ dates, }} /> + + diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte index b9ccb2c4..fb427e14 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.svelte +++ b/src/components/SimpleTimeline/SimpleTimeline.svelte @@ -1,5 +1,10 @@ From 0d81047a5e5dcd15fa7d202cfdea89c329746b39 Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Wed, 12 Mar 2025 10:51:38 +0000 Subject: [PATCH 19/23] don't need a demo for this one --- .../EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte index afdc73a2..80f2fa4a 100644 --- a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte +++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte @@ -10,6 +10,7 @@ Date: Wed, 12 Mar 2025 11:24:35 +0000 Subject: [PATCH 20/23] small cleanup for oxford comma and our standard lorem ipsum --- src/components/InfoBox/InfoBox.mdx | 6 +++--- src/components/InfoBox/InfoBox.stories.svelte | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/InfoBox/InfoBox.mdx b/src/components/InfoBox/InfoBox.mdx index 6d58ae91..9c23d192 100644 --- a/src/components/InfoBox/InfoBox.mdx +++ b/src/components/InfoBox/InfoBox.mdx @@ -6,7 +6,7 @@ import * as InfoBoxStories from './InfoBox.stories.svelte'; # InfoBox -The `InfoBox` component creates a stylised text box that provides additional information that needs to be visually separate from the main content flow, such as methodology, detailed notes about data, and extra context. +The `InfoBox` component creates a stylised text box that provides additional information that needs to be visually separate from the main content flow, such as methodology, detailed notes about data and extra context. ```svelte From e56cefe85e547e913ebbf0535e414d21a8db8466 Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Wed, 12 Mar 2025 12:19:56 +0000 Subject: [PATCH 22/23] updates SCSS mixins syntax for style --- .../SimpleTimeline/SimpleTimeline.svelte | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte index fb427e14..852eb2f9 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.svelte +++ b/src/components/SimpleTimeline/SimpleTimeline.svelte @@ -92,13 +92,13 @@