import{j as t}from"./index-bIIEL2MP.js";import{useMDXComponents as s}from"./index-CO-0pc0F.js";import{M as i,C as n}from"./index-Z-6k0Xrj.js";import{F as a,D as c,M as p}from"./FeaturePhoto.stories-BycxEqUA.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"./FeaturePhoto-CKELMwR8.js";import"./index-client-BAw8T8-V.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./this-CrUBQEQ_.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./shark-D70DK9Ak.js";function r(o){const e={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...s(),...o.components};return t.jsxs(t.Fragment,{children:[t.jsx(i,{of:a}),`
`,t.jsx(e.h1,{id:"featurephoto",children:"FeaturePhoto"}),`
`,t.jsxs(e.p,{children:["The ",t.jsx(e.code,{children:"FeaturePhoto"})," component adds a full-width photo."]}),`
`,t.jsx(e.pre,{children:t.jsx(e.code,{className:"language-svelte",children:`<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"
/>
`})}),`
`,t.jsx(n,{of:c}),`
`,t.jsx(e.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
`,t.jsx(e.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
`,t.jsx(e.pre,{children:t.jsx(e.code,{className:"language-yaml",children:`# ArchieML doc
[blocks]

type: photo
width: normal
src: images/shark.jpg
altText: The king of the sea
caption: Carcharodon carcharias - REUTERS

[]
`})}),`
`,t.jsxs(e.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",t.jsx(e.code,{children:"FeaturePhoto"})," component."]}),`
`,t.jsx(e.pre,{children:t.jsx(e.code,{className:"language-svelte",children:`<!-- App.svelte -->
<script>
  import { FeaturePhoto } from '@reuters-graphics/graphics-components';

  import content from '$locales/en/content.json';
  import { assets } from '$app/paths';
<\/script>

{#each content.blocks as block}
  {#if block.Type === 'text'}
    <!-- ... -->
  {:else if block.type === 'photo'}
    <FeaturePhoto
      width={block.width}
      src={\`\${assets}/\${block.src}\`}
      altText={block.altText}
      caption={block.caption}
    />
  {/if}
{/each}
`})}),`
`,t.jsx(e.h2,{id:"missing-alt-text",children:"Missing alt text"}),`
`,t.jsxs(e.p,{children:[t.jsx(e.code,{children:"altText"})," is required in this component. If your photo is missing it, a small red text box will overlay the image."]}),`
`,t.jsx(n,{of:p})]})}function E(o={}){const{wrapper:e}={...s(),...o.components};return e?t.jsx(e,{...o,children:t.jsx(r,{...o})}):r(o)}export{E as default};