15 lines
7.8 KiB
JavaScript
15 lines
7.8 KiB
JavaScript
import{S as K,i as V,s as X,e as te,a as C,b as D,g as se,t as T,c as le,d as S,L as re,o as ne,j as A,m as I,n as M,D as R,w,x as f,R as ae,y as b,T as oe,a5 as ie,M as N,z as d,Y as W,Q as U,p as Z,k as $,l as x}from"./index-25af778d.js";import{w as fe,p as ce,M as me,T as ue,S as _e}from"./collect-stories-cce06d4a.js";import{B as de}from"./Block-9c89ee1a.js";import{g as E}from"./time-cc3fd1f0.js";import{w as he}from"./withParams-90715500.js";import"./_commonjsHelpers-725317a4.js";const pe=`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!)
|
|
|
|
\`\`\`html
|
|
<script>
|
|
import { ReferralBlock } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<ReferralBlock section="/lifestyle/sports/" />
|
|
\`\`\`
|
|
`,Y=fe([]);function J(n,t,l){const e=n.slice();return e[10]=t[l],e}function Q(n){let t,l;return t=new de({props:{width:n[3],id:n[4],cls:"referrals-block "+n[5],$$slots:{default:[ge]},$$scope:{ctx:n}}}),{c(){A(t.$$.fragment)},m(e,s){I(t,e,s),l=!0},p(e,s){const a={};s&8&&(a.width=e[3]),s&16&&(a.id=e[4]),s&32&&(a.cls="referrals-block "+e[5]),s&8390&&(a.$$scope={dirty:s,ctx:e}),t.$set(a)},i(e){l||(D(t.$$.fragment,e),l=!0)},o(e){T(t.$$.fragment,e),l=!1},d(e){M(t,e)}}}function G(n){let t,l;return{c(){t=w("h4"),l=N(n[2]),f(t,"class","svelte-10gkfhz"),b(t,"stacked",n[6]&&n[6]<750)},m(e,s){C(e,t,s),d(t,l)},p(e,s){s&4&&W(l,e[2]),s&64&&b(t,"stacked",e[6]&&e[6]<750)},d(e){e&&S(t)}}}function H(n){let t,l,e,s,a,i=n[10].kicker.name+"",o,u,r,m=n[10].title+"",v,B,c,y=E(new Date(n[10].display_time))+"",h,k,z,p,q,P,j,F,O;return{c(){t=w("div"),l=w("a"),e=w("div"),s=w("div"),a=w("div"),o=N(i),u=R(),r=w("div"),v=N(m),B=R(),c=w("div"),h=N(y),k=R(),z=w("div"),p=w("img"),O=R(),f(a,"class","kicker svelte-10gkfhz"),f(a,"data-chromatic","ignore"),f(r,"class","title svelte-10gkfhz"),f(r,"data-chromatic","ignore"),f(c,"class","publish-time svelte-10gkfhz"),f(c,"data-chromatic","ignore"),f(s,"class","headline svelte-10gkfhz"),b(s,"xs",n[6]&&n[6]<450),f(p,"data-chromatic","ignore"),U(p.src,q=n[10].thumbnail.renditions.landscape["240w"])||f(p,"src",q),f(p,"alt",P=n[10].thumbnail.caption||n[10].thumbnail.alt_text),f(p,"class","svelte-10gkfhz"),f(z,"class","image-container svelte-10gkfhz"),b(z,"xs",n[6]&&n[6]<450),f(e,"class","referral-pack svelte-10gkfhz"),f(l,"href",j="https://www.reuters.com"+n[10].canonical_url),f(l,"target",n[1]),f(l,"rel",F=n[1]==="_blank"?"noreferrer":null),f(l,"class","svelte-10gkfhz"),f(t,"class","referral svelte-10gkfhz")},m(_,g){C(_,t,g),d(t,l),d(l,e),d(e,s),d(s,a),d(a,o),d(s,u),d(s,r),d(r,v),d(s,B),d(s,c),d(c,h),d(e,k),d(e,z),d(z,p),d(t,O)},p(_,g){g&128&&i!==(i=_[10].kicker.name+"")&&W(o,i),g&128&&m!==(m=_[10].title+"")&&W(v,m),g&128&&y!==(y=E(new Date(_[10].display_time))+"")&&W(h,y),g&64&&b(s,"xs",_[6]&&_[6]<450),g&128&&!U(p.src,q=_[10].thumbnail.renditions.landscape["240w"])&&f(p,"src",q),g&128&&P!==(P=_[10].thumbnail.caption||_[10].thumbnail.alt_text)&&f(p,"alt",P),g&64&&b(z,"xs",_[6]&&_[6]<450),g&128&&j!==(j="https://www.reuters.com"+_[10].canonical_url)&&f(l,"href",j),g&2&&f(l,"target",_[1]),g&2&&F!==(F=_[1]==="_blank"?"noreferrer":null)&&f(l,"rel",F)},d(_){_&&S(t)}}}function ge(n){let t,l,e,s=n[2]&&G(n),a=n[7],i=[];for(let o=0;o<a.length;o+=1)i[o]=H(J(n,a,o));return{c(){s&&s.c(),t=R(),l=w("div");for(let o=0;o<i.length;o+=1)i[o].c();f(l,"class","referral-container svelte-10gkfhz"),ae(()=>n[9].call(l)),b(l,"stacked",n[6]&&n[6]<750),b(l,"xs",n[6]&&n[6]<450)},m(o,u){s&&s.m(o,u),C(o,t,u),C(o,l,u);for(let r=0;r<i.length;r+=1)i[r]&&i[r].m(l,null);e=oe(l,n[9].bind(l))},p(o,u){if(o[2]?s?s.p(o,u):(s=G(o),s.c(),s.m(t.parentNode,t)):s&&(s.d(1),s=null),u&194){a=o[7];let r;for(r=0;r<a.length;r+=1){const m=J(o,a,r);i[r]?i[r].p(m,u):(i[r]=H(m),i[r].c(),i[r].m(l,null))}for(;r<i.length;r+=1)i[r].d(1);i.length=a.length}u&64&&b(l,"stacked",o[6]&&o[6]<750),u&64&&b(l,"xs",o[6]&&o[6]<450)},d(o){s&&s.d(o),o&&S(t),o&&S(l),ie(i,o),e()}}}function ke(n){let t,l,e=n[7].length===n[0]&&Q(n);return{c(){e&&e.c(),t=te()},m(s,a){e&&e.m(s,a),C(s,t,a),l=!0},p(s,[a]){s[7].length===s[0]?e?(e.p(s,a),a&129&&D(e,1)):(e=Q(s),e.c(),D(e,1),e.m(t.parentNode,t)):e&&(se(),T(e,1,1,()=>{e=null}),le())},i(s){l||(D(e),l=!0)},o(s){T(e),l=!1},d(s){e&&e.d(s),s&&S(t)}}}function we(n,t,l){let e;re(n,Y,c=>l(7,e=c));let{section:s="/world/"}=t,{number:a=4}=t,{linkTarget:i="_self"}=t,{heading:o=""}=t,{width:u="wide"}=t,{id:r=""}=t,{cls:m=""}=t,v;ne(async()=>{try{const y=(await(await fetch("https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?"+new URLSearchParams({query:JSON.stringify({section_ids:s,size:20,website:"reuters"})}))).json()).result.articles.filter(h=>{var k;return(k=h==null?void 0:h.kicker)==null?void 0:k.name}).filter(h=>{var k,z,p;return(p=(z=(k=h==null?void 0:h.thumbnail)==null?void 0:k.renditions)==null?void 0:z.landscape)==null?void 0:p["240w"]}).filter(h=>{var k;return!((k=h==null?void 0:h.content)!=null&&k.third_party)}).slice(0,a);Y.set(y)}catch{console.warn("Unable to fetch referral links.")}}),E();function B(){v=this.clientWidth,l(6,v)}return n.$$set=c=>{"section"in c&&l(8,s=c.section),"number"in c&&l(0,a=c.number),"linkTarget"in c&&l(1,i=c.linkTarget),"heading"in c&&l(2,o=c.heading),"width"in c&&l(3,u=c.width),"id"in c&&l(4,r=c.id),"cls"in c&&l(5,m=c.cls)},[a,i,o,u,r,m,v,e,s,B]}class L extends K{constructor(t){super(),V(this,t,we,ke,X,{section:8,number:0,linkTarget:1,heading:2,width:3,id:4,cls:5})}}function be(n){let t,l;const e=[n[1]];let s={};for(let a=0;a<e.length;a+=1)s=Z(s,e[a]);return t=new L({props:s}),{c(){A(t.$$.fragment)},m(a,i){I(t,a,i),l=!0},p(a,i){const o=i&2?$(e,[x(a[1])]):{};t.$set(o)},i(a){l||(D(t.$$.fragment,a),l=!0)},o(a){T(t.$$.fragment,a),l=!1},d(a){M(t,a)}}}function ve(n){let t,l,e,s,a,i;const o=[{title:"Components/ReferralBlock"},{component:L},n[0]];let u={};for(let r=0;r<o.length;r+=1)u=Z(u,o[r]);return t=new me({props:u}),e=new ue({props:{$$slots:{default:[be,({args:r})=>({1:r}),({args:r})=>r?2:0]},$$scope:{ctx:n}}}),a=new _e({props:{name:"Default",args:{section:"/lifestyle/sports/",number:4,cls:"my-3"}}}),{c(){A(t.$$.fragment),l=R(),A(e.$$.fragment),s=R(),A(a.$$.fragment)},m(r,m){I(t,r,m),C(r,l,m),I(e,r,m),C(r,s,m),I(a,r,m),i=!0},p(r,[m]){const v=m&1?$(o,[o[0],m&0&&{component:L},m&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){M(t,r),r&&S(l),M(e,r),r&&S(s),M(a,r)}}}function ze(n){return[{...he(pe),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 De extends K{constructor(t){super(),V(this,t,ze,ve,X,{})}}const ee=ce(De,{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,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","ReferralBlock","withComponentDocs"]}),Ae=ee.meta,Ie=["Default"],Me=ee.stories.Default;export{Me as Default,Ie as __namedExportsOrder,Ae as default};
|
|
//# sourceMappingURL=ReferralBlock.stories-6d411230.js.map
|