diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index e96aba80..0a2ac4bd 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -27,6 +27,7 @@ export const parameters = {
options: {
// https://storybook.js.org/docs/svelte/writing-stories/naming-components-and-hierarchy#sorting-stories
storySort: {
+ method: 'alphabetical-by-kind',
includeNames: true,
order: [
'Intro',
diff --git a/src/components/AdSlot/InlineAd.stories.svelte b/src/components/AdSlot/InlineAd.stories.svelte
index fd354d3e..6afd4afa 100644
--- a/src/components/AdSlot/InlineAd.stories.svelte
+++ b/src/components/AdSlot/InlineAd.stories.svelte
@@ -5,7 +5,7 @@
import { withComponentDocs } from './../../docs/utils/withParams';
export const meta = {
- title: 'Components/InlineAd',
+ title: 'Components/Ads & analytics/InlineAd',
component: InlineAd,
...withComponentDocs(adDocs),
};
diff --git a/src/components/AdSlot/LeaderboardAd.stories.svelte b/src/components/AdSlot/LeaderboardAd.stories.svelte
index 8c364468..1e47d300 100644
--- a/src/components/AdSlot/LeaderboardAd.stories.svelte
+++ b/src/components/AdSlot/LeaderboardAd.stories.svelte
@@ -5,7 +5,7 @@
import { withComponentDocs } from './../../docs/utils/withParams';
export const meta = {
- title: 'Components/LeaderboardAd',
+ title: 'Components/Ads & analytics/LeaderboardAd',
component: LeaderboardAd,
...withComponentDocs(adDocs),
};
diff --git a/src/components/AdSlot/SponsorshipAd.stories.svelte b/src/components/AdSlot/SponsorshipAd.stories.svelte
index b910fe01..eb53adea 100644
--- a/src/components/AdSlot/SponsorshipAd.stories.svelte
+++ b/src/components/AdSlot/SponsorshipAd.stories.svelte
@@ -5,7 +5,7 @@
import { withComponentDocs } from './../../docs/utils/withParams';
export const meta = {
- title: 'Components/SponsorshipAd',
+ title: 'Components/Ads & analytics/SponsorshipAd',
component: SponsorshipAd,
...withComponentDocs(adDocs),
};
diff --git a/src/components/Analytics/Analytics.stories.svelte b/src/components/Analytics/Analytics.stories.svelte
index 01e48e86..00ec7946 100644
--- a/src/components/Analytics/Analytics.stories.svelte
+++ b/src/components/Analytics/Analytics.stories.svelte
@@ -10,7 +10,7 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
export const meta = {
- title: 'Components/Analytics',
+ title: 'Components/Ads & analytics/Analytics',
component: Analytics,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/Article/Article.stories.svelte b/src/components/Article/Article.stories.svelte
index d4e450e4..8c97b1b6 100644
--- a/src/components/Article/Article.stories.svelte
+++ b/src/components/Article/Article.stories.svelte
@@ -8,7 +8,7 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
export const meta = {
- title: 'Components/Article',
+ title: 'Components/Page Layout/Article',
component: Article,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte
index f46bd57c..44624f76 100644
--- a/src/components/BeforeAfter/BeforeAfter.stories.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@@ -10,7 +10,7 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
export const meta = {
- title: 'Components/BeforeAfter',
+ title: 'Components/Graphics/BeforeAfter',
component: BeforeAfter,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte
index 6eb19817..b8354ead 100644
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@@ -11,7 +11,7 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
export const meta = {
- title: 'Components/Block',
+ title: 'Components/Page layout/Block',
component: Block,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/BodyText/BodyText.stories.svelte b/src/components/BodyText/BodyText.stories.svelte
index 7e804a80..b1aa8dd0 100644
--- a/src/components/BodyText/BodyText.stories.svelte
+++ b/src/components/BodyText/BodyText.stories.svelte
@@ -6,7 +6,7 @@
import { withComponentDocs } from '$docs/utils/withParams.js';
export const meta = {
- title: 'Components/BodyText',
+ title: 'Components/Text elements/BodyText',
component: BodyText,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/Byline/Byline.stories.svelte b/src/components/Byline/Byline.stories.svelte
index 572c816b..124f9933 100644
--- a/src/components/Byline/Byline.stories.svelte
+++ b/src/components/Byline/Byline.stories.svelte
@@ -6,7 +6,7 @@
import { withComponentDocs } from '$docs/utils/withParams.js';
export const meta = {
- title: 'Components/Byline',
+ title: 'Components/Text elements/Byline',
component: Byline,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
index 6c706591..055c1a34 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
@@ -11,7 +11,7 @@
} from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/DatawrapperChart',
+ title: 'Components/Graphics/DatawrapperChart',
component: DatawrapperChart,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/DocumentCloud/DocumentCloud.stories.svelte b/src/components/DocumentCloud/DocumentCloud.stories.svelte
index 99a8bc62..c68d6669 100644
--- a/src/components/DocumentCloud/DocumentCloud.stories.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.stories.svelte
@@ -6,7 +6,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/DocumentCloud',
+ title: 'Components/Multimedia/DocumentCloud',
component: DocumentCloud,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
index 5451b667..2d7aa8be 100644
--- a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
@@ -6,7 +6,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/EmbedPreviewerLink',
+ title: 'Components/Utilities/EmbedPreviewerLink',
component: EmbedPreviewerLink,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/EndNotes/EndNotes.stories.svelte b/src/components/EndNotes/EndNotes.stories.svelte
index d732cd0e..3cc767b7 100644
--- a/src/components/EndNotes/EndNotes.stories.svelte
+++ b/src/components/EndNotes/EndNotes.stories.svelte
@@ -6,7 +6,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/EndNotes',
+ title: 'Components/Text elements/EndNotes',
component: EndNotes,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
index 4631213b..756b6c92 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
@@ -14,7 +14,7 @@
} from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/FeaturePhoto',
+ title: 'Components/Multimedia/FeaturePhoto',
component: FeaturePhoto,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/Framer/Framer.stories.svelte b/src/components/Framer/Framer.stories.svelte
index c5ffa81d..11c0f83a 100644
--- a/src/components/Framer/Framer.stories.svelte
+++ b/src/components/Framer/Framer.stories.svelte
@@ -7,7 +7,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/Framer',
+ title: 'Components/Utilities/Framer',
component: Framer,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/GraphicBlock/GraphicBlock.stories.svelte b/src/components/GraphicBlock/GraphicBlock.stories.svelte
index 8a0c9ee0..a58e2758 100644
--- a/src/components/GraphicBlock/GraphicBlock.stories.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.stories.svelte
@@ -15,7 +15,7 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
export const meta = {
- title: 'Components/GraphicBlock',
+ title: 'Components/Graphics/GraphicBlock',
component: GraphicBlock,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 9deea37c..b91168ea 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -20,7 +20,7 @@
} from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/Headline',
+ title: 'Components/Text elements/Headline',
component: Headline,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/HeroHeadline/Hero.stories.svelte b/src/components/HeroHeadline/Hero.stories.svelte
index 44a0c31f..2b71a87a 100644
--- a/src/components/HeroHeadline/Hero.stories.svelte
+++ b/src/components/HeroHeadline/Hero.stories.svelte
@@ -22,7 +22,7 @@
} from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/HeroHeadline',
+ title: 'Components/Text elements/HeroHeadline',
component: HeroHeadline,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte
index 0c31a1b3..7e499c60 100644
--- a/src/components/InfoBox/InfoBox.stories.svelte
+++ b/src/components/InfoBox/InfoBox.stories.svelte
@@ -7,7 +7,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/InfoBox',
+ title: 'Components/Text elements/InfoBox',
component: InfoBox,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/Markdown/Markdown.stories.svelte b/src/components/Markdown/Markdown.stories.svelte
index 9e122a15..a44c3f25 100644
--- a/src/components/Markdown/Markdown.stories.svelte
+++ b/src/components/Markdown/Markdown.stories.svelte
@@ -7,7 +7,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/Markdown',
+ title: 'Components/Text elements/Markdown',
component: Markdown,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/PaddingReset/PaddingReset.stories.svelte b/src/components/PaddingReset/PaddingReset.stories.svelte
index 7dab9c1a..5f3b928e 100644
--- a/src/components/PaddingReset/PaddingReset.stories.svelte
+++ b/src/components/PaddingReset/PaddingReset.stories.svelte
@@ -7,7 +7,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/PaddingReset',
+ title: 'Components/Page layout/PaddingReset',
component: PaddingReset,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
index d562220a..80c095a5 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
@@ -9,7 +9,7 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
export const meta = {
- title: 'Components/PhotoCarousel',
+ title: 'Components/Multimedia/PhotoCarousel',
component: PhotoCarousel,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/PhotoPack/PhotoPack.stories.svelte b/src/components/PhotoPack/PhotoPack.stories.svelte
index a2fe0ead..cf7ba45e 100644
--- a/src/components/PhotoPack/PhotoPack.stories.svelte
+++ b/src/components/PhotoPack/PhotoPack.stories.svelte
@@ -11,7 +11,7 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
export const meta = {
- title: 'Components/PhotoPack',
+ title: 'Components/Multimedia/PhotoPack',
component: PhotoPack,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/PymChild/PymChild.stories.svelte b/src/components/PymChild/PymChild.stories.svelte
index b6559e00..856249f2 100644
--- a/src/components/PymChild/PymChild.stories.svelte
+++ b/src/components/PymChild/PymChild.stories.svelte
@@ -7,7 +7,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/PymChild',
+ title: 'Components/Utilities/PymChild',
component: PymChild,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/ReferralBlock/ReferralBlock.stories.svelte b/src/components/ReferralBlock/ReferralBlock.stories.svelte
index 7cb743a8..b6712ffd 100644
--- a/src/components/ReferralBlock/ReferralBlock.stories.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.stories.svelte
@@ -9,7 +9,7 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
export const meta = {
- title: 'Components/ReferralBlock',
+ title: 'Components/Page furniture/ReferralBlock',
component: ReferralBlock,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
index a7bac605..e63f0ab6 100644
--- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
@@ -7,7 +7,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/ReutersGraphicsLogo',
+ title: 'Components/Logos/ReutersGraphicsLogo',
component: ReutersGraphicsLogo,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/ReutersLogo/ReutersLogo.stories.svelte b/src/components/ReutersLogo/ReutersLogo.stories.svelte
index 368a5af3..d3dbb438 100644
--- a/src/components/ReutersLogo/ReutersLogo.stories.svelte
+++ b/src/components/ReutersLogo/ReutersLogo.stories.svelte
@@ -7,7 +7,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/ReutersLogo',
+ title: 'Components/Logos/ReutersLogo',
component: ReutersLogo,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/SEO/SEO.stories.svelte b/src/components/SEO/SEO.stories.svelte
index 23008b5e..e5392995 100644
--- a/src/components/SEO/SEO.stories.svelte
+++ b/src/components/SEO/SEO.stories.svelte
@@ -12,7 +12,7 @@
} from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/SEO',
+ title: 'Components/Ads & analytics/SEO',
component: SEO,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/Scroller/Scroller.stories.svelte b/src/components/Scroller/Scroller.stories.svelte
index 90f0cd3c..60630781 100644
--- a/src/components/Scroller/Scroller.stories.svelte
+++ b/src/components/Scroller/Scroller.stories.svelte
@@ -16,7 +16,7 @@
} from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/Scroller',
+ title: 'Components/Graphics/Scroller',
component: Scroller,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/SearchInput/SearchInput.stories.svelte b/src/components/SearchInput/SearchInput.stories.svelte
index 945e37f5..c0d1e71d 100644
--- a/src/components/SearchInput/SearchInput.stories.svelte
+++ b/src/components/SearchInput/SearchInput.stories.svelte
@@ -7,7 +7,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/SearchInput',
+ title: 'Components/Controls/SearchInput',
component: SearchInput,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
index 037e7463..455b8bd3 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
@@ -7,7 +7,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/SimpleTimeline',
+ title: 'Components/Text elements/SimpleTimeline',
component: SimpleTimeline,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/SiteFooter/SiteFooter.stories.svelte b/src/components/SiteFooter/SiteFooter.stories.svelte
index a6b46453..8705ce6a 100644
--- a/src/components/SiteFooter/SiteFooter.stories.svelte
+++ b/src/components/SiteFooter/SiteFooter.stories.svelte
@@ -14,7 +14,7 @@
} from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/SiteFooter',
+ title: 'Components/Page furniture/SiteFooter',
component: SiteFooter,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/SiteHeader/SiteHeader.stories.svelte b/src/components/SiteHeader/SiteHeader.stories.svelte
index 97af4522..67c79522 100644
--- a/src/components/SiteHeader/SiteHeader.stories.svelte
+++ b/src/components/SiteHeader/SiteHeader.stories.svelte
@@ -12,7 +12,7 @@
} from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/SiteHeader',
+ title: 'Components/Page furniture/SiteHeader',
component: SiteHeader,
...withComponentDocs(componentDocs),
argsTypes: {
diff --git a/src/components/SiteHeadline/SiteHeadline.stories.svelte b/src/components/SiteHeadline/SiteHeadline.stories.svelte
index 77e1c8e9..bf454dce 100644
--- a/src/components/SiteHeadline/SiteHeadline.stories.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.stories.svelte
@@ -5,7 +5,7 @@
import componentDocs from './stories/docs/component.md?raw';
export const meta = {
- title: 'Components/SiteHeadline',
+ title: 'Components/Text elements/SiteHeadline',
component: SiteHeadline,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/Spinner/Spinner.stories.svelte b/src/components/Spinner/Spinner.stories.svelte
index cf526ce4..75568cf4 100644
--- a/src/components/Spinner/Spinner.stories.svelte
+++ b/src/components/Spinner/Spinner.stories.svelte
@@ -7,7 +7,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/Spinner',
+ title: 'Components/Utilities/Spinner',
component: Spinner,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/Table/Table.stories.svelte b/src/components/Table/Table.stories.svelte
index 7f67e2b4..a5ca5207 100644
--- a/src/components/Table/Table.stories.svelte
+++ b/src/components/Table/Table.stories.svelte
@@ -25,7 +25,7 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
export const meta = {
- title: 'Components/Table',
+ title: 'Components/Text elements/Table',
component: Table,
...withComponentDocs(componentDocs),
argTypes: {
@@ -37,12 +37,14 @@
};
-
@@ -154,7 +156,7 @@
sortable: true,
sortField: 'Net worth (in billions)',
sortDirection: 'descending',
- fieldFormatters: { 'Net worth (in billions)': (v) => '$' + v.toFixed(1) },
+ fieldFormatters: { 'Net worth (in billions)': currencyFormat },
}}"
/>
diff --git a/src/components/Theme/Theme.stories.svelte b/src/components/Theme/Theme.stories.svelte
index 228a1c13..c094711c 100644
--- a/src/components/Theme/Theme.stories.svelte
+++ b/src/components/Theme/Theme.stories.svelte
@@ -18,7 +18,7 @@
} from '../../docs/utils/withParams.js';
export const meta = {
- title: 'Components/Theme',
+ title: 'Components/Theming/Theme',
component: Theme,
...withComponentDocs(componentDocs),
argTypes: {
diff --git a/src/components/ToolsHeader/ToolsHeader.stories.svelte b/src/components/ToolsHeader/ToolsHeader.stories.svelte
index f1c4bc9d..c04ad23c 100644
--- a/src/components/ToolsHeader/ToolsHeader.stories.svelte
+++ b/src/components/ToolsHeader/ToolsHeader.stories.svelte
@@ -7,7 +7,7 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/ToolsHeader',
+ title: 'Components/Page furniture/ToolsHeader',
component: ToolsHeader,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/Video/Video.stories.svelte b/src/components/Video/Video.stories.svelte
index eecc1eff..1a38eb04 100644
--- a/src/components/Video/Video.stories.svelte
+++ b/src/components/Video/Video.stories.svelte
@@ -16,7 +16,7 @@
} from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/Video',
+ title: 'Components/Multimedia/Video',
component: Video,
...withComponentDocs(componentDocs),
};
diff --git a/src/components/Visible/Visible.stories.svelte b/src/components/Visible/Visible.stories.svelte
index 141f04e5..42b54122 100644
--- a/src/components/Visible/Visible.stories.svelte
+++ b/src/components/Visible/Visible.stories.svelte
@@ -9,7 +9,7 @@
import { withSource, withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
- title: 'Components/Visible',
+ title: 'Components/Utilities/Visible',
component: Visible,
...withComponentDocs(componentDocs),
};