53 lines
3 KiB
JavaScript
53 lines
3 KiB
JavaScript
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};
|