wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updates meta exports for all component stories

Browse source
This commit is contained in:
hobbes7878 2024-11-19 18:48:51 +00:00
parent 2d89b5b88d
commit 8767c175ea
41 changed files with 436 additions and 410 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -49,7 +49,7 @@
"@storybook/addon-mdx-gfm": "^8.2.9",
"@storybook/addon-measure": "^8.4.4",
"@storybook/addon-outline": "^8.4.4",
"@storybook/addon-svelte-csf": "^4.1.5",
"@storybook/addon-svelte-csf": "^4.1.7",
"@storybook/addon-toolbars": "^8.4.4",
"@storybook/addon-viewport": "^8.4.4",
"@storybook/blocks": "^8.2.9",

2
pnpm-lock.yaml
View file

@ -94,7 +94,7 @@ importers:
specifier: ^8.4.4
version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
'@storybook/addon-svelte-csf':
specifier: ^4.1.5
specifier: ^4.1.7
version: 4.1.7(@storybook/svelte@8.4.4(storybook@8.4.4(prettier@3.3.3))(svelte@4.2.19))(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(storybook@8.4.4(prettier@3.3.3))(svelte-loader@3.2.4(svelte@4.2.19))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0))
'@storybook/addon-toolbars':
specifier: ^8.4.4

18
src/components/AdSlot/InlineAd.stories.svelte
View file

@ -1,20 +1,20 @@
<script lang="ts">
import { Template, Story, Meta } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
import InlineAd from './InlineAd.svelte';
// @ts-ignore raw
import adDocs from './stories/docs/inline.md?raw';
import AdScripts from './AdScripts.svelte';
import InlineAd from './InlineAd.svelte';
import { withComponentDocs } from './../../docs/utils/withParams';
const meta = {
export const meta = {
title: 'Components/InlineAd',
component: InlineAd,
...withComponentDocs(adDocs),
};
</script>
<Meta title="Components/InlineAd" component="{InlineAd}" {...meta} />
<script lang="ts">
import { Template, Story } from '@storybook/addon-svelte-csf';
import AdScripts from './AdScripts.svelte';
</script>
<Template>
<div>

18
src/components/AdSlot/LeaderboardAd.stories.svelte
View file

@ -1,20 +1,20 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
import LeaderboardAd from './LeaderboardAd.svelte';
// @ts-ignore raw
import adDocs from './stories/docs/leaderboard.md?raw';
import AdScripts from './AdScripts.svelte';
import LeaderboardAd from './LeaderboardAd.svelte';
import { withComponentDocs } from './../../docs/utils/withParams';
const meta = {
export const meta = {
title: 'Components/LeaderboardAd',
component: LeaderboardAd,
...withComponentDocs(adDocs),
};
</script>
<Meta title="Components/LeaderboardAd" component="{LeaderboardAd}" {...meta} />
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import AdScripts from './AdScripts.svelte';
</script>
<Template>
<div>

19
src/components/AdSlot/SponsorshipAd.stories.svelte
View file

@ -1,20 +1,21 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
import SponsorshipAd from './SponsorshipAd.svelte';
// @ts-ignore raw
import adDocs from './stories/docs/sponsorship.md?raw';
import AdScripts from './AdScripts.svelte';
import SponsorshipAd from './SponsorshipAd.svelte';
import { withComponentDocs } from './../../docs/utils/withParams';
const meta = {
export const meta = {
title: 'Components/SponsorshipAd',
component: SponsorshipAd,
...withComponentDocs(adDocs),
};
</script>
<Meta title="Components/SponsorshipAd" component="{SponsorshipAd}" {...meta} />
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import AdScripts from './AdScripts.svelte';
</script>
<Template>
<div>

21
src/components/Analytics/Analytics.stories.svelte
View file

@ -1,6 +1,5 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
import Analytics from './Analytics.svelte';
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -8,16 +7,18 @@
// @ts-ignore raw
import multipageDocs from './stories/docs/multipage.md?raw';
import Analytics from './Analytics.svelte';
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
export const meta = {
title: 'Components/Analytics',
component: Analytics,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/Analytics"
component="{Analytics}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<Analytics {...args} />

26
src/components/Article/Article.stories.svelte
View file

@ -1,25 +1,23 @@
<script lang="ts">
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
import Article from './Article.svelte';
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
import customWellWidthsDocs from './stories/docs/customWellWidths.md?raw';
import Article from './Article.svelte';
import Block from '../Block/Block.svelte';
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
import {
withComponentDocs,
withStoryDocs,
} from '../../docs/utils/withParams.js';
export const meta = {
title: 'Components/Article',
component: Article,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Layout/Article"
component="{Article}"
{...withComponentDocs(componentDocs)}
/>
<script lang="ts">
import { Template, Story } from '@storybook/addon-svelte-csf';
import Block from '../Block/Block.svelte';
</script>
<Template let:args>
<Article {...args} />

30
src/components/BeforeAfter/BeforeAfter.stories.svelte
View file

@ -1,6 +1,5 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
import BeforeAfter from './BeforeAfter.svelte';
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -8,19 +7,11 @@
// @ts-ignore raw
import ariaDescriptionsDocs from './stories/docs/ariaDescriptions.md?raw';
import BeforeAfter from './BeforeAfter.svelte';
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
// @ts-ignore raw
import beforeImg from './stories/myrne-before.jpg';
// @ts-ignore raw
import afterImg from './stories/myrne-after.jpg';
import {
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/BeforeAfter',
component: BeforeAfter,
...withComponentDocs(componentDocs),
argTypes: {
handleColour: { control: 'color' },
@ -32,7 +23,14 @@
};
</script>
<Meta title="Components/BeforeAfter" component="{BeforeAfter}" {...metaProps} />
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
// @ts-ignore raw
import beforeImg from './stories/myrne-before.jpg';
// @ts-ignore raw
import afterImg from './stories/myrne-after.jpg';
</script>
<Template let:args>
<BeforeAfter {...args} />

19
src/components/Block/Block.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -9,14 +7,12 @@
import snapWidthsDocs from './stories/docs/snapWidths.md?raw';
import Block from './Block.svelte';
import Article from '../Article/Article.svelte';
import {
withComponentDocs,
withStoryDocs,
} from '../../docs/utils/withParams.js';
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/Block',
component: Block,
...withComponentDocs(componentDocs),
argTypes: {
width: {
@ -35,7 +31,10 @@
};
</script>
<Meta title="Layout/Block" component="{Block}" {...metaProps} />
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import Article from '../Article/Article.svelte';
</script>
<Template let:args>
<Article id="block-demo-article">

21
src/components/BodyText/BodyText.stories.svelte
View file

@ -1,19 +1,20 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
import BodyText from './BodyText.svelte';
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import BodyText from './BodyText.svelte';
import { withComponentDocs } from '$docs/utils/withParams.js';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/BodyText',
component: BodyText,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/BodyText"
component="{BodyText}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<BodyText {...args} />

18
src/components/Byline/Byline.stories.svelte
View file

@ -1,16 +1,14 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
import Byline from './Byline.svelte';
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import Byline from './Byline.svelte';
import { withComponentDocs } from '$docs/utils/withParams.js';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/Byline',
component: Byline,
...withComponentDocs(componentDocs),
// https://storybook.js.org/docs/svelte/essentials/controls
argTypes: {
align: {
control: 'select',
@ -20,7 +18,9 @@
};
</script>
<Meta title="Components/Byline" component="{Byline}" {...metaProps} />
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<Byline {...args} />

19
src/components/DatawrapperChart/DatawrapperChart.stories.svelte
View file

@ -1,19 +1,18 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
import DatawrapperChart from './DatawrapperChart.svelte';
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
import withChatterDocs from './stories/docs/withChatter.md?raw';
import DatawrapperChart from './DatawrapperChart.svelte';
import {
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/DatawrapperChart',
component: DatawrapperChart,
...withComponentDocs(componentDocs),
argTypes: {
width: {
@ -24,11 +23,9 @@
};
</script>
<Meta
title="Components/DatawrapperChart"
component="{DatawrapperChart}"
{...metaProps}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<DatawrapperChart {...args} />

21
src/components/DocumentCloud/DocumentCloud.stories.svelte
View file

@ -1,14 +1,13 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
import DocumentCloud from './DocumentCloud.svelte';
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import DocumentCloud from './DocumentCloud.svelte';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
import { withComponentDocs } from '$docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/DocumentCloud',
component: DocumentCloud,
...withComponentDocs(componentDocs),
argTypes: {
width: {
@ -19,11 +18,9 @@
};
</script>
<Meta
title="Components/DocumentCloud"
component="{DocumentCloud}"
{...metaProps}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<DocumentCloud {...args} />

21
src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
View file

@ -1,19 +1,20 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
import EmbedPreviewerLink from './EmbedPreviewerLink.svelte';
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import EmbedPreviewerLink from './EmbedPreviewerLink.svelte';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/EmbedPreviewerLink',
component: EmbedPreviewerLink,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/EmbedPreviewerLink"
component="{EmbedPreviewerLink}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<EmbedPreviewerLink {...args} />

24
src/components/EndNotes/EndNotes.stories.svelte
View file

@ -1,13 +1,21 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
import EndNotes from './EndNotes.svelte';
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import EndNotes from './EndNotes.svelte';
import { getEndNotesPropsFromDoc } from './docProps';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/EndNotes',
component: EndNotes,
...withComponentDocs(componentDocs),
};
</script>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import { getEndNotesPropsFromDoc } from './docProps';
const notes = [
{
Title: 'Note',
@ -24,12 +32,6 @@
];
</script>
<Meta
title="Components/EndNotes"
component="{EndNotes}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args>
<EndNotes {...args} />
</Template>

22
src/components/FeaturePhoto/FeaturePhoto.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -10,15 +8,14 @@
import FeaturePhoto from './FeaturePhoto.svelte';
// @ts-ignore jpg
import sharkSrc from './stories/shark.jpg';
import {
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/FeaturePhoto',
component: FeaturePhoto,
...withComponentDocs(componentDocs),
argTypes: {
width: {
@ -33,11 +30,12 @@
};
</script>
<Meta
title="Components/FeaturePhoto"
component="{FeaturePhoto}"
{...metaProps}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
// @ts-ignore jpg
import sharkSrc from './stories/shark.jpg';
</script>
<Template let:args>
<FeaturePhoto {...args} />

18
src/components/Framer/Framer.stories.svelte
View file

@ -1,19 +1,21 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import Framer from './Framer.svelte';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/Framer',
component: Framer,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/Framer"
component="{Framer}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<Framer {...args} />

26
src/components/GraphicBlock/GraphicBlock.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -14,14 +12,11 @@
import GraphicBlock from './GraphicBlock.svelte';
import AiMap from './stories/ai2svelte/ai-chart.svelte';
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
// @ts-ignore img
import PlaceholderImg from './stories/placeholder.png';
const metaProps = {
export const meta = {
title: 'Components/GraphicBlock',
component: GraphicBlock,
...withComponentDocs(componentDocs),
argTypes: {
width: {
@ -36,11 +31,14 @@
};
</script>
<Meta
title="Components/GraphicBlock"
component="{GraphicBlock}"
{...metaProps}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import AiMap from './stories/ai2svelte/ai-chart.svelte';
// @ts-ignore img
import PlaceholderImg from './stories/placeholder.png';
</script>
<Template let:args>
<GraphicBlock {...args}>

21
src/components/Headline/Headline.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -14,10 +12,6 @@
// @ts-ignore raw
import withCrownGraphicDocs from './stories/docs/withCrownGraphic.md?raw';
// @ts-ignore img
import crownImgSrc from './stories/crown.png';
import Map from './stories/graphic.svelte';
import Headline from './Headline.svelte';
import {
@ -25,9 +19,10 @@
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/Headline',
component: Headline,
...withComponentDocs(componentDocs),
// https://storybook.js.org/docs/svelte/essentials/controls
argTypes: {
hedSize: {
control: 'select',
@ -41,7 +36,13 @@
};
</script>
<Meta title="Components/Headline" component="{Headline}" {...metaProps} />
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
// @ts-ignore img
import crownImgSrc from './stories/crown.png';
import Map from './stories/graphic.svelte';
</script>
<Template let:args>
<Headline {...args} />

44
src/components/HeroHeadline/Hero.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -16,29 +14,17 @@
// @ts-ignore raw
import customHedDocs from './stories/docs/customHed.md?raw';
// @ts-ignore img
import polarImgSrc from './stories/polar.jpg';
// @ts-ignore img
import eurovisImgSrc from './stories/eurovis.jpeg';
import Block from '../Block/Block.svelte';
import SiteHeader from '../SiteHeader/SiteHeader.svelte';
import HeroHeadline from './Hero.svelte';
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
import Video from '../Video/Video.svelte';
import CrashMap from './stories/graphics/crash.svelte';
import QuakeMap from './stories/graphics/quakemap.svelte';
import {
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/HeroHeadline',
component: HeroHeadline,
...withComponentDocs(componentDocs),
// https://storybook.js.org/docs/svelte/essentials/controls
argTypes: {
hedSize: {
control: 'select',
@ -60,11 +46,23 @@
};
</script>
<Meta
title="Components/HeroHeadline"
component="{HeroHeadline}"
{...metaProps}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
// @ts-ignore img
import polarImgSrc from './stories/polar.jpg';
// @ts-ignore img
import eurovisImgSrc from './stories/eurovis.jpeg';
import Block from '../Block/Block.svelte';
import SiteHeader from '../SiteHeader/SiteHeader.svelte';
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
import Video from '../Video/Video.svelte';
import CrashMap from './stories/graphics/crash.svelte';
import QuakeMap from './stories/graphics/quakemap.svelte';
</script>
<Template let:args>
<Block width="fluid" class="chromatic-ignore">

16
src/components/InfoBox/InfoBox.stories.svelte
View file

@ -1,14 +1,14 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import InfoBox from './InfoBox.svelte';
import BodyText from '../BodyText/BodyText.svelte';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/InfoBox',
component: InfoBox,
...withComponentDocs(componentDocs),
argTypes: {
theme: {
@ -23,7 +23,11 @@
};
</script>
<Meta title="Components/InfoBox" component="{InfoBox}" {...metaProps} />
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import BodyText from '../BodyText/BodyText.svelte';
</script>
<Template let:args>
<InfoBox {...args} />

18
src/components/Markdown/Markdown.stories.svelte
View file

@ -1,21 +1,23 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import Markdown from './Markdown.svelte';
import { withComponentDocs } from '$docs/utils/withParams.js';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
import Block from '../Block/Block.svelte';
const metaProps = {
export const meta = {
title: 'Components/Markdown',
component: Markdown,
...withComponentDocs(componentDocs),
};
</script>
<Meta title="Components/Markdown" component="{Markdown}" {...metaProps} />
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import Block from '../Block/Block.svelte';
</script>
<Template let:args>
<Block>

20
src/components/PaddingReset/PaddingReset.stories.svelte
View file

@ -1,20 +1,22 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import PaddingReset from './PaddingReset.svelte';
import Block from '../Block/Block.svelte';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/PaddingReset',
component: PaddingReset,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/PaddingReset"
component="{PaddingReset}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import Block from '../Block/Block.svelte';
</script>
<Template let:args>
<Block width="fluid">

24
src/components/PhotoCarousel/PhotoCarousel.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -10,11 +8,9 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
import photosJson from './stories/photos.json';
const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
const metaProps = {
export const meta = {
title: 'Components/PhotoCarousel',
component: PhotoCarousel,
...withComponentDocs(componentDocs),
argTypes: {
width: {
@ -25,11 +21,13 @@
};
</script>
<Meta
title="Components/PhotoCarousel"
component="{PhotoCarousel}"
{...metaProps}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import photosJson from './stories/photos.json';
const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
</script>
<Template let:args>
<PhotoCarousel {...args} />

17
src/components/PhotoPack/PhotoPack.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -9,11 +7,12 @@
import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
import PhotoPack from './PhotoPack.svelte';
import { getPhotoPackPropsFromDoc } from './docProps';
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/PhotoPack',
component: PhotoPack,
...withComponentDocs(componentDocs),
argTypes: {
width: {
@ -26,6 +25,12 @@
},
},
};
</script>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import { getPhotoPackPropsFromDoc } from './docProps';
const defaultImages = [
{
@ -119,8 +124,6 @@
const altTextLayouts = [{ breakpoint: 450, rows: [2] }];
</script>
<Meta title="Components/PhotoPack" component="{PhotoPack}" {...metaProps} />
<Template let:args>
<PhotoPack {...args} />
</Template>

18
src/components/PymChild/PymChild.stories.svelte
View file

@ -1,19 +1,21 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import PymChild from './PymChild.svelte';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/PymChild',
component: PymChild,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/PymChild"
component="{PymChild}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<PymChild {...args} />

16
src/components/ReferralBlock/ReferralBlock.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -10,7 +8,9 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/ReferralBlock',
component: ReferralBlock,
...withComponentDocs(componentDocs),
argTypes: {
width: {
@ -37,11 +37,9 @@
};
</script>
<Meta
title="Components/ReferralBlock"
component="{ReferralBlock}"
{...metaProps}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<ReferralBlock {...args} />

20
src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
View file

@ -1,19 +1,21 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import ReutersGraphicsLogo from './ReutersGraphicsLogo.svelte';
import { withComponentDocs } from '$docs/utils/withParams.js';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/ReutersGraphicsLogo',
component: ReutersGraphicsLogo,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/ReutersGraphicsLogo"
component="{ReutersGraphicsLogo}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<ReutersGraphicsLogo {...args} />

12
src/components/ReutersLogo/ReutersLogo.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
@ -8,7 +6,9 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/ReutersLogo',
component: ReutersLogo,
...withComponentDocs(componentDocs),
argTypes: {
logoColour: { control: 'color' },
@ -17,7 +17,9 @@
};
</script>
<Meta title="Components/ReutersLogo" component="{ReutersLogo}" {...metaProps} />
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<ReutersLogo {...args} />

18
src/components/SEO/SEO.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -12,13 +10,17 @@
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/SEO',
component: SEO,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/SEO"
component="{SEO}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<SEO {...args} />

60
src/components/Scroller/Scroller.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -12,17 +10,42 @@
import Scroller from './Scroller.svelte';
import {
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/Scroller',
component: Scroller,
...withComponentDocs(componentDocs),
argTypes: {
steps: { control: false },
backgroundWidth: {
control: 'select',
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
},
foregroundPosition: {
control: 'select',
options: ['middle', 'left', 'right', 'left opposite', 'right opposite'],
},
embeddedLayout: {
control: 'select',
options: ['fb', 'bf'],
},
},
};
</script>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import BasicStep from './stories/components/basic/Step.svelte';
import InteractiveForeground from './stories/components/basic/InteractiveForeground.svelte';
import AiMap1 from './stories/components/ai2svelte/ai-scroller-1.svelte';
import AiMap2 from './stories/components/ai2svelte/ai-scroller-2.svelte';
import AiMap3 from './stories/components/ai2svelte/ai-scroller-3.svelte';
import {
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
import { getScrollerPropsFromDoc } from './docProps';
const aiCharts = {
@ -56,29 +79,8 @@
},
],
};
const metaProps = {
...withComponentDocs(componentDocs),
argTypes: {
steps: { control: false },
backgroundWidth: {
control: 'select',
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
},
foregroundPosition: {
control: 'select',
options: ['middle', 'left', 'right', 'left opposite', 'right opposite'],
},
embeddedLayout: {
control: 'select',
options: ['fb', 'bf'],
},
},
};
</script>
<Meta title="Components/Scroller" component="{Scroller}" {...metaProps} />
<Template let:args>
<Scroller {...args} />
</Template>

20
src/components/SearchInput/SearchInput.stories.svelte
View file

@ -1,19 +1,21 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import SearchInput from './SearchInput.svelte';
import { withComponentDocs } from '$docs/utils/withParams.js';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/SearchInput',
component: SearchInput,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/SearchInput"
component="{SearchInput}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<SearchInput {...args} />

20
src/components/SimpleTimeline/SimpleTimeline.stories.svelte
View file

@ -1,20 +1,24 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import SimpleTimeline from './SimpleTimeline.svelte';
import { withComponentDocs } from '$docs/utils/withParams.js';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/SimpleTimeline',
component: SimpleTimeline,
...withComponentDocs(componentDocs),
argTypes: {
symbolColour: { control: 'color' },
dateColour: { control: 'color' },
},
};
</script>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
const dates = [
{
@ -92,12 +96,6 @@
];
</script>
<Meta
title="Components/SimpleTimeline"
component="{SimpleTimeline}"
{...metaProps}
/>
<Template let:args>
<SimpleTimeline {...args} />
</Template>

21
src/components/SiteFooter/SiteFooter.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -9,19 +7,24 @@
import removeReferralsDocs from './stories/docs/removeReferrals.md?raw';
import SiteFooter from './SiteFooter.svelte';
import Theme from '../Theme/Theme.svelte';
import {
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/SiteFooter',
component: SiteFooter,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/SiteFooter"
component="{SiteFooter}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import Theme from '../Theme/Theme.svelte';
</script>
<Template let:args>
<div>

15
src/components/SiteHeader/SiteHeader.stories.svelte
View file

@ -1,20 +1,19 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
import darkThemeDocs from './stories/docs/darkTheme.md?raw';
import SiteHeader from './SiteHeader.svelte';
import Theme from '../Theme/Theme.svelte';
import {
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/SiteHeader',
component: SiteHeader,
...withComponentDocs(componentDocs),
argsTypes: {
themes: { control: { disable: true } },
@ -22,7 +21,11 @@
};
</script>
<Meta title="Components/SiteHeader" component="{SiteHeader}" {...metaProps} />
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import Theme from '../Theme/Theme.svelte';
</script>
<Template let:args>
<div>

12
src/components/Spinner/Spinner.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
@ -8,7 +6,9 @@
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/Spinner',
component: Spinner,
...withComponentDocs(componentDocs),
argTypes: {
colour: { control: 'color' },
@ -22,7 +22,9 @@
};
</script>
<Meta title="Components/Spinner" component="{Spinner}" {...metaProps} />
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<Spinner {...args} />

21
src/components/Table/Table.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -26,11 +24,9 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
import pressFreedom from './stories/pressFreedom.json';
import homeRuns from './stories/homeRuns.json';
import richestWomen from './stories/richestWomen.json';
const metaProps = {
export const meta = {
title: 'Components/Table',
component: Table,
...withComponentDocs(componentDocs),
argTypes: {
width: {
@ -41,7 +37,13 @@
};
</script>
<Meta title="Components/Table" component="{Table}" {...metaProps} />
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import pressFreedom from './stories/pressFreedom.json';
import homeRuns from './stories/homeRuns.json';
import richestWomen from './stories/richestWomen.json';
</script>
<Template let:args>
<Table {...args} />
@ -165,5 +167,4 @@
title: 'The Richest Women in the World',
source: 'Source: Forbes',
}}"
,
/>

22
src/components/Theme/Theme.stories.svelte
View file

@ -1,6 +1,4 @@
<script lang="ts">
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -12,19 +10,16 @@
// @ts-ignore raw
import inheritanceDocs from './stories/docs/inheritance.md?raw';
import ThemedPage from './stories/ThemedPage.svelte';
import SiteHeader from '../SiteHeader/SiteHeader.svelte';
import Theme, { themes } from './Theme.svelte';
import Headline from './../Headline/Headline.svelte';
import {
withComponentDocs,
withStoryDocs,
} from '../../docs/utils/withParams.js';
const metaProps = {
export const meta = {
title: 'Components/Theme',
component: Theme,
...withComponentDocs(componentDocs),
argTypes: {
base: {
@ -36,7 +31,14 @@
};
</script>
<Meta title="Theming/Theme" component="{Theme}" {...metaProps} />
<script lang="ts">
import { Template, Story } from '@storybook/addon-svelte-csf';
import ThemedPage from './stories/ThemedPage.svelte';
import SiteHeader from '../SiteHeader/SiteHeader.svelte';
import Headline from './../Headline/Headline.svelte';
</script>
<Template let:args>
<div class="reset-article">

20
src/components/ToolsHeader/ToolsHeader.stories.svelte
View file

@ -1,19 +1,21 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import ToolsHeader from './ToolsHeader.svelte';
import { withComponentDocs } from '$docs/utils/withParams.js';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/ToolsHeader',
component: ToolsHeader,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/ToolsHeader"
component="{ToolsHeader}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<div>

28
src/components/Video/Video.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -10,24 +8,28 @@
// @ts-ignore raw
// import withSoundDocs from './stories/docs/withSound.md?raw';
// @ts-ignore raw
import SilentVideo from './stories/videos/silent-video.mp4';
// @ts-ignore raw
import SoundVideo from './stories/videos/sound-video.mp4';
import Video from './Video.svelte';
import {
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/Video',
component: Video,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/Video"
component="{Video}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
// @ts-ignore raw
import SilentVideo from './stories/videos/silent-video.mp4';
// @ts-ignore raw
import SoundVideo from './stories/videos/sound-video.mp4';
</script>
<Template let:args>
<Video {...args} />

18
src/components/Visible/Visible.stories.svelte
View file

@ -1,6 +1,4 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore raw
@ -9,13 +7,17 @@
import Visible from './Visible.svelte';
import { withSource, withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/Visible',
component: Visible,
...withComponentDocs(componentDocs),
};
</script>
<Meta
title="Components/Visible"
component="{Visible}"
{...withComponentDocs(componentDocs)}
/>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template let:args>
<Visible {...args} let:visible>