24 lines
9.3 KiB
JavaScript
24 lines
9.3 KiB
JavaScript
import{S as X,i as Z,s as $,v as le,d as R,t as C,w as se,h as T,x as re,f as I,D as ne,g as q,m as M,j as O,z as A,o as k,b as m,O as oe,r as y,P as ie,V as ae,k as N,e as p,A as E,F as Y,C as F}from"./index-85f88930.js";import{g as x,a as ee}from"./spread-8a54911c.js";import{p as ce,M as fe,T as me,S as J}from"./collect-stories-fa95313f.js";import{e as V}from"./each-e59479a4.js";import{B as ue}from"./Block-d1b8152c.js";import{g as W}from"./time-8562ae1b.js";import{b as de,w as _e}from"./withParams-47e2ab71.js";import"./advancedFormat-ebff0a45.js";import"./_commonjsHelpers-de833af9.js";import"./dayjs.min-1b995edc.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) 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/" />
|
|
\`\`\`
|
|
`,he=`\`\`\`svelte
|
|
<script>
|
|
import { ReferralBlock } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<ReferralBlock collection="x-trump" number="{6}" class="fmy-8" />
|
|
\`\`\`
|
|
`;function G(r,t,s){const e=r.slice();return e[11]=t[s],e}function H(r){let t,s;return t=new ue({props:{width:r[3],id:r[4],class:"referrals-block "+r[5],$$slots:{default:[ge]},$$scope:{ctx:r}}}),{c(){q(t.$$.fragment)},m(e,l){M(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){T(t.$$.fragment,e),s=!1},d(e){O(t,e)}}}function K(r){let t,s;return{c(){t=k("div"),s=N(r[2]),m(t,"class","heading h4 font-bold svelte-1tl145l"),y(t,"stacked",r[6]&&r[6]<750)},m(e,l){R(e,t,l),p(t,s)},p(e,l){l&4&&E(s,e[2]),l&64&&y(t,"stacked",e[6]&&e[6]<750)},d(e){e&&I(t)}}}function Q(r){let t,s,e,l,n,f=(r[11].headline_category||r[11].kicker.name)+"",i,u,c,h=r[11].title+"",v,B,o,a=W(new Date(r[11].display_time))+"",S,P,D,w,d,g,z,j,U;return{c(){t=k("div"),s=k("a"),e=k("div"),l=k("div"),n=k("div"),i=N(f),u=A(),c=k("div"),v=N(h),B=A(),o=k("div"),S=N(a),P=A(),D=k("div"),w=k("img"),U=A(),m(n,"class","kicker m-0 body-caption leading-tighter svelte-1tl145l"),m(n,"data-chromatic","ignore"),m(c,"class","title m-0 body-caption leading-tighter svelte-1tl145l"),m(c,"data-chromatic","ignore"),m(o,"class","publish-time body-caption leading-tighter svelte-1tl145l"),m(o,"data-chromatic","ignore"),m(l,"class","headline svelte-1tl145l"),y(l,"xs",r[6]&&r[6]<450),m(w,"class","block object-cover m-0 w-full svelte-1tl145l"),m(w,"data-chromatic","ignore"),Y(w.src,d=r[11].thumbnail.renditions.landscape["240w"])||m(w,"src",d),m(w,"alt",g=r[11].thumbnail.caption||r[11].thumbnail.alt_text),m(D,"class","image-container block m-0 overflow-hidden relative svelte-1tl145l"),y(D,"xs",r[6]&&r[6]<450),m(e,"class","referral-pack flex justify-around my-0 mx-auto"),m(s,"href",z="https://www.reuters.com"+r[11].canonical_url),m(s,"target",r[1]),m(s,"rel",j=r[1]==="_blank"?"noreferrer":null),m(s,"class","svelte-1tl145l"),m(t,"class","referral svelte-1tl145l")},m(_,b){R(_,t,b),p(t,s),p(s,e),p(e,l),p(l,n),p(n,i),p(l,u),p(l,c),p(c,v),p(l,B),p(l,o),p(o,S),p(e,P),p(e,D),p(D,w),p(t,U)},p(_,b){b&128&&f!==(f=(_[11].headline_category||_[11].kicker.name)+"")&&E(i,f),b&128&&h!==(h=_[11].title+"")&&E(v,h),b&128&&a!==(a=W(new Date(_[11].display_time))+"")&&E(S,a),b&64&&y(l,"xs",_[6]&&_[6]<450),b&128&&!Y(w.src,d=_[11].thumbnail.renditions.landscape["240w"])&&m(w,"src",d),b&128&&g!==(g=_[11].thumbnail.caption||_[11].thumbnail.alt_text)&&m(w,"alt",g),b&64&&y(D,"xs",_[6]&&_[6]<450),b&128&&z!==(z="https://www.reuters.com"+_[11].canonical_url)&&m(s,"href",z),b&2&&m(s,"target",_[1]),b&2&&j!==(j=_[1]==="_blank"?"noreferrer":null)&&m(s,"rel",j)},d(_){_&&I(t)}}}function ge(r){let t,s,e,l=r[2]&&K(r),n=V(r[7]),f=[];for(let i=0;i<n.length;i+=1)f[i]=Q(G(r,n,i));return{c(){l&&l.c(),t=A(),s=k("div");for(let i=0;i<f.length;i+=1)f[i].c();m(s,"class","referral-container inline-flex flex-wrap w-full justify-between svelte-1tl145l"),oe(()=>r[10].call(s)),y(s,"stacked",r[6]&&r[6]<750),y(s,"xs",r[6]&&r[6]<450)},m(i,u){l&&l.m(i,u),R(i,t,u),R(i,s,u);for(let c=0;c<f.length;c+=1)f[c]&&f[c].m(s,null);e=ie(s,r[10].bind(s))},p(i,u){if(i[2]?l?l.p(i,u):(l=K(i),l.c(),l.m(t.parentNode,t)):l&&(l.d(1),l=null),u&194){n=V(i[7]);let c;for(c=0;c<n.length;c+=1){const h=G(i,n,c);f[c]?f[c].p(h,u):(f[c]=Q(h),f[c].c(),f[c].m(s,null))}for(;c<f.length;c+=1)f[c].d(1);f.length=n.length}u&64&&y(s,"stacked",i[6]&&i[6]<750),u&64&&y(s,"xs",i[6]&&i[6]<450)},d(i){i&&(I(t),I(s)),l&&l.d(i),ae(f,i),e()}}}function we(r){let t,s,e=r[7].length===r[0]&&H(r);return{c(){e&&e.c(),t=le()},m(l,n){e&&e.m(l,n),R(l,t,n),s=!0},p(l,[n]){l[7].length===l[0]?e?(e.p(l,n),n&129&&C(e,1)):(e=H(l),e.c(),C(e,1),e.m(t.parentNode,t)):e&&(se(),T(e,1,1,()=>{e=null}),re())},i(l){s||(C(e),s=!0)},o(l){T(e),s=!1},d(l){l&&I(t),e&&e.d(l)}}}const be="recent-stories-by-sections-v1",ke="articles-by-collection-alias-or-id-v1";function ve(r,t,s){let{section:e="/world/"}=t,{collection:l}=t,{number:n=4}=t,{linkTarget:f="_self"}=t,{heading:i=""}=t,{width:u="wide"}=t,{id:c=""}=t,{class:h="fmy-8"}=t,v,B=[];ne(async()=>{const a=!!l,S=a?ke:be;try{const w=(await(await fetch(`https://www.reuters.com/pf/api/v3/content/fetch/${S}?`+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(d=>{var g;return(d==null?void 0:d.headline_category)||((g=d==null?void 0:d.kicker)==null?void 0:g.name)}).filter(d=>{var g,z,j;return(j=(z=(g=d==null?void 0:d.thumbnail)==null?void 0:g.renditions)==null?void 0:z.landscape)==null?void 0:j["240w"]}).filter(d=>{var g;return!((g=d==null?void 0:d.content)!=null&&g.third_party)}).slice(0,n);s(7,B=w)}catch{console.warn("Unable to fetch referral links.")}}),W();function o(){v=this.clientWidth,s(6,v)}return r.$$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,i=a.heading),"width"in a&&s(3,u=a.width),"id"in a&&s(4,c=a.id),"class"in a&&s(5,h=a.class)},[n,f,i,u,c,h,v,B,e,l,o]}class te extends X{constructor(t){super(),Z(this,t,ve,we,$,{section:8,collection:9,number:0,linkTarget:1,heading:2,width:3,id:4,class:5})}}function ye(r){let t,s;const e=[r[1]];let l={};for(let n=0;n<e.length;n+=1)l=F(l,e[n]);return t=new te({props:l}),{c(){q(t.$$.fragment)},m(n,f){M(t,n,f),s=!0},p(n,f){const i=f&2?x(e,[ee(n[1])]):{};t.$set(i)},i(n){s||(C(t.$$.fragment,n),s=!0)},o(n){T(t.$$.fragment,n),s=!1},d(n){O(t,n)}}}function Be(r){let t,s,e,l,n,f,i,u;const c=[{title:"Components/ReferralBlock"},{component:te},r[0]];let h={};for(let o=0;o<c.length;o+=1)h=F(h,c[o]);t=new fe({props:h}),e=new me({props:{$$slots:{default:[ye,({args:o})=>({1:o}),({args:o})=>o?2:0]},$$scope:{ctx:r}}}),n=new J({props:{name:"Default",args:{section:"/lifestyle/sports/",number:4,class:"fmy-0",heading:"More World Cup coverage"}}});const v=[{name:"By collection"},{args:{collection:"x-trump",number:6,class:"fmy-8",heading:"The latest Trump coverage"}},de(he)];let B={};for(let o=0;o<v.length;o+=1)B=F(B,v[o]);return i=new J({props:B}),{c(){q(t.$$.fragment),s=A(),q(e.$$.fragment),l=A(),q(n.$$.fragment),f=A(),q(i.$$.fragment)},m(o,a){M(t,o,a),R(o,s,a),M(e,o,a),R(o,l,a),M(n,o,a),R(o,f,a),M(i,o,a),u=!0},p(o,[a]){const S=a&1?x(c,[c[0],c[1],ee(o[0])]):{};t.$set(S);const P={};a&6&&(P.$$scope={dirty:a,ctx:o}),e.$set(P);const D={};i.$set(D)},i(o){u||(C(t.$$.fragment,o),C(e.$$.fragment,o),C(n.$$.fragment,o),C(i.$$.fragment,o),u=!0)},o(o){T(t.$$.fragment,o),T(e.$$.fragment,o),T(n.$$.fragment,o),T(i.$$.fragment,o),u=!1},d(o){o&&(I(s),I(l),I(f)),O(t,o),O(e,o),O(n,o),O(i,o)}}}function De(r){return[{..._e(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 Ce extends X{constructor(t){super(),Z(this,t,De,Be,$,{})}}const L=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"]}),Oe=L.meta,Ne=["Default","ByCollection"],Ee=L.stories.Default,Fe=L.stories.ByCollection;export{Fe as ByCollection,Ee as Default,Ne as __namedExportsOrder,Oe as default};
|
|
//# sourceMappingURL=ReferralBlock.stories-997b433b.js.map
|