@reuters-graphics/graphics-components 1.1.6 → 2.0.0

package/dist/components/Headline/Headline.stories.svelte.d.ts

@@ -1,25 +1,33 @@
-/** @typedef {typeof __propDef.props}  HeadlineProps */
-/** @typedef {typeof __propDef.events}  HeadlineEvents */
-/** @typedef {typeof __propDef.slots}  HeadlineSlots */
-export default class Headline extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type HeadlineProps = typeof __propDef.props;
-export type HeadlineEvents = typeof __propDef.events;
-export type HeadlineSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    argTypes: {
+        hedSize: {
+            control: string;
+            options: string[];
+        };
+        width: {
+            control: string;
+            options: string[];
+        };
+    };
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof Headline;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type HeadlineProps = typeof __propDef.props;
+export type HeadlineEvents = typeof __propDef.events;
+export type HeadlineSlots = typeof __propDef.slots;
+export default class Headline extends SvelteComponent<HeadlineProps, HeadlineEvents, HeadlineSlots> {
+}
 export {};

package/dist/components/Headline/Headline.svelte

@@ -1,4 +1,4 @@
-<!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
+<!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-headline--docs) -->
 <script>export let hed = "Reuters Graphics Interactive";
 let cls = "";
 export { cls as class };

package/dist/components/Headline/Headline.svelte.d.ts

@@ -49,7 +49,7 @@ declare const __propDef: {
 export type HeadlineProps = typeof __propDef.props;
 export type HeadlineEvents = typeof __propDef.events;
 export type HeadlineSlots = typeof __propDef.slots;
-/** `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) */
+/** `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-headline--docs) */
 export default class Headline extends SvelteComponent<HeadlineProps, HeadlineEvents, HeadlineSlots> {
 }
 export {};

package/dist/components/HeroHeadline/Hero.stories.svelte

@@ -1,20 +1,42 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import backgroundGraphicDocs from "./stories/docs/backgroundGraphic.md?raw";
+import inlineGraphicDocs from "./stories/docs/inlineGraphic.md?raw";
+import inlinePhotoDocs from "./stories/docs/inlinePhoto.md?raw";
+import transparentHeaderDocs from "./stories/docs/transparentHeader.md?raw";
+import videoDocs from "./stories/docs/backgroundVideo.md?raw";
+import customHedDocs from "./stories/docs/customHed.md?raw";
+import HeroHeadline from "./Hero.svelte";
+import {
+  withComponentDocs,
+  withStoryDocs
+} from "../../lib/docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Text elements/HeroHeadline",
+  component: HeroHeadline,
+  ...withComponentDocs(componentDocs),
+  argTypes: {
+    hedSize: {
+      control: "select",
+      options: ["small", "normal", "big", "bigger", "biggest"]
+    },
+    hedWidth: {
+      control: "select",
+      options: ["normal", "wide", "wider", "widest"]
+    },
+    hedAlign: {
+      control: "select",
+      options: ["left", "center", "right"]
+    },
+    width: {
+      control: "select",
+      options: ["normal", "wide", "wider", "widest"]
+    }
+  }
+};
+</script>
 
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
-  // @ts-ignore raw
-  import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
-  // @ts-ignore raw
-  import inlinePhotoDocs from './stories/docs/inlinePhoto.md?raw';
-  // @ts-ignore raw
-  import transparentHeaderDocs from './stories/docs/transparentHeader.md?raw';
-  // @ts-ignore raw
-  import videoDocs from './stories/docs/backgroundVideo.md?raw';
-  // @ts-ignore raw
-  import customHedDocs from './stories/docs/customHed.md?raw';
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
 
   // @ts-ignore img
   import polarImgSrc from './stories/polar.jpg';
@@ -23,49 +45,14 @@
 
   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 = {
-    ...withComponentDocs(componentDocs),
-    // https://storybook.js.org/docs/svelte/essentials/controls
-    argTypes: {
-      hedSize: {
-        control: 'select',
-        options: ['small', 'normal', 'big', 'bigger', 'biggest'],
-      },
-      hedWidth: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest'],
-      },
-      hedAlign: {
-        control: 'select',
-        options: ['left', 'center', 'right'],
-      },
-      width: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest'],
-      },
-    },
-  };
 </script>
 
-<Meta
-  title="Components/HeroHeadline"
-  component="{HeroHeadline}"
-  {...metaProps}
-/>
-
 <Template let:args>
   <Block width="fluid" class="chromatic-ignore">
     <SiteHeader />

package/dist/components/HeroHeadline/Hero.stories.svelte.d.ts

@@ -1,25 +1,42 @@
-/** @typedef {typeof __propDef.props}  HeroProps */
-/** @typedef {typeof __propDef.events}  HeroEvents */
-/** @typedef {typeof __propDef.slots}  HeroSlots */
-export default class Hero extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type HeroProps = typeof __propDef.props;
-export type HeroEvents = typeof __propDef.events;
-export type HeroSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+import HeroHeadline from './Hero.svelte';
+export declare const meta: {
+    argTypes: {
+        hedSize: {
+            control: string;
+            options: string[];
+        };
+        hedWidth: {
+            control: string;
+            options: string[];
+        };
+        hedAlign: {
+            control: string;
+            options: string[];
+        };
+        width: {
+            control: string;
+            options: string[];
+        };
+    };
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof HeroHeadline;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type HeroProps = typeof __propDef.props;
+export type HeroEvents = typeof __propDef.events;
+export type HeroSlots = typeof __propDef.slots;
+export default class Hero extends SvelteComponent<HeroProps, HeroEvents, HeroSlots> {
+}
 export {};

package/dist/components/HeroHeadline/Hero.svelte

@@ -1,4 +1,4 @@
-<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) -->
+<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-heroheadline--docs) -->
 <script>export let embedded = false;
 export let img = null;
 export let ariaDescription = null;
@@ -176,10 +176,12 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     margin-left: 0;
   }
 }
+
 .hero-byline :global(.byline-container) {
   z-index: 1;
   position: relative;
 }
+
 .background-image {
   width: auto;
   height: var(--heroHeight, 100svh);

package/dist/components/HeroHeadline/Hero.svelte.d.ts

@@ -69,7 +69,7 @@ declare const __propDef: {
 export type HeroProps = typeof __propDef.props;
 export type HeroEvents = typeof __propDef.events;
 export type HeroSlots = typeof __propDef.slots;
-/** `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) */
+/** `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-heroheadline--docs) */
 export default class Hero extends SvelteComponent<HeroProps, HeroEvents, HeroSlots> {
 }
 export {};

package/dist/components/InfoBox/InfoBox.stories.svelte

@@ -1,30 +1,29 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import InfoBox from "./InfoBox.svelte";
+import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Text elements/InfoBox",
+  component: InfoBox,
+  ...withComponentDocs(componentDocs),
+  argTypes: {
+    theme: {
+      control: "select",
+      options: ["light", "dark"]
+    },
+    width: {
+      control: "select",
+      options: ["normal", "wide", "wider", "widest", "fluid"]
+    }
+  }
+};
+</script>
 
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
 
-  import InfoBox from './InfoBox.svelte';
   import BodyText from '../BodyText/BodyText.svelte';
-  import { withComponentDocs } from '../../lib/docs/utils/withParams.js';
-
-  const metaProps = {
-    ...withComponentDocs(componentDocs),
-    argTypes: {
-      theme: {
-        control: 'select',
-        options: ['light', 'dark'],
-      },
-      width: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
-      },
-    },
-  };
 </script>
 
-<Meta title="Components/InfoBox" component="{InfoBox}" {...metaProps} />
-
 <Template let:args>
   <InfoBox {...args} />
 </Template>

package/dist/components/InfoBox/InfoBox.stories.svelte.d.ts

@@ -1,25 +1,33 @@
-/** @typedef {typeof __propDef.props}  InfoBoxProps */
-/** @typedef {typeof __propDef.events}  InfoBoxEvents */
-/** @typedef {typeof __propDef.slots}  InfoBoxSlots */
-export default class InfoBox extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type InfoBoxProps = typeof __propDef.props;
-export type InfoBoxEvents = typeof __propDef.events;
-export type InfoBoxSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    argTypes: {
+        theme: {
+            control: string;
+            options: string[];
+        };
+        width: {
+            control: string;
+            options: string[];
+        };
+    };
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof InfoBox;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type InfoBoxProps = typeof __propDef.props;
+export type InfoBoxEvents = typeof __propDef.events;
+export type InfoBoxSlots = typeof __propDef.slots;
+export default class InfoBox extends SvelteComponent<InfoBoxProps, InfoBoxEvents, InfoBoxSlots> {
+}
 export {};

package/dist/components/InfoBox/InfoBox.svelte

@@ -1,4 +1,4 @@
-<!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InfoBox--default) -->
+<!-- @component `InfoBox` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-infobox--docs) -->
 <script>export let title = null;
 export let text = "";
 export let notes = null;

package/dist/components/InfoBox/InfoBox.svelte.d.ts

@@ -41,7 +41,7 @@ declare const __propDef: {
 export type InfoBoxProps = typeof __propDef.props;
 export type InfoBoxEvents = typeof __propDef.events;
 export type InfoBoxSlots = typeof __propDef.slots;
-/** `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InfoBox--default) */
+/** `InfoBox` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-infobox--docs) */
 export default class InfoBox extends SvelteComponent<InfoBoxProps, InfoBoxEvents, InfoBoxSlots> {
 }
 export {};

package/dist/components/Markdown/Markdown.stories.svelte

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

package/dist/components/Markdown/Markdown.stories.svelte.d.ts

@@ -1,25 +1,23 @@
-/** @typedef {typeof __propDef.props}  MarkdownProps */
-/** @typedef {typeof __propDef.events}  MarkdownEvents */
-/** @typedef {typeof __propDef.slots}  MarkdownSlots */
-export default class Markdown extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type MarkdownProps = typeof __propDef.props;
-export type MarkdownEvents = typeof __propDef.events;
-export type MarkdownSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof Markdown;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type MarkdownProps = typeof __propDef.props;
+export type MarkdownEvents = typeof __propDef.events;
+export type MarkdownSlots = typeof __propDef.slots;
+export default class Markdown extends SvelteComponent<MarkdownProps, MarkdownEvents, MarkdownSlots> {
+}
 export {};

package/dist/components/Markdown/Markdown.svelte

@@ -1,4 +1,4 @@
-<!-- @component `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Markdown--default) -->
+<!-- @component `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-markdown--docs) -->
 <script>import { marked } from "marked";
 import { staticMarkdown } from "./stores";
 export let source = "";

package/dist/components/Markdown/Markdown.svelte.d.ts

@@ -14,7 +14,7 @@ declare const __propDef: {
 export type MarkdownProps = typeof __propDef.props;
 export type MarkdownEvents = typeof __propDef.events;
 export type MarkdownSlots = typeof __propDef.slots;
-/** `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Markdown--default) */
+/** `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-markdown--docs) */
 export default class Markdown extends SvelteComponent<MarkdownProps, MarkdownEvents, MarkdownSlots> {
 }
 export {};

package/dist/components/PaddingReset/PaddingReset.stories.svelte

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

package/dist/components/PaddingReset/PaddingReset.stories.svelte.d.ts

@@ -1,25 +1,23 @@
-/** @typedef {typeof __propDef.props}  PaddingResetProps */
-/** @typedef {typeof __propDef.events}  PaddingResetEvents */
-/** @typedef {typeof __propDef.slots}  PaddingResetSlots */
-export default class PaddingReset extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type PaddingResetProps = typeof __propDef.props;
-export type PaddingResetEvents = typeof __propDef.events;
-export type PaddingResetSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof PaddingReset;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type PaddingResetProps = typeof __propDef.props;
+export type PaddingResetEvents = typeof __propDef.events;
+export type PaddingResetSlots = typeof __propDef.slots;
+export default class PaddingReset extends SvelteComponent<PaddingResetProps, PaddingResetEvents, PaddingResetSlots> {
+}
 export {};

package/dist/components/PaddingReset/PaddingReset.svelte

@@ -1,3 +1,4 @@
+<!-- @component `PaddingReset` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-paddingreset--docs) -->
 <script>
   /**
    * If parent container is fluid, which resets the padding around contained elements.

package/dist/components/PaddingReset/PaddingReset.svelte.d.ts

@@ -1,6 +1,7 @@
 /** @typedef {typeof __propDef.props}  PaddingResetProps */
 /** @typedef {typeof __propDef.events}  PaddingResetEvents */
 /** @typedef {typeof __propDef.slots}  PaddingResetSlots */
+/** `PaddingReset` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-paddingreset--docs) */
 export default class PaddingReset extends SvelteComponent<{
     containerIsFluid?: boolean | undefined;
 }, {

package/dist/components/PhotoCarousel/PhotoCarousel.stories.svelte

@@ -1,36 +1,28 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import customDocs from './stories/docs/withCustom.md?raw';
-
-  import PhotoCarousel from './PhotoCarousel.svelte';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import customDocs from "./stories/docs/withCustom.md?raw";
+import PhotoCarousel from "./PhotoCarousel.svelte";
+import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Multimedia/PhotoCarousel",
+  component: PhotoCarousel,
+  ...withComponentDocs(componentDocs),
+  argTypes: {
+    width: {
+      control: "select",
+      options: ["normal", "wide", "wider", "widest", "fluid"]
+    }
+  }
+};
+</script>
 
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
 
   import photosJson from './stories/photos.json';
 
   const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
-
-  const metaProps = {
-    ...withComponentDocs(componentDocs),
-    argTypes: {
-      width: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
-      },
-    },
-  };
 </script>
 
-<Meta
-  title="Components/PhotoCarousel"
-  component="{PhotoCarousel}"
-  {...metaProps}
-/>
-
 <Template let:args>
   <PhotoCarousel {...args} />
 </Template>