import{j as n}from"./index-bIIEL2MP.js";import{useMDXComponents as i}from"./index-CO-0pc0F.js";import{M as a,C as t}from"./index-Z-6k0Xrj.js";import{P as r,D as c,A as l}from"./PhotoPack.stories-BdYLyS8k.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./each-CVpBMMjG.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./size-DMdj3-I9.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./Markdown-DUxFwijc.js";import"./index-CX1x869l.js";function s(o){const e={blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...i(),...o.components};return n.jsxs(n.Fragment,{children:[n.jsx(a,{of:r}),`
`,n.jsx(e.h1,{id:"photopack",children:"PhotoPack"}),`
`,n.jsxs(e.p,{children:["The ",n.jsx(e.code,{children:"PhotoPack"})," component makes simple photo grids with custom layouts at various breakpoints."]}),`
`,n.jsxs(e.p,{children:[n.jsx(e.code,{children:"images"})," are defined with their src, alt text, captions and an optional ",n.jsx(e.code,{children:"maxHeight"}),", which ensures that an image is no taller than that height in any layout."]}),`
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-javascript",children:`const images = [
  {
    src: 'https://...',
    altText: 'Alt text',
    caption: 'Lorem ipsum. REUTERS/Photog',
    // Optional max-height of images across all layouts
    maxHeight: 800,
  },
  // ...
];
`})}),`
`,n.jsxs(e.p,{children:[n.jsx(e.code,{children:"layouts"})," optionally define how images are laid out at different breakpoints. You can customise the layouts and group images into ",n.jsx(e.code,{children:"rows"})," above a certain ",n.jsx(e.code,{children:"breakpoint"})," by specifying the number of images that should go in that row. For example:"]}),`
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-javascript",children:`const layouts = [
  {
    breakpoint: 450,
    rows: [1, 2, 1],
  },
];
`})}),`
`,n.jsxs(e.p,{children:["... tells the component that when the ",n.jsx(e.code,{children:"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."]}),`
`,n.jsx(e.p,{children:"If you don't specify any layouts, the component will use a default responsive layout based on the number of images in your pack."}),`
`,n.jsx(e.p,{children:"You can define as many layouts for as many images as you like."}),`
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<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} />
`})}),`
`,n.jsx(t,{of:c}),`
`,n.jsx(e.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
`,n.jsx(e.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-yaml",children:`# 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

    ...
  []

[]
`})}),`
`,n.jsxs(e.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",n.jsx(e.code,{children:"PhotoPack"})," component."]}),`
`,n.jsxs(e.blockquote,{children:[`
`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Important ❗"}),": The prop ",n.jsx(e.code,{children:"gap"})," must be a number. ArchieML renders all values -- including numbers -- as strings, so convert the ",n.jsx(e.code,{children:"prop"})," value to a number before passing it to ",n.jsx(e.code,{children:"PhotoPack"}),"."]}),`
`]}),`
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<!-- 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}
`})}),`
`,n.jsx(t,{of:l}),`
`,n.jsx(e.h2,{id:"smart-default-layouts",children:"Smart default layouts"}),`
`,n.jsxs(e.p,{children:["If you don't specify the ",n.jsx(e.code,{children:"layouts"})," prop, ",n.jsx(e.code,{children:"PhotoPack"})," will automatically generate responsive layouts based on the number of images and the container width."]}),`
`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"How it works:"})}),`
`,n.jsxs(e.ul,{children:[`
`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Desktop"})," (1024px+): Number of images per row depends on container width:",`
`,n.jsxs(e.ul,{children:[`
`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"normal"}),": max 2 per row"]}),`
`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"wide"})," / ",n.jsx(e.code,{children:"wider"}),": max 3 per row"]}),`
`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"widest"})," / ",n.jsx(e.code,{children:"fluid"}),": max 4 per row"]}),`
`]}),`
`]}),`
`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Tablet"})," (768px+): Always max 2 per row"]}),`
`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Mobile"})," (below 768px): 1 per row"]}),`
`]}),`
`,n.jsxs(e.p,{children:["The smart defaults use a ",n.jsx(e.strong,{children:"bottom-heavy distribution"}),", meaning earlier rows have fewer images (making them larger and more prominent), while later rows have more images."]}),`
`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Examples:"})}),`
`,n.jsxs(e.ul,{children:[`
`,n.jsxs(e.li,{children:["5 images, ",n.jsx(e.code,{children:"wide"})," container, desktop: ",n.jsx(e.code,{children:"[2, 3]"})," (2 in first row, 3 in second)"]}),`
`,n.jsxs(e.li,{children:["7 images, ",n.jsx(e.code,{children:"widest"})," container, desktop: ",n.jsx(e.code,{children:"[3, 4]"})," (3 in first row, 4 in second)"]}),`
`,n.jsxs(e.li,{children:["4 images, any container, desktop: ",n.jsx(e.code,{children:"[2, 2]"})," (evenly distributed)"]}),`
`]}),`
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<script>
  import { PhotoPack } from '@reuters-graphics/graphics-components';

  const images = [
    { src: \`\${assets}/image1.jpg\`, altText: 'Photo 1', caption: 'Caption 1' },
    { src: \`\${assets}/image2.jpg\`, altText: 'Photo 2', caption: 'Caption 2' },
    { src: \`\${assets}/image3.jpg\`, altText: 'Photo 3', caption: 'Caption 3' },
    { src: \`\${assets}/image4.jpg\`, altText: 'Photo 4', caption: 'Caption 4' },
  ];
<\/script>

<!-- No layouts prop = smart defaults! -->
<PhotoPack {images} width="wide" />
`})})]})}function $(o={}){const{wrapper:e}={...i(),...o.components};return e?n.jsx(e,{...o,children:n.jsx(s,{...o})}):s(o)}export{$ as default};