15 lines
8.1 KiB
JavaScript
15 lines
8.1 KiB
JavaScript
import{S as Q,i as V,s as X,k as le,d as C,t as D,v as se,h as T,w as re,f as A,M as ne,G as ae,g as S,m as j,j as z,y as R,o as b,b as f,N as oe,p as k,O as ie,K as fe,z as P,e as _,A as W,F as U,C as Z}from"./index-df681c7c.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-a6a786e2.js";import{e as G}from"./each-e59479a4.js";import{B as pe}from"./Block-2886d499.js";import{g as O}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/" />
|
|
\`\`\`
|
|
`,J=ce([]);function K(n,t,s){const e=n.slice();return e[10]=t[s],e}function L(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(){S(t.$$.fragment)},m(e,l){j(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){z(t,e)}}}function Y(n){let t,s;return{c(){t=b("div"),s=P(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&&W(s,e[2]),l&64&&k(t,"stacked",e[6]&&e[6]<750)},d(e){e&&A(t)}}}function H(n){let t,s,e,l,a,i=n[10].kicker.name+"",o,u,r,m=n[10].title+"",v,B,c,M=O(new Date(n[10].display_time))+"",p,w,y,h,I,q,F,N,E;return{c(){t=b("div"),s=b("a"),e=b("div"),l=b("div"),a=b("div"),o=P(i),u=R(),r=b("div"),v=P(m),B=R(),c=b("div"),p=P(M),w=R(),y=b("div"),h=b("img"),E=R(),f(a,"class","kicker m-0 body-caption svelte-1tl145l"),f(a,"data-chromatic","ignore"),f(r,"class","title m-0 body-caption svelte-1tl145l"),f(r,"data-chromatic","ignore"),f(c,"class","publish-time body-caption 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,I=n[10].thumbnail.renditions.landscape["240w"])||f(h,"src",I),f(h,"alt",q=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",N=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,o),_(l,u),_(l,r),_(r,v),_(l,B),_(l,c),_(c,p),_(e,w),_(e,y),_(y,h),_(t,E)},p(d,g){g&128&&i!==(i=d[10].kicker.name+"")&&W(o,i),g&128&&m!==(m=d[10].title+"")&&W(v,m),g&128&&M!==(M=O(new Date(d[10].display_time))+"")&&W(p,M),g&64&&k(l,"xs",d[6]&&d[6]<450),g&128&&!U(h.src,I=d[10].thumbnail.renditions.landscape["240w"])&&f(h,"src",I),g&128&&q!==(q=d[10].thumbnail.caption||d[10].thumbnail.alt_text)&&f(h,"alt",q),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&&N!==(N=d[1]==="_blank"?"noreferrer":null)&&f(s,"rel",N)},d(d){d&&A(t)}}}function we(n){let t,s,e,l=n[2]&&Y(n),a=G(n[7]),i=[];for(let o=0;o<a.length;o+=1)i[o]=H(K(n,a,o));return{c(){l&&l.c(),t=R(),s=b("div");for(let o=0;o<i.length;o+=1)i[o].c();f(s,"class","referral-container inline-flex flex-wrap w-full justify-between svelte-1tl145l"),oe(()=>n[9].call(s)),k(s,"stacked",n[6]&&n[6]<750),k(s,"xs",n[6]&&n[6]<450)},m(o,u){l&&l.m(o,u),C(o,t,u),C(o,s,u);for(let r=0;r<i.length;r+=1)i[r]&&i[r].m(s,null);e=ie(s,n[9].bind(s))},p(o,u){if(o[2]?l?l.p(o,u):(l=Y(o),l.c(),l.m(t.parentNode,t)):l&&(l.d(1),l=null),u&194){a=G(o[7]);let r;for(r=0;r<a.length;r+=1){const m=K(o,a,r);i[r]?i[r].p(m,u):(i[r]=H(m),i[r].c(),i[r].m(s,null))}for(;r<i.length;r+=1)i[r].d(1);i.length=a.length}u&64&&k(s,"stacked",o[6]&&o[6]<750),u&64&&k(s,"xs",o[6]&&o[6]<450)},d(o){o&&(A(t),A(s)),l&&l.d(o),fe(i,o),e()}}}function be(n){let t,s,e=n[7].length===n[0]&&L(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=L(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&&A(t),e&&e.d(l)}}}function ke(n,t,s){let e;ne(n,J,c=>s(7,e=c));let{section:l="/world/"}=t,{number:a=4}=t,{linkTarget:i="_self"}=t,{heading:o=""}=t,{width:u="wide"}=t,{id:r=""}=t,{class:m=""}=t,v;ae(async()=>{try{const M=(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);J.set(M)}catch{console.warn("Unable to fetch referral links.")}}),O();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,i=c.linkTarget),"heading"in c&&s(2,o=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,i,o,u,r,m,v,e,l,B]}class ee extends Q{constructor(t){super(),V(this,t,ke,be,X,{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(){S(t.$$.fragment)},m(a,i){j(t,a,i),s=!0},p(a,i){const o=i&2?$(e,[x(a[1])]):{};t.$set(o)},i(a){s||(D(t.$$.fragment,a),s=!0)},o(a){T(t.$$.fragment,a),s=!1},d(a){z(t,a)}}}function ye(n){let t,s,e,l,a,i;const o=[{title:"Components/ReferralBlock"},{component:ee},n[0]];let u={};for(let r=0;r<o.length;r+=1)u=Z(u,o[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(){S(t.$$.fragment),s=R(),S(e.$$.fragment),l=R(),S(a.$$.fragment)},m(r,m){j(t,r,m),C(r,s,m),j(e,r,m),C(r,l,m),j(a,r,m),i=!0},p(r,[m]){const v=m&1?$(o,[o[0],o[1],x(r[0])]):{};t.$set(v);const B={};m&6&&(B.$$scope={dirty:m,ctx:r}),e.$set(B)},i(r){i||(D(t.$$.fragment,r),D(e.$$.fragment,r),D(a.$$.fragment,r),i=!0)},o(r){T(t.$$.fragment,r),T(e.$$.fragment,r),T(a.$$.fragment,r),i=!1},d(r){r&&(A(s),A(l)),z(t,r),z(e,r),z(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 Q{constructor(t){super(),V(this,t,De,ye,X,{})}}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"]}),Ie=te.meta,qe=["Default"],Fe=te.stories.Default;export{Fe as Default,qe as __namedExportsOrder,Ie as default};
|
|
//# sourceMappingURL=ReferralBlock.stories-6c29a636.js.map
|