wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

published 1.0.19

Browse source
This commit is contained in:
github-actions 2024-04-11 12:15:51 +00:00
parent c358399173
commit 8c8651e6bc
262 changed files with 383 additions and 383 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/assets/Article.stories-1879cf6e.js → docs/assets/Article.stories-b3673b23.js
View file

@ -1,4 +1,4 @@
import{S as R,i as G,s as J,C as q,g as $,y as v,m as u,d as h,t as f,h as w,f as g,j as p,l as z,b as F,n as K,e as C,z as A}from"./index-99a30af8.js";import{g as N,a as Q}from"./spread-8a54911c.js";import{p as V,M as X,T as Y,S as U}from"./collect-stories-1e0d20c7.js";import{A as L}from"./Article-cb12a248.js";import{B}from"./Block-4e35b26d.js";const Z=`The \`Article\` component contains all the content of our story and also establishes the dimensions of our article well, the default central trunk of our page layout.
import{S as R,i as G,s as J,C as q,g as $,y as v,m as u,d as h,t as f,h as w,f as g,j as p,l as z,b as F,n as K,e as C,z as A}from"./index-99a30af8.js";import{g as N,a as Q}from"./spread-8a54911c.js";import{p as V,M as X,T as Y,S as U}from"./collect-stories-1e0d20c7.js";import{A as L}from"./Article-cb12a248.js";import{B}from"./Block-a09d61d3.js";const Z=`The \`Article\` component contains all the content of our story and also establishes the dimensions of our article well, the default central trunk of our page layout.
> 📌 In most cases, **you won't need to mess with the \`Article\` component** because it's already included in our rigs for you!
@ -134,4 +134,4 @@ Here's an example of how custom\\* \`columnWidths\` can be used to change the ar
<Block id="section-demo" width="fluid">fluid</Block>
</div>
</Article>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","customWellWidthsDocs","Article","Block","withComponentDocs","withStoryDocs"]}),xe=H.meta,ye=["Default","CustomColumns"],We=H.stories.Default,Te=H.stories.CustomColumns;export{Te as CustomColumns,We as Default,ye as __namedExportsOrder,xe as default};
//# sourceMappingURL=Article.stories-1879cf6e.js.map
//# sourceMappingURL=Article.stories-b3673b23.js.map

2
docs/assets/Article.stories-1879cf6e.js.map → docs/assets/Article.stories-b3673b23.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/BeforeAfter.stories-93db525b.js → docs/assets/BeforeAfter.stories-5f5ede37.js
View file

@ -1,4 +1,4 @@
import{S as Se,i as Ie,s as Me,r as Re,d as k,M as R,t as g,v as x,h as w,w as ee,f as A,N as Be,x as Ke,D as Ge,g as z,m as q,j as X,l as v,y as B,F as $,b as f,c as W,O as De,e as O,P as Ce,Z as me,_ as ye,E as be,k as re,u as oe,o as ie,p as fe,C as te,n as ne,z as Ye}from"./index-99a30af8.js";import{g as Pe,a as je}from"./spread-8a54911c.js";import{p as Ze,M as Qe,T as $e,S as se}from"./collect-stories-1e0d20c7.js";import{g as xe}from"./globals-7f7f1b26.js";import{B as et}from"./Block-4e35b26d.js";import{P as tt}from"./PaddingReset-79b11107.js";import{t as nt}from"./throttle-dfed7c30.js";import{b as ge,w as at}from"./withParams-47e2ab71.js";import"./isObject-32699ff3.js";import"./now-bd49f550.js";import"./isSymbol-50749e90.js";const lt=`A before and after image comparison component.
import{S as Se,i as Ie,s as Me,r as Re,d as k,M as R,t as g,v as x,h as w,w as ee,f as A,N as Be,x as Ke,D as Ge,g as z,m as q,j as X,l as v,y as B,F as $,b as f,c as W,O as De,e as O,P as Ce,Z as me,_ as ye,E as be,k as re,u as oe,o as ie,p as fe,C as te,n as ne,z as Ye}from"./index-99a30af8.js";import{g as Pe,a as je}from"./spread-8a54911c.js";import{p as Ze,M as Qe,T as $e,S as se}from"./collect-stories-1e0d20c7.js";import{g as xe}from"./globals-7f7f1b26.js";import{B as et}from"./Block-a09d61d3.js";import{P as tt}from"./PaddingReset-79b11107.js";import{t as nt}from"./throttle-dfed7c30.js";import{b as ge,w as at}from"./withParams-47e2ab71.js";import"./isObject-32699ff3.js";import"./now-bd49f550.js";import"./isSymbol-50749e90.js";const lt=`A before and after image comparison component.
\`\`\`svelte
<script>
@ -156,4 +156,4 @@ background: rgba(0, 0, 0, 0.45);
div.overlay p {
color: #ffffff;
}</style>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","withOverlaysDocs","ariaDescriptionsDocs","BeforeAfter","beforeImg","afterImg","withComponentDocs","withStoryDocs"]}),Wt=ae.meta,zt=["Default","WithOverlays","ARIADescriptions"],qt=ae.stories.Default,Xt=ae.stories.WithOverlays,Lt=ae.stories.ARIADescriptions;export{Lt as ARIADescriptions,qt as Default,Xt as WithOverlays,zt as __namedExportsOrder,Wt as default};
//# sourceMappingURL=BeforeAfter.stories-93db525b.js.map
//# sourceMappingURL=BeforeAfter.stories-5f5ede37.js.map

2
docs/assets/BeforeAfter.stories-93db525b.js.map → docs/assets/BeforeAfter.stories-5f5ede37.js.map
View file

File diff suppressed because one or more lines are too long

1
docs/assets/Block-3fb0e622.css
View file

@ -1 +0,0 @@
.article-block.svelte-lsty9{max-width:var(--normal-column-width, 660px)}.article-block.narrower.svelte-lsty9{max-width:var(--narrower-column-width, 330px)}.article-block.narrow.svelte-lsty9{max-width:var(--narrow-column-width, 510px)}.article-block.wide.svelte-lsty9{max-width:var(--wide-column-width, 930px)}.article-block.wider.svelte-lsty9{max-width:var(--wider-column-width, 1200px)}.article-block.widest.svelte-lsty9{max-width:100%}.article-block.fluid.svelte-lsty9{width:calc(100% + 30px);margin-left:-15px;max-width:none}.article-block.snap.svelte-lsty9{width:330px}@media (min-width: 540px){.article-block.snap.svelte-lsty9:not(.skip-narrow){width:510px}}@media (min-width: 690px){.article-block.snap.svelte-lsty9:not(.skip-normal){width:660px}}@media (min-width: 360px){.article-block.snap.narrower.svelte-lsty9{width:330px}}@media (min-width: 540px){.article-block.snap.narrow.svelte-lsty9{width:510px}}@media (min-width: 960px){.article-block.snap.wide.svelte-lsty9{width:930px}}@media (min-width: 960px){.article-block.snap.wider.svelte-lsty9:not(.skip-wide){width:930px}}@media (min-width: 1230px){.article-block.snap.wider.svelte-lsty9:not(.skip-wider){width:1200px}}.article-block.snap.widest.svelte-lsty9,.article-block.snap.fluid.svelte-lsty9{width:inherit}.article-block.snap.fluid.svelte-lsty9{width:calc(100% + 30px)}

2
docs/assets/Block-4e35b26d.js
View file

@ -1,2 +0,0 @@
import{S as y,i as k,s as m,k as _,l as h,b as d,q as b,d as p,u as g,o as w,p as v,t as A,h as S,f as V}from"./index-99a30af8.js";function L(l){let e,n,a;const c=l[7].default,i=_(c,l,l[6],null);return{c(){e=h("div"),i&&i.c(),d(e,"id",l[1]),d(e,"class",n="article-block fmx-auto "+l[0]+" "+l[2]+" svelte-lsty9"),d(e,"role",l[4]),d(e,"aria-label",l[5]),b(e,"snap",l[3]&&l[0]!=="fluid"&&l[0]!=="widest")},m(t,o){p(t,e,o),i&&i.m(e,null),a=!0},p(t,[o]){i&&i.p&&(!a||o&64)&&g(i,c,t,t[6],a?v(c,t[6],o,null):w(t[6]),null),(!a||o&2)&&d(e,"id",t[1]),(!a||o&5&&n!==(n="article-block fmx-auto "+t[0]+" "+t[2]+" svelte-lsty9"))&&d(e,"class",n),(!a||o&16)&&d(e,"role",t[4]),(!a||o&32)&&d(e,"aria-label",t[5]),(!a||o&13)&&b(e,"snap",t[3]&&t[0]!=="fluid"&&t[0]!=="widest")},i(t){a||(A(i,t),a=!0)},o(t){S(i,t),a=!1},d(t){t&&V(e),i&&i.d(t)}}}function R(l,e,n){let{$$slots:a={},$$scope:c}=e,{width:i="normal"}=e,{id:t=""}=e,{class:o=""}=e,{snap:r=!1}=e,{role:f=null}=e,{ariaLabel:u=null}=e;return l.$$set=s=>{"width"in s&&n(0,i=s.width),"id"in s&&n(1,t=s.id),"class"in s&&n(2,o=s.class),"snap"in s&&n(3,r=s.snap),"role"in s&&n(4,f=s.role),"ariaLabel"in s&&n(5,u=s.ariaLabel),"$$scope"in s&&n(6,c=s.$$scope)},[i,t,o,r,f,u,c,a]}class j extends y{constructor(e){super(),k(this,e,R,L,m,{width:0,id:1,class:2,snap:3,role:4,ariaLabel:5})}}j.__docgen={version:3,name:"Block.svelte",data:[{keywords:[],visibility:"public",description:"Width of the block within the article well.",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"},{keywords:[],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:""},{visibility:"public",description:"Add extra classes to the block tag to target it with custom CSS.",keywords:[],name:"class",kind:"const",static:!1,readonly:!0,type:{kind:"type",text:"string",type:"string"},localName:"cls",defaultValue:""},{keywords:[],visibility:"public",description:"Snap block to column widths, rather than fluidly resizing them.",name:"snap",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block",name:"role",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null},{keywords:[],visibility:"public",description:"ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block",name:"ariaLabel",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"block content",name:"default"}],refs:[]};export{j as B};
//# sourceMappingURL=Block-4e35b26d.js.map

2
docs/assets/Block-a09d61d3.js Normal file
View file

@ -0,0 +1,2 @@
import{S as y,i as k,s as m,k as _,l as h,b as d,q as b,d as p,u as g,o as w,p as v,t as A,h as S,f as V}from"./index-99a30af8.js";function z(l){let e,n,s;const c=l[7].default,i=_(c,l,l[6],null);return{c(){e=h("div"),i&&i.c(),d(e,"id",l[1]),d(e,"class",n="article-block fmx-auto "+l[0]+" "+l[2]+" svelte-1bpn7zi"),d(e,"role",l[4]),d(e,"aria-label",l[5]),b(e,"snap",l[3]&&l[0]!=="fluid"&&l[0]!=="widest")},m(t,o){p(t,e,o),i&&i.m(e,null),s=!0},p(t,[o]){i&&i.p&&(!s||o&64)&&g(i,c,t,t[6],s?v(c,t[6],o,null):w(t[6]),null),(!s||o&2)&&d(e,"id",t[1]),(!s||o&5&&n!==(n="article-block fmx-auto "+t[0]+" "+t[2]+" svelte-1bpn7zi"))&&d(e,"class",n),(!s||o&16)&&d(e,"role",t[4]),(!s||o&32)&&d(e,"aria-label",t[5]),(!s||o&13)&&b(e,"snap",t[3]&&t[0]!=="fluid"&&t[0]!=="widest")},i(t){s||(A(i,t),s=!0)},o(t){S(i,t),s=!1},d(t){t&&V(e),i&&i.d(t)}}}function L(l,e,n){let{$$slots:s={},$$scope:c}=e,{width:i="normal"}=e,{id:t=""}=e,{class:o=""}=e,{snap:r=!1}=e,{role:f=null}=e,{ariaLabel:u=null}=e;return l.$$set=a=>{"width"in a&&n(0,i=a.width),"id"in a&&n(1,t=a.id),"class"in a&&n(2,o=a.class),"snap"in a&&n(3,r=a.snap),"role"in a&&n(4,f=a.role),"ariaLabel"in a&&n(5,u=a.ariaLabel),"$$scope"in a&&n(6,c=a.$$scope)},[i,t,o,r,f,u,c,s]}class R extends y{constructor(e){super(),k(this,e,L,z,m,{width:0,id:1,class:2,snap:3,role:4,ariaLabel:5})}}R.__docgen={version:3,name:"Block.svelte",data:[{keywords:[],visibility:"public",description:"Width of the block within the article well.",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"},{keywords:[],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:""},{visibility:"public",description:"Add extra classes to the block tag to target it with custom CSS.",keywords:[],name:"class",kind:"const",static:!1,readonly:!0,type:{kind:"type",text:"string",type:"string"},localName:"cls",defaultValue:""},{keywords:[],visibility:"public",description:"Snap block to column widths, rather than fluidly resizing them.",name:"snap",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block",name:"role",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null},{keywords:[],visibility:"public",description:"ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block",name:"ariaLabel",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"block content",name:"default"}],refs:[]};export{R as B};
//# sourceMappingURL=Block-a09d61d3.js.map

2
docs/assets/Block-4e35b26d.js.map → docs/assets/Block-a09d61d3.js.map
View file

@ -1 +1 @@
{"version":3,"file":"Block-4e35b26d.js","sources":["../../src/components/Block/Block.svelte"],"sourcesContent":["<!-- @component `Block` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-block--default) -->\n<script lang=\"ts\">\n import type { ContainerWidth } from '../@types/global';\n\n /** Width of the block within the article well. */\n export let width: ContainerWidth = 'normal';\n\n /** Add an id to the block tag to target it with custom CSS. */\n export let id: string = '';\n\n /** Add extra classes to the block tag to target it with custom CSS. */\n let cls: string = '';\n export { cls as class };\n\n /** Snap block to column widths, rather than fluidly resizing them. */\n export let snap: boolean = false;\n\n /** ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block */\n export let role: string | null = null;\n\n /** ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block */\n export let ariaLabel: string | null = null;\n</script>\n\n<div\n id=\"{id}\"\n class=\"article-block fmx-auto {width} {cls}\"\n class:snap=\"{snap && width !== 'fluid' && width !== 'widest'}\"\n role=\"{role}\"\n aria-label=\"{ariaLabel}\"\n>\n <!-- block content -->\n <slot />\n</div>\n\n<style lang=\"scss\">\n @import '../../scss/mixins';\n\n .article-block {\n max-width: var(--normal-column-width, 660px);\n\n &.narrower {\n max-width: var(--narrower-column-width, 330px);\n }\n\n &.narrow {\n max-width: var(--narrow-column-width, 510px);\n }\n\n &.wide {\n max-width: var(--wide-column-width, 930px);\n }\n\n &.wider {\n max-width: var(--wider-column-width, 1200px);\n }\n\n &.widest {\n max-width: 100%;\n }\n\n &.fluid {\n width: calc(100% + 30px);\n margin-left: -15px;\n max-width: none;\n }\n\n // Only setup for the default column widths, b/c can't use\n // CSS vars in media queries.\n &.snap {\n @include block-snap-widths;\n }\n }\n</style>\n"],"names":["ctx","attr","div","div_class_value","toggle_class","insert","target","anchor","current","dirty","width","$$props","id","cls","snap","role","ariaLabel"],"mappings":"2OAyBOA,EAAE,CAAA,CAAA,EACwBC,EAAAC,EAAA,QAAAC,EAAA,0BAAAH,SAAQA,EAAG,CAAA,EAAA,eAAA,aAEnCA,EAAI,CAAA,CAAA,mBACEA,EAAS,CAAA,CAAA,EAFTI,EAAAF,EAAA,OAAAF,MAAQA,EAAK,CAAA,IAAK,SAAWA,OAAU,QAAQ,UAH9DK,EASKC,EAAAJ,EAAAK,CAAA,sHAREP,EAAE,CAAA,CAAA,GACwB,CAAAQ,GAAAC,EAAA,GAAAN,KAAAA,EAAA,0BAAAH,SAAQA,EAAG,CAAA,EAAA,yDAEnCA,EAAI,CAAA,CAAA,+BACEA,EAAS,CAAA,CAAA,cAFTI,EAAAF,EAAA,OAAAF,MAAQA,EAAK,CAAA,IAAK,SAAWA,OAAU,QAAQ,qHAtBjD,CAAA,MAAAU,EAAwB,QAAQ,EAAAC,EAGhC,CAAA,GAAAC,EAAa,EAAE,EAAAD,EAGtB,CAAA,MAAAE,EAAc,EAAE,EAAAF,EAIT,CAAA,KAAAG,EAAgB,EAAK,EAAAH,EAGrB,CAAA,KAAAI,EAAsB,IAAI,EAAAJ,EAG1B,CAAA,UAAAK,EAA2B,IAAI,EAAAL"}
{"version":3,"file":"Block-a09d61d3.js","sources":["../../src/components/Block/Block.svelte"],"sourcesContent":["<!-- @component `Block` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-block--default) -->\n<script lang=\"ts\">\n import type { ContainerWidth } from '../@types/global';\n\n /** Width of the block within the article well. */\n export let width: ContainerWidth = 'normal';\n\n /** Add an id to the block tag to target it with custom CSS. */\n export let id: string = '';\n\n /** Add extra classes to the block tag to target it with custom CSS. */\n let cls: string = '';\n export { cls as class };\n\n /** Snap block to column widths, rather than fluidly resizing them. */\n export let snap: boolean = false;\n\n /** ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block */\n export let role: string | null = null;\n\n /** ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block */\n export let ariaLabel: string | null = null;\n</script>\n\n<div\n id=\"{id}\"\n class=\"article-block fmx-auto {width} {cls}\"\n class:snap=\"{snap && width !== 'fluid' && width !== 'widest'}\"\n role=\"{role}\"\n aria-label=\"{ariaLabel}\"\n>\n <!-- block content -->\n <slot />\n</div>\n\n<style lang=\"scss\">\n @import '../../scss/mixins';\n\n .article-block {\n max-width: var(--normal-column-width, 660px);\n\n &.narrower {\n max-width: var(--narrower-column-width, 330px);\n }\n\n &.narrow {\n max-width: var(--narrow-column-width, 510px);\n }\n\n &.wide {\n max-width: var(--wide-column-width, 930px);\n }\n\n &.wider {\n max-width: var(--wider-column-width, 1200px);\n }\n\n &.widest {\n max-width: 100%;\n }\n\n &.fluid {\n width: calc(100% + 30px);\n margin-inline-start: -15px;\n max-width: none;\n }\n\n // Only setup for the default column widths, b/c can't use\n // CSS vars in media queries.\n &.snap {\n @include block-snap-widths;\n }\n }\n</style>\n"],"names":["ctx","attr","div","div_class_value","toggle_class","insert","target","anchor","current","dirty","width","$$props","id","cls","snap","role","ariaLabel"],"mappings":"2OAyBOA,EAAE,CAAA,CAAA,EACwBC,EAAAC,EAAA,QAAAC,EAAA,0BAAAH,SAAQA,EAAG,CAAA,EAAA,iBAAA,aAEnCA,EAAI,CAAA,CAAA,mBACEA,EAAS,CAAA,CAAA,EAFTI,EAAAF,EAAA,OAAAF,MAAQA,EAAK,CAAA,IAAK,SAAWA,OAAU,QAAQ,UAH9DK,EASKC,EAAAJ,EAAAK,CAAA,sHAREP,EAAE,CAAA,CAAA,GACwB,CAAAQ,GAAAC,EAAA,GAAAN,KAAAA,EAAA,0BAAAH,SAAQA,EAAG,CAAA,EAAA,2DAEnCA,EAAI,CAAA,CAAA,+BACEA,EAAS,CAAA,CAAA,cAFTI,EAAAF,EAAA,OAAAF,MAAQA,EAAK,CAAA,IAAK,SAAWA,OAAU,QAAQ,qHAtBjD,CAAA,MAAAU,EAAwB,QAAQ,EAAAC,EAGhC,CAAA,GAAAC,EAAa,EAAE,EAAAD,EAGtB,CAAA,MAAAE,EAAc,EAAE,EAAAF,EAIT,CAAA,KAAAG,EAAgB,EAAK,EAAAH,EAGrB,CAAA,KAAAI,EAAsB,IAAI,EAAAJ,EAG1B,CAAA,UAAAK,EAA2B,IAAI,EAAAL"}

1
docs/assets/Block-d7117e06.css Normal file
View file

@ -0,0 +1 @@
.article-block.svelte-1bpn7zi{max-width:var(--normal-column-width, 660px)}.article-block.narrower.svelte-1bpn7zi{max-width:var(--narrower-column-width, 330px)}.article-block.narrow.svelte-1bpn7zi{max-width:var(--narrow-column-width, 510px)}.article-block.wide.svelte-1bpn7zi{max-width:var(--wide-column-width, 930px)}.article-block.wider.svelte-1bpn7zi{max-width:var(--wider-column-width, 1200px)}.article-block.widest.svelte-1bpn7zi{max-width:100%}.article-block.fluid.svelte-1bpn7zi{width:calc(100% + 30px);margin-inline-start:-15px;max-width:none}.article-block.snap.svelte-1bpn7zi{width:330px}@media (min-width: 540px){.article-block.snap.svelte-1bpn7zi:not(.skip-narrow){width:510px}}@media (min-width: 690px){.article-block.snap.svelte-1bpn7zi:not(.skip-normal){width:660px}}@media (min-width: 360px){.article-block.snap.narrower.svelte-1bpn7zi{width:330px}}@media (min-width: 540px){.article-block.snap.narrow.svelte-1bpn7zi{width:510px}}@media (min-width: 960px){.article-block.snap.wide.svelte-1bpn7zi{width:930px}}@media (min-width: 960px){.article-block.snap.wider.svelte-1bpn7zi:not(.skip-wide){width:930px}}@media (min-width: 1230px){.article-block.snap.wider.svelte-1bpn7zi:not(.skip-wider){width:1200px}}.article-block.snap.widest.svelte-1bpn7zi,.article-block.snap.fluid.svelte-1bpn7zi{width:inherit}.article-block.snap.fluid.svelte-1bpn7zi{width:calc(100% + 30px)}

4
docs/assets/Block.stories-3a816aea.js → docs/assets/Block.stories-f8d9ea98.js
View file

@ -1,4 +1,4 @@
import{S as oe,i as le,s as ae,C as O,g as u,y as b,m as p,d as w,t as $,h as m,f as h,j as f,l as M,b as W,e as B,n as Z,z as T}from"./index-99a30af8.js";import{g as ee,a as te}from"./spread-8a54911c.js";import{p as re,M as ie,T as ce,S as q}from"./collect-stories-1e0d20c7.js";import{B as y}from"./Block-4e35b26d.js";import{A as se}from"./Article-cb12a248.js";import{b as X,w as de}from"./withParams-47e2ab71.js";const ue=`The \`Block\` component is the basic building block of stories, a responsive container that wraps each section of your piece.
import{S as oe,i as le,s as ae,C as O,g as u,y as b,m as p,d as w,t as $,h as m,f as h,j as f,l as M,b as W,e as B,n as Z,z as T}from"./index-99a30af8.js";import{g as ee,a as te}from"./spread-8a54911c.js";import{p as re,M as ie,T as ce,S as q}from"./collect-stories-1e0d20c7.js";import{B as y}from"./Block-a09d61d3.js";import{A as se}from"./Article-cb12a248.js";import{b as X,w as de}from"./withParams-47e2ab71.js";const ue=`The \`Block\` component is the basic building block of stories, a responsive container that wraps each section of your piece.
Blocks are stacked vertically within the well created by the [\`Article\`](./?path=/docs/layout-article) component. They can have different widths on larger screens depending on the \`width\` prop.
@ -139,4 +139,4 @@ Luckily, it's still pretty easy. Just add a \`cls\` or \`id\` to your \`Block\`
>
</div>
</Article>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","customLayoutsDocs","snapWidthsDocs","Block","Article","withComponentDocs","withStoryDocs"]}),Oe=j.meta,je=["Default","CustomLayouts","SnapWidths"],qe=j.stories.Default,Pe=j.stories.CustomLayouts,He=j.stories.SnapWidths;export{Pe as CustomLayouts,qe as Default,He as SnapWidths,je as __namedExportsOrder,Oe as default};
//# sourceMappingURL=Block.stories-3a816aea.js.map
//# sourceMappingURL=Block.stories-f8d9ea98.js.map

2
docs/assets/Block.stories-3a816aea.js.map → docs/assets/Block.stories-f8d9ea98.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/BodyText-beab66e3.js → docs/assets/BodyText-b6660f02.js
View file

@ -1,2 +1,2 @@
import{S as m,i as u,s as p,g as r,m as l,t as c,h as d,j as f}from"./index-99a30af8.js";import{M as g}from"./Markdown-2a6fc77f.js";import{B as y}from"./Block-4e35b26d.js";function k(a){let e,s;return e=new g({props:{source:a[0]}}),{c(){r(e.$$.fragment)},m(t,n){l(e,t,n),s=!0},p(t,n){const i={};n&1&&(i.source=t[0]),e.$set(i)},i(t){s||(c(e.$$.fragment,t),s=!0)},o(t){d(e.$$.fragment,t),s=!1},d(t){f(e,t)}}}function _(a){let e,s;return e=new y({props:{id:a[2],class:"fmy-6 "+a[1],$$slots:{default:[k]},$$scope:{ctx:a}}}),{c(){r(e.$$.fragment)},m(t,n){l(e,t,n),s=!0},p(t,[n]){const i={};n&4&&(i.id=t[2]),n&2&&(i.class="fmy-6 "+t[1]),n&9&&(i.$$scope={dirty:n,ctx:t}),e.$set(i)},i(t){s||(c(e.$$.fragment,t),s=!0)},o(t){d(e.$$.fragment,t),s=!1},d(t){f(e,t)}}}function w(a,e,s){let{text:t}=e,{class:n=""}=e,{id:i=""}=e;return a.$$set=o=>{"text"in o&&s(0,t=o.text),"class"in o&&s(1,n=o.class),"id"in o&&s(2,i=o.id)},[t,n,i]}class b extends m{constructor(e){super(),u(this,e,w,_,p,{text:0,class:1,id:2})}}b.__docgen={version:3,name:"BodyText.svelte",data:[{keywords:[{name:"type",description:"{string}"},{name:"required",description:""}],visibility:"public",description:"A markdown text string.",name:"text",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"}},{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:""},{keywords:[],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:""}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};export{b as B};
//# sourceMappingURL=BodyText-beab66e3.js.map
import{S as m,i as u,s as p,g as r,m as l,t as c,h as d,j as f}from"./index-99a30af8.js";import{M as g}from"./Markdown-2a6fc77f.js";import{B as y}from"./Block-a09d61d3.js";function k(a){let e,s;return e=new g({props:{source:a[0]}}),{c(){r(e.$$.fragment)},m(t,n){l(e,t,n),s=!0},p(t,n){const i={};n&1&&(i.source=t[0]),e.$set(i)},i(t){s||(c(e.$$.fragment,t),s=!0)},o(t){d(e.$$.fragment,t),s=!1},d(t){f(e,t)}}}function _(a){let e,s;return e=new y({props:{id:a[2],class:"fmy-6 "+a[1],$$slots:{default:[k]},$$scope:{ctx:a}}}),{c(){r(e.$$.fragment)},m(t,n){l(e,t,n),s=!0},p(t,[n]){const i={};n&4&&(i.id=t[2]),n&2&&(i.class="fmy-6 "+t[1]),n&9&&(i.$$scope={dirty:n,ctx:t}),e.$set(i)},i(t){s||(c(e.$$.fragment,t),s=!0)},o(t){d(e.$$.fragment,t),s=!1},d(t){f(e,t)}}}function w(a,e,s){let{text:t}=e,{class:n=""}=e,{id:i=""}=e;return a.$$set=o=>{"text"in o&&s(0,t=o.text),"class"in o&&s(1,n=o.class),"id"in o&&s(2,i=o.id)},[t,n,i]}class b extends m{constructor(e){super(),u(this,e,w,_,p,{text:0,class:1,id:2})}}b.__docgen={version:3,name:"BodyText.svelte",data:[{keywords:[{name:"type",description:"{string}"},{name:"required",description:""}],visibility:"public",description:"A markdown text string.",name:"text",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"}},{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:""},{keywords:[],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:""}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};export{b as B};
//# sourceMappingURL=BodyText-b6660f02.js.map

2
docs/assets/BodyText-beab66e3.js.map → docs/assets/BodyText-b6660f02.js.map
View file

@ -1 +1 @@
{"version":3,"file":"BodyText-beab66e3.js","sources":["../../src/components/BodyText/BodyText.svelte"],"sourcesContent":["<!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-bodytext--default) -->\n<script lang=\"ts\">\n import Markdown from '../Markdown/Markdown.svelte';\n /**\n * A markdown text string.\n * @type {string}\n * @required\n */\n export let text: string;\n\n /** Add a class to target with SCSS. */\n let cls: string = '';\n export { cls as class };\n\n /** Add an id to the block tag to target it with custom CSS. */\n export let id: string = '';\n\n import Block from '../Block/Block.svelte';\n</script>\n\n<Block id=\"{id}\" class=\"fmy-6 {cls}\">\n <Markdown source=\"{text}\" />\n</Block>\n"],"names":["ctx","text","$$props","cls","id"],"mappings":"gOAqBqBA,EAAI,CAAA,CAAA,CAAA,CAAA,gFAAJA,EAAI,CAAA,6IADbA,EAAE,CAAA,iBAAiBA,EAAG,CAAA,uHAAtBA,EAAE,CAAA,0BAAiBA,EAAG,CAAA,oJAZrB,KAAAC,CAAY,EAAAC,EAGnB,CAAA,MAAAC,EAAc,EAAE,EAAAD,EAIT,CAAA,GAAAE,EAAa,EAAE,EAAAF"}
{"version":3,"file":"BodyText-b6660f02.js","sources":["../../src/components/BodyText/BodyText.svelte"],"sourcesContent":["<!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-bodytext--default) -->\n<script lang=\"ts\">\n import Markdown from '../Markdown/Markdown.svelte';\n /**\n * A markdown text string.\n * @type {string}\n * @required\n */\n export let text: string;\n\n /** Add a class to target with SCSS. */\n let cls: string = '';\n export { cls as class };\n\n /** Add an id to the block tag to target it with custom CSS. */\n export let id: string = '';\n\n import Block from '../Block/Block.svelte';\n</script>\n\n<Block id=\"{id}\" class=\"fmy-6 {cls}\">\n <Markdown source=\"{text}\" />\n</Block>\n"],"names":["ctx","text","$$props","cls","id"],"mappings":"gOAqBqBA,EAAI,CAAA,CAAA,CAAA,CAAA,gFAAJA,EAAI,CAAA,6IADbA,EAAE,CAAA,iBAAiBA,EAAG,CAAA,uHAAtBA,EAAE,CAAA,0BAAiBA,EAAG,CAAA,oJAZrB,KAAAC,CAAY,EAAAC,EAGnB,CAAA,MAAAC,EAAc,EAAE,EAAAD,EAIT,CAAA,GAAAE,EAAa,EAAE,EAAAF"}

4
docs/assets/BodyText.stories-d466185a.js → docs/assets/BodyText.stories-87bd5538.js
View file

@ -1,4 +1,4 @@
import{S as C,i as D,s as j,C as T,g as c,y as b,m,d as g,t as p,h as u,f as y,j as d}from"./index-99a30af8.js";import{g as q,a as A}from"./spread-8a54911c.js";import{p as M,M as F,T as V,S as w}from"./collect-stories-1e0d20c7.js";import{B}from"./BodyText-beab66e3.js";import{w as P}from"./withParams-47e2ab71.js";import"./Markdown-2a6fc77f.js";import"./Block-4e35b26d.js";const E=`The \`BodyText\` creates the main text of your page. You can pass the \`text\` prop a [markdown-formatted](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) string, which will be parsed into paragraphs, headers, lists, blockquotes or whatever else you need.
import{S as C,i as D,s as j,C as T,g as c,y as b,m,d as g,t as p,h as u,f as y,j as d}from"./index-99a30af8.js";import{g as q,a as A}from"./spread-8a54911c.js";import{p as M,M as F,T as V,S as w}from"./collect-stories-1e0d20c7.js";import{B}from"./BodyText-b6660f02.js";import{w as P}from"./withParams-47e2ab71.js";import"./Markdown-2a6fc77f.js";import"./Block-a09d61d3.js";const E=`The \`BodyText\` creates the main text of your page. You can pass the \`text\` prop a [markdown-formatted](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) string, which will be parsed into paragraphs, headers, lists, blockquotes or whatever else you need.
Use it like this:
@ -91,4 +91,4 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
<p class='body-correction'>Correction: Lorem ispsum dolor sit amet ameno dorime.</p>
`}}}),{c(){c(o.$$.fragment),n=b(),c(a.$$.fragment),i=b(),c(t.$$.fragment),l=b(),c(s.$$.fragment)},m(e,r){m(o,e,r),g(e,n,r),m(a,e,r),g(e,i,r),m(t,e,r),g(e,l,r),m(s,e,r),f=!0},p(e,[r]){const S={};o.$set(S);const x={};r&3&&(x.$$scope={dirty:r,ctx:e}),a.$set(x)},i(e){f||(p(o.$$.fragment,e),p(a.$$.fragment,e),p(t.$$.fragment,e),p(s.$$.fragment,e),f=!0)},o(e){u(o.$$.fragment,e),u(a.$$.fragment,e),u(t.$$.fragment,e),u(s.$$.fragment,e),f=!1},d(e){e&&(y(n),y(i),y(l)),d(o,e),d(a,e),d(t,e),d(s,e)}}}class v extends C{constructor(o){super(),D(this,o,null,J,j,{})}}v.__docgen={version:3,name:"BodyText.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const $=M(v,{meta:{title:"Components/BodyText"},stories:{"tpl:default":{name:"default",template:!0,source:"<BodyText {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1},TypographySample:{name:"Typography sample",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","BodyText","withComponentDocs"]}),U=$.meta,Y=["Default","TypographySample"],z=$.stories.Default,N=$.stories.TypographySample;export{z as Default,N as TypographySample,Y as __namedExportsOrder,U as default};
//# sourceMappingURL=BodyText.stories-d466185a.js.map
//# sourceMappingURL=BodyText.stories-87bd5538.js.map

2
docs/assets/BodyText.stories-d466185a.js.map → docs/assets/BodyText.stories-87bd5538.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/Byline-df82a671.js → docs/assets/Byline-1358d74f.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/Byline-df82a671.js.map → docs/assets/Byline-1358d74f.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/Byline.stories-6bc5cafe.js → docs/assets/Byline.stories-541562f2.js
View file

@ -1,4 +1,4 @@
import{S as v,i as A,s as C,C as B,g as l,y as d,m as f,d as y,t as u,h as c,f as D,j as $}from"./index-99a30af8.js";import{g as h,a as T}from"./spread-8a54911c.js";import{p as M,M as P,T as Z,S as I}from"./collect-stories-1e0d20c7.js";import{B as w}from"./Byline-df82a671.js";import{w as O}from"./withParams-47e2ab71.js";import"./each-e59479a4.js";import"./Block-4e35b26d.js";import"./_commonjsHelpers-de833af9.js";import"./journalize-07958dc6.js";const j=`Byline and dateline.
import{S as v,i as A,s as C,C as B,g as l,y as d,m as f,d as y,t as u,h as c,f as D,j as $}from"./index-99a30af8.js";import{g as h,a as T}from"./spread-8a54911c.js";import{p as M,M as P,T as Z,S as I}from"./collect-stories-1e0d20c7.js";import{B as w}from"./Byline-1358d74f.js";import{w as O}from"./withParams-47e2ab71.js";import"./each-e59479a4.js";import"./Block-a09d61d3.js";import"./_commonjsHelpers-de833af9.js";import"./journalize-07958dc6.js";const j=`Byline and dateline.
\`\`\`svelte
<script>
@ -18,4 +18,4 @@ import{S as v,i as A,s as C,C as B,g as l,y as d,m as f,d as y,t as u,h as c,f a
/>
\`\`\`
`;function k(p){let n,r;const a=[p[1]];let i={};for(let t=0;t<a.length;t+=1)i=B(i,a[t]);return n=new w({props:i}),{c(){l(n.$$.fragment)},m(t,o){f(n,t,o),r=!0},p(t,o){const m=o&2?h(a,[T(t[1])]):{};n.$set(m)},i(t){r||(u(n.$$.fragment,t),r=!0)},o(t){c(n.$$.fragment,t),r=!1},d(t){$(n,t)}}}function K(p){let n,r,a,i,t,o;const m=[{title:"Components/Byline"},{component:w},p[0]];let g={};for(let e=0;e<m.length;e+=1)g=B(g,m[e]);return n=new P({props:g}),a=new Z({props:{$$slots:{default:[k,({args:e})=>({1:e}),({args:e})=>e?2:0]},$$scope:{ctx:p}}}),t=new I({props:{name:"Default",args:{align:"left",authors:["Dea Bankova","Aditi Bhandari","Prasanta Kumar Dutta","Anurag Rao","Mariano Zafra"],publishTime:new Date("2021-09-12").toISOString(),updateTime:new Date("2021-09-12T13:57:00").toISOString()}}}),{c(){l(n.$$.fragment),r=d(),l(a.$$.fragment),i=d(),l(t.$$.fragment)},m(e,s){f(n,e,s),y(e,r,s),f(a,e,s),y(e,i,s),f(t,e,s),o=!0},p(e,[s]){const b=s&1?h(m,[m[0],m[1],T(e[0])]):{};n.$set(b);const _={};s&6&&(_.$$scope={dirty:s,ctx:e}),a.$set(_)},i(e){o||(u(n.$$.fragment,e),u(a.$$.fragment,e),u(t.$$.fragment,e),o=!0)},o(e){c(n.$$.fragment,e),c(a.$$.fragment,e),c(t.$$.fragment,e),o=!1},d(e){e&&(D(r),D(i)),$(n,e),$(a,e),$(t,e)}}}function R(p){return[{...O(j),argTypes:{align:{control:"select",options:["left","center"]}}}]}class q extends v{constructor(n){super(),A(this,n,R,K,C,{})}}const S=M(q,{meta:{title:"Components/Byline"},stories:{"tpl:default":{name:"default",template:!0,source:"<Byline {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","Byline","withComponentDocs"]}),Q=S.meta,U=["Default"],V=S.stories.Default;export{V as Default,U as __namedExportsOrder,Q as default};
//# sourceMappingURL=Byline.stories-6bc5cafe.js.map
//# sourceMappingURL=Byline.stories-541562f2.js.map

2
docs/assets/Byline.stories-6bc5cafe.js.map → docs/assets/Byline.stories-541562f2.js.map
View file

@ -1 +1 @@
{"version":3,"file":"Byline.stories-6bc5cafe.js","sources":["../../src/components/Byline/stories/docs/component.md?raw","../../src/components/Byline/Byline.stories.svelte"],"sourcesContent":["export default \"Byline and dateline.\\n\\n```svelte\\n<script>\\n import { Byline } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<Byline\\n authors=\\\"{[\\n 'Dea Bankova',\\n 'Aditi Bhandari',\\n 'Prasanta Kumar Dutta',\\n 'Anurag Rao',\\n 'Mariano Zafra',\\n ]}\\\"\\n publishTime=\\\"2021-09-12T00:00:00.000Z\\\"\\n updateTime=\\\"2021-09-12T12:57:00.000Z\\\"\\n/>\\n```\\n\"","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import componentDocs from './stories/docs/component.md?raw';\n\n import Byline from './Byline.svelte';\n\n import { withComponentDocs } from '$lib/docs/utils/withParams.js';\n\n const metaProps = {\n ...withComponentDocs(componentDocs),\n // https://storybook.js.org/docs/svelte/essentials/controls\n argTypes: {\n align: {\n control: 'select',\n options: ['left', 'center'],\n },\n },\n };\n</script>\n\n<Meta title=\"Components/Byline\" component=\"{Byline}\" {...metaProps} />\n\n<Template let:args>\n <Byline {...args} />\n</Template>\n\n<Story\n name=\"Default\"\n args=\"{{\n align: 'left',\n authors: [\n 'Dea Bankova',\n 'Aditi Bhandari',\n 'Prasanta Kumar Dutta',\n 'Anurag Rao',\n 'Mariano Zafra',\n ],\n publishTime: new Date('2021-09-12').toISOString(),\n updateTime: new Date('2021-09-12T13:57:00').toISOString(),\n }}\"\n/>\n"],"names":["componentDocs","ctx","meta_spread_levels","Byline","withComponentDocs"],"mappings":"icAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCCyBDC,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,6HAH0B,MAAAC,EAAA,CAAA,CAAA,MAAA,mBAAA,EAAA,CAAA,UAAAC,GAAaF,EAAS,CAAA,CAAA,iNAS9D,MAAO,OACP,QAAO,CACL,cACA,iBACA,uBACA,aACA,iBAEF,YAAiB,IAAA,KAAK,YAAY,EAAE,YAAW,EAC/C,WAAgB,IAAA,KAAK,qBAAqB,EAAE,YAAW,2KAlBFA,EAAS,CAAA,CAAA,qRAZjD,CACV,GAAAG,EAAkBJ,CAAa,EAElC,SAAQ,CACN,MAAK,CACH,QAAS,SACT,QAAO,CAAG,OAAQ,QAAQ"}
{"version":3,"file":"Byline.stories-541562f2.js","sources":["../../src/components/Byline/stories/docs/component.md?raw","../../src/components/Byline/Byline.stories.svelte"],"sourcesContent":["export default \"Byline and dateline.\\n\\n```svelte\\n<script>\\n import { Byline } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<Byline\\n authors=\\\"{[\\n 'Dea Bankova',\\n 'Aditi Bhandari',\\n 'Prasanta Kumar Dutta',\\n 'Anurag Rao',\\n 'Mariano Zafra',\\n ]}\\\"\\n publishTime=\\\"2021-09-12T00:00:00.000Z\\\"\\n updateTime=\\\"2021-09-12T12:57:00.000Z\\\"\\n/>\\n```\\n\"","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import componentDocs from './stories/docs/component.md?raw';\n\n import Byline from './Byline.svelte';\n\n import { withComponentDocs } from '$lib/docs/utils/withParams.js';\n\n const metaProps = {\n ...withComponentDocs(componentDocs),\n // https://storybook.js.org/docs/svelte/essentials/controls\n argTypes: {\n align: {\n control: 'select',\n options: ['left', 'center'],\n },\n },\n };\n</script>\n\n<Meta title=\"Components/Byline\" component=\"{Byline}\" {...metaProps} />\n\n<Template let:args>\n <Byline {...args} />\n</Template>\n\n<Story\n name=\"Default\"\n args=\"{{\n align: 'left',\n authors: [\n 'Dea Bankova',\n 'Aditi Bhandari',\n 'Prasanta Kumar Dutta',\n 'Anurag Rao',\n 'Mariano Zafra',\n ],\n publishTime: new Date('2021-09-12').toISOString(),\n updateTime: new Date('2021-09-12T13:57:00').toISOString(),\n }}\"\n/>\n"],"names":["componentDocs","ctx","meta_spread_levels","Byline","withComponentDocs"],"mappings":"icAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCCyBDC,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,6HAH0B,MAAAC,EAAA,CAAA,CAAA,MAAA,mBAAA,EAAA,CAAA,UAAAC,GAAaF,EAAS,CAAA,CAAA,iNAS9D,MAAO,OACP,QAAO,CACL,cACA,iBACA,uBACA,aACA,iBAEF,YAAiB,IAAA,KAAK,YAAY,EAAE,YAAW,EAC/C,WAAgB,IAAA,KAAK,qBAAqB,EAAE,YAAW,2KAlBFA,EAAS,CAAA,CAAA,qRAZjD,CACV,GAAAG,EAAkBJ,CAAa,EAElC,SAAQ,CACN,MAAK,CACH,QAAS,SACT,QAAO,CAAG,OAAQ,QAAQ"}

4
docs/assets/Color-6VNJS4EI-863154ad.js → docs/assets/Color-6VNJS4EI-eccdabf8.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/Color-6VNJS4EI-863154ad.js.map → docs/assets/Color-6VNJS4EI-eccdabf8.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/DatawrapperChart.stories-f2164477.js → docs/assets/DatawrapperChart.stories-8eb85da9.js
View file

@ -1,4 +1,4 @@
import{S as F,i as X,s as Y,g as y,m as _,t as h,h as w,j as k,x as ee,D as te,X as ie,y as A,l as V,r as ae,b as g,F as I,c as G,d as D,e as re,v as E,w as M,f as C,E as ne,k as z,u as H,o as J,p as K,C as N,n as se}from"./index-99a30af8.js";import{g as Q,a as Z}from"./spread-8a54911c.js";import{p as oe,M as le,T as ce,S as B}from"./collect-stories-1e0d20c7.js";import{G as pe}from"./GraphicBlock-c40f9bd5.js";import{b as fe,w as de}from"./withParams-47e2ab71.js";import"./Block-4e35b26d.js";import"./PaddingReset-79b11107.js";import"./Markdown-2a6fc77f.js";const me=`Easily add a responsive Datawrapper embed on your page.
import{S as F,i as X,s as Y,g as y,m as _,t as h,h as w,j as k,x as ee,D as te,X as ie,y as A,l as V,r as ae,b as g,F as I,c as G,d as D,e as re,v as E,w as M,f as C,E as ne,k as z,u as H,o as J,p as K,C as N,n as se}from"./index-99a30af8.js";import{g as Q,a as Z}from"./spread-8a54911c.js";import{p as oe,M as le,T as ce,S as B}from"./collect-stories-1e0d20c7.js";import{G as pe}from"./GraphicBlock-caaf4041.js";import{b as fe,w as de}from"./withParams-47e2ab71.js";import"./Block-a09d61d3.js";import"./PaddingReset-79b11107.js";import"./Markdown-2a6fc77f.js";const me=`Easily add a responsive Datawrapper embed on your page.
\`\`\`svelte
<script>
@ -43,4 +43,4 @@ Source: Center for Reproductive Rights`}}),{c(){y(t.$$.fragment)},m(e,i){_(t,e,i
Source: Center for Reproductive Rights'}"
/>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","withChatterDocs","DatawrapperChart","withComponentDocs","withStoryDocs"]}),Oe=O.meta,Ve=["Default","WithChatter"],Ie=O.stories.Default,Ee=O.stories.WithChatter;export{Ie as Default,Ee as WithChatter,Ve as __namedExportsOrder,Oe as default};
//# sourceMappingURL=DatawrapperChart.stories-f2164477.js.map
//# sourceMappingURL=DatawrapperChart.stories-8eb85da9.js.map

2
docs/assets/DatawrapperChart.stories-f2164477.js.map → docs/assets/DatawrapperChart.stories-8eb85da9.js.map
View file

File diff suppressed because one or more lines are too long

2
docs/assets/DocsRenderer-3PUGWF3O-e4902202.js
View file

@ -1,2 +0,0 @@
import{D as d,d as n}from"./chunk-S4VUQJ4A-be5654c7.js";import"./iframe-650c55fc.js";import"../sb-preview/runtime.js";import"./index-c599f7c3.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";export{d as DocsRenderer,n as defaultComponents};
//# sourceMappingURL=DocsRenderer-3PUGWF3O-e4902202.js.map

1
docs/assets/DocsRenderer-3PUGWF3O-e4902202.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"DocsRenderer-3PUGWF3O-e4902202.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

2
docs/assets/DocsRenderer-3PUGWF3O-ee609988.js Normal file
View file

@ -0,0 +1,2 @@
import{D as d,d as n}from"./chunk-S4VUQJ4A-23edc7ed.js";import"./iframe-b8e40deb.js";import"../sb-preview/runtime.js";import"./index-b33a5d42.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";export{d as DocsRenderer,n as defaultComponents};
//# sourceMappingURL=DocsRenderer-3PUGWF3O-ee609988.js.map

1
docs/assets/DocsRenderer-3PUGWF3O-ee609988.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"DocsRenderer-3PUGWF3O-ee609988.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

4
docs/assets/DocumentCloud.stories-d07dfc14.js → docs/assets/DocumentCloud.stories-6f3ee599.js
View file

@ -1,4 +1,4 @@
import{S as $,i as k,s as C,g as d,m as f,t as p,h as g,j as h,l as q,b as m,F as b,d as w,f as _,C as v,y as D}from"./index-99a30af8.js";import{g as A,a as S}from"./spread-8a54911c.js";import{p as R,M,T as V,S as j}from"./collect-stories-1e0d20c7.js";import{B}from"./Block-4e35b26d.js";import{w as E}from"./withParams-47e2ab71.js";const F=`Embed a document hosted by [DocumentCloud](https://documentcloud.org)
import{S as $,i as k,s as C,g as d,m as f,t as p,h as g,j as h,l as q,b as m,F as b,d as w,f as _,C as v,y as D}from"./index-99a30af8.js";import{g as A,a as S}from"./spread-8a54911c.js";import{p as R,M,T as V,S as j}from"./collect-stories-1e0d20c7.js";import{B}from"./Block-a09d61d3.js";import{w as E}from"./withParams-47e2ab71.js";const F=`Embed a document hosted by [DocumentCloud](https://documentcloud.org)
---
@ -16,4 +16,4 @@ The document must have its access level set to public before it can be embedded.
/>
\`\`\`
`;function H(a){let e,o;return{c(){e=q("iframe"),m(e,"class","h-screen"),b(e.src,o="https://embed.documentcloud.org/documents/"+a[1]+"/?embed=1&responsive=1&title=1")||m(e,"src",o),m(e,"title",a[2]),m(e,"width","700"),m(e,"height","540"),m(e,"sandbox","allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox")},m(t,l){w(t,e,l)},p(t,l){l&2&&!b(e.src,o="https://embed.documentcloud.org/documents/"+t[1]+"/?embed=1&responsive=1&title=1")&&m(e,"src",o),l&4&&m(e,"title",t[2])},d(t){t&&_(e)}}}function P(a){let e,o;return e=new B({props:{width:a[0],id:a[3],class:"photo fmy-6 "+a[4],$$slots:{default:[H]},$$scope:{ctx:a}}}),{c(){d(e.$$.fragment)},m(t,l){f(e,t,l),o=!0},p(t,[l]){const s={};l&1&&(s.width=t[0]),l&8&&(s.id=t[3]),l&16&&(s.class="photo fmy-6 "+t[4]),l&38&&(s.$$scope={dirty:l,ctx:t}),e.$set(s)},i(t){o||(p(e.$$.fragment,t),o=!0)},o(t){g(e.$$.fragment,t),o=!1},d(t){h(e,t)}}}function L(a,e,o){let{width:t="normal"}=e,{slug:l}=e,{altText:s}=e,{id:r=""}=e,{class:u=""}=e;return a.$$set=i=>{"width"in i&&o(0,t=i.width),"slug"in i&&o(1,l=i.slug),"altText"in i&&o(2,s=i.altText),"id"in i&&o(3,r=i.id),"class"in i&&o(4,u=i.class)},[t,l,s,r,u]}class y extends ${constructor(e){super(),k(this,e,L,P,C,{width:0,slug:1,altText:2,id:3,class:4})}}y.__docgen={version:3,name:"DocumentCloud.svelte",data:[{keywords:[],visibility:"public",description:"Width of the container, one of: normal, wide, wider, widest or fluid",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"},{keywords:[{name:"required",description:""}],visibility:"public",description:"The unique identifier for the document.",name:"slug",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{keywords:[{name:"required",description:""}],visibility:"public",description:"Alt text for the document.",name:"altText",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{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:""}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function N(a){let e,o;const t=[a[1]];let l={};for(let s=0;s<t.length;s+=1)l=v(l,t[s]);return e=new y({props:l}),{c(){d(e.$$.fragment)},m(s,r){f(e,s,r),o=!0},p(s,r){const u=r&2?A(t,[S(s[1])]):{};e.$set(u)},i(s){o||(p(e.$$.fragment,s),o=!0)},o(s){g(e.$$.fragment,s),o=!1},d(s){h(e,s)}}}function O(a){let e,o,t,l,s,r;const u=[{title:"Components/DocumentCloud"},{component:y},a[0]];let i={};for(let n=0;n<u.length;n+=1)i=v(i,u[n]);return e=new M({props:i}),t=new V({props:{$$slots:{default:[N,({args:n})=>({1:n}),({args:n})=>n?2:0]},$$scope:{ctx:a}}}),s=new j({props:{name:"Default",args:{width:"normal",slug:"3259984-Trump-Intelligence-Allegations",altText:"These Reports Allege Trump Has Deep Ties To Russia"}}}),{c(){d(e.$$.fragment),o=D(),d(t.$$.fragment),l=D(),d(s.$$.fragment)},m(n,c){f(e,n,c),w(n,o,c),f(t,n,c),w(n,l,c),f(s,n,c),r=!0},p(n,[c]){const I=c&1?A(u,[u[0],u[1],S(n[0])]):{};e.$set(I);const T={};c&6&&(T.$$scope={dirty:c,ctx:n}),t.$set(T)},i(n){r||(p(e.$$.fragment,n),p(t.$$.fragment,n),p(s.$$.fragment,n),r=!0)},o(n){g(e.$$.fragment,n),g(t.$$.fragment,n),g(s.$$.fragment,n),r=!1},d(n){n&&(_(o),_(l)),h(e,n),h(t,n),h(s,n)}}}function U(a){return[{...E(F),argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]}}}]}class W extends ${constructor(e){super(),k(this,e,U,O,C,{})}}const x=R(W,{meta:{title:"Components/DocumentCloud"},stories:{"tpl:default":{name:"default",template:!0,source:"<DocumentCloud {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","DocumentCloud","withComponentDocs"]}),X=x.meta,Y=["Default"],Z=x.stories.Default;export{Z as Default,Y as __namedExportsOrder,X as default};
//# sourceMappingURL=DocumentCloud.stories-d07dfc14.js.map
//# sourceMappingURL=DocumentCloud.stories-6f3ee599.js.map

2
docs/assets/DocumentCloud.stories-d07dfc14.js.map → docs/assets/DocumentCloud.stories-6f3ee599.js.map
View file

@ -1 +1 @@
{"version":3,"file":"DocumentCloud.stories-d07dfc14.js","sources":["../../src/components/DocumentCloud/stories/docs/component.md?raw","../../src/components/DocumentCloud/DocumentCloud.svelte","../../src/components/DocumentCloud/DocumentCloud.stories.svelte"],"sourcesContent":["export default \"Embed a document hosted by [DocumentCloud](https://documentcloud.org)\\n\\n---\\n\\nThe document must have its access level set to public before it can be embedded. The `slug` argument can be found after the final slash in the document's URL. For instance, the document included in the example is found at [documentcloud.org/documents/3259984-Trump-Intelligence-Allegations](https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations). The slug is \\\"3259984-Trump-Intelligence-Allegations\\\".\\n\\n```svelte\\n<script>\\n import { DocumentCloud } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<DocumentCloud\\n slug=\\\"3259984-Trump-Intelligence-Allegations\\\"\\n altText=\\\"These Reports Allege Trump Has Deep Ties To Russia\\\"\\n width=\\\"normal\\\"\\n/>\\n```\\n\"","<!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DocumentCloud--default) -->\n<script lang=\"ts\">\n import type { ContainerWidth } from '../@types/global';\n /** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */\n\n /**\n * Width of the container, one of: normal, wide, wider, widest or fluid\n */\n export let width: ContainerWidth = 'normal';\n\n /**\n * The unique identifier for the document.\n * @required\n */\n export let slug: string;\n\n /**\n * Alt text for the document.\n * @required\n */\n export let altText: string;\n\n /** Add an ID to target with SCSS. */\n export let id: string = '';\n\n /** Add a class to target with SCSS. */\n let cls: string = '';\n export { cls as class };\n\n import Block from '../Block/Block.svelte';\n</script>\n\n<Block width=\"{width}\" id=\"{id}\" class=\"photo fmy-6 {cls}\">\n <iframe\n class=\"h-screen\"\n src=\"https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1\"\n title=\"{altText}\"\n width=\"700\"\n height=\"540\"\n sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox\"\n ></iframe>\n</Block>\n","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // Don't lose the \"?raw\" in markdown imports!\n // @ts-ignore\n import componentDocs from './stories/docs/component.md?raw';\n\n import DocumentCloud from './DocumentCloud.svelte';\n\n import { withComponentDocs } from '$docs/utils/withParams.js';\n\n const metaProps = {\n ...withComponentDocs(componentDocs),\n argTypes: {\n width: {\n control: 'select',\n options: ['normal', 'wide', 'wider', 'widest', 'fluid'],\n },\n },\n };\n</script>\n\n<Meta\n title=\"Components/DocumentCloud\"\n component=\"{DocumentCloud}\"\n {...metaProps}\n/>\n\n<Template let:args>\n <DocumentCloud {...args} />\n</Template>\n\n<Story\n name=\"Default\"\n args=\"{{\n width: 'normal',\n slug: '3259984-Trump-Intelligence-Allegations',\n altText: 'These Reports Allege Trump Has Deep Ties To Russia',\n }}\"\n/>\n"],"names":["componentDocs","ctx","attr","iframe","iframe_src_value","insert","target","anchor","width","$$props","slug","altText","id","cls","DocumentCloud","withComponentDocs"],"mappings":"4UAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gICmCqCC,EAAI,CAAA,EAAA,gCAAA,GAAAC,EAAAC,EAAA,MAAAC,CAAA,cAC5CH,EAAO,CAAA,CAAA,0JAHjBI,EAOSC,EAAAH,EAAAI,CAAA,uEALyCN,EAAI,CAAA,EAAA,gCAAA,iCAC5CA,EAAO,CAAA,CAAA,qEAJJA,EAAK,CAAA,KAAQA,EAAE,CAAA,uBAAuBA,EAAG,CAAA,0HAAzCA,EAAK,CAAA,cAAQA,EAAE,CAAA,iCAAuBA,EAAG,CAAA,iJAxB3C,GAAA,CAAA,MAAAO,EAAwB,QAAQ,EAAAC,GAMhC,KAAAC,CAAY,EAAAD,GAMZ,QAAAE,CAAe,EAAAF,EAGf,CAAA,GAAAG,EAAa,EAAE,EAAAH,EAGtB,CAAA,MAAAI,EAAc,EAAE,EAAAJ,q8CCGDR,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,oLALXa,CAAa,EACrBb,EAAS,CAAA,kNAUX,MAAO,SACP,KAAM,yCACN,QAAS,8NAZPA,EAAS,CAAA,CAAA,qRAdE,CACV,GAAAc,EAAkBf,CAAa,EAClC,SAAQ,CACN,MAAK,CACH,QAAS,SACT,QAAO,CAAG,SAAU,OAAQ,QAAS,SAAU,OAAO"}
{"version":3,"file":"DocumentCloud.stories-6f3ee599.js","sources":["../../src/components/DocumentCloud/stories/docs/component.md?raw","../../src/components/DocumentCloud/DocumentCloud.svelte","../../src/components/DocumentCloud/DocumentCloud.stories.svelte"],"sourcesContent":["export default \"Embed a document hosted by [DocumentCloud](https://documentcloud.org)\\n\\n---\\n\\nThe document must have its access level set to public before it can be embedded. The `slug` argument can be found after the final slash in the document's URL. For instance, the document included in the example is found at [documentcloud.org/documents/3259984-Trump-Intelligence-Allegations](https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations). The slug is \\\"3259984-Trump-Intelligence-Allegations\\\".\\n\\n```svelte\\n<script>\\n import { DocumentCloud } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<DocumentCloud\\n slug=\\\"3259984-Trump-Intelligence-Allegations\\\"\\n altText=\\\"These Reports Allege Trump Has Deep Ties To Russia\\\"\\n width=\\\"normal\\\"\\n/>\\n```\\n\"","<!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DocumentCloud--default) -->\n<script lang=\"ts\">\n import type { ContainerWidth } from '../@types/global';\n /** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */\n\n /**\n * Width of the container, one of: normal, wide, wider, widest or fluid\n */\n export let width: ContainerWidth = 'normal';\n\n /**\n * The unique identifier for the document.\n * @required\n */\n export let slug: string;\n\n /**\n * Alt text for the document.\n * @required\n */\n export let altText: string;\n\n /** Add an ID to target with SCSS. */\n export let id: string = '';\n\n /** Add a class to target with SCSS. */\n let cls: string = '';\n export { cls as class };\n\n import Block from '../Block/Block.svelte';\n</script>\n\n<Block width=\"{width}\" id=\"{id}\" class=\"photo fmy-6 {cls}\">\n <iframe\n class=\"h-screen\"\n src=\"https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1\"\n title=\"{altText}\"\n width=\"700\"\n height=\"540\"\n sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox\"\n ></iframe>\n</Block>\n","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // Don't lose the \"?raw\" in markdown imports!\n // @ts-ignore\n import componentDocs from './stories/docs/component.md?raw';\n\n import DocumentCloud from './DocumentCloud.svelte';\n\n import { withComponentDocs } from '$docs/utils/withParams.js';\n\n const metaProps = {\n ...withComponentDocs(componentDocs),\n argTypes: {\n width: {\n control: 'select',\n options: ['normal', 'wide', 'wider', 'widest', 'fluid'],\n },\n },\n };\n</script>\n\n<Meta\n title=\"Components/DocumentCloud\"\n component=\"{DocumentCloud}\"\n {...metaProps}\n/>\n\n<Template let:args>\n <DocumentCloud {...args} />\n</Template>\n\n<Story\n name=\"Default\"\n args=\"{{\n width: 'normal',\n slug: '3259984-Trump-Intelligence-Allegations',\n altText: 'These Reports Allege Trump Has Deep Ties To Russia',\n }}\"\n/>\n"],"names":["componentDocs","ctx","attr","iframe","iframe_src_value","insert","target","anchor","width","$$props","slug","altText","id","cls","DocumentCloud","withComponentDocs"],"mappings":"4UAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gICmCqCC,EAAI,CAAA,EAAA,gCAAA,GAAAC,EAAAC,EAAA,MAAAC,CAAA,cAC5CH,EAAO,CAAA,CAAA,0JAHjBI,EAOSC,EAAAH,EAAAI,CAAA,uEALyCN,EAAI,CAAA,EAAA,gCAAA,iCAC5CA,EAAO,CAAA,CAAA,qEAJJA,EAAK,CAAA,KAAQA,EAAE,CAAA,uBAAuBA,EAAG,CAAA,0HAAzCA,EAAK,CAAA,cAAQA,EAAE,CAAA,iCAAuBA,EAAG,CAAA,iJAxB3C,GAAA,CAAA,MAAAO,EAAwB,QAAQ,EAAAC,GAMhC,KAAAC,CAAY,EAAAD,GAMZ,QAAAE,CAAe,EAAAF,EAGf,CAAA,GAAAG,EAAa,EAAE,EAAAH,EAGtB,CAAA,MAAAI,EAAc,EAAE,EAAAJ,q8CCGDR,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,oLALXa,CAAa,EACrBb,EAAS,CAAA,kNAUX,MAAO,SACP,KAAM,yCACN,QAAS,8NAZPA,EAAS,CAAA,CAAA,qRAdE,CACV,GAAAc,EAAkBf,CAAa,EAClC,SAAQ,CACN,MAAK,CACH,QAAS,SACT,QAAO,CAAG,SAAU,OAAQ,QAAS,SAAU,OAAO"}

4
docs/assets/EndNotes.stories-636b55a6.js → docs/assets/EndNotes.stories-5e106445.js
View file

@ -1,4 +1,4 @@
import{S as C,i as S,s as M,g as p,m as d,t as f,h as u,j as $,r as A,d as _,v as B,w as I,f as g,V as F,l as E,y as w,b as v,e as P,C as j}from"./index-99a30af8.js";import{g as O,a as V}from"./spread-8a54911c.js";import{p as z,M as G,T as H,S as J}from"./collect-stories-1e0d20c7.js";import{e as D}from"./each-e59479a4.js";import{B as K}from"./Block-4e35b26d.js";import{M as N}from"./Markdown-2a6fc77f.js";import{w as L}from"./withParams-47e2ab71.js";const Q=`End notes includes notes to the main article — usually things like sources, clarifiying notes and minor corrections at the end of a story.
import{S as C,i as S,s as M,g as p,m as d,t as f,h as u,j as $,r as A,d as _,v as B,w as I,f as g,V as F,l as E,y as w,b as v,e as P,C as j}from"./index-99a30af8.js";import{g as O,a as V}from"./spread-8a54911c.js";import{p as z,M as G,T as H,S as J}from"./collect-stories-1e0d20c7.js";import{e as D}from"./each-e59479a4.js";import{B as K}from"./Block-a09d61d3.js";import{M as N}from"./Markdown-2a6fc77f.js";import{w as L}from"./withParams-47e2ab71.js";const Q=`End notes includes notes to the main article — usually things like sources, clarifiying notes and minor corrections at the end of a story.
\`\`\`svelte
<script>
@ -23,4 +23,4 @@ import{S as C,i as S,s as M,g as p,m as d,t as f,h as u,j as $,r as A,d as _,v a
<EndNotes notes="{notes}" />
\`\`\`
`;function b(i,n,a){const e=i.slice();return e[1]=n[a],e}function T(i){let n,a,e=D(i[0]),t=[];for(let l=0;l<e.length;l+=1)t[l]=x(b(i,e,l));const s=l=>u(t[l],1,1,()=>{t[l]=null});return{c(){for(let l=0;l<t.length;l+=1)t[l].c();n=A()},m(l,c){for(let o=0;o<t.length;o+=1)t[o]&&t[o].m(l,c);_(l,n,c),a=!0},p(l,c){if(c&1){e=D(l[0]);let o;for(o=0;o<e.length;o+=1){const r=b(l,e,o);t[o]?(t[o].p(r,c),f(t[o],1)):(t[o]=x(r),t[o].c(),f(t[o],1),t[o].m(n.parentNode,n))}for(B(),o=e.length;o<t.length;o+=1)s(o);I()}},i(l){if(!a){for(let c=0;c<e.length;c+=1)f(t[c]);a=!0}},o(l){t=t.filter(Boolean);for(let c=0;c<t.length;c+=1)u(t[c]);a=!1},d(l){l&&g(n),F(t,l)}}}function x(i){let n,a,e,t,s,l,c;return a=new N({props:{source:i[1].title}}),s=new N({props:{source:i[1].text}}),{c(){n=E("div"),p(a.$$.fragment),e=w(),t=E("div"),p(s.$$.fragment),l=w(),v(n,"class","note-title svelte-as9r96"),v(t,"class","note-content svelte-as9r96")},m(o,r){_(o,n,r),d(a,n,null),_(o,e,r),_(o,t,r),d(s,t,null),P(t,l),c=!0},p(o,r){const m={};r&1&&(m.source=o[1].title),a.$set(m);const h={};r&1&&(h.source=o[1].text),s.$set(h)},i(o){c||(f(a.$$.fragment,o),f(s.$$.fragment,o),c=!0)},o(o){u(a.$$.fragment,o),u(s.$$.fragment,o),c=!1},d(o){o&&(g(n),g(e),g(t)),$(a),$(s)}}}function R(i){let n,a,e=i[0]&&T(i);return{c(){e&&e.c(),n=A()},m(t,s){e&&e.m(t,s),_(t,n,s),a=!0},p(t,s){t[0]?e?(e.p(t,s),s&1&&f(e,1)):(e=T(t),e.c(),f(e,1),e.m(n.parentNode,n)):e&&(B(),u(e,1,1,()=>{e=null}),I())},i(t){a||(f(e),a=!0)},o(t){u(e),a=!1},d(t){t&&g(n),e&&e.d(t)}}}function U(i){let n,a;return n=new K({props:{class:"notes fmt-6 fmb-8",$$slots:{default:[R]},$$scope:{ctx:i}}}),{c(){p(n.$$.fragment)},m(e,t){d(n,e,t),a=!0},p(e,[t]){const s={};t&17&&(s.$$scope={dirty:t,ctx:e}),n.$set(s)},i(e){a||(f(n.$$.fragment,e),a=!0)},o(e){u(n.$$.fragment,e),a=!1},d(e){$(n,e)}}}function W(i,n,a){let{notes:e=[]}=n;return i.$$set=t=>{"notes"in t&&a(0,e=t.notes)},[e]}class y extends C{constructor(n){super(),S(this,n,W,U,M,{notes:0})}}y.__docgen={version:3,name:"EndNotes.svelte",data:[{keywords:[{name:"required",description:""}],visibility:"public",description:"An array of endnote items.",name:"notes",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"array",type:"array"}}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const X=i=>i.map(n=>({title:n.Title,text:n.Text}));function Y(i){let n,a;const e=[i[1]];let t={};for(let s=0;s<e.length;s+=1)t=j(t,e[s]);return n=new y({props:t}),{c(){p(n.$$.fragment)},m(s,l){d(n,s,l),a=!0},p(s,l){const c=l&2?O(e,[V(s[1])]):{};n.$set(c)},i(s){a||(f(n.$$.fragment,s),a=!0)},o(s){u(n.$$.fragment,s),a=!1},d(s){$(n,s)}}}function Z(i){let n,a,e,t,s,l;const c=[{title:"Components/EndNotes"},{component:y},L(Q)];let o={};for(let r=0;r<c.length;r+=1)o=j(o,c[r]);return n=new G({props:o}),e=new H({props:{$$slots:{default:[Y,({args:r})=>({1:r}),({args:r})=>r?2:0]},$$scope:{ctx:i}}}),s=new J({props:{name:"Default",args:{notes:X(i[0])}}}),{c(){p(n.$$.fragment),a=w(),p(e.$$.fragment),t=w(),p(s.$$.fragment)},m(r,m){d(n,r,m),_(r,a,m),d(e,r,m),_(r,t,m),d(s,r,m),l=!0},p(r,[m]){const h={};n.$set(h);const k={};m&6&&(k.$$scope={dirty:m,ctx:r}),e.$set(k)},i(r){l||(f(n.$$.fragment,r),f(e.$$.fragment,r),f(s.$$.fragment,r),l=!0)},o(r){u(n.$$.fragment,r),u(e.$$.fragment,r),u(s.$$.fragment,r),l=!1},d(r){r&&(g(a),g(t)),$(n,r),$(e,r),$(s,r)}}}function ee(i){return[[{Title:"Note",Text:"Data is current as of today."},{Title:"Sources",Text:"Data, Inc."},{Title:"Edited by",Text:'<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor'}]]}class te extends C{constructor(n){super(),S(this,n,ee,Z,M,{})}}const q=z(te,{meta:{title:"Components/EndNotes"},stories:{"tpl:default":{name:"default",template:!0,source:"<EndNotes {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","EndNotes","getEndNotesPropsFromDoc","withComponentDocs"]}),ce=q.meta,fe=["Default"],me=q.stories.Default;export{me as Default,fe as __namedExportsOrder,ce as default};
//# sourceMappingURL=EndNotes.stories-636b55a6.js.map
//# sourceMappingURL=EndNotes.stories-5e106445.js.map

2
docs/assets/EndNotes.stories-636b55a6.js.map → docs/assets/EndNotes.stories-5e106445.js.map
View file

@ -1 +1 @@
{"version":3,"file":"EndNotes.stories-636b55a6.js","sources":["../../src/components/EndNotes/stories/docs/component.md?raw","../../src/components/EndNotes/EndNotes.svelte","../../src/components/EndNotes/docProps.ts","../../src/components/EndNotes/EndNotes.stories.svelte"],"sourcesContent":["export default \"End notes includes notes to the main article — usually things like sources, clarifiying notes and minor corrections at the end of a story.\\n\\n```svelte\\n<script>\\n import { EndNotes } from '@reuters-graphics/graphics-components';\\n\\n const notes = [\\n {\\n title: 'Note',\\n text: 'Data is current as of today.',\\n },\\n {\\n title: 'Sources',\\n text: 'Data, Inc.',\\n },\\n {\\n title: 'Edited by',\\n text: '<a href=\\\"https://www.reuters.com/graphics/\\\">Editor</a>, Copyeditor',\\n },\\n ];\\n</script>\\n\\n<EndNotes notes=\\\"{notes}\\\" />\\n```\\n\"","<!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-EndNotes--default) -->\n<script lang=\"ts\">\n interface EndNote {\n /**\n * Title of the note item\n */\n title: string;\n /**\n * Contents of the note as a markdown string\n * @required\n */\n text: string;\n }\n\n /**\n * An array of endnote items.\n * @required\n */\n export let notes: EndNote[] = [];\n\n import Block from '../Block/Block.svelte';\n import Markdown from '../Markdown/Markdown.svelte';\n</script>\n\n<Block class=\"notes fmt-6 fmb-8\">\n {#if notes}\n {#each notes as note}\n <div class=\"note-title\">\n <Markdown source=\"{note.title}\" />\n </div>\n <div class=\"note-content\">\n <Markdown source=\"{note.text}\" />\n </div>\n {/each}\n {/if}\n</Block>\n\n<!-- svelte-ignore css-unused-selector -->\n<style lang=\"scss\">\n @import '../../scss/mixins';\n\n .note-title {\n :global(p) {\n @include body-caption;\n @include text-primary;\n @include font-medium;\n @include tracking-normal;\n @include fmt-3;\n margin-bottom: 0.125rem;\n text-transform: none;\n }\n }\n\n .note-content {\n :global(p) {\n @include body-caption;\n @include fmt-0;\n }\n }\n</style>\n","interface EndNote {\n Title: String;\n Text: String;\n}\n\ntype EndNotes = EndNote[];\n\nexport const getEndNotesPropsFromDoc = (endNotes: EndNotes) => {\n return endNotes.map((d) => {\n return {\n title: d.Title,\n text: d.Text,\n };\n });\n};\n","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import componentDocs from './stories/docs/component.md?raw';\n\n import EndNotes from './EndNotes.svelte';\n import { getEndNotesPropsFromDoc } from './docProps';\n import { withComponentDocs } from '$lib/docs/utils/withParams.js';\n\n const notes = [\n {\n Title: 'Note',\n Text: 'Data is current as of today.',\n },\n {\n Title: 'Sources',\n Text: 'Data, Inc.',\n },\n {\n Title: 'Edited by',\n Text: '<a href=\"https://www.reuters.com/graphics/\">Editor</a>, Copyeditor',\n },\n ];\n</script>\n\n<Meta\n title=\"Components/EndNotes\"\n component=\"{EndNotes}\"\n {...withComponentDocs(componentDocs)}\n/>\n\n<Template let:args>\n <EndNotes {...args} />\n</Template>\n\n<Story name=\"Default\" args=\"{{ notes: getEndNotesPropsFromDoc(notes) }}\" />\n"],"names":["componentDocs","ctx","i","each_blocks","markdown0","Markdown","markdown1","insert","target","div0","anchor","div1","dirty","markdown0_changes","markdown1_changes","create_if_block","notes","$$props","getEndNotesPropsFromDoc","endNotes","d","EndNotes","withComponentDocs"],"mappings":"ocAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;mFC0BJC,EAAK,CAAA,CAAA,uBAAV,OAAIC,GAAA,wMAACD,EAAK,CAAA,CAAA,oBAAV,OAAIC,GAAA,EAAA,iHAAJ,OAAIA,EAAAC,EAAA,OAAAD,GAAA,yCAAJ,OAAIA,GAAA,0IAEiB,OAAAE,EAAA,IAAAC,EAAA,CAAA,MAAA,CAAA,OAAAJ,KAAK,KAAK,CAAA,CAAA,EAGVK,EAAA,IAAAD,EAAA,CAAA,MAAA,CAAA,OAAAJ,KAAK,IAAI,CAAA,CAAA,qKAJ9BM,EAEKC,EAAAC,EAAAC,CAAA,uBACLH,EAEKC,EAAAG,EAAAD,CAAA,6CAJgBE,EAAA,IAAAC,EAAA,OAAAZ,KAAK,4BAGLW,EAAA,IAAAE,EAAA,OAAAb,KAAK,qLANzBA,EAAK,CAAA,GAAAc,EAAAd,CAAA,sEAALA,EAAK,CAAA,0eAPC,MAAAe,EAAK,EAAA,EAAAC,kdCXL,MAAAC,EAA2BC,GAC/BA,EAAS,IAAKC,IACZ,CACL,MAAOA,EAAE,MACT,KAAMA,EAAE,IAAA,EAEX,iCCoBanB,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,+KALNoB,CAAQ,EAChBC,EAAkBtB,CAAa,kNAON,MAAOkB,EAAwBjB,EAAK,CAAA,CAAA,waA1BtD,EAEP,MAAO,OACP,KAAM,gCAGN,CAAA,MAAO,UACP,KAAM,YAAY,GAGlB,MAAO,YACP,KAAM"}
{"version":3,"file":"EndNotes.stories-5e106445.js","sources":["../../src/components/EndNotes/stories/docs/component.md?raw","../../src/components/EndNotes/EndNotes.svelte","../../src/components/EndNotes/docProps.ts","../../src/components/EndNotes/EndNotes.stories.svelte"],"sourcesContent":["export default \"End notes includes notes to the main article — usually things like sources, clarifiying notes and minor corrections at the end of a story.\\n\\n```svelte\\n<script>\\n import { EndNotes } from '@reuters-graphics/graphics-components';\\n\\n const notes = [\\n {\\n title: 'Note',\\n text: 'Data is current as of today.',\\n },\\n {\\n title: 'Sources',\\n text: 'Data, Inc.',\\n },\\n {\\n title: 'Edited by',\\n text: '<a href=\\\"https://www.reuters.com/graphics/\\\">Editor</a>, Copyeditor',\\n },\\n ];\\n</script>\\n\\n<EndNotes notes=\\\"{notes}\\\" />\\n```\\n\"","<!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-EndNotes--default) -->\n<script lang=\"ts\">\n interface EndNote {\n /**\n * Title of the note item\n */\n title: string;\n /**\n * Contents of the note as a markdown string\n * @required\n */\n text: string;\n }\n\n /**\n * An array of endnote items.\n * @required\n */\n export let notes: EndNote[] = [];\n\n import Block from '../Block/Block.svelte';\n import Markdown from '../Markdown/Markdown.svelte';\n</script>\n\n<Block class=\"notes fmt-6 fmb-8\">\n {#if notes}\n {#each notes as note}\n <div class=\"note-title\">\n <Markdown source=\"{note.title}\" />\n </div>\n <div class=\"note-content\">\n <Markdown source=\"{note.text}\" />\n </div>\n {/each}\n {/if}\n</Block>\n\n<!-- svelte-ignore css-unused-selector -->\n<style lang=\"scss\">\n @import '../../scss/mixins';\n\n .note-title {\n :global(p) {\n @include body-caption;\n @include text-primary;\n @include font-medium;\n @include tracking-normal;\n @include fmt-3;\n margin-bottom: 0.125rem;\n text-transform: none;\n }\n }\n\n .note-content {\n :global(p) {\n @include body-caption;\n @include fmt-0;\n }\n }\n</style>\n","interface EndNote {\n Title: String;\n Text: String;\n}\n\ntype EndNotes = EndNote[];\n\nexport const getEndNotesPropsFromDoc = (endNotes: EndNotes) => {\n return endNotes.map((d) => {\n return {\n title: d.Title,\n text: d.Text,\n };\n });\n};\n","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import componentDocs from './stories/docs/component.md?raw';\n\n import EndNotes from './EndNotes.svelte';\n import { getEndNotesPropsFromDoc } from './docProps';\n import { withComponentDocs } from '$lib/docs/utils/withParams.js';\n\n const notes = [\n {\n Title: 'Note',\n Text: 'Data is current as of today.',\n },\n {\n Title: 'Sources',\n Text: 'Data, Inc.',\n },\n {\n Title: 'Edited by',\n Text: '<a href=\"https://www.reuters.com/graphics/\">Editor</a>, Copyeditor',\n },\n ];\n</script>\n\n<Meta\n title=\"Components/EndNotes\"\n component=\"{EndNotes}\"\n {...withComponentDocs(componentDocs)}\n/>\n\n<Template let:args>\n <EndNotes {...args} />\n</Template>\n\n<Story name=\"Default\" args=\"{{ notes: getEndNotesPropsFromDoc(notes) }}\" />\n"],"names":["componentDocs","ctx","i","each_blocks","markdown0","Markdown","markdown1","insert","target","div0","anchor","div1","dirty","markdown0_changes","markdown1_changes","create_if_block","notes","$$props","getEndNotesPropsFromDoc","endNotes","d","EndNotes","withComponentDocs"],"mappings":"ocAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;mFC0BJC,EAAK,CAAA,CAAA,uBAAV,OAAIC,GAAA,wMAACD,EAAK,CAAA,CAAA,oBAAV,OAAIC,GAAA,EAAA,iHAAJ,OAAIA,EAAAC,EAAA,OAAAD,GAAA,yCAAJ,OAAIA,GAAA,0IAEiB,OAAAE,EAAA,IAAAC,EAAA,CAAA,MAAA,CAAA,OAAAJ,KAAK,KAAK,CAAA,CAAA,EAGVK,EAAA,IAAAD,EAAA,CAAA,MAAA,CAAA,OAAAJ,KAAK,IAAI,CAAA,CAAA,qKAJ9BM,EAEKC,EAAAC,EAAAC,CAAA,uBACLH,EAEKC,EAAAG,EAAAD,CAAA,6CAJgBE,EAAA,IAAAC,EAAA,OAAAZ,KAAK,4BAGLW,EAAA,IAAAE,EAAA,OAAAb,KAAK,qLANzBA,EAAK,CAAA,GAAAc,EAAAd,CAAA,sEAALA,EAAK,CAAA,0eAPC,MAAAe,EAAK,EAAA,EAAAC,kdCXL,MAAAC,EAA2BC,GAC/BA,EAAS,IAAKC,IACZ,CACL,MAAOA,EAAE,MACT,KAAMA,EAAE,IAAA,EAEX,iCCoBanB,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,+KALNoB,CAAQ,EAChBC,EAAkBtB,CAAa,kNAON,MAAOkB,EAAwBjB,EAAK,CAAA,CAAA,waA1BtD,EAEP,MAAO,OACP,KAAM,gCAGN,CAAA,MAAO,UACP,KAAM,YAAY,GAGlB,MAAO,YACP,KAAM"}

4
docs/assets/FeaturePhoto-4dfc9aa8.js → docs/assets/FeaturePhoto-0bdc1976.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/FeaturePhoto-4dfc9aa8.js.map → docs/assets/FeaturePhoto-0bdc1976.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/FeaturePhoto.stories-fe9a5e02.js → docs/assets/FeaturePhoto.stories-dcf95e8f.js
View file

@ -1,4 +1,4 @@
import{S as Q,i as G,s as q,C as y,g as m,y as _,m as f,d as T,t as h,h as u,f as w,j as g}from"./index-99a30af8.js";import{g as E,a as M}from"./spread-8a54911c.js";import{p as W,M as z,T as L,S as I}from"./collect-stories-1e0d20c7.js";import{F as v}from"./FeaturePhoto-4dfc9aa8.js";import{b as U,w as N}from"./withParams-47e2ab71.js";import"./Block-4e35b26d.js";import"./PaddingReset-79b11107.js";const O=`A full-width photo inside the text well.
import{S as Q,i as G,s as q,C as y,g as m,y as _,m as f,d as T,t as h,h as u,f as w,j as g}from"./index-99a30af8.js";import{g as E,a as M}from"./spread-8a54911c.js";import{p as W,M as z,T as L,S as I}from"./collect-stories-1e0d20c7.js";import{F as v}from"./FeaturePhoto-0bdc1976.js";import{b as U,w as N}from"./withParams-47e2ab71.js";import"./Block-a09d61d3.js";import"./PaddingReset-79b11107.js";const O=`A full-width photo inside the text well.
\`\`\`svelte
<script>
@ -53,4 +53,4 @@ Caption: Carcharodon carcharias - REUTERS
{/each}
\`\`\`
`,H="If your photo is missing `altText` a small warning will overlay the image.\n",S=""+new URL("shark-f4201fc0.jpg",import.meta.url).href;function J(c){let s,r;const n=[c[1]];let i={};for(let e=0;e<n.length;e+=1)i=y(i,n[e]);return s=new v({props:i}),{c(){m(s.$$.fragment)},m(e,p){f(s,e,p),r=!0},p(e,p){const a=p&2?E(n,[M(e[1])]):{};s.$set(a)},i(e){r||(h(s.$$.fragment,e),r=!0)},o(e){u(s.$$.fragment,e),r=!1},d(e){g(s,e)}}}function V(c){let s,r,n,i,e,p,a,k,l,d;const $=[{title:"Components/FeaturePhoto"},{component:v},c[0]];let A={};for(let t=0;t<$.length;t+=1)A=y(A,$[t]);s=new z({props:A}),n=new L({props:{$$slots:{default:[J,({args:t})=>({1:t}),({args:t})=>t?2:0]},$$scope:{ctx:c}}}),e=new I({props:{name:"Default",args:{src:S,altText:"A shark!",width:"normal",caption:"Carcharodon carcharias - REUTERS"}}});const P=[{name:"🚀 QUICKIT"},{args:{src:S,altText:"A shark!",width:"normal",caption:"Carcharodon carcharias - REUTERS"}},U(B)];let C={};for(let t=0;t<P.length;t+=1)C=y(C,P[t]);a=new I({props:C});const b=[{name:"Missing altText"},{args:{src:S,width:"normal",caption:"Carcharodon carcharias - REUTERS"}},U(H)];let D={};for(let t=0;t<b.length;t+=1)D=y(D,b[t]);return l=new I({props:D}),{c(){m(s.$$.fragment),r=_(),m(n.$$.fragment),i=_(),m(e.$$.fragment),p=_(),m(a.$$.fragment),k=_(),m(l.$$.fragment)},m(t,o){f(s,t,o),T(t,r,o),f(n,t,o),T(t,i,o),f(e,t,o),T(t,p,o),f(a,t,o),T(t,k,o),f(l,t,o),d=!0},p(t,[o]){const R=o&1?E($,[$[0],$[1],M(t[0])]):{};s.$set(R);const F={};o&6&&(F.$$scope={dirty:o,ctx:t}),n.$set(F);const K={};a.$set(K);const j={};l.$set(j)},i(t){d||(h(s.$$.fragment,t),h(n.$$.fragment,t),h(e.$$.fragment,t),h(a.$$.fragment,t),h(l.$$.fragment,t),d=!0)},o(t){u(s.$$.fragment,t),u(n.$$.fragment,t),u(e.$$.fragment,t),u(a.$$.fragment,t),u(l.$$.fragment,t),d=!1},d(t){t&&(w(r),w(i),w(p),w(k)),g(s,t),g(n,t),g(e,t),g(a,t),g(l,t)}}}function X(c){return[{...N(O),argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]},textWidth:{control:"select",options:["normal","wide","wider","widest","fluid"]}}}]}class Y extends Q{constructor(s){super(),G(this,s,X,V,q,{})}}const x=W(Y,{meta:{title:"Components/FeaturePhoto"},stories:{"tpl:default":{name:"default",template:!0,source:"<FeaturePhoto {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1},QUICKIT:{name:"🚀 QUICKIT",template:!1,source:"",hasArgs:!1},MissingAltText:{name:"Missing altText",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","quickitDocs","missingAltTextDocs","FeaturePhoto","sharkSrc","withComponentDocs","withStoryDocs"]}),rt=x.meta,it=["Default","QUICKIT","MissingAltText"],pt=x.stories.Default,lt=x.stories.QUICKIT,ct=x.stories.MissingAltText;export{pt as Default,ct as MissingAltText,lt as QUICKIT,it as __namedExportsOrder,rt as default};
//# sourceMappingURL=FeaturePhoto.stories-fe9a5e02.js.map
//# sourceMappingURL=FeaturePhoto.stories-dcf95e8f.js.map

2
docs/assets/FeaturePhoto.stories-fe9a5e02.js.map → docs/assets/FeaturePhoto.stories-dcf95e8f.js.map
View file

@ -1 +1 @@
{"version":3,"file":"FeaturePhoto.stories-fe9a5e02.js","sources":["../../src/components/FeaturePhoto/stories/docs/component.md?raw","../../src/components/FeaturePhoto/stories/docs/quickit.md?raw","../../src/components/FeaturePhoto/stories/docs/missingAltText.md?raw","../../src/components/FeaturePhoto/stories/shark.jpg","../../src/components/FeaturePhoto/FeaturePhoto.stories.svelte"],"sourcesContent":["export default \"A full-width photo inside the text well.\\n\\n```svelte\\n<script>\\n import { FeaturePhoto } from '@reuters-graphics/graphics-components';\\n import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...\\n</script>\\n\\n<FeaturePhoto\\n src=\\\"{`${assets}/images/myImage.jpg`}\\\"\\n altText=\\\"Some alt text\\\"\\n caption=\\\"A caption\\\"\\n lazy=\\\"{false}\\\"\\n width=\\\"normal\\\"\\n/>\\n```\\n\"","export default \"An example of using `FeaturePhoto` in the Graphics Kit with a Google Doc.\\n\\n```yaml\\n# Google doc block\\nType: photo\\nWidth: normal\\nSrc: images/shark.jpg\\nAltText: The king of the sea\\nCaption: Carcharodon carcharias - REUTERS\\n```\\n\\n```svelte\\n<!-- App.svelte -->\\n<script>\\n // Add FeaturePhoto to imports from graphics-components\\n import { FeaturePhoto } from '@reuters-graphics/graphics-components';\\n\\n // These should be already imported for you.\\n import content from '$locales/en/content.json';\\n import { assets } from '$app/paths';\\n</script>\\n\\n{#each content.blocks as block}\\n {#if block.Type === 'text'}\\n <!-- ... other blocks -->\\n\\n <!-- Copy/paste into your blocks loop! -->\\n {:else if block.Type === 'photo'}\\n <FeaturePhoto\\n width=\\\"{block.Width}\\\"\\n src=\\\"{`${assets}/${block.Src}`}\\\"\\n altText=\\\"{block.AltText}\\\"\\n caption=\\\"{block.Caption}\\\"\\n />\\n <!-- END copy/paste -->\\n {/if}\\n{/each}\\n```\\n\"","export default \"If your photo is missing `altText` a small warning will overlay the image.\\n\"","export default \"__VITE_ASSET__d597932c__\"","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import componentDocs from './stories/docs/component.md?raw';\n // @ts-ignore\n import quickitDocs from './stories/docs/quickit.md?raw';\n // @ts-ignore\n import missingAltTextDocs from './stories/docs/missingAltText.md?raw';\n\n import FeaturePhoto from './FeaturePhoto.svelte';\n\n // @ts-ignore\n import sharkSrc from './stories/shark.jpg';\n\n import {\n withComponentDocs,\n withStoryDocs,\n } from '$lib/docs/utils/withParams.js';\n\n const metaProps = {\n ...withComponentDocs(componentDocs),\n argTypes: {\n width: {\n control: 'select',\n options: ['normal', 'wide', 'wider', 'widest', 'fluid'],\n },\n textWidth: {\n control: 'select',\n options: ['normal', 'wide', 'wider', 'widest', 'fluid'],\n },\n },\n };\n</script>\n\n<Meta\n title=\"Components/FeaturePhoto\"\n component=\"{FeaturePhoto}\"\n {...metaProps}\n/>\n\n<Template let:args>\n <FeaturePhoto {...args} />\n</Template>\n\n<Story\n name=\"Default\"\n args=\"{{\n src: sharkSrc,\n altText: 'A shark!',\n width: 'normal',\n caption: 'Carcharodon carcharias - REUTERS',\n }}\"\n/>\n\n<Story\n name=\"🚀 QUICKIT\"\n args=\"{{\n src: sharkSrc,\n altText: 'A shark!',\n width: 'normal',\n caption: 'Carcharodon carcharias - REUTERS',\n }}\"\n {...withStoryDocs(quickitDocs)}\n/>\n\n<Story\n name=\"Missing altText\"\n args=\"{{\n src: sharkSrc,\n width: 'normal',\n caption: 'Carcharodon carcharias - REUTERS',\n }}\"\n {...withStoryDocs(missingAltTextDocs)}\n/>\n"],"names":["componentDocs","quickitDocs","missingAltTextDocs","sharkSrc","ctx","FeaturePhoto","withStoryDocs","withComponentDocs"],"mappings":"8YAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,ECAAC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,ECAAC,EAAA,+ECAAC,EAAA,GAAA,IAAA,IAAA,qBAAA,YAAA,GAAA,EAAA,oCC0CKC,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,2LALVC,CAAY,EACpBD,EAAS,CAAA,2MAUX,IAAKD,EACL,QAAS,WACT,MAAO,SACP,QAAS,2EAOT,IAAKA,EACL,QAAS,WACT,MAAO,SACP,QAAS,qCAEPG,EAAcL,CAAW,gHAM3B,IAAKE,EACL,MAAO,SACP,QAAS,qCAEPG,EAAcJ,CAAkB,qUAnChCE,EAAS,CAAA,CAAA,maAlBE,CACV,GAAAG,EAAkBP,CAAa,EAClC,SAAQ,CACN,MAAK,CACH,QAAS,SACT,QAAO,CAAG,SAAU,OAAQ,QAAS,SAAU,OAAO,GAExD,UAAS,CACP,QAAS,SACT,QAAO,CAAG,SAAU,OAAQ,QAAS,SAAU,OAAO"}
{"version":3,"file":"FeaturePhoto.stories-dcf95e8f.js","sources":["../../src/components/FeaturePhoto/stories/docs/component.md?raw","../../src/components/FeaturePhoto/stories/docs/quickit.md?raw","../../src/components/FeaturePhoto/stories/docs/missingAltText.md?raw","../../src/components/FeaturePhoto/stories/shark.jpg","../../src/components/FeaturePhoto/FeaturePhoto.stories.svelte"],"sourcesContent":["export default \"A full-width photo inside the text well.\\n\\n```svelte\\n<script>\\n import { FeaturePhoto } from '@reuters-graphics/graphics-components';\\n import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...\\n</script>\\n\\n<FeaturePhoto\\n src=\\\"{`${assets}/images/myImage.jpg`}\\\"\\n altText=\\\"Some alt text\\\"\\n caption=\\\"A caption\\\"\\n lazy=\\\"{false}\\\"\\n width=\\\"normal\\\"\\n/>\\n```\\n\"","export default \"An example of using `FeaturePhoto` in the Graphics Kit with a Google Doc.\\n\\n```yaml\\n# Google doc block\\nType: photo\\nWidth: normal\\nSrc: images/shark.jpg\\nAltText: The king of the sea\\nCaption: Carcharodon carcharias - REUTERS\\n```\\n\\n```svelte\\n<!-- App.svelte -->\\n<script>\\n // Add FeaturePhoto to imports from graphics-components\\n import { FeaturePhoto } from '@reuters-graphics/graphics-components';\\n\\n // These should be already imported for you.\\n import content from '$locales/en/content.json';\\n import { assets } from '$app/paths';\\n</script>\\n\\n{#each content.blocks as block}\\n {#if block.Type === 'text'}\\n <!-- ... other blocks -->\\n\\n <!-- Copy/paste into your blocks loop! -->\\n {:else if block.Type === 'photo'}\\n <FeaturePhoto\\n width=\\\"{block.Width}\\\"\\n src=\\\"{`${assets}/${block.Src}`}\\\"\\n altText=\\\"{block.AltText}\\\"\\n caption=\\\"{block.Caption}\\\"\\n />\\n <!-- END copy/paste -->\\n {/if}\\n{/each}\\n```\\n\"","export default \"If your photo is missing `altText` a small warning will overlay the image.\\n\"","export default \"__VITE_ASSET__d597932c__\"","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import componentDocs from './stories/docs/component.md?raw';\n // @ts-ignore\n import quickitDocs from './stories/docs/quickit.md?raw';\n // @ts-ignore\n import missingAltTextDocs from './stories/docs/missingAltText.md?raw';\n\n import FeaturePhoto from './FeaturePhoto.svelte';\n\n // @ts-ignore\n import sharkSrc from './stories/shark.jpg';\n\n import {\n withComponentDocs,\n withStoryDocs,\n } from '$lib/docs/utils/withParams.js';\n\n const metaProps = {\n ...withComponentDocs(componentDocs),\n argTypes: {\n width: {\n control: 'select',\n options: ['normal', 'wide', 'wider', 'widest', 'fluid'],\n },\n textWidth: {\n control: 'select',\n options: ['normal', 'wide', 'wider', 'widest', 'fluid'],\n },\n },\n };\n</script>\n\n<Meta\n title=\"Components/FeaturePhoto\"\n component=\"{FeaturePhoto}\"\n {...metaProps}\n/>\n\n<Template let:args>\n <FeaturePhoto {...args} />\n</Template>\n\n<Story\n name=\"Default\"\n args=\"{{\n src: sharkSrc,\n altText: 'A shark!',\n width: 'normal',\n caption: 'Carcharodon carcharias - REUTERS',\n }}\"\n/>\n\n<Story\n name=\"🚀 QUICKIT\"\n args=\"{{\n src: sharkSrc,\n altText: 'A shark!',\n width: 'normal',\n caption: 'Carcharodon carcharias - REUTERS',\n }}\"\n {...withStoryDocs(quickitDocs)}\n/>\n\n<Story\n name=\"Missing altText\"\n args=\"{{\n src: sharkSrc,\n width: 'normal',\n caption: 'Carcharodon carcharias - REUTERS',\n }}\"\n {...withStoryDocs(missingAltTextDocs)}\n/>\n"],"names":["componentDocs","quickitDocs","missingAltTextDocs","sharkSrc","ctx","FeaturePhoto","withStoryDocs","withComponentDocs"],"mappings":"8YAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,ECAAC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,ECAAC,EAAA,+ECAAC,EAAA,GAAA,IAAA,IAAA,qBAAA,YAAA,GAAA,EAAA,oCC0CKC,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,2LALVC,CAAY,EACpBD,EAAS,CAAA,2MAUX,IAAKD,EACL,QAAS,WACT,MAAO,SACP,QAAS,2EAOT,IAAKA,EACL,QAAS,WACT,MAAO,SACP,QAAS,qCAEPG,EAAcL,CAAW,gHAM3B,IAAKE,EACL,MAAO,SACP,QAAS,qCAEPG,EAAcJ,CAAkB,qUAnChCE,EAAS,CAAA,CAAA,maAlBE,CACV,GAAAG,EAAkBP,CAAa,EAClC,SAAQ,CACN,MAAK,CACH,QAAS,SACT,QAAO,CAAG,SAAU,OAAQ,QAAS,SAAU,OAAO,GAExD,UAAS,CACP,QAAS,SACT,QAAO,CAAG,SAAU,OAAQ,QAAS,SAAU,OAAO"}

4
docs/assets/GlobalScrollAreaStyles-UY5SB7EJ-c059db10.js → docs/assets/GlobalScrollAreaStyles-UY5SB7EJ-cff6d7e9.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/GlobalScrollAreaStyles-UY5SB7EJ-c059db10.js.map → docs/assets/GlobalScrollAreaStyles-UY5SB7EJ-cff6d7e9.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/GraphicBlock-c40f9bd5.js → docs/assets/GraphicBlock-caaf4041.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/GraphicBlock-c40f9bd5.js.map → docs/assets/GraphicBlock-caaf4041.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/GraphicBlock.stories-f4c49eb1.js → docs/assets/GraphicBlock.stories-7835e05a.js
View file

@ -1,4 +1,4 @@
import{S as F,i as ee,s as te,l as b,y as k,b as A,O as ne,d as u,e as V,P as oe,n as C,f as y,C as $,g as m,m as c,t as d,h as v,j as h}from"./index-99a30af8.js";import{g as se,a as ae}from"./spread-8a54911c.js";import{p as re,M as ge,T as me,S as _}from"./collect-stories-1e0d20c7.js";import{G}from"./GraphicBlock-c40f9bd5.js";import{b as P,w as ce}from"./withParams-47e2ab71.js";import"./Block-4e35b26d.js";import"./PaddingReset-79b11107.js";import"./Markdown-2a6fc77f.js";const de=`The \`GraphicBlock\` component is a special derivative of the [\`Block\`](./?path=/docs/layout-block) component that also handles text elements around a graphic.
import{S as F,i as ee,s as te,l as b,y as k,b as A,O as ne,d as u,e as V,P as oe,n as C,f as y,C as $,g as m,m as c,t as d,h as v,j as h}from"./index-99a30af8.js";import{g as se,a as ae}from"./spread-8a54911c.js";import{p as re,M as ge,T as me,S as _}from"./collect-stories-1e0d20c7.js";import{G}from"./GraphicBlock-caaf4041.js";import{b as P,w as ce}from"./withParams-47e2ab71.js";import"./Block-a09d61d3.js";import"./PaddingReset-79b11107.js";import"./Markdown-2a6fc77f.js";const de=`The \`GraphicBlock\` component is a special derivative of the [\`Block\`](./?path=/docs/layout-block) component that also handles text elements around a graphic.
Many other components use this one to wrap graphics with styled text. When you use it, you'll also wrap your chart elements or component with it like this:
@ -181,4 +181,4 @@ Source: [Google research](https://google.com)`}}});const K=[{name:"🚀 QUICKIT"
>
<AiMap />
</GraphicBlock>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","quickitDocs","customTextDocs","ai2svelteDocs","ariaDocs","GraphicBlock","AiMap","withComponentDocs","withStoryDocs","PlaceholderImg"]}),Ue=T.meta,Le=["Default","QUICKIT","CustomText","Ai2svelte","ARIA"],ze=T.stories.Default,je=T.stories.QUICKIT,Ve=T.stories.CustomText,Xe=T.stories.Ai2svelte,Je=T.stories.ARIA;export{Je as ARIA,Xe as Ai2svelte,Ve as CustomText,ze as Default,je as QUICKIT,Le as __namedExportsOrder,Ue as default};
//# sourceMappingURL=GraphicBlock.stories-f4c49eb1.js.map
//# sourceMappingURL=GraphicBlock.stories-7835e05a.js.map

2
docs/assets/GraphicBlock.stories-f4c49eb1.js.map → docs/assets/GraphicBlock.stories-7835e05a.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/Headline-01b35f1f.js → docs/assets/Headline-3eded5d7.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/Headline-01b35f1f.js.map → docs/assets/Headline-3eded5d7.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/Headline.stories-e950d41c.js → docs/assets/Headline.stories-9da08900.js
View file

@ -1,4 +1,4 @@
import{S as at,i as nt,s as pt,l as T,y as b,b as p,O as vt,d as c,e as U,P as ct,n as P,f as m,C as k,g as u,m as y,t as w,h as A,j as $,F as mt}from"./index-99a30af8.js";import{g as gt,a as ot}from"./spread-8a54911c.js";import{p as ft,M as ht,T as xt,S as N}from"./collect-stories-1e0d20c7.js";import{H as S}from"./Headline-01b35f1f.js";import{b as H,w as ut}from"./withParams-47e2ab71.js";import"./Block-4e35b26d.js";import"./Byline-df82a671.js";import"./each-e59479a4.js";import"./_commonjsHelpers-de833af9.js";import"./journalize-07958dc6.js";import"./Markdown-2a6fc77f.js";const yt=`Reuters Graphics headline
import{S as at,i as nt,s as pt,l as T,y as b,b as p,O as vt,d as c,e as U,P as ct,n as P,f as m,C as k,g as u,m as y,t as w,h as A,j as $,F as mt}from"./index-99a30af8.js";import{g as gt,a as ot}from"./spread-8a54911c.js";import{p as ft,M as ht,T as xt,S as N}from"./collect-stories-1e0d20c7.js";import{H as S}from"./Headline-3eded5d7.js";import{b as H,w as ut}from"./withParams-47e2ab71.js";import"./Block-a09d61d3.js";import"./Byline-1358d74f.js";import"./each-e59479a4.js";import"./_commonjsHelpers-de833af9.js";import"./journalize-07958dc6.js";import"./Markdown-2a6fc77f.js";const yt=`Reuters Graphics headline
\`\`\`svelte
<script>
@ -172,4 +172,4 @@ background-color: #fde68a;
<Map />
</div>
</Headline>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","withBylineDocs","withDekDocs","customHedDocs","withCrownImgDocs","withCrownGraphicDocs","crownImgSrc","Map","Headline","withComponentDocs","withStoryDocs"]}),le=D.meta,ae=["Default","WithDek","WithByline","WithCustomHed","WithCrownImage","WithCrownGraphic"],ne=D.stories.Default,pe=D.stories.WithDek,ge=D.stories.WithByline,oe=D.stories.WithCustomHed,re=D.stories.WithCrownImage,de=D.stories.WithCrownGraphic;export{ne as Default,ge as WithByline,de as WithCrownGraphic,re as WithCrownImage,oe as WithCustomHed,pe as WithDek,ae as __namedExportsOrder,le as default};
//# sourceMappingURL=Headline.stories-e950d41c.js.map
//# sourceMappingURL=Headline.stories-9da08900.js.map

2
docs/assets/Headline.stories-e950d41c.js.map → docs/assets/Headline.stories-9da08900.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/Hero.stories-e61a244a.js → docs/assets/Hero.stories-dede838a.js
View file

@ -1,4 +1,4 @@
import{S as Q,i as Y,s as Z,l as H,y as T,b as h,q as He,c as K,d as v,e as I,t as g,v as M,h as f,w as z,f as $,x as it,g as x,m as y,j as b,k as q,u as U,o as F,p as X,r as ce,O as Fe,P as Xe,n as L,C,I as J}from"./index-99a30af8.js";import{g as Je,a as Qe}from"./spread-8a54911c.js";import{p as st,M as at,T as nt,S as G}from"./collect-stories-1e0d20c7.js";import{B as R}from"./Block-4e35b26d.js";import{S as N}from"./SiteHeader-5eb355f9.js";import{H as ee}from"./Headline-01b35f1f.js";import{G as ge}from"./GraphicBlock-c40f9bd5.js";import{B as lt}from"./Byline-df82a671.js";import{P as ot}from"./PaddingReset-79b11107.js";import{F as rt}from"./FeaturePhoto-4dfc9aa8.js";import{V as Ye}from"./Video-924f0c66.js";import{b as E,w as pt}from"./withParams-47e2ab71.js";import"./ReutersLogo-b424df32.js";import"./each-e59479a4.js";import"./index-2224dbf5.js";import"./time-8562ae1b.js";import"./advancedFormat-ebff0a45.js";import"./_commonjsHelpers-de833af9.js";import"./dayjs.min-1b995edc.js";import"./Markdown-2a6fc77f.js";import"./journalize-07958dc6.js";import"./fa-89776db2.js";import"./index.es-ff8a88a9.js";const dt=`Reuters Graphics headline with a Hero media
import{S as Q,i as Y,s as Z,l as H,y as T,b as h,q as He,c as K,d as v,e as I,t as g,v as M,h as f,w as z,f as $,x as it,g as x,m as y,j as b,k as q,u as U,o as F,p as X,r as ce,O as Fe,P as Xe,n as L,C,I as J}from"./index-99a30af8.js";import{g as Je,a as Qe}from"./spread-8a54911c.js";import{p as st,M as at,T as nt,S as G}from"./collect-stories-1e0d20c7.js";import{B as R}from"./Block-a09d61d3.js";import{S as N}from"./SiteHeader-5eb355f9.js";import{H as ee}from"./Headline-3eded5d7.js";import{G as ge}from"./GraphicBlock-caaf4041.js";import{B as lt}from"./Byline-1358d74f.js";import{P as ot}from"./PaddingReset-79b11107.js";import{F as rt}from"./FeaturePhoto-0bdc1976.js";import{V as Ye}from"./Video-4f78e265.js";import{b as E,w as pt}from"./withParams-47e2ab71.js";import"./ReutersLogo-b424df32.js";import"./each-e59479a4.js";import"./index-2224dbf5.js";import"./time-8562ae1b.js";import"./advancedFormat-ebff0a45.js";import"./_commonjsHelpers-de833af9.js";import"./dayjs.min-1b995edc.js";import"./Markdown-2a6fc77f.js";import"./journalize-07958dc6.js";import"./fa-89776db2.js";import"./index.es-ff8a88a9.js";const dt=`Reuters Graphics headline with a Hero media
\`\`\`svelte
<script>
@ -544,4 +544,4 @@ color: #ffffff;
text-shadow: 1px 1px 8px #ff7c88;
filter: drop-shadow(0px 0px 12px #ff7c88);
}</style>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","backgroundGraphicDocs","inlineGraphicDocs","inlinePhotoDocs","transparentHeaderDocs","videoDocs","customHedDocs","polarImgSrc","eurovisImgSrc","Block","SiteHeader","HeroHeadline","GraphicBlock","FeaturePhoto","Video","CrashMap","QuakeMap","withComponentDocs","withStoryDocs"]}),Ui=B.meta,Fi=["WithBackdropPhoto","WithTransparentHeader","WithBackdropGraphic","WithBackdropVideo","WithInlinePhoto","WithInlineGraphic","WithInlineVideo","WithCustomHed"],Xi=B.stories.WithBackdropPhoto,Ji=B.stories.WithTransparentHeader,Qi=B.stories.WithBackdropGraphic,Yi=B.stories.WithBackdropVideo,Zi=B.stories.WithInlinePhoto,es=B.stories.WithInlineGraphic,ts=B.stories.WithInlineVideo,is=B.stories.WithCustomHed;export{Qi as WithBackdropGraphic,Xi as WithBackdropPhoto,Yi as WithBackdropVideo,is as WithCustomHed,es as WithInlineGraphic,Zi as WithInlinePhoto,ts as WithInlineVideo,Ji as WithTransparentHeader,Fi as __namedExportsOrder,Ui as default};
//# sourceMappingURL=Hero.stories-e61a244a.js.map
//# sourceMappingURL=Hero.stories-dede838a.js.map

2
docs/assets/Hero.stories-e61a244a.js.map → docs/assets/Hero.stories-dede838a.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/ImportSnippet-28bea6da.js → docs/assets/ImportSnippet-ae438d08.js
View file

@ -1,3 +1,3 @@
import{R as e,r}from"./index-c599f7c3.js";import{S as n,p as u}from"./prism-af61c5b2.js";import{s as g}from"./scss-efc2351e.js";const d="_title_daft4_1",f="_table_daft4_20",_="_importsnippet_daft4_125",o={title:d,table:f,importsnippet:_};n.registerLanguage("scss",g);const p=t=>t.replace(/\/_/,"/").replace(/\.scss$/,""),E=t=>{const[s,c]=r.useState(!1);let a;r.useEffect(()=>{a&&clearTimeout(a),a=setTimeout(()=>{c(!1)},1500)},[s]);const i=async({partial:l})=>{const m=`@import "@reuters-graphics/graphics-components/scss/colours/${p(l)}";`;await navigator.clipboard.writeText(m),c(!0)};return e.createElement("button",{className:"copy-btn",onClick:()=>i(t)},e.createElement("span",{className:"material-symbols-outlined"},"content_copy"),s&&e.createElement("span",{className:"copy-tag"},"Copied"))},x=({included:t=!1,partial:s="thematic/_tr.scss"})=>t?e.createElement("div",{className:o.importsnippet},e.createElement("p",null,"Included")):e.createElement("div",{className:o.importsnippet},e.createElement(n,{language:"scss",style:u},`// global.scss
import{R as e,r}from"./index-b33a5d42.js";import{S as n,p as u}from"./prism-47226874.js";import{s as g}from"./scss-efc2351e.js";const d="_title_daft4_1",f="_table_daft4_20",_="_importsnippet_daft4_125",o={title:d,table:f,importsnippet:_};n.registerLanguage("scss",g);const p=t=>t.replace(/\/_/,"/").replace(/\.scss$/,""),E=t=>{const[s,c]=r.useState(!1);let a;r.useEffect(()=>{a&&clearTimeout(a),a=setTimeout(()=>{c(!1)},1500)},[s]);const i=async({partial:l})=>{const m=`@import "@reuters-graphics/graphics-components/scss/colours/${p(l)}";`;await navigator.clipboard.writeText(m),c(!0)};return e.createElement("button",{className:"copy-btn",onClick:()=>i(t)},e.createElement("span",{className:"material-symbols-outlined"},"content_copy"),s&&e.createElement("span",{className:"copy-tag"},"Copied"))},x=({included:t=!1,partial:s="thematic/_tr.scss"})=>t?e.createElement("div",{className:o.importsnippet},e.createElement("p",null,"Included")):e.createElement("div",{className:o.importsnippet},e.createElement(n,{language:"scss",style:u},`// global.scss
@import "@reuters-graphics/graphics-components/scss/colours/${p(s)}";`),e.createElement(E,{partial:s}));export{x as I,o as c};
//# sourceMappingURL=ImportSnippet-28bea6da.js.map
//# sourceMappingURL=ImportSnippet-ae438d08.js.map

2
docs/assets/ImportSnippet-28bea6da.js.map → docs/assets/ImportSnippet-ae438d08.js.map
View file

@ -1 +1 @@
{"version":3,"file":"ImportSnippet-28bea6da.js","sources":["../../src/docs/docs-components/CopyColourTable/ImportSnippet.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';\n// @ts-ignore\nimport classes from './styles.module.scss';\nimport prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';\nimport scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';\n\nSyntaxHighlighter.registerLanguage('scss', scss);\n\nconst formatPartial = (partial) => {\n return partial.replace(/\\/_/, '/').replace(/\\.scss$/, '');\n};\n\nconst Copyable = (props) => {\n const [copied, setCopied] = useState(false);\n\n let timeout;\n\n useEffect(() => {\n if(timeout) clearTimeout(timeout);\n timeout = setTimeout(() => { setCopied(false); }, 1500);\n }, [copied]);\n\n const handleClick = async({ partial }) => {\n const copyText = `@import \"@reuters-graphics/graphics-components/scss/colours/${formatPartial(partial)}\";`\n await navigator.clipboard.writeText(copyText);\n setCopied(true);\n }\n\n return (\n <button className=\"copy-btn\" onClick={() => handleClick(props)}>\n <span className=\"material-symbols-outlined\">content_copy</span>\n {copied && <span className=\"copy-tag\">Copied</span>}\n </button>\n );\n}\n\nconst ImportSnippet = ({ included = false, partial = 'thematic/_tr.scss' }) => {\n return included ? (\n <div className={classes.importsnippet}>\n <p>Included</p>\n </div>\n ) : (\n <div className={classes.importsnippet}>\n <SyntaxHighlighter language=\"scss\" style={prism}>\n {`// global.scss \\n@import \"@reuters-graphics/graphics-components/scss/colours/${formatPartial(partial)}\";`}\n </SyntaxHighlighter>\n <Copyable partial={partial} />\n </div>\n )\n};\n\nexport default ImportSnippet;"],"names":["SyntaxHighlighter","scss","formatPartial","partial","Copyable","props","copied","setCopied","useState","timeout","useEffect","handleClick","copyText","React","ImportSnippet","included","classes","prism"],"mappings":"8OAQAA,EAAkB,iBAAiB,OAAQC,CAAI,EAE/C,MAAMC,EAAiBC,GACdA,EAAQ,QAAQ,MAAO,GAAG,EAAE,QAAQ,UAAW,EAAE,EAGpDC,EAAYC,GAAU,CAC1B,KAAM,CAACC,EAAQC,CAAS,EAAIC,WAAS,EAAK,EAEtC,IAAAC,EAEJC,EAAAA,UAAU,IAAM,CACXD,GAAS,aAAaA,CAAO,EAChCA,EAAU,WAAW,IAAM,CAAEF,EAAU,EAAK,GAAM,IAAI,CAAA,EACrD,CAACD,CAAM,CAAC,EAEX,MAAMK,EAAc,MAAM,CAAE,QAAAR,KAAc,CACxC,MAAMS,EAAW,+DAA+DV,EAAcC,CAAO,CAAC,KAChG,MAAA,UAAU,UAAU,UAAUS,CAAQ,EAC5CL,EAAU,EAAI,CAAA,EAId,OAAAM,EAAA,cAAC,UAAO,UAAU,WAAW,QAAS,IAAMF,EAAYN,CAAK,GAC3DQ,EAAA,cAAC,QAAK,UAAU,2BAAA,EAA4B,cAAY,EACvDP,mBAAW,OAAK,CAAA,UAAU,UAAW,EAAA,QAAM,CAC9C,CAEJ,EAEMQ,EAAgB,CAAC,CAAE,SAAAC,EAAW,GAAO,QAAAZ,EAAU,uBAC5CY,kBACJ,MAAI,CAAA,UAAWC,EAAQ,aACtB,EAAAH,EAAA,cAAC,SAAE,UAAQ,CACb,EAECA,EAAA,cAAA,MAAA,CAAI,UAAWG,EAAQ,aAAA,kBACrBhB,EAAkB,CAAA,SAAS,OAAO,MAAOiB,CACvC,EAAA;AAAA,8DAAgFf,EAAcC,CAAO,CAAC,IACzG,EACCU,EAAA,cAAAT,EAAA,CAAS,QAAAD,EAAkB,CAC9B"}
{"version":3,"file":"ImportSnippet-ae438d08.js","sources":["../../src/docs/docs-components/CopyColourTable/ImportSnippet.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';\n// @ts-ignore\nimport classes from './styles.module.scss';\nimport prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';\nimport scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';\n\nSyntaxHighlighter.registerLanguage('scss', scss);\n\nconst formatPartial = (partial) => {\n return partial.replace(/\\/_/, '/').replace(/\\.scss$/, '');\n};\n\nconst Copyable = (props) => {\n const [copied, setCopied] = useState(false);\n\n let timeout;\n\n useEffect(() => {\n if(timeout) clearTimeout(timeout);\n timeout = setTimeout(() => { setCopied(false); }, 1500);\n }, [copied]);\n\n const handleClick = async({ partial }) => {\n const copyText = `@import \"@reuters-graphics/graphics-components/scss/colours/${formatPartial(partial)}\";`\n await navigator.clipboard.writeText(copyText);\n setCopied(true);\n }\n\n return (\n <button className=\"copy-btn\" onClick={() => handleClick(props)}>\n <span className=\"material-symbols-outlined\">content_copy</span>\n {copied && <span className=\"copy-tag\">Copied</span>}\n </button>\n );\n}\n\nconst ImportSnippet = ({ included = false, partial = 'thematic/_tr.scss' }) => {\n return included ? (\n <div className={classes.importsnippet}>\n <p>Included</p>\n </div>\n ) : (\n <div className={classes.importsnippet}>\n <SyntaxHighlighter language=\"scss\" style={prism}>\n {`// global.scss \\n@import \"@reuters-graphics/graphics-components/scss/colours/${formatPartial(partial)}\";`}\n </SyntaxHighlighter>\n <Copyable partial={partial} />\n </div>\n )\n};\n\nexport default ImportSnippet;"],"names":["SyntaxHighlighter","scss","formatPartial","partial","Copyable","props","copied","setCopied","useState","timeout","useEffect","handleClick","copyText","React","ImportSnippet","included","classes","prism"],"mappings":"8OAQAA,EAAkB,iBAAiB,OAAQC,CAAI,EAE/C,MAAMC,EAAiBC,GACdA,EAAQ,QAAQ,MAAO,GAAG,EAAE,QAAQ,UAAW,EAAE,EAGpDC,EAAYC,GAAU,CAC1B,KAAM,CAACC,EAAQC,CAAS,EAAIC,WAAS,EAAK,EAEtC,IAAAC,EAEJC,EAAAA,UAAU,IAAM,CACXD,GAAS,aAAaA,CAAO,EAChCA,EAAU,WAAW,IAAM,CAAEF,EAAU,EAAK,GAAM,IAAI,CAAA,EACrD,CAACD,CAAM,CAAC,EAEX,MAAMK,EAAc,MAAM,CAAE,QAAAR,KAAc,CACxC,MAAMS,EAAW,+DAA+DV,EAAcC,CAAO,CAAC,KAChG,MAAA,UAAU,UAAU,UAAUS,CAAQ,EAC5CL,EAAU,EAAI,CAAA,EAId,OAAAM,EAAA,cAAC,UAAO,UAAU,WAAW,QAAS,IAAMF,EAAYN,CAAK,GAC3DQ,EAAA,cAAC,QAAK,UAAU,2BAAA,EAA4B,cAAY,EACvDP,mBAAW,OAAK,CAAA,UAAU,UAAW,EAAA,QAAM,CAC9C,CAEJ,EAEMQ,EAAgB,CAAC,CAAE,SAAAC,EAAW,GAAO,QAAAZ,EAAU,uBAC5CY,kBACJ,MAAI,CAAA,UAAWC,EAAQ,aACtB,EAAAH,EAAA,cAAC,SAAE,UAAQ,CACb,EAECA,EAAA,cAAA,MAAA,CAAI,UAAWG,EAAQ,aAAA,kBACrBhB,EAAkB,CAAA,SAAS,OAAO,MAAOiB,CACvC,EAAA;AAAA,8DAAgFf,EAAcC,CAAO,CAAC,IACzG,EACCU,EAAA,cAAAT,EAAA,CAAS,QAAAD,EAAkB,CAC9B"}

4
docs/assets/InfoBox.stories-99cb2463.js → docs/assets/InfoBox.stories-5f38119f.js
View file

@ -1,4 +1,4 @@
import{S as K,i as Q,s as X,l as C,g as b,b as I,d as _,m as w,t as c,h as m,f as y,j as k,x as oe,y as B,r as ne,v as R,w as V,k as M,u as L,o as W,p as E,C as Y,n as Z}from"./index-99a30af8.js";import{g as ee,a as te}from"./spread-8a54911c.js";import{p as se,M as re,T as ie,S as z}from"./collect-stories-1e0d20c7.js";import{B as ae}from"./Block-4e35b26d.js";import{M as U}from"./Markdown-2a6fc77f.js";import{B as P}from"./BodyText-beab66e3.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.
import{S as K,i as Q,s as X,l as C,g as b,b as I,d as _,m as w,t as c,h as m,f as y,j as k,x as oe,y as B,r as ne,v as R,w as V,k as M,u as L,o as W,p as E,C as Y,n as Z}from"./index-99a30af8.js";import{g as ee,a as te}from"./spread-8a54911c.js";import{p as se,M as re,T as ie,S as z}from"./collect-stories-1e0d20c7.js";import{B as ae}from"./Block-a09d61d3.js";import{M as U}from"./Markdown-2a6fc77f.js";import{B as P}from"./BodyText-b6660f02.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.
@ -37,4 +37,4 @@ Use the slots to customize the content as needed, e.g. adding icons and thumbnai
- **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"]}),Ve=F.meta,Me=["Default","List"],Le=F.stories.Default,We=F.stories.List;export{Le as Default,We as List,Me as __namedExportsOrder,Ve as default};
//# sourceMappingURL=InfoBox.stories-99cb2463.js.map
//# sourceMappingURL=InfoBox.stories-5f38119f.js.map

2
docs/assets/InfoBox.stories-99cb2463.js.map → docs/assets/InfoBox.stories-5f38119f.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/InlineAd.stories-30c4976b.js → docs/assets/InlineAd.stories-0f56ab54.js
View file

@ -1,4 +1,4 @@
import{S as I,i as b,s as w,g as c,m as p,t as f,h as u,j as $,l as _,y as A,b as v,d as S,e as g,n as C,f as y,C as T}from"./index-99a30af8.js";import{g as x,a as N}from"./spread-8a54911c.js";import{p as R,M as O,T as j,S as B}from"./collect-stories-1e0d20c7.js";import{R as E,A as P}from"./ResponsiveAd-034dbb7c.js";import{B as V}from"./Block-4e35b26d.js";import{w as q}from"./withParams-47e2ab71.js";import"./throttle-dfed7c30.js";import"./isObject-32699ff3.js";import"./now-bd49f550.js";import"./isSymbol-50749e90.js";const L=`Add programmatic ads inline on your page.
import{S as I,i as b,s as w,g as c,m as p,t as f,h as u,j as $,l as _,y as A,b as v,d as S,e as g,n as C,f as y,C as T}from"./index-99a30af8.js";import{g as x,a as N}from"./spread-8a54911c.js";import{p as R,M as O,T as j,S as B}from"./collect-stories-1e0d20c7.js";import{R as E,A as P}from"./ResponsiveAd-034dbb7c.js";import{B as V}from"./Block-a09d61d3.js";import{w as q}from"./withParams-47e2ab71.js";import"./throttle-dfed7c30.js";import"./isObject-32699ff3.js";import"./now-bd49f550.js";import"./isSymbol-50749e90.js";const L=`Add programmatic ads inline on your page.
> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
@ -31,4 +31,4 @@ import{S as I,i as b,s as w,g as c,m as p,t as f,h as u,j as $,l as _,y as A,b a
<InlineAd />
<InlineAd />
</div>`,hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","adDocs","AdScripts","InlineAd","withComponentDocs"]}),ie=D.meta,oe=["Default"],le=D.stories.Default;export{le as Default,oe as __namedExportsOrder,ie as default};
//# sourceMappingURL=InlineAd.stories-30c4976b.js.map
//# sourceMappingURL=InlineAd.stories-0f56ab54.js.map

2
docs/assets/InlineAd.stories-30c4976b.js.map → docs/assets/InlineAd.stories-0f56ab54.js.map
View file

@ -1 +1 @@
{"version":3,"file":"InlineAd.stories-30c4976b.js","sources":["../../src/components/AdSlot/stories/docs/inline.md?raw","../../src/components/AdSlot/InlineAd.svelte","../../src/components/AdSlot/InlineAd.stories.svelte"],"sourcesContent":["export default \"Add programmatic ads inline on your page.\\n\\n> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.\\n\\n```svelte\\n<script>\\n import { AdSlot, AdScripts } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<!-- ALWAYS check if in an embed context! -->\\n{#if !embedded}\\n <!-- Include AdScripts only ONCE per page -->\\n <AdScripts />\\n{/if}\\n\\n<!-- ... -->\\n\\n{#if !embedded}\\n <AdSlot />\\n{/if}\\n\\n<!-- ... -->\\n\\n{#if !embedded}\\n <!-- Can add multiple ads to your page -->\\n <AdSlot />\\n{/if}\\n```\\n\"","<script lang=\"ts\">\n import Block from '../Block/Block.svelte';\n import { DesktopPlacementName } from './@types/ads';\n import ResponsiveAd from './ResponsiveAd.svelte';\n\n /** Add an ID to target with SCSS. */\n export let id: string = '';\n\n /** Add a class to target with SCSS. */\n let cls: string = 'my-12';\n export { cls as class };\n\n const desktopPlacementName: DesktopPlacementName = 'reuters_desktop_native_1';\n</script>\n\n<!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) -->\n<Block id=\"{id}\" class=\"freestar-adslot {cls}\">\n <div class=\"ad-block\">\n <div class=\"ad-label\">Advertisement · Scroll to continue</div>\n <div class=\"ad-container\">\n <div class=\"ad-slot__inner\">\n <div>\n <ResponsiveAd desktopPlacementName=\"{desktopPlacementName}\" />\n </div>\n </div>\n </div>\n </div>\n</Block>\n\n<style lang=\"scss\">\n div.ad-block {\n border-bottom: 1px solid var(--theme-colour-brand-rules);\n border-top: 1px solid var(--theme-colour-brand-rules);\n div.ad-label {\n font-family: Knowledge, 'Source Sans Pro', Arial, Helvetica, sans-serif;\n font-size: 14px;\n margin: 6px 0;\n line-height: 1.333;\n color: var(--theme-colour-text-secondary);\n width: 100%;\n text-align: center;\n }\n div.ad-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n min-height: 415px;\n @media (max-width: 767.9px) {\n min-height: 320px;\n }\n div.ad-slot__inner {\n margin: auto 0;\n width: 100%;\n max-width: 100%;\n flex: unset;\n & > div {\n display: block;\n :global(div[data-freestar-ad]) {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n }\n }\n }\n }\n</style>\n","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import adDocs from './stories/docs/inline.md?raw';\n\n import AdScripts from './AdScripts.svelte';\n import InlineAd from './InlineAd.svelte';\n\n import { withComponentDocs } from '$docs/utils/withParams.js';\n\n const meta = {\n title: 'Components/InlineAd',\n component: InlineAd,\n ...withComponentDocs(adDocs),\n };\n</script>\n\n<Meta title=\"Components/InlineAd\" {...meta} />\n\n<Template let:args>\n <div>\n <AdScripts />\n <InlineAd />\n <InlineAd />\n </div>\n</Template>\n\n<Story name=\"Default\" />\n"],"names":["adDocs","desktopPlacementName","insert","target","div4","anchor","append","div0","div3","div2","div1","ctx","id","$$props","cls","div","InlineAd","withComponentDocs"],"mappings":"0gBAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;2DCsBgC,qBAAAC,CAAoB,CAAA,CAAA,oVALjEC,EASKC,EAAAC,EAAAC,CAAA,EARHC,EAA6DF,EAAAG,CAAA,SAC7DD,EAMKF,EAAAI,CAAA,EALHF,EAIKE,EAAAC,CAAA,EAHHH,EAEKG,EAAAC,CAAA,6JAPDC,EAAE,CAAA,2BAA2BA,EAAG,CAAA,uHAAhCA,EAAE,CAAA,oCAA2BA,EAAG,CAAA,8HAJpC,MAAAV,EAA6C,6CANxC,GAAA,CAAA,GAAAW,EAAa,EAAE,EAAAC,EAGtB,CAAA,MAAAC,EAAc,OAAO,EAAAD,o/BCYzBX,EAIKC,EAAAY,EAAAV,CAAA,8SAP+BM,EAAI,CAAA,CAAA,8WAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,mRAP9B,CACR,MAAO,sBACP,UAAWK,EACR,GAAAC,EAAkBjB,CAAM;;;;"}
{"version":3,"file":"InlineAd.stories-0f56ab54.js","sources":["../../src/components/AdSlot/stories/docs/inline.md?raw","../../src/components/AdSlot/InlineAd.svelte","../../src/components/AdSlot/InlineAd.stories.svelte"],"sourcesContent":["export default \"Add programmatic ads inline on your page.\\n\\n> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.\\n\\n```svelte\\n<script>\\n import { AdSlot, AdScripts } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<!-- ALWAYS check if in an embed context! -->\\n{#if !embedded}\\n <!-- Include AdScripts only ONCE per page -->\\n <AdScripts />\\n{/if}\\n\\n<!-- ... -->\\n\\n{#if !embedded}\\n <AdSlot />\\n{/if}\\n\\n<!-- ... -->\\n\\n{#if !embedded}\\n <!-- Can add multiple ads to your page -->\\n <AdSlot />\\n{/if}\\n```\\n\"","<script lang=\"ts\">\n import Block from '../Block/Block.svelte';\n import { DesktopPlacementName } from './@types/ads';\n import ResponsiveAd from './ResponsiveAd.svelte';\n\n /** Add an ID to target with SCSS. */\n export let id: string = '';\n\n /** Add a class to target with SCSS. */\n let cls: string = 'my-12';\n export { cls as class };\n\n const desktopPlacementName: DesktopPlacementName = 'reuters_desktop_native_1';\n</script>\n\n<!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) -->\n<Block id=\"{id}\" class=\"freestar-adslot {cls}\">\n <div class=\"ad-block\">\n <div class=\"ad-label\">Advertisement · Scroll to continue</div>\n <div class=\"ad-container\">\n <div class=\"ad-slot__inner\">\n <div>\n <ResponsiveAd desktopPlacementName=\"{desktopPlacementName}\" />\n </div>\n </div>\n </div>\n </div>\n</Block>\n\n<style lang=\"scss\">\n div.ad-block {\n border-bottom: 1px solid var(--theme-colour-brand-rules);\n border-top: 1px solid var(--theme-colour-brand-rules);\n div.ad-label {\n font-family: Knowledge, 'Source Sans Pro', Arial, Helvetica, sans-serif;\n font-size: 14px;\n margin: 6px 0;\n line-height: 1.333;\n color: var(--theme-colour-text-secondary);\n width: 100%;\n text-align: center;\n }\n div.ad-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n min-height: 415px;\n @media (max-width: 767.9px) {\n min-height: 320px;\n }\n div.ad-slot__inner {\n margin: auto 0;\n width: 100%;\n max-width: 100%;\n flex: unset;\n & > div {\n display: block;\n :global(div[data-freestar-ad]) {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n }\n }\n }\n }\n</style>\n","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import adDocs from './stories/docs/inline.md?raw';\n\n import AdScripts from './AdScripts.svelte';\n import InlineAd from './InlineAd.svelte';\n\n import { withComponentDocs } from '$docs/utils/withParams.js';\n\n const meta = {\n title: 'Components/InlineAd',\n component: InlineAd,\n ...withComponentDocs(adDocs),\n };\n</script>\n\n<Meta title=\"Components/InlineAd\" {...meta} />\n\n<Template let:args>\n <div>\n <AdScripts />\n <InlineAd />\n <InlineAd />\n </div>\n</Template>\n\n<Story name=\"Default\" />\n"],"names":["adDocs","desktopPlacementName","insert","target","div4","anchor","append","div0","div3","div2","div1","ctx","id","$$props","cls","div","InlineAd","withComponentDocs"],"mappings":"0gBAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;2DCsBgC,qBAAAC,CAAoB,CAAA,CAAA,oVALjEC,EASKC,EAAAC,EAAAC,CAAA,EARHC,EAA6DF,EAAAG,CAAA,SAC7DD,EAMKF,EAAAI,CAAA,EALHF,EAIKE,EAAAC,CAAA,EAHHH,EAEKG,EAAAC,CAAA,6JAPDC,EAAE,CAAA,2BAA2BA,EAAG,CAAA,uHAAhCA,EAAE,CAAA,oCAA2BA,EAAG,CAAA,8HAJpC,MAAAV,EAA6C,6CANxC,GAAA,CAAA,GAAAW,EAAa,EAAE,EAAAC,EAGtB,CAAA,MAAAC,EAAc,OAAO,EAAAD,o/BCYzBX,EAIKC,EAAAY,EAAAV,CAAA,8SAP+BM,EAAI,CAAA,CAAA,8WAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,mRAP9B,CACR,MAAO,sBACP,UAAWK,EACR,GAAAC,EAAkBjB,CAAM;;;;"}

4
docs/assets/Markdown.stories-51abea6d.js → docs/assets/Markdown.stories-97ec3159.js
View file

@ -1,4 +1,4 @@
import{S,i as T,s as j,C as _,g as c,y as h,m,d as w,t as d,h as u,f as k,j as f}from"./index-99a30af8.js";import{g as y,a as v}from"./spread-8a54911c.js";import{p as C,M as B,T as x,S as L}from"./collect-stories-1e0d20c7.js";import{M}from"./Markdown-2a6fc77f.js";import{w as A}from"./withParams-47e2ab71.js";import{B as q}from"./Block-4e35b26d.js";const H=`The Markdown component renders markdown into HTML. That's it!
import{S,i as T,s as j,C as _,g as c,y as h,m,d as w,t as d,h as u,f as k,j as f}from"./index-99a30af8.js";import{g as y,a as v}from"./spread-8a54911c.js";import{p as C,M as B,T as x,S as L}from"./collect-stories-1e0d20c7.js";import{M}from"./Markdown-2a6fc77f.js";import{w as A}from"./withParams-47e2ab71.js";import{B as q}from"./Block-a09d61d3.js";const H=`The Markdown component renders markdown into HTML. That's it!
---
@ -40,4 +40,4 @@ If you're not updating your markdown content as above, you can safely leave the
`;function I(i){let t,o;const s=[i[1]];let r={};for(let n=0;n<s.length;n+=1)r=_(r,s[n]);return t=new M({props:r}),{c(){c(t.$$.fragment)},m(n,p){m(t,n,p),o=!0},p(n,p){const l=p&2?y(s,[v(n[1])]):{};t.$set(l)},i(n){o||(d(t.$$.fragment,n),o=!0)},o(n){u(t.$$.fragment,n),o=!1},d(n){f(t,n)}}}function K(i){let t,o;return t=new q({props:{$$slots:{default:[I]},$$scope:{ctx:i}}}),{c(){c(t.$$.fragment)},m(s,r){m(t,s,r),o=!0},p(s,r){const n={};r&6&&(n.$$scope={dirty:r,ctx:s}),t.$set(n)},i(s){o||(d(t.$$.fragment,s),o=!0)},o(s){u(t.$$.fragment,s),o=!1},d(s){f(t,s)}}}function N(i){let t,o,s,r,n,p;const l=[{title:"Components/Markdown"},{component:M},i[0]];let g={};for(let e=0;e<l.length;e+=1)g=_(g,l[e]);return t=new B({props:g}),s=new x({props:{$$slots:{default:[K,({args:e})=>({1:e}),({args:e})=>e?2:0]},$$scope:{ctx:i}}}),n=new L({props:{name:"Default",args:{source:"This is *some* text in **markdown**."}}}),{c(){c(t.$$.fragment),o=h(),c(s.$$.fragment),r=h(),c(n.$$.fragment)},m(e,a){m(t,e,a),w(e,o,a),m(s,e,a),w(e,r,a),m(n,e,a),p=!0},p(e,[a]){const D=a&1?y(l,[l[0],l[1],v(e[0])]):{};t.$set(D);const $={};a&6&&($.$$scope={dirty:a,ctx:e}),s.$set($)},i(e){p||(d(t.$$.fragment,e),d(s.$$.fragment,e),d(n.$$.fragment,e),p=!0)},o(e){u(t.$$.fragment,e),u(s.$$.fragment,e),u(n.$$.fragment,e),p=!1},d(e){e&&(k(o),k(r)),f(t,e),f(s,e),f(n,e)}}}function O(i){return[{...A(H)}]}class P extends S{constructor(t){super(),T(this,t,O,N,j,{})}}const b=C(P,{meta:{title:"Components/Markdown"},stories:{"tpl:default":{name:"default",template:!0,source:`<Block>
<Markdown {...args} />
</Block>`,hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","Markdown","withComponentDocs","Block"]}),R=b.meta,U=["Default"],V=b.stories.Default;export{V as Default,U as __namedExportsOrder,R as default};
//# sourceMappingURL=Markdown.stories-51abea6d.js.map
//# sourceMappingURL=Markdown.stories-97ec3159.js.map

2
docs/assets/Markdown.stories-51abea6d.js.map → docs/assets/Markdown.stories-97ec3159.js.map
View file

@ -1 +1 @@
{"version":3,"file":"Markdown.stories-51abea6d.js","sources":["../../src/components/Markdown/stories/docs/component.md?raw","../../src/components/Markdown/Markdown.stories.svelte"],"sourcesContent":["export default \"The Markdown component renders markdown into HTML. That's it!\\n\\n---\\n\\n```svelte\\n<script>\\n import { Markdown } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<Markdown source=\\\"{'My markdown **string**!'}\\\" />\\n```\\n\\n... well, almost.\\n\\nOwing to a weird quirk of Svelte's [`@html`](https://svelte.dev/docs/special-tags#html) directive (see [this issue](https://github.com/reuters-graphics/graphics-components/issues/148)), if you want your resulting HTML to be dynamic — e.g., update after a SvelteKit app [hydrates](https://kit.svelte.dev/docs/glossary#hydration) — then you may need to set the included `$staticMarkdown` store to `false` in the browser.\\n\\nFor example, if you're refreshing some data with markdown strings in a SvelteKit project using a [load function](https://kit.svelte.dev/docs/load), set the store to reflect the [`building`](https://kit.svelte.dev/docs/modules#$app-environment-building) variable, which will correctly [prerender](https://kit.svelte.dev/docs/glossary#prerendering) your markdown content AND update it after fresh data is fetched in the browser.\\n\\n```javascript\\n// +layout.js\\nimport { staticMarkdown } from '@reuters-graphics/graphics-components';\\nimport { building } from '$app/environment';\\n\\n/** @type {import('./$types').LayoutLoad} */\\nexport const load = async () => {\\n // Set the staticMarkdown store with the value of building.\\n staticMarkdown.set(building);\\n\\n // Now this content will correctly refresh when a reader loads your page.\\n const resp = await fetch(\\n 'https://graphics.thomsonreuters.com/data/my-page-content.json'\\n );\\n const content = await resp.json();\\n\\n return { content };\\n};\\n```\\n\\nIf you're not updating your markdown content as above, you can safely leave the `$staticMarkdown` store alone and your page will do the right thing.\\n\"","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import componentDocs from './stories/docs/component.md?raw';\n\n import Markdown from './Markdown.svelte';\n\n import { withComponentDocs } from '$docs/utils/withParams.js';\n\n import Block from '../Block/Block.svelte';\n\n const metaProps = {\n ...withComponentDocs(componentDocs),\n };\n</script>\n\n<Meta title=\"Components/Markdown\" component=\"{Markdown}\" {...metaProps} />\n\n<Template let:args>\n <Block>\n <Markdown {...args} />\n </Block>\n</Template>\n\n<Story\n name=\"Default\"\n args=\"{{\n source: 'This is *some* text in **markdown**.',\n }}\"\n/>\n"],"names":["componentDocs","ctx","Markdown","withComponentDocs"],"mappings":"6VAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCCqBGC,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,+bAJwBC,CAAQ,EAAOD,EAAS,CAAA,kNAWlE,OAAQ,gNAXiDA,EAAS,CAAA,CAAA,qRALrD,CAAA,GACVE,EAAkBH,CAAa,CAAA;;"}
{"version":3,"file":"Markdown.stories-97ec3159.js","sources":["../../src/components/Markdown/stories/docs/component.md?raw","../../src/components/Markdown/Markdown.stories.svelte"],"sourcesContent":["export default \"The Markdown component renders markdown into HTML. That's it!\\n\\n---\\n\\n```svelte\\n<script>\\n import { Markdown } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<Markdown source=\\\"{'My markdown **string**!'}\\\" />\\n```\\n\\n... well, almost.\\n\\nOwing to a weird quirk of Svelte's [`@html`](https://svelte.dev/docs/special-tags#html) directive (see [this issue](https://github.com/reuters-graphics/graphics-components/issues/148)), if you want your resulting HTML to be dynamic — e.g., update after a SvelteKit app [hydrates](https://kit.svelte.dev/docs/glossary#hydration) — then you may need to set the included `$staticMarkdown` store to `false` in the browser.\\n\\nFor example, if you're refreshing some data with markdown strings in a SvelteKit project using a [load function](https://kit.svelte.dev/docs/load), set the store to reflect the [`building`](https://kit.svelte.dev/docs/modules#$app-environment-building) variable, which will correctly [prerender](https://kit.svelte.dev/docs/glossary#prerendering) your markdown content AND update it after fresh data is fetched in the browser.\\n\\n```javascript\\n// +layout.js\\nimport { staticMarkdown } from '@reuters-graphics/graphics-components';\\nimport { building } from '$app/environment';\\n\\n/** @type {import('./$types').LayoutLoad} */\\nexport const load = async () => {\\n // Set the staticMarkdown store with the value of building.\\n staticMarkdown.set(building);\\n\\n // Now this content will correctly refresh when a reader loads your page.\\n const resp = await fetch(\\n 'https://graphics.thomsonreuters.com/data/my-page-content.json'\\n );\\n const content = await resp.json();\\n\\n return { content };\\n};\\n```\\n\\nIf you're not updating your markdown content as above, you can safely leave the `$staticMarkdown` store alone and your page will do the right thing.\\n\"","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import componentDocs from './stories/docs/component.md?raw';\n\n import Markdown from './Markdown.svelte';\n\n import { withComponentDocs } from '$docs/utils/withParams.js';\n\n import Block from '../Block/Block.svelte';\n\n const metaProps = {\n ...withComponentDocs(componentDocs),\n };\n</script>\n\n<Meta title=\"Components/Markdown\" component=\"{Markdown}\" {...metaProps} />\n\n<Template let:args>\n <Block>\n <Markdown {...args} />\n </Block>\n</Template>\n\n<Story\n name=\"Default\"\n args=\"{{\n source: 'This is *some* text in **markdown**.',\n }}\"\n/>\n"],"names":["componentDocs","ctx","Markdown","withComponentDocs"],"mappings":"6VAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCCqBGC,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,+bAJwBC,CAAQ,EAAOD,EAAS,CAAA,kNAWlE,OAAQ,gNAXiDA,EAAS,CAAA,CAAA,qRALrD,CAAA,GACVE,EAAkBH,CAAa,CAAA;;"}

4
docs/assets/OverlayScrollbars-GZGLA7DL-58a53db9.js → docs/assets/OverlayScrollbars-GZGLA7DL-fdb95f2f.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/OverlayScrollbars-GZGLA7DL-58a53db9.js.map → docs/assets/OverlayScrollbars-GZGLA7DL-fdb95f2f.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/PaddingReset.stories-2c2bc27b.js → docs/assets/PaddingReset.stories-963e5db7.js
View file

@ -1,4 +1,4 @@
import{S as y,i as A,s as C,C as v,g as c,y as h,m,d as $,t as f,h as u,f as _,j as g,l as P,b as R,n as S}from"./index-99a30af8.js";import{g as x,a as I}from"./spread-8a54911c.js";import{p as M,M as T,T as j,S as F}from"./collect-stories-1e0d20c7.js";import{P as k}from"./PaddingReset-79b11107.js";import{B as q}from"./Block-4e35b26d.js";import{w as E}from"./withParams-47e2ab71.js";const O=`Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on text that's adajcent to it.
import{S as y,i as A,s as C,C as v,g as c,y as h,m,d as $,t as f,h as u,f as _,j as g,l as P,b as R,n as S}from"./index-99a30af8.js";import{g as x,a as I}from"./spread-8a54911c.js";import{p as M,M as T,T as j,S as F}from"./collect-stories-1e0d20c7.js";import{P as k}from"./PaddingReset-79b11107.js";import{B as q}from"./Block-a09d61d3.js";import{w as E}from"./withParams-47e2ab71.js";const O=`Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on text that's adajcent to it.
The \`PaddingReset\` component resets padding on the \`Article\` well that's been cancelled by a \`Block\` with a \`fluid\` width.
@ -39,4 +39,4 @@ You can also add the padding conditionally by using the \`containerIsFluid\` pro
<div class="inner"></div>
</PaddingReset>
</Block>`,hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!0}},allocatedIds:["default","Meta","Template","Story","componentDocs","PaddingReset","Block","withComponentDocs"]}),V=b.meta,W=["Default"],X=b.stories.Default;export{X as Default,W as __namedExportsOrder,V as default};
//# sourceMappingURL=PaddingReset.stories-2c2bc27b.js.map
//# sourceMappingURL=PaddingReset.stories-963e5db7.js.map

2
docs/assets/PaddingReset.stories-2c2bc27b.js.map → docs/assets/PaddingReset.stories-963e5db7.js.map
View file

@ -1 +1 @@
{"version":3,"file":"PaddingReset.stories-2c2bc27b.js","sources":["../../src/components/PaddingReset/stories/docs/component.md?raw","../../src/components/PaddingReset/PaddingReset.stories.svelte"],"sourcesContent":["export default \"Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on text that's adajcent to it.\\n\\nThe `PaddingReset` component resets padding on the `Article` well that's been cancelled by a `Block` with a `fluid` width.\\n\\n```svelte\\n<script>\\n import { Block, PaddingReset } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<Block width=\\\"fluid\\\">\\n <!-- An edge-to-edge image -->\\n <img src=\\\"https//...\\\" alt=\\\"...\\\" width=\\\"100%\\\" />\\n <PaddingReset>\\n <p>A caption for the image that will still be padded.</p>\\n </PaddingReset>\\n</Block>\\n```\\n\\nYou can also add the padding conditionally by using the `containerIsFluid` prop, which is what many other components in this library do.\\n\\n```svelte\\n<script>\\n import { Block, PaddingReset } from '@reuters-graphics/graphics-components';\\n\\n export let src = 'https://...';\\n export let width = 'fluid';\\n</script>\\n\\n<Block width=\\\"{width}\\\">\\n <img src=\\\"{src}\\\" alt=\\\"...\\\" width=\\\"100%\\\" />\\n <PaddingReset containerIsFluid=\\\"{width === 'fluid'}\\\">\\n <p>A caption for the image that will be padded when Block is fluid.</p>\\n </PaddingReset>\\n</Block>\\n```\\n\"","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import componentDocs from './stories/docs/component.md?raw';\n\n import PaddingReset from './PaddingReset.svelte';\n import Block from '../Block/Block.svelte';\n\n import { withComponentDocs } from '$lib/docs/utils/withParams.js';\n</script>\n\n<Meta\n title=\"Components/PaddingReset\"\n component=\"{PaddingReset}\"\n {...withComponentDocs(componentDocs)}\n/>\n\n<Template let:args>\n <Block width=\"fluid\">\n <div class=\"outer\"></div>\n <PaddingReset {...args}>\n <div class=\"inner\"></div>\n </PaddingReset>\n </Block>\n</Template>\n\n<Story\n name=\"Default\"\n args=\"{{\n containerIsFluid: true,\n }}\"\n let:args\n/>\n\n<style lang=\"scss\">\n div {\n height: 30px;\n width: 100%;\n margin-bottom: 2px;\n &.outer {\n background: grey;\n }\n &.inner {\n background: salmon;\n }\n }\n</style>\n"],"names":["componentDocs","insert","target","div","anchor","ctx","PaddingReset","withComponentDocs"],"mappings":"gYAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;uFCsBTC,EAAwBC,EAAAC,EAAAC,CAAA,yDADRC,EAAI,CAAA,CAAA,oMADtBJ,EAAwBC,EAAAC,EAAAC,CAAA,oDACNC,EAAI,CAAA,CAAA,CAAA,CAAA,igBAPZC,CAAY,EACpBC,EAAkBP,CAAa,4MAejC,KAAA,CAAA,iBAAkB,EAAI;;;;;"}
{"version":3,"file":"PaddingReset.stories-963e5db7.js","sources":["../../src/components/PaddingReset/stories/docs/component.md?raw","../../src/components/PaddingReset/PaddingReset.stories.svelte"],"sourcesContent":["export default \"Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on text that's adajcent to it.\\n\\nThe `PaddingReset` component resets padding on the `Article` well that's been cancelled by a `Block` with a `fluid` width.\\n\\n```svelte\\n<script>\\n import { Block, PaddingReset } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<Block width=\\\"fluid\\\">\\n <!-- An edge-to-edge image -->\\n <img src=\\\"https//...\\\" alt=\\\"...\\\" width=\\\"100%\\\" />\\n <PaddingReset>\\n <p>A caption for the image that will still be padded.</p>\\n </PaddingReset>\\n</Block>\\n```\\n\\nYou can also add the padding conditionally by using the `containerIsFluid` prop, which is what many other components in this library do.\\n\\n```svelte\\n<script>\\n import { Block, PaddingReset } from '@reuters-graphics/graphics-components';\\n\\n export let src = 'https://...';\\n export let width = 'fluid';\\n</script>\\n\\n<Block width=\\\"{width}\\\">\\n <img src=\\\"{src}\\\" alt=\\\"...\\\" width=\\\"100%\\\" />\\n <PaddingReset containerIsFluid=\\\"{width === 'fluid'}\\\">\\n <p>A caption for the image that will be padded when Block is fluid.</p>\\n </PaddingReset>\\n</Block>\\n```\\n\"","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import componentDocs from './stories/docs/component.md?raw';\n\n import PaddingReset from './PaddingReset.svelte';\n import Block from '../Block/Block.svelte';\n\n import { withComponentDocs } from '$lib/docs/utils/withParams.js';\n</script>\n\n<Meta\n title=\"Components/PaddingReset\"\n component=\"{PaddingReset}\"\n {...withComponentDocs(componentDocs)}\n/>\n\n<Template let:args>\n <Block width=\"fluid\">\n <div class=\"outer\"></div>\n <PaddingReset {...args}>\n <div class=\"inner\"></div>\n </PaddingReset>\n </Block>\n</Template>\n\n<Story\n name=\"Default\"\n args=\"{{\n containerIsFluid: true,\n }}\"\n let:args\n/>\n\n<style lang=\"scss\">\n div {\n height: 30px;\n width: 100%;\n margin-bottom: 2px;\n &.outer {\n background: grey;\n }\n &.inner {\n background: salmon;\n }\n }\n</style>\n"],"names":["componentDocs","insert","target","div","anchor","ctx","PaddingReset","withComponentDocs"],"mappings":"gYAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;uFCsBTC,EAAwBC,EAAAC,EAAAC,CAAA,yDADRC,EAAI,CAAA,CAAA,oMADtBJ,EAAwBC,EAAAC,EAAAC,CAAA,oDACNC,EAAI,CAAA,CAAA,CAAA,CAAA,igBAPZC,CAAY,EACpBC,EAAkBP,CAAa,4MAejC,KAAA,CAAA,iBAAkB,EAAI;;;;;"}

4
docs/assets/PhotoCarousel.stories-04332eee.js → docs/assets/PhotoCarousel.stories-efc6acb2.js
View file

@ -1,4 +1,4 @@
import{S as Et,i as bt,s as tt,a5 as Ge,C as ue,l as J,a4 as Ye,d as Q,v as nt,h as j,w as rt,t as F,f as ee,a3 as Ke,J as ei,D as ti,K as ni,a2 as Rn,E as ri,k as it,u as at,o as ot,p as st,g as ae,m as oe,j as se,b as Y,e as ne,a6 as Zn,x as ii,O as Er,P as ai,y as Ae,r as In,V as oi,c as Be,n as Mt,z as Wt,A as Ht,a7 as si,q as Xn}from"./index-99a30af8.js";import{g as $e,a as br}from"./spread-8a54911c.js";import{p as li,M as ci,T as ui,S as Yn}from"./collect-stories-1e0d20c7.js";import{e as Kn}from"./each-e59479a4.js";import{B as Ar}from"./Block-4e35b26d.js";import{F as xn}from"./fa-89776db2.js";import{g as fi,h as di}from"./index.es-ff8a88a9.js";import{P as vi}from"./PaddingReset-79b11107.js";import{b as gi,w as mi}from"./withParams-47e2ab71.js";const hi=`A simple, accessible photo carousel with lazy-loading and mobile swipe built in.
import{S as Et,i as bt,s as tt,a5 as Ge,C as ue,l as J,a4 as Ye,d as Q,v as nt,h as j,w as rt,t as F,f as ee,a3 as Ke,J as ei,D as ti,K as ni,a2 as Rn,E as ri,k as it,u as at,o as ot,p as st,g as ae,m as oe,j as se,b as Y,e as ne,a6 as Zn,x as ii,O as Er,P as ai,y as Ae,r as In,V as oi,c as Be,n as Mt,z as Wt,A as Ht,a7 as si,q as Xn}from"./index-99a30af8.js";import{g as $e,a as br}from"./spread-8a54911c.js";import{p as li,M as ci,T as ui,S as Yn}from"./collect-stories-1e0d20c7.js";import{e as Kn}from"./each-e59479a4.js";import{B as Ar}from"./Block-a09d61d3.js";import{F as xn}from"./fa-89776db2.js";import{g as fi,h as di}from"./index.es-ff8a88a9.js";import{P as vi}from"./PaddingReset-79b11107.js";import{b as gi,w as mi}from"./withParams-47e2ab71.js";const hi=`A simple, accessible photo carousel with lazy-loading and mobile swipe built in.
\`\`\`svelte
<script>
@ -64,4 +64,4 @@ Can't ever be wider than \`width\`.`,name:"textWidth",kind:"let",static:!1,reado
<p class="custom-credit" slot="credit" let:credit>{credit}</p>
<p class="custom-caption" slot="caption" let:caption>{caption}</p>
</PhotoCarousel>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","customDocs","PhotoCarousel","withComponentDocs","withStoryDocs","photosJson"]}),po=Hn.meta,_o=["Default","CustomCreditsAndCaptions"],yo=Hn.stories.Default,Eo=Hn.stories.CustomCreditsAndCaptions;export{Eo as CustomCreditsAndCaptions,yo as Default,_o as __namedExportsOrder,po as default};
//# sourceMappingURL=PhotoCarousel.stories-04332eee.js.map
//# sourceMappingURL=PhotoCarousel.stories-efc6acb2.js.map

2
docs/assets/PhotoCarousel.stories-04332eee.js.map → docs/assets/PhotoCarousel.stories-efc6acb2.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/PhotoPack.stories-6d61b497.js → docs/assets/PhotoPack.stories-00b61d66.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/PhotoPack.stories-6d61b497.js.map → docs/assets/PhotoPack.stories-00b61d66.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/ReferralBlock.stories-f295052e.js → docs/assets/ReferralBlock.stories-6fc18d22.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/ReferralBlock.stories-f295052e.js.map → docs/assets/ReferralBlock.stories-6fc18d22.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/Scroller.stories-11e4ebfe.js → docs/assets/Scroller.stories-9217a37e.js
View file

@ -1,4 +1,4 @@
import{S as W,i as q,s as D,O as ue,k as Ce,l as y,y as A,a8 as ee,d as b,e as P,M as ft,u as We,o as qe,p as De,t as g,h,f as _,D as Tt,E as te,r as j,v as B,w as I,V as ke,I as Y,g as $,b as p,q as X,m as S,j as M,C as z,Q as me,R as be,n as E,z as je,A as $t,P as ye}from"./index-99a30af8.js";import{g as U,a as H}from"./spread-8a54911c.js";import{p as St,M as Mt,T as At,S as ae}from"./collect-stories-1e0d20c7.js";import{g as Pt}from"./globals-7f7f1b26.js";import{e as ne}from"./each-e59479a4.js";import{M as se}from"./Markdown-2a6fc77f.js";import{B as oe}from"./Block-4e35b26d.js";import{b as _e,w as Lt}from"./withParams-47e2ab71.js";const Bt=`The \`Scroller\` component helps you quickly create basic scrollytelling graphics with several layout options.
import{S as W,i as q,s as D,O as ue,k as Ce,l as y,y as A,a8 as ee,d as b,e as P,M as ft,u as We,o as qe,p as De,t as g,h,f as _,D as Tt,E as te,r as j,v as B,w as I,V as ke,I as Y,g as $,b as p,q as X,m as S,j as M,C as z,Q as me,R as be,n as E,z as je,A as $t,P as ye}from"./index-99a30af8.js";import{g as U,a as H}from"./spread-8a54911c.js";import{p as St,M as Mt,T as At,S as ae}from"./collect-stories-1e0d20c7.js";import{g as Pt}from"./globals-7f7f1b26.js";import{e as ne}from"./each-e59479a4.js";import{M as se}from"./Markdown-2a6fc77f.js";import{B as oe}from"./Block-a09d61d3.js";import{b as _e,w as Lt}from"./withParams-47e2ab71.js";const Bt=`The \`Scroller\` component helps you quickly create basic scrollytelling graphics with several layout options.
> This component is designed to handle most common layouts for scrollytelling. If you need something more complex, though, you should probably use [svelte-scroller](https://github.com/sveltejs/svelte-scroller), which is a lower level component you can more easily customize.
@ -285,4 +285,4 @@ Lorem ipsum`,AltText:"A map showing the Upper West side in New York City."},{Bac
Lorem ipsum`,AltText:"The same map now highlights 98th Street."},{Background:"AiMap3",Text:`#### Step 3
Lorem ipsum`,AltText:"The same map now highlights three locations near 98th Street where something particulary important happened."}]},n={...Lt(Bt),argTypes:{steps:{control:!1},backgroundWidth:{control:"select",options:["normal","wide","wider","widest","fluid"]},foregroundPosition:{control:"select",options:["middle","left","right","left opposite","right opposite"]},embeddedLayout:{control:"select",options:["fb","bf"]}}};return[e,t,n]}class Hn extends W{constructor(e){super(),q(this,e,En,Nn,D,{})}}const re=St(Hn,{meta:{title:"Components/Scroller"},stories:{"tpl:default":{name:"default",template:!0,source:"<Scroller {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1},QUICKIT:{name:"🚀 QUICKIT",template:!1,source:"",hasArgs:!1},ForegroundComponents:{name:"Foreground components",template:!1,source:"",hasArgs:!1},Ai2svelte:{name:"Ai2svelte",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","interactiveDocs","ai2svelteDocs","quickitDocs","Scroller","BasicStep","InteractiveForeground","AiMap1","AiMap2","AiMap3","withComponentDocs","withStoryDocs","getScrollerPropsFromDoc"]}),ts=re.meta,ns=["Default","QUICKIT","ForegroundComponents","Ai2svelte"],ss=re.stories.Default,ls=re.stories.QUICKIT,os=re.stories.ForegroundComponents,rs=re.stories.Ai2svelte;export{rs as Ai2svelte,ss as Default,os as ForegroundComponents,ls as QUICKIT,ns as __namedExportsOrder,ts as default};
//# sourceMappingURL=Scroller.stories-11e4ebfe.js.map
//# sourceMappingURL=Scroller.stories-9217a37e.js.map

2
docs/assets/Scroller.stories-11e4ebfe.js.map → docs/assets/Scroller.stories-9217a37e.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/SimpleTimeline.stories-dfb0f056.js → docs/assets/SimpleTimeline.stories-94a46ad6.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/SimpleTimeline.stories-dfb0f056.js.map → docs/assets/SimpleTimeline.stories-94a46ad6.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/SiteHeadline.stories-31a61511.js → docs/assets/SiteHeadline.stories-97be4733.js
View file

@ -1,4 +1,4 @@
import{S as B,i as z,s as K,g as h,m as g,t as y,h as b,j as k,l as T,y as U,b as m,d as _,e as w,f as S,z as D,A as H,C as P,n as V}from"./index-99a30af8.js";import{g as Q,a as q}from"./spread-8a54911c.js";import{w as O,b as R}from"./withParams-47e2ab71.js";import{B as Z}from"./Block-4e35b26d.js";import{B as j}from"./Byline-df82a671.js";import{p as M,T as N,S as A}from"./collect-stories-1e0d20c7.js";import"./each-e59479a4.js";import"./_commonjsHelpers-de833af9.js";import"./journalize-07958dc6.js";const $=`A simplified Reuters Graphics headline, loosely modelled off our dotcom site.
import{S as B,i as z,s as K,g as h,m as g,t as y,h as b,j as k,l as T,y as U,b as m,d as _,e as w,f as S,z as D,A as H,C as P,n as V}from"./index-99a30af8.js";import{g as Q,a as q}from"./spread-8a54911c.js";import{w as O,b as R}from"./withParams-47e2ab71.js";import{B as Z}from"./Block-a09d61d3.js";import{B as j}from"./Byline-1358d74f.js";import{p as M,T as N,S as A}from"./collect-stories-1e0d20c7.js";import"./each-e59479a4.js";import"./_commonjsHelpers-de833af9.js";import"./journalize-07958dc6.js";const $=`A simplified Reuters Graphics headline, loosely modelled off our dotcom site.
Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround, usually shorter breaking news pages.
@ -56,4 +56,4 @@ Updated:
authors="{content.Authors.split(',')}"
publishTime="{content.Published}"
/>`,hasArgs:!1}},allocatedIds:["default","Template","Story","quickitDocs","withStoryDocs"]},te),me=I.meta,pe=["Default","QUICKIT"],he=I.stories.Default,ge=I.stories.QUICKIT;export{he as Default,ge as QUICKIT,pe as __namedExportsOrder,me as default};
//# sourceMappingURL=SiteHeadline.stories-31a61511.js.map
//# sourceMappingURL=SiteHeadline.stories-97be4733.js.map

2
docs/assets/SiteHeadline.stories-31a61511.js.map → docs/assets/SiteHeadline.stories-97be4733.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/SponsorshipAd.stories-cc46ffe6.js → docs/assets/SponsorshipAd.stories-e11648fd.js
View file

@ -1,4 +1,4 @@
import{S as w,i as k,s as D,g as m,m as c,t as f,h as u,j as $,l as g,y as v,b as h,d as S,e as _,n as C,f as A,C as z}from"./index-99a30af8.js";import{g as I,a as N}from"./spread-8a54911c.js";import{p as R,M as x,T as O,S as j}from"./collect-stories-1e0d20c7.js";import{R as B,A as E}from"./ResponsiveAd-034dbb7c.js";import{B as L}from"./Block-4e35b26d.js";import{w as P}from"./withParams-47e2ab71.js";import"./throttle-dfed7c30.js";import"./isObject-32699ff3.js";import"./now-bd49f550.js";import"./isSymbol-50749e90.js";const V=`Add a sponsorship ad to your page.
import{S as w,i as k,s as D,g as m,m as c,t as f,h as u,j as $,l as g,y as v,b as h,d as S,e as _,n as C,f as A,C as z}from"./index-99a30af8.js";import{g as I,a as N}from"./spread-8a54911c.js";import{p as R,M as x,T as O,S as j}from"./collect-stories-1e0d20c7.js";import{R as B,A as E}from"./ResponsiveAd-034dbb7c.js";import{B as L}from"./Block-a09d61d3.js";import{w as P}from"./withParams-47e2ab71.js";import"./throttle-dfed7c30.js";import"./isObject-32699ff3.js";import"./now-bd49f550.js";import"./isSymbol-50749e90.js";const V=`Add a sponsorship ad to your page.
> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
@ -26,4 +26,4 @@ import{S as w,i as k,s as D,g as m,m as c,t as f,h as u,j as $,l as g,y as v,b a
<AdScripts />
<SponsorshipAd />
</div>`,hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","adDocs","AdScripts","SponsorshipAd","withComponentDocs"]}),re=M.meta,ie=["Default"],pe=M.stories.Default;export{pe as Default,ie as __namedExportsOrder,re as default};
//# sourceMappingURL=SponsorshipAd.stories-cc46ffe6.js.map
//# sourceMappingURL=SponsorshipAd.stories-e11648fd.js.map

2
docs/assets/SponsorshipAd.stories-cc46ffe6.js.map → docs/assets/SponsorshipAd.stories-e11648fd.js.map
View file

@ -1 +1 @@
{"version":3,"file":"SponsorshipAd.stories-cc46ffe6.js","sources":["../../src/components/AdSlot/stories/docs/sponsorship.md?raw","../../src/components/AdSlot/SponsorshipAd.svelte","../../src/components/AdSlot/SponsorshipAd.stories.svelte"],"sourcesContent":["export default \"Add a sponsorship ad to your page.\\n\\n> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.\\n\\n```svelte\\n<script>\\n import {\\n SponsorshipAd,\\n AdScripts,\\n } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<!-- ALWAYS check if in an embed context! -->\\n{#if !embedded}\\n <!-- Include AdScripts only ONCE per page -->\\n <AdScripts />\\n{/if}\\n\\n<!-- ... -->\\n\\n{#if !embedded}\\n <SponsorshipAd />\\n{/if}\\n```\\n\"","<script lang=\"ts\">\n import Block from '../Block/Block.svelte';\n import { DesktopPlacementName } from './@types/ads';\n import ResponsiveAd from './ResponsiveAd.svelte';\n\n /** Add an ID to target with SCSS. */\n export let id: string = '';\n\n /** Add a class to target with SCSS. */\n let cls: string = 'my-12';\n export { cls as class };\n\n const desktopPlacementName: DesktopPlacementName = 'reuters_sponsorlogo';\n</script>\n\n<!-- @component `SponsorshipeAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) -->\n<Block id=\"{id}\" class=\"freestar-adslot {cls}\">\n <div class=\"ad-block\">\n <div class=\"ad-label\">\n <div>Today's Sponsor</div>\n </div>\n <div class=\"ad-container\">\n <div class=\"ad-slot__inner\">\n <div>\n <ResponsiveAd desktopPlacementName=\"{desktopPlacementName}\" />\n </div>\n </div>\n </div>\n </div>\n</Block>\n\n<style lang=\"scss\">\n div.ad-block {\n display: flex;\n justify-content: center;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n div.ad-label {\n font-family: Knowledge, 'Source Sans Pro', Arial, Helvetica, sans-serif;\n font-size: 12px;\n margin: 0;\n line-height: 1.333;\n color: var(--theme-colour-text-secondary);\n text-align: right;\n display: flex;\n align-items: center;\n justify-content: center;\n justify-items: center;\n }\n div.ad-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 195px;\n min-height: 24px;\n div.ad-slot__inner {\n margin: auto 0;\n width: 100%;\n max-width: 100%;\n flex: unset;\n & > div {\n display: block;\n :global(div[data-freestar-ad]) {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n }\n }\n }\n }\n</style>\n","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import adDocs from './stories/docs/sponsorship.md?raw';\n\n import AdScripts from './AdScripts.svelte';\n import SponsorshipAd from './SponsorshipAd.svelte';\n\n import { withComponentDocs } from '$docs/utils/withParams.js';\n\n const meta = {\n title: 'Components/SponsorshipAd',\n component: SponsorshipAd,\n ...withComponentDocs(adDocs),\n };\n</script>\n\n<Meta title=\"Components/SponsorshipAd\" {...meta} />\n\n<Template let:args>\n <div>\n <AdScripts />\n <SponsorshipAd />\n </div>\n</Template>\n\n<Story name=\"Default\" />\n"],"names":["adDocs","desktopPlacementName","insert","target","div5","anchor","append","div1","div4","div3","div2","ctx","id","$$props","cls","div","SponsorshipAd","withComponentDocs"],"mappings":"0gBAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;2DCwBgC,qBAAAC,CAAoB,CAAA,CAAA,8UAPjEC,EAWKC,EAAAC,EAAAC,CAAA,EAVHC,EAEKF,EAAAG,CAAA,SACLD,EAMKF,EAAAI,CAAA,EALHF,EAIKE,EAAAC,CAAA,EAHHH,EAEKG,EAAAC,CAAA,6JATDC,EAAE,CAAA,2BAA2BA,EAAG,CAAA,uHAAhCA,EAAE,CAAA,oCAA2BA,EAAG,CAAA,8HAJpC,MAAAV,EAA6C,wCANxC,GAAA,CAAA,GAAAW,EAAa,EAAE,EAAAC,EAGtB,CAAA,MAAAC,EAAc,OAAO,EAAAD,69BCYzBX,EAGKC,EAAAY,EAAAV,CAAA,qPANoCM,EAAI,CAAA,CAAA,8WAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,mRAPnC,CACR,MAAO,2BACP,UAAWK,EACR,GAAAC,EAAkBjB,CAAM;;;"}
{"version":3,"file":"SponsorshipAd.stories-e11648fd.js","sources":["../../src/components/AdSlot/stories/docs/sponsorship.md?raw","../../src/components/AdSlot/SponsorshipAd.svelte","../../src/components/AdSlot/SponsorshipAd.stories.svelte"],"sourcesContent":["export default \"Add a sponsorship ad to your page.\\n\\n> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.\\n\\n```svelte\\n<script>\\n import {\\n SponsorshipAd,\\n AdScripts,\\n } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<!-- ALWAYS check if in an embed context! -->\\n{#if !embedded}\\n <!-- Include AdScripts only ONCE per page -->\\n <AdScripts />\\n{/if}\\n\\n<!-- ... -->\\n\\n{#if !embedded}\\n <SponsorshipAd />\\n{/if}\\n```\\n\"","<script lang=\"ts\">\n import Block from '../Block/Block.svelte';\n import { DesktopPlacementName } from './@types/ads';\n import ResponsiveAd from './ResponsiveAd.svelte';\n\n /** Add an ID to target with SCSS. */\n export let id: string = '';\n\n /** Add a class to target with SCSS. */\n let cls: string = 'my-12';\n export { cls as class };\n\n const desktopPlacementName: DesktopPlacementName = 'reuters_sponsorlogo';\n</script>\n\n<!-- @component `SponsorshipeAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) -->\n<Block id=\"{id}\" class=\"freestar-adslot {cls}\">\n <div class=\"ad-block\">\n <div class=\"ad-label\">\n <div>Today's Sponsor</div>\n </div>\n <div class=\"ad-container\">\n <div class=\"ad-slot__inner\">\n <div>\n <ResponsiveAd desktopPlacementName=\"{desktopPlacementName}\" />\n </div>\n </div>\n </div>\n </div>\n</Block>\n\n<style lang=\"scss\">\n div.ad-block {\n display: flex;\n justify-content: center;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n div.ad-label {\n font-family: Knowledge, 'Source Sans Pro', Arial, Helvetica, sans-serif;\n font-size: 12px;\n margin: 0;\n line-height: 1.333;\n color: var(--theme-colour-text-secondary);\n text-align: right;\n display: flex;\n align-items: center;\n justify-content: center;\n justify-items: center;\n }\n div.ad-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 195px;\n min-height: 24px;\n div.ad-slot__inner {\n margin: auto 0;\n width: 100%;\n max-width: 100%;\n flex: unset;\n & > div {\n display: block;\n :global(div[data-freestar-ad]) {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n }\n }\n }\n }\n</style>\n","<script>\n import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n // @ts-ignore\n import adDocs from './stories/docs/sponsorship.md?raw';\n\n import AdScripts from './AdScripts.svelte';\n import SponsorshipAd from './SponsorshipAd.svelte';\n\n import { withComponentDocs } from '$docs/utils/withParams.js';\n\n const meta = {\n title: 'Components/SponsorshipAd',\n component: SponsorshipAd,\n ...withComponentDocs(adDocs),\n };\n</script>\n\n<Meta title=\"Components/SponsorshipAd\" {...meta} />\n\n<Template let:args>\n <div>\n <AdScripts />\n <SponsorshipAd />\n </div>\n</Template>\n\n<Story name=\"Default\" />\n"],"names":["adDocs","desktopPlacementName","insert","target","div5","anchor","append","div1","div4","div3","div2","ctx","id","$$props","cls","div","SponsorshipAd","withComponentDocs"],"mappings":"0gBAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;2DCwBgC,qBAAAC,CAAoB,CAAA,CAAA,8UAPjEC,EAWKC,EAAAC,EAAAC,CAAA,EAVHC,EAEKF,EAAAG,CAAA,SACLD,EAMKF,EAAAI,CAAA,EALHF,EAIKE,EAAAC,CAAA,EAHHH,EAEKG,EAAAC,CAAA,6JATDC,EAAE,CAAA,2BAA2BA,EAAG,CAAA,uHAAhCA,EAAE,CAAA,oCAA2BA,EAAG,CAAA,8HAJpC,MAAAV,EAA6C,wCANxC,GAAA,CAAA,GAAAW,EAAa,EAAE,EAAAC,EAGtB,CAAA,MAAAC,EAAc,OAAO,EAAAD,69BCYzBX,EAGKC,EAAAY,EAAAV,CAAA,qPANoCM,EAAI,CAAA,CAAA,8WAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,mRAPnC,CACR,MAAO,2BACP,UAAWK,EACR,GAAAC,EAAkBjB,CAAM;;;"}

4
docs/assets/Table-c2efc6fe.js → docs/assets/Table-3b615453.js
View file

@ -1,2 +1,2 @@
import{R as e,r as s}from"./index-c599f7c3.js";import{c as i,I as E}from"./ImportSnippet-28bea6da.js";import{U as y}from"./chunk-S4VUQJ4A-be5654c7.js";const d=t=>{const a=async l=>{const n=l.wrap?`var(${l.children})`:l.children;await navigator.clipboard.writeText(n),l.setCopied(!0)};return e.createElement("button",{className:"copy-btn",onClick:()=>a(t)},e.createElement("span",{className:"material-symbols-outlined"},"content_copy"),t.children,t.copied&&e.createElement("div",{className:"copy-tag"},"Copied"))},h=t=>{const[a,l]=s.useState(!1);let n;s.useEffect(()=>{n&&clearTimeout(n),n=setTimeout(()=>{l(!1)},1e3)},[a]);const c={...t,copied:a,setCopied:l};return t.column===0?e.createElement("div",{className:"swatch-container"},e.createElement("div",{className:"swatch",style:{backgroundColor:t.children}}),e.createElement("span",null,e.createElement(d,{...c},t.children))):t.children.map(r=>e.createElement("div",{key:r},e.createElement(d,{...c,wrap:!0},r)))},C=t=>e.createElement("td",null,e.createElement(h,{...t},t.children)),b=t=>e.createElement("tr",null,t.children.map((a,l)=>e.createElement(C,{...t,column:l,key:l},a))),f=t=>e.createElement("th",null,t.children),k=({title:t=null,body:a,copyable:l,mdnLink:n=null,included:c=!1,partial:r})=>{const o=["Colour","CSS variable"];return e.createElement(y,null,e.createElement("div",{className:i.title},t),e.createElement(E,{included:c,partial:r}),e.createElement("table",{className:i.table},e.createElement("thead",null,e.createElement("tr",null,o.map(m=>e.createElement(f,{key:m},m)))),e.createElement("tbody",null,a.map((m,u)=>e.createElement(b,{title:t,header:o,body:a,copyable:l,mdnLink:n,key:u},m)))))};export{k as C};
//# sourceMappingURL=Table-c2efc6fe.js.map
import{R as e,r as s}from"./index-b33a5d42.js";import{c as i,I as E}from"./ImportSnippet-ae438d08.js";import{U as y}from"./chunk-S4VUQJ4A-23edc7ed.js";const d=t=>{const a=async l=>{const n=l.wrap?`var(${l.children})`:l.children;await navigator.clipboard.writeText(n),l.setCopied(!0)};return e.createElement("button",{className:"copy-btn",onClick:()=>a(t)},e.createElement("span",{className:"material-symbols-outlined"},"content_copy"),t.children,t.copied&&e.createElement("div",{className:"copy-tag"},"Copied"))},h=t=>{const[a,l]=s.useState(!1);let n;s.useEffect(()=>{n&&clearTimeout(n),n=setTimeout(()=>{l(!1)},1e3)},[a]);const c={...t,copied:a,setCopied:l};return t.column===0?e.createElement("div",{className:"swatch-container"},e.createElement("div",{className:"swatch",style:{backgroundColor:t.children}}),e.createElement("span",null,e.createElement(d,{...c},t.children))):t.children.map(r=>e.createElement("div",{key:r},e.createElement(d,{...c,wrap:!0},r)))},C=t=>e.createElement("td",null,e.createElement(h,{...t},t.children)),b=t=>e.createElement("tr",null,t.children.map((a,l)=>e.createElement(C,{...t,column:l,key:l},a))),f=t=>e.createElement("th",null,t.children),k=({title:t=null,body:a,copyable:l,mdnLink:n=null,included:c=!1,partial:r})=>{const o=["Colour","CSS variable"];return e.createElement(y,null,e.createElement("div",{className:i.title},t),e.createElement(E,{included:c,partial:r}),e.createElement("table",{className:i.table},e.createElement("thead",null,e.createElement("tr",null,o.map(m=>e.createElement(f,{key:m},m)))),e.createElement("tbody",null,a.map((m,u)=>e.createElement(b,{title:t,header:o,body:a,copyable:l,mdnLink:n,key:u},m)))))};export{k as C};
//# sourceMappingURL=Table-3b615453.js.map

2
docs/assets/Table-c2efc6fe.js.map → docs/assets/Table-3b615453.js.map
View file

@ -1 +1 @@
{"version":3,"file":"Table-c2efc6fe.js","sources":["../../src/docs/docs-components/CopyColourTable/Table.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport ImportSnippet from './ImportSnippet';\nimport { Unstyled } from '@storybook/blocks';\n// @ts-ignore\nimport classes from './styles.module.scss';\n\nconst Copyable = (props) => {\n const handleClick = async(props) => {\n const copyText = props.wrap ? `var(${props.children})` : props.children;\n await navigator.clipboard.writeText(copyText);\n props.setCopied(true);\n }\n\n return (\n <button className=\"copy-btn\" onClick={() => handleClick(props)}>\n <span className=\"material-symbols-outlined\">content_copy</span>{props.children}\n {props.copied && <div className=\"copy-tag\">Copied</div>}\n </button>\n );\n}\n\nconst Cell = (props) => {\n const [copied, setCopied] = useState(false);\n\n let timeout;\n\n useEffect(() => {\n if(timeout) clearTimeout(timeout);\n timeout = setTimeout(() => { setCopied(false); }, 1000);\n }, [copied]);\n\n const copyProps = {...props, ...{ copied, setCopied } };\n\n return props.column === 0 ?\n <div className=\"swatch-container\">\n <div className=\"swatch\" style={{ backgroundColor: props.children }}></div>\n <span>\n <Copyable {...copyProps}>{props.children}</Copyable>\n </span>\n </div>\n : props.children.map(css => (\n <div key={css}>\n <Copyable {...copyProps} wrap>{css}</Copyable>\n </div>\n ));\n}\n\n const TD = (props) => <td><Cell {...props}>{props.children}</Cell></td>\nconst TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i} key={i}>{c}</TD>))}</tr>\nconst TH = (props) => <th>{props.children}</th>;\n\nconst CopyTable = ({ title = null, body, copyable, mdnLink = null, included = false, partial }) => {\n const header=['Colour', 'CSS variable'];\n return (\n <Unstyled>\n <div className={classes.title}>\n {title}\n </div>\n <ImportSnippet included={included} partial={partial} />\n <table className={classes.table}>\n <thead>\n <tr>\n {header.map(h => (<TH key={h}>{h}</TH>))}\n </tr>\n </thead>\n <tbody>\n {body.map((b, i) => (<TR {...{ title, header, body, copyable, mdnLink}} key={i}>{b}</TR>))}\n </tbody>\n </table>\n </Unstyled>\n )\n};\n\nexport default CopyTable;"],"names":["Copyable","props","handleClick","copyText","React","Cell","copied","setCopied","useState","timeout","useEffect","copyProps","css","TD","TR","c","i","TH","CopyTable","title","body","copyable","mdnLink","included","partial","header","Unstyled","classes","ImportSnippet","h","b"],"mappings":"uJAOA,MAAMA,EAAYC,GAAU,CACpB,MAAAC,EAAc,MAAMD,GAAU,CAClC,MAAME,EAAWF,EAAM,KAAO,OAAOA,EAAM,QAAQ,IAAMA,EAAM,SACzD,MAAA,UAAU,UAAU,UAAUE,CAAQ,EAC5CF,EAAM,UAAU,EAAI,CAAA,EAIpB,OAAAG,EAAA,cAAC,SAAO,CAAA,UAAU,WAAW,QAAS,IAAMF,EAAYD,CAAK,CAC3D,EAAAG,EAAA,cAAC,OAAK,CAAA,UAAU,6BAA4B,cAAY,EAAQH,EAAM,SACrEA,EAAM,wBAAW,MAAI,CAAA,UAAU,UAAW,EAAA,QAAM,CACnD,CAEJ,EAEMI,EAAQJ,GAAU,CACtB,KAAM,CAACK,EAAQC,CAAS,EAAIC,WAAS,EAAK,EAEtC,IAAAC,EAEJC,EAAAA,UAAU,IAAM,CACXD,GAAS,aAAaA,CAAO,EAChCA,EAAU,WAAW,IAAM,CAAEF,EAAU,EAAK,GAAM,GAAI,CAAA,EACrD,CAACD,CAAM,CAAC,EAEL,MAAAK,EAAY,CAAC,GAAGV,EAAY,OAAAK,EAAQ,UAAAC,GAEnC,OAAAN,EAAM,SAAW,EACtBG,EAAA,cAAC,OAAI,UAAU,kBAAA,kBACZ,MAAI,CAAA,UAAU,SAAS,MAAO,CAAE,gBAAiBH,EAAM,UAAY,EACpEG,EAAA,cAAC,YACEA,EAAA,cAAAJ,EAAA,CAAU,GAAGW,CAAY,EAAAV,EAAM,QAAS,CAC3C,CACF,EACAA,EAAM,SAAS,IACfW,GAAAR,EAAA,cAAC,OAAI,IAAKQ,CAAA,kBACPZ,EAAU,CAAA,GAAGW,EAAW,KAAI,EAAA,EAAEC,CAAI,CACrC,CACD,CACH,EAEQC,EAAMZ,GAAWG,EAAA,cAAA,KAAA,KAAIA,EAAA,cAAAC,EAAA,CAAM,GAAGJ,CAAA,EAAQA,EAAM,QAAS,CAAO,EAC9Da,EAAMb,GAAUG,EAAA,cAAC,UAAIH,EAAM,SAAS,IAAI,CAACc,EAAGC,IAAQZ,EAAA,cAAAS,EAAA,CAAI,GAAGZ,EAAO,OAAQe,EAAG,IAAKA,CAAA,EAAID,CAAE,CAAM,CAAE,EAChGE,EAAMhB,GAAWG,EAAA,cAAA,KAAA,KAAIH,EAAM,QAAS,EAEpCiB,EAAY,CAAC,CAAE,MAAAC,EAAQ,KAAM,KAAAC,EAAM,SAAAC,EAAU,QAAAC,EAAU,KAAM,SAAAC,EAAW,GAAO,QAAAC,CAAA,IAAc,CAC3F,MAAAC,EAAO,CAAC,SAAU,cAAc,EAEpC,OAAArB,EAAA,cAACsB,EACC,KAAAtB,EAAA,cAAC,MAAI,CAAA,UAAWuB,EAAQ,KAAA,EACrBR,CACH,EACCf,EAAA,cAAAwB,EAAA,CAAc,SAAAL,EAAoB,QAAAC,CAAkB,CAAA,EACrDpB,EAAA,cAAC,QAAM,CAAA,UAAWuB,EAAQ,KAAA,EACvBvB,EAAA,cAAA,QAAA,KACEA,EAAA,cAAA,KAAA,KACEqB,EAAO,IAAUI,GAAAzB,EAAA,cAACa,EAAG,CAAA,IAAKY,GAAIA,CAAE,CAAM,CACzC,CACF,EACAzB,EAAA,cAAC,QACE,KAAAgB,EAAK,IAAI,CAACU,EAAGd,IAAQZ,EAAA,cAAAU,EAAA,CAAS,MAAAK,EAAO,OAAAM,EAAQ,KAAAL,EAAM,SAAAC,EAAU,QAAAC,EAAU,IAAKN,CAAA,EAAIc,CAAE,CAAM,CAC3F,CACF,CACF,CAEJ"}
{"version":3,"file":"Table-3b615453.js","sources":["../../src/docs/docs-components/CopyColourTable/Table.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport ImportSnippet from './ImportSnippet';\nimport { Unstyled } from '@storybook/blocks';\n// @ts-ignore\nimport classes from './styles.module.scss';\n\nconst Copyable = (props) => {\n const handleClick = async(props) => {\n const copyText = props.wrap ? `var(${props.children})` : props.children;\n await navigator.clipboard.writeText(copyText);\n props.setCopied(true);\n }\n\n return (\n <button className=\"copy-btn\" onClick={() => handleClick(props)}>\n <span className=\"material-symbols-outlined\">content_copy</span>{props.children}\n {props.copied && <div className=\"copy-tag\">Copied</div>}\n </button>\n );\n}\n\nconst Cell = (props) => {\n const [copied, setCopied] = useState(false);\n\n let timeout;\n\n useEffect(() => {\n if(timeout) clearTimeout(timeout);\n timeout = setTimeout(() => { setCopied(false); }, 1000);\n }, [copied]);\n\n const copyProps = {...props, ...{ copied, setCopied } };\n\n return props.column === 0 ?\n <div className=\"swatch-container\">\n <div className=\"swatch\" style={{ backgroundColor: props.children }}></div>\n <span>\n <Copyable {...copyProps}>{props.children}</Copyable>\n </span>\n </div>\n : props.children.map(css => (\n <div key={css}>\n <Copyable {...copyProps} wrap>{css}</Copyable>\n </div>\n ));\n}\n\n const TD = (props) => <td><Cell {...props}>{props.children}</Cell></td>\nconst TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i} key={i}>{c}</TD>))}</tr>\nconst TH = (props) => <th>{props.children}</th>;\n\nconst CopyTable = ({ title = null, body, copyable, mdnLink = null, included = false, partial }) => {\n const header=['Colour', 'CSS variable'];\n return (\n <Unstyled>\n <div className={classes.title}>\n {title}\n </div>\n <ImportSnippet included={included} partial={partial} />\n <table className={classes.table}>\n <thead>\n <tr>\n {header.map(h => (<TH key={h}>{h}</TH>))}\n </tr>\n </thead>\n <tbody>\n {body.map((b, i) => (<TR {...{ title, header, body, copyable, mdnLink}} key={i}>{b}</TR>))}\n </tbody>\n </table>\n </Unstyled>\n )\n};\n\nexport default CopyTable;"],"names":["Copyable","props","handleClick","copyText","React","Cell","copied","setCopied","useState","timeout","useEffect","copyProps","css","TD","TR","c","i","TH","CopyTable","title","body","copyable","mdnLink","included","partial","header","Unstyled","classes","ImportSnippet","h","b"],"mappings":"uJAOA,MAAMA,EAAYC,GAAU,CACpB,MAAAC,EAAc,MAAMD,GAAU,CAClC,MAAME,EAAWF,EAAM,KAAO,OAAOA,EAAM,QAAQ,IAAMA,EAAM,SACzD,MAAA,UAAU,UAAU,UAAUE,CAAQ,EAC5CF,EAAM,UAAU,EAAI,CAAA,EAIpB,OAAAG,EAAA,cAAC,SAAO,CAAA,UAAU,WAAW,QAAS,IAAMF,EAAYD,CAAK,CAC3D,EAAAG,EAAA,cAAC,OAAK,CAAA,UAAU,6BAA4B,cAAY,EAAQH,EAAM,SACrEA,EAAM,wBAAW,MAAI,CAAA,UAAU,UAAW,EAAA,QAAM,CACnD,CAEJ,EAEMI,EAAQJ,GAAU,CACtB,KAAM,CAACK,EAAQC,CAAS,EAAIC,WAAS,EAAK,EAEtC,IAAAC,EAEJC,EAAAA,UAAU,IAAM,CACXD,GAAS,aAAaA,CAAO,EAChCA,EAAU,WAAW,IAAM,CAAEF,EAAU,EAAK,GAAM,GAAI,CAAA,EACrD,CAACD,CAAM,CAAC,EAEL,MAAAK,EAAY,CAAC,GAAGV,EAAY,OAAAK,EAAQ,UAAAC,GAEnC,OAAAN,EAAM,SAAW,EACtBG,EAAA,cAAC,OAAI,UAAU,kBAAA,kBACZ,MAAI,CAAA,UAAU,SAAS,MAAO,CAAE,gBAAiBH,EAAM,UAAY,EACpEG,EAAA,cAAC,YACEA,EAAA,cAAAJ,EAAA,CAAU,GAAGW,CAAY,EAAAV,EAAM,QAAS,CAC3C,CACF,EACAA,EAAM,SAAS,IACfW,GAAAR,EAAA,cAAC,OAAI,IAAKQ,CAAA,kBACPZ,EAAU,CAAA,GAAGW,EAAW,KAAI,EAAA,EAAEC,CAAI,CACrC,CACD,CACH,EAEQC,EAAMZ,GAAWG,EAAA,cAAA,KAAA,KAAIA,EAAA,cAAAC,EAAA,CAAM,GAAGJ,CAAA,EAAQA,EAAM,QAAS,CAAO,EAC9Da,EAAMb,GAAUG,EAAA,cAAC,UAAIH,EAAM,SAAS,IAAI,CAACc,EAAGC,IAAQZ,EAAA,cAAAS,EAAA,CAAI,GAAGZ,EAAO,OAAQe,EAAG,IAAKA,CAAA,EAAID,CAAE,CAAM,CAAE,EAChGE,EAAMhB,GAAWG,EAAA,cAAA,KAAA,KAAIH,EAAM,QAAS,EAEpCiB,EAAY,CAAC,CAAE,MAAAC,EAAQ,KAAM,KAAAC,EAAM,SAAAC,EAAU,QAAAC,EAAU,KAAM,SAAAC,EAAW,GAAO,QAAAC,CAAA,IAAc,CAC3F,MAAAC,EAAO,CAAC,SAAU,cAAc,EAEpC,OAAArB,EAAA,cAACsB,EACC,KAAAtB,EAAA,cAAC,MAAI,CAAA,UAAWuB,EAAQ,KAAA,EACrBR,CACH,EACCf,EAAA,cAAAwB,EAAA,CAAc,SAAAL,EAAoB,QAAAC,CAAkB,CAAA,EACrDpB,EAAA,cAAC,QAAM,CAAA,UAAWuB,EAAQ,KAAA,EACvBvB,EAAA,cAAA,QAAA,KACEA,EAAA,cAAA,KAAA,KACEqB,EAAO,IAAUI,GAAAzB,EAAA,cAACa,EAAG,CAAA,IAAKY,GAAIA,CAAE,CAAM,CACzC,CACF,EACAzB,EAAA,cAAC,QACE,KAAAgB,EAAK,IAAI,CAACU,EAAGd,IAAQZ,EAAA,cAAAU,EAAA,CAAS,MAAAK,EAAO,OAAAM,EAAQ,KAAAL,EAAM,SAAAC,EAAU,QAAAC,EAAU,IAAKN,CAAA,EAAIc,CAAE,CAAM,CAC3F,CACF,CACF,CAEJ"}

4
docs/assets/Table-88372ab6.js → docs/assets/Table-a74f0cdc.js
View file

@ -1,3 +1,3 @@
import{R as e,r as o}from"./index-c599f7c3.js";import{U as u}from"./chunk-S4VUQJ4A-be5654c7.js";const E="_title_13v0c_1",d="_table_13v0c_31",s={title:E,table:d},y=t=>t.children.split(`
import{R as e,r as o}from"./index-b33a5d42.js";import{U as u}from"./chunk-S4VUQJ4A-23edc7ed.js";const E="_title_13v0c_1",d="_table_13v0c_31",s={title:E,table:d},y=t=>t.children.split(`
`).map(a=>e.createElement("div",{key:a},a)),b=t=>{const a=async l=>{const n=typeof l.copyable[l.column]=="function"?l.copyable[l.column](`${l.children}`):`${l.children}`;await navigator.clipboard.writeText(n),m(!0)},[c,m]=o.useState(!1);let r;return o.useEffect(()=>{r&&clearTimeout(r),r=setTimeout(()=>{m(!1)},1e3)},[c]),t.copyable&&t.copyable[t.column]?e.createElement("button",{className:"copy-btn",onClick:()=>a(t)},e.createElement("span",{className:"material-symbols-outlined"},"content_copy"),t.children,c&&e.createElement("div",{className:"copy-tag"},"Copied")):e.createElement(y,null,t.children)},h=t=>e.createElement("td",null,e.createElement(b,{...t},t.children)),f=t=>e.createElement("tr",null,t.children.map((a,c)=>e.createElement(h,{...t,column:c,key:c},a))),C=t=>e.createElement("th",null,t.children),v=({title:t=null,note:a=null,header:c,body:m,copyable:r,mdnLink:l=null})=>e.createElement(u,null,e.createElement("div",{className:s.title},t,t&&l&&e.createElement("a",{href:`https://developer.mozilla.org/en-US/docs/Web/CSS/${l}`,target:"_blank"},e.createElement("span",{className:"material-symbols-outlined"},"link")),a&&e.createElement("p",null,a)),e.createElement("table",{className:s.table},e.createElement("thead",null,e.createElement("tr",null,c.map(n=>e.createElement(C,{key:n},n)))),e.createElement("tbody",null,m.map((n,i)=>e.createElement(f,{title:t,header:c,body:m,copyable:r,mdnLink:l,key:i},n)))));export{v as C};
//# sourceMappingURL=Table-88372ab6.js.map
//# sourceMappingURL=Table-a74f0cdc.js.map

2
docs/assets/Table-88372ab6.js.map → docs/assets/Table-a74f0cdc.js.map
View file

@ -1 +1 @@
{"version":3,"file":"Table-88372ab6.js","sources":["../../src/docs/docs-components/CopyTable/Table.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Unstyled } from '@storybook/blocks';\n// @ts-ignore\nimport classes from './styles.module.scss';\n\nconst MultiLine = (props) => props.children.split('\\n').map(t => (<div key={t}>{t}</div>))\n\nconst Copyable = (props) => {\n const handleClick = async(props) => {\n const copyText = typeof props.copyable[props.column] === 'function' ?\n props.copyable[props.column](`${props.children}`) : `${props.children}`;\n await navigator.clipboard.writeText(copyText);\n setCopied(true);\n }\n\n const [copied, setCopied] = useState(false);\n\n let timeout;\n\n useEffect(() => {\n if(timeout) clearTimeout(timeout);\n timeout = setTimeout(() => { setCopied(false); }, 1000);\n }, [copied]);\n\n return props.copyable && props.copyable[props.column] ?\n <button className=\"copy-btn\" onClick={() => handleClick(props)}>\n <span className=\"material-symbols-outlined\">content_copy</span>{props.children}\n {copied && <div className=\"copy-tag\">Copied</div>}\n </button> :\n <MultiLine>{props.children}</MultiLine>;\n}\n\n const TD = (props) => <td><Copyable {...props}>{props.children}</Copyable></td>\nconst TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i} key={i}>{c}</TD>))}</tr>\nconst TH = (props) => <th>{props.children}</th>;\n\nconst CopyTable = ({ title = null, note = null, header, body, copyable, mdnLink = null }) => {\n return (\n <Unstyled>\n <div className={classes.title}>\n {title}\n {(title && mdnLink) && (\n <a href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${mdnLink}`} target=\"_blank\">\n <span className=\"material-symbols-outlined\">link</span>\n </a>\n )}\n {(note) && (\n <p>{note}</p>\n )}\n </div>\n <table className={classes.table}>\n <thead>\n <tr>\n {header.map(h => (<TH key={h}>{h}</TH>))}\n </tr>\n </thead>\n <tbody>\n {body.map((b, i) => (<TR {...{ title, header, body, copyable, mdnLink}} key={i}>{b}</TR>))}\n </tbody>\n </table>\n </Unstyled>\n )\n};\n\nexport default CopyTable;"],"names":["MultiLine","props","React","t","Copyable","handleClick","copyText","setCopied","copied","useState","timeout","useEffect","TD","TR","c","i","TH","CopyTable","title","note","header","body","copyable","mdnLink","Unstyled","classes","h","b"],"mappings":"iKAMMA,EAAaC,GAAUA,EAAM,SAAS,MAAM;AAAA,CAAI,EAAE,OAAWC,EAAA,cAAA,MAAA,CAAI,IAAKC,CAAA,EAAIA,CAAE,CAAO,EAEnFC,EAAYH,GAAU,CACpB,MAAAI,EAAc,MAAMJ,GAAU,CAC5B,MAAAK,EAAW,OAAOL,EAAM,SAASA,EAAM,MAAM,GAAM,WACvDA,EAAM,SAASA,EAAM,MAAM,EAAE,GAAGA,EAAM,QAAQ,EAAE,EAAI,GAAGA,EAAM,QAAQ,GACjE,MAAA,UAAU,UAAU,UAAUK,CAAQ,EAC5CC,EAAU,EAAI,CAAA,EAGV,CAACC,EAAQD,CAAS,EAAIE,WAAS,EAAK,EAEtC,IAAAC,EAEJC,OAAAA,EAAAA,UAAU,IAAM,CACXD,GAAS,aAAaA,CAAO,EAChCA,EAAU,WAAW,IAAM,CAAEH,EAAU,EAAK,GAAM,GAAI,CAAA,EACrD,CAACC,CAAM,CAAC,EAEJP,EAAM,UAAYA,EAAM,SAASA,EAAM,MAAM,EACnDC,EAAA,cAAA,SAAA,CAAO,UAAU,WAAW,QAAS,IAAMG,EAAYJ,CAAK,GAC3DC,EAAA,cAAC,OAAK,CAAA,UAAU,6BAA4B,cAAY,EAAQD,EAAM,SACrEO,GAAWN,EAAA,cAAA,MAAA,CAAI,UAAU,YAAW,QAAM,CAC7C,EACCA,EAAA,cAAAF,EAAA,KAAWC,EAAM,QAAS,CAC7B,EAEQW,EAAMX,GAAWC,EAAA,cAAA,KAAA,KAAIA,EAAA,cAAAE,EAAA,CAAU,GAAGH,CAAA,EAAQA,EAAM,QAAS,CAAW,EACtEY,EAAMZ,GAAUC,EAAA,cAAC,UAAID,EAAM,SAAS,IAAI,CAACa,EAAGC,IAAQb,EAAA,cAAAU,EAAA,CAAI,GAAGX,EAAO,OAAQc,EAAG,IAAKA,CAAA,EAAID,CAAE,CAAM,CAAE,EAChGE,EAAMf,GAAWC,EAAA,cAAA,KAAA,KAAID,EAAM,QAAS,EAEpCgB,EAAY,CAAC,CAAE,MAAAC,EAAQ,KAAM,KAAAC,EAAO,KAAM,OAAAC,EAAQ,KAAAC,EAAM,SAAAC,EAAU,QAAAC,EAAU,IAAA,IAE7ErB,EAAA,cAAAsB,EAAA,KACEtB,EAAA,cAAA,MAAA,CAAI,UAAWuB,EAAQ,KAAA,EACrBP,EACCA,GAASK,GACRrB,EAAA,cAAA,IAAA,CAAE,KAAM,oDAAoDqB,CAAO,GAAI,OAAO,QAC7E,EAAArB,EAAA,cAAC,QAAK,UAAU,2BAAA,EAA4B,MAAI,CAClD,EAEAiB,GACAjB,EAAA,cAAC,IAAG,KAAAiB,CAAK,CAEb,EACAjB,EAAA,cAAC,QAAM,CAAA,UAAWuB,EAAQ,KACxB,EAAAvB,EAAA,cAAC,QACC,KAAAA,EAAA,cAAC,UACEkB,EAAO,IAAUM,GAAAxB,EAAA,cAACc,GAAG,IAAKU,CAAA,EAAIA,CAAE,CAAM,CACzC,CACF,EACCxB,EAAA,cAAA,QAAA,KACEmB,EAAK,IAAI,CAACM,EAAG,oBAAQd,EAAI,CAAK,MAAAK,EAAO,OAAAE,EAAQ,KAAAC,EAAM,SAAAC,EAAU,QAAAC,EAAU,IAAK,CAAI,EAAAI,CAAE,CAAM,CAC3F,CACF,CACF"}
{"version":3,"file":"Table-a74f0cdc.js","sources":["../../src/docs/docs-components/CopyTable/Table.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Unstyled } from '@storybook/blocks';\n// @ts-ignore\nimport classes from './styles.module.scss';\n\nconst MultiLine = (props) => props.children.split('\\n').map(t => (<div key={t}>{t}</div>))\n\nconst Copyable = (props) => {\n const handleClick = async(props) => {\n const copyText = typeof props.copyable[props.column] === 'function' ?\n props.copyable[props.column](`${props.children}`) : `${props.children}`;\n await navigator.clipboard.writeText(copyText);\n setCopied(true);\n }\n\n const [copied, setCopied] = useState(false);\n\n let timeout;\n\n useEffect(() => {\n if(timeout) clearTimeout(timeout);\n timeout = setTimeout(() => { setCopied(false); }, 1000);\n }, [copied]);\n\n return props.copyable && props.copyable[props.column] ?\n <button className=\"copy-btn\" onClick={() => handleClick(props)}>\n <span className=\"material-symbols-outlined\">content_copy</span>{props.children}\n {copied && <div className=\"copy-tag\">Copied</div>}\n </button> :\n <MultiLine>{props.children}</MultiLine>;\n}\n\n const TD = (props) => <td><Copyable {...props}>{props.children}</Copyable></td>\nconst TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i} key={i}>{c}</TD>))}</tr>\nconst TH = (props) => <th>{props.children}</th>;\n\nconst CopyTable = ({ title = null, note = null, header, body, copyable, mdnLink = null }) => {\n return (\n <Unstyled>\n <div className={classes.title}>\n {title}\n {(title && mdnLink) && (\n <a href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${mdnLink}`} target=\"_blank\">\n <span className=\"material-symbols-outlined\">link</span>\n </a>\n )}\n {(note) && (\n <p>{note}</p>\n )}\n </div>\n <table className={classes.table}>\n <thead>\n <tr>\n {header.map(h => (<TH key={h}>{h}</TH>))}\n </tr>\n </thead>\n <tbody>\n {body.map((b, i) => (<TR {...{ title, header, body, copyable, mdnLink}} key={i}>{b}</TR>))}\n </tbody>\n </table>\n </Unstyled>\n )\n};\n\nexport default CopyTable;"],"names":["MultiLine","props","React","t","Copyable","handleClick","copyText","setCopied","copied","useState","timeout","useEffect","TD","TR","c","i","TH","CopyTable","title","note","header","body","copyable","mdnLink","Unstyled","classes","h","b"],"mappings":"iKAMMA,EAAaC,GAAUA,EAAM,SAAS,MAAM;AAAA,CAAI,EAAE,OAAWC,EAAA,cAAA,MAAA,CAAI,IAAKC,CAAA,EAAIA,CAAE,CAAO,EAEnFC,EAAYH,GAAU,CACpB,MAAAI,EAAc,MAAMJ,GAAU,CAC5B,MAAAK,EAAW,OAAOL,EAAM,SAASA,EAAM,MAAM,GAAM,WACvDA,EAAM,SAASA,EAAM,MAAM,EAAE,GAAGA,EAAM,QAAQ,EAAE,EAAI,GAAGA,EAAM,QAAQ,GACjE,MAAA,UAAU,UAAU,UAAUK,CAAQ,EAC5CC,EAAU,EAAI,CAAA,EAGV,CAACC,EAAQD,CAAS,EAAIE,WAAS,EAAK,EAEtC,IAAAC,EAEJC,OAAAA,EAAAA,UAAU,IAAM,CACXD,GAAS,aAAaA,CAAO,EAChCA,EAAU,WAAW,IAAM,CAAEH,EAAU,EAAK,GAAM,GAAI,CAAA,EACrD,CAACC,CAAM,CAAC,EAEJP,EAAM,UAAYA,EAAM,SAASA,EAAM,MAAM,EACnDC,EAAA,cAAA,SAAA,CAAO,UAAU,WAAW,QAAS,IAAMG,EAAYJ,CAAK,GAC3DC,EAAA,cAAC,OAAK,CAAA,UAAU,6BAA4B,cAAY,EAAQD,EAAM,SACrEO,GAAWN,EAAA,cAAA,MAAA,CAAI,UAAU,YAAW,QAAM,CAC7C,EACCA,EAAA,cAAAF,EAAA,KAAWC,EAAM,QAAS,CAC7B,EAEQW,EAAMX,GAAWC,EAAA,cAAA,KAAA,KAAIA,EAAA,cAAAE,EAAA,CAAU,GAAGH,CAAA,EAAQA,EAAM,QAAS,CAAW,EACtEY,EAAMZ,GAAUC,EAAA,cAAC,UAAID,EAAM,SAAS,IAAI,CAACa,EAAGC,IAAQb,EAAA,cAAAU,EAAA,CAAI,GAAGX,EAAO,OAAQc,EAAG,IAAKA,CAAA,EAAID,CAAE,CAAM,CAAE,EAChGE,EAAMf,GAAWC,EAAA,cAAA,KAAA,KAAID,EAAM,QAAS,EAEpCgB,EAAY,CAAC,CAAE,MAAAC,EAAQ,KAAM,KAAAC,EAAO,KAAM,OAAAC,EAAQ,KAAAC,EAAM,SAAAC,EAAU,QAAAC,EAAU,IAAA,IAE7ErB,EAAA,cAAAsB,EAAA,KACEtB,EAAA,cAAA,MAAA,CAAI,UAAWuB,EAAQ,KAAA,EACrBP,EACCA,GAASK,GACRrB,EAAA,cAAA,IAAA,CAAE,KAAM,oDAAoDqB,CAAO,GAAI,OAAO,QAC7E,EAAArB,EAAA,cAAC,QAAK,UAAU,2BAAA,EAA4B,MAAI,CAClD,EAEAiB,GACAjB,EAAA,cAAC,IAAG,KAAAiB,CAAK,CAEb,EACAjB,EAAA,cAAC,QAAM,CAAA,UAAWuB,EAAQ,KACxB,EAAAvB,EAAA,cAAC,QACC,KAAAA,EAAA,cAAC,UACEkB,EAAO,IAAUM,GAAAxB,EAAA,cAACc,GAAG,IAAKU,CAAA,EAAIA,CAAE,CAAM,CACzC,CACF,EACCxB,EAAA,cAAA,QAAA,KACEmB,EAAK,IAAI,CAACM,EAAG,oBAAQd,EAAI,CAAK,MAAAK,EAAO,OAAAE,EAAQ,KAAAC,EAAM,SAAAC,EAAU,QAAAC,EAAU,IAAK,CAAI,EAAAI,CAAE,CAAM,CAC3F,CACF,CACF"}

4
docs/assets/Table.stories-2343af27.js → docs/assets/Table.stories-c223d701.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/Table.stories-2343af27.js.map → docs/assets/Table.stories-c223d701.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/Theme.stories-2cc4aa28.js → docs/assets/Theme.stories-fd991b5e.js
View file

@ -1,4 +1,4 @@
import{S as X,i as Z,s as ee,g as u,m as p,t as h,h as $,j as d,y as v,d as g,f as b,l as k,b as w,n as I,C,e as F}from"./index-99a30af8.js";import{g as te,a as ne}from"./spread-8a54911c.js";import{p as ae,M as le,T as me,S as P}from"./collect-stories-1e0d20c7.js";import{A as ie}from"./Article-cb12a248.js";import{H as se}from"./Headline-01b35f1f.js";import{B as W}from"./BodyText-beab66e3.js";import{G as ce}from"./GraphicBlock-c40f9bd5.js";import{S as fe}from"./SiteHeader-5eb355f9.js";import{T,t as x}from"./Theme-03c0bd40.js";import{b as A,w as ue}from"./withParams-47e2ab71.js";import"./Block-4e35b26d.js";import"./Byline-df82a671.js";import"./each-e59479a4.js";import"./_commonjsHelpers-de833af9.js";import"./journalize-07958dc6.js";import"./Markdown-2a6fc77f.js";import"./PaddingReset-79b11107.js";import"./ReutersLogo-b424df32.js";import"./index-2224dbf5.js";import"./time-8562ae1b.js";import"./advancedFormat-ebff0a45.js";import"./dayjs.min-1b995edc.js";import"./light-fcb352a5.js";const pe=`The \`Theme\` component wraps your page content and uses [CSS variables](../?path=/docs/scss-css-variables--page) to set major colour and typography styles for your page. All of the components in this library will use those CSS variables for styling by default.
import{S as X,i as Z,s as ee,g as u,m as p,t as h,h as $,j as d,y as v,d as g,f as b,l as k,b as w,n as I,C,e as F}from"./index-99a30af8.js";import{g as te,a as ne}from"./spread-8a54911c.js";import{p as ae,M as le,T as me,S as P}from"./collect-stories-1e0d20c7.js";import{A as ie}from"./Article-cb12a248.js";import{H as se}from"./Headline-3eded5d7.js";import{B as W}from"./BodyText-b6660f02.js";import{G as ce}from"./GraphicBlock-caaf4041.js";import{S as fe}from"./SiteHeader-5eb355f9.js";import{T,t as x}from"./Theme-03c0bd40.js";import{b as A,w as ue}from"./withParams-47e2ab71.js";import"./Block-a09d61d3.js";import"./Byline-1358d74f.js";import"./each-e59479a4.js";import"./_commonjsHelpers-de833af9.js";import"./journalize-07958dc6.js";import"./Markdown-2a6fc77f.js";import"./PaddingReset-79b11107.js";import"./ReutersLogo-b424df32.js";import"./index-2224dbf5.js";import"./time-8562ae1b.js";import"./advancedFormat-ebff0a45.js";import"./dayjs.min-1b995edc.js";import"./light-fcb352a5.js";const pe=`The \`Theme\` component wraps your page content and uses [CSS variables](../?path=/docs/scss-css-variables--page) to set major colour and typography styles for your page. All of the components in this library will use those CSS variables for styling by default.
Use our [theme builder](../?path=/docs/theming-theme-builder--docs) to customise your page's theme.
@ -218,4 +218,4 @@ Shank strip steak turkey shoulder shankle leberkas pork chop, t-bone picanha buf
</Theme>
</div>
</Theme>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","customiseDocs","customiseFontDocs","patternDocs","inheritanceDocs","ThemedPage","SiteHeader","Theme","themes","Headline","withComponentDocs","withStoryDocs"]}),rt=D.meta,at=["Default","CustomTheme","CustomGoogleFont","BackgroundPatterns","Inheritance"],lt=D.stories.Default,mt=D.stories.CustomTheme,it=D.stories.CustomGoogleFont,ct=D.stories.BackgroundPatterns,ft=D.stories.Inheritance;export{ct as BackgroundPatterns,it as CustomGoogleFont,mt as CustomTheme,lt as Default,ft as Inheritance,at as __namedExportsOrder,rt as default};
//# sourceMappingURL=Theme.stories-2cc4aa28.js.map
//# sourceMappingURL=Theme.stories-fd991b5e.js.map

2
docs/assets/Theme.stories-2cc4aa28.js.map → docs/assets/Theme.stories-fd991b5e.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/Video-924f0c66.js → docs/assets/Video-4f78e265.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/Video-924f0c66.js.map → docs/assets/Video-4f78e265.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/Video.stories-e36ca3c7.js → docs/assets/Video.stories-39bc0f5b.js
View file

@ -1,4 +1,4 @@
import{S as U,i as E,s as K,C as v,g as h,y,m as c,d as g,t as u,h as m,f as w,j as f}from"./index-99a30af8.js";import{g as z,a as F}from"./spread-8a54911c.js";import{p as J,M as N,T as Q,S as b}from"./collect-stories-1e0d20c7.js";import{V as k}from"./Video-924f0c66.js";import{w as X,b as P}from"./withParams-47e2ab71.js";import"./fa-89776db2.js";import"./index.es-ff8a88a9.js";import"./GraphicBlock-c40f9bd5.js";import"./Block-4e35b26d.js";import"./PaddingReset-79b11107.js";import"./Markdown-2a6fc77f.js";const Y=`General-purpose video component. Can play on load or when the video comes into view and has play/pause controls. Supports videos with or without audio.
import{S as U,i as E,s as K,C as v,g as h,y,m as c,d as g,t as u,h as m,f as w,j as f}from"./index-99a30af8.js";import{g as z,a as F}from"./spread-8a54911c.js";import{p as J,M as N,T as Q,S as b}from"./collect-stories-1e0d20c7.js";import{V as k}from"./Video-4f78e265.js";import{w as X,b as P}from"./withParams-47e2ab71.js";import"./fa-89776db2.js";import"./index.es-ff8a88a9.js";import"./GraphicBlock-caaf4041.js";import"./Block-a09d61d3.js";import"./PaddingReset-79b11107.js";import"./Markdown-2a6fc77f.js";const Y=`General-purpose video component. Can play on load or when the video comes into view and has play/pause controls. Supports videos with or without audio.
\`\`\`svelte
<script>
@ -80,4 +80,4 @@ Here is an example with bottom right corner white opaque controls, with a replay
/>
\`\`\`
`,W=""+new URL("silent-video-5e925669.mp4",import.meta.url).href,oo=""+new URL("sound-video-50224f39.mp4",import.meta.url).href;function eo(V){let t,i;const s=[V[0]];let a={};for(let e=0;e<s.length;e+=1)a=v(a,s[e]);return t=new k({props:a}),{c(){h(t.$$.fragment)},m(e,l){c(t,e,l),i=!0},p(e,l){const r=l&1?z(s,[F(e[0])]):{};t.$set(r)},i(e){i||(u(t.$$.fragment,e),i=!0)},o(e){m(t.$$.fragment,e),i=!1},d(e){f(t,e)}}}function to(V){let t,i,s,a,e,l,r,C,p,D,d,_;const R=[{title:"Components/Video"},{component:k},X(Y)];let S={};for(let o=0;o<R.length;o+=1)S=v(S,R[o]);t=new N({props:S}),s=new Q({props:{$$slots:{default:[eo,({args:o})=>({0:o}),({args:o})=>o?1:0]},$$scope:{ctx:V}}}),e=new b({props:{name:"Default",args:{ariaDescription:"Compulsory description of your video for screen readers.",src:W,width:"wide",notes:"Optional caption for your video."}}});const L=[{name:"Playing and looping"},{args:{ariaDescription:"Compulsory description of your video for screen readers.",src:W,width:"normal",loopVideo:!0,notes:"World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",playVideoThreshold:.9}},P(Z)];let T={};for(let o=0;o<L.length;o+=1)T=v(T,L[o]);r=new b({props:T});const O=[{name:"Controls"},{args:{ariaDescription:"Compulsory description of your video for screen readers.",src:W,width:"normal",notes:"World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",playVideoThreshold:.9,controlsColour:"white",controlsOpacity:1,controlsPosition:"bottom right",separateReplayIcon:!0,loopVideo:!1,hoverToSeeControls:!0}},P(j)];let I={};for(let o=0;o<O.length;o+=1)I=v(I,O[o]);p=new b({props:I});const x=[{name:"Videos with sound"},{args:{ariaDescription:"Compulsory description of your video for screen readers.",src:oo,width:"normal",notes:"World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",playVideoThreshold:.9,showControls:!0,loopVideo:!1,muteVideo:!1,playVideoWhenInView:!0,allowSoundToAutoplay:!0}},P(j)];let A={};for(let o=0;o<x.length;o+=1)A=v(A,x[o]);return d=new b({props:A}),{c(){h(t.$$.fragment),i=y(),h(s.$$.fragment),a=y(),h(e.$$.fragment),l=y(),h(r.$$.fragment),C=y(),h(p.$$.fragment),D=y(),h(d.$$.fragment)},m(o,n){c(t,o,n),g(o,i,n),c(s,o,n),g(o,a,n),c(e,o,n),g(o,l,n),c(r,o,n),g(o,C,n),c(p,o,n),g(o,D,n),c(d,o,n),_=!0},p(o,[n]){const B={};t.$set(B);const M={};n&3&&(M.$$scope={dirty:n,ctx:o}),s.$set(M);const q={};r.$set(q);const G={};p.$set(G);const H={};d.$set(H)},i(o){_||(u(t.$$.fragment,o),u(s.$$.fragment,o),u(e.$$.fragment,o),u(r.$$.fragment,o),u(p.$$.fragment,o),u(d.$$.fragment,o),_=!0)},o(o){m(t.$$.fragment,o),m(s.$$.fragment,o),m(e.$$.fragment,o),m(r.$$.fragment,o),m(p.$$.fragment,o),m(d.$$.fragment,o),_=!1},d(o){o&&(w(i),w(a),w(l),w(C),w(D)),f(t,o),f(s,o),f(e,o),f(r,o),f(p,o),f(d,o)}}}class no extends U{constructor(t){super(),E(this,t,null,to,K,{})}}const $=J(no,{meta:{title:"Components/Video"},stories:{"tpl:default":{name:"default",template:!0,source:"<Video {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1},PlayingAndLooping:{name:"Playing and looping",template:!1,source:"",hasArgs:!1},Controls:{name:"Controls",template:!1,source:"",hasArgs:!1},VideosWithSound:{name:"Videos with sound",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","playAndLoopDocs","controlsDocs","SilentVideo","SoundVideo","Video","withComponentDocs","withStoryDocs"]}),yo=$.meta,go=["Default","PlayingAndLooping","Controls","VideosWithSound"],wo=$.stories.Default,vo=$.stories.PlayingAndLooping,$o=$.stories.Controls,Vo=$.stories.VideosWithSound;export{$o as Controls,wo as Default,vo as PlayingAndLooping,Vo as VideosWithSound,go as __namedExportsOrder,yo as default};
//# sourceMappingURL=Video.stories-e36ca3c7.js.map
//# sourceMappingURL=Video.stories-39bc0f5b.js.map

2
docs/assets/Video.stories-e36ca3c7.js.map → docs/assets/Video.stories-39bc0f5b.js.map
View file

File diff suppressed because one or more lines are too long

2
docs/assets/WithTooltip-J57HCPYA-073fcba0.js Normal file
View file

@ -0,0 +1,2 @@
import{W as m,W,a as T}from"./index-b33a5d42.js";import"./iframe-b8e40deb.js";import"../sb-preview/runtime.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";export{m as WithToolTipState,W as WithTooltip,T as WithTooltipPure};
//# sourceMappingURL=WithTooltip-J57HCPYA-073fcba0.js.map

1
docs/assets/WithTooltip-J57HCPYA-073fcba0.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"WithTooltip-J57HCPYA-073fcba0.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

2
docs/assets/WithTooltip-J57HCPYA-8f771166.js
View file

@ -1,2 +0,0 @@
import{W as m,W,a as T}from"./index-c599f7c3.js";import"./iframe-650c55fc.js";import"../sb-preview/runtime.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";export{m as WithToolTipState,W as WithTooltip,T as WithTooltipPure};
//# sourceMappingURL=WithTooltip-J57HCPYA-8f771166.js.map

1
docs/assets/WithTooltip-J57HCPYA-8f771166.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"WithTooltip-J57HCPYA-8f771166.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

4
docs/assets/_main.stories-aecee87d.js → docs/assets/_main.stories-39b1bf26.js
View file

@ -1,4 +1,4 @@
import{M as u}from"./chunk-S4VUQJ4A-be5654c7.js";import{p as a,j as r}from"./jsx-runtime-29e38a28.js";import{C as s}from"./Table-88372ab6.js";import{c as e}from"./parseCss-bd45c910.js";import{u as c}from"./index-8fa731e2.js";import"./iframe-650c55fc.js";import"../sb-preview/runtime.js";import"./index-c599f7c3.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";import"./index-9c67a61a.js";import"./toString-25ea340b.js";import"./isSymbol-50749e90.js";const p=`.cursor-auto {
import{M as u}from"./chunk-S4VUQJ4A-23edc7ed.js";import{p as a,j as r}from"./jsx-runtime-a53139db.js";import{C as s}from"./Table-a74f0cdc.js";import{c as e}from"./parseCss-75dd8ff7.js";import{u as c}from"./index-036d6926.js";import"./iframe-b8e40deb.js";import"../sb-preview/runtime.js";import"./index-b33a5d42.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";import"./index-eb011f5d.js";import"./toString-25ea340b.js";import"./isSymbol-50749e90.js";const p=`.cursor-auto {
cursor: auto;
}
.cursor-default {
@ -91,4 +91,4 @@ import{M as u}from"./chunk-S4VUQJ4A-be5654c7.js";import{p as a,j as r}from"./jsx
`,r.jsx(n.h1,{id:"interactivity-tokens",children:"Interactivity tokens"}),`
`,r.jsx(s,{title:"Cursor",mdnLink:"cursor",header:["Class","Properties"],body:e(p),copyable:[!0,!1]}),`
`,r.jsx(s,{title:"Pointer events",mdnLink:"pointer-events",header:["Class","Properties"],body:e(m),copyable:[!0,!1]})]})}function l(o={}){const{wrapper:n}=Object.assign({},c(),o.components);return n?r.jsx(n,{...o,children:r.jsx(i,{...o})}):i(o)}const g=()=>{throw new Error("Docs-only story")};g.parameters={docsOnly:!0};const t={title:"Styles/Tokens/Interactivity",parameters:{...a},tags:["stories-mdx"],includeStories:["__page"]};t.parameters=t.parameters||{};t.parameters.docs={...t.parameters.docs||{},page:l};const D=["__page"];export{D as __namedExportsOrder,g as __page,t as default};
//# sourceMappingURL=_main.stories-aecee87d.js.map
//# sourceMappingURL=_main.stories-39b1bf26.js.map

2
docs/assets/_main.stories-aecee87d.js.map → docs/assets/_main.stories-39b1bf26.js.map
View file

@ -1 +1 @@
{"version":3,"file":"_main.stories-aecee87d.js","sources":["../../src/scss/tokens/interactivity/_cursor.scss?raw","../../src/scss/tokens/interactivity/_pointer-events.scss?raw","../../src/docs/styles/tokens/interactivity/_main.stories.mdx"],"sourcesContent":["export default \".cursor-auto {\\n cursor: auto;\\n}\\n.cursor-default {\\n cursor: default;\\n}\\n.cursor-pointer {\\n cursor: pointer;\\n}\\n.cursor-crosshair {\\n cursor: crosshair;\\n}\\n.cursor-text {\\n cursor: text;\\n}\\n.cursor-move {\\n cursor: move;\\n}\\n.cursor-grab {\\n cursor: grab;\\n}\\n.cursor-grabbing {\\n cursor: grabbing;\\n}\\n.cursor-col-resize {\\n cursor: col-resize;\\n}\\n.cursor-row-resize {\\n cursor: row-resize;\\n}\\n.cursor-zoom-in {\\n cursor: zoom-in;\\n}\\n.cursor-zoom-out {\\n cursor: zoom-out;\\n}\\n.\\\\!cursor-auto {\\n cursor: auto !important;\\n}\\n.\\\\!cursor-default {\\n cursor: default !important;\\n}\\n.\\\\!cursor-pointer {\\n cursor: pointer !important;\\n}\\n.\\\\!cursor-crosshair {\\n cursor: crosshair !important;\\n}\\n.\\\\!cursor-text {\\n cursor: text !important;\\n}\\n.\\\\!cursor-move {\\n cursor: move !important;\\n}\\n.\\\\!cursor-grab {\\n cursor: grab !important;\\n}\\n.\\\\!cursor-grabbing {\\n cursor: grabbing !important;\\n}\\n.\\\\!cursor-col-resize {\\n cursor: col-resize !important;\\n}\\n.\\\\!cursor-row-resize {\\n cursor: row-resize !important;\\n}\\n.\\\\!cursor-zoom-in {\\n cursor: zoom-in !important;\\n}\\n.\\\\!cursor-zoom-out {\\n cursor: zoom-out !important;\\n}\\n\"","export default \".pointer-events-none {\\n pointer-events: none;\\n}\\n.pointer-events-auto {\\n pointer-events: auto;\\n}\\n.\\\\!pointer-events-none {\\n pointer-events: none !important;\\n}\\n.\\\\!pointer-events-auto {\\n pointer-events: auto !important;\\n}\\n\"","import { Meta } from '@storybook/addon-docs';\nimport { parameters } from '$docs/utils/docsPage.js';\nimport CopyTable from '../../../docs-components/CopyTable/Table.jsx';\nimport { cssStringToTableArray } from '../../../utils/parseCss';\n\n{/* @ts-ignore */}\nimport cursor from '$lib/scss/tokens/interactivity/\\_cursor.scss?raw';\n\n{/* @ts-ignore */}\nimport pointerEvents from '$lib/scss/tokens/interactivity/\\_pointer-events.scss?raw';\n\n<Meta title=\"Styles/Tokens/Interactivity\" parameters={{ ...parameters }} />\n\n![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)\n\n# Interactivity tokens\n\n<CopyTable\n title=\"Cursor\"\n mdnLink=\"cursor\"\n header={['Class', 'Properties']}\n body={cssStringToTableArray(cursor)}\n copyable={[true, false]}\n/>\n\n<CopyTable\n title=\"Pointer events\"\n mdnLink=\"pointer-events\"\n header={['Class', 'Properties']}\n body={cssStringToTableArray(pointerEvents)}\n copyable={[true, false]}\n/>\n"],"names":["cursor","pointerEvents","_createMdxContent","props","_components","_provideComponents","_jsxs","_Fragment","_jsx","Meta","parameters","CopyTable","cssStringToTableArray","MDXContent","MDXLayout","__page","componentMeta","__namedExportsOrder"],"mappings":"ghBAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,ECAAC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,ECYf,SAASC,EAAkBC,EAAO,CAChC,MAAMC,EAAc,OAAO,OAAO,CAChC,EAAG,IACH,IAAK,MACL,GAAI,IACL,EAAEC,EAAoB,EAAEF,EAAM,UAAU,EACzC,OAAoBG,EAAAA,KAAMC,EAAAA,SAAW,CACnC,SAAU,CAAC;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAmBC,EAAI,IAACC,EAAM,CACzD,MAAO,8BACP,WAAY,CACV,GAAGC,CACJ,CACF,CAAA,EAAG;AAAA,EAAmBF,MAAKJ,EAAY,EAAG,CACzC,SAAuBI,EAAAA,IAAKJ,EAAY,IAAK,CAC3C,IAAK,uHACL,IAAK,EACb,CAAO,CACF,CAAA,EAAG;AAAA,EAAmBI,MAAKJ,EAAY,GAAI,CAC1C,GAAI,uBACJ,SAAU,sBAChB,CAAK,EAAG;AAAA,EAAmBI,EAAI,IAACG,EAAW,CACrC,MAAO,SACP,QAAS,SACT,OAAQ,CAAC,QAAS,YAAY,EAC9B,KAAMC,EAAsBZ,CAAM,EAClC,SAAU,CAAC,GAAM,EAAK,CAC5B,CAAK,EAAG;AAAA,EAAmBQ,EAAI,IAACG,EAAW,CACrC,MAAO,iBACP,QAAS,iBACT,OAAQ,CAAC,QAAS,YAAY,EAC9B,KAAMC,EAAsBX,CAAa,EACzC,SAAU,CAAC,GAAM,EAAK,CAC5B,CAAK,CAAC,CACN,CAAG,CACH,CACA,SAASY,EAAWV,EAAQ,GAAI,CAC9B,KAAM,CACJ,QAASW,CACb,EAAM,OAAO,OAAO,CAAE,EAAET,EAAkB,EAAIF,EAAM,UAAU,EAC5D,OAAOW,EAAyBN,EAAI,IAACM,EAAW,CAC9C,GAAGX,EACH,SAAuBK,EAAI,IAACN,EAAmB,CAC7C,GAAGC,CACT,CAAK,CACL,CAAG,EAAID,EAAkBC,CAAK,CAC9B,CAEY,MAACY,EAAS,IAAM,CAC1B,MAAM,IAAI,MAAM,iBAAiB,CACnC,EACAA,EAAO,WAAa,CAClB,SAAU,EACZ,EACK,MAACC,EAAgB,CACpB,MAAO,8BACP,WAAY,CACV,GAAGN,CACJ,EACD,KAAM,CAAC,aAAa,EACpB,eAAgB,CAAC,QAAQ,CAC3B,EACAM,EAAc,WAAaA,EAAc,YAAc,GACvDA,EAAc,WAAW,KAAO,CAC9B,GAAIA,EAAc,WAAW,MAAQ,GACrC,KAAMH,CACR,EAC4B,MAAAI,EAAA,CAAA,QAAA"}
{"version":3,"file":"_main.stories-39b1bf26.js","sources":["../../src/scss/tokens/interactivity/_cursor.scss?raw","../../src/scss/tokens/interactivity/_pointer-events.scss?raw","../../src/docs/styles/tokens/interactivity/_main.stories.mdx"],"sourcesContent":["export default \".cursor-auto {\\n cursor: auto;\\n}\\n.cursor-default {\\n cursor: default;\\n}\\n.cursor-pointer {\\n cursor: pointer;\\n}\\n.cursor-crosshair {\\n cursor: crosshair;\\n}\\n.cursor-text {\\n cursor: text;\\n}\\n.cursor-move {\\n cursor: move;\\n}\\n.cursor-grab {\\n cursor: grab;\\n}\\n.cursor-grabbing {\\n cursor: grabbing;\\n}\\n.cursor-col-resize {\\n cursor: col-resize;\\n}\\n.cursor-row-resize {\\n cursor: row-resize;\\n}\\n.cursor-zoom-in {\\n cursor: zoom-in;\\n}\\n.cursor-zoom-out {\\n cursor: zoom-out;\\n}\\n.\\\\!cursor-auto {\\n cursor: auto !important;\\n}\\n.\\\\!cursor-default {\\n cursor: default !important;\\n}\\n.\\\\!cursor-pointer {\\n cursor: pointer !important;\\n}\\n.\\\\!cursor-crosshair {\\n cursor: crosshair !important;\\n}\\n.\\\\!cursor-text {\\n cursor: text !important;\\n}\\n.\\\\!cursor-move {\\n cursor: move !important;\\n}\\n.\\\\!cursor-grab {\\n cursor: grab !important;\\n}\\n.\\\\!cursor-grabbing {\\n cursor: grabbing !important;\\n}\\n.\\\\!cursor-col-resize {\\n cursor: col-resize !important;\\n}\\n.\\\\!cursor-row-resize {\\n cursor: row-resize !important;\\n}\\n.\\\\!cursor-zoom-in {\\n cursor: zoom-in !important;\\n}\\n.\\\\!cursor-zoom-out {\\n cursor: zoom-out !important;\\n}\\n\"","export default \".pointer-events-none {\\n pointer-events: none;\\n}\\n.pointer-events-auto {\\n pointer-events: auto;\\n}\\n.\\\\!pointer-events-none {\\n pointer-events: none !important;\\n}\\n.\\\\!pointer-events-auto {\\n pointer-events: auto !important;\\n}\\n\"","import { Meta } from '@storybook/addon-docs';\nimport { parameters } from '$docs/utils/docsPage.js';\nimport CopyTable from '../../../docs-components/CopyTable/Table.jsx';\nimport { cssStringToTableArray } from '../../../utils/parseCss';\n\n{/* @ts-ignore */}\nimport cursor from '$lib/scss/tokens/interactivity/\\_cursor.scss?raw';\n\n{/* @ts-ignore */}\nimport pointerEvents from '$lib/scss/tokens/interactivity/\\_pointer-events.scss?raw';\n\n<Meta title=\"Styles/Tokens/Interactivity\" parameters={{ ...parameters }} />\n\n![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)\n\n# Interactivity tokens\n\n<CopyTable\n title=\"Cursor\"\n mdnLink=\"cursor\"\n header={['Class', 'Properties']}\n body={cssStringToTableArray(cursor)}\n copyable={[true, false]}\n/>\n\n<CopyTable\n title=\"Pointer events\"\n mdnLink=\"pointer-events\"\n header={['Class', 'Properties']}\n body={cssStringToTableArray(pointerEvents)}\n copyable={[true, false]}\n/>\n"],"names":["cursor","pointerEvents","_createMdxContent","props","_components","_provideComponents","_jsxs","_Fragment","_jsx","Meta","parameters","CopyTable","cssStringToTableArray","MDXContent","MDXLayout","__page","componentMeta","__namedExportsOrder"],"mappings":"ghBAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,ECAAC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,ECYf,SAASC,EAAkBC,EAAO,CAChC,MAAMC,EAAc,OAAO,OAAO,CAChC,EAAG,IACH,IAAK,MACL,GAAI,IACL,EAAEC,EAAoB,EAAEF,EAAM,UAAU,EACzC,OAAoBG,EAAAA,KAAMC,EAAAA,SAAW,CACnC,SAAU,CAAC;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAmBC,EAAI,IAACC,EAAM,CACzD,MAAO,8BACP,WAAY,CACV,GAAGC,CACJ,CACF,CAAA,EAAG;AAAA,EAAmBF,MAAKJ,EAAY,EAAG,CACzC,SAAuBI,EAAAA,IAAKJ,EAAY,IAAK,CAC3C,IAAK,uHACL,IAAK,EACb,CAAO,CACF,CAAA,EAAG;AAAA,EAAmBI,MAAKJ,EAAY,GAAI,CAC1C,GAAI,uBACJ,SAAU,sBAChB,CAAK,EAAG;AAAA,EAAmBI,EAAI,IAACG,EAAW,CACrC,MAAO,SACP,QAAS,SACT,OAAQ,CAAC,QAAS,YAAY,EAC9B,KAAMC,EAAsBZ,CAAM,EAClC,SAAU,CAAC,GAAM,EAAK,CAC5B,CAAK,EAAG;AAAA,EAAmBQ,EAAI,IAACG,EAAW,CACrC,MAAO,iBACP,QAAS,iBACT,OAAQ,CAAC,QAAS,YAAY,EAC9B,KAAMC,EAAsBX,CAAa,EACzC,SAAU,CAAC,GAAM,EAAK,CAC5B,CAAK,CAAC,CACN,CAAG,CACH,CACA,SAASY,EAAWV,EAAQ,GAAI,CAC9B,KAAM,CACJ,QAASW,CACb,EAAM,OAAO,OAAO,CAAE,EAAET,EAAkB,EAAIF,EAAM,UAAU,EAC5D,OAAOW,EAAyBN,EAAI,IAACM,EAAW,CAC9C,GAAGX,EACH,SAAuBK,EAAI,IAACN,EAAmB,CAC7C,GAAGC,CACT,CAAK,CACL,CAAG,EAAID,EAAkBC,CAAK,CAC9B,CAEY,MAACY,EAAS,IAAM,CAC1B,MAAM,IAAI,MAAM,iBAAiB,CACnC,EACAA,EAAO,WAAa,CAClB,SAAU,EACZ,EACK,MAACC,EAAgB,CACpB,MAAO,8BACP,WAAY,CACV,GAAGN,CACJ,EACD,KAAM,CAAC,aAAa,EACpB,eAAgB,CAAC,QAAQ,CAC3B,EACAM,EAAc,WAAaA,EAAc,YAAc,GACvDA,EAAc,WAAW,KAAO,CAC9B,GAAIA,EAAc,WAAW,MAAQ,GACrC,KAAMH,CACR,EAC4B,MAAAI,EAAA,CAAA,QAAA"}

4
docs/assets/arc-4bfc2b9c.js → docs/assets/arc-c8a9ebf2.js
View file

@ -1,2 +1,2 @@
import{w as ln,c as J}from"./path-53f90ab3.js";import{D as rn,E as N,F as D,G as an,H as y,I as on,J as z,K as _,L as un,M as t,N as sn,O as tn,P as fn}from"./intro.stories-16437a48.js";function cn(l){return l.innerRadius}function yn(l){return l.outerRadius}function gn(l){return l.startAngle}function mn(l){return l.endAngle}function pn(l){return l&&l.padAngle}function dn(l,h,O,E,v,A,K,r){var q=O-l,i=E-h,n=K-v,m=r-A,a=m*q-n*i;if(!(a*a<y))return a=(n*(h-A)-m*(l-v))/a,[l+a*q,h+a*i]}function W(l,h,O,E,v,A,K){var r=l-O,q=h-E,i=(K?A:-A)/z(r*r+q*q),n=i*q,m=-i*r,a=l+n,s=h+m,f=O+n,c=E+m,L=(a+f)/2,o=(s+c)/2,p=f-a,g=c-s,R=p*p+g*g,T=v-A,P=a*c-f*s,F=(g<0?-1:1)*z(fn(0,T*T*R-P*P)),G=(P*g-p*F)/R,H=(-P*p-g*F)/R,w=(P*g+p*F)/R,d=(-P*p+g*F)/R,x=G-L,e=H-o,u=w-L,M=d-o;return x*x+e*e>u*u+M*M&&(G=w,H=d),{cx:G,cy:H,x01:-n,y01:-m,x11:G*(v/T-1),y11:H*(v/T-1)}}function vn(){var l=cn,h=yn,O=J(0),E=null,v=gn,A=mn,K=pn,r=null,q=ln(i);function i(){var n,m,a=+l.apply(this,arguments),s=+h.apply(this,arguments),f=v.apply(this,arguments)-an,c=A.apply(this,arguments)-an,L=un(c-f),o=c>f;if(r||(r=n=q()),s<a&&(m=s,s=a,a=m),!(s>y))r.moveTo(0,0);else if(L>on-y)r.moveTo(s*N(f),s*D(f)),r.arc(0,0,s,f,c,!o),a>y&&(r.moveTo(a*N(c),a*D(c)),r.arc(0,0,a,c,f,o));else{var p=f,g=c,R=f,T=c,P=L,F=L,G=K.apply(this,arguments)/2,H=G>y&&(E?+E.apply(this,arguments):z(a*a+s*s)),w=_(un(s-a)/2,+O.apply(this,arguments)),d=w,x=w,e,u;if(H>y){var M=sn(H/a*D(G)),B=sn(H/s*D(G));(P-=M*2)>y?(M*=o?1:-1,R+=M,T-=M):(P=0,R=T=(f+c)/2),(F-=B*2)>y?(B*=o?1:-1,p+=B,g-=B):(F=0,p=g=(f+c)/2)}var S=s*N(p),j=s*D(p),C=a*N(T),Q=a*D(T);if(w>y){var U=s*N(g),V=s*D(g),X=a*N(R),Y=a*D(R),I;if(L<rn)if(I=dn(S,j,X,Y,U,V,C,Q)){var Z=S-I[0],$=j-I[1],k=U-I[0],b=V-I[1],nn=1/D(tn((Z*k+$*b)/(z(Z*Z+$*$)*z(k*k+b*b)))/2),en=z(I[0]*I[0]+I[1]*I[1]);d=_(w,(a-en)/(nn-1)),x=_(w,(s-en)/(nn+1))}else d=x=0}F>y?x>y?(e=W(X,Y,S,j,s,x,o),u=W(U,V,C,Q,s,x,o),r.moveTo(e.cx+e.x01,e.cy+e.y01),x<w?r.arc(e.cx,e.cy,x,t(e.y01,e.x01),t(u.y01,u.x01),!o):(r.arc(e.cx,e.cy,x,t(e.y01,e.x01),t(e.y11,e.x11),!o),r.arc(0,0,s,t(e.cy+e.y11,e.cx+e.x11),t(u.cy+u.y11,u.cx+u.x11),!o),r.arc(u.cx,u.cy,x,t(u.y11,u.x11),t(u.y01,u.x01),!o))):(r.moveTo(S,j),r.arc(0,0,s,p,g,!o)):r.moveTo(S,j),!(a>y)||!(P>y)?r.lineTo(C,Q):d>y?(e=W(C,Q,U,V,a,-d,o),u=W(S,j,X,Y,a,-d,o),r.lineTo(e.cx+e.x01,e.cy+e.y01),d<w?r.arc(e.cx,e.cy,d,t(e.y01,e.x01),t(u.y01,u.x01),!o):(r.arc(e.cx,e.cy,d,t(e.y01,e.x01),t(e.y11,e.x11),!o),r.arc(0,0,a,t(e.cy+e.y11,e.cx+e.x11),t(u.cy+u.y11,u.cx+u.x11),o),r.arc(u.cx,u.cy,d,t(u.y11,u.x11),t(u.y01,u.x01),!o))):r.arc(0,0,a,T,R,o)}if(r.closePath(),n)return r=null,n+""||null}return i.centroid=function(){var n=(+l.apply(this,arguments)+ +h.apply(this,arguments))/2,m=(+v.apply(this,arguments)+ +A.apply(this,arguments))/2-rn/2;return[N(m)*n,D(m)*n]},i.innerRadius=function(n){return arguments.length?(l=typeof n=="function"?n:J(+n),i):l},i.outerRadius=function(n){return arguments.length?(h=typeof n=="function"?n:J(+n),i):h},i.cornerRadius=function(n){return arguments.length?(O=typeof n=="function"?n:J(+n),i):O},i.padRadius=function(n){return arguments.length?(E=n==null?null:typeof n=="function"?n:J(+n),i):E},i.startAngle=function(n){return arguments.length?(v=typeof n=="function"?n:J(+n),i):v},i.endAngle=function(n){return arguments.length?(A=typeof n=="function"?n:J(+n),i):A},i.padAngle=function(n){return arguments.length?(K=typeof n=="function"?n:J(+n),i):K},i.context=function(n){return arguments.length?(r=n??null,i):r},i}export{vn as a};
//# sourceMappingURL=arc-4bfc2b9c.js.map
import{w as ln,c as J}from"./path-53f90ab3.js";import{D as rn,E as N,F as D,G as an,H as y,I as on,J as z,K as _,L as un,M as t,N as sn,O as tn,P as fn}from"./intro.stories-e2029020.js";function cn(l){return l.innerRadius}function yn(l){return l.outerRadius}function gn(l){return l.startAngle}function mn(l){return l.endAngle}function pn(l){return l&&l.padAngle}function dn(l,h,O,E,v,A,K,r){var q=O-l,i=E-h,n=K-v,m=r-A,a=m*q-n*i;if(!(a*a<y))return a=(n*(h-A)-m*(l-v))/a,[l+a*q,h+a*i]}function W(l,h,O,E,v,A,K){var r=l-O,q=h-E,i=(K?A:-A)/z(r*r+q*q),n=i*q,m=-i*r,a=l+n,s=h+m,f=O+n,c=E+m,L=(a+f)/2,o=(s+c)/2,p=f-a,g=c-s,R=p*p+g*g,T=v-A,P=a*c-f*s,F=(g<0?-1:1)*z(fn(0,T*T*R-P*P)),G=(P*g-p*F)/R,H=(-P*p-g*F)/R,w=(P*g+p*F)/R,d=(-P*p+g*F)/R,x=G-L,e=H-o,u=w-L,M=d-o;return x*x+e*e>u*u+M*M&&(G=w,H=d),{cx:G,cy:H,x01:-n,y01:-m,x11:G*(v/T-1),y11:H*(v/T-1)}}function vn(){var l=cn,h=yn,O=J(0),E=null,v=gn,A=mn,K=pn,r=null,q=ln(i);function i(){var n,m,a=+l.apply(this,arguments),s=+h.apply(this,arguments),f=v.apply(this,arguments)-an,c=A.apply(this,arguments)-an,L=un(c-f),o=c>f;if(r||(r=n=q()),s<a&&(m=s,s=a,a=m),!(s>y))r.moveTo(0,0);else if(L>on-y)r.moveTo(s*N(f),s*D(f)),r.arc(0,0,s,f,c,!o),a>y&&(r.moveTo(a*N(c),a*D(c)),r.arc(0,0,a,c,f,o));else{var p=f,g=c,R=f,T=c,P=L,F=L,G=K.apply(this,arguments)/2,H=G>y&&(E?+E.apply(this,arguments):z(a*a+s*s)),w=_(un(s-a)/2,+O.apply(this,arguments)),d=w,x=w,e,u;if(H>y){var M=sn(H/a*D(G)),B=sn(H/s*D(G));(P-=M*2)>y?(M*=o?1:-1,R+=M,T-=M):(P=0,R=T=(f+c)/2),(F-=B*2)>y?(B*=o?1:-1,p+=B,g-=B):(F=0,p=g=(f+c)/2)}var S=s*N(p),j=s*D(p),C=a*N(T),Q=a*D(T);if(w>y){var U=s*N(g),V=s*D(g),X=a*N(R),Y=a*D(R),I;if(L<rn)if(I=dn(S,j,X,Y,U,V,C,Q)){var Z=S-I[0],$=j-I[1],k=U-I[0],b=V-I[1],nn=1/D(tn((Z*k+$*b)/(z(Z*Z+$*$)*z(k*k+b*b)))/2),en=z(I[0]*I[0]+I[1]*I[1]);d=_(w,(a-en)/(nn-1)),x=_(w,(s-en)/(nn+1))}else d=x=0}F>y?x>y?(e=W(X,Y,S,j,s,x,o),u=W(U,V,C,Q,s,x,o),r.moveTo(e.cx+e.x01,e.cy+e.y01),x<w?r.arc(e.cx,e.cy,x,t(e.y01,e.x01),t(u.y01,u.x01),!o):(r.arc(e.cx,e.cy,x,t(e.y01,e.x01),t(e.y11,e.x11),!o),r.arc(0,0,s,t(e.cy+e.y11,e.cx+e.x11),t(u.cy+u.y11,u.cx+u.x11),!o),r.arc(u.cx,u.cy,x,t(u.y11,u.x11),t(u.y01,u.x01),!o))):(r.moveTo(S,j),r.arc(0,0,s,p,g,!o)):r.moveTo(S,j),!(a>y)||!(P>y)?r.lineTo(C,Q):d>y?(e=W(C,Q,U,V,a,-d,o),u=W(S,j,X,Y,a,-d,o),r.lineTo(e.cx+e.x01,e.cy+e.y01),d<w?r.arc(e.cx,e.cy,d,t(e.y01,e.x01),t(u.y01,u.x01),!o):(r.arc(e.cx,e.cy,d,t(e.y01,e.x01),t(e.y11,e.x11),!o),r.arc(0,0,a,t(e.cy+e.y11,e.cx+e.x11),t(u.cy+u.y11,u.cx+u.x11),o),r.arc(u.cx,u.cy,d,t(u.y11,u.x11),t(u.y01,u.x01),!o))):r.arc(0,0,a,T,R,o)}if(r.closePath(),n)return r=null,n+""||null}return i.centroid=function(){var n=(+l.apply(this,arguments)+ +h.apply(this,arguments))/2,m=(+v.apply(this,arguments)+ +A.apply(this,arguments))/2-rn/2;return[N(m)*n,D(m)*n]},i.innerRadius=function(n){return arguments.length?(l=typeof n=="function"?n:J(+n),i):l},i.outerRadius=function(n){return arguments.length?(h=typeof n=="function"?n:J(+n),i):h},i.cornerRadius=function(n){return arguments.length?(O=typeof n=="function"?n:J(+n),i):O},i.padRadius=function(n){return arguments.length?(E=n==null?null:typeof n=="function"?n:J(+n),i):E},i.startAngle=function(n){return arguments.length?(v=typeof n=="function"?n:J(+n),i):v},i.endAngle=function(n){return arguments.length?(A=typeof n=="function"?n:J(+n),i):A},i.padAngle=function(n){return arguments.length?(K=typeof n=="function"?n:J(+n),i):K},i.context=function(n){return arguments.length?(r=n??null,i):r},i}export{vn as a};
//# sourceMappingURL=arc-c8a9ebf2.js.map

2
docs/assets/arc-4bfc2b9c.js.map → docs/assets/arc-c8a9ebf2.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/basic-story.stories-56a65899.js → docs/assets/basic-story.stories-742b783f.js
View file

@ -1,4 +1,4 @@
import{M as i}from"./chunk-S4VUQJ4A-be5654c7.js";import{p as s,j as e}from"./jsx-runtime-29e38a28.js";import{u as a}from"./index-8fa731e2.js";import"./iframe-650c55fc.js";import"../sb-preview/runtime.js";import"./index-c599f7c3.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";function r(n){const o=Object.assign({p:"p",img:"img",h1:"h1",a:"a",code:"code",pre:"pre",em:"em",blockquote:"blockquote",strong:"strong"},a(),n.components);return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Contributing/Recipes: Basic story",parameters:{...s}}),`
import{M as i}from"./chunk-S4VUQJ4A-23edc7ed.js";import{p as s,j as e}from"./jsx-runtime-a53139db.js";import{u as a}from"./index-036d6926.js";import"./iframe-b8e40deb.js";import"../sb-preview/runtime.js";import"./index-b33a5d42.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";function r(n){const o=Object.assign({p:"p",img:"img",h1:"h1",a:"a",code:"code",pre:"pre",em:"em",blockquote:"blockquote",strong:"strong"},a(),n.components);return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Contributing/Recipes: Basic story",parameters:{...s}}),`
`,e.jsx(o.p,{children:e.jsx(o.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
`,e.jsx(o.h1,{id:"recipes-basic-story",children:"Recipes: Basic story"}),`
`,e.jsxs(o.p,{children:["To make a basic story, you'll need to setup a few things from storybook's Svelte ",e.jsx(o.a,{href:"https://storybook.js.org/docs/svelte/api/csf",target:"_blank",rel:"nofollow noopener noreferrer",children:"Component Story Framework (CSF)"})," library."]}),`
@ -57,4 +57,4 @@ import{M as i}from"./chunk-S4VUQJ4A-be5654c7.js";import{p as s,j as e}from"./jsx
`,e.jsxs(o.blockquote,{children:[`
`,e.jsxs(o.p,{children:[e.jsx(o.strong,{children:"Pro tip:"})," If you pass your component in directly, your users won't be able to control its props using Storybook's built-in ",e.jsx(o.a,{href:"https://storybook.js.org/docs/svelte/essentials/controls",target:"_blank",rel:"nofollow noopener noreferrer",children:"controls panel"}),", so it's always best to start with a default example using ",e.jsx(o.code,{children:"args"}),"."]}),`
`]})]})}function l(n={}){const{wrapper:o}=Object.assign({},a(),n.components);return o?e.jsx(o,{...n,children:e.jsx(r,{...n})}):r(n)}const c=()=>{throw new Error("Docs-only story")};c.parameters={docsOnly:!0};const t={title:"Contributing/Recipes: Basic story",parameters:{...s},tags:["stories-mdx"],includeStories:["__page"]};t.parameters=t.parameters||{};t.parameters.docs={...t.parameters.docs||{},page:l};const f=["__page"];export{f as __namedExportsOrder,c as __page,t as default};
//# sourceMappingURL=basic-story.stories-56a65899.js.map
//# sourceMappingURL=basic-story.stories-742b783f.js.map

2
docs/assets/basic-story.stories-56a65899.js.map → docs/assets/basic-story.stories-742b783f.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/c4Diagram-36d27044-c131ddee.js → docs/assets/c4Diagram-36d27044-2c351c97.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/c4Diagram-36d27044-c131ddee.js.map → docs/assets/c4Diagram-36d27044-2c351c97.js.map
View file

File diff suppressed because one or more lines are too long

10
docs/assets/chunk-S4VUQJ4A-be5654c7.js → docs/assets/chunk-S4VUQJ4A-23edc7ed.js
View file

File diff suppressed because one or more lines are too long

2
docs/assets/chunk-S4VUQJ4A-be5654c7.js.map → docs/assets/chunk-S4VUQJ4A-23edc7ed.js.map
View file

File diff suppressed because one or more lines are too long

4
docs/assets/classDiagram-5e843ae7-4c617434.js → docs/assets/classDiagram-5e843ae7-c8b6c91f.js
View file

@ -1,2 +1,2 @@
import{p as N,d as M,s as W}from"./styles-88ad4441-927ea658.js";import{c as S,l as i,h as u,i as H}from"./intro.stories-16437a48.js";import{G as X,l as Y}from"./layout-ff38eff2.js";import{s as l}from"./svgDraw-5d8a058e-97e83719.js";import"./dayjs.min-1b995edc.js";import"./chunk-S4VUQJ4A-be5654c7.js";import"./iframe-650c55fc.js";import"../sb-preview/runtime.js";import"./index-c599f7c3.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";import"./jsx-runtime-29e38a28.js";import"./_getTag-edecb89a.js";import"./isSymbol-50749e90.js";import"./isObject-32699ff3.js";import"./toString-25ea340b.js";import"./Table-88372ab6.js";import"./parseCss-bd45c910.js";import"./index-9c67a61a.js";import"./_color-087aa1f8.js";import"./index-8fa731e2.js";import"./_baseSet-db0c20a6.js";import"./now-bd49f550.js";import"./line-cd0cfa1d.js";import"./array-9f3ba611.js";import"./path-53f90ab3.js";let g={};const m=20,p=function(e){const d=Object.entries(g).find(k=>k[1].label===e);if(d)return d[0]},Z=function(e){e.append("defs").append("marker").attr("id","extensionStart").attr("class","extension").attr("refX",0).attr("refY",7).attr("markerWidth",190).attr("markerHeight",240).attr("orient","auto").append("path").attr("d","M 1,7 L18,13 V 1 Z"),e.append("defs").append("marker").attr("id","extensionEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 1,1 V 13 L18,7 Z"),e.append("defs").append("marker").attr("id","compositionStart").attr("class","extension").attr("refX",0).attr("refY",7).attr("markerWidth",190).attr("markerHeight",240).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L1,7 L9,1 Z"),e.append("defs").append("marker").attr("id","compositionEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L1,7 L9,1 Z"),e.append("defs").append("marker").attr("id","aggregationStart").attr("class","extension").attr("refX",0).attr("refY",7).attr("markerWidth",190).attr("markerHeight",240).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L1,7 L9,1 Z"),e.append("defs").append("marker").attr("id","aggregationEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L1,7 L9,1 Z"),e.append("defs").append("marker").attr("id","dependencyStart").attr("class","extension").attr("refX",0).attr("refY",7).attr("markerWidth",190).attr("markerHeight",240).attr("orient","auto").append("path").attr("d","M 5,7 L9,13 L1,7 L9,1 Z"),e.append("defs").append("marker").attr("id","dependencyEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L14,7 L9,1 Z")},D=function(e,d,k,a){const c=S().class;g={},i.info("Rendering diagram "+e);const L=S().securityLevel;let y;L==="sandbox"&&(y=u("#i"+d));const x=L==="sandbox"?u(y.nodes()[0].contentDocument.body):u("body"),o=x.select(`[id='${d}']`);Z(o);const r=new X({multigraph:!0});r.setGraph({isMultiGraph:!0}),r.setDefaultEdgeLabel(function(){return{}});const h=a.db.getClasses(),$=Object.keys(h);for(const t of $){const n=h[t],s=l.drawClass(o,n,c,a);g[s.id]=s,r.setNode(s.id,s),i.info("Org height: "+s.height)}a.db.getRelations().forEach(function(t){i.info("tjoho"+p(t.id1)+p(t.id2)+JSON.stringify(t)),r.setEdge(p(t.id1),p(t.id2),{relation:t},t.title||"DEFAULT")}),a.db.getNotes().forEach(function(t){i.debug(`Adding note: ${JSON.stringify(t)}`);const n=l.drawNote(o,t,c,a);g[n.id]=n,r.setNode(n.id,n),t.class&&t.class in h&&r.setEdge(t.id,p(t.class),{relation:{id1:t.id,id2:t.class,relation:{type1:"none",type2:"none",lineType:10}}},"DEFAULT")}),Y(r),r.nodes().forEach(function(t){t!==void 0&&r.node(t)!==void 0&&(i.debug("Node "+t+": "+JSON.stringify(r.node(t))),x.select("#"+(a.db.lookUpDomId(t)||t)).attr("transform","translate("+(r.node(t).x-r.node(t).width/2)+","+(r.node(t).y-r.node(t).height/2)+" )"))}),r.edges().forEach(function(t){t!==void 0&&r.edge(t)!==void 0&&(i.debug("Edge "+t.v+" -> "+t.w+": "+JSON.stringify(r.edge(t))),l.drawEdge(o,r.edge(t),r.edge(t).relation,c,a))});const f=o.node().getBBox(),E=f.width+m*2,b=f.height+m*2;H(o,b,E,c.useMaxWidth);const w=`${f.x-m} ${f.y-m} ${E} ${b}`;i.debug(`viewBox ${w}`),o.attr("viewBox",w)},B={draw:D},ft={parser:N,db:M,renderer:B,styles:W,init:e=>{e.class||(e.class={}),e.class.arrowMarkerAbsolute=e.arrowMarkerAbsolute,M.clear()}};export{ft as diagram};
//# sourceMappingURL=classDiagram-5e843ae7-4c617434.js.map
import{p as N,d as M,s as W}from"./styles-88ad4441-cde5be69.js";import{c as S,l as i,h as u,i as H}from"./intro.stories-e2029020.js";import{G as X,l as Y}from"./layout-9c92a682.js";import{s as l}from"./svgDraw-5d8a058e-6f5bafbe.js";import"./dayjs.min-1b995edc.js";import"./chunk-S4VUQJ4A-23edc7ed.js";import"./iframe-b8e40deb.js";import"../sb-preview/runtime.js";import"./index-b33a5d42.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";import"./jsx-runtime-a53139db.js";import"./_getTag-edecb89a.js";import"./isSymbol-50749e90.js";import"./isObject-32699ff3.js";import"./toString-25ea340b.js";import"./Table-a74f0cdc.js";import"./parseCss-75dd8ff7.js";import"./index-eb011f5d.js";import"./_color-087aa1f8.js";import"./index-036d6926.js";import"./_baseSet-db0c20a6.js";import"./now-bd49f550.js";import"./line-79bea652.js";import"./array-9f3ba611.js";import"./path-53f90ab3.js";let g={};const m=20,p=function(e){const d=Object.entries(g).find(k=>k[1].label===e);if(d)return d[0]},Z=function(e){e.append("defs").append("marker").attr("id","extensionStart").attr("class","extension").attr("refX",0).attr("refY",7).attr("markerWidth",190).attr("markerHeight",240).attr("orient","auto").append("path").attr("d","M 1,7 L18,13 V 1 Z"),e.append("defs").append("marker").attr("id","extensionEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 1,1 V 13 L18,7 Z"),e.append("defs").append("marker").attr("id","compositionStart").attr("class","extension").attr("refX",0).attr("refY",7).attr("markerWidth",190).attr("markerHeight",240).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L1,7 L9,1 Z"),e.append("defs").append("marker").attr("id","compositionEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L1,7 L9,1 Z"),e.append("defs").append("marker").attr("id","aggregationStart").attr("class","extension").attr("refX",0).attr("refY",7).attr("markerWidth",190).attr("markerHeight",240).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L1,7 L9,1 Z"),e.append("defs").append("marker").attr("id","aggregationEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L1,7 L9,1 Z"),e.append("defs").append("marker").attr("id","dependencyStart").attr("class","extension").attr("refX",0).attr("refY",7).attr("markerWidth",190).attr("markerHeight",240).attr("orient","auto").append("path").attr("d","M 5,7 L9,13 L1,7 L9,1 Z"),e.append("defs").append("marker").attr("id","dependencyEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L14,7 L9,1 Z")},D=function(e,d,k,a){const c=S().class;g={},i.info("Rendering diagram "+e);const L=S().securityLevel;let y;L==="sandbox"&&(y=u("#i"+d));const x=L==="sandbox"?u(y.nodes()[0].contentDocument.body):u("body"),o=x.select(`[id='${d}']`);Z(o);const r=new X({multigraph:!0});r.setGraph({isMultiGraph:!0}),r.setDefaultEdgeLabel(function(){return{}});const h=a.db.getClasses(),$=Object.keys(h);for(const t of $){const n=h[t],s=l.drawClass(o,n,c,a);g[s.id]=s,r.setNode(s.id,s),i.info("Org height: "+s.height)}a.db.getRelations().forEach(function(t){i.info("tjoho"+p(t.id1)+p(t.id2)+JSON.stringify(t)),r.setEdge(p(t.id1),p(t.id2),{relation:t},t.title||"DEFAULT")}),a.db.getNotes().forEach(function(t){i.debug(`Adding note: ${JSON.stringify(t)}`);const n=l.drawNote(o,t,c,a);g[n.id]=n,r.setNode(n.id,n),t.class&&t.class in h&&r.setEdge(t.id,p(t.class),{relation:{id1:t.id,id2:t.class,relation:{type1:"none",type2:"none",lineType:10}}},"DEFAULT")}),Y(r),r.nodes().forEach(function(t){t!==void 0&&r.node(t)!==void 0&&(i.debug("Node "+t+": "+JSON.stringify(r.node(t))),x.select("#"+(a.db.lookUpDomId(t)||t)).attr("transform","translate("+(r.node(t).x-r.node(t).width/2)+","+(r.node(t).y-r.node(t).height/2)+" )"))}),r.edges().forEach(function(t){t!==void 0&&r.edge(t)!==void 0&&(i.debug("Edge "+t.v+" -> "+t.w+": "+JSON.stringify(r.edge(t))),l.drawEdge(o,r.edge(t),r.edge(t).relation,c,a))});const f=o.node().getBBox(),E=f.width+m*2,b=f.height+m*2;H(o,b,E,c.useMaxWidth);const w=`${f.x-m} ${f.y-m} ${E} ${b}`;i.debug(`viewBox ${w}`),o.attr("viewBox",w)},B={draw:D},ft={parser:N,db:M,renderer:B,styles:W,init:e=>{e.class||(e.class={}),e.class.arrowMarkerAbsolute=e.arrowMarkerAbsolute,M.clear()}};export{ft as diagram};
//# sourceMappingURL=classDiagram-5e843ae7-c8b6c91f.js.map

Some files were not shown because too many files have changed in this diff Show more