@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/PaddingReset/PaddingReset.mdx

@@ -0,0 +1,53 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as PaddingResetStories from './PaddingReset.stories.svelte';
+
+<Meta of={PaddingResetStories} />
+
+# PaddingReset
+
+Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on adjacent text such as notes or captions. The `PaddingReset` component resets our normal well padding inside a `fluid` container.
+
+```svelte
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+</script>
+
+<Block width="fluid">
+  <!-- Edge-to-edge image -->
+  <img src="https:..." alt="Alt text" class="fmb-1" />
+
+  <!-- Wrap text in `PaddingReset`to add padding back in -->
+  <PaddingReset>
+    <div class="body-note">
+      A caption for the image that is padded when Block is fluid.
+    </div>
+  </PaddingReset>
+</Block>
+```
+
+<Canvas of={PaddingResetStories.Demo} />
+
+## Conditional padding
+
+You can add the padding conditionally by setting the `containerIsFluid` prop to `true` when the `Block` width is `fluid`, which is what many other components in this library do.
+
+```svelte
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+
+  let { src = 'https://...', width = 'fluid' } = $props();
+</script>
+
+<Block {width}>
+  <!-- Edge-to-edge image -->
+  <img src="https:..." alt="Alt text" class="fmb-1" />
+
+  <!-- Set conditional padding with the `containerIsFluid` prop -->
+  <PaddingReset containerIsFluid={width === 'fluid'}>
+    <div class="body-note">
+      A caption for the image that is padded when Block is fluid.
+    </div>
+  </PaddingReset>
+</Block>
+```

package/dist/components/PaddingReset/PaddingReset.stories.svelte

@@ -1,42 +1,42 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import PaddingReset from "./PaddingReset.svelte";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Page layout/PaddingReset",
-  component: PaddingReset,
-  ...withComponentDocs(componentDocs)
-};
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import PaddingReset from './PaddingReset.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Page layout/PaddingReset',
+    component: PaddingReset,
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+<script lang="ts">
   import Block from '../Block/Block.svelte';
+  let width: 'wide' | 'fluid' = 'fluid';
+
+  import sharkSrc from './shark.jpg';
 </script>
 
-<Template let:args>
-  <Block width="fluid">
-    <div class="outer"></div>
-    <PaddingReset {...args}>
-      <div class="inner"></div>
+<Story name="Demo">
+  <!-- Fluid block -->
+  <Block {width}>
+    <img src={sharkSrc} alt="shark" class="fmb-1" />
+    <PaddingReset containerIsFluid={width === 'fluid' ? true : false}>
+      <div class="body-note">
+        A caption for the image that is padded when its containing <code
+          >Block</code
+        > is fluid.
+      </div>
     </PaddingReset>
   </Block>
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    containerIsFluid: true,
-  }}"
-/>
+</Story>
 
-<style>div {
-  height: 30px;
-  width: 100%;
-  margin-bottom: 2px;
-}
-div.outer {
-  background: grey;
-}
-div.inner {
-  background: salmon;
+<style>code {
+  line-height: 1;
+  margin: 0px 2px;
+  padding: 3px 5px;
+  white-space: nowrap;
+  border-radius: 3px;
+  font-size: 13px;
+  border: 1px solid rgb(236, 244, 249);
+  color: rgba(46, 52, 56, 0.9);
+  background-color: rgb(247, 250, 252);
 }</style>

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

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import PaddingReset from './PaddingReset.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    title: string;
-    component: typeof PaddingReset;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PaddingResetProps = typeof __propDef.props;
-export type PaddingResetEvents = typeof __propDef.events;
-export type PaddingResetSlots = typeof __propDef.slots;
-export default class PaddingReset extends SvelteComponent<PaddingResetProps, PaddingResetEvents, PaddingResetSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const PaddingReset: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PaddingReset = InstanceType<typeof PaddingReset>;
+export default PaddingReset;

package/dist/components/PaddingReset/PaddingReset.svelte

@@ -1,19 +1,29 @@
 <!-- @component `PaddingReset` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-paddingreset--docs) -->
-<script>
-  /**
-   * If parent container is fluid, which resets the padding around contained elements.
-   */
-  export let containerIsFluid = true;
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * Set to `true` if the parent container is fluid.
+     */
+    containerIsFluid?: boolean;
+    /**
+     * Content to be padded.
+     */
+    children: Snippet;
+  }
+
+  let { containerIsFluid = true, children }: Props = $props();
 </script>
 
 {#if containerIsFluid}
   <div>
     <!-- Padded content -->
-    <slot />
+    {@render children()}
   </div>
 {:else}
   <!-- Padded content -->
-  <slot />
+  {@render children()}
 {/if}
 
 <style>

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

@@ -1,30 +1,15 @@
-/** @typedef {typeof __propDef.props}  PaddingResetProps */
-/** @typedef {typeof __propDef.events}  PaddingResetEvents */
-/** @typedef {typeof __propDef.slots}  PaddingResetSlots */
-/** `PaddingReset` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-paddingreset--docs) */
-export default class PaddingReset extends SvelteComponent<{
-    containerIsFluid?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * Set to `true` if the parent container is fluid.
+     */
+    containerIsFluid?: boolean;
+    /**
+     * Content to be padded.
+     */
+    children: Snippet;
 }
-export type PaddingResetProps = typeof __propDef.props;
-export type PaddingResetEvents = typeof __propDef.events;
-export type PaddingResetSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        containerIsFluid?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+/** `PaddingReset` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-paddingreset--docs) */
+declare const PaddingReset: import("svelte").Component<Props, {}, "">;
+type PaddingReset = ReturnType<typeof PaddingReset>;
+export default PaddingReset;

package/dist/components/PhotoPack/PhotoPack.mdx

@@ -0,0 +1,125 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as PhotoPackStories from './PhotoPack.stories.svelte';
+
+<Meta of={PhotoPackStories} />
+
+# PhotoPack
+
+The `PhotoPack` component makes simple photo grids with custom layouts at various breakpoints.
+
+`images` are defined with their src, alt text, captions and an optional `maxHeight`, which ensures that the images are no taller than that height in any layout.
+
+`layouts` describe how images will be laid out at different breakpoints. The default layout is one photo per row, stacked vertically -- i.e. mobile layout. You can customise the layouts and group images into `rows` above a certain `breakpoint` by specifying the number of images 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 images 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.
+
+```svelte
+<script>
+  import { PhotoPack } from '@reuters-graphics/graphics-components';
+
+  /** Array of photo metadata */
+  const images = [
+    {
+      src: 'https://...',
+      altText: 'Alt text',
+      caption: 'Lorem ipsum. REUTERS/Photog',
+      // Optional max-height of images across all layouts
+      maxHeight: 800,
+    },
+    // ...
+  ];
+
+  /** Set the number of photos in each row at various breakpoints */
+  const layouts = [
+    {
+      breakpoint: 450, // Applies to containers wider than 450px
+      rows: [1, 2, 1], // Number of photos in each row
+    },
+    // Another layout for containers wider than 750px
+    { breakpoint: 750, rows: [1, 3] },
+  ];
+</script>
+
+<PhotoPack {images} {layouts} />
+```
+
+<Canvas of={PhotoPackStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[blocks]
+type: photo-pack
+id: my-photo-pack # Optional
+class: mb-2 # Optional
+width: wide # Optional
+textWidth: normal # Optional
+gap: 10 # Optional; must be a number.
+
+# Array of image metadata
+  [.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
+
+    ...
+  []
+
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `PhotoPack` component.
+
+> **Important ❗**: The prop `gap` must be a number. ArchieML renders all values -- including numbers -- as strings, so convert the `prop` value to a number before passing it to `PhotoPack`.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { PhotoPack } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+
+  import content from '$locales/en/content.json';
+</script>
+
+{#each content.blocks as block}
+  {#if block.type === 'photo-pack'}
+    <!-- Pass `assets` into the image source in graphics kit -->
+    <PhotoPack
+      id={block.id}
+      class={block.class}
+      width={block.width}
+      textWidth={block.textWidth}
+      gap={Number(block.gap)}
+      images={block.images.map((img) => ({
+        ...img,
+        src: `${assets}/${img.src}`,
+      }))}
+      layouts={[
+        { breakpoint: 750, rows: [2, 3] },
+        { breakpoint: 450, rows: [1, 2, 2] },
+      ]}
+    />
+  {/if}
+{/each}
+```
+
+<Canvas of={PhotoPackStories.ArchieML} />

package/dist/components/PhotoPack/PhotoPack.stories.svelte

@@ -1,53 +1,48 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import archieMLDocs from "./stories/docs/archieML.md?raw";
-import missingAltTextDocs from "./stories/docs/missingAltText.md?raw";
-import PhotoPack from "./PhotoPack.svelte";
-import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Multimedia/PhotoPack",
-  component: PhotoPack,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    width: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import PhotoPack from './PhotoPack.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Multimedia/PhotoPack',
+    component: PhotoPack,
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+      textWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
     },
-    textWidth: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
-    }
-  }
-};
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
+<script lang="ts">
   const defaultImages = [
     {
-      src: 'https://via.placeholder.com/1024x768.jpg',
-      altText: 'alt text',
+      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:
-        'A residential building destroyed by shelling in the settlement of Borodyanka in the Kyiv region, Ukraine March 3, 2022. Picture taken with a drone. REUTERS/Maksim Levin',
-      maxHeight: 400,
+        "Spain's Sergio Busquets and Aymeric Laporte react before a Germany goal is disallowed following a VAR review.",
+      altText: 'alt text',
     },
     {
-      src: 'https://via.placeholder.com/1640x1180.jpg',
-      altText: 'alt text',
+      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:
-        'Surveillance footage shows a missile hitting a residential building in Kyiv, Ukraine, February 26, 2022, in this still image taken from a video obtained by REUTERS',
+        "Spain's Sergio Busquets fouls Germany's Jamal Musiala before being shown yellow card.",
+      altText: 'alt text',
     },
     {
-      src: 'https://via.placeholder.com/1200x900.jpg',
-      altText: 'alt text',
+      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:
-        'People walk past the remains of a missile at a bus terminal in Kyiv, Ukraine March 4, 2022. REUTERS/Valentyn Ogirenko',
+        "Spain's Sergio Busquets is shown a yellow card by referee Danny Desmond Makkelie.",
+      altText: 'alt text',
     },
     {
-      src: 'https://via.placeholder.com/1024x768.jpg',
-      altText: 'alt text',
+      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:
-        'People walk past the remains of a missile at a bus terminal. REUTERS/Valentyn Ogirenko',
+        "Spain's Sergio Busquets in action with Germany's Thomas Muller.",
+      altText: 'alt text',
     },
   ];
 
@@ -56,92 +51,58 @@ export const meta = {
     { breakpoint: 750, rows: [1, 3] },
   ];
 
-  const archieMLBlock = {
-    type: 'photo-pack',
-    id: 'my-photo-pack',
-    class: 'mb-2',
-    width: 'wide',
-    textWidth: 'normal',
-    gap: '15',
-    images: [
-      {
-        src: 'https://via.placeholder.com/1024x768.jpg',
-        altText: 'alt text',
-        caption: 'Lorem ipsum. Reuters/Photog',
-        maxHeight: 600,
-      },
-      {
-        src: 'https://via.placeholder.com/1024x768.jpg',
-        altText: 'alt text',
-        caption: 'Lorem ipsum. Reuters/Photog',
-      },
-      {
-        src: 'https://via.placeholder.com/1024x768.jpg',
-        altText: 'alt text',
-        caption: 'Lorem ipsum. Reuters/Photog',
-      },
-      {
-        src: 'https://via.placeholder.com/1024x768.jpg',
-        altText: 'alt text',
-        caption: 'Lorem ipsum. Reuters/Photog',
-      },
-      {
-        src: 'https://via.placeholder.com/1024x768.jpg',
-        altText: 'alt text',
-        caption: 'Lorem ipsum. Reuters/Photog',
-      },
-    ],
-    layouts: [
-      { breakpoint: 750, rows: [2, 3] },
-      { breakpoint: 450, rows: [1, 2, 2] },
-    ],
-  };
-
-  const altTextImages = [
+  const archieMLImages = [
     {
-      src: 'https://via.placeholder.com/1024x768.jpg',
+      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.",
       altText: 'alt text',
+    },
+    {
+      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:
-        'A residential building destroyed by shelling in the settlement of Borodyanka in the Kyiv region, Ukraine March 3, 2022. Picture taken with a drone. REUTERS/Maksim Levin',
-      maxHeight: 400,
+        "Spain's Sergio Busquets fouls Germany's Jamal Musiala before being shown yellow card.",
+      altText: 'alt text',
     },
     {
-      src: 'https://via.placeholder.com/1640x1180.jpg',
-      altText: '',
+      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:
-        'Surveillance footage shows a missile hitting a residential building in Kyiv, Ukraine, February 26, 2022, in this still image taken from a video obtained by REUTERS',
+        "Spain's Sergio Busquets is shown a yellow card by referee Danny Desmond Makkelie.",
+      altText: 'alt text',
+    },
+    {
+      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.",
+      altText: 'alt text',
+    },
+    {
+      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.",
+      altText: 'alt text',
     },
   ];
-  const altTextLayouts = [{ breakpoint: 450, rows: [2] }];
+  const archieMLBlock = {
+    id: 'my-photo-pack',
+    class: 'mb-2',
+    width: 'wide' as const,
+    textWidth: 'normal' as const,
+    gap: Number('15'),
+    images: archieMLImages,
+    layouts: [
+      { breakpoint: 750, rows: [2, 3] },
+      { breakpoint: 450, rows: [1, 2, 2] },
+    ],
+  };
 </script>
 
-<Template let:args>
-  <PhotoPack {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     width: 'wide',
     textWidth: 'normal',
     images: defaultImages,
     layouts: defaultLayouts,
-  }}"
-/>
-
-<Story
-  name="ArchieML"
-  {...withStoryDocs(archieMLDocs)}
-  args="{archieMLBlock}"
-/>
-
-<Story
-  name="Missing altText"
-  args="{{
-    width: 'wide',
-    textWidth: 'normal',
-    images: altTextImages,
-    layouts: altTextLayouts,
-  }}"
-  {...withStoryDocs(missingAltTextDocs)}
+  }}
 />
+<Story name="ArchieML" args={archieMLBlock} />

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

@@ -1,33 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        width: {
-            control: string;
-            options: string[];
-        };
-        textWidth: {
-            control: string;
-            options: string[];
-        };
+import PhotoPack from './PhotoPack.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof PhotoPack;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PhotoPackProps = typeof __propDef.props;
-export type PhotoPackEvents = typeof __propDef.events;
-export type PhotoPackSlots = typeof __propDef.slots;
-export default class PhotoPack extends SvelteComponent<PhotoPackProps, PhotoPackEvents, PhotoPackSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const PhotoPack: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PhotoPack = InstanceType<typeof PhotoPack>;
+export default PhotoPack;