40 lines
13 KiB
JavaScript
40 lines
13 KiB
JavaScript
import{S as Q,i as X,s as Y,o as C,g as k,b as I,d as _,m as v,t as m,h as p,f as y,j as $,x as oe,y as B,k as ne,v as R,w as V,n as T,l as H,u as W,p as E,q as U,C as Z}from"./index-06834efe.js";import{g as ee,a as te}from"./spread-8a54911c.js";import{p as se,M as ie,T as re,S as z}from"./collect-stories-3e05a7a9.js";import{B as ae}from"./Block-3bcdcbfd.js";import{m as j}from"./marked.esm-76161808.js";import{B as P}from"./BodyText-04d8c143.js";import{w as le}from"./withParams-47e2ab71.js";const fe=`InfoBox is used to provide additional information that needs to be visually set aside from the main content flow. e.g. Methodology, Detailed notes about data, Extra context as text stories.
|
||
|
||
Switch the theme prop to \`dark\` for a dark page infobox.
|
||
|
||
Use the slots to customize the content as needed, e.g. adding icons and thumbnail images etc.
|
||
|
||
\`\`\`svelte
|
||
<script>
|
||
import { InfoBox } from '@reuters-graphics/graphics-components';
|
||
<\/script>
|
||
|
||
<InfoBox
|
||
title="About this data"
|
||
text="{'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \\n\\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}"
|
||
notes="{'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}"
|
||
/>
|
||
\`\`\`
|
||
`;const de=r=>({}),G=r=>({}),ue=r=>({}),J=r=>({}),ce=r=>({}),K=r=>({});function me(r){let e,o=j(r[0])+"";return{c(){e=C("div"),I(e,"class","header fmb-2")},m(s,n){_(s,e,n),e.innerHTML=o},p(s,n){n&1&&o!==(o=j(s[0])+"")&&(e.innerHTML=o)},i:T,o:T,d(s){s&&y(e)}}}function pe(r){let e,o;const s=r[8].header,n=H(s,r,r[9],K);return{c(){e=C("div"),n&&n.c(),I(e,"class","header fmb-2")},m(t,a){_(t,e,a),n&&n.m(e,null),o=!0},p(t,a){n&&n.p&&(!o||a&512)&&W(n,s,t,t[9],o?U(s,t[9],a,ce):E(t[9]),K)},i(t){o||(m(n,t),o=!0)},o(t){p(n,t),o=!1},d(t){t&&y(e),n&&n.d(t)}}}function he(r){let e,o=j(r[1])+"";return{c(){e=C("div"),I(e,"class","body")},m(s,n){_(s,e,n),e.innerHTML=o},p(s,n){n&2&&o!==(o=j(s[1])+"")&&(e.innerHTML=o)},i:T,o:T,d(s){s&&y(e)}}}function _e(r){let e,o;const s=r[8].body,n=H(s,r,r[9],J);return{c(){e=C("div"),n&&n.c(),I(e,"class","body")},m(t,a){_(t,e,a),n&&n.m(e,null),o=!0},p(t,a){n&&n.p&&(!o||a&512)&&W(n,s,t,t[9],o?U(s,t[9],a,ue):E(t[9]),J)},i(t){o||(m(n,t),o=!0)},o(t){p(n,t),o=!1},d(t){t&&y(e),n&&n.d(t)}}}function ye(r){let e,o=j(r[2])+"";return{c(){e=C("div"),I(e,"class","footer fmt-2")},m(s,n){_(s,e,n),e.innerHTML=o},p(s,n){n&4&&o!==(o=j(s[2])+"")&&(e.innerHTML=o)},i:T,o:T,d(s){s&&y(e)}}}function ge(r){let e,o;const s=r[8].footer,n=H(s,r,r[9],G);return{c(){e=C("div"),n&&n.c(),I(e,"class","footer fmt-2")},m(t,a){_(t,e,a),n&&n.m(e,null),o=!0},p(t,a){n&&n.p&&(!o||a&512)&&W(n,s,t,t[9],o?U(s,t[9],a,de):E(t[9]),G)},i(t){o||(m(n,t),o=!0)},o(t){p(n,t),o=!1},d(t){t&&y(e),n&&n.d(t)}}}function be(r){let e,o,s,n,t,a,i,d,g,b;const l=[pe,me],u=[];function c(f,h){return f[7].header?0:f[0]?1:-1}~(e=c(r))&&(o=u[e]=l[e](r));const D=[_e,he],w=[];function S(f,h){return f[7].body?0:1}n=S(r),t=w[n]=D[n](r);const F=[ge,ye],x=[];function O(f,h){return f[7].footer?0:f[2]?1:-1}return~(i=O(r))&&(d=x[i]=F[i](r)),{c(){o&&o.c(),s=B(),t.c(),a=B(),d&&d.c(),g=ne()},m(f,h){~e&&u[e].m(f,h),_(f,s,h),w[n].m(f,h),_(f,a,h),~i&&x[i].m(f,h),_(f,g,h),b=!0},p(f,h){let L=e;e=c(f),e===L?~e&&u[e].p(f,h):(o&&(R(),p(u[L],1,1,()=>{u[L]=null}),V()),~e?(o=u[e],o?o.p(f,h):(o=u[e]=l[e](f),o.c()),m(o,1),o.m(s.parentNode,s)):o=null);let M=n;n=S(f),n===M?w[n].p(f,h):(R(),p(w[M],1,1,()=>{w[M]=null}),V(),t=w[n],t?t.p(f,h):(t=w[n]=D[n](f),t.c()),m(t,1),t.m(a.parentNode,a));let N=i;i=O(f),i===N?~i&&x[i].p(f,h):(d&&(R(),p(x[N],1,1,()=>{x[N]=null}),V()),~i?(d=x[i],d?d.p(f,h):(d=x[i]=F[i](f),d.c()),m(d,1),d.m(g.parentNode,g)):d=null)},i(f){b||(m(o),m(t),m(d),b=!0)},o(f){p(o),p(t),p(d),b=!1},d(f){f&&(y(s),y(a),y(g)),~e&&u[e].d(f),w[n].d(f),~i&&x[i].d(f)}}}function we(r){let e,o,s,n;return o=new ae({props:{width:r[3],id:r[5],class:r[4]+" fmy-6 fpx-6 fpy-5 border border-solid rounded",$$slots:{default:[be]},$$scope:{ctx:r}}}),{c(){e=C("aside"),k(o.$$.fragment),I(e,"class",s="infobox "+r[6]+" svelte-13irrjh")},m(t,a){_(t,e,a),v(o,e,null),n=!0},p(t,[a]){const i={};a&8&&(i.width=t[3]),a&32&&(i.id=t[5]),a&16&&(i.class=t[4]+" fmy-6 fpx-6 fpy-5 border border-solid rounded"),a&647&&(i.$$scope={dirty:a,ctx:t}),o.$set(i),(!n||a&64&&s!==(s="infobox "+t[6]+" svelte-13irrjh"))&&I(e,"class",s)},i(t){n||(m(o.$$.fragment,t),n=!0)},o(t){p(o.$$.fragment,t),n=!1},d(t){t&&y(e),$(o)}}}function ke(r,e,o){let{$$slots:s={},$$scope:n}=e;const t=oe(s);let{title:a=null}=e,{text:i=""}=e,{notes:d=null}=e,{width:g="normal"}=e,{class:b=""}=e,{id:l=""}=e,{theme:u="light"}=e;return r.$$set=c=>{"title"in c&&o(0,a=c.title),"text"in c&&o(1,i=c.text),"notes"in c&&o(2,d=c.notes),"width"in c&&o(3,g=c.width),"class"in c&&o(4,b=c.class),"id"in c&&o(5,l=c.id),"theme"in c&&o(6,u=c.theme),"$$scope"in c&&o(9,n=c.$$scope)},[a,i,d,g,b,l,u,t,s,n]}class A extends Q{constructor(e){super(),X(this,e,ke,we,Y,{title:0,text:1,notes:2,width:3,class:4,id:5,theme:6})}}A.__docgen={version:3,name:"InfoBox.svelte",data:[{keywords:[],visibility:"public",description:"Title of the box",name:"title",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null},{keywords:[],visibility:"public",description:"Contents of the note as a markdown string",name:"text",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[],visibility:"public",description:"Additional footnotes",name:"notes",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null},{keywords:[{name:"type",description:"{string}"}],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:"normal"},{visibility:"public",description:"Add extra classes to the block tag to target it with custom CSS.",keywords:[{name:"type",description:"{string}"}],name:"class",kind:"const",static:!1,readonly:!0,type:{kind:"type",text:"string",type:"string"},localName:"cls",defaultValue:""},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Add an id to the block tag to target it with custom CSS.",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[],visibility:"public",description:"Page theme",name:"theme",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"light"}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"Custom title content",name:"header"},{keywords:[],visibility:"public",description:"Custom content",name:"body"},{keywords:[],visibility:"public",description:"Custom footer content",name:"footer"}],refs:[]};function ve(r){let e,o;const s=[r[1]];let n={};for(let t=0;t<s.length;t+=1)n=Z(n,s[t]);return e=new A({props:n}),{c(){k(e.$$.fragment)},m(t,a){v(e,t,a),o=!0},p(t,a){const i=a&2?ee(s,[te(t[1])]):{};e.$set(i)},i(t){o||(m(e.$$.fragment,t),o=!0)},o(t){p(e.$$.fragment,t),o=!1},d(t){$(e,t)}}}function $e(r){let e,o,s,n,t,a;return e=new P({props:{text:"If you haven't seen Game of Thrones, go watch it right now. If you have then you'll totally get why this Hodor themed lorem ipsum generator is just brilliant."}}),s=new A({props:{title:"About this data",text:`Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day.
|
||
|
||
Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.`,notes:"[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)"}}),t=new P({props:{text:"In case you don't read Twitter, the news, or just can't get enough of The Apprentice host's legendary oration, try this Trump lorem ipsum generator on for size."}}),{c(){k(e.$$.fragment),o=B(),k(s.$$.fragment),n=B(),k(t.$$.fragment)},m(i,d){v(e,i,d),_(i,o,d),v(s,i,d),_(i,n,d),v(t,i,d),a=!0},p:T,i(i){a||(m(e.$$.fragment,i),m(s.$$.fragment,i),m(t.$$.fragment,i),a=!0)},o(i){p(e.$$.fragment,i),p(s.$$.fragment,i),p(t.$$.fragment,i),a=!1},d(i){i&&(y(o),y(n)),$(e,i),$(s,i),$(t,i)}}}function xe(r){let e,o;return e=new A({props:{title:"What you need to know about the war",text:`- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices.
|
||
- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes.
|
||
- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines. `}}),{c(){k(e.$$.fragment)},m(s,n){v(e,s,n),o=!0},p:T,i(s){o||(m(e.$$.fragment,s),o=!0)},o(s){p(e.$$.fragment,s),o=!1},d(s){$(e,s)}}}function Ie(r){let e,o,s,n,t,a,i,d;const g=[{title:"Components/InfoBox"},{component:A},r[0]];let b={};for(let l=0;l<g.length;l+=1)b=Z(b,g[l]);return e=new ie({props:b}),s=new re({props:{$$slots:{default:[ve,({args:l})=>({1:l}),({args:l})=>l?2:0]},$$scope:{ctx:r}}}),t=new z({props:{name:"Default",$$slots:{default:[$e]},$$scope:{ctx:r}}}),i=new z({props:{name:"List",$$slots:{default:[xe]},$$scope:{ctx:r}}}),{c(){k(e.$$.fragment),o=B(),k(s.$$.fragment),n=B(),k(t.$$.fragment),a=B(),k(i.$$.fragment)},m(l,u){v(e,l,u),_(l,o,u),v(s,l,u),_(l,n,u),v(t,l,u),_(l,a,u),v(i,l,u),d=!0},p(l,[u]){const c=u&1?ee(g,[g[0],g[1],te(l[0])]):{};e.$set(c);const D={};u&6&&(D.$$scope={dirty:u,ctx:l}),s.$set(D);const w={};u&4&&(w.$$scope={dirty:u,ctx:l}),t.$set(w);const S={};u&4&&(S.$$scope={dirty:u,ctx:l}),i.$set(S)},i(l){d||(m(e.$$.fragment,l),m(s.$$.fragment,l),m(t.$$.fragment,l),m(i.$$.fragment,l),d=!0)},o(l){p(e.$$.fragment,l),p(s.$$.fragment,l),p(t.$$.fragment,l),p(i.$$.fragment,l),d=!1},d(l){l&&(y(o),y(n),y(a)),$(e,l),$(s,l),$(t,l),$(i,l)}}}function Te(r){return[{...le(fe),argTypes:{theme:{control:"select",options:["light","dark"]},width:{control:"select",options:["normal","wide","wider","widest","fluid"]}}}]}class Be extends Q{constructor(e){super(),X(this,e,Te,Ie,Y,{})}}const q=se(Be,{meta:{title:"Components/InfoBox"},stories:{"tpl:default":{name:"default",template:!0,source:"<InfoBox {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:`<BodyText
|
||
text="If you haven't seen Game of Thrones, go watch it right now. If you have then you'll totally get why this Hodor themed lorem ipsum generator is just brilliant."
|
||
/>
|
||
<InfoBox
|
||
title="About this data"
|
||
text="{'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day.
|
||
|
||
Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}"
|
||
notes="{'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}"
|
||
/>
|
||
<BodyText
|
||
text="In case you don't read Twitter, the news, or just can't get enough of The Apprentice host's legendary oration, try this Trump lorem ipsum generator on for size."
|
||
/>`,hasArgs:!1},List:{name:"List",template:!1,source:`<InfoBox
|
||
title="What you need to know about the war"
|
||
text="{"- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices.
|
||
- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes.
|
||
- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines. "}"
|
||
/>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","InfoBox","BodyText","withComponentDocs"]}),Ne=q.meta,Re=["Default","List"],Ve=q.stories.Default,He=q.stories.List;export{Ve as Default,He as List,Re as __namedExportsOrder,Ne as default};
|
||
//# sourceMappingURL=InfoBox.stories-7ab0e0bd.js.map
|