32 lines
10 KiB
JavaScript
32 lines
10 KiB
JavaScript
import{S as O,i as Z,s as j,j as $,m as C,b as _,t as v,n as T,w as k,x as d,C as M,a as b,g as D,c as R,d as w,a5 as q,Z as F,D as S,M as z,z as y,Y as A,e as J,E as V,W as Q,p as x,k as N,l as W}from"./index-25af778d.js";import{p as X,M as ee,T as te,S as ne}from"./collect-stories-cce06d4a.js";import{B as se}from"./Block-9c89ee1a.js";import{F as le}from"./fa-0c534c9e.js";import{b as ie}from"./index.es-7d03df34.js";import{m as I}from"./marked.esm-76161808.js";import{w as ae}from"./withParams-90715500.js";const oe=`A simple, clean text timeline.
|
|
|
|
\`\`\`html
|
|
<script>
|
|
import { SimpleTimeline } from '@reuters-graphics/graphics-components';
|
|
|
|
const dates = [
|
|
{
|
|
date: 'May 18',
|
|
events: [
|
|
{
|
|
title: 'A title for the event',
|
|
titleLink: 'https://...', // optional
|
|
context: 'Lorem ipsum...', // optional
|
|
},
|
|
// More events...
|
|
],
|
|
},
|
|
// More dates...
|
|
];
|
|
<\/script>
|
|
|
|
<SimpleTimeline
|
|
dates="{dates}"
|
|
symbolColour="#999"
|
|
dateColour="rgb(224, 90, 57)"
|
|
/>
|
|
\`\`\`
|
|
`;function P(u,e,n){const t=u.slice();return t[5]=e[n],t}function B(u,e,n){const t=u.slice();return t[8]=e[n],t}function re(u){let e,n=u[8].title+"",t;return{c(){e=k("h6"),t=z(n),d(e,"class","svelte-52lzao")},m(s,i){b(s,e,i),y(e,t)},p(s,i){i&1&&n!==(n=s[8].title+"")&&A(t,n)},i:V,o:V,d(s){s&&w(e)}}}function ce(u){let e,n,t=u[8].title+"",s,i,a,c,o,l;return c=new le({props:{fw:!0,icon:ie}}),{c(){e=k("a"),n=k("h6"),s=z(t),i=S(),a=k("span"),$(c.$$.fragment),d(a,"class","svelte-52lzao"),d(n,"class","svelte-52lzao"),d(e,"href",o=u[8].titleLink),d(e,"target","_blank"),d(e,"class","svelte-52lzao")},m(r,p){b(r,e,p),y(e,n),y(n,s),y(n,i),y(n,a),C(c,a,null),l=!0},p(r,p){(!l||p&1)&&t!==(t=r[8].title+"")&&A(s,t),(!l||p&1&&o!==(o=r[8].titleLink))&&d(e,"href",o)},i(r){l||(_(c.$$.fragment,r),l=!0)},o(r){v(c.$$.fragment,r),l=!1},d(r){r&&w(e),T(c)}}}function H(u){let e,n=I(u[8].context)+"",t;return{c(){e=new Q(!1),t=J(),e.a=t},m(s,i){e.m(n,s,i),b(s,t,i)},p(s,i){i&1&&n!==(n=I(s[8].context)+"")&&e.p(n)},d(s){s&&w(t),s&&e.d()}}}function E(u){let e,n,t,s,i;const a=[ce,re],c=[];function o(r,p){return r[8].titleLink?0:1}n=o(u),t=c[n]=a[n](u);let l=u[8].context&&H(u);return{c(){e=k("div"),t.c(),s=S(),l&&l.c(),d(e,"class","event pb-2 svelte-52lzao")},m(r,p){b(r,e,p),c[n].m(e,null),y(e,s),l&&l.m(e,null),i=!0},p(r,p){let m=n;n=o(r),n===m?c[n].p(r,p):(D(),v(c[m],1,1,()=>{c[m]=null}),R(),t=c[n],t?t.p(r,p):(t=c[n]=a[n](r),t.c()),_(t,1),t.m(e,s)),r[8].context?l?l.p(r,p):(l=H(r),l.c(),l.m(e,null)):l&&(l.d(1),l=null)},i(r){i||(_(t),i=!0)},o(r){v(t),i=!1},d(r){r&&w(e),c[n].d(),l&&l.d()}}}function K(u){let e,n,t,s,i,a=u[5].date+"",c,o,l,r,p=u[5].events,m=[];for(let f=0;f<p.length;f+=1)m[f]=E(B(u,p,f));const G=f=>v(m[f],1,1,()=>{m[f]=null});return{c(){e=k("div"),n=F("svg"),t=F("circle"),s=S(),i=k("h5"),c=z(a),o=S();for(let f=0;f<m.length;f+=1)m[f].c();l=S(),d(t,"cx","10"),d(t,"cy","12"),d(t,"r","5"),d(t,"stroke",u[1]),d(t,"stroke-width","2"),d(t,"fill","transparent"),d(n,"height","25"),d(n,"width","20"),d(n,"class","svelte-52lzao"),d(i,"class","svelte-52lzao"),M(i,"color",u[2]),d(e,"class","date svelte-52lzao")},m(f,h){b(f,e,h),y(e,n),y(n,t),y(e,s),y(e,i),y(i,c),y(e,o);for(let g=0;g<m.length;g+=1)m[g]&&m[g].m(e,null);y(e,l),r=!0},p(f,h){if((!r||h&2)&&d(t,"stroke",f[1]),(!r||h&1)&&a!==(a=f[5].date+"")&&A(c,a),h&4&&M(i,"color",f[2]),h&1){p=f[5].events;let g;for(g=0;g<p.length;g+=1){const L=B(f,p,g);m[g]?(m[g].p(L,h),_(m[g],1)):(m[g]=E(L),m[g].c(),_(m[g],1),m[g].m(e,l))}for(D(),g=p.length;g<m.length;g+=1)G(g);R()}},i(f){if(!r){for(let h=0;h<p.length;h+=1)_(m[h]);r=!0}},o(f){m=m.filter(Boolean);for(let h=0;h<m.length;h+=1)v(m[h]);r=!1},d(f){f&&w(e),q(m,f)}}}function ue(u){let e,n,t=u[0],s=[];for(let a=0;a<t.length;a+=1)s[a]=K(P(u,t,a));const i=a=>v(s[a],1,1,()=>{s[a]=null});return{c(){e=k("div");for(let a=0;a<s.length;a+=1)s[a].c();d(e,"class","timeline svelte-52lzao"),M(e,"--symbol-colour",u[1])},m(a,c){b(a,e,c);for(let o=0;o<s.length;o+=1)s[o]&&s[o].m(e,null);n=!0},p(a,c){if(c&7){t=a[0];let o;for(o=0;o<t.length;o+=1){const l=P(a,t,o);s[o]?(s[o].p(l,c),_(s[o],1)):(s[o]=K(l),s[o].c(),_(s[o],1),s[o].m(e,null))}for(D(),o=t.length;o<s.length;o+=1)i(o);R()}(!n||c&2)&&M(e,"--symbol-colour",a[1])},i(a){if(!n){for(let c=0;c<t.length;c+=1)_(s[c]);n=!0}},o(a){s=s.filter(Boolean);for(let c=0;c<s.length;c+=1)v(s[c]);n=!1},d(a){a&&w(e),q(s,a)}}}function me(u){let e,n;return e=new se({props:{width:"normal",id:u[4],cls:"simple-timeline-container "+u[3],$$slots:{default:[ue]},$$scope:{ctx:u}}}),{c(){$(e.$$.fragment)},m(t,s){C(e,t,s),n=!0},p(t,[s]){const i={};s&16&&(i.id=t[4]),s&8&&(i.cls="simple-timeline-container "+t[3]),s&2055&&(i.$$scope={dirty:s,ctx:t}),e.$set(i)},i(t){n||(_(e.$$.fragment,t),n=!0)},o(t){v(e.$$.fragment,t),n=!1},d(t){T(e,t)}}}function fe(u,e,n){let{dates:t}=e,{symbolColour:s="#ccc"}=e,{dateColour:i="var(--theme-colour-accent, red)"}=e,{cls:a=""}=e,{id:c=""}=e;return u.$$set=o=>{"dates"in o&&n(0,t=o.dates),"symbolColour"in o&&n(1,s=o.symbolColour),"dateColour"in o&&n(2,i=o.dateColour),"cls"in o&&n(3,a=o.cls),"id"in o&&n(4,c=o.id)},[t,s,i,a,c]}class U extends O{constructor(e){super(),Z(this,e,fe,me,j,{dates:0,symbolColour:1,dateColour:2,cls:3,id:4})}}U.__docgen={version:3,name:"SimpleTimeline.svelte",data:[{keywords:[{name:"required",description:""}],visibility:"public",description:"An array of dates with events.",name:"dates",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Set a colour for the timeline bullet symbols and line.",name:"symbolColour",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"#ccc"},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Set a colour for the date headings in the timeline.",name:"dateColour",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"var(--theme-colour-accent, red)"},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Set a class to target with SCSS.",name:"cls",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Set an ID to target with SCSS.",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function pe(u){let e,n;const t=[u[2]];let s={};for(let i=0;i<t.length;i+=1)s=x(s,t[i]);return e=new U({props:s}),{c(){$(e.$$.fragment)},m(i,a){C(e,i,a),n=!0},p(i,a){const c=a&4?N(t,[W(i[2])]):{};e.$set(c)},i(i){n||(_(e.$$.fragment,i),n=!0)},o(i){v(e.$$.fragment,i),n=!1},d(i){T(e,i)}}}function de(u){let e,n,t,s,i,a;const c=[{title:"Components/SimpleTimeline"},{component:U},u[0]];let o={};for(let l=0;l<c.length;l+=1)o=x(o,c[l]);return e=new ee({props:o}),t=new te({props:{$$slots:{default:[pe,({args:l})=>({2:l}),({args:l})=>l?4:0]},$$scope:{ctx:u}}}),i=new ne({props:{name:"Default",args:{dates:u[1],symbolColour:"#999",dateColour:"#e05a39"}}}),{c(){$(e.$$.fragment),n=S(),$(t.$$.fragment),s=S(),$(i.$$.fragment)},m(l,r){C(e,l,r),b(l,n,r),C(t,l,r),b(l,s,r),C(i,l,r),a=!0},p(l,[r]){const p=r&1?N(c,[c[0],r&0&&{component:U},r&1&&W(l[0])]):{};e.$set(p);const m={};r&12&&(m.$$scope={dirty:r,ctx:l}),t.$set(m)},i(l){a||(_(e.$$.fragment,l),_(t.$$.fragment,l),_(i.$$.fragment,l),a=!0)},o(l){v(e.$$.fragment,l),v(t.$$.fragment,l),v(i.$$.fragment,l),a=!1},d(l){T(e,l),l&&w(n),T(t,l),l&&w(s),T(i,l)}}}function ge(u){return[{...ae(oe),argTypes:{symbolColour:{control:"color"},dateColour:{control:"color"}}},[{date:"May 18",events:[{title:"Mariupol defenders surrender to Russia but their fate is uncertain",titleLink:"https://www.reuters.com/world/europe/ukrainian-troops-evacuate-mariupol-ceding-control-russia-2022-05-17/",context:"More than 250 Ukrainian fighters surrendered to Russian forces at the Azovstal steelworks in Mariupol after weeks of desperate resistance, bringing an end to the most devastating siege of Russia's war in Ukraine and allowing President Vladimir Putin to claim a rare victory in his faltering campaign."}]},{date:"May 10",events:[{title:"U.S. House passes $40 bln bill to bolster Ukraine against Russian invasion",context:"The U.S. House of Representatives approved more than $40 billion more aid for Ukraine on Tuesday, as Congress races to keep military aid flowing and boost the government in Kyiv as it grapples with the Russian invasion."}]},{date:"Mar. 3",events:[{title:`"We are being destroyed," city council of Ukraine's Mariupol says`,context:"Mariupol city council said Russian forces were constantly and deliberately shelling [vital civilian infrastructure](https://google.com) in the southeastern Ukrainian port, leaving it without water, heating or power and preventing bringing supplies or evacuating people."}]},{date:"Feb. 27",events:[{title:"Russians push into Kharkiv",titleLink:"https://www.reuters.com/world/europe/western-allies-expel-key-russian-banks-global-system-ukraine-fights-2022-02-27/"},{title:"Human rights groups and Ukrainian ambassador accuse Russia of using cluster and vacuum bombs"}]},{date:"Feb. 25",events:[{title:"NATO deploys more troops",context:"NATO leaders said on Friday they were deploying more troops to eastern Europe after Russia invaded Ukraine, saying that Moscow had lied about its intentions."},{title:"Invasion continues",context:`Missiles pounded the Ukrainian capital as Russian forces pressed their advance and Ukrainian President Volodymyr Zelenskiy pleaded with the international community to do more, saying sanctions announced so far were not enough.
|
|
|
|
Russian forces battered Ukrainian cities with artillery and cruise missiles but a defiant Zelenskiy said the capital Kyiv remained in Ukrainian hands.`}]},{date:"Feb. 24",events:[{title:"Russia invades Ukraine"}]}]]}class he extends O{constructor(e){super(),Z(this,e,ge,de,j,{})}}const Y=X(he,{meta:{title:"Components/SimpleTimeline"},stories:{"tpl:default":{storyId:"components-simpletimeline--default",name:"default",template:!0,source:"<SimpleTimeline {...args} />",hasArgs:!0},Default:{storyId:"components-simpletimeline--default",name:"Default",template:!1,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","SimpleTimeline","withComponentDocs"]}),$e=Y.meta,Ce=["Default"],Te=Y.stories.Default;export{Te as Default,Ce as __namedExportsOrder,$e as default};
|
|
//# sourceMappingURL=SimpleTimeline.stories-a1158b6c.js.map
|