@reuters-graphics/graphics-components 1.0.30 → 1.1.1

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

@@ -0,0 +1,75 @@
+<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';
+
+  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 = {
+    ...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>
+
+<Story
+  name="Default"
+  args="{{
+    src: sharkSrc,
+    altText: 'A shark!',
+    width: 'normal',
+    caption: 'Carcharodon carcharias - REUTERS',
+  }}"
+/>
+
+<Story
+  name="🚀 QUICKIT"
+  args="{{
+    src: sharkSrc,
+    altText: 'A shark!',
+    width: 'normal',
+    caption: 'Carcharodon carcharias - REUTERS',
+  }}"
+  {...withStoryDocs(quickitDocs)}
+/>
+
+<Story
+  name="Missing altText"
+  args="{{
+    src: sharkSrc,
+    width: 'normal',
+    caption: 'Carcharodon carcharias - REUTERS',
+  }}"
+  {...withStoryDocs(missingAltTextDocs)}
+/>

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

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

package/dist/components/FeaturePhoto/FeaturePhoto.svelte

@@ -1,92 +1,53 @@
 <!-- @component `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-FeaturePhoto--default) -->
-<script>import { onMount } from 'svelte';
-import Block from '../Block/Block.svelte';
-import PaddingReset from '../PaddingReset/PaddingReset.svelte';
-/**
- * Photo src
- * @type {string}
- * @required
- */
+<script>import { onMount } from "svelte";
+import Block from "../Block/Block.svelte";
+import PaddingReset from "../PaddingReset/PaddingReset.svelte";
 export let src;
-/**
- * Photo altText
- * @type {string}
- * @required
- */
 export let altText;
-/**
- * Add an id to target with custom CSS.
- * @type {string}
- */
-export let id = '';
-/**
- * Add extra classes to target with custom CSS.
- * @type {string}
- */
-let cls = '';
+export let id = "";
+let cls = "";
 export { cls as class };
-/**
- * Caption below the photo
- * @type {string}
- */
 export let caption;
-/**
- * Height of the photo placeholder when lazy-loading
- */
 export let height = 100;
-/**
- * Width of the container, one of: normal, wide, wider, widest or fluid
- */
-export let width = 'normal';
-/**
- * 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';
-/**
- * Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
- */
+export let width = "normal";
+export let textWidth = "normal";
 export let lazy = false;
-/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading. */
 export let top = 0;
-/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading. */
 export let bottom = 0;
-/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` when lazy loading. */
 export let left = 0;
-/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` when lazy loading. */
 export let right = 0;
 let intersecting = false;
 let container;
-const intersectable = typeof IntersectionObserver !== 'undefined';
+const intersectable = typeof IntersectionObserver !== "undefined";
 onMount(() => {
-    if (!lazy)
-        return;
-    if (intersectable) {
-        const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
-        const observer = new IntersectionObserver((entries) => {
-            intersecting = entries[0].isIntersecting;
-            if (intersecting) {
-                observer.unobserve(container);
-            }
-        }, {
-            rootMargin,
-        });
-        observer.observe(container);
-        return () => observer.unobserve(container);
-    }
+  if (!lazy) return;
+  if (intersectable) {
+    const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        intersecting = entries[0].isIntersecting;
+        if (intersecting) {
+          observer.unobserve(container);
+        }
+      },
+      {
+        rootMargin
+      }
+    );
+    observer.observe(container);
+    return () => observer.unobserve(container);
+  }
 });
 </script>
 
-<Block width="{width}" class="photo fmy-6 {cls}" id="{id}">
+<Block {width} class="photo fmy-6 {cls}" {id}>
   <figure
     bind:this="{container}"
     aria-label="media"
     class="w-full flex flex-col relative"
   >
     {#if !lazy || (intersectable && intersecting)}
-      <img class="w-full my-0" src="{src}" alt="{altText}" />
+      <img class="w-full my-0" {src} alt="{altText}" />
     {:else}
       <div class="placeholder w-full" style="{`height: ${height}px;`}"></div>
     {/if}

package/dist/{@types/components → components}/FeaturePhoto/FeaturePhoto.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: {
@@ -48,11 +48,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 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) */
-export default class FeaturePhoto extends SvelteComponentTyped<FeaturePhotoProps, FeaturePhotoEvents, FeaturePhotoSlots> {
+export default class FeaturePhoto extends SvelteComponent<FeaturePhotoProps, FeaturePhotoEvents, FeaturePhotoSlots> {
 }
 export {};

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

@@ -0,0 +1,16 @@
+A full-width photo inside the text well.
+
+```svelte
+<script>
+  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+</script>
+
+<FeaturePhoto
+  src="{`${assets}/images/myImage.jpg`}"
+  altText="Some alt text"
+  caption="A caption"
+  lazy="{false}"
+  width="normal"
+/>
+```

package/dist/components/FeaturePhoto/stories/docs/missingAltText.md

@@ -0,0 +1 @@
+If your photo is missing `altText` a small warning will overlay the image.

package/dist/components/FeaturePhoto/stories/docs/quickit.md

@@ -0,0 +1,38 @@
+An example of using `FeaturePhoto` in the Graphics Kit with a Google Doc.
+
+```yaml
+# Google doc block
+Type: photo
+Width: normal
+Src: images/shark.jpg
+AltText: The king of the sea
+Caption: Carcharodon carcharias - REUTERS
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  // Add FeaturePhoto to imports from graphics-components
+  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
+
+  // These should be already imported for you.
+  import content from '$locales/en/content.json';
+  import { assets } from '$app/paths';
+</script>
+
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+    <!-- ... other blocks -->
+
+    <!-- Copy/paste into your blocks loop! -->
+  {:else if block.Type === 'photo'}
+    <FeaturePhoto
+      width="{block.Width}"
+      src="{`${assets}/${block.Src}`}"
+      altText="{block.AltText}"
+      caption="{block.Caption}"
+    />
+    <!-- END copy/paste -->
+  {/if}
+{/each}
+```

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

@@ -0,0 +1,29 @@
+<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>
+
+<Meta
+  title="Components/Framer"
+  component="{Framer}"
+  {...withComponentDocs(componentDocs)}
+/>
+
+<Template let:args>
+  <Framer {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    embeds: [
+      'https://graphics.reuters.com/USA-CONGRESS/FUNDRAISING/zjvqkawjlvx/embeds/en/embed/?zzz',
+    ],
+  }}"
+/>

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

@@ -1,11 +1,8 @@
 /** @typedef {typeof __propDef.props}  FramerProps */
 /** @typedef {typeof __propDef.events}  FramerEvents */
 /** @typedef {typeof __propDef.slots}  FramerSlots */
-export default class Framer extends SvelteComponentTyped<{
-    embeds: any;
-    breakpoints?: number[];
-    maxFrameWidth?: number;
-    minFrameWidth?: number;
+export default class Framer extends SvelteComponent<{
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,17 +10,16 @@ export default class Framer extends SvelteComponentTyped<{
 export type FramerProps = typeof __propDef.props;
 export type FramerEvents = typeof __propDef.events;
 export type FramerSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        embeds: any;
-        breakpoints?: number[];
-        maxFrameWidth?: number;
-        minFrameWidth?: number;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/Framer/Framer.svelte

@@ -27,21 +27,18 @@
 
   $: embedTitles = getUniqNames(embeds);
 
-  // @ts-ignore
-  let pymParent; // eslint-disable-line no-unused-vars
-
   const reframe = (embed) => {
     // Bit of hack for handling adding query strings dynamically to embeds.
     // cf. also the value prop on the Typeahead component...
     const activeEmbed =
-      embeds.indexOf(embed) > -1
-        ? embed
-        : embeds[activeEmbedIndex] || embeds[0];
-    pymParent = new pym.Parent(
+      embeds.indexOf(embed) > -1 ?
+        embed
+      : embeds[activeEmbedIndex] || embeds[0];
+    new pym.Parent(
       'frame-parent',
-      /^http/.test(activeEmbed)
-        ? activeEmbed
-        : urljoin(window.location.origin, activeEmbed, { trailingSlash: true })
+      /^http/.test(activeEmbed) ? activeEmbed : (
+        urljoin(window.location.origin, activeEmbed, { trailingSlash: true })
+      )
     );
   };
 
@@ -107,11 +104,7 @@
   </a>
 </div>
 
-<Resizer
-  breakpoints="{breakpoints}"
-  minFrameWidth="{minFrameWidth}"
-  maxFrameWidth="{maxFrameWidth}"
-/>
+<Resizer {breakpoints} {minFrameWidth} {maxFrameWidth} />
 
 <style>header {
   font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;

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

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  FramerProps */
+/** @typedef {typeof __propDef.events}  FramerEvents */
+/** @typedef {typeof __propDef.slots}  FramerSlots */
+export default class Framer extends SvelteComponent<{
+    embeds: any;
+    breakpoints?: number[] | undefined;
+    maxFrameWidth?: number | undefined;
+    minFrameWidth?: number | undefined;
+}, {
+    [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: {
+        embeds: any;
+        breakpoints?: number[] | undefined;
+        maxFrameWidth?: number | undefined;
+        minFrameWidth?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

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

@@ -210,9 +210,7 @@
   height: 20px;
   cursor: ew-resize;
   background: #bbb;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  user-select: none;
   position: absolute;
   border-radius: 4px;
   border: 1px solid grey;

package/dist/{@types/components/SiteHeader/MobileMenu → components/Framer/Resizer}/index.svelte.d.ts

@@ -1,10 +1,10 @@
 /** @typedef {typeof __propDef.props}  IndexProps */
 /** @typedef {typeof __propDef.events}  IndexEvents */
 /** @typedef {typeof __propDef.slots}  IndexSlots */
-export default class Index extends SvelteComponentTyped<{
-    data?: any[];
-    isMobileMenuOpen?: boolean;
-    releaseMobileMenu?: () => void;
+export default class Index extends SvelteComponent<{
+    breakpoints?: number[] | undefined;
+    maxFrameWidth?: number | undefined;
+    minFrameWidth?: number | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -12,16 +12,18 @@ 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: {
-        data?: any[];
-        isMobileMenuOpen?: boolean;
-        releaseMobileMenu?: () => void;
+        breakpoints?: number[] | undefined;
+        maxFrameWidth?: number | undefined;
+        minFrameWidth?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -5,6 +5,6 @@ declare namespace fuzzy {
     function match(pattern: any, str: any, opts: any): {
         rendered: string;
         score: number;
-    };
+    } | null;
     function filter(pattern: any, arr: any, opts: any): any;
 }

package/dist/components/Framer/Typeahead/fuzzy.js

@@ -102,7 +102,7 @@ fuzzy.filter = function (pattern, arr, opts) {
   opts = opts || {};
   return (
     arr
-      .reduce(function (prev, element, idx, arr) {
+      .reduce(function (prev, element, idx, _arr) {
         let str = element;
         if (opts.extract) {
           str = opts.extract(element);

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

@@ -15,10 +15,10 @@
   export let extract = (item) => item;
 
   /** @type {(item: TItem) => boolean} */
-  export let disable = (item) => false;
+  export let disable = (_item) => false;
 
   /** @type {(item: TItem) => boolean} */
-  export let filter = (item) => false;
+  export let filter = (_item) => false;
 
   /** Set to `false` to prevent the first result from being selected */
   export let autoselect = true;
@@ -59,14 +59,14 @@
 
   $: options = { pre: '<mark>', post: '</mark>', extract };
   $: results =
-    value !== ''
-      ? fuzzy
-          .filter(value, data, options)
-          .filter(({ score }) => score > 0)
-          .slice(0, limit)
-          .filter((result) => !filter(result.original))
-          .map((result) => ({ ...result, disabled: disable(result.original) }))
-      : data.map((d) => ({ string: extract(d), original: d }));
+    value !== '' ?
+      fuzzy
+        .filter(value, data, options)
+        .filter(({ score }) => score > 0)
+        .slice(0, limit)
+        .filter((result) => !filter(result.original))
+        .map((result) => ({ ...result, disabled: disable(result.original) }))
+    : data.map((d) => ({ string: extract(d), original: d }));
 
   $: resultsId = results.map((result) => extract(result.original)).join('');
   $: showResults = !hideDropdown && results.length > 0 && isFocused;
@@ -132,9 +132,9 @@
   /** @type {(direction: -1 | 1) => void} */
   function change(direction) {
     let index =
-      direction === 1 && selectedIndex === results.length - 1
-        ? 0
-        : selectedIndex + direction;
+      direction === 1 && selectedIndex === results.length - 1 ?
+        0
+      : selectedIndex + direction;
     if (index < 0) index = results.length - 1;
 
     let disabled = results[index].disabled;
@@ -177,19 +177,19 @@
   id="{id}-typeahead"
 >
   <Search
-    id="{id}"
+    {id}
     removeFormAriaAttributes="{true}"
     {...$$restProps}
     bind:ref="{searchRef}"
     aria-autocomplete="list"
     aria-controls="{id}-listbox"
     aria-labelledby="{id}-label"
-    aria-activedescendant="{selectedIndex >= 0 &&
-    !hideDropdown &&
-    results.length > 0
-      ? `${id}-result-${selectedIndex}`
-      : null}"
-    bind:value="{value}"
+    aria-activedescendant="{(
+      selectedIndex >= 0 && !hideDropdown && results.length > 0
+    ) ?
+      `${id}-result-${selectedIndex}`
+    : null}"
+    bind:value
     on:type
     on:input
     on:change
@@ -259,7 +259,7 @@
             selectedIndex = index;
           }}"
         >
-          <slot result="{result}" index="{index}" value="{value}">
+          <slot {result} {index} {value}>
             {@html result.string}
           </slot>
         </li>
@@ -281,7 +281,6 @@ 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%;
@@ -292,27 +291,23 @@ 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;
 }
@@ -320,28 +315,22 @@ 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;
@@ -349,7 +338,6 @@ li:hover {
   color: #aaa;
   font-family: var(--theme-font-family-sans-serif);
 }
-
 :global([data-svelte-search] input) {
   width: 100%;
   padding: 0.5rem 0.75rem;
@@ -361,7 +349,6 @@ 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;