@reuters-graphics/graphics-components 1.0.30 → 1.1.0

package/dist/components/PhotoPack/docProps.js

@@ -6,24 +6,21 @@ export const getPhotoPackPropsFromDoc = (docBlock, assetsPath = '') => {
         width: docBlock.Width,
         textWidth: docBlock.textWidth,
         gap: docBlock.Gap && isNaN(docBlock.Gap) ?
-            null :
-            parseInt(docBlock.Gap),
+            null
+            : parseInt(docBlock.Gap),
         images: docBlock.Images.map((img) => ({
             src: /^https?:\/\/|^\/\//i.test(img.Src) ?
-                img.Src :
-                urlJoin(assetsPath, img.Src),
+                img.Src
+                : urlJoin(assetsPath, img.Src),
             altText: img.AltText,
             caption: img.Caption,
             maxHeight: img.MaxHeight && isNaN(img.MaxHeight) ?
-                null :
-                parseFloat(img.MaxHeight),
+                null
+                : parseFloat(img.MaxHeight),
         })),
         layouts: docBlock.Layouts.map((layout) => ({
-            breakpoint: isNaN(layout.Breakpoint) ?
-                null :
-                parseFloat(layout.Breakpoint),
+            breakpoint: isNaN(layout.Breakpoint) ? null : (parseFloat(layout.Breakpoint)),
             rows: layout.Rows.split(',').map((r) => parseInt(r.trim())),
         })),
     };
 };
-//# sourceMappingURL=docProps.js.map

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

@@ -0,0 +1,45 @@
+The `PhotoPack` component makes simple photo grids with custom layouts at whatever breakpoint you need.
+
+```svelte
+<script>
+  import { PhotoPack } from '@reuters-graphics/graphics-components';
+
+  const images = [
+    {
+      src: 'https://...',
+      altText: 'Alt text',
+      caption: 'Lorem ipsum. REUTERS/Photog',
+      // Optional max-height of image across all layouts
+      maxHeight: 800,
+    },
+    // ...
+  ];
+
+  const layouts = [
+    {
+      // Breakpoint above which this layout applies
+      breakpoint: 450,
+      // Number of photos in each row of this layout, adding up to the total number of images
+      rows: [1, 2, 1],
+    },
+    { breakpoint: 750, rows: [1, 3] },
+  ];
+</script>
+
+<PhotoPack images="{images}" layouts="{layouts}" />
+```
+
+`images` are defined with their src, alt text, captions and an optional `maxHeight`, which makes sure the image is no taller than that height in pixels in any layout.
+
+`layouts` describe how those images will be laid out in rows at different breakpoints. The default layout (mobile-first) is each photo on its own row, stacked vertically, but you can group photos into `rows` above a `breakpoint` by specifying the number of photos that should go in that row. For example:
+
+```javascript
+const layouts = [{
+  breakpoint: 450,
+  rows: [1,2,1],
+}];
+```
+
+... tells the component that when the `PhotoPack` container is 450 pixels or wider, it should group the 4 photos in 3 rows, 1 in the first, 2 in the second and 1 in the last.
+
+You can define as many layouts for as many images as you like.

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

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

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

@@ -0,0 +1,67 @@
+Setup your Google Doc with the images, layouts and other props you want:
+
+```yaml
+# Google doc block
+Type: photo-pack
+ID: my-photo-pack
+Class: mb-2 # adjust margin class as needed
+Width: wide
+TextWidth: normal
+Gap: 10
+[.Images]
+  Src: images/my-img-1.jpg
+  AltText: Alt text
+  Caption: Lorem ipsum. REUTERS/Photog
+  MaxHeight: 600 # Optional max-height
+
+  Src: images/my-img-2.jpg
+  AltText: Alt text
+  Caption: Lorem ipsum. REUTERS/Photog
+
+  Src: images/my-img-3.jpg
+  AltText: Alt text
+  Caption: Lorem ipsum. REUTERS/Photog
+
+  Src: images/my-img-4.jpg
+  AltText: Alt text
+  Caption: Lorem ipsum. REUTERS/Photog
+
+  Src: images/my-img-5.jpg
+  AltText: Alt text
+  Caption: Lorem ipsum. REUTERS/Photog
+[]
+[.Layouts]
+  Breakpoint: 750
+  Rows: 2,3 # Must add to total number of images!
+
+  Breakpoint: 450
+  Rows: 1,2,2
+[]
+```
+
+In your project, you can use the `getPhotoPackPropsFromDoc` utilty to easily convert the GoogleDoc format above into the props the `PhotoPack` component expects.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import {
+    getPhotoPackPropsFromDoc,
+    PhotoPack,
+  } 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-pack'}
+    <PhotoPack {...getPhotoPackPropsFromDoc(block, assets)} />
+    <!-- END copy/paste -->
+  {/if}
+{/each}
+```

package/dist/components/PymChild/PymChild.stories.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import PymChild from './PymChild.svelte';
+
+  import { withComponentDocs } from '../../lib/docs/utils/withParams.js';
+</script>
+
+<Meta
+  title="Components/PymChild"
+  component="{PymChild}"
+  {...withComponentDocs(componentDocs)}
+/>
+
+<Template let:args>
+  <PymChild {...args} />
+  <div>Nothing to see here. 😎</div>
+</Template>
+
+<Story name="Default" />

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  PymChildProps */
+/** @typedef {typeof __propDef.events}  PymChildEvents */
+/** @typedef {typeof __propDef.slots}  PymChildSlots */
+export default class PymChild extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PymChildProps = typeof __propDef.props;
+export type PymChildEvents = typeof __propDef.events;
+export type PymChildSlots = 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/PymChild/PymChild.svelte

@@ -1,12 +1,11 @@
 <!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/utilities-PymChild--default) -->
-<script>/** Pym.js polling interval */
-export let polling = 500;
-import { onMount } from 'svelte';
-import pym from 'pym.js';
-import { pymChildStore } from './stores.js';
+<script>export let polling = 500;
+import { onMount } from "svelte";
+import pym from "pym.js";
+import { pymChildStore } from "./stores.js";
 let pymChild;
 onMount(() => {
-    pymChild = new pym.Child({ polling });
-    pymChildStore.set(pymChild);
+  pymChild = new pym.Child({ polling });
+  pymChildStore.set(pymChild);
 });
 </script>

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /** Pym.js polling interval */ polling?: number;
@@ -7,11 +7,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type PymChildProps = typeof __propDef.props;
 export type PymChildEvents = typeof __propDef.events;
 export type PymChildSlots = typeof __propDef.slots;
 /** `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/utilities-PymChild--default) */
-export default class PymChild extends SvelteComponentTyped<PymChildProps, PymChildEvents, PymChildSlots> {
+export default class PymChild extends SvelteComponent<PymChildProps, PymChildEvents, PymChildSlots> {
 }
 export {};

package/dist/components/PymChild/stores.d.ts

@@ -0,0 +1 @@
+export const pymChildStore: import("svelte/store").Writable<null>;

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

@@ -0,0 +1,28 @@
+A Pym.js child instance for embeddables.
+
+```svelte
+<script>
+  import { PymChild } from '@reuters-graphics/graphics-components';
+</script>
+
+<PymChild polling="{500}" />
+```
+
+You can access the Pym.js child through its store in other components to send custom height updates to parent frames:
+
+```svelte
+<script>
+  import {
+    PymChild,
+    pymChildStore,
+  } from '@reuters-graphics/graphics-components';
+
+  const updateHeight = () => {
+    if ($pymChildStore) $pymChildStore.sendHeight();
+  };
+</script>
+
+<PymChild />
+
+<button on:click="{updateHeight}">Update height</button>
+```

package/dist/components/ReferralBlock/ReferralBlock.stories.svelte

@@ -0,0 +1,69 @@
+<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 collectionDocs from './stories/docs/collection.md?raw';
+
+  import ReferralBlock from './ReferralBlock.svelte';
+
+  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+      section: {
+        control: 'select',
+        options: [
+          '/world/',
+          '/world/europe/',
+          '/lifestyle/',
+          '/lifestyle/sports/',
+          '/legal/',
+          '/business/',
+          '/business/energy/',
+        ],
+      },
+      number: {
+        control: 'select',
+        options: [2, 4, 6, 8],
+      },
+    },
+  };
+</script>
+
+<Meta
+  title="Components/ReferralBlock"
+  component="{ReferralBlock}"
+  {...metaProps}
+/>
+
+<Template let:args>
+  <ReferralBlock {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    section: '/lifestyle/sports/',
+    number: 4,
+    class: 'fmy-0',
+    heading: 'More World Cup coverage',
+  }}"
+/>
+
+<Story
+  name="By collection"
+  args="{{
+    collection: 'x-trump',
+    number: 6,
+    class: 'fmy-8',
+    heading: 'The latest Trump coverage',
+  }}"
+  {...withStoryDocs(collectionDocs)}
+/>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  ReferralBlockProps */
+/** @typedef {typeof __propDef.events}  ReferralBlockEvents */
+/** @typedef {typeof __propDef.slots}  ReferralBlockSlots */
+export default class ReferralBlock extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ReferralBlockProps = typeof __propDef.props;
+export type ReferralBlockEvents = typeof __propDef.events;
+export type ReferralBlockSlots = 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/ReferralBlock/ReferralBlock.svelte

@@ -1,76 +1,46 @@
 <!-- @component `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReferralBlock--default) -->
-<script>/** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
-/**
- * Section ID, which is often the URL path to the section page on reuters.com.
- *
- * Note that not all section pages will be available in the recent stories by section API.
- */
-export let section = '/world/';
-/**
- * Collection alias, as defined in Arc Collections editor.
- */
+<script>export let section = "/world/";
 export let collection;
-/**
- * Number of referrals to show.
- * @required
- */
 export let number = 4;
-/**
- * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
- */
-export let linkTarget = '_self';
-/**
- * Add a heading to the referral block.
- */
-export let heading = '';
-/**
- * Width of the component within the text well.
- * @required
- */
-export let width = 'wide';
-/** Add an ID to target with SCSS. */
-export let id = '';
-/** Add a class to target with SCSS. */
-let cls = 'fmy-8';
+export let linkTarget = "_self";
+export let heading = "";
+export let width = "wide";
+export let id = "";
+let cls = "fmy-8";
 export { cls as class };
-import Block from '../Block/Block.svelte';
-// import { referrals } from './stores.js';
-import { onMount } from 'svelte';
-import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
+import Block from "../Block/Block.svelte";
+import { onMount } from "svelte";
+import { getTime } from "../SiteHeader/NavBar/NavDropdown/StoryCard/time";
 let clientWidth;
-const SECTION_API = 'recent-stories-by-sections-v1';
-const COLLECTION_API = 'articles-by-collection-alias-or-id-v1';
+const SECTION_API = "recent-stories-by-sections-v1";
+const COLLECTION_API = "articles-by-collection-alias-or-id-v1";
 let referrals = [];
 onMount(async () => {
-    const isCollection = Boolean(collection);
-    const API = isCollection ? COLLECTION_API : SECTION_API;
-    try {
-        const response = await fetch(`https://www.reuters.com/pf/api/v3/content/fetch/${API}?` +
-            new URLSearchParams({
-                query: JSON.stringify({
-                    section_ids: isCollection ? undefined : section,
-                    collection_alias: isCollection ? collection : undefined,
-                    size: 20,
-                    website: 'reuters',
-                }),
-            }));
-        const data = await response.json();
-        const articles = data.result.articles
-            .filter((a) => a?.headline_category || a?.kicker?.name)
-            .filter((a) => a?.thumbnail?.renditions?.landscape?.['240w'])
-            .filter((a) => !a?.content?.third_party)
-            .slice(0, number);
-        referrals = articles;
-    }
-    catch (e) {
-        console.warn('Unable to fetch referral links.');
-    }
+  const isCollection = Boolean(collection);
+  const API = isCollection ? COLLECTION_API : SECTION_API;
+  try {
+    const response = await fetch(
+      `https://www.reuters.com/pf/api/v3/content/fetch/${API}?` + new URLSearchParams({
+        query: JSON.stringify({
+          section_ids: isCollection ? void 0 : section,
+          collection_alias: isCollection ? collection : void 0,
+          size: 20,
+          website: "reuters"
+        })
+      })
+    );
+    const data = await response.json();
+    const articles = data.result.articles.filter((a) => a?.headline_category || a?.kicker?.name).filter((a) => a?.thumbnail?.renditions?.landscape?.["240w"]).filter((a) => !a?.content?.third_party).slice(0, number);
+    referrals = articles;
+  } catch {
+    console.warn("Unable to fetch referral links.");
+  }
 });
 getTime();
 </script>
 
 {#if referrals.length === number}
-  <Block width="{width}" id="{id}" class="referrals-block {cls}">
+  <Block {width} {id} class="referrals-block {cls}">
     {#if heading}
       <div
         class="heading h4 font-bold"
@@ -83,7 +53,7 @@ getTime();
       class="referral-container inline-flex flex-wrap w-full justify-between"
       class:stacked="{clientWidth && clientWidth < 750}"
       class:xs="{clientWidth && clientWidth < 450}"
-      bind:clientWidth="{clientWidth}"
+      bind:clientWidth
     >
       {#each referrals as referral}
         <div class="referral">
@@ -196,7 +166,6 @@ div.heading.stacked {
 .referral-container .referral .image-container img {
   width: 100%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   transition: filter 0.1s;
 }</style>

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -30,11 +30,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ReferralBlockProps = typeof __propDef.props;
 export type ReferralBlockEvents = typeof __propDef.events;
 export type ReferralBlockSlots = typeof __propDef.slots;
 /** `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReferralBlock--default) */
-export default class ReferralBlock extends SvelteComponentTyped<ReferralBlockProps, ReferralBlockEvents, ReferralBlockSlots> {
+export default class ReferralBlock extends SvelteComponent<ReferralBlockProps, ReferralBlockEvents, ReferralBlockSlots> {
 }
 export {};

package/dist/components/ReferralBlock/stories/docs/collection.md

@@ -0,0 +1,7 @@
+```svelte
+<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReferralBlock collection="x-trump" number="{6}" class="fmy-8" />
+```

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

@@ -0,0 +1,15 @@
+The `ReferralBlock` component creates a set of referral links from recent dotcom stories using the [recent stories by section API](https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?query=%7B%22section_ids%22%3A%22%2Fworld%2F%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D) or the [articles by collection API](https://www.reuters.com/pf/api/v3/content/fetch/articles-by-collection-alias-or-id-v1?query=%7B%22collection_alias%22%3A%22x-trump%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D).
+
+> The `section` or `collection` prop determines which section or collection stories are from.
+>
+> You can get the section ID from the section page on dotcom. For example, the section ID for World - Europe stories at `www.reuters.com/world/europe/` would be `/world/europe/`. (The leading and trailing slashes are required!)
+>
+> You should get a collection alias from the dotcom team.
+
+```svelte
+<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReferralBlock section="/lifestyle/sports/" />
+```

package/dist/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import ReutersGraphicsLogo from './ReutersGraphicsLogo.svelte';
+
+  import { withComponentDocs } from '$docs/utils/withParams.js';
+</script>
+
+<Meta
+  title="Components/ReutersGraphicsLogo"
+  component="{ReutersGraphicsLogo}"
+  {...withComponentDocs(componentDocs)}
+/>
+
+<Template let:args>
+  <ReutersGraphicsLogo {...args} />
+</Template>
+
+<Story name="Default" args="{{}}" />

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  ReutersGraphicsLogoProps */
+/** @typedef {typeof __propDef.events}  ReutersGraphicsLogoEvents */
+/** @typedef {typeof __propDef.slots}  ReutersGraphicsLogoSlots */
+export default class ReutersGraphicsLogo extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ReutersGraphicsLogoProps = typeof __propDef.props;
+export type ReutersGraphicsLogoEvents = typeof __propDef.events;
+export type ReutersGraphicsLogoSlots = 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 {};