25 lines
11 KiB
JavaScript
25 lines
11 KiB
JavaScript
import{S as Z,i as $,s as x,D as le,h as T,t as C,r as se,a as A,u as ie,k as j,p as ne,c as N,m as z,d as M,o as S,q as y,f as d,Q as re,C as v,R as oe,K as ae,e as V,j as h,x as L,w as Y,l as W}from"./index-C9aKRT5A.js";import{g as ee,a as te}from"./spread-CgU5AtxT.js";import{p as ce,M as fe,T as de,S as H,a as me,w as ue}from"./collect-stories-ceFdpR5E.js";import{e as J}from"./each-D6YF6ztN.js";import{B as pe}from"./Block-C7biTRWl.js";import{g as E}from"./time-Dt9E6jI9.js";import"./advancedFormat-D5cdT3Ux.js";import"./_commonjsHelpers-BosuxZz1.js";import"./dayjs.min-BIwLhz4I.js";const he=`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) or the [articles by collection API](https://www.reuters.com/pf/api/v3/content/fetch/articles-by-collection-alias-or-id-v1?query=%7B%22collection_alias%22%3A%22x-trump%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D).
|
|
|
|
> The \`section\` or \`collection\` prop determines which section or collection 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!)
|
|
>
|
|
> You should get a collection alias from the dotcom team.
|
|
|
|
\`\`\`svelte
|
|
<script>
|
|
import { ReferralBlock } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<ReferralBlock section="/lifestyle/sports/" />
|
|
\`\`\`
|
|
`,ge=`\`\`\`svelte
|
|
<script>
|
|
import { ReferralBlock } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<ReferralBlock collection="x-trump" number="{6}" class="fmy-8" />
|
|
\`\`\`
|
|
`;function K(i,t,s){const e=i.slice();return e[11]=t[s],e}function Q(i){let t,s;return t=new pe({props:{width:i[3],id:i[4],class:"referrals-block "+i[5],$$slots:{default:[_e]},$$scope:{ctx:i}}}),{c(){N(t.$$.fragment)},m(e,l){z(t,e,l),s=!0},p(e,l){const n={};l&8&&(n.width=e[3]),l&16&&(n.id=e[4]),l&32&&(n.class="referrals-block "+e[5]),l&16582&&(n.$$scope={dirty:l,ctx:e}),t.$set(n)},i(e){s||(C(t.$$.fragment,e),s=!0)},o(e){A(t.$$.fragment,e),s=!1},d(e){M(t,e)}}}function G(i){let t,s;return{c(){t=y("div"),s=V(i[2]),d(t,"class","heading h4 font-bold svelte-k1j779"),v(t,"stacked",i[6]&&i[6]<750)},m(e,l){T(e,t,l),h(t,s)},p(e,l){l&4&&L(s,e[2]),l&64&&v(t,"stacked",e[6]&&e[6]<750)},d(e){e&&j(t)}}}function X(i){let t,s,e,l,n,f=(i[11].headline_category||i[11].kicker.name)+"",o,m,c,g=i[11].title+"",b,B,r,a=E(new Date(i[11].display_time))+"",R,P,D,k,u,_,I,q,F;return{c(){t=y("div"),s=y("a"),e=y("div"),l=y("div"),n=y("div"),o=V(f),m=S(),c=y("div"),b=V(g),B=S(),r=y("div"),R=V(a),P=S(),D=y("div"),k=y("img"),F=S(),d(n,"class","kicker m-0 body-caption leading-tighter svelte-k1j779"),d(n,"data-chromatic","ignore"),d(c,"class","title m-0 body-caption leading-tighter svelte-k1j779"),d(c,"data-chromatic","ignore"),d(r,"class","publish-time body-caption leading-tighter svelte-k1j779"),d(r,"data-chromatic","ignore"),d(l,"class","headline svelte-k1j779"),v(l,"xs",i[6]&&i[6]<450),d(k,"class","block object-cover m-0 w-full svelte-k1j779"),d(k,"data-chromatic","ignore"),Y(k.src,u=i[11].thumbnail.renditions.landscape["240w"])||d(k,"src",u),d(k,"alt",_=i[11].thumbnail.caption||i[11].thumbnail.alt_text),d(D,"class","image-container block m-0 overflow-hidden relative svelte-k1j779"),v(D,"xs",i[6]&&i[6]<450),d(e,"class","referral-pack flex justify-around my-0 mx-auto"),d(s,"href",I="https://www.reuters.com"+i[11].canonical_url),d(s,"target",i[1]),d(s,"rel",q=i[1]==="_blank"?"noreferrer":null),d(s,"class","svelte-k1j779"),d(t,"class","referral svelte-k1j779")},m(p,w){T(p,t,w),h(t,s),h(s,e),h(e,l),h(l,n),h(n,o),h(l,m),h(l,c),h(c,b),h(l,B),h(l,r),h(r,R),h(e,P),h(e,D),h(D,k),h(t,F)},p(p,w){w&128&&f!==(f=(p[11].headline_category||p[11].kicker.name)+"")&&L(o,f),w&128&&g!==(g=p[11].title+"")&&L(b,g),w&128&&a!==(a=E(new Date(p[11].display_time))+"")&&L(R,a),w&64&&v(l,"xs",p[6]&&p[6]<450),w&128&&!Y(k.src,u=p[11].thumbnail.renditions.landscape["240w"])&&d(k,"src",u),w&128&&_!==(_=p[11].thumbnail.caption||p[11].thumbnail.alt_text)&&d(k,"alt",_),w&64&&v(D,"xs",p[6]&&p[6]<450),w&128&&I!==(I="https://www.reuters.com"+p[11].canonical_url)&&d(s,"href",I),w&2&&d(s,"target",p[1]),w&2&&q!==(q=p[1]==="_blank"?"noreferrer":null)&&d(s,"rel",q)},d(p){p&&j(t)}}}function _e(i){let t,s,e,l=i[2]&&G(i),n=J(i[7]),f=[];for(let o=0;o<n.length;o+=1)f[o]=X(K(i,n,o));return{c(){l&&l.c(),t=S(),s=y("div");for(let o=0;o<f.length;o+=1)f[o].c();d(s,"class","referral-container inline-flex flex-wrap w-full justify-between svelte-k1j779"),re(()=>i[10].call(s)),v(s,"stacked",i[6]&&i[6]<750),v(s,"xs",i[6]&&i[6]<450)},m(o,m){l&&l.m(o,m),T(o,t,m),T(o,s,m);for(let c=0;c<f.length;c+=1)f[c]&&f[c].m(s,null);e=oe(s,i[10].bind(s))},p(o,m){if(o[2]?l?l.p(o,m):(l=G(o),l.c(),l.m(t.parentNode,t)):l&&(l.d(1),l=null),m&194){n=J(o[7]);let c;for(c=0;c<n.length;c+=1){const g=K(o,n,c);f[c]?f[c].p(g,m):(f[c]=X(g),f[c].c(),f[c].m(s,null))}for(;c<f.length;c+=1)f[c].d(1);f.length=n.length}m&64&&v(s,"stacked",o[6]&&o[6]<750),m&64&&v(s,"xs",o[6]&&o[6]<450)},d(o){o&&(j(t),j(s)),l&&l.d(o),ae(f,o),e()}}}function ke(i){let t,s,e=i[7].length===i[0]&&Q(i);return{c(){e&&e.c(),t=le()},m(l,n){e&&e.m(l,n),T(l,t,n),s=!0},p(l,[n]){l[7].length===l[0]?e?(e.p(l,n),n&129&&C(e,1)):(e=Q(l),e.c(),C(e,1),e.m(t.parentNode,t)):e&&(se(),A(e,1,1,()=>{e=null}),ie())},i(l){s||(C(e),s=!0)},o(l){A(e),s=!1},d(l){l&&j(t),e&&e.d(l)}}}const we="recent-stories-by-sections-v1",ye="articles-by-collection-alias-or-id-v1";function be(i,t,s){let{section:e="/world/"}=t,{collection:l}=t,{number:n=4}=t,{linkTarget:f="_self"}=t,{heading:o=""}=t,{width:m="wide"}=t,{id:c=""}=t,{class:g="fmy-8"}=t,b,B=[];ne(async()=>{const a=!!l,R=a?ye:we;try{const k=(await(await fetch(`https://www.reuters.com/pf/api/v3/content/fetch/${R}?`+new URLSearchParams({query:JSON.stringify({section_ids:a?void 0:e,collection_alias:a?l:void 0,size:20,website:"reuters"})}))).json()).result.articles.filter(u=>{var _;return(u==null?void 0:u.headline_category)||((_=u==null?void 0:u.kicker)==null?void 0:_.name)}).filter(u=>{var _,I,q;return(q=(I=(_=u==null?void 0:u.thumbnail)==null?void 0:_.renditions)==null?void 0:I.landscape)==null?void 0:q["240w"]}).filter(u=>{var _;return!((_=u==null?void 0:u.content)!=null&&_.third_party)}).slice(0,n);s(7,B=k)}catch{console.warn("Unable to fetch referral links.")}}),E();function r(){b=this.clientWidth,s(6,b)}return i.$$set=a=>{"section"in a&&s(8,e=a.section),"collection"in a&&s(9,l=a.collection),"number"in a&&s(0,n=a.number),"linkTarget"in a&&s(1,f=a.linkTarget),"heading"in a&&s(2,o=a.heading),"width"in a&&s(3,m=a.width),"id"in a&&s(4,c=a.id),"class"in a&&s(5,g=a.class)},[n,f,o,m,c,g,b,B,e,l,r]}class O extends Z{constructor(t){super(),$(this,t,be,ke,x,{section:8,collection:9,number:0,linkTarget:1,heading:2,width:3,id:4,class:5})}}O.__docgen={version:3,name:"ReferralBlock.svelte",data:[{keywords:[],visibility:"public",description:`Section ID, which is often the URL path to the section page on reuters.com.
|
|
|
|
Note that not all section pages will be available in the recent stories by section API.`,name:"section",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"/world/"},{keywords:[],visibility:"public",description:"Collection alias, as defined in Arc Collections editor.",name:"collection",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{keywords:[{name:"required",description:""}],visibility:"public",description:"Number of referrals to show.",name:"number",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:4},{keywords:[],visibility:"public",description:"Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.",name:"linkTarget",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"_self"},{keywords:[],visibility:"public",description:"Add a heading to the referral block.",name:"heading",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[{name:"required",description:""}],visibility:"public",description:"Width of the component within the text well.",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"wide"},{keywords:[],visibility:"public",description:"Add an ID to target with SCSS.",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{visibility:"public",description:"Add a class to target with SCSS.",keywords:[],name:"class",kind:"const",static:!1,readonly:!0,type:{kind:"type",text:"string",type:"string"},localName:"cls",defaultValue:"fmy-8"}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function ve(i){let t,s;const e=[i[1]];let l={};for(let n=0;n<e.length;n+=1)l=W(l,e[n]);return t=new O({props:l}),{c(){N(t.$$.fragment)},m(n,f){z(t,n,f),s=!0},p(n,f){const o=f&2?ee(e,[te(n[1])]):{};t.$set(o)},i(n){s||(C(t.$$.fragment,n),s=!0)},o(n){A(t.$$.fragment,n),s=!1},d(n){M(t,n)}}}function Be(i){let t,s,e,l,n,f,o,m;const c=[{title:"Components/ReferralBlock"},{component:O},i[0]];let g={};for(let r=0;r<c.length;r+=1)g=W(g,c[r]);t=new fe({props:g}),e=new de({props:{$$slots:{default:[ve,({args:r})=>({1:r}),({args:r})=>r?2:0]},$$scope:{ctx:i}}}),n=new H({props:{name:"Default",args:{section:"/lifestyle/sports/",number:4,class:"fmy-0",heading:"More World Cup coverage"}}});const b=[{name:"By collection"},{args:{collection:"x-trump",number:6,class:"fmy-8",heading:"The latest Trump coverage"}},me(ge)];let B={};for(let r=0;r<b.length;r+=1)B=W(B,b[r]);return o=new H({props:B}),{c(){N(t.$$.fragment),s=S(),N(e.$$.fragment),l=S(),N(n.$$.fragment),f=S(),N(o.$$.fragment)},m(r,a){z(t,r,a),T(r,s,a),z(e,r,a),T(r,l,a),z(n,r,a),T(r,f,a),z(o,r,a),m=!0},p(r,[a]){const R=a&1?ee(c,[c[0],c[1],te(r[0])]):{};t.$set(R);const P={};a&6&&(P.$$scope={dirty:a,ctx:r}),e.$set(P);const D={};o.$set(D)},i(r){m||(C(t.$$.fragment,r),C(e.$$.fragment,r),C(n.$$.fragment,r),C(o.$$.fragment,r),m=!0)},o(r){A(t.$$.fragment,r),A(e.$$.fragment,r),A(n.$$.fragment,r),A(o.$$.fragment,r),m=!1},d(r){r&&(j(s),j(l),j(f)),M(t,r),M(e,r),M(n,r),M(o,r)}}}function De(i){return[{...ue(he),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 Ce extends Z{constructor(t){super(),$(this,t,De,Be,x,{})}}const U=ce(Ce,{meta:{title:"Components/ReferralBlock"},stories:{"tpl:default":{name:"default",template:!0,source:"<ReferralBlock {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1},ByCollection:{name:"By collection",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","collectionDocs","ReferralBlock","withComponentDocs","withStoryDocs"]}),ze=U.meta,Me=["Default","ByCollection"],Ve=U.stories.Default,Le=U.stories.ByCollection;export{Le as ByCollection,Ve as Default,Me as __namedExportsOrder,ze as default};
|