15 lines
8.2 KiB
JavaScript
15 lines
8.2 KiB
JavaScript
import{S as G,i as H,s as V,e as le,b as C,t as D,q as se,a as T,r as re,f as S,X as ne,D as ae,c as z,m as A,d as I,p as R,l as b,h as f,Q as ie,B as k,R as oe,K as fe,y as W,k as _,z as N,F as U,C as Z}from"./index-2c1648fc.js";import{g as $,a as x}from"./spread-8a54911c.js";import{w as ce,p as me,M as ue,T as de,S as _e}from"./collect-stories-640c7888.js";import{e as J}from"./each-e59479a4.js";import{B as pe}from"./Block-d69850f9.js";import{g as E}from"./time-f9db70de.js";import{w as he}from"./withParams-47e2ab71.js";import"./_commonjsHelpers-de833af9.js";const ge=`The \`ReferralBlock\` component creates a set of referral links from recent dotcom stories using the [recent stories by section API](https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?query=%7B%22section_ids%22%3A%22%2Fworld%2F%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D).
|
|
|
|
> The \`section\` prop determines which section stories are from.
|
|
>
|
|
> You can get the section ID from the section page on dotcom. For example, the section ID for World - Europe stories at \`www.reuters.com/world/europe/\` would be \`/world/europe/\`. (The leading and trailing slashes are required!)
|
|
|
|
\`\`\`svelte
|
|
<script>
|
|
import { ReferralBlock } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<ReferralBlock section="/lifestyle/sports/" />
|
|
\`\`\`
|
|
`,K=ce([]);function L(n,t,s){const e=n.slice();return e[10]=t[s],e}function Q(n){let t,s;return t=new pe({props:{width:n[3],id:n[4],class:"referrals-block fmy-8 "+n[5],$$slots:{default:[we]},$$scope:{ctx:n}}}),{c(){z(t.$$.fragment)},m(e,l){A(t,e,l),s=!0},p(e,l){const a={};l&8&&(a.width=e[3]),l&16&&(a.id=e[4]),l&32&&(a.class="referrals-block fmy-8 "+e[5]),l&8390&&(a.$$scope={dirty:l,ctx:e}),t.$set(a)},i(e){s||(D(t.$$.fragment,e),s=!0)},o(e){T(t.$$.fragment,e),s=!1},d(e){I(t,e)}}}function X(n){let t,s;return{c(){t=b("div"),s=W(n[2]),f(t,"class","heading h4 font-bold svelte-1tl145l"),k(t,"stacked",n[6]&&n[6]<750)},m(e,l){C(e,t,l),_(t,s)},p(e,l){l&4&&N(s,e[2]),l&64&&k(t,"stacked",e[6]&&e[6]<750)},d(e){e&&S(t)}}}function Y(n){let t,s,e,l,a,o=n[10].kicker.name+"",i,u,r,m=n[10].title+"",v,B,c,q=E(new Date(n[10].display_time))+"",p,w,y,h,M,j,F,P,O;return{c(){t=b("div"),s=b("a"),e=b("div"),l=b("div"),a=b("div"),i=W(o),u=R(),r=b("div"),v=W(m),B=R(),c=b("div"),p=W(q),w=R(),y=b("div"),h=b("img"),O=R(),f(a,"class","kicker m-0 body-caption leading-tighter svelte-1tl145l"),f(a,"data-chromatic","ignore"),f(r,"class","title m-0 body-caption leading-tighter svelte-1tl145l"),f(r,"data-chromatic","ignore"),f(c,"class","publish-time body-caption leading-tighter svelte-1tl145l"),f(c,"data-chromatic","ignore"),f(l,"class","headline svelte-1tl145l"),k(l,"xs",n[6]&&n[6]<450),f(h,"class","block object-cover m-0 w-full svelte-1tl145l"),f(h,"data-chromatic","ignore"),U(h.src,M=n[10].thumbnail.renditions.landscape["240w"])||f(h,"src",M),f(h,"alt",j=n[10].thumbnail.caption||n[10].thumbnail.alt_text),f(y,"class","image-container block m-0 overflow-hidden relative svelte-1tl145l"),k(y,"xs",n[6]&&n[6]<450),f(e,"class","referral-pack flex justify-around my-0 mx-auto"),f(s,"href",F="https://www.reuters.com"+n[10].canonical_url),f(s,"target",n[1]),f(s,"rel",P=n[1]==="_blank"?"noreferrer":null),f(s,"class","svelte-1tl145l"),f(t,"class","referral svelte-1tl145l")},m(d,g){C(d,t,g),_(t,s),_(s,e),_(e,l),_(l,a),_(a,i),_(l,u),_(l,r),_(r,v),_(l,B),_(l,c),_(c,p),_(e,w),_(e,y),_(y,h),_(t,O)},p(d,g){g&128&&o!==(o=d[10].kicker.name+"")&&N(i,o),g&128&&m!==(m=d[10].title+"")&&N(v,m),g&128&&q!==(q=E(new Date(d[10].display_time))+"")&&N(p,q),g&64&&k(l,"xs",d[6]&&d[6]<450),g&128&&!U(h.src,M=d[10].thumbnail.renditions.landscape["240w"])&&f(h,"src",M),g&128&&j!==(j=d[10].thumbnail.caption||d[10].thumbnail.alt_text)&&f(h,"alt",j),g&64&&k(y,"xs",d[6]&&d[6]<450),g&128&&F!==(F="https://www.reuters.com"+d[10].canonical_url)&&f(s,"href",F),g&2&&f(s,"target",d[1]),g&2&&P!==(P=d[1]==="_blank"?"noreferrer":null)&&f(s,"rel",P)},d(d){d&&S(t)}}}function we(n){let t,s,e,l=n[2]&&X(n),a=J(n[7]),o=[];for(let i=0;i<a.length;i+=1)o[i]=Y(L(n,a,i));return{c(){l&&l.c(),t=R(),s=b("div");for(let i=0;i<o.length;i+=1)o[i].c();f(s,"class","referral-container inline-flex flex-wrap w-full justify-between svelte-1tl145l"),ie(()=>n[9].call(s)),k(s,"stacked",n[6]&&n[6]<750),k(s,"xs",n[6]&&n[6]<450)},m(i,u){l&&l.m(i,u),C(i,t,u),C(i,s,u);for(let r=0;r<o.length;r+=1)o[r]&&o[r].m(s,null);e=oe(s,n[9].bind(s))},p(i,u){if(i[2]?l?l.p(i,u):(l=X(i),l.c(),l.m(t.parentNode,t)):l&&(l.d(1),l=null),u&194){a=J(i[7]);let r;for(r=0;r<a.length;r+=1){const m=L(i,a,r);o[r]?o[r].p(m,u):(o[r]=Y(m),o[r].c(),o[r].m(s,null))}for(;r<o.length;r+=1)o[r].d(1);o.length=a.length}u&64&&k(s,"stacked",i[6]&&i[6]<750),u&64&&k(s,"xs",i[6]&&i[6]<450)},d(i){i&&(S(t),S(s)),l&&l.d(i),fe(o,i),e()}}}function be(n){let t,s,e=n[7].length===n[0]&&Q(n);return{c(){e&&e.c(),t=le()},m(l,a){e&&e.m(l,a),C(l,t,a),s=!0},p(l,[a]){l[7].length===l[0]?e?(e.p(l,a),a&129&&D(e,1)):(e=Q(l),e.c(),D(e,1),e.m(t.parentNode,t)):e&&(se(),T(e,1,1,()=>{e=null}),re())},i(l){s||(D(e),s=!0)},o(l){T(e),s=!1},d(l){l&&S(t),e&&e.d(l)}}}function ke(n,t,s){let e;ne(n,K,c=>s(7,e=c));let{section:l="/world/"}=t,{number:a=4}=t,{linkTarget:o="_self"}=t,{heading:i=""}=t,{width:u="wide"}=t,{id:r=""}=t,{class:m=""}=t,v;ae(async()=>{try{const q=(await(await fetch("https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?"+new URLSearchParams({query:JSON.stringify({section_ids:l,size:20,website:"reuters"})}))).json()).result.articles.filter(p=>{var w;return(w=p==null?void 0:p.kicker)==null?void 0:w.name}).filter(p=>{var w,y,h;return(h=(y=(w=p==null?void 0:p.thumbnail)==null?void 0:w.renditions)==null?void 0:y.landscape)==null?void 0:h["240w"]}).filter(p=>{var w;return!((w=p==null?void 0:p.content)!=null&&w.third_party)}).slice(0,a);K.set(q)}catch{console.warn("Unable to fetch referral links.")}}),E();function B(){v=this.clientWidth,s(6,v)}return n.$$set=c=>{"section"in c&&s(8,l=c.section),"number"in c&&s(0,a=c.number),"linkTarget"in c&&s(1,o=c.linkTarget),"heading"in c&&s(2,i=c.heading),"width"in c&&s(3,u=c.width),"id"in c&&s(4,r=c.id),"class"in c&&s(5,m=c.class)},[a,o,i,u,r,m,v,e,l,B]}class ee extends G{constructor(t){super(),H(this,t,ke,be,V,{section:8,number:0,linkTarget:1,heading:2,width:3,id:4,class:5})}}function ve(n){let t,s;const e=[n[1]];let l={};for(let a=0;a<e.length;a+=1)l=Z(l,e[a]);return t=new ee({props:l}),{c(){z(t.$$.fragment)},m(a,o){A(t,a,o),s=!0},p(a,o){const i=o&2?$(e,[x(a[1])]):{};t.$set(i)},i(a){s||(D(t.$$.fragment,a),s=!0)},o(a){T(t.$$.fragment,a),s=!1},d(a){I(t,a)}}}function ye(n){let t,s,e,l,a,o;const i=[{title:"Components/ReferralBlock"},{component:ee},n[0]];let u={};for(let r=0;r<i.length;r+=1)u=Z(u,i[r]);return t=new ue({props:u}),e=new de({props:{$$slots:{default:[ve,({args:r})=>({1:r}),({args:r})=>r?2:0]},$$scope:{ctx:n}}}),a=new _e({props:{name:"Default",args:{section:"/lifestyle/sports/",number:4,class:"fmy-5",heading:"More World Cup coverage"}}}),{c(){z(t.$$.fragment),s=R(),z(e.$$.fragment),l=R(),z(a.$$.fragment)},m(r,m){A(t,r,m),C(r,s,m),A(e,r,m),C(r,l,m),A(a,r,m),o=!0},p(r,[m]){const v=m&1?$(i,[i[0],i[1],x(r[0])]):{};t.$set(v);const B={};m&6&&(B.$$scope={dirty:m,ctx:r}),e.$set(B)},i(r){o||(D(t.$$.fragment,r),D(e.$$.fragment,r),D(a.$$.fragment,r),o=!0)},o(r){T(t.$$.fragment,r),T(e.$$.fragment,r),T(a.$$.fragment,r),o=!1},d(r){r&&(S(s),S(l)),I(t,r),I(e,r),I(a,r)}}}function De(n){return[{...he(ge),argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]},section:{control:"select",options:["/world/","/world/europe/","/lifestyle/","/lifestyle/sports/","/legal/","/business/","/business/energy/"]},number:{control:"select",options:[2,4,6,8]}}}]}class Be extends G{constructor(t){super(),H(this,t,De,ye,V,{})}}const te=me(Be,{meta:{title:"Components/ReferralBlock"},stories:{"tpl:default":{storyId:"components-referralblock--default",name:"default",template:!0,source:"<ReferralBlock {...args} />",hasArgs:!0},Default:{storyId:"components-referralblock--default",name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","ReferralBlock","withComponentDocs"]}),Me=te.meta,je=["Default"],Fe=te.stories.Default;export{Fe as Default,je as __namedExportsOrder,Me as default};
|
|
//# sourceMappingURL=ReferralBlock.stories-f0915fda.js.map
|