@reuters-graphics/graphics-components 1.0.30 → 1.1.0

package/dist/{@types/components → components}/Framer/Typeahead/index.svelte.d.ts

@@ -1,28 +1,28 @@
 /** @typedef {typeof __propDef.props}  IndexProps */
 /** @typedef {typeof __propDef.events}  IndexEvents */
 /** @typedef {typeof __propDef.slots}  IndexSlots */
-export default class Index extends SvelteComponentTyped<{
+export default class Index extends SvelteComponent<{
     [x: string]: any;
-    value?: string;
+    value?: string | undefined;
     data?: {
         index: number;
         embed: string;
-    }[];
-    filter?: (item: {
+    }[] | undefined;
+    filter?: ((item: {
         index: number;
         embed: string;
-    }) => boolean;
-    extract?: (item: {
+    }) => boolean) | undefined;
+    id?: string | undefined;
+    extract?: ((item: {
         index: number;
         embed: string;
-    }) => any;
-    id?: string;
-    disable?: (item: {
+    }) => any) | undefined;
+    disable?: ((item: {
         index: number;
         embed: string;
-    }) => boolean;
-    autoselect?: boolean;
-    inputAfterSelect?: "update" | "clear" | "keep";
+    }) => boolean) | undefined;
+    autoselect?: boolean | undefined;
+    inputAfterSelect?: "update" | "clear" | "keep" | undefined;
     results?: {
         original: {
             index: number;
@@ -32,10 +32,10 @@ export default class Index extends SvelteComponentTyped<{
         score: number;
         string: string;
         disabled?: boolean;
-    }[];
-    focusAfterSelect?: boolean;
-    showDropdownOnFocus?: boolean;
-    limit?: number;
+    }[] | undefined;
+    focusAfterSelect?: boolean | undefined;
+    showDropdownOnFocus?: boolean | undefined;
+    limit?: number | undefined;
 }, {
     type: CustomEvent<string>;
     input: Event;
@@ -67,30 +67,30 @@ export default class Index extends SvelteComponentTyped<{
 export type IndexProps = typeof __propDef.props;
 export type IndexEvents = typeof __propDef.events;
 export type IndexSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: string;
+        value?: string | undefined;
         data?: {
             index: number;
             embed: string;
-        }[];
-        filter?: (item: {
+        }[] | undefined;
+        filter?: ((item: {
             index: number;
             embed: string;
-        }) => boolean;
-        extract?: (item: {
+        }) => boolean) | undefined;
+        id?: string | undefined;
+        extract?: ((item: {
             index: number;
             embed: string;
-        }) => any;
-        id?: string;
-        disable?: (item: {
+        }) => any) | undefined;
+        disable?: ((item: {
             index: number;
             embed: string;
-        }) => boolean;
-        autoselect?: boolean;
-        inputAfterSelect?: "update" | "clear" | "keep";
+        }) => boolean) | undefined;
+        autoselect?: boolean | undefined;
+        inputAfterSelect?: "update" | "clear" | "keep" | undefined;
         results?: {
             original: {
                 index: number;
@@ -100,10 +100,10 @@ declare const __propDef: {
             score: number;
             string: string;
             disabled?: boolean;
-        }[];
-        focusAfterSelect?: boolean;
-        showDropdownOnFocus?: boolean;
-        limit?: number;
+        }[] | undefined;
+        focusAfterSelect?: boolean | undefined;
+        showDropdownOnFocus?: boolean | undefined;
+        limit?: number | undefined;
     };
     events: {
         type: CustomEvent<string>;
@@ -133,5 +133,7 @@ declare const __propDef: {
             value: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/{@types/components → components}/Framer/stores.d.ts

@@ -1,2 +1 @@
-/// <reference types="svelte" />
 export const width: import("svelte/store").Writable<number>;

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

@@ -0,0 +1,11 @@
+An embed tool for development in the Graphics Kit.
+
+```svelte
+<script>
+  import { Framer } from '@reuters-graphics/graphics-components';
+
+  const embeds = ['/embeds/my-chart/index.html'];
+</script>
+
+<Framer embeds="{embeds}" />
+```

package/dist/components/GraphicBlock/AriaHidden.svelte

@@ -1,7 +1,4 @@
-<script>/**
- * Whether to wrap the graphic with an aria hidden tag.
- */
-export let hidden = false;
+<script>export let hidden = false;
 </script>
 
 {#if hidden}

package/dist/{@types/components → components}/GraphicBlock/AriaHidden.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -11,10 +11,12 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type AriaHiddenProps = typeof __propDef.props;
 export type AriaHiddenEvents = typeof __propDef.events;
 export type AriaHiddenSlots = typeof __propDef.slots;
-export default class AriaHidden extends SvelteComponentTyped<AriaHiddenProps, AriaHiddenEvents, AriaHiddenSlots> {
+export default class AriaHidden extends SvelteComponent<AriaHiddenProps, AriaHiddenEvents, AriaHiddenSlots> {
 }
 export {};

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

@@ -0,0 +1,122 @@
+<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';
+
+  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 = {
+    ...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">
+      <img src="{PlaceholderImg}" alt="placeholder" />
+    </div>
+  </GraphicBlock>
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    width: 'normal',
+    title: 'Bacon ipsum dolor amet t-bone',
+    description:
+      'Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta.',
+    notes:
+      'Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)',
+  }}"
+/>
+
+<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
+  <GraphicBlock
+    width="normal"
+    title="Earthquake in Haiti"
+    description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+    notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+  >
+    <AiMap />
+  </GraphicBlock>
+</Story>
+
+<Story name="Custom text" {...withStoryDocs(customTextDocs)}>
+  <GraphicBlock width="normal">
+    <div slot="title">
+      <h5>My smaller title</h5>
+    </div>
+    <div class="demo-graphic">
+      <img src="{PlaceholderImg}" alt="placeholder" />
+    </div>
+    <aside slot="notes">
+      <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
+    </aside>
+  </GraphicBlock>
+</Story>
+
+<Story name="Ai2svelte" {...withStoryDocs(ai2svelteDocs)}>
+  <GraphicBlock
+    width="normal"
+    title="Earthquake in Haiti"
+    description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+    notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+  >
+    <AiMap />
+  </GraphicBlock>
+</Story>
+
+<Story name="ARIA" {...withStoryDocs(ariaDocs)}>
+  <GraphicBlock
+    width="normal"
+    title="Earthquake in Haiti"
+    description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+    notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+    ariaDescription="A map showing the shake intensity produced by the earthquake."
+  >
+    <AiMap />
+  </GraphicBlock>
+</Story>
+
+<style>div.demo-graphic {
+  height: 400px;
+  background-color: #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+div.demo-graphic img {
+  opacity: 0.4;
+}</style>

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

@@ -0,0 +1,25 @@
+/** @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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -1,74 +1,24 @@
 <!-- @component `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-GraphicBlock--default) -->
-<script>/**
- * Width of the component within the text well.
- * @type {string}
- */
-export let width = 'normal';
-/**
- * Add an id to the block tag to target it with custom CSS.
- * @type {string}
- */
-export let id = '';
-/**
- * Add extra classes to the block tag to target it with custom CSS.
- * @type {string}
- */
-let cls = '';
+<script>export let width = "normal";
+export let id = "";
+let cls = "";
 export { cls as class };
-/** Snap block to column widths, rather than fluidly resizing them. */
 export let snap = false;
-/**
- * ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block
- * @type {string}
- */
 export let role = null;
-/**
- * Notes to the graphic, passed in as a markdown string.
- * @type {string}
- */
 export let notes = null;
-/**
- * Set a different width for the text within the text well, for example,
- * "normal" to keep the title, description and notes inline with the rest
- * of the text well. Can't ever be wider than `width`.
- * @type {string}
- */
-export let textWidth = 'normal';
-/**
- * Title of the graphic
- * @type {string}
- */
+export let textWidth = "normal";
 export let title = null;
-/**
- * Description of the graphic, passed in as a markdown string.
- * @type {string}
- */
 export let description = null;
-/**
- * ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block
- * @type {string}
- */
-export let ariaLabel = 'chart';
-/**
- * ARIA description, passed in as a markdown string.
- * @type {string}
- */
+export let ariaLabel = "chart";
 export let ariaDescription = null;
-import AriaHidden from './AriaHidden.svelte';
-import TextBlock from './TextBlock.svelte';
-import Block from '../Block/Block.svelte';
-import PaddingReset from '../PaddingReset/PaddingReset.svelte';
-import Markdown from '../Markdown/Markdown.svelte';
+import AriaHidden from "./AriaHidden.svelte";
+import TextBlock from "./TextBlock.svelte";
+import Block from "../Block/Block.svelte";
+import PaddingReset from "../PaddingReset/PaddingReset.svelte";
+import Markdown from "../Markdown/Markdown.svelte";
 </script>
 
-<Block
-  id="{id}"
-  snap="{snap}"
-  role="{role}"
-  width="{width}"
-  ariaLabel="{ariaLabel}"
-  class="graphic fmy-6 {cls}"
->
+<Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
   {#if $$slots.title}
     <PaddingReset containerIsFluid="{width === 'fluid'}">
       <TextBlock width="{textWidth}">
@@ -126,7 +76,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
 */
 /* Scales by 1.125 */
-:global(.article-block.graphic) :global(p) {
+.article-block.graphic p {
   margin-top: 0;
   margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   font-family: var(--theme-font-family-note);
@@ -135,7 +85,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   line-height: 1.3;
   font-weight: 300;
 }
-:global(.article-block.graphic) :global(aside) :global(p) {
+.article-block.graphic aside p {
   font-family: var(--theme-font-family-note);
   color: var(--theme-colour-text-secondary);
   font-size: var(--theme-font-size-xs);

package/dist/{@types/components → components}/GraphicBlock/GraphicBlock.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { ContainerWidth } from '../@types/global';
 declare const __propDef: {
     props: {
@@ -55,11 +55,13 @@ declare const __propDef: {
         aria: {};
         notes: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 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) */
-export default class GraphicBlock extends SvelteComponentTyped<GraphicBlockProps, GraphicBlockEvents, GraphicBlockSlots> {
+export default class GraphicBlock extends SvelteComponent<GraphicBlockProps, GraphicBlockEvents, GraphicBlockSlots> {
 }
 export {};

package/dist/components/GraphicBlock/TextBlock.svelte

@@ -1,10 +1,9 @@
-<script>/** Width of the component within the text well. */
-export let width = null;
-import Block from '../Block/Block.svelte';
+<script>export let width = null;
+import Block from "../Block/Block.svelte";
 </script>
 
 {#if width}
-  <Block width="{width}" class="notes fmy-0">
+  <Block {width} class="notes fmy-0">
     <slot />
   </Block>
 {:else}

package/dist/{@types/components → components}/GraphicBlock/TextBlock.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { ContainerWidth } from '../@types/global';
 declare const __propDef: {
     props: {
@@ -10,10 +10,12 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TextBlockProps = typeof __propDef.props;
 export type TextBlockEvents = typeof __propDef.events;
 export type TextBlockSlots = typeof __propDef.slots;
-export default class TextBlock extends SvelteComponentTyped<TextBlockProps, TextBlockEvents, TextBlockSlots> {
+export default class TextBlock extends SvelteComponent<TextBlockProps, TextBlockEvents, TextBlockSlots> {
 }
 export {};