58 lines
12 KiB
JavaScript
58 lines
12 KiB
JavaScript
import{S as Q,i as G,s as B,g as b,m as _,t as h,h as g,j as w,G as L,o as D,y as S,b as y,d as k,e as E,v as J,w as X,f as I,I as Y,F as V,z as Z,A as ee,C as z}from"./index-df681c7c.js";import{g as N,a as $}from"./spread-8a54911c.js";import{p as te,M as ne,T as se,S as W}from"./collect-stories-a6a786e2.js";import{B as H}from"./Block-f95db830.js";import{P as ie}from"./PaddingReset-6a0440e6.js";import{b as K,w as oe}from"./withParams-47e2ab71.js";const re=`A full-width photo inside the text well.
|
|
|
|
\`\`\`svelte
|
|
<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"
|
|
lazy="{false}"
|
|
width="normal"
|
|
/>
|
|
\`\`\`
|
|
`,ae=`An example of using \`FeaturePhoto\` in the Graphics Kit with a Google Doc.
|
|
|
|
\`\`\`yaml
|
|
# Google doc block
|
|
Type: photo
|
|
Width: normal
|
|
Src: images/shark.jpg
|
|
AltText: The king of the sea
|
|
Caption: Carcharodon carcharias - REUTERS
|
|
\`\`\`
|
|
|
|
\`\`\`svelte
|
|
<!-- App.svelte -->
|
|
<script>
|
|
// Add FeaturePhoto to imports from graphics-components
|
|
import { FeaturePhoto } from '@reuters-graphics/graphics-components';
|
|
|
|
// These should be already imported for you.
|
|
import content from '$locales/en/content.json';
|
|
import { assets } from '$app/paths';
|
|
<\/script>
|
|
|
|
{#each content.blocks as block}
|
|
{#if block.Type === 'text'}
|
|
<!-- ... other blocks -->
|
|
|
|
<!-- Copy/paste into your blocks loop! -->
|
|
{:else if block.Type === 'photo'}
|
|
<FeaturePhoto
|
|
width="{block.Width}"
|
|
src="{\`\${assets}/\${block.Src}\`}"
|
|
altText="{block.AltText}"
|
|
caption="{block.Caption}"
|
|
/>
|
|
<!-- END copy/paste -->
|
|
{/if}
|
|
{/each}
|
|
\`\`\`
|
|
`,le="If your photo is missing `altText` a small warning will overlay the image.\n";function ce(r){let e,n;return{c(){e=D("div"),y(e,"class","placeholder w-full svelte-g9m2b0"),y(e,"style",n=`height: ${r[5]}px;`)},m(t,i){k(t,e,i)},p(t,i){i&32&&n!==(n=`height: ${t[5]}px;`)&&y(e,"style",n)},d(t){t&&I(e)}}}function fe(r){let e,n;return{c(){e=D("img"),y(e,"class","w-full my-0"),V(e.src,n=r[0])||y(e,"src",n),y(e,"alt",r[1])},m(t,i){k(t,e,i)},p(t,i){i&1&&!V(e.src,n=t[0])&&y(e,"src",n),i&2&&y(e,"alt",t[1])},d(t){t&&I(e)}}}function q(r){let e,n;return e=new ie({props:{containerIsFluid:r[6]==="fluid",$$slots:{default:[de]},$$scope:{ctx:r}}}),{c(){b(e.$$.fragment)},m(t,i){_(e,t,i),n=!0},p(t,i){const o={};i&64&&(o.containerIsFluid=t[6]==="fluid"),i&131216&&(o.$$scope={dirty:i,ctx:t}),e.$set(o)},i(t){n||(h(e.$$.fragment,t),n=!0)},o(t){g(e.$$.fragment,t),n=!1},d(t){w(e,t)}}}function pe(r){let e,n;return{c(){e=D("figcaption"),n=Z(r[4])},m(t,i){k(t,e,i),E(e,n)},p(t,i){i&16&&ee(n,t[4])},d(t){t&&I(e)}}}function de(r){let e,n;return e=new H({props:{width:r[7],class:"fmx-auto fmy-0",$$slots:{default:[pe]},$$scope:{ctx:r}}}),{c(){b(e.$$.fragment)},m(t,i){_(e,t,i),n=!0},p(t,i){const o={};i&128&&(o.width=t[7]),i&131088&&(o.$$scope={dirty:i,ctx:t}),e.$set(o)},i(t){n||(h(e.$$.fragment,t),n=!0)},o(t){g(e.$$.fragment,t),n=!1},d(t){w(e,t)}}}function j(r){let e;return{c(){e=D("div"),e.textContent="altText",y(e,"class","alt-warning absolute text-xxs py-1 px-2 svelte-g9m2b0")},m(n,t){k(n,e,t)},d(n){n&&I(e)}}}function ue(r){let e,n,t,i;function o(c,d){return!c[8]||c[11]&&c[9]?fe:ce}let m=o(r),p=m(r),l=r[4]&&q(r),f=!r[1]&&j();return{c(){e=D("figure"),p.c(),n=S(),l&&l.c(),t=S(),f&&f.c(),y(e,"aria-label","media"),y(e,"class","w-full flex flex-col relative")},m(c,d){k(c,e,d),p.m(e,null),E(e,n),l&&l.m(e,null),E(e,t),f&&f.m(e,null),r[16](e),i=!0},p(c,d){m===(m=o(c))&&p?p.p(c,d):(p.d(1),p=m(c),p&&(p.c(),p.m(e,n))),c[4]?l?(l.p(c,d),d&16&&h(l,1)):(l=q(c),l.c(),h(l,1),l.m(e,t)):l&&(J(),g(l,1,1,()=>{l=null}),X()),c[1]?f&&(f.d(1),f=null):f||(f=j(),f.c(),f.m(e,null))},i(c){i||(h(l),i=!0)},o(c){g(l),i=!1},d(c){c&&I(e),p.d(),l&&l.d(),f&&f.d(),r[16](null)}}}function me(r){let e,n;return e=new H({props:{width:r[6],class:"photo fmy-6 "+r[3],id:r[2],$$slots:{default:[ue]},$$scope:{ctx:r}}}),{c(){b(e.$$.fragment)},m(t,i){_(e,t,i),n=!0},p(t,[i]){const o={};i&64&&(o.width=t[6]),i&8&&(o.class="photo fmy-6 "+t[3]),i&4&&(o.id=t[2]),i&133107&&(o.$$scope={dirty:i,ctx:t}),e.$set(o)},i(t){n||(h(e.$$.fragment,t),n=!0)},o(t){g(e.$$.fragment,t),n=!1},d(t){w(e,t)}}}function he(r,e,n){let{src:t}=e,{altText:i}=e,{id:o=""}=e,{class:m=""}=e,{caption:p}=e,{height:l=100}=e,{width:f="normal"}=e,{textWidth:c="normal"}=e,{lazy:d=!1}=e,{top:v=0}=e,{bottom:A=0}=e,{left:x=0}=e,{right:P=0}=e,T=!1,s;const u=typeof IntersectionObserver<"u";L(()=>{if(d&&u){const a=`${A}px ${x}px ${v}px ${P}px`,C=new IntersectionObserver(U=>{n(9,T=U[0].isIntersecting),T&&C.unobserve(s)},{rootMargin:a});return C.observe(s),()=>C.unobserve(s)}});function M(a){Y[a?"unshift":"push"](()=>{s=a,n(10,s)})}return r.$$set=a=>{"src"in a&&n(0,t=a.src),"altText"in a&&n(1,i=a.altText),"id"in a&&n(2,o=a.id),"class"in a&&n(3,m=a.class),"caption"in a&&n(4,p=a.caption),"height"in a&&n(5,l=a.height),"width"in a&&n(6,f=a.width),"textWidth"in a&&n(7,c=a.textWidth),"lazy"in a&&n(8,d=a.lazy),"top"in a&&n(12,v=a.top),"bottom"in a&&n(13,A=a.bottom),"left"in a&&n(14,x=a.left),"right"in a&&n(15,P=a.right)},[t,i,o,m,p,l,f,c,d,T,s,u,v,A,x,P,M]}class R extends Q{constructor(e){super(),G(this,e,he,me,B,{src:0,altText:1,id:2,class:3,caption:4,height:5,width:6,textWidth:7,lazy:8,top:12,bottom:13,left:14,right:15})}}R.__docgen={version:3,name:"FeaturePhoto.svelte",data:[{keywords:[{name:"type",description:"{string}"},{name:"required",description:""}],visibility:"public",description:"Photo src",name:"src",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"}},{keywords:[{name:"type",description:"{string}"},{name:"required",description:""}],visibility:"public",description:"Photo altText",name:"altText",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"}},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Add an id to target with custom CSS.",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{visibility:"public",description:"Add extra classes to target with custom CSS.",keywords:[{name:"type",description:"{string}"}],name:"class",kind:"const",static:!1,readonly:!0,type:{kind:"type",text:"string",type:"string"},localName:"cls",defaultValue:""},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Caption below the photo",name:"caption",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"}},{keywords:[],visibility:"public",description:"Height of the photo placeholder when lazy-loading",name:"height",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:100},{keywords:[],visibility:"public",description:"Width of the container, one of: normal, wide, wider, widest or fluid",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:`Set a different width for the text within the text well, for example,
|
|
"normal" to keep the title, description and notes inline with the rest
|
|
of the text well. Can't ever be wider than \`width\`.`,name:"textWidth",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"},{keywords:[],visibility:"public",description:"Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)",name:"lazy",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading.",name:"top",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{keywords:[],visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading.",name:"bottom",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{keywords:[],visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` when lazy loading.",name:"left",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{keywords:[],visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` when lazy loading.",name:"right",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const O=""+new URL("shark-f4201fc0.jpg",import.meta.url).href;function ge(r){let e,n;const t=[r[1]];let i={};for(let o=0;o<t.length;o+=1)i=z(i,t[o]);return e=new R({props:i}),{c(){b(e.$$.fragment)},m(o,m){_(e,o,m),n=!0},p(o,m){const p=m&2?N(t,[$(o[1])]):{};e.$set(p)},i(o){n||(h(e.$$.fragment,o),n=!0)},o(o){g(e.$$.fragment,o),n=!1},d(o){w(e,o)}}}function ye(r){let e,n,t,i,o,m,p,l,f,c;const d=[{title:"Components/FeaturePhoto"},{component:R},r[0]];let v={};for(let s=0;s<d.length;s+=1)v=z(v,d[s]);e=new ne({props:v}),t=new se({props:{$$slots:{default:[ge,({args:s})=>({1:s}),({args:s})=>s?2:0]},$$scope:{ctx:r}}}),o=new W({props:{name:"Default",args:{src:O,altText:"A shark!",width:"normal",caption:"Carcharodon carcharias - REUTERS"}}});const A=[{name:"🚀 QUICKIT"},{args:{src:O,altText:"A shark!",width:"normal",caption:"Carcharodon carcharias - REUTERS"}},K(ae)];let x={};for(let s=0;s<A.length;s+=1)x=z(x,A[s]);p=new W({props:x});const P=[{name:"Missing altText"},{args:{src:O,width:"normal",caption:"Carcharodon carcharias - REUTERS"}},K(le)];let T={};for(let s=0;s<P.length;s+=1)T=z(T,P[s]);return f=new W({props:T}),{c(){b(e.$$.fragment),n=S(),b(t.$$.fragment),i=S(),b(o.$$.fragment),m=S(),b(p.$$.fragment),l=S(),b(f.$$.fragment)},m(s,u){_(e,s,u),k(s,n,u),_(t,s,u),k(s,i,u),_(o,s,u),k(s,m,u),_(p,s,u),k(s,l,u),_(f,s,u),c=!0},p(s,[u]){const M=u&1?N(d,[d[0],d[1],$(s[0])]):{};e.$set(M);const a={};u&6&&(a.$$scope={dirty:u,ctx:s}),t.$set(a);const C={};p.$set(C);const U={};f.$set(U)},i(s){c||(h(e.$$.fragment,s),h(t.$$.fragment,s),h(o.$$.fragment,s),h(p.$$.fragment,s),h(f.$$.fragment,s),c=!0)},o(s){g(e.$$.fragment,s),g(t.$$.fragment,s),g(o.$$.fragment,s),g(p.$$.fragment,s),g(f.$$.fragment,s),c=!1},d(s){s&&(I(n),I(i),I(m),I(l)),w(e,s),w(t,s),w(o,s),w(p,s),w(f,s)}}}function be(r){return[{...oe(re),argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]},textWidth:{control:"select",options:["normal","wide","wider","widest","fluid"]}}}]}class _e extends Q{constructor(e){super(),G(this,e,be,ye,B,{})}}const F=te(_e,{meta:{title:"Components/FeaturePhoto"},stories:{"tpl:default":{storyId:"components-featurephoto--default",name:"default",template:!0,source:"<FeaturePhoto {...args} />",hasArgs:!0},Default:{storyId:"components-featurephoto--default",name:"Default",template:!1,source:"",hasArgs:!1},QUICKIT:{storyId:"components-featurephoto--quickit",name:"🚀 QUICKIT",template:!1,source:"",hasArgs:!1},MissingAltText:{storyId:"components-featurephoto--missing-alt-text",name:"Missing altText",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","quickitDocs","missingAltTextDocs","FeaturePhoto","sharkSrc","withComponentDocs","withStoryDocs"]}),Ae=F.meta,Pe=["Default","QUICKIT","MissingAltText"],Se=F.stories.Default,Ce=F.stories.QUICKIT,De=F.stories.MissingAltText;export{Se as Default,De as MissingAltText,Ce as QUICKIT,Pe as __namedExportsOrder,Ae as default};
|
|
//# sourceMappingURL=FeaturePhoto.stories-347c908a.js.map
|