@reuters-graphics/graphics-components 1.1.6 → 2.0.0

package/dist/components/EndNotes/EndNotes.stories.svelte

@@ -1,37 +1,34 @@
-<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 EndNotes from "./EndNotes.svelte";
+import componentDocs from "./stories/docs/component.md?raw";
+import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Text elements/EndNotes",
+  component: EndNotes,
+  ...withComponentDocs(componentDocs)
+};
+</script>
 
-  import EndNotes from './EndNotes.svelte';
-  import { getEndNotesPropsFromDoc } from './docProps';
-  import { withComponentDocs } from '../../lib/docs/utils/withParams.js';
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
 
   const notes = [
     {
-      Title: 'Note',
-      Text: 'Data is current as of today.',
+      title: 'Note',
+      text: 'Data is current as of today.',
     },
     {
-      Title: 'Sources',
-      Text: 'Data, Inc.',
+      title: 'Sources',
+      text: 'Data, Inc.',
     },
     {
-      Title: 'Edited by',
-      Text: '<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor',
+      title: 'Edited by',
+      text: '<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor',
     },
   ];
 </script>
 
-<Meta
-  title="Components/EndNotes"
-  component="{EndNotes}"
-  {...withComponentDocs(componentDocs)}
-/>
-
 <Template let:args>
   <EndNotes {...args} />
 </Template>
 
-<Story name="Default" args="{{ notes: getEndNotesPropsFromDoc(notes) }}" />
+<Story name="Default" args="{{ notes }}" />

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

@@ -1,25 +1,23 @@
-/** @typedef {typeof __propDef.props}  EndNotesProps */
-/** @typedef {typeof __propDef.events}  EndNotesEvents */
-/** @typedef {typeof __propDef.slots}  EndNotesSlots */
-export default class EndNotes extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type EndNotesProps = typeof __propDef.props;
-export type EndNotesEvents = typeof __propDef.events;
-export type EndNotesSlots = 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 EndNotes;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type EndNotesProps = typeof __propDef.props;
+export type EndNotesEvents = typeof __propDef.events;
+export type EndNotesSlots = typeof __propDef.slots;
+export default class EndNotes extends SvelteComponent<EndNotesProps, EndNotesEvents, EndNotesSlots> {
+}
 export {};

package/dist/components/EndNotes/EndNotes.svelte

@@ -1,4 +1,4 @@
-<!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-EndNotes--default) -->
+<!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-endnotes--docs) -->
 <script>export let notes = [];
 import Block from "../Block/Block.svelte";
 import Markdown from "../Markdown/Markdown.svelte";
@@ -40,6 +40,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   margin-bottom: 0.125rem;
   text-transform: none;
 }
+
 .note-content :global(p) {
   font-family: var(--theme-font-family-note);
   color: var(--theme-colour-text-secondary);

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

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

package/dist/components/FeaturePhoto/FeaturePhoto.stories.svelte

@@ -1,44 +1,35 @@
-<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 quickitDocs from './stories/docs/quickit.md?raw';
-  // @ts-ignore raw
-  import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import archieMLDocs from "./stories/docs/archieML.md?raw";
+import missingAltTextDocs from "./stories/docs/missingAltText.md?raw";
+import FeaturePhoto from "./FeaturePhoto.svelte";
+import {
+  withComponentDocs,
+  withStoryDocs
+} from "../../lib/docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Multimedia/FeaturePhoto",
+  component: FeaturePhoto,
+  ...withComponentDocs(componentDocs),
+  argTypes: {
+    width: {
+      control: "select",
+      options: ["normal", "wide", "wider", "widest", "fluid"]
+    },
+    textWidth: {
+      control: "select",
+      options: ["normal", "wide", "wider", "widest", "fluid"]
+    }
+  }
+};
+</script>
 
-  import FeaturePhoto from './FeaturePhoto.svelte';
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
 
   // @ts-ignore jpg
   import sharkSrc from './stories/shark.jpg';
-
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '../../lib/docs/utils/withParams.js';
-
-  const metaProps = {
-    ...withComponentDocs(componentDocs),
-    argTypes: {
-      width: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
-      },
-      textWidth: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
-      },
-    },
-  };
 </script>
 
-<Meta
-  title="Components/FeaturePhoto"
-  component="{FeaturePhoto}"
-  {...metaProps}
-/>
-
 <Template let:args>
   <FeaturePhoto {...args} />
 </Template>
@@ -54,14 +45,14 @@
 />
 
 <Story
-  name="🚀 QUICKIT"
+  name="ArchieML"
   args="{{
     src: sharkSrc,
     altText: 'A shark!',
     width: 'normal',
     caption: 'Carcharodon carcharias - REUTERS',
   }}"
-  {...withStoryDocs(quickitDocs)}
+  {...withStoryDocs(archieMLDocs)}
 />
 
 <Story

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

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

package/dist/components/FeaturePhoto/FeaturePhoto.svelte

@@ -1,4 +1,4 @@
-<!-- @component `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-FeaturePhoto--default) -->
+<!-- @component `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-featurephoto--docs) -->
 <script>import { onMount } from "svelte";
 import Block from "../Block/Block.svelte";
 import PaddingReset from "../PaddingReset/PaddingReset.svelte";

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

@@ -54,7 +54,7 @@ declare const __propDef: {
 export type FeaturePhotoProps = typeof __propDef.props;
 export type FeaturePhotoEvents = typeof __propDef.events;
 export type FeaturePhotoSlots = typeof __propDef.slots;
-/** `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-FeaturePhoto--default) */
+/** `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-featurephoto--docs) */
 export default class FeaturePhoto extends SvelteComponent<FeaturePhotoProps, FeaturePhotoEvents, FeaturePhotoSlots> {
 }
 export {};

package/dist/components/Framer/Framer.stories.svelte

@@ -1,19 +1,16 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
-  import Framer from './Framer.svelte';
-
-  import { withComponentDocs } from '../../lib/docs/utils/withParams.js';
+<script context="module">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/Utilities/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} />

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

@@ -1,25 +1,23 @@
-/** @typedef {typeof __propDef.props}  FramerProps */
-/** @typedef {typeof __propDef.events}  FramerEvents */
-/** @typedef {typeof __propDef.slots}  FramerSlots */
-export default class Framer extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FramerProps = typeof __propDef.props;
-export type FramerEvents = typeof __propDef.events;
-export type FramerSlots = 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 Framer;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type FramerProps = typeof __propDef.props;
+export type FramerEvents = typeof __propDef.events;
+export type FramerSlots = typeof __propDef.slots;
+export default class Framer extends SvelteComponent<FramerProps, FramerEvents, FramerSlots> {
+}
 export {};

package/dist/components/Framer/Typeahead/index.svelte

@@ -281,6 +281,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 [data-svelte-typeahead] {
   position: relative;
 }
+
 ul {
   position: absolute;
   top: 100%;
@@ -291,23 +292,27 @@ ul {
   list-style: none;
   background-color: #fff;
 }
+
 [aria-expanded=true] ul {
   z-index: 1;
   border: 1px solid #ddd;
   max-height: 50vh;
   overflow-y: scroll;
 }
+
 li,
 li.no-results {
   padding: 0.25rem 1rem;
   font-family: var(--theme-font-family-sans-serif);
   color: #333;
 }
+
 li.no-results {
   color: #333;
   font-size: 0.85rem;
   font-style: italic;
 }
+
 li {
   cursor: pointer;
 }
@@ -315,22 +320,28 @@ li :global(mark) {
   padding: 0;
   background-color: #ffff9a;
 }
+
 li:not(:last-of-type) {
   border-bottom: 1px solid #e0e0e0;
 }
+
 li:hover {
   background-color: #efefef;
 }
+
 .selected {
   background-color: #efefef;
 }
+
 .selected:hover {
   background-color: #e5e5e5;
 }
+
 .disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
+
 :global([data-svelte-search] label) {
   margin-bottom: 0.25rem;
   display: inline-flex;
@@ -338,6 +349,7 @@ li:hover {
   color: #aaa;
   font-family: var(--theme-font-family-sans-serif);
 }
+
 :global([data-svelte-search] input) {
   width: 100%;
   padding: 0.5rem 0.75rem;
@@ -349,6 +361,7 @@ li:hover {
   border: 1px solid #ddd;
   font-family: var(--theme-font-family-sans-serif);
 }
+
 :global([data-svelte-search] input:focus) {
   outline: none;
   border: 1px solid #ccc;

package/dist/components/GraphicBlock/GraphicBlock.stories.svelte

@@ -1,47 +1,36 @@
-<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 quickitDocs from './stories/docs/quickit.md?raw';
-  // @ts-ignore raw
-  import customTextDocs from './stories/docs/customText.md?raw';
-  // @ts-ignore raw
-  import ai2svelteDocs from './stories/docs/ai2svelte.md?raw';
-  // @ts-ignore raw
-  import ariaDocs from './stories/docs/aria.md?raw';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import archieMLDocs from "./stories/docs/archieML.md?raw";
+import customTextDocs from "./stories/docs/customText.md?raw";
+import ai2svelteDocs from "./stories/docs/ai2svelte.md?raw";
+import ariaDocs from "./stories/docs/aria.md?raw";
+import GraphicBlock from "./GraphicBlock.svelte";
+import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Graphics/GraphicBlock",
+  component: GraphicBlock,
+  ...withComponentDocs(componentDocs),
+  argTypes: {
+    width: {
+      control: "select",
+      options: ["normal", "wide", "wider", "widest", "fluid"]
+    },
+    textWidth: {
+      control: "select",
+      options: ["normal", "wide", "wider", "widest", "fluid"]
+    }
+  }
+};
+</script>
 
-  import GraphicBlock from './GraphicBlock.svelte';
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
 
   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 = {
-    ...withComponentDocs(componentDocs),
-    argTypes: {
-      width: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
-      },
-      textWidth: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
-      },
-    },
-  };
 </script>
 
-<Meta
-  title="Components/GraphicBlock"
-  component="{GraphicBlock}"
-  {...metaProps}
-/>
-
 <Template let:args>
   <GraphicBlock {...args}>
     <div class="demo-graphic">
@@ -62,7 +51,7 @@
   }}"
 />
 
-<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
+<Story name="ArchieML" {...withStoryDocs(archieMLDocs)}>
   <GraphicBlock
     width="normal"
     title="Earthquake in Haiti"

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

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

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -1,4 +1,4 @@
-<!-- @component `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-GraphicBlock--default) -->
+<!-- @component `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-graphicblock--docs) -->
 <script>export let width = "normal";
 export let id = "";
 let cls = "";

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

@@ -61,7 +61,7 @@ declare const __propDef: {
 export type GraphicBlockProps = typeof __propDef.props;
 export type GraphicBlockEvents = typeof __propDef.events;
 export type GraphicBlockSlots = typeof __propDef.slots;
-/** `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-GraphicBlock--default) */
+/** `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-graphicblock--docs) */
 export default class GraphicBlock extends SvelteComponent<GraphicBlockProps, GraphicBlockEvents, GraphicBlockSlots> {
 }
 export {};

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

@@ -1,48 +1,39 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import withBylineDocs from "./stories/docs/withByline.md?raw";
+import withDekDocs from "./stories/docs/withDek.md?raw";
+import customHedDocs from "./stories/docs/customHed.md?raw";
+import withCrownImgDocs from "./stories/docs/withCrownImage.md?raw";
+import withCrownGraphicDocs from "./stories/docs/withCrownGraphic.md?raw";
+import Headline from "./Headline.svelte";
+import {
+  withComponentDocs,
+  withStoryDocs
+} from "../../lib/docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Text elements/Headline",
+  component: Headline,
+  ...withComponentDocs(componentDocs),
+  argTypes: {
+    hedSize: {
+      control: "select",
+      options: ["small", "normal", "big", "bigger", "biggest"]
+    },
+    width: {
+      control: "select",
+      options: ["normal", "wide", "wider", "widest"]
+    }
+  }
+};
+</script>
 
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import withBylineDocs from './stories/docs/withByline.md?raw';
-  // @ts-ignore raw
-  import withDekDocs from './stories/docs/withDek.md?raw';
-  // @ts-ignore raw
-  import customHedDocs from './stories/docs/customHed.md?raw';
-  // @ts-ignore raw
-  import withCrownImgDocs from './stories/docs/withCrownImage.md?raw';
-  // @ts-ignore raw
-  import withCrownGraphicDocs from './stories/docs/withCrownGraphic.md?raw';
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
 
   // @ts-ignore img
   import crownImgSrc from './stories/crown.png';
   import Map from './stories/graphic.svelte';
-
-  import Headline from './Headline.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'],
-      },
-      width: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest'],
-      },
-    },
-  };
 </script>
 
-<Meta title="Components/Headline" component="{Headline}" {...metaProps} />
-
 <Template let:args>
   <Headline {...args} />
 </Template>