@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/PhotoCarousel/PhotoCarousel.stories.svelte

@@ -1,72 +0,0 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import customDocs from "./stories/docs/withCustom.md?raw";
-import PhotoCarousel from "./PhotoCarousel.svelte";
-import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Multimedia/PhotoCarousel",
-  component: PhotoCarousel,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    width: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
-    }
-  }
-};
-</script>
-
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  import photosJson from './stories/photos.json';
-
-  const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
-</script>
-
-<Template let:args>
-  <PhotoCarousel {...args} />
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    width: 'wider',
-    photos,
-  }}"
-/>
-
-<Story
-  name="Custom credits and captions"
-  args="{{
-    width: 'wider',
-    photos,
-  }}"
-  {...withStoryDocs(customDocs)}
->
-  <PhotoCarousel
-    {...{
-      width: 'wider',
-      photos,
-    }}
-  >
-    <p class="custom-credit" slot="credit" let:credit>{credit}</p>
-    <p class="custom-caption" slot="caption" let:caption>{caption}</p>
-  </PhotoCarousel>
-</Story>
-
-<style>p {
-  position: absolute;
-  color: white;
-  background-color: rgba(0, 0, 0, 0.6);
-  font-family: sans-serif;
-  font-size: 0.8rem;
-  padding: 0 5px;
-}
-p.custom-credit {
-  top: 0;
-  right: 0;
-}
-p.custom-caption {
-  bottom: 5px;
-  left: 0;
-}</style>

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

@@ -1,29 +0,0 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        width: {
-            control: string;
-            options: string[];
-        };
-    };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof PhotoCarousel;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PhotoCarouselProps = typeof __propDef.props;
-export type PhotoCarouselEvents = typeof __propDef.events;
-export type PhotoCarouselSlots = typeof __propDef.slots;
-export default class PhotoCarousel extends SvelteComponent<PhotoCarouselProps, PhotoCarouselEvents, PhotoCarouselSlots> {
-}
-export {};

package/dist/components/PhotoCarousel/PhotoCarousel.svelte

@@ -1,202 +0,0 @@
-<!-- @component `PhotoCarousel` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-photocarousel--docs) -->
-<script>export let width = "wider";
-export let textWidth = "normal";
-export let id = "";
-let cls = "";
-export { cls as class };
-export let photos = [];
-export let maxHeight = 660;
-export let defaultImageObjectFit = "cover";
-export let defaultImageObjectPosition = "center center";
-export let carouselAriaLabel = "Photo gallery";
-export let heightRatio = 0.68;
-export let preloadImages = 1;
-import Block from "../Block/Block.svelte";
-import { Splide, SplideSlide, SplideTrack } from "@splidejs/svelte-splide";
-import "@splidejs/svelte-splide/css/core";
-import Fa from "svelte-fa/src/fa.svelte";
-import {
-  faChevronLeft,
-  faChevronRight
-} from "@fortawesome/free-solid-svg-icons";
-import { fly } from "svelte/transition";
-import PaddingReset from "../PaddingReset/PaddingReset.svelte";
-let containerWidth;
-let activeImageIndex = 0;
-$: carouselHeight = containerWidth ? Math.min(containerWidth * heightRatio, maxHeight) : maxHeight;
-const handleActiveChange = (e) => {
-  if (!e) return;
-  activeImageIndex = e.detail.dest;
-};
-</script>
-
-<Block {width} {id} class="photo-carousel fmy-6 {cls}">
-  <div class="carousel-container" bind:clientWidth="{containerWidth}">
-    <Splide
-      hasTrack="{false}"
-      options="{{
-        height: carouselHeight,
-        fixedHeight: carouselHeight,
-        lazyLoad: 'nearby',
-        preloadPages: preloadImages,
-      }}"
-      aria-label="{carouselAriaLabel}"
-      on:move="{handleActiveChange}"
-    >
-      <div class="image-container">
-        <SplideTrack>
-          {#each photos as photo}
-            <SplideSlide>
-              <div class="photo-slide w-full h-full relative">
-                <figure
-                  class="fm-0 w-full relative"
-                  style="height: {carouselHeight}px;"
-                >
-                  <img
-                    class="w-full h-full fmy-0"
-                    data-splide-lazy="{photo.src}"
-                    alt="{photo.altText}"
-                    style:object-fit="{photo.objectFit ||
-                      defaultImageObjectFit}"
-                    style:object-position="{photo.objectPosition ||
-                      defaultImageObjectPosition}"
-                  />
-                  {#if $$slots.credit}
-                    <slot name="credit" credit="{photo.credit}" />
-                  {:else}
-                    <span
-                      class="credit absolute fmb-1 fml-1 leading-tighter font-note text-xxs"
-                      class:contain-fit="{photo.objectFit === 'contain' ||
-                        defaultImageObjectFit === 'contain'}"
-                      >{photo.credit}</span
-                    >
-                  {/if}
-                </figure>
-              </div>
-            </SplideSlide>
-          {/each}
-        </SplideTrack>
-
-        {#if photos[activeImageIndex].caption}
-          <PaddingReset containerIsFluid="{width === 'fluid'}">
-            <Block width="{textWidth}">
-              {#if $$slots.caption}
-                <slot
-                  name="caption"
-                  caption="{photos[activeImageIndex].caption}"
-                />
-              {:else}
-                {#key activeImageIndex}
-                  <p
-                    class="caption body-caption text-center"
-                    in:fly|local="{{ x: 20, duration: 175 }}"
-                  >
-                    {photos[activeImageIndex].caption}
-                  </p>
-                {/key}
-              {/if}
-            </Block>
-          </PaddingReset>
-        {/if}
-
-        <div class="splide__progress">
-          <div class="splide__progress__bar"></div>
-        </div>
-
-        <div class="splide__arrows fp-1">
-          <button class="splide__arrow splide__arrow--prev">
-            <Fa icon="{faChevronLeft}" fw />
-          </button>
-          <button class="splide__arrow splide__arrow--next">
-            <Fa icon="{faChevronRight}" fw />
-          </button>
-        </div>
-      </div>
-    </Splide>
-  </div>
-</Block>
-
-<style>/* Generated from 
-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
-*/
-/* Generated from 
-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 */
-.carousel-container .photo-slide figure span.credit {
-  bottom: 0;
-  left: 0;
-  color: white;
-  text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
-}
-.carousel-container .photo-slide figure span.credit.contain-fit {
-  left: 50%;
-  transform: translate(-50%, 0%);
-}
-.carousel-container :global(.splide) {
-  max-height: 100%;
-}
-.carousel-container :global(li) {
-  padding: 0;
-}
-.carousel-container :global(.splide__arrows) {
-  width: 275px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-}
-.carousel-container :global(.splide__arrows button) {
-  display: flex;
-  font-size: 14px;
-  height: 30px;
-  width: 30px;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid transparent;
-  border-radius: 50%;
-  background-color: transparent;
-  cursor: pointer;
-  color: var(--theme-colour-text-secondary);
-  opacity: 0.4;
-}
-.carousel-container :global(.splide__arrows button.splide__arrow--prev) {
-  padding-right: 7px;
-}
-.carousel-container :global(.splide__arrows button.splide__arrow--next) {
-  padding-left: 7px;
-}
-.carousel-container :global(.splide__arrows button:hover) {
-  opacity: 1;
-  border-color: var(--theme-colour-text-secondary);
-  color: var(--theme-colour-text-secondary);
-}
-.carousel-container :global(.splide__arrows button:disabled) {
-  opacity: 0.4;
-}
-.carousel-container :global(.splide__arrows button:disabled:hover) {
-  border-color: transparent;
-}
-.carousel-container :global(ul.splide__pagination) {
-  width: 200px;
-  padding: 0;
-  text-align: center;
-  margin: -26px auto 0;
-  display: flex;
-  flex-wrap: nowrap;
-}
-.carousel-container :global(ul.splide__pagination li) {
-  flex-grow: 1;
-  margin-top: -9px;
-}
-.carousel-container :global(ul.splide__pagination li button) {
-  width: 100%;
-  height: 7px;
-  border-radius: 0;
-  padding: 0;
-  border: 1px solid var(--theme-colour-background);
-  background: var(--theme-colour-text-secondary);
-  opacity: 0.4;
-}
-.carousel-container :global(ul.splide__pagination li button.is-active) {
-  opacity: 1;
-}</style>

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

@@ -1,78 +0,0 @@
-import { SvelteComponent } from "svelte";
-import '@splidejs/svelte-splide/css/core';
-declare const __propDef: {
-    props: {
-        /** Width of the component within the text well. */ width?: "normal" | "wide" | "wider" | "widest" | "fluid";
-        /**
-           * Set a different width for captions within the text well, for example,
-           * "normal" to keep captions inline with the rest of the text well.
-           * Can't ever be wider than `width`.
-           * @type {string}
-           */ textWidth?: "normal" | "wide" | "wider" | "widest" | "fluid";
-        /** Add an ID to target with SCSS. */ id?: string;
-        /** Add a class to target with SCSS. */ class?: string;
-        /**
-           * Array of photos.
-           * @required
-           */ photos?: {
-            /**
-             * Image src
-             * @required
-             */
-            src: string;
-            /**
-             * Image alt-text
-             * @required
-             */
-            altText: string;
-            /** Optional caption */
-            caption?: string;
-            /** Optional credit */
-            credit?: string;
-            /** Optional object-fit rule */
-            objectFit?: string;
-            /** Optional object-position rule */
-            objectPosition?: string;
-        }[];
-        /**
-           * Max height of the carousel
-           */ maxHeight?: number;
-        /**
-           * Default Image object-fit style, either `cover` or `contain`.
-           */ defaultImageObjectFit?: "cover" | "contain";
-        /**
-           * Default image object-position style, e.g., `center center` or `50% 50%`.
-           */ defaultImageObjectPosition?: string;
-        /**
-           * ARIA label for the carousel.
-           * @required
-           */ carouselAriaLabel?: string;
-        /**
-           * Set height of the carousel as a ratio of its width
-           * as long as its below whatever you set in `maxHeight`.
-           */ heightRatio?: number;
-        /**
-           * Number of images to preload ahead of the active image.
-           */ preloadImages?: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        credit: {
-            credit: string | undefined;
-        };
-        caption: {
-            caption: string | undefined;
-        };
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PhotoCarouselProps = typeof __propDef.props;
-export type PhotoCarouselEvents = typeof __propDef.events;
-export type PhotoCarouselSlots = typeof __propDef.slots;
-/** `PhotoCarousel` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-photocarousel--docs) */
-export default class PhotoCarousel extends SvelteComponent<PhotoCarouselProps, PhotoCarouselEvents, PhotoCarouselSlots> {
-}
-export {};

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

@@ -1,21 +0,0 @@
-A simple, accessible photo carousel with lazy-loading and mobile swipe built in.
-
-```svelte
-<script>
-  import { PhotoCarousel } from '@reuters-graphics/graphics-components';
-
-  const photos = [
-    {
-      src: 'https://.../myImage.jpg',
-      altText: 'A picture of...',
-      caption: 'My caption...', // Optional
-      credit: 'REUTERS/Jane Doe', // Optional
-      objectFit: 'contain', // Optional
-      objectPosition: '50% 50%', // Optional
-    },
-    // ...
-  ];
-</script>
-
-<PhotoCarousel photos="{photos}" />
-```

package/dist/components/PhotoCarousel/stories/docs/withCustom.md

@@ -1,27 +0,0 @@
-Use named slots to style your own custom credits and/or captions.
-
-```svelte
-<PhotoCarousel photos="{photos}">
-  <p slot="credit" class="custom-credit" let:credit>{credit}</p>
-  <p slot="caption" class="custom-caption" let:caption>{caption}</p>
-</PhotoCarousel>
-
-<style lang="scss">
-  p {
-    position: absolute;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.6);
-    font-family: sans-serif;
-    font-size: 0.8rem;
-    padding: 0 5px;
-    &.custom-credit {
-      top: 0;
-      right: 0;
-    }
-    &.custom-caption {
-      bottom: 5px;
-      left: 0;
-    }
-  }
-</style>
-```

package/dist/components/PhotoCarousel/stories/photos.json

@@ -1,72 +0,0 @@
-[
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194630Z_544493697_UP1E.jpeg",
-    "caption": "Spain's Sergio Busquets and Aymeric Laporte react before a Germany goal is disallowed following a VAR review.",
-    "credit": "REUTERS/Molly Darlington"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194619Z_2007900040_UP1.jpeg",
-    "caption": "Spain's Sergio Busquets fouls Germany's Jamal Musiala before being shown yellow card.",
-    "credit": "REUTERS/Kai Pfaffenbach"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194619Z_635809122_UP1E.jpeg",
-    "caption": "Spain's Sergio Busquets is shown a yellow card by referee Danny Desmond Makkelie.",
-    "credit": "REUTERS/Albert Gea"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T191015Z_1293757566_UP1.jpeg",
-    "caption": "Spain's Sergio Busquets in action with Germany's Thomas Muller.",
-    "credit": "REUTERS/John Sibley"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T181411Z_1_MTZXEIBR0QNN.jpeg",
-    "caption": "Spain fans inside the stadium before the match.",
-    "credit": "REUTERS/Albert Gea"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194827Z_345059331_UP1E.jpeg",
-    "caption": "Spain's Gavi.",
-    "credit": "REUTERS/Fabrizio Bensch"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T175149Z_1_MTZXEIBR0PMD.jpeg",
-    "caption": "",
-    "credit": "REUTERS/John Sibley"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T203232Z_890709671_UP1E.jpeg",
-    "caption": "Spain's Alvaro Morata scores their first goal.",
-    "credit": "REUTERS/Kai Pfaffenbach"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T203612Z_1399473226_UP1.jpeg",
-    "caption": "Spain's Alvaro Morata celebrates scoring their first goal.",
-    "credit": "REUTERS/Molly Darlington"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T204305Z_1795686896_UP1.jpeg",
-    "caption": "Germany's Niclas Fullkrug scores their first goal.",
-    "credit": "REUTERS/Molly Darlington"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T204528Z_151067034_UP1E.jpeg",
-    "caption": "Germany's Niclas Fullkrug celebrates scoring their first goal.",
-    "credit": "REUTERS/Molly Darlington"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T205041Z_2076149593_UP1.jpeg",
-    "caption": "Spain coach Luis Enrique.",
-    "credit": "REUTERS/John Sibley"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T205604Z_1468073277_UP1.jpeg",
-    "caption": "Germany's Manuel Neuer applauds fans after the match.",
-    "credit": "REUTERS/Kai Pfaffenbach"
-  },
-  {
-    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T205854Z_408619749_UP1E.jpeg",
-    "caption": "Spain players applaud fans after the match.",
-    "credit": "REUTERS/Albert Gea"
-  }
-]

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

@@ -1,63 +0,0 @@
-```yaml
-[blocks]
-# ...
-
-type: photo-pack
-id: my-photo-pack
-class: mb-2
-width: wide
-textWidth: normal
-gap: 10
-[.images]
-  src: images/my-img-1.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
-
-  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
-[]
-
-# ...
-[]
-```
-
-```svelte
-<!-- App.svelte -->
-{#each content.blocks as block}
-  {#if block.type === 'text'}
-  <!-- ... -->
-
-  {:else if block.type === 'photo-pack'}
-    <PhotoPack
-      id={block.id}
-      class={block.class}
-      width={block.width}
-      textWidth={block.textWidth}
-      images={block.images.map((img) => ({
-        src: `${assets}/${img.src}`,
-        altText: img.altText,
-        caption: img.caption,
-      }))}
-      layouts={[
-        { breakpoint: 750, rows: [2, 3] },
-        { breakpoint: 450, rows: [1, 2, 2] },
-      ]}
-    />
-    
-  <!-- ... -->
-  {/if}
-{/each}
-```

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

@@ -1,45 +0,0 @@
-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

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

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

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

package/dist/components/PymChild/stores.js

@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const pymChildStore = writable(null);

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

@@ -1,28 +0,0 @@
-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/stories/docs/collection.md

@@ -1,7 +0,0 @@
-```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

@@ -1,15 +0,0 @@
-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/" />
-```