@reuters-graphics/graphics-components 1.1.6 → 2.0.0

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

@@ -1,25 +1,31 @@
-/** @typedef {typeof __propDef.props}  ReutersLogoProps */
-/** @typedef {typeof __propDef.events}  ReutersLogoEvents */
-/** @typedef {typeof __propDef.slots}  ReutersLogoSlots */
-export default class ReutersLogo extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ReutersLogoProps = typeof __propDef.props;
-export type ReutersLogoEvents = typeof __propDef.events;
-export type ReutersLogoSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    argTypes: {
+        logoColour: {
+            control: string;
+        };
+        textColour: {
+            control: string;
+        };
+    };
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof ReutersLogo;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type ReutersLogoProps = typeof __propDef.props;
+export type ReutersLogoEvents = typeof __propDef.events;
+export type ReutersLogoSlots = typeof __propDef.slots;
+export default class ReutersLogo extends SvelteComponent<ReutersLogoProps, ReutersLogoEvents, ReutersLogoSlots> {
+}
 export {};

package/dist/components/ReutersLogo/ReutersLogo.svelte

@@ -1,6 +1,6 @@
-<!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReutersLogo--default) -->
-<script>export let logoColour = "#FA6400";
-export let textColour = "#404040";
+<!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) -->
+<script>export let logoColour = "#D64000";
+export let textColour = "#212223";
 export let width = "100%";
 </script>
 

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

@@ -15,7 +15,7 @@ declare const __propDef: {
 export type ReutersLogoProps = typeof __propDef.props;
 export type ReutersLogoEvents = typeof __propDef.events;
 export type ReutersLogoSlots = typeof __propDef.slots;
-/** `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReutersLogo--default) */
+/** `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) */
 export default class ReutersLogo extends SvelteComponent<ReutersLogoProps, ReutersLogoEvents, ReutersLogoSlots> {
 }
 export {};

package/dist/components/ReutersLogo/stories/docs/component.md

@@ -1,4 +1,4 @@
-The official home of the Reuters logo.
+The official Reuters logo.
 
 ```svelte
 <script>

package/dist/components/SEO/SEO.stories.svelte

@@ -1,24 +1,20 @@
-<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';
-
-  import SEO from './SEO.svelte';
-
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '../../lib/docs/utils/withParams.js';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import archieMLDocs from "./stories/docs/archieML.md?raw";
+import SEO from "./SEO.svelte";
+import {
+  withComponentDocs,
+  withStoryDocs
+} from "../../lib/docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Ads & analytics/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} />
@@ -35,11 +31,11 @@
 />
 
 <Story
-  name="🚀 QUICKIT"
+  name="ArchieML"
   args="{{
     baseUrl: 'https://graphics.reuters.com',
     pageUrl: new URL('https://graphics.reuters.com/hello-world/'),
     publishTime: new Date('2020-09-15').toISOString(),
   }}"
-  {...withStoryDocs(quickitDocs)}
+  {...withStoryDocs(archieMLDocs)}
 />

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

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

package/dist/components/SEO/SEO.svelte

@@ -1,4 +1,4 @@
-<!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SEO--default) -->
+<!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) -->
 <script>export let baseUrl = "";
 export let pageUrl = null;
 export let seoTitle;

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

@@ -66,7 +66,7 @@ declare const __propDef: {
 export type SeoProps = typeof __propDef.props;
 export type SeoEvents = typeof __propDef.events;
 export type SeoSlots = typeof __propDef.slots;
-/** `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SEO--default) */
+/** `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) */
 export default class Seo extends SvelteComponent<SeoProps, SeoEvents, SeoSlots> {
 }
 export {};

package/dist/components/Scroller/Scroller.stories.svelte

@@ -1,16 +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 interactiveDocs from './stories/docs/interactive.md?raw';
-  // @ts-ignore raw
-  import ai2svelteDocs from './stories/docs/ai2svelte.md?raw';
-  // @ts-ignore raw
-  import quickitDocs from './stories/docs/quickit.md?raw';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import interactiveDocs from "./stories/docs/interactive.md?raw";
+import ai2svelteDocs from "./stories/docs/ai2svelte.md?raw";
+import archieMLDocs from "./stories/docs/archieML.md?raw";
+import Scroller from "./Scroller.svelte";
+import {
+  withComponentDocs,
+  withStoryDocs
+} from "../../lib/docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Graphics/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>
 
-  import Scroller from './Scroller.svelte';
+<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';
@@ -18,13 +38,6 @@
   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 = {
     AiMap1,
     AiMap2,
@@ -32,53 +45,32 @@
   };
 
   const docBlock = {
-    Type: 'scroller',
-    Width: 'fluid',
-    ForegroundPosition: 'middle',
-    ID: 'my-scroller',
-    StackBackground: 'true',
-    Steps: [
+    type: 'scroller',
+    width: 'fluid',
+    foregroundPosition: 'middle',
+    id: 'my-scroller',
+    stackBackground: true,
+    steps: [
       {
-        Background: 'AiMap1',
-        Text: '#### Step 1\n\nLorem ipsum',
-        AltText: 'A map showing the Upper West side in New York City.',
+        background: aiCharts.AiMap1,
+        text: '#### Step 1\n\nLorem ipsum',
+        altText: 'A map showing the Upper West side in New York City.',
       },
       {
-        Background: 'AiMap2',
-        Text: '#### Step 2\n\nLorem ipsum',
-        AltText: 'The same map now highlights 98th Street.',
+        background: aiCharts.AiMap2,
+        text: '#### Step 2\n\nLorem ipsum',
+        altText: 'The same map now highlights 98th Street.',
       },
       {
-        Background: 'AiMap3',
-        Text: '#### Step 3\n\nLorem ipsum',
-        AltText:
+        background: aiCharts.AiMap3,
+        text: '#### Step 3\n\nLorem ipsum',
+        altText:
           'The same map now highlights three locations near 98th Street where something particulary important happened.',
       },
     ],
   };
-
-  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>
@@ -113,11 +105,7 @@
   }}"
 />
 
-<Story
-  name="🚀 QUICKIT"
-  args="{getScrollerPropsFromDoc(docBlock, aiCharts)}"
-  {...withStoryDocs(quickitDocs)}
-/>
+<Story name="ArchieML" args="{docBlock}" {...withStoryDocs(archieMLDocs)} />
 
 <Story
   name="Foreground components"

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

@@ -1,25 +1,40 @@
-/** @typedef {typeof __propDef.props}  ScrollerProps */
-/** @typedef {typeof __propDef.events}  ScrollerEvents */
-/** @typedef {typeof __propDef.slots}  ScrollerSlots */
-export default class Scroller extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ScrollerProps = typeof __propDef.props;
-export type ScrollerEvents = typeof __propDef.events;
-export type ScrollerSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    argTypes: {
+        steps: {
+            control: boolean;
+        };
+        backgroundWidth: {
+            control: string;
+            options: string[];
+        };
+        foregroundPosition: {
+            control: string;
+            options: string[];
+        };
+        embeddedLayout: {
+            control: string;
+            options: string[];
+        };
+    };
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof Scroller;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type ScrollerProps = typeof __propDef.props;
+export type ScrollerEvents = typeof __propDef.events;
+export type ScrollerSlots = typeof __propDef.slots;
+export default class Scroller extends SvelteComponent<ScrollerProps, ScrollerEvents, ScrollerSlots> {
+}
 export {};

package/dist/components/Scroller/Scroller.svelte

@@ -1,4 +1,4 @@
-<!-- @component `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Scroller--default) -->
+<!-- @component `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-scroller--docs) -->
 <script>export let id = "";
 export let steps = [];
 export let backgroundWidth = "fluid";

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

@@ -78,7 +78,7 @@ declare const __propDef: {
 export type ScrollerProps = typeof __propDef.props;
 export type ScrollerEvents = typeof __propDef.events;
 export type ScrollerSlots = typeof __propDef.slots;
-/** `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Scroller--default) */
+/** `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-scroller--docs) */
 export default class Scroller extends SvelteComponent<ScrollerProps, ScrollerEvents, ScrollerSlots> {
 }
 export {};

package/dist/components/Scroller/stories/docs/ai2svelte.md

@@ -41,7 +41,7 @@ A more detailed example of using `Scroller` with graphics created by [ai2svelte]
 />
 ```
 
-When working with a Google doc, here's an example of how you can tie your text into your steps.
+When working with a ArchieML doc, here's an example of how you can tie your text into your steps.
 
 ```yaml
 # Google doc block

package/dist/components/SearchInput/SearchInput.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 SearchInput from './SearchInput.svelte';
-
-  import { withComponentDocs } from '$docs/utils/withParams.js';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import SearchInput from "./SearchInput.svelte";
+import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Controls/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} />

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

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

package/dist/components/SearchInput/SearchInput.svelte

@@ -1,4 +1,4 @@
-<!-- @component `SearchInput` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SearchInput--default) -->
+<!-- @component `SearchInput` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-controls-searchinput--docs) -->
 <script>import { createEventDispatcher } from "svelte";
 import MagnifyingGlass from "./MagnifyingGlass.svelte";
 import X from "./X.svelte";

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

@@ -18,7 +18,7 @@ declare const __propDef: {
 export type SearchInputProps = typeof __propDef.props;
 export type SearchInputEvents = typeof __propDef.events;
 export type SearchInputSlots = typeof __propDef.slots;
-/** `SearchInput` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SearchInput--default) */
+/** `SearchInput` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-controls-searchinput--docs) */
 export default class SearchInput extends SvelteComponent<SearchInputProps, SearchInputEvents, SearchInputSlots> {
 }
 export {};

package/dist/components/SimpleTimeline/SimpleTimeline.stories.svelte

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

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

@@ -1,25 +1,31 @@
-/** @typedef {typeof __propDef.props}  SimpleTimelineProps */
-/** @typedef {typeof __propDef.events}  SimpleTimelineEvents */
-/** @typedef {typeof __propDef.slots}  SimpleTimelineSlots */
-export default class SimpleTimeline extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SimpleTimelineProps = typeof __propDef.props;
-export type SimpleTimelineEvents = typeof __propDef.events;
-export type SimpleTimelineSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    argTypes: {
+        symbolColour: {
+            control: string;
+        };
+        dateColour: {
+            control: string;
+        };
+    };
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof SimpleTimeline;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type SimpleTimelineProps = typeof __propDef.props;
+export type SimpleTimelineEvents = typeof __propDef.events;
+export type SimpleTimelineSlots = typeof __propDef.slots;
+export default class SimpleTimeline extends SvelteComponent<SimpleTimelineProps, SimpleTimelineEvents, SimpleTimelineSlots> {
+}
 export {};

package/dist/components/SimpleTimeline/SimpleTimeline.svelte

@@ -1,4 +1,4 @@
-<!-- @component `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SimpleTimeline--default) -->
+<!-- @component `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-simpletimeline--docs) -->
 <script>export let dates;
 export let symbolColour = "var(--theme-colour-brand-rules)";
 export let dateColour = "var(--theme-colour-accent, red)";

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

@@ -39,7 +39,7 @@ declare const __propDef: {
 export type SimpleTimelineProps = typeof __propDef.props;
 export type SimpleTimelineEvents = typeof __propDef.events;
 export type SimpleTimelineSlots = typeof __propDef.slots;
-/** `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SimpleTimeline--default) */
+/** `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-simpletimeline--docs) */
 export default class SimpleTimeline extends SvelteComponent<SimpleTimelineProps, SimpleTimelineEvents, SimpleTimelineSlots> {
 }
 export {};