update workflows and linters
This commit is contained in:
hobbes7878
parent
53dc84611c
commit
f3981c03a9
344 changed files with 9291 additions and 114098 deletions
|
|
@ -4,7 +4,7 @@
|
|||
"commit": true,
|
||||
"fixed": [],
|
||||
"linked": [],
|
||||
"access": "restricted",
|
||||
"access": "public",
|
||||
"baseBranch": "main",
|
||||
"updateInternalDependencies": "patch",
|
||||
"ignore": []
|
||||
|
|
|
|||
30
.github/workflows/chromatic.yaml
vendored
30
.github/workflows/chromatic.yaml
vendored
|
|
@ -1,30 +0,0 @@
|
|||
name: Chromatic
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
chromatic-deployment:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
NODE_OPTIONS: '--max_old_space_size=4096'
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- name: Setup node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: npm
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
- name: Publish to Chromatic
|
||||
uses: chromaui/action@v1
|
||||
with:
|
||||
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
|
||||
buildScriptName: build:chromatic
|
||||
exitOnceUploaded: true
|
||||
39
.github/workflows/lint.yaml
vendored
39
.github/workflows/lint.yaml
vendored
|
|
@ -5,42 +5,7 @@ on:
|
|||
branches:
|
||||
- main
|
||||
|
||||
concurrency: ${{ github.workflow }}-${{ github.ref }}
|
||||
|
||||
permissions:
|
||||
checks: write
|
||||
contents: write
|
||||
|
||||
jobs:
|
||||
lint:
|
||||
name: Lint
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- id: checkout
|
||||
name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- id: setup-node
|
||||
name: Setup Node.JS
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: npm
|
||||
|
||||
- id: install-deps
|
||||
name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- id: lint
|
||||
name: Lint code
|
||||
run: npm run lint:check
|
||||
|
||||
- id: format
|
||||
name: Format code
|
||||
run: npm run format:check
|
||||
|
||||
- id: check-deps
|
||||
name: Check for unused scripts and dependencies
|
||||
run: npm run knip
|
||||
uses: reuters-graphics/action-workflows/.github/workflows/lint.yaml@main
|
||||
secrets: inherit
|
||||
|
|
|
|||
66
.github/workflows/release.yaml
vendored
66
.github/workflows/release.yaml
vendored
|
|
@ -5,68 +5,10 @@ on:
|
|||
branches:
|
||||
- main
|
||||
|
||||
concurrency: ${{ github.workflow }}-${{ github.ref }}
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
pull-requests: write
|
||||
|
||||
jobs:
|
||||
release:
|
||||
name: Release
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
NODE_OPTIONS: '--max_old_space_size=4096'
|
||||
if: github.repository == 'reuters-graphics/graphics-components'
|
||||
steps:
|
||||
- id: checkout
|
||||
name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
uses: reuters-graphics/action-workflows/.github/workflows/changesets-release.yaml@main
|
||||
secrets: inherit
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- id: setup-node
|
||||
name: Setup Node.JS
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: npm
|
||||
|
||||
- id: install-deps
|
||||
name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- id: lint
|
||||
name: Lint code
|
||||
run: npm run lint:check
|
||||
|
||||
- id: build-package
|
||||
name: Build package
|
||||
run: npm run build:package
|
||||
|
||||
- id: changesets
|
||||
name: Create Release Pull Request or Publish to npm
|
||||
uses: changesets/action@v1
|
||||
with:
|
||||
version: npm run changeset:version
|
||||
publish: npm run changeset:publish
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||
|
||||
- id: build-docs
|
||||
name: Build docs
|
||||
if: steps.changesets.outputs.published == 'true'
|
||||
run: npm run build:docs
|
||||
|
||||
- id: commit_and_push
|
||||
name: Commit and push docs
|
||||
if: steps.changesets.outputs.published == 'true'
|
||||
run: |
|
||||
git config --global user.name 'github-actions[bot]'
|
||||
git config --global user.email 'github-actions[bot]@users.noreply.github.com'
|
||||
git add .
|
||||
git commit -m "docs"
|
||||
git push
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
node_version: '20'
|
||||
publish_docs: true
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
import{S as I,i as B,s as F,p as Y,l as A,c as f,o as v,m as d,h as p,t as y,a as $,k as u,d as w,q as x,n as q}from"./index-C9aKRT5A.js";import{g as O,a as W}from"./spread-CgU5AtxT.js";import{p as K,w as V,M as z,T as H,S as C,a as G}from"./collect-stories-ceFdpR5E.js";const Q=`Add Google and Chartbeat analytics to your page.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { Analytics } from '@reuters-graphics/graphics-components';
|
||||
|
||||
const authors = [{ name: 'Jane Doe' }, { name: 'John Doe' }];
|
||||
<\/script>
|
||||
|
||||
<Analytics authors="{authors}" />
|
||||
\`\`\`
|
||||
`,X=`Generally, you only want to send page analytics in production environments.
|
||||
|
||||
In a SvelteKit context, you can use \`$app\` stores to restrict when you send analytics.
|
||||
|
||||
For example, the following excludes analytics from pages in development or hosted on our preview server:
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { Analytics } from '@reuters-graphics/graphics-components';
|
||||
import { dev } from '$app/environment';
|
||||
import { page } from '$app/stores';
|
||||
<\/script>
|
||||
|
||||
{#if !dev && $page.url?.hostname !== 'graphics.thomsonreuters.com'}
|
||||
<Analytics />
|
||||
{/if}
|
||||
\`\`\`
|
||||
`,Z=`If you're using analytics to measure a multipage newsapp that uses [client-side routing](https://kit.svelte.dev/docs/glossary#routing), then you may need to trigger analytics after virtual page navigation.
|
||||
|
||||
This component also exports a function you can call to register pageviews.
|
||||
|
||||
For example, here's how you can use SvelteKit's [\`afterNavigate\`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) lifecycle to capture additional pageviews:
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import {
|
||||
Analytics,
|
||||
registerPageview,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import { afterNavigate } from '$app/navigation';
|
||||
|
||||
let isFirstPageview = true;
|
||||
|
||||
afterNavigate(() => {
|
||||
// We shouldn't fire on initial page load because the Analytics component
|
||||
// already registers a reader's first pageview. After this component
|
||||
// has initially mounted, we can be sure that further navigation is virtual
|
||||
// and register pageviews using this function.
|
||||
if (!isFirstPageview) {
|
||||
registerPageview();
|
||||
} else {
|
||||
isFirstPageview = false;
|
||||
}
|
||||
});
|
||||
<\/script>
|
||||
|
||||
<Analytics />
|
||||
\`\`\`
|
||||
`,ee="reuters.com",te=()=>{const s=document.body,e=document.createElement("script");e.id="parsely-cfg",e.src=`//cdn.parsely.com/keys/${ee}/p.js`,e.setAttribute("async",""),e.setAttribute("defer",""),s.appendChild(e)},ne=()=>{window.PARSELY=window.PARSELY||{autotrack:!1,onReady(){window.PARSELY.updateDefaults({data:{is_logged_in:!1}}),window.PARSELY.beacon.trackPageView()}},te()},J="G-WBSR7WLTGD",R=`https://www.googletagmanager.com/gtag/js?id=${J}`,se=()=>{if(document.querySelector(`script[src="${R}"]`))return;const s=document.createElement("script"),e=document.getElementsByTagName("script")[0];s.type="text/javascript",s.async=!0,s.src=R,e.parentNode.insertBefore(s,e)},ae=()=>{try{window.dataLayer=window.dataLayer||[],window.gtag||(se(),window.gtag=function(){window.dataLayer.push(arguments)},window.gtag("js",new Date),window.gtag("config",J,{send_page_view:!1}),oe())}catch(s){console.warn(`Error initialising Google Analytics: ${s}`)}},oe=()=>{typeof window>"u"||!window.gtag||window.gtag("event","page_view",{page_location:window.location.origin+window.location.pathname,page_title:document==null?void 0:document.title})},ie=52639,T="//static.chartbeat.com/js/chartbeat.js",re=()=>{if(document.querySelector(`script[src="${T}"]`))return;const s=document.createElement("script"),e=document.getElementsByTagName("script")[0];s.type="text/javascript",s.async=!0,s.src=T,e.parentNode.insertBefore(s,e)},ce=s=>{window._sf_async_config={uid:ie,domain:"reuters.com",flickerControl:!1,useCanonical:!0,useCanonicalDomain:!0,sections:"Graphics",authors:s.map(e=>(e==null?void 0:e.name)||"").join(","),...window._sf_async_config||{}};try{re()}catch(e){console.warn(`Error initialising Chartbeat Analytics: ${e}`)}};function le(s,e,r){let{authors:a=[]}=e;return Y(()=>{ae(),ce(a),ne()}),s.$$set=i=>{"authors"in i&&r(0,a=i.authors)},[a]}class h extends I{constructor(e){super(),B(this,e,le,null,F,{authors:0})}}h.__docgen={version:3,name:"Analytics.svelte",data:[{keywords:[],visibility:"public",description:"Used to associate a page with its author(s) in Chartbeat.",name:"authors",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"array",type:"array"}}],computed:[],methods:[{keywords:[],visibility:"public",description:"Register virtual pageviews when using client-side routing in multipage applications.",name:"registerPageview",static:!0}],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function pe(s){let e,r,a,i;const n=[s[0]];let l={};for(let o=0;o<n.length;o+=1)l=A(l,n[o]);return e=new h({props:l}),{c(){f(e.$$.fragment),r=v(),a=x("div"),a.textContent="Nothing to see here"},m(o,m){d(e,o,m),p(o,r,m),p(o,a,m),i=!0},p(o,m){const g=m&1?O(n,[W(o[0])]):{};e.$set(g)},i(o){i||(y(e.$$.fragment,o),i=!0)},o(o){$(e.$$.fragment,o),i=!1},d(o){o&&(u(r),u(a)),w(e,o)}}}function ue(s){let e,r,a,i;return e=new h({}),{c(){f(e.$$.fragment),r=v(),a=x("div"),a.textContent="Nothing to see here"},m(n,l){d(e,n,l),p(n,r,l),p(n,a,l),i=!0},p:q,i(n){i||(y(e.$$.fragment,n),i=!0)},o(n){$(e.$$.fragment,n),i=!1},d(n){n&&(u(r),u(a)),w(e,n)}}}function me(s){let e,r,a,i;return e=new h({}),{c(){f(e.$$.fragment),r=v(),a=x("div"),a.textContent="Nothing to see here"},m(n,l){d(e,n,l),p(n,r,l),p(n,a,l),i=!0},p:q,i(n){i||(y(e.$$.fragment,n),i=!0)},o(n){$(e.$$.fragment,n),i=!1},d(n){n&&(u(r),u(a)),w(e,n)}}}function ge(s){let e,r,a,i,n,l,o,m,g,_;const N=[{title:"Components/Analytics"},{component:h},V(Q)];let E={};for(let t=0;t<N.length;t+=1)E=A(E,N[t]);e=new z({props:E}),a=new H({props:{$$slots:{default:[pe,({args:t})=>({0:t}),({args:t})=>t?1:0]},$$scope:{ctx:s}}}),n=new C({props:{name:"Default",args:{authors:[{name:"Jane Doe"},{name:"John Doe"}]}}});const k=[{name:"Environments"},G(X)];let S={$$slots:{default:[ue]},$$scope:{ctx:s}};for(let t=0;t<k.length;t+=1)S=A(S,k[t]);o=new C({props:S});const P=[{name:"Multipage apps"},G(Z)];let b={$$slots:{default:[me]},$$scope:{ctx:s}};for(let t=0;t<P.length;t+=1)b=A(b,P[t]);return g=new C({props:b}),{c(){f(e.$$.fragment),r=v(),f(a.$$.fragment),i=v(),f(n.$$.fragment),l=v(),f(o.$$.fragment),m=v(),f(g.$$.fragment)},m(t,c){d(e,t,c),p(t,r,c),d(a,t,c),p(t,i,c),d(n,t,c),p(t,l,c),d(o,t,c),p(t,m,c),d(g,t,c),_=!0},p(t,[c]){const U={};e.$set(U);const L={};c&3&&(L.$$scope={dirty:c,ctx:t}),a.$set(L);const M={};c&2&&(M.$$scope={dirty:c,ctx:t}),o.$set(M);const j={};c&2&&(j.$$scope={dirty:c,ctx:t}),g.$set(j)},i(t){_||(y(e.$$.fragment,t),y(a.$$.fragment,t),y(n.$$.fragment,t),y(o.$$.fragment,t),y(g.$$.fragment,t),_=!0)},o(t){$(e.$$.fragment,t),$(a.$$.fragment,t),$(n.$$.fragment,t),$(o.$$.fragment,t),$(g.$$.fragment,t),_=!1},d(t){t&&(u(r),u(i),u(l),u(m)),w(e,t),w(a,t),w(n,t),w(o,t),w(g,t)}}}class fe extends I{constructor(e){super(),B(this,e,null,ge,F,{})}}const D=K(fe,{meta:{title:"Components/Analytics"},stories:{"tpl:default":{name:"default",template:!0,source:`<Analytics {...args} />
|
||||
<div>Nothing to see here</div>`,hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1},Environments:{name:"Environments",template:!1,source:`<Analytics />
|
||||
<div>Nothing to see here</div>`,hasArgs:!1},MultipageApps:{name:"Multipage apps",template:!1,source:`<Analytics />
|
||||
<div>Nothing to see here</div>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","environmentsDocs","multipageDocs","Analytics","withComponentDocs","withStoryDocs"]}),we=D.meta,ve=["Default","Environments","MultipageApps"],he=D.stories.Default,_e=D.stories.Environments,Ae=D.stories.MultipageApps;export{he as Default,_e as Environments,Ae as MultipageApps,ve as __namedExportsOrder,we as default};
|
||||
|
|
@ -1 +0,0 @@
|
|||
import{S as b,i as y,s as w,y as h,q as f,f as c,C as m,h as _,j as p,G as k,z as j,A as g,B as A,H as v,t as S,a as V,k as W}from"./index-C9aKRT5A.js";const C=(n,i)=>(Object.entries(i).forEach(([t,s])=>{n.style.setProperty(`--${t}`,s)}),{update(t){Object.entries(t).forEach(([s,o])=>{n.style.setProperty(`--${s}`,o),delete i[s]}),Object.keys(i).forEach(s=>{n.style.removeProperty(`--${s}`)}),i=t}});function E(n){let i,t,s,o,d,u;const r=n[6].default,a=h(r,n,n[5],null);return{c(){i=f("main"),t=f("article"),a&&a.c(),c(t,"id",n[1]),c(t,"role",n[2]),c(t,"class","svelte-jd0c2r"),m(t,"embedded",n[0]),c(i,"id","main-content")},m(e,l){_(e,i,l),p(i,t),a&&a.m(t,null),o=!0,d||(u=k(s=C.call(null,t,n[3])),d=!0)},p(e,[l]){a&&a.p&&(!o||l&32)&&j(a,r,e,e[5],o?A(r,e[5],l,null):g(e[5]),null),(!o||l&2)&&c(t,"id",e[1]),(!o||l&4)&&c(t,"role",e[2]),s&&v(s.update)&&l&8&&s.update.call(null,e[3]),(!o||l&1)&&m(t,"embedded",e[0])},i(e){o||(S(a,e),o=!0)},o(e){V(a,e),o=!1},d(e){e&&W(i),a&&a.d(e),d=!1,u()}}}function O(n,i,t){let s,{$$slots:o={},$$scope:d}=i,{embedded:u=!1}=i,{id:r=null}=i,{role:a=null}=i,{columnWidths:e={narrower:330,narrow:510,normal:660,wide:930,wider:1200}}=i;return n.$$set=l=>{"embedded"in l&&t(0,u=l.embedded),"id"in l&&t(1,r=l.id),"role"in l&&t(2,a=l.role),"columnWidths"in l&&t(4,e=l.columnWidths),"$$scope"in l&&t(5,d=l.$$scope)},n.$$.update=()=>{n.$$.dirty&16&&t(3,s={"narrower-column-width":e.narrower+"px","narrow-column-width":e.narrow+"px","normal-column-width":e.normal+"px","wide-column-width":e.wide+"px","wider-column-width":e.wider+"px"})},[u,r,a,s,e,d,o]}class q extends b{constructor(i){super(),y(this,i,O,E,w,{embedded:0,id:1,role:2,columnWidths:4})}}q.__docgen={version:3,name:"Article.svelte",data:[{keywords:[],visibility:"public",description:"Set to true for embeddables.",name:"embedded",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"Add an id to the article tag to target it with custom CSS.",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null},{keywords:[],visibility:"public",description:"ARIA role of the article",name:"role",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null},{keywords:[],visibility:"public",description:"Set custom widths for the normal, wide and wider column dimensions",name:"columnWidths",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"}}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"Article content",name:"default"}],refs:[]};export{q as A};
|
||||
|
|
@ -1 +0,0 @@
|
|||
article.svelte-jd0c2r{width:100%;display:block;margin:0;padding:0 15px;background-color:var(--theme-colour-background, transparent)}article.embedded.svelte-jd0c2r{overflow:auto}
|
||||
|
|
@ -1 +0,0 @@
|
|||
#article-story-basic,#article-column-widths-demo{width:calc(100% + 30px);margin-left:-15px}#article-column-widths-demo{background-color:#ddd;position:relative;margin-bottom:10px}#article-column-widths-demo .article-boundaries{padding:0;width:100%;height:100%;background-color:#bbb}#article-column-widths-demo .article-boundaries.custom div.article-block{background:#d3847b}#article-column-widths-demo div.article-block{height:300px;background:#81a1c1;margin-bottom:2px;height:50px;padding-left:3px;color:#fff;font-size:12px}div.demo-container.svelte-1wzc5ei.svelte-1wzc5ei{height:300px;background:#ccc;position:relative;font-size:12px}div.demo-container.svelte-1wzc5ei .background-label.svelte-1wzc5ei{position:absolute;bottom:0;left:5px;color:#666}div.demo-container.svelte-1wzc5ei .padding-label.svelte-1wzc5ei{position:absolute;top:0;left:-17px}div.demo-container.svelte-1wzc5ei .padding-label span.svelte-1wzc5ei{font-size:18px}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
figure.before-after-container.svelte-1aeavb4.svelte-1aeavb4{box-sizing:content-box}figure.before-after-container.svelte-1aeavb4 img.svelte-1aeavb4{top:0;left:0;z-index:20;-webkit-user-select:none;user-select:none}figure.before-after-container.svelte-1aeavb4 img.after.svelte-1aeavb4{z-index:21}figure.before-after-container.svelte-1aeavb4 img.before.svelte-1aeavb4{z-index:22}figure.before-after-container.svelte-1aeavb4 .overlay-container.svelte-1aeavb4{position:absolute}figure.before-after-container.svelte-1aeavb4 .overlay-container.svelte-1aeavb4 :first-child{margin-top:0}figure.before-after-container.svelte-1aeavb4 .overlay-container.svelte-1aeavb4 :last-child{margin-bottom:0}figure.before-after-container.svelte-1aeavb4 .overlay-container.before.svelte-1aeavb4{left:0;z-index:23}figure.before-after-container.svelte-1aeavb4 .overlay-container.after.svelte-1aeavb4{right:0;z-index:21}.handle.svelte-1aeavb4.svelte-1aeavb4{z-index:30;width:40px;height:40px;cursor:move;background:none;-webkit-user-select:none;user-select:none;position:absolute;border-radius:50px;top:calc(50% - 20px);border:4px solid var(--before-after-handle-colour);opacity:var(--before-after-handle-inactive-opacity, .6);box-shadow:1px 1px 3px #333}.handle.svelte-1aeavb4.svelte-1aeavb4:hover,.handle.svelte-1aeavb4.svelte-1aeavb4:active,.handle.svelte-1aeavb4.svelte-1aeavb4:focus{opacity:1}.handle.svelte-1aeavb4.svelte-1aeavb4:before,.handle.svelte-1aeavb4.svelte-1aeavb4:after{content:"";box-shadow:0 0 3px #333;height:9999px;position:absolute;left:calc(50% - 2px);border:2px solid var(--before-after-handle-colour)}.handle.svelte-1aeavb4.svelte-1aeavb4:before{top:40px}.handle.svelte-1aeavb4.svelte-1aeavb4:after{bottom:40px}.handle.svelte-1aeavb4 .arrow-right.svelte-1aeavb4,.handle.svelte-1aeavb4 .arrow-left.svelte-1aeavb4{width:0;height:0;-webkit-user-select:none;user-select:none;position:relative;border-top:10px solid transparent;border-bottom:10px solid transparent}.handle.svelte-1aeavb4 .arrow-right.svelte-1aeavb4{left:19px;bottom:14px;border-left:10px solid var(--before-after-handle-colour)}.handle.svelte-1aeavb4 .arrow-left.svelte-1aeavb4{left:3px;top:6px;border-right:10px solid var(--before-after-handle-colour)}aside.before-after-caption.svelte-1aeavb4 p{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-top:clamp(.31rem,.31rem + 0vw,.31rem);margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem)}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
#block-demo-article{background-color:#ddd;position:relative;width:calc(100% + 30px);margin-left:-15px}#block-demo-article .article-boundaries{padding:0 0 18px;width:100%;height:100%;background-color:#bbb}#block-demo-article div.article-block{height:100px;background:#81a1c1}#block-demo-article div.article-block.block-snap-widths-demo{margin-bottom:2px;height:40px;font-size:11px}#block-demo-article div.article-block.block-snap-widths-demo.even{background:#d3847b}#block-demo-article .label,#block-demo-article div.article-block.block-snap-widths-demo{padding-left:3px;color:#fff}div#block-flex-example.svelte-1asvcos.svelte-1asvcos.svelte-1asvcos{padding:25px 0}div#block-flex-example.svelte-1asvcos div.row.svelte-1asvcos.svelte-1asvcos{display:flex}div#block-flex-example.svelte-1asvcos div.row.svelte-1asvcos>div.svelte-1asvcos{background-color:#d3847b;border:1px solid white;border-radius:4px;padding:20px;color:#fff;text-align:center;flex-grow:1}div#block-flex-example.svelte-1asvcos div.row:first-child div.svelte-1asvcos.svelte-1asvcos{background:#81a1c1}
|
||||
|
|
@ -1 +0,0 @@
|
|||
import{S as y,i as k,s as m,y as h,q as p,f as d,C as b,h as _,z as w,A as g,B as A,t as v,a as S,k as z}from"./index-C9aKRT5A.js";function V(l){let e,n,s;const r=l[7].default,i=h(r,l,l[6],null);return{c(){e=p("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){_(t,e,o),i&&i.m(e,null),s=!0},p(t,[o]){i&&i.p&&(!s||o&64)&&w(i,r,t,t[6],s?A(r,t[6],o,null):g(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||(v(i,t),s=!0)},o(t){S(i,t),s=!1},d(t){t&&z(e),i&&i.d(t)}}}function L(l,e,n){let{$$slots:s={},$$scope:r}=e,{width:i="normal"}=e,{id:t=""}=e,{class:o=""}=e,{snap:c=!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,c=a.snap),"role"in a&&n(4,f=a.role),"ariaLabel"in a&&n(5,u=a.ariaLabel),"$$scope"in a&&n(6,r=a.$$scope)},[i,t,o,c,f,u,r,s]}class R extends y{constructor(e){super(),k(this,e,L,V,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};
|
||||
|
|
@ -1 +0,0 @@
|
|||
.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)}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
|
|
@ -1 +0,0 @@
|
|||
import{S as m,i as u,s as p,c as r,m as c,t as l,a as d,d as f}from"./index-C9aKRT5A.js";import{M as y}from"./Markdown-BNYiGaXJ.js";import{B as g}from"./Block-C7biTRWl.js";function k(a){let e,s;return e=new y({props:{source:a[0]}}),{c(){r(e.$$.fragment)},m(t,n){c(e,t,n),s=!0},p(t,n){const i={};n&1&&(i.source=t[0]),e.$set(i)},i(t){s||(l(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 g({props:{id:a[2],class:"fmy-6 "+a[1],$$slots:{default:[k]},$$scope:{ctx:a}}}),{c(){r(e.$$.fragment)},m(t,n){c(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||(l(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};
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
import{S as D,i as C,s as j,l as T,c,o as b,m,h as g,t as p,a as u,k as y,d}from"./index-C9aKRT5A.js";import{g as q,a as A}from"./spread-CgU5AtxT.js";import{p as M,w as F,M as V,T as P,S as _}from"./collect-stories-ceFdpR5E.js";import{B}from"./BodyText-DOLlE-fm.js";import"./Markdown-BNYiGaXJ.js";import"./Block-C7biTRWl.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:
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { BodyText } from '@reuters-graphics/graphics-components';
|
||||
|
||||
const markdownText = \`Bacon ipsum **dolor amet** cow tongue tri-tip.
|
||||
|
||||
Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
|
||||
|
||||
Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.\`;
|
||||
<\/script>
|
||||
|
||||
<BodyText text="{markdownText}" />
|
||||
\`\`\`
|
||||
|
||||
... or more commonly, you'll use it with a Google doc in the Graphics Kit like this:
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { BodyText } from '@reuters-graphics/graphics-components';
|
||||
|
||||
import content from '$locales/en/content.json';
|
||||
<\/script>
|
||||
|
||||
{#each content.blocks as block}
|
||||
{#if block.Type === 'text'}
|
||||
<BodyText text="{block.Text}" />
|
||||
{/if}
|
||||
{/each}
|
||||
\`\`\`
|
||||
`;function G(h){let o,n;const a=[h[0]];let i={};for(let t=0;t<a.length;t+=1)i=T(i,a[t]);return o=new B({props:i}),{c(){c(o.$$.fragment)},m(t,l){m(o,t,l),n=!0},p(t,l){const s=l&1?q(a,[A(t[0])]):{};o.$set(s)},i(t){n||(p(o.$$.fragment,t),n=!0)},o(t){u(o.$$.fragment,t),n=!1},d(t){d(o,t)}}}function J(h){let o,n,a,i,t,l,s,f;const x=[{title:"Components/BodyText"},{component:B},F(E)];let k={};for(let e=0;e<x.length;e+=1)k=T(k,x[e]);return o=new V({props:k}),a=new P({props:{$$slots:{default:[G,({args:e})=>({0:e}),({args:e})=>e?1:0]},$$scope:{ctx:h}}}),t=new _({props:{name:"Default",args:{text:`Bacon ipsum **dolor amet** cow tongue tri-tip.
|
||||
|
||||
Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
|
||||
|
||||
- Steak
|
||||
- [Pork chop](https://www.google.com)
|
||||
- Fillet
|
||||
|
||||
Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`}}}),s=new _({props:{name:"Typography sample",args:{class:"body-text-typography-example-story",text:`<span class='drop-cap'>R</span>eprehenderit hamburger pork bresaola, dolore chuck sirloin landjaeger ham hock [tempor meatball](https://baconipsum.com/) alcatra nostrud pork belly. Culpa pork belly doner ea jowl, elit deserunt leberkas cow shoulder ham hock dolore.
|
||||
|
||||
## Biltong turducken ground round kevin
|
||||
|
||||
Pig est irure buffalo ullamco. Sunt beef ribs tri-tip, chislic officia sint dolor. Spare ribs drumstick ground round, irure duis cillum id chicken est ipsum ut.
|
||||
|
||||
Qui cupidatat chislic buffalo consequat deserunt.
|
||||
|
||||
Andouille sint shankle quis velit nostrud chislic meatloaf culpa labore corned beef chuck spare ribs. Filet mignon eu shankle in, meatloaf ut dolor ham hock ut.
|
||||
|
||||
### Venison shoulder ham hock ham leberkas flank beef ribs fatback, jerky meatball ham hock
|
||||
|
||||
Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig. Veniam laboris sunt chislic. Aute doner porchetta nulla, tongue venison ad ex in do.
|
||||
|
||||
- Steak
|
||||
- Capicola
|
||||
- [Pork chop](https://www.google.com)
|
||||
- Fillet landjaeger commodo
|
||||
|
||||
Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.
|
||||
|
||||
Minim id buffalo dolore ad, **boudin chicken laboris** excepteur qui eiusmod.
|
||||
|
||||
#### Jerky prosciutto burgdoggen
|
||||
|
||||
Sirloin beef flank labore cillum venison pariatur cow nulla ut irure in consequat proident velit. Jerky meatball pig nulla irure laboris fatback et rump ut dolore.
|
||||
|
||||
Biltong enim consequat pork chop, flank ea.
|
||||
|
||||
> Officia ball tip sed tenderloin dolore. Est magna enim, turkey in turducken flank jowl ad lorem buffalo ground
|
||||
> > Ronald McDonald
|
||||
|
||||
Flank bacon sint dolore porchetta strip steak. Tail capicola flank nostrud meatball consequat pastrami lorem cupidatat chuck drumstick ham hock bresaola sint.
|
||||
|
||||
##### Venison pork chop
|
||||
|
||||
Alcatra bacon mollit boudin. Capicola ut tongue biltong, cow cillum pariatur sausage.
|
||||
|
||||
1. Minim ribeye
|
||||
2. Prosciutto laborum
|
||||
3. Salami doner irure
|
||||
|
||||
Consectetur ribeye consequat pork capicola. T-bone ad laborum beef ribs picanha.
|
||||
|
||||
###### Alcatra bacon mollit boudin
|
||||
|
||||
Tempor tail doner chicken incididunt beef ribs. Ad ullamco in cupim venison. Leberkas rump ullamco adipisicing, laboris excepteur voluptate.
|
||||
|
||||
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 w={};r&3&&(w.$$scope={dirty:r,ctx:e}),a.$set(w)},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 D{constructor(o){super(),C(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"]}),Q=$.meta,U=["Default","TypographySample"],Y=$.stories.Default,z=$.stories.TypographySample;export{Y as Default,z as TypographySample,U as __namedExportsOrder,Q as default};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
@charset "UTF-8";@media (min-width: 330px){.dateline.svelte-18evejq div.svelte-18evejq:not(:last-child):after{content:"·";margin:0 2px 0 5px}}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import{S as v,i as A,s as M,l as B,c as p,o as d,m as f,h as y,t as u,a as c,k as D,d as $}from"./index-C9aKRT5A.js";import{g as h,a as T}from"./spread-CgU5AtxT.js";import{p as C,M as P,T as Z,S as k,w as I}from"./collect-stories-ceFdpR5E.js";import{B as w}from"./Byline-CgwnbxHA.js";import"./each-D6YF6ztN.js";import"./Block-C7biTRWl.js";import"./_commonjsHelpers-BosuxZz1.js";import"./journalize-K6hK94UL.js";const O=`Byline and dateline.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { Byline } from '@reuters-graphics/graphics-components';
|
||||
<\/script>
|
||||
|
||||
<Byline
|
||||
authors="{[
|
||||
'Dea Bankova',
|
||||
'Aditi Bhandari',
|
||||
'Prasanta Kumar Dutta',
|
||||
'Anurag Rao',
|
||||
'Mariano Zafra',
|
||||
]}"
|
||||
publishTime="2021-09-12T00:00:00.000Z"
|
||||
updateTime="2021-09-12T12:57:00.000Z"
|
||||
/>
|
||||
\`\`\`
|
||||
`;function K(m){let n,r;const a=[m[1]];let i={};for(let t=0;t<a.length;t+=1)i=B(i,a[t]);return n=new w({props:i}),{c(){p(n.$$.fragment)},m(t,o){f(n,t,o),r=!0},p(t,o){const l=o&2?h(a,[T(t[1])]):{};n.$set(l)},i(t){r||(u(n.$$.fragment,t),r=!0)},o(t){c(n.$$.fragment,t),r=!1},d(t){$(n,t)}}}function R(m){let n,r,a,i,t,o;const l=[{title:"Components/Byline"},{component:w},m[0]];let _={};for(let e=0;e<l.length;e+=1)_=B(_,l[e]);return n=new P({props:_}),a=new Z({props:{$$slots:{default:[K,({args:e})=>({1:e}),({args:e})=>e?2:0]},$$scope:{ctx:m}}}),t=new k({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(){p(n.$$.fragment),r=d(),p(a.$$.fragment),i=d(),p(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(l,[l[0],l[1],T(e[0])]):{};n.$set(b);const g={};s&6&&(g.$$scope={dirty:s,ctx:e}),a.$set(g)},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 j(m){return[{...I(O),argTypes:{align:{control:"select",options:["left","center"]}}}]}class q extends v{constructor(n){super(),A(this,n,j,R,M,{})}}const S=C(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"]}),N=S.meta,Q=["Default"],U=S.stories.Default;export{U as Default,Q as __namedExportsOrder,N as default};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 497 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 303 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 628 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 787 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 118 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-CswL0fy2.js","./index-DwChlhAQ.js","./_commonjsHelpers-BosuxZz1.js","./index-D-8MO0q_.js"])))=>i.map(i=>d[i]);
|
||||
import{_ as d}from"./iframe-D8iLOA0Z.js";import{a as h,R as o,r as i}from"./index-DwChlhAQ.js";import{C as E,A as R,H as x,D as y}from"./index-D0unROMo.js";import"../sb-preview/runtime.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-DxKRhftL.js";import"./index-DrFu-skq.js";var m={},u=h;m.createRoot=u.createRoot,m.hydrateRoot=u.hydrateRoot;var n=new Map,D=({callback:t,children:e})=>{let r=i.useRef();return i.useLayoutEffect(()=>{r.current!==t&&(r.current=t,t())},[t]),e},v=async(t,e,r)=>{let s=await _(e,r);return new Promise(a=>{s.render(o.createElement(D,{callback:()=>a(null)},t))})},w=(t,e)=>{let r=n.get(t);r&&(r.unmount(),n.delete(t))},_=async(t,e)=>{let r=n.get(t);return r||(r=m.createRoot(t,e),n.set(t,r)),r},f={code:E,a:R,...x},g=class extends i.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(t){let{showException:e}=this.props;e(t)}render(){let{hasError:t}=this.state,{children:e}=this.props;return t?null:o.createElement(o.Fragment,null,e)}},T=class{constructor(){this.render=async(t,e,r)=>{let s={...f,...e==null?void 0:e.components},a=y;return new Promise((p,l)=>{d(async()=>{const{MDXProvider:c}=await import("./index-CswL0fy2.js");return{MDXProvider:c}},__vite__mapDeps([0,1,2,3]),import.meta.url).then(({MDXProvider:c})=>v(o.createElement(g,{showException:l,key:Math.random()},o.createElement(c,{components:s},o.createElement(a,{context:t,docsParameter:e}))),r)).then(()=>p())})},this.unmount=t=>{w(t)}}};export{T as DocsRenderer,f as defaultComponents};
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import{S as k,i as $,s as C,c as m,m as f,t as p,a as g,d as h,q,f as d,w as b,h as w,k as _,l as v,o as D}from"./index-C9aKRT5A.js";import{g as A,a as S}from"./spread-CgU5AtxT.js";import{p as R,M,T as V,S as B,w as E}from"./collect-stories-ceFdpR5E.js";import{B as H}from"./Block-C7biTRWl.js";const P=`Embed a document hosted by [DocumentCloud](https://documentcloud.org)
|
||||
|
||||
---
|
||||
|
||||
The 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".
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { DocumentCloud } from '@reuters-graphics/graphics-components';
|
||||
<\/script>
|
||||
|
||||
<DocumentCloud
|
||||
slug="3259984-Trump-Intelligence-Allegations"
|
||||
altText="These Reports Allege Trump Has Deep Ties To Russia"
|
||||
width="normal"
|
||||
/>
|
||||
\`\`\`
|
||||
`;function j(a){let e,o;return{c(){e=q("iframe"),d(e,"class","h-screen"),b(e.src,o="https://embed.documentcloud.org/documents/"+a[1]+"/?embed=1&responsive=1&title=1")||d(e,"src",o),d(e,"title",a[2]),d(e,"width","700"),d(e,"height","540"),d(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")&&d(e,"src",o),l&4&&d(e,"title",t[2])},d(t){t&&_(e)}}}function F(a){let e,o;return e=new H({props:{width:a[0],id:a[3],class:"photo fmy-6 "+a[4],$$slots:{default:[j]},$$scope:{ctx:a}}}),{c(){m(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 k{constructor(e){super(),$(this,e,L,F,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(){m(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 B({props:{name:"Default",args:{width:"normal",slug:"3259984-Trump-Intelligence-Allegations",altText:"These Reports Allege Trump Has Deep Ties To Russia"}}}),{c(){m(e.$$.fragment),o=D(),m(t.$$.fragment),l=D(),m(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(P),argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]}}}]}class W extends k{constructor(e){super(),$(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"]}),Q=x.meta,X=["Default"],Y=x.stories.Default;export{Y as Default,X as __namedExportsOrder,Q as default};
|
||||
|
|
@ -1 +0,0 @@
|
|||
div.svelte-715e2e.svelte-715e2e{position:fixed;bottom:5px;left:10px;font-size:18px}div.svelte-715e2e a.svelte-715e2e{color:#ccc}div.svelte-715e2e a.svelte-715e2e:hover{color:#666}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import{S as y,i as E,s as L,D as M,h as $,t as m,r as S,a as f,u as V,k as _,q as k,c as p,f as v,j as H,m as c,d,l as P,o as h}from"./index-C9aKRT5A.js";import{g as z,a as A}from"./spread-CgU5AtxT.js";import{p as T,w as j,M as q,T as F,S as N}from"./collect-stories-ceFdpR5E.js";import{F as I}from"./fa-DMEUqF6U.js";const O=`An embed tool for development in graphics kit.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
|
||||
|
||||
import { dev } from '$app/env';
|
||||
<\/script>
|
||||
|
||||
<EmbedPreviewerLink dev="{dev}" />
|
||||
\`\`\`
|
||||
`;/*!
|
||||
* Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
*/var R={prefix:"far",iconName:"window-restore",icon:[512,512,[],"f2d2","M464 0H144c-26.5 0-48 21.5-48 48v48H48c-26.5 0-48 21.5-48 48v320c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h48c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-96 464H48V256h320v208zm96-96h-48V144c0-26.5-21.5-48-48-48H144V48h320v320z"]};function D(o){let t,a,e,n;return e=new I({props:{icon:R}}),{c(){t=k("div"),a=k("a"),p(e.$$.fragment),v(a,"rel","external"),v(a,"href","/embed-previewer"),v(a,"class","svelte-715e2e"),v(t,"class","svelte-715e2e")},m(r,i){$(r,t,i),H(t,a),c(e,a,null),n=!0},i(r){n||(m(e.$$.fragment,r),n=!0)},o(r){f(e.$$.fragment,r),n=!1},d(r){r&&_(t),d(e)}}}function W(o){let t,a,e=o[0]&&D();return{c(){e&&e.c(),t=M()},m(n,r){e&&e.m(n,r),$(n,t,r),a=!0},p(n,[r]){n[0]?e?r&1&&m(e,1):(e=D(),e.c(),m(e,1),e.m(t.parentNode,t)):e&&(S(),f(e,1,1,()=>{e=null}),V())},i(n){a||(m(e),a=!0)},o(n){f(e),a=!1},d(n){n&&_(t),e&&e.d(n)}}}function B(o,t,a){let{dev:e=!1}=t;return o.$$set=n=>{"dev"in n&&a(0,e=n.dev)},[e]}class g extends y{constructor(t){super(),E(this,t,B,W,L,{dev:0})}}g.__docgen={version:3,name:"EmbedPreviewerLink.svelte",data:[{visibility:"public",description:null,keywords:[],name:"dev",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function G(o){let t,a;const e=[o[0]];let n={};for(let r=0;r<e.length;r+=1)n=P(n,e[r]);return t=new g({props:n}),{c(){p(t.$$.fragment)},m(r,i){c(t,r,i),a=!0},p(r,i){const u=i&1?z(e,[A(r[0])]):{};t.$set(u)},i(r){a||(m(t.$$.fragment,r),a=!0)},o(r){f(t.$$.fragment,r),a=!1},d(r){d(t,r)}}}function J(o){let t,a,e,n,r,i;const u=[{title:"Components/EmbedPreviewerLink"},{component:g},j(O)];let w={};for(let s=0;s<u.length;s+=1)w=P(w,u[s]);return t=new q({props:w}),e=new F({props:{$$slots:{default:[G,({args:s})=>({0:s}),({args:s})=>s?1:0]},$$scope:{ctx:o}}}),r=new N({props:{name:"Default",args:{dev:!0}}}),{c(){p(t.$$.fragment),a=h(),p(e.$$.fragment),n=h(),p(r.$$.fragment)},m(s,l){c(t,s,l),$(s,a,l),c(e,s,l),$(s,n,l),c(r,s,l),i=!0},p(s,[l]){const C={};t.$set(C);const b={};l&3&&(b.$$scope={dirty:l,ctx:s}),e.$set(b)},i(s){i||(m(t.$$.fragment,s),m(e.$$.fragment,s),m(r.$$.fragment,s),i=!0)},o(s){f(t.$$.fragment,s),f(e.$$.fragment,s),f(r.$$.fragment,s),i=!1},d(s){s&&(_(a),_(n)),d(t,s),d(e,s),d(r,s)}}}class K extends y{constructor(t){super(),E(this,t,null,J,L,{})}}const x=T(K,{meta:{title:"Components/EmbedPreviewerLink"},stories:{"tpl:default":{name:"default",template:!0,source:"<EmbedPreviewerLink {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","EmbedPreviewerLink","withComponentDocs"]}),Z=x.meta,ee=["Default"],te=x.stories.Default;export{te as Default,ee as __namedExportsOrder,Z as default};
|
||||
|
|
@ -1 +0,0 @@
|
|||
.note-title.svelte-1rn1hl4 p{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-top:clamp(.31rem,.31rem + 0vw,.31rem);margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem);color:var(--theme-colour-text-primary);font-weight:500;letter-spacing:0em;margin-top:clamp(.88rem,.83rem + .21vw,1rem);margin-bottom:.125rem;text-transform:none}.note-content.svelte-1rn1hl4 p{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-top:clamp(.31rem,.31rem + 0vw,.31rem);margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem);margin-top:0}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import{S as C,i as S,s as M,c as p,m as d,t as f,a as m,d as $,D as q,h as _,r as A,u as B,k as g,K as F,q as D,o as w,f as E,j as P,l as I}from"./index-C9aKRT5A.js";import{g as K,a as O}from"./spread-CgU5AtxT.js";import{p as z,w as G,M as H,T as J,S as L}from"./collect-stories-ceFdpR5E.js";import{e as N}from"./each-D6YF6ztN.js";import{B as Q}from"./Block-C7biTRWl.js";import{M as v}from"./Markdown-BNYiGaXJ.js";const R=`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>
|
||||
import { EndNotes } from '@reuters-graphics/graphics-components';
|
||||
|
||||
const notes = [
|
||||
{
|
||||
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',
|
||||
},
|
||||
];
|
||||
<\/script>
|
||||
|
||||
<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=N(i[0]),t=[];for(let l=0;l<e.length;l+=1)t[l]=x(b(i,e,l));const s=l=>m(t[l],1,1,()=>{t[l]=null});return{c(){for(let l=0;l<t.length;l+=1)t[l].c();n=q()},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=N(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(A(),o=e.length;o<t.length;o+=1)s(o);B()}},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)m(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 v({props:{source:i[1].title}}),s=new v({props:{source:i[1].text}}),{c(){n=D("div"),p(a.$$.fragment),e=w(),t=D("div"),p(s.$$.fragment),l=w(),E(n,"class","note-title svelte-1rn1hl4"),E(t,"class","note-content svelte-1rn1hl4")},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 u={};r&1&&(u.source=o[1].title),a.$set(u);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){m(a.$$.fragment,o),m(s.$$.fragment,o),c=!1},d(o){o&&(g(n),g(e),g(t)),$(a),$(s)}}}function U(i){let n,a,e=i[0]&&T(i);return{c(){e&&e.c(),n=q()},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&&(A(),m(e,1,1,()=>{e=null}),B())},i(t){a||(f(e),a=!0)},o(t){m(e),a=!1},d(t){t&&g(n),e&&e.d(t)}}}function V(i){let n,a;return n=new Q({props:{class:"notes fmt-6 fmb-8",$$slots:{default:[U]},$$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){m(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 k extends C{constructor(n){super(),S(this,n,W,V,M,{notes:0})}}k.__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=I(t,e[s]);return n=new k({props:t}),{c(){p(n.$$.fragment)},m(s,l){d(n,s,l),a=!0},p(s,l){const c=l&2?K(e,[O(s[1])]):{};n.$set(c)},i(s){a||(f(n.$$.fragment,s),a=!0)},o(s){m(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:k},G(R)];let o={};for(let r=0;r<c.length;r+=1)o=I(o,c[r]);return n=new H({props:o}),e=new J({props:{$$slots:{default:[Y,({args:r})=>({1:r}),({args:r})=>r?2:0]},$$scope:{ctx:i}}}),s=new L({props:{name:"Default",args:{notes:X(i[0])}}}),{c(){p(n.$$.fragment),a=w(),p(e.$$.fragment),t=w(),p(s.$$.fragment)},m(r,u){d(n,r,u),_(r,a,u),d(e,r,u),_(r,t,u),d(s,r,u),l=!0},p(r,[u]){const h={};n.$set(h);const y={};u&6&&(y.$$scope={dirty:u,ctx:r}),e.$set(y)},i(r){l||(f(n.$$.fragment,r),f(e.$$.fragment,r),f(s.$$.fragment,r),l=!0)},o(r){m(n.$$.fragment,r),m(e.$$.fragment,r),m(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 j=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"]}),ie=j.meta,ce=["Default"],fe=j.stories.Default;export{fe as Default,ce as __namedExportsOrder,ie as default};
|
||||
|
|
@ -1 +0,0 @@
|
|||
.placeholder.svelte-g9m2b0{background-color:#ccc}div.alt-warning.svelte-g9m2b0{background-color:red;color:#fff;top:0;right:0}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,55 +0,0 @@
|
|||
import{S as j,i as G,s as q,l as y,c as m,o as _,m as f,h as T,t as h,a as u,k as w,d as g}from"./index-C9aKRT5A.js";import{g as U,a as v}from"./spread-CgU5AtxT.js";import{p as W,M as z,T as O,S as I,a as M,w as B}from"./collect-stories-ceFdpR5E.js";import{F as E}from"./FeaturePhoto-DrqYCojc.js";import"./Block-C7biTRWl.js";import"./PaddingReset-CiOBBFtT.js";const L=`A full-width photo inside the text well.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { FeaturePhoto } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||||
<\/script>
|
||||
|
||||
<FeaturePhoto
|
||||
src="{\`\${assets}/images/myImage.jpg\`}"
|
||||
altText="Some alt text"
|
||||
caption="A caption"
|
||||
lazy="{false}"
|
||||
width="normal"
|
||||
/>
|
||||
\`\`\`
|
||||
`,N=`An example of using \`FeaturePhoto\` in the Graphics Kit with a Google Doc.
|
||||
|
||||
\`\`\`yaml
|
||||
# Google doc block
|
||||
Type: photo
|
||||
Width: normal
|
||||
Src: images/shark.jpg
|
||||
AltText: The king of the sea
|
||||
Caption: Carcharodon carcharias - REUTERS
|
||||
\`\`\`
|
||||
|
||||
\`\`\`svelte
|
||||
<!-- App.svelte -->
|
||||
<script>
|
||||
// Add FeaturePhoto to imports from graphics-components
|
||||
import { FeaturePhoto } from '@reuters-graphics/graphics-components';
|
||||
|
||||
// These should be already imported for you.
|
||||
import content from '$locales/en/content.json';
|
||||
import { assets } from '$app/paths';
|
||||
<\/script>
|
||||
|
||||
{#each content.blocks as block}
|
||||
{#if block.Type === 'text'}
|
||||
<!-- ... other blocks -->
|
||||
|
||||
<!-- Copy/paste into your blocks loop! -->
|
||||
{:else if block.Type === 'photo'}
|
||||
<FeaturePhoto
|
||||
width="{block.Width}"
|
||||
src="{\`\${assets}/\${block.Src}\`}"
|
||||
altText="{block.AltText}"
|
||||
caption="{block.Caption}"
|
||||
/>
|
||||
<!-- END copy/paste -->
|
||||
{/if}
|
||||
{/each}
|
||||
\`\`\`
|
||||
`,H="If your photo is missing `altText` a small warning will overlay the image.\n",S=""+new URL("shark-BvMOz9gh.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 E({props:i}),{c(){m(s.$$.fragment)},m(e,p){f(s,e,p),r=!0},p(e,p){const a=p&2?U(n,[v(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,x,l,d;const $=[{title:"Components/FeaturePhoto"},{component:E},c[0]];let A={};for(let t=0;t<$.length;t+=1)A=y(A,$[t]);s=new z({props:A}),n=new O({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"}},M(N)];let D={};for(let t=0;t<P.length;t+=1)D=y(D,P[t]);a=new I({props:D});const F=[{name:"Missing altText"},{args:{src:S,width:"normal",caption:"Carcharodon carcharias - REUTERS"}},M(H)];let C={};for(let t=0;t<F.length;t+=1)C=y(C,F[t]);return l=new I({props:C}),{c(){m(s.$$.fragment),r=_(),m(n.$$.fragment),i=_(),m(e.$$.fragment),p=_(),m(a.$$.fragment),x=_(),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,x,o),f(l,t,o),d=!0},p(t,[o]){const R=o&1?U($,[$[0],$[1],v(t[0])]):{};s.$set(R);const b={};o&6&&(b.$$scope={dirty:o,ctx:t}),n.$set(b);const K={};a.$set(K);const Q={};l.$set(Q)},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(x)),g(s,t),g(n,t),g(e,t),g(a,t),g(l,t)}}}function X(c){return[{...B(L),argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]},textWidth:{control:"select",options:["normal","wide","wider","widest","fluid"]}}}]}class Y extends j{constructor(s){super(),G(this,s,X,V,q,{})}}const k=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"]}),at=k.meta,rt=["Default","QUICKIT","MissingAltText"],it=k.stories.Default,pt=k.stories.QUICKIT,lt=k.stories.MissingAltText;export{it as Default,lt as MissingAltText,pt as QUICKIT,rt as __namedExportsOrder,at as default};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
#g-_ai-chart-box.svelte-v5mpys.svelte-v5mpys,#g-_ai-chart-box.svelte-v5mpys .g-artboard.svelte-v5mpys{margin:0 auto}#g-_ai-chart-box.svelte-v5mpys p.svelte-v5mpys{margin:0}#g-_ai-chart-box.svelte-v5mpys .g-aiAbs.svelte-v5mpys{position:absolute}#g-_ai-chart-box.svelte-v5mpys .g-aiImg.svelte-v5mpys{position:absolute;top:0;display:block;width:100%!important;height:100%;background-size:contain;background-repeat:no-repeat}#g-_ai-chart-box.svelte-v5mpys .g-aiPointText p.svelte-v5mpys{white-space:nowrap}#g-_ai-chart-xs.svelte-v5mpys.svelte-v5mpys{position:relative;overflow:hidden}#g-_ai-chart-xs.svelte-v5mpys p.svelte-v5mpys{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;line-height:14px;height:auto;opacity:1;letter-spacing:0em;font-size:12px;text-align:left;color:#333;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;position:static}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle0.svelte-v5mpys{height:14px}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle1.svelte-v5mpys{font-style:italic;height:14px;text-align:center;color:#717375}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle2.svelte-v5mpys{font-weight:700;line-height:18px;height:18px;letter-spacing:.25em;font-size:15px}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle3.svelte-v5mpys{font-weight:700;line-height:16px;height:16px;font-size:13px}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle4.svelte-v5mpys{line-height:11px;height:11px;font-size:11px;text-align:right}#g-_ai-chart-sm.svelte-v5mpys.svelte-v5mpys{position:relative;overflow:hidden}#g-_ai-chart-sm.svelte-v5mpys p.svelte-v5mpys{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;line-height:17px;height:auto;opacity:1;letter-spacing:0em;font-size:14px;text-align:left;color:#333;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;position:static}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle0.svelte-v5mpys{height:17px}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle1.svelte-v5mpys{font-style:italic;height:17px;text-align:center;color:#717375}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle2.svelte-v5mpys{font-weight:700;line-height:15px;height:15px;letter-spacing:.25em;font-size:12px}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle3.svelte-v5mpys{font-weight:700;height:17px}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle4.svelte-v5mpys{font-weight:300;line-height:16px;height:16px;letter-spacing:.25em;font-size:13px;text-align:center;text-transform:uppercase;color:#86888b}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle5.svelte-v5mpys{line-height:14px;height:14px;font-size:12px}#g-_ai-chart-md.svelte-v5mpys.svelte-v5mpys{position:relative;overflow:hidden}#g-_ai-chart-md.svelte-v5mpys p.svelte-v5mpys{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;line-height:17px;height:auto;opacity:1;letter-spacing:0em;font-size:14px;text-align:left;color:#333;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;position:static}#g-_ai-chart-md.svelte-v5mpys .g-pstyle0.svelte-v5mpys{height:17px}#g-_ai-chart-md.svelte-v5mpys .g-pstyle1.svelte-v5mpys{font-style:italic;height:17px;text-align:center;color:#717375}#g-_ai-chart-md.svelte-v5mpys .g-pstyle2.svelte-v5mpys{font-weight:700;line-height:19px;height:19px;letter-spacing:.25em;font-size:16px}#g-_ai-chart-md.svelte-v5mpys .g-pstyle3.svelte-v5mpys{font-weight:300;height:17px;letter-spacing:.25em;text-align:center;text-transform:uppercase;color:#86888b}#g-_ai-chart-md.svelte-v5mpys .g-pstyle4.svelte-v5mpys{font-weight:700;line-height:19px;height:19px;font-size:16px}#g-_ai-chart-md.svelte-v5mpys .g-pstyle5.svelte-v5mpys{line-height:14px;height:14px;font-size:12px}div.demo-graphic.svelte-16z9wsi.svelte-16z9wsi{height:400px;background-color:#ddd;display:flex;align-items:center;justify-content:center}div.demo-graphic.svelte-16z9wsi img.svelte-16z9wsi{opacity:.4}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
.headline-wrapper.svelte-1xmn7bm .dek{max-width:660px}.headline-wrapper.svelte-1xmn7bm .dek p{margin-top:0;font-family:var(--theme-font-family-note);line-height:1.3;font-weight:300;margin-bottom:clamp(.88rem,.83rem + .21vw,1rem)}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
#g-graphic-box.svelte-16vt91t.svelte-16vt91t,#g-graphic-box.svelte-16vt91t .g-artboard.svelte-16vt91t{margin:0 auto}#g-graphic-box.svelte-16vt91t p.svelte-16vt91t{margin:0}#g-graphic-box.svelte-16vt91t .g-aiAbs.svelte-16vt91t{position:absolute}#g-graphic-box.svelte-16vt91t .g-aiImg.svelte-16vt91t{position:absolute;top:0;display:block;width:100%!important;height:100%;background-size:contain;background-repeat:no-repeat}#g-graphic-box.svelte-16vt91t .g-aiPointText p.svelte-16vt91t{white-space:nowrap}#g-graphic-xs.svelte-16vt91t.svelte-16vt91t{position:relative;overflow:hidden}#g-graphic-xs.svelte-16vt91t p.svelte-16vt91t{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:300;line-height:16px;opacity:1;letter-spacing:0em;font-size:14px;text-align:left;color:#000;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;height:auto;position:static}#g-graphic-xs.svelte-16vt91t .g-pstyle1.svelte-16vt91t{font-weight:200;height:16px;font-size:12px;text-align:center}#g-graphic-xs.svelte-16vt91t .g-pstyle2.svelte-16vt91t{font-weight:200;height:16px;font-size:12px;text-align:right}#g-graphic-xs.svelte-16vt91t .g-pstyle3.svelte-16vt91t{font-weight:600;height:16px;font-size:12px;text-align:center}#g-graphic-sm.svelte-16vt91t.svelte-16vt91t{position:relative;overflow:hidden}#g-graphic-sm.svelte-16vt91t p.svelte-16vt91t{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:200;line-height:16px;height:auto;opacity:1;letter-spacing:0em;font-size:12px;text-align:left;color:#000;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;position:static}#g-graphic-sm.svelte-16vt91t .g-pstyle0.svelte-16vt91t{height:16px}#g-graphic-sm.svelte-16vt91t .g-pstyle1.svelte-16vt91t{height:16px;text-align:center}#g-graphic-sm.svelte-16vt91t .g-pstyle2.svelte-16vt91t{height:16px;text-align:right}#g-graphic-sm.svelte-16vt91t .g-pstyle3.svelte-16vt91t{font-weight:600;height:16px;text-align:center}#g-graphic-md.svelte-16vt91t.svelte-16vt91t{position:relative;overflow:hidden}#g-graphic-md.svelte-16vt91t p.svelte-16vt91t{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:300;line-height:16px;opacity:1;letter-spacing:0em;font-size:14px;text-align:left;color:#000;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;height:auto;position:static}#g-graphic-md.svelte-16vt91t .g-pstyle0.svelte-16vt91t{font-weight:200;height:16px;font-size:12px}#g-graphic-md.svelte-16vt91t .g-pstyle1.svelte-16vt91t{font-weight:200;height:16px;font-size:12px;text-align:center}#g-graphic-md.svelte-16vt91t .g-pstyle2.svelte-16vt91t{font-weight:200;height:16px;font-size:12px;text-align:right}#g-graphic-md.svelte-16vt91t .g-pstyle3.svelte-16vt91t{font-weight:600;height:16px;font-size:12px;text-align:center}#g-graphic-lg.svelte-16vt91t.svelte-16vt91t{position:relative;overflow:hidden}#g-graphic-lg.svelte-16vt91t p.svelte-16vt91t{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:200;line-height:18px;height:auto;opacity:1;letter-spacing:0em;font-size:14px;text-align:left;color:#000;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;position:static}#g-graphic-lg.svelte-16vt91t .g-pstyle0.svelte-16vt91t{height:18px;text-align:center}#g-graphic-lg.svelte-16vt91t .g-pstyle1.svelte-16vt91t{height:18px}#g-graphic-lg.svelte-16vt91t .g-pstyle2.svelte-16vt91t{height:18px;text-align:right}#g-graphic-lg.svelte-16vt91t .g-pstyle3.svelte-16vt91t{font-weight:600;height:18px;text-align:center}#g-graphic-xl.svelte-16vt91t.svelte-16vt91t{position:relative;overflow:hidden}#g-graphic-xl.svelte-16vt91t p.svelte-16vt91t{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:200;line-height:18px;height:auto;opacity:1;letter-spacing:0em;font-size:14px;text-align:left;color:#000;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;position:static}#g-graphic-xl.svelte-16vt91t .g-pstyle0.svelte-16vt91t{height:18px;text-align:center}#g-graphic-xl.svelte-16vt91t .g-pstyle1.svelte-16vt91t{height:18px}#g-graphic-xl.svelte-16vt91t .g-pstyle2.svelte-16vt91t{height:18px;text-align:right}#g-graphic-xl.svelte-16vt91t .g-pstyle3.svelte-16vt91t{font-weight:600;height:18px;text-align:center}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
.infobox.svelte-13irrjh .article-block{border-color:var(--theme-colour-brand-rules)}.infobox.light.svelte-13irrjh .article-block{background-color:#fafafa}.infobox.dark.svelte-13irrjh .article-block{background-color:#fafafa1a}.infobox.svelte-13irrjh .header p{font-family:var(--theme-font-family-subhed);line-height:1.3;font-size:var(--theme-font-size-sm);color:var(--theme-colour-text-secondary);font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-top:clamp(1.13rem,1.06rem + .31vw,1.31rem);margin-bottom:clamp(.31rem,.31rem + 0vw,.31rem);margin-top:0;margin-bottom:0}.infobox.svelte-13irrjh .body p{margin-top:0;margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem);font-family:var(--theme-font-family-note);font-size:calc(.9 * var(--theme-font-size-base));color:var(--theme-colour-text-primary);line-height:1.3;font-size:var(--theme-font-size-sm);font-weight:300}.infobox.svelte-13irrjh .body p:last-child{margin-bottom:0}.infobox.svelte-13irrjh .body ul,.infobox.svelte-13irrjh .body ol{margin-top:0;margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem);font-family:var(--theme-font-family-note);font-size:calc(.9 * var(--theme-font-size-base));color:var(--theme-colour-text-primary);line-height:1.3;font-size:var(--theme-font-size-sm);font-weight:300;margin-bottom:0}.infobox.svelte-13irrjh .body ul li,.infobox.svelte-13irrjh .body ol li{margin-top:0;margin-top:clamp(.56rem,.52rem + .21vw,.69rem);margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem)}.infobox.svelte-13irrjh .body ul li:last-child,.infobox.svelte-13irrjh .body ol li:last-child{margin-bottom:0}.infobox.svelte-13irrjh .footer p{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-top:clamp(.31rem,.31rem + 0vw,.31rem);margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem)}.infobox.svelte-13irrjh .footer p:last-child{margin-bottom:0}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
div.ad-block.svelte-1fg4mkm.svelte-1fg4mkm.svelte-1fg4mkm{border-bottom:1px solid var(--theme-colour-brand-rules);border-top:1px solid var(--theme-colour-brand-rules)}div.ad-block.svelte-1fg4mkm div.ad-label.svelte-1fg4mkm.svelte-1fg4mkm{font-family:Knowledge,Source Sans Pro,Arial,Helvetica,sans-serif;font-size:14px;margin:6px 0;line-height:1.333;color:var(--theme-colour-text-secondary);width:100%;text-align:center}div.ad-block.svelte-1fg4mkm div.ad-container.svelte-1fg4mkm.svelte-1fg4mkm{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:415px}@media (max-width: 767.9px){div.ad-block.svelte-1fg4mkm div.ad-container.svelte-1fg4mkm.svelte-1fg4mkm{min-height:320px}}div.ad-block.svelte-1fg4mkm div.ad-container div.ad-slot__inner.svelte-1fg4mkm.svelte-1fg4mkm{margin:auto 0;width:100%;max-width:100%;flex:unset}div.ad-block.svelte-1fg4mkm div.ad-container div.ad-slot__inner.svelte-1fg4mkm>div.svelte-1fg4mkm{display:block}div.ad-block.svelte-1fg4mkm div.ad-container div.ad-slot__inner.svelte-1fg4mkm>div.svelte-1fg4mkm div[data-freestar-ad]{display:flex;flex-direction:column;justify-content:center;align-items:center}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import{S as I,i as S,s as w,c,m as p,t as f,a as u,d as $,q as _,o as A,f as v,h as k,j as g,n as D,k as y,l as N}from"./index-C9aKRT5A.js";import{g as T,a as x}from"./spread-CgU5AtxT.js";import{p as q,M as O,T as P,S as R,w as V}from"./collect-stories-ceFdpR5E.js";import{R as j,A as B}from"./ResponsiveAd-bwMiP1BO.js";import{B as E}from"./Block-C7biTRWl.js";import"./throttle-cOUaFLOV.js";import"./isObject-C3e4t58V.js";import"./isSymbol-Br3Fhm6g.js";import"./toNumber-BrygkUtK.js";const F=`Add programmatic ads inline on your page.
|
||||
|
||||
> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
|
||||
|
||||
\`\`\`svelte
|
||||
<!-- +page.svelte -->
|
||||
<script>
|
||||
import { AdScripts } from '@reuters-graphics/graphics-components';
|
||||
<\/script>
|
||||
|
||||
<!-- Include AdScripts only ONCE per page for any type of ad -->
|
||||
<AdScripts />
|
||||
\`\`\`
|
||||
|
||||
\`\`\`svelte
|
||||
<!-- App.svelte -->
|
||||
<script>
|
||||
import { InlineAd } from '@reuters-graphics/graphics-components';
|
||||
|
||||
export let embedded = false;
|
||||
<\/script>
|
||||
|
||||
{#each content.blocks as block}
|
||||
<!-- ... -->
|
||||
|
||||
{#if block.Type === 'inline-ad'}
|
||||
<!-- Check if in an embed context! -->
|
||||
{#if !embedded}
|
||||
<InlineAd />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- ... -->
|
||||
{/each}
|
||||
\`\`\`
|
||||
|
||||
You may add **up to three** inline ads per page, but must set the \`n\` prop on multiple ads in sequential order, 1 - 3.
|
||||
|
||||
\`\`\`svelte
|
||||
<!-- First inline ad on the page -->
|
||||
<InlineAd n="{1}" />
|
||||
<!-- ... second ... -->
|
||||
<InlineAd n="{2}" />
|
||||
<!-- ... third and final. -->
|
||||
<InlineAd n="{3}" />
|
||||
\`\`\`
|
||||
`;function U(d){let e,a,n,s,r,o,i,l;return i=new j({props:{desktopPlacementName:d[2]}}),{c(){e=_("div"),a=_("div"),a.textContent="Advertisement · Scroll to continue",n=A(),s=_("div"),r=_("div"),o=_("div"),c(i.$$.fragment),v(a,"class","ad-label svelte-1fg4mkm"),v(o,"class","svelte-1fg4mkm"),v(r,"class","ad-slot__inner svelte-1fg4mkm"),v(s,"class","ad-container svelte-1fg4mkm"),v(e,"class","ad-block svelte-1fg4mkm")},m(t,m){k(t,e,m),g(e,a),g(e,n),g(e,s),g(s,r),g(r,o),p(i,o,null),l=!0},p:D,i(t){l||(f(i.$$.fragment,t),l=!0)},o(t){u(i.$$.fragment,t),l=!1},d(t){t&&y(e),$(i)}}}function Y(d){let e,a;return e=new E({props:{id:d[0],class:"freestar-adslot "+d[1],$$slots:{default:[U]},$$scope:{ctx:d}}}),{c(){c(e.$$.fragment)},m(n,s){p(e,n,s),a=!0},p(n,[s]){const r={};s&1&&(r.id=n[0]),s&2&&(r.class="freestar-adslot "+n[1]),s&16&&(r.$$scope={dirty:s,ctx:n}),e.$set(r)},i(n){a||(f(e.$$.fragment,n),a=!0)},o(n){u(e.$$.fragment,n),a=!1},d(n){$(e,n)}}}function z(d,e,a){let{id:n=""}=e,{n:s=1}=e,{class:r="my-12"}=e;const o=`reuters_desktop_native_${s}`;return d.$$set=i=>{"id"in i&&a(0,n=i.id),"n"in i&&a(3,s=i.n),"class"in i&&a(1,r=i.class)},[n,r,o,s]}class b extends I{constructor(e){super(),S(this,e,z,Y,w,{id:0,n:3,class:1})}}b.__docgen={version:3,name:"InlineAd.svelte",data:[{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:""},{keywords:[],visibility:"public",description:"Number of the inline ad in sequence. Use to add multiple inline ads to a page.",name:"n",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:1},{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:"my-12"}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function G(d){let e,a,n,s,r,o,i;return a=new B({}),s=new b({}),o=new b({}),{c(){e=_("div"),c(a.$$.fragment),n=A(),c(s.$$.fragment),r=A(),c(o.$$.fragment)},m(l,t){k(l,e,t),p(a,e,null),g(e,n),p(s,e,null),g(e,r),p(o,e,null),i=!0},p:D,i(l){i||(f(a.$$.fragment,l),f(s.$$.fragment,l),f(o.$$.fragment,l),i=!0)},o(l){u(a.$$.fragment,l),u(s.$$.fragment,l),u(o.$$.fragment,l),i=!1},d(l){l&&y(e),$(a),$(s),$(o)}}}function H(d){let e,a,n,s,r,o;const i=[{title:"Components/InlineAd"},{component:b},d[0]];let l={};for(let t=0;t<i.length;t+=1)l=N(l,i[t]);return e=new O({props:l}),n=new P({props:{$$slots:{default:[G]},$$scope:{ctx:d}}}),r=new R({props:{name:"Default"}}),{c(){c(e.$$.fragment),a=A(),c(n.$$.fragment),s=A(),c(r.$$.fragment)},m(t,m){p(e,t,m),k(t,a,m),p(n,t,m),k(t,s,m),p(r,t,m),o=!0},p(t,[m]){const M=m&1?T(i,[i[0],i[1],x(t[0])]):{};e.$set(M);const h={};m&2&&(h.$$scope={dirty:m,ctx:t}),n.$set(h)},i(t){o||(f(e.$$.fragment,t),f(n.$$.fragment,t),f(r.$$.fragment,t),o=!0)},o(t){u(e.$$.fragment,t),u(n.$$.fragment,t),u(r.$$.fragment,t),o=!1},d(t){t&&(y(a),y(s)),$(e,t),$(n,t),$(r,t)}}}function J(d){return[{...V(F)}]}class K extends I{constructor(e){super(),S(this,e,J,H,w,{})}}const C=q(K,{meta:{title:"Components/InlineAd"},stories:{"tpl:default":{name:"default",template:!0,source:`<div>
|
||||
<AdScripts />
|
||||
<InlineAd />
|
||||
<InlineAd />
|
||||
</div>`,hasArgs:!1},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Template","Story","Meta","adDocs","AdScripts","InlineAd","withComponentDocs"]}),ae=C.meta,ie=["Default"],re=C.stories.Default;export{re as Default,ie as __namedExportsOrder,ae as default};
|
||||
|
|
@ -1 +0,0 @@
|
|||
.leaderboard__sticky.svelte-g0kawd.svelte-g0kawd{position:initial;top:-275px;transition:top .4s ease-in-out;z-index:1030}.leaderboard__sticky.sticky.svelte-g0kawd.svelte-g0kawd{position:sticky;top:0}.leaderboard__sticky.unstick.svelte-g0kawd.svelte-g0kawd{top:-275px}div.ad-block.svelte-g0kawd.svelte-g0kawd{width:100%;background:#f4f4f4;display:flex;justify-content:center;flex-direction:column;align-items:center;height:var(--height)}div.ad-block.svelte-g0kawd .ad-slot__container.svelte-g0kawd{height:0px;min-height:var(--height);align-items:center;display:flex;justify-content:center}div.ad-block.svelte-g0kawd .ad-slot__container .ad-slot__inner.svelte-g0kawd{max-width:100%}div.svelte-9hmzs6{min-height:200vh;background-size:40px 40px;background-image:linear-gradient(to right,lightgrey 1px,transparent 1px),linear-gradient(to bottom,lightgrey 1px,transparent 1px)}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import{S as D,i as C,s as T,Q as I,q as u,c as _,f,g as L,C as k,h as b,j as $,m as g,O as N,t as v,a as w,k as A,d as y,p as O,l as H,o as S,n as R}from"./index-C9aKRT5A.js";import{g as V,a as W}from"./spread-CgU5AtxT.js";import{p as j,M as q,T as P,S as Y,w as Q}from"./collect-stories-ceFdpR5E.js";import{R as B,A as F}from"./ResponsiveAd-bwMiP1BO.js";import{g as G}from"./globals-D0QH3NT1.js";import"./throttle-cOUaFLOV.js";import"./isObject-C3e4t58V.js";import"./isSymbol-Br3Fhm6g.js";import"./toNumber-BrygkUtK.js";const J=`Add a leaderboard ad to your page.
|
||||
|
||||
> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
|
||||
|
||||
\`\`\`svelte
|
||||
<!-- +page.svelte -->
|
||||
<script>
|
||||
import {
|
||||
AdScripts,
|
||||
LeaderboardAd,
|
||||
SiteHeader,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
<\/script>
|
||||
|
||||
<!-- Include AdScripts only ONCE per page for any type of ad -->
|
||||
<AdScripts />
|
||||
|
||||
<!-- ALWAYS put the leaderboard ad directly above the SiteHeader -->
|
||||
<LeaderboardAd />
|
||||
<SiteHeader />
|
||||
\`\`\`
|
||||
`,{window:M}=G;function K(o){let e,a,r,d,i,s,l,c,t,n;return I(o[6]),s=new B({props:{desktopPlacementName:U}}),{c(){e=u("div"),a=u("div"),r=u("div"),d=u("div"),i=u("div"),_(s.$$.fragment),f(d,"class","ad-slot__inner svelte-g0kawd"),f(r,"class","ad-slot__container svelte-g0kawd"),f(a,"class","ad-block svelte-g0kawd"),f(e,"class",l="freestar-adslot leaderboard__sticky "+o[1]+" svelte-g0kawd"),f(e,"id",o[0]),L(e,"--height",o[5]+"px"),k(e,"sticky",o[3]),k(e,"unstick",o[4])},m(p,m){b(p,e,m),$(e,a),$(a,r),$(r,d),$(d,i),g(s,i,null),c=!0,t||(n=N(M,"resize",o[6]),t=!0)},p(p,[m]){(!c||m&2&&l!==(l="freestar-adslot leaderboard__sticky "+p[1]+" svelte-g0kawd"))&&f(e,"class",l),(!c||m&1)&&f(e,"id",p[0]),(!c||m&32)&&L(e,"--height",p[5]+"px"),(!c||m&10)&&k(e,"sticky",p[3]),(!c||m&18)&&k(e,"unstick",p[4])},i(p){c||(v(s.$$.fragment,p),c=!0)},o(p){w(s.$$.fragment,p),c=!1},d(p){p&&A(e),y(s),t=!1,n()}}}const U="reuters_desktop_leaderboard_atf";function X(o,e,a){let r,{id:d=""}=e,{class:i=""}=e,s=1200,l=!1,c=!1;O(()=>{const n=()=>{window.scrollY>=r*1.1&&(a(3,l=!0),setTimeout(()=>{a(4,c=!0),setTimeout(()=>{a(3,l=!1)},400)},1500),window.removeEventListener("scroll",n))};return window.addEventListener("scroll",n),()=>{window.removeEventListener("scroll",n)}});function t(){a(2,s=M.innerWidth)}return o.$$set=n=>{"id"in n&&a(0,d=n.id),"class"in n&&a(1,i=n.class)},o.$$.update=()=>{o.$$.dirty&4&&a(5,r=s<1024?110:275)},[d,i,s,l,c,r,t]}class h extends D{constructor(e){super(),C(this,e,X,K,T,{id:0,class:1})}}h.__docgen={version:3,name:"LeaderboardAd.svelte",data:[{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:""},{keywords:[],visibility:"public",description:"Add a class to target with SCSS.",name:"cls",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 Z(o){let e,a,r,d,i;return a=new F({}),d=new h({}),{c(){e=u("div"),_(a.$$.fragment),r=S(),_(d.$$.fragment),f(e,"class","svelte-9hmzs6")},m(s,l){b(s,e,l),g(a,e,null),$(e,r),g(d,e,null),i=!0},p:R,i(s){i||(v(a.$$.fragment,s),v(d.$$.fragment,s),i=!0)},o(s){w(a.$$.fragment,s),w(d.$$.fragment,s),i=!1},d(s){s&&A(e),y(a),y(d)}}}function x(o){let e,a,r,d,i,s;const l=[{title:"Components/LeaderboardAd"},{component:h},o[0]];let c={};for(let t=0;t<l.length;t+=1)c=H(c,l[t]);return e=new q({props:c}),r=new P({props:{$$slots:{default:[Z]},$$scope:{ctx:o}}}),i=new Y({props:{name:"Default"}}),{c(){_(e.$$.fragment),a=S(),_(r.$$.fragment),d=S(),_(i.$$.fragment)},m(t,n){g(e,t,n),b(t,a,n),g(r,t,n),b(t,d,n),g(i,t,n),s=!0},p(t,[n]){const p=n&1?V(l,[l[0],l[1],W(t[0])]):{};e.$set(p);const m={};n&2&&(m.$$scope={dirty:n,ctx:t}),r.$set(m)},i(t){s||(v(e.$$.fragment,t),v(r.$$.fragment,t),v(i.$$.fragment,t),s=!0)},o(t){w(e.$$.fragment,t),w(r.$$.fragment,t),w(i.$$.fragment,t),s=!1},d(t){t&&(A(a),A(d)),y(e,t),y(r,t),y(i,t)}}}function ee(o){return[{...Q(J)}]}class E extends D{constructor(e){super(),C(this,e,ee,x,T,{})}}E.__docgen={version:3,name:"LeaderboardAd.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const z=j(E,{meta:{title:"Components/LeaderboardAd"},stories:{"tpl:default":{name:"default",template:!0,source:`<div>
|
||||
<AdScripts />
|
||||
<LeaderboardAd />
|
||||
</div>`,hasArgs:!1},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","adDocs","AdScripts","LeaderboardAd","withComponentDocs"]}),ce=z.meta,pe=["Default"],me=z.stories.Default;export{me as Default,pe as __namedExportsOrder,ce as default};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
div.svelte-16j2cvj{display:contents}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import{S,i as T,s as j,l as _,c,o as h,m,h as w,t as d,a as u,k,d as f}from"./index-C9aKRT5A.js";import{g as y,a as v}from"./spread-CgU5AtxT.js";import{p as B,M as C,T as x,S as L,w as A}from"./collect-stories-ceFdpR5E.js";import{M}from"./Markdown-BNYiGaXJ.js";import{B as q}from"./Block-C7biTRWl.js";const H=`The Markdown component renders markdown into HTML. That's it!
|
||||
|
||||
---
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { Markdown } from '@reuters-graphics/graphics-components';
|
||||
<\/script>
|
||||
|
||||
<Markdown source="{'My markdown **string**!'}" />
|
||||
\`\`\`
|
||||
|
||||
... well, almost.
|
||||
|
||||
Owing 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.
|
||||
|
||||
For 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.
|
||||
|
||||
\`\`\`javascript
|
||||
// +layout.js
|
||||
import { staticMarkdown } from '@reuters-graphics/graphics-components';
|
||||
import { building } from '$app/environment';
|
||||
|
||||
/** @type {import('./$types').LayoutLoad} */
|
||||
export const load = async () => {
|
||||
// Set the staticMarkdown store with the value of building.
|
||||
staticMarkdown.set(building);
|
||||
|
||||
// Now this content will correctly refresh when a reader loads your page.
|
||||
const resp = await fetch(
|
||||
'https://graphics.thomsonreuters.com/data/my-page-content.json'
|
||||
);
|
||||
const content = await resp.json();
|
||||
|
||||
return { content };
|
||||
};
|
||||
\`\`\`
|
||||
|
||||
If 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.
|
||||
`;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 $={};for(let e=0;e<l.length;e+=1)$=_($,l[e]);return t=new C({props:$}),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 g={};a&6&&(g.$$scope={dirty:a,ctx:e}),s.$set(g)},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=B(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"]}),Q=b.meta,R=["Default"],U=b.stories.Default;export{U as Default,R as __namedExportsOrder,Q as default};
|
||||
|
|
@ -1 +0,0 @@
|
|||
div.svelte-18wc8xh{width:100%;padding:0 15px}
|
||||
|
|
@ -1 +0,0 @@
|
|||
import{S as v,i as h,s as g,D as I,h as _,r as w,a as u,u as F,t as c,k as p,y as m,z as b,A as k,B as y,q as P,f as q}from"./index-C9aKRT5A.js";function R(a){let t;const n=a[2].default,s=m(n,a,a[1],null);return{c(){s&&s.c()},m(e,l){s&&s.m(e,l),t=!0},p(e,l){s&&s.p&&(!t||l&2)&&b(s,n,e,e[1],t?y(n,e[1],l,null):k(e[1]),null)},i(e){t||(c(s,e),t=!0)},o(e){u(s,e),t=!1},d(e){s&&s.d(e)}}}function S(a){let t,n;const s=a[2].default,e=m(s,a,a[1],null);return{c(){t=P("div"),e&&e.c(),q(t,"class","svelte-18wc8xh")},m(l,i){_(l,t,i),e&&e.m(t,null),n=!0},p(l,i){e&&e.p&&(!n||i&2)&&b(e,s,l,l[1],n?y(s,l[1],i,null):k(l[1]),null)},i(l){n||(c(e,l),n=!0)},o(l){u(e,l),n=!1},d(l){l&&p(t),e&&e.d(l)}}}function z(a){let t,n,s,e;const l=[S,R],i=[];function d(o,r){return o[0]?0:1}return t=d(a),n=i[t]=l[t](a),{c(){n.c(),s=I()},m(o,r){i[t].m(o,r),_(o,s,r),e=!0},p(o,[r]){let f=t;t=d(o),t===f?i[t].p(o,r):(w(),u(i[f],1,1,()=>{i[f]=null}),F(),n=i[t],n?n.p(o,r):(n=i[t]=l[t](o),n.c()),c(n,1),n.m(s.parentNode,s))},i(o){e||(c(n),e=!0)},o(o){u(n),e=!1},d(o){o&&p(s),i[t].d(o)}}}function A(a,t,n){let{$$slots:s={},$$scope:e}=t,{containerIsFluid:l=!0}=t;return a.$$set=i=>{"containerIsFluid"in i&&n(0,l=i.containerIsFluid),"$$scope"in i&&n(1,e=i.$$scope)},[l,e,s]}class B extends v{constructor(t){super(),h(this,t,A,z,g,{containerIsFluid:0})}}B.__docgen={version:3,name:"PaddingReset.svelte",data:[{keywords:[],visibility:"public",description:"If parent container is fluid, which resets the padding around contained elements.",name:"containerIsFluid",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!0}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"Padded content",name:"default"}],refs:[]};export{B as P};
|
||||
|
|
@ -1 +0,0 @@
|
|||
div.svelte-2p4lln{height:30px;width:100%;margin-bottom:2px}div.outer.svelte-2p4lln{background:gray}div.inner.svelte-2p4lln{background:salmon}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import{S as y,i as A,s as S,l as v,c,o as h,m,h as $,t as f,a as u,k as _,d as g,q as k,f as P,n as x}from"./index-C9aKRT5A.js";import{g as C,a as I}from"./spread-CgU5AtxT.js";import{p as M,w as T,M as F,T as j,S as q}from"./collect-stories-ceFdpR5E.js";import{P as R}from"./PaddingReset-CiOBBFtT.js";import{B as E}from"./Block-C7biTRWl.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.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
|
||||
<\/script>
|
||||
|
||||
<Block width="fluid">
|
||||
<!-- An edge-to-edge image -->
|
||||
<img src="https//..." alt="..." width="100%" />
|
||||
<PaddingReset>
|
||||
<p>A caption for the image that will still be padded.</p>
|
||||
</PaddingReset>
|
||||
</Block>
|
||||
\`\`\`
|
||||
|
||||
You can also add the padding conditionally by using the \`containerIsFluid\` prop, which is what many other components in this library do.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
|
||||
|
||||
export let src = 'https://...';
|
||||
export let width = 'fluid';
|
||||
<\/script>
|
||||
|
||||
<Block width="{width}">
|
||||
<img src="{src}" alt="..." width="100%" />
|
||||
<PaddingReset containerIsFluid="{width === 'fluid'}">
|
||||
<p>A caption for the image that will be padded when Block is fluid.</p>
|
||||
</PaddingReset>
|
||||
</Block>
|
||||
\`\`\`
|
||||
`;function Y(l){let t;return{c(){t=k("div"),P(t,"class","inner svelte-2p4lln")},m(a,s){$(a,t,s)},p:x,d(a){a&&_(t)}}}function z(l){let t,a,s,o;const i=[l[0]];let d={$$slots:{default:[Y]},$$scope:{ctx:l}};for(let n=0;n<i.length;n+=1)d=v(d,i[n]);return s=new R({props:d}),{c(){t=k("div"),a=h(),c(s.$$.fragment),P(t,"class","outer svelte-2p4lln")},m(n,r){$(n,t,r),$(n,a,r),m(s,n,r),o=!0},p(n,r){const e=r&1?C(i,[I(n[0])]):{};r&2&&(e.$$scope={dirty:r,ctx:n}),s.$set(e)},i(n){o||(f(s.$$.fragment,n),o=!0)},o(n){u(s.$$.fragment,n),o=!1},d(n){n&&(_(t),_(a)),g(s,n)}}}function G(l){let t,a;return t=new E({props:{width:"fluid",$$slots:{default:[z]},$$scope:{ctx:l}}}),{c(){c(t.$$.fragment)},m(s,o){m(t,s,o),a=!0},p(s,o){const i={};o&3&&(i.$$scope={dirty:o,ctx:s}),t.$set(i)},i(s){a||(f(t.$$.fragment,s),a=!0)},o(s){u(t.$$.fragment,s),a=!1},d(s){g(t,s)}}}function H(l){let t,a,s,o,i,d;const n=[{title:"Components/PaddingReset"},{component:R},T(O)];let r={};for(let e=0;e<n.length;e+=1)r=v(r,n[e]);return t=new F({props:r}),s=new j({props:{$$slots:{default:[G,({args:e})=>({0:e}),({args:e})=>e?1:0]},$$scope:{ctx:l}}}),i=new q({props:{name:"Default",args:{containerIsFluid:!0}}}),{c(){c(t.$$.fragment),a=h(),c(s.$$.fragment),o=h(),c(i.$$.fragment)},m(e,p){m(t,e,p),$(e,a,p),m(s,e,p),$(e,o,p),m(i,e,p),d=!0},p(e,[p]){const D={};t.$set(D);const w={};p&3&&(w.$$scope={dirty:p,ctx:e}),s.$set(w)},i(e){d||(f(t.$$.fragment,e),f(s.$$.fragment,e),f(i.$$.fragment,e),d=!0)},o(e){u(t.$$.fragment,e),u(s.$$.fragment,e),u(i.$$.fragment,e),d=!1},d(e){e&&(_(a),_(o)),g(t,e),g(s,e),g(i,e)}}}class B extends y{constructor(t){super(),A(this,t,null,H,S,{})}}B.__docgen={version:3,name:"PaddingReset.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const b=M(B,{meta:{title:"Components/PaddingReset"},stories:{"tpl:default":{name:"default",template:!0,source:`<Block width="fluid">
|
||||
<div class="outer"></div>
|
||||
<PaddingReset {...args}>
|
||||
<div class="inner"></div>
|
||||
</PaddingReset>
|
||||
</Block>`,hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","PaddingReset","Block","withComponentDocs"]}),U=b.meta,V=["Default"],W=b.stories.Default;export{W as Default,V as __namedExportsOrder,U as default};
|
||||
|
|
@ -1 +0,0 @@
|
|||
@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.carousel-container.svelte-1huy73i .photo-slide figure span.credit.svelte-1huy73i{bottom:0;left:0;color:#fff;text-shadow:-1px -1px 0 #333,1px -1px 0 #333,-1px 1px 0 #333,1px 1px 0 #333}.carousel-container.svelte-1huy73i .photo-slide figure span.credit.contain-fit.svelte-1huy73i{left:50%;transform:translate(-50%)}.carousel-container.svelte-1huy73i .splide{max-height:100%}.carousel-container.svelte-1huy73i li{padding:0}.carousel-container.svelte-1huy73i .splide__arrows{width:275px;margin:0 auto;display:flex;justify-content:space-between}.carousel-container.svelte-1huy73i .splide__arrows button{display:flex;font-size:14px;height:30px;width:30px;justify-content:center;align-items:center;border:1px solid transparent;border-radius:50%;background-color:transparent;cursor:pointer;color:var(--theme-colour-text-secondary);opacity:.4}.carousel-container.svelte-1huy73i .splide__arrows button.splide__arrow--prev{padding-right:7px}.carousel-container.svelte-1huy73i .splide__arrows button.splide__arrow--next{padding-left:7px}.carousel-container.svelte-1huy73i .splide__arrows button:hover{opacity:1;border-color:var(--theme-colour-text-secondary);color:var(--theme-colour-text-secondary)}.carousel-container.svelte-1huy73i .splide__arrows button:disabled{opacity:.4}.carousel-container.svelte-1huy73i .splide__arrows button:disabled:hover{border-color:transparent}.carousel-container.svelte-1huy73i ul.splide__pagination{width:200px;padding:0;text-align:center;margin:-26px auto 0;display:flex;flex-wrap:nowrap}.carousel-container.svelte-1huy73i ul.splide__pagination li{flex-grow:1;margin-top:-9px}.carousel-container.svelte-1huy73i ul.splide__pagination li button{width:100%;height:7px;border-radius:0;padding:0;border:1px solid var(--theme-colour-background);background:var(--theme-colour-text-secondary);opacity:.4}.carousel-container.svelte-1huy73i ul.splide__pagination li button.is-active{opacity:1}p.svelte-6ggfq3{position:absolute;color:#fff;background-color:#0009;font-family:sans-serif;font-size:.8rem;padding:0 5px}p.custom-credit.svelte-6ggfq3{top:0;right:0}p.custom-caption.svelte-6ggfq3{bottom:5px;left:0}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
div.photopack-container.svelte-1fn13c0 div.photopack-row figure div.alt-warning.svelte-1fn13c0{background-color:red;color:#fff;top:0;right:0}.notes.svelte-1fn13c0 .photopack-captions-container .caption p{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-top:clamp(.31rem,.31rem + 0vw,.31rem);margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem)}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,30 +0,0 @@
|
|||
import{S as P,i as v,s as b,p as k,l as w,c,o as y,m as d,h as $,t as u,a as f,k as g,d as h,q as x}from"./index-C9aKRT5A.js";import{g as M,a as j}from"./spread-CgU5AtxT.js";import{b as A,p as H,w as T,M as q,T as N,S as E}from"./collect-stories-ceFdpR5E.js";import{p as I}from"./pym.v1-CD-t3sYy.js";import"./_commonjsHelpers-BosuxZz1.js";const O=`A Pym.js child instance for embeddables.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { PymChild } from '@reuters-graphics/graphics-components';
|
||||
<\/script>
|
||||
|
||||
<PymChild polling="{500}" />
|
||||
\`\`\`
|
||||
|
||||
You can access the Pym.js child through its store in other components to send custom height updates to parent frames:
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import {
|
||||
PymChild,
|
||||
pymChildStore,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
|
||||
const updateHeight = () => {
|
||||
if ($pymChildStore) $pymChildStore.sendHeight();
|
||||
};
|
||||
<\/script>
|
||||
|
||||
<PymChild />
|
||||
|
||||
<button on:click="{updateHeight}">Update height</button>
|
||||
\`\`\`
|
||||
`,U=A(null);function V(p,t,r){let{polling:n=500}=t,l;return k(()=>{l=new I.Child({polling:n}),U.set(l)}),p.$$set=o=>{"polling"in o&&r(0,n=o.polling)},[n]}class _ extends P{constructor(t){super(),v(this,t,V,null,b,{polling:0})}}_.__docgen={version:3,name:"PymChild.svelte",data:[{keywords:[],visibility:"public",description:"Pym.js polling interval",name:"polling",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:500}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function Y(p){let t,r,n,l;const o=[p[0]];let i={};for(let s=0;s<o.length;s+=1)i=w(i,o[s]);return t=new _({props:i}),{c(){c(t.$$.fragment),r=y(),n=x("div"),n.textContent="Nothing to see here. 😎"},m(s,a){d(t,s,a),$(s,r,a),$(s,n,a),l=!0},p(s,a){const e=a&1?M(o,[j(s[0])]):{};t.$set(e)},i(s){l||(u(t.$$.fragment,s),l=!0)},o(s){f(t.$$.fragment,s),l=!1},d(s){s&&(g(r),g(n)),h(t,s)}}}function z(p){let t,r,n,l,o,i;const s=[{title:"Components/PymChild"},{component:_},T(O)];let a={};for(let e=0;e<s.length;e+=1)a=w(a,s[e]);return t=new q({props:a}),n=new N({props:{$$slots:{default:[Y,({args:e})=>({0:e}),({args:e})=>e?1:0]},$$scope:{ctx:p}}}),o=new E({props:{name:"Default"}}),{c(){c(t.$$.fragment),r=y(),c(n.$$.fragment),l=y(),c(o.$$.fragment)},m(e,m){d(t,e,m),$(e,r,m),d(n,e,m),$(e,l,m),d(o,e,m),i=!0},p(e,[m]){const S={};t.$set(S);const C={};m&3&&(C.$$scope={dirty:m,ctx:e}),n.$set(C)},i(e){i||(u(t.$$.fragment,e),u(n.$$.fragment,e),u(o.$$.fragment,e),i=!0)},o(e){f(t.$$.fragment,e),f(n.$$.fragment,e),f(o.$$.fragment,e),i=!1},d(e){e&&(g(r),g(l)),h(t,e),h(n,e),h(o,e)}}}class B extends P{constructor(t){super(),v(this,t,null,z,b,{})}}const D=H(B,{meta:{title:"Components/PymChild"},stories:{"tpl:default":{name:"default",template:!0,source:`<PymChild {...args} />
|
||||
<div>Nothing to see here. 😎</div>`,hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","PymChild","withComponentDocs"]}),Q=D.meta,R=["Default"],W=D.stories.Default;export{W as Default,R as __namedExportsOrder,Q as default};
|
||||
|
|
@ -1 +0,0 @@
|
|||
div.heading.stacked.svelte-k1j779.svelte-k1j779{max-width:450px}.referral-container.svelte-k1j779 a.svelte-k1j779{text-decoration:none}.referral-container.stacked.svelte-k1j779 .referral.svelte-k1j779{width:100%}.referral-container.stacked.svelte-k1j779 .referral .headline.svelte-k1j779{width:calc(100% - 7rem)}.referral-container.svelte-k1j779 .referral.svelte-k1j779{display:block;width:calc(50% - 30px);max-width:450px;margin-top:clamp(.31rem,.31rem + 0vw,.31rem);margin-bottom:clamp(.31rem,.31rem + 0vw,.31rem)}.referral-container.svelte-k1j779 .referral:hover .title.svelte-k1j779{text-decoration:underline}.referral-container.svelte-k1j779 .referral:hover img.svelte-k1j779{filter:brightness(85%)}.referral-container.svelte-k1j779 .referral .headline.svelte-k1j779{display:inline-block;width:calc(100% - 9rem);padding-right:clamp(.56rem,.52rem + .21vw,.69rem)}.referral-container.svelte-k1j779 .referral .headline .kicker.svelte-k1j779{font-size:var(--theme-font-size-xxs)}.referral-container.svelte-k1j779 .referral .headline .title.svelte-k1j779{font-weight:500;font-size:var(--theme-font-size-sm);color:var(--theme-colour-text-primary)}.referral-container.svelte-k1j779 .referral .headline .publish-time.svelte-k1j779{font-size:var(--theme-font-size-xxs)}.referral-container.svelte-k1j779 .referral .image-container.svelte-k1j779{border-radius:.25rem;border:1px solid var(--theme-colour-brand-rules);width:9rem}.referral-container.svelte-k1j779 .referral .image-container.xs.svelte-k1j779{width:7rem}.referral-container.svelte-k1j779 .referral .image-container img.svelte-k1j779{width:100%;height:100%;object-fit:cover;transition:filter .1s}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
div.freestar-adslot:has(.unfulfilled-ad){display:none}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,12 +0,0 @@
|
|||
import{S as y,i as C,s as S,l as D,c as m,o as h,m as u,h as d,t as i,a as f,k as R,d as g}from"./index-C9aKRT5A.js";import{g as v,a as M}from"./spread-CgU5AtxT.js";import{p as x,w as T,M as b,T as A,S as j}from"./collect-stories-ceFdpR5E.js";import{R as G}from"./ReutersGraphicsLogo-BBr3phy9.js";const k=`Reuters Graphics' official logo.
|
||||
|
||||
> Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-reuterslogo--default) component.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { ReutersGraphicsLogo } from '@reuters-graphics/graphics-components';
|
||||
<\/script>
|
||||
|
||||
<ReutersGraphicsLogo />
|
||||
\`\`\`
|
||||
`;function q(l){let s,r;const o=[l[0]];let p={};for(let t=0;t<o.length;t+=1)p=D(p,o[t]);return s=new G({props:p}),{c(){m(s.$$.fragment)},m(t,a){u(s,t,a),r=!0},p(t,a){const c=a&1?v(o,[M(t[0])]):{};s.$set(c)},i(t){r||(i(s.$$.fragment,t),r=!0)},o(t){f(s.$$.fragment,t),r=!1},d(t){g(s,t)}}}function E(l){let s,r,o,p,t,a;const c=[{title:"Components/ReutersGraphicsLogo"},{component:G},T(k)];let $={};for(let e=0;e<c.length;e+=1)$=D($,c[e]);return s=new b({props:$}),o=new A({props:{$$slots:{default:[q,({args:e})=>({0:e}),({args:e})=>e?1:0]},$$scope:{ctx:l}}}),t=new j({props:{name:"Default",args:{}}}),{c(){m(s.$$.fragment),r=h(),m(o.$$.fragment),p=h(),m(t.$$.fragment)},m(e,n){u(s,e,n),d(e,r,n),u(o,e,n),d(e,p,n),u(t,e,n),a=!0},p(e,[n]){const w={};s.$set(w);const _={};n&3&&(_.$$scope={dirty:n,ctx:e}),o.$set(_)},i(e){a||(i(s.$$.fragment,e),i(o.$$.fragment,e),i(t.$$.fragment,e),a=!0)},o(e){f(s.$$.fragment,e),f(o.$$.fragment,e),f(t.$$.fragment,e),a=!1},d(e){e&&(R(r),R(p)),g(s,e),g(o,e),g(t,e)}}}class F extends y{constructor(s){super(),C(this,s,null,E,S,{})}}const L=x(F,{meta:{title:"Components/ReutersGraphicsLogo"},stories:{"tpl:default":{name:"default",template:!0,source:"<ReutersGraphicsLogo {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","ReutersGraphicsLogo","withComponentDocs"]}),H=L.meta,J=["Default"],K=L.stories.Default;export{K as Default,J as __namedExportsOrder,H as default};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,10 +0,0 @@
|
|||
import{S as v,i as M,s as y,l as h,c as u,o as d,m as f,h as D,t as c,a as i,k as R,d as g}from"./index-C9aKRT5A.js";import{g as L,a as w}from"./spread-CgU5AtxT.js";import{p as x,M as A,T as P,S as b,w as j}from"./collect-stories-ceFdpR5E.js";import{R as C}from"./ReutersLogo-CDQ5t4Ty.js";const k=`The official home of the Reuters logo.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { ReutersLogo } from '@reuters-graphics/graphics-components';
|
||||
<\/script>
|
||||
|
||||
<ReutersLogo />
|
||||
\`\`\`
|
||||
`;function q(p){let o,n;const s=[p[1]];let l={};for(let t=0;t<s.length;t+=1)l=h(l,s[t]);return o=new C({props:l}),{c(){u(o.$$.fragment)},m(t,a){f(o,t,a),n=!0},p(t,a){const m=a&2?L(s,[w(t[1])]):{};o.$set(m)},i(t){n||(c(o.$$.fragment,t),n=!0)},o(t){i(o.$$.fragment,t),n=!1},d(t){g(o,t)}}}function E(p){let o,n,s,l,t,a;const m=[{title:"Components/ReutersLogo"},{component:C},p[0]];let $={};for(let e=0;e<m.length;e+=1)$=h($,m[e]);return o=new A({props:$}),s=new P({props:{$$slots:{default:[q,({args:e})=>({1:e}),({args:e})=>e?2:0]},$$scope:{ctx:p}}}),t=new b({props:{name:"Default"}}),{c(){u(o.$$.fragment),n=d(),u(s.$$.fragment),l=d(),u(t.$$.fragment)},m(e,r){f(o,e,r),D(e,n,r),f(s,e,r),D(e,l,r),f(t,e,r),a=!0},p(e,[r]){const T=r&1?L(m,[m[0],m[1],w(e[0])]):{};o.$set(T);const _={};r&6&&(_.$$scope={dirty:r,ctx:e}),s.$set(_)},i(e){a||(c(o.$$.fragment,e),c(s.$$.fragment,e),c(t.$$.fragment,e),a=!0)},o(e){i(o.$$.fragment,e),i(s.$$.fragment,e),i(t.$$.fragment,e),a=!1},d(e){e&&(R(n),R(l)),g(o,e),g(s,e),g(t,e)}}}function I(p){return[{...j(k),argTypes:{logoColour:{control:"color"},textColour:{control:"color"}}}]}class O extends v{constructor(o){super(),M(this,o,I,E,y,{})}}const S=x(O,{meta:{title:"Components/ReutersLogo"},stories:{"tpl:default":{name:"default",template:!0,source:"<ReutersLogo {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","ReutersLogo","withComponentDocs"]}),H=S.meta,J=["Default"],K=S.stories.Default;export{K as Default,J as __namedExportsOrder,H as default};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
svg.svelte-1vzosfv.svelte-1vzosfv{vertical-align:middle}svg.svelte-1vzosfv path.svelte-1vzosfv{fill:var(--theme-colour-brand-rules)}svg.svelte-1lpwfe0.svelte-1lpwfe0{vertical-align:middle}svg.svelte-1lpwfe0 path.svelte-1lpwfe0{fill:var(--theme-colour-brand-rules)}svg.svelte-1lpwfe0 rect.svelte-1lpwfe0{fill:var(--theme-colour-background)}.search.svelte-1raatky.svelte-1raatky{width:250px}.search.svelte-1raatky .search--icon.svelte-1raatky{left:.5rem;top:.55rem;width:1.5rem;height:1.5rem;fill:var(--theme-colour-brand-rules)}.search.svelte-1raatky .search--input.svelte-1raatky{height:2.15rem;border:1px solid var(--theme-colour-brand-rules);background:transparent;border-radius:.25rem;width:100%}.search.svelte-1raatky .search--x.svelte-1raatky{right:0;top:.55rem;width:1.5rem;height:1.5rem;fill:var(--theme-colour-text-primary);cursor:pointer}.search.svelte-1raatky .search--x.invisible.svelte-1raatky{display:none}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import{S as x,i as C,s as T,l as I,c as u,o as g,m as l,h as d,t as f,a as i,k as S,d as $}from"./index-C9aKRT5A.js";import{g as y,a as M}from"./spread-CgU5AtxT.js";import{p as b,w as A,M as k,T as j,S as q}from"./collect-stories-ceFdpR5E.js";import{S as D}from"./SearchInput-B-xX8_W1.js";const E=`Invite users to search for something.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { SearchInput } from '@reuters-graphics/graphics-components';
|
||||
|
||||
function handleSearchInput(event) {
|
||||
const searchText = event.detail.value;
|
||||
// Here's where you might update a variable,
|
||||
// filter a dataset or make an API call
|
||||
// based on the user's input.
|
||||
console.log(\`Search for \${searchText}\`);
|
||||
}
|
||||
<\/script>
|
||||
|
||||
<SearchInput on:search="{handleSearchInput}" />
|
||||
\`\`\`
|
||||
`;function H(c){let s,a;const n=[c[0]];let p={};for(let t=0;t<n.length;t+=1)p=I(p,n[t]);return s=new D({props:p}),{c(){u(s.$$.fragment)},m(t,r){l(s,t,r),a=!0},p(t,r){const m=r&1?y(n,[M(t[0])]):{};s.$set(m)},i(t){a||(f(s.$$.fragment,t),a=!0)},o(t){i(s.$$.fragment,t),a=!1},d(t){$(s,t)}}}function O(c){let s,a,n,p,t,r;const m=[{title:"Components/SearchInput"},{component:D},A(E)];let h={};for(let e=0;e<m.length;e+=1)h=I(h,m[e]);return s=new k({props:h}),n=new j({props:{$$slots:{default:[H,({args:e})=>({0:e}),({args:e})=>e?1:0]},$$scope:{ctx:c}}}),t=new q({props:{name:"Default",args:{}}}),{c(){u(s.$$.fragment),a=g(),u(n.$$.fragment),p=g(),u(t.$$.fragment)},m(e,o){l(s,e,o),d(e,a,o),l(n,e,o),d(e,p,o),l(t,e,o),r=!0},p(e,[o]){const w={};s.$set(w);const _={};o&3&&(_.$$scope={dirty:o,ctx:e}),n.$set(_)},i(e){r||(f(s.$$.fragment,e),f(n.$$.fragment,e),f(t.$$.fragment,e),r=!0)},o(e){i(s.$$.fragment,e),i(n.$$.fragment,e),i(t.$$.fragment,e),r=!1},d(e){e&&(S(a),S(p)),$(s,e),$(n,e),$(t,e)}}}class P extends x{constructor(s){super(),C(this,s,null,O,T,{})}}const v=b(P,{meta:{title:"Components/SearchInput"},stories:{"tpl:default":{name:"default",template:!0,source:"<SearchInput {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","SearchInput","withComponentDocs"]}),J=v.meta,K=["Default"],L=v.stories.Default;export{L as Default,K as __namedExportsOrder,J as default};
|
||||
|
|
@ -1 +0,0 @@
|
|||
.timeline.svelte-5zvk3b .date.svelte-5zvk3b{border-left:1px solid var(--symbol-colour)}.timeline.svelte-5zvk3b .date.svelte-5zvk3b:last-child{border-left:1px solid var(--theme-colour-background);padding-bottom:0}.timeline.svelte-5zvk3b svg.svelte-5zvk3b{top:-1px;left:-10px}.timeline.svelte-5zvk3b div.title.svelte-5zvk3b{margin-top:clamp(.56rem,.52rem + .21vw,.69rem);margin-bottom:clamp(.31rem,.31rem + 0vw,.31rem);font-weight:500}.timeline.svelte-5zvk3b div.event a.svelte-5zvk3b{text-decoration:none}.timeline.svelte-5zvk3b div.event a.svelte-5zvk3b:hover{text-decoration:underline}.timeline.svelte-5zvk3b div.event a div.title span.svelte-5zvk3b{opacity:.5}.timeline.svelte-5zvk3b div.event a div.title:hover span.svelte-5zvk3b{opacity:.8}.timeline.svelte-5zvk3b div.event.svelte-5zvk3b p{margin-top:0;margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem);font-family:var(--theme-font-family-note);font-size:calc(.9 * var(--theme-font-size-base));color:var(--theme-colour-text-primary);line-height:1.3;font-weight:300}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
div.svelte-qq31zf{min-height:625px;width:calc(100% + 30px);margin-left:-15px}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,29 +0,0 @@
|
|||
import{S as R,i as j,s as E,l as D,c as l,o as T,m as c,h as _,t as f,a as u,k as g,d,q,f as M}from"./index-C9aKRT5A.js";import{g as A,a as I}from"./spread-CgU5AtxT.js";import{p as G,M as K,T as N,S as b,a as O,w as U}from"./collect-stories-ceFdpR5E.js";import{S as w}from"./SiteHeader-CT2FhxwH.js";import{T as x}from"./Theme-D2CRvq-y.js";import"./ReutersLogo-CDQ5t4Ty.js";import"./each-D6YF6ztN.js";import"./index-TQx7jkZs.js";import"./time-Dt9E6jI9.js";import"./advancedFormat-D5cdT3Ux.js";import"./_commonjsHelpers-BosuxZz1.js";import"./dayjs.min-BIwLhz4I.js";import"./flatten-9xFT-BQ8.js";const B=`Reuters dotcom site header, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-header).
|
||||
|
||||
> **Note:** In the Graphics Kit, you can find this component in \`pages/+page.svelte\`. Customise it there for the default page.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { SiteHeader } from '@reuters-graphics/graphics-components';
|
||||
<\/script>
|
||||
|
||||
<SiteHeader />
|
||||
\`\`\`
|
||||
`,F=`Colours are customised by the [\`Theme\`](?path=/docs/theming-theme--default) component.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { SiteHeader, Theme } from '@reuters-graphics/graphics-components';
|
||||
<\/script>
|
||||
|
||||
<Theme base="dark">
|
||||
<SiteHeader />
|
||||
</Theme>
|
||||
\`\`\`
|
||||
`;function J(p){let t,r,s;const n=[p[1]];let a={};for(let o=0;o<n.length;o+=1)a=D(a,n[o]);return r=new w({props:a}),{c(){t=q("div"),l(r.$$.fragment),M(t,"class","svelte-qq31zf")},m(o,i){_(o,t,i),c(r,t,null),s=!0},p(o,i){const $=i&2?A(n,[I(o[1])]):{};r.$set($)},i(o){s||(f(r.$$.fragment,o),s=!0)},o(o){u(r.$$.fragment,o),s=!1},d(o){o&&g(t),d(r)}}}function L(p){let t,r;return t=new w({}),{c(){l(t.$$.fragment)},m(s,n){c(t,s,n),r=!0},i(s){r||(f(t.$$.fragment,s),r=!0)},o(s){u(t.$$.fragment,s),r=!1},d(s){d(t,s)}}}function Q(p){let t,r,s;return r=new x({props:{base:"dark",$$slots:{default:[L]},$$scope:{ctx:p}}}),{c(){t=q("div"),l(r.$$.fragment),M(t,"class","svelte-qq31zf")},m(n,a){_(n,t,a),c(r,t,null),s=!0},p(n,a){const o={};a&4&&(o.$$scope={dirty:a,ctx:n}),r.$set(o)},i(n){s||(f(r.$$.fragment,n),s=!0)},o(n){u(r.$$.fragment,n),s=!1},d(n){n&&g(t),d(r)}}}function V(p){let t,r,s,n,a,o,i,$;const h=[{title:"Components/SiteHeader"},{component:w},p[0]];let v={};for(let e=0;e<h.length;e+=1)v=D(v,h[e]);t=new K({props:v}),s=new N({props:{$$slots:{default:[J,({args:e})=>({1:e}),({args:e})=>e?2:0]},$$scope:{ctx:p}}}),a=new b({props:{name:"Default"}});const H=[{name:"Customised theme"},O(F)];let S={$$slots:{default:[Q]},$$scope:{ctx:p}};for(let e=0;e<H.length;e+=1)S=D(S,H[e]);return i=new b({props:S}),{c(){l(t.$$.fragment),r=T(),l(s.$$.fragment),n=T(),l(a.$$.fragment),o=T(),l(i.$$.fragment)},m(e,m){c(t,e,m),_(e,r,m),c(s,e,m),_(e,n,m),c(a,e,m),_(e,o,m),c(i,e,m),$=!0},p(e,[m]){const P=m&1?A(h,[h[0],h[1],I(e[0])]):{};t.$set(P);const y={};m&6&&(y.$$scope={dirty:m,ctx:e}),s.$set(y);const k={};m&4&&(k.$$scope={dirty:m,ctx:e}),i.$set(k)},i(e){$||(f(t.$$.fragment,e),f(s.$$.fragment,e),f(a.$$.fragment,e),f(i.$$.fragment,e),$=!0)},o(e){u(t.$$.fragment,e),u(s.$$.fragment,e),u(a.$$.fragment,e),u(i.$$.fragment,e),$=!1},d(e){e&&(g(r),g(n),g(o)),d(t,e),d(s,e),d(a,e),d(i,e)}}}function W(p){return[{...U(B),argsTypes:{themes:{control:{disable:!0}}}}]}class z extends R{constructor(t){super(),j(this,t,W,V,E,{})}}z.__docgen={version:3,name:"SiteHeader.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const C=G(z,{meta:{title:"Components/SiteHeader"},stories:{"tpl:default":{name:"default",template:!0,source:`<div>
|
||||
<SiteHeader {...args} />
|
||||
</div>`,hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1},CustomisedTheme:{name:"Customised theme",template:!1,source:`<div>
|
||||
<Theme base="dark">
|
||||
<SiteHeader />
|
||||
</Theme>
|
||||
</div>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","darkThemeDocs","SiteHeader","Theme","withComponentDocs","withStoryDocs"]}),le=C.meta,ce=["Default","CustomisedTheme"],fe=C.stories.Default,ue=C.stories.CustomisedTheme;export{ue as CustomisedTheme,fe as Default,ce as __namedExportsOrder,le as default};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
@keyframes svelte-18gm7af-spinner{to{transform:rotate(360deg)}}.spinner-container.svelte-18gm7af{height:0;padding-bottom:100%;color:var(--spinner-colour, #666)}.spinner.svelte-18gm7af{top:0;left:0;width:100%;height:100%;border-radius:50%;border:var(--spinner-ring-width, 6px) solid transparent;border-top-color:currentColor;animation:svelte-18gm7af-spinner var(--spinner-speed, .8s) linear infinite}.spinner.svelte-18gm7af:before{content:"";position:absolute;display:block;left:var(--spinner-ring-offset, -6px);top:var(--spinner-ring-offset, -6px);width:100%;height:100%;border:var(--spinner-ring-width, 6px) solid currentColor;box-sizing:content-box;border-radius:50%;opacity:.25}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import{S as P,i as $,s as W,q as y,f as k,g as o,h as _,j as S,n as D,k as w,l as T,c as f,o as x,m as c,t as u,a as g,d as h}from"./index-C9aKRT5A.js";import{g as V,a as C}from"./spread-CgU5AtxT.js";import{p as L,M as q,T as A,S as H,w as O}from"./collect-stories-ceFdpR5E.js";const E=`Simple loading spinner. Use it to help hide long loading times for components that may be loading expensive media files or crunching through lots of data.
|
||||
|
||||
\`\`\`svelte
|
||||
<script>
|
||||
import { Spinner } from '@reuters-graphics/graphics-components';
|
||||
|
||||
let somethingsLoading = true;
|
||||
<\/script>
|
||||
|
||||
{#if somethingsLoading}
|
||||
<Spinner />
|
||||
{:else}
|
||||
<p>The real deal is here.</p>
|
||||
{/if}
|
||||
\`\`\`
|
||||
`;function I(a){let e,t,r;return{c(){e=y("div"),t=y("div"),r=y("div"),r.innerHTML='<div class="spinner absolute svelte-18gm7af"></div>',k(r,"class","spinner-container relative svelte-18gm7af"),o(t,"--spinner-colour",a[0]),o(t,"--spinner-ring-width",a[2]+"px"),o(t,"--spinner-ring-offset","-"+a[2]+"px"),o(t,"--spinner-speed",a[3]+"s"),o(t,"width",a[1]+"px"),o(t,"height",a[1]+"px"),o(t,"margin","0 auto"),k(e,"class","component-container flex items-center justify-center"),o(e,"width","100%"),o(e,"height",`${a[1]+a[4]*2}px`)},m(i,n){_(i,e,n),S(e,t),S(t,r)},p(i,[n]){n&1&&o(t,"--spinner-colour",i[0]),n&4&&o(t,"--spinner-ring-width",i[2]+"px"),n&4&&o(t,"--spinner-ring-offset","-"+i[2]+"px"),n&8&&o(t,"--spinner-speed",i[3]+"s"),n&2&&o(t,"width",i[1]+"px"),n&2&&o(t,"height",i[1]+"px"),n&18&&o(e,"height",`${i[1]+i[4]*2}px`)},i:D,o:D,d(i){i&&w(e)}}}function U(a,e,t){let{colour:r="#666"}=e,{width:i=40}=e,{ringWidth:n=6}=e,{speed:p=.8}=e,{containerPadding:d=10}=e;return a.$$set=l=>{"colour"in l&&t(0,r=l.colour),"width"in l&&t(1,i=l.width),"ringWidth"in l&&t(2,n=l.ringWidth),"speed"in l&&t(3,p=l.speed),"containerPadding"in l&&t(4,d=l.containerPadding)},[r,i,n,p,d]}class b extends P{constructor(e){super(),$(this,e,U,I,W,{colour:0,width:1,ringWidth:2,speed:3,containerPadding:4})}}b.__docgen={version:3,name:"Spinner.svelte",data:[{keywords:[],visibility:"public",description:"Primary colour of the spinner.",name:"colour",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"#666"},{keywords:[],visibility:"public",description:"Outer width of the spinner",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:40},{keywords:[],visibility:"public",description:"Width of the spinner ring",name:"ringWidth",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:6},{keywords:[],visibility:"public",description:"How fast the spinner spins in seconds",name:"speed",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:.8},{keywords:[],visibility:"public",description:"Vertical padding for the spinner's container",name:"containerPadding",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:10}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function z(a){let e,t;const r=[a[1]];let i={};for(let n=0;n<r.length;n+=1)i=T(i,r[n]);return e=new b({props:i}),{c(){f(e.$$.fragment)},m(n,p){c(e,n,p),t=!0},p(n,p){const d=p&2?V(r,[C(n[1])]):{};e.$set(d)},i(n){t||(u(e.$$.fragment,n),t=!0)},o(n){g(e.$$.fragment,n),t=!1},d(n){h(e,n)}}}function B(a){let e,t,r,i,n,p;const d=[{title:"Components/Spinner"},{component:b},a[0]];let l={};for(let s=0;s<d.length;s+=1)l=T(l,d[s]);return e=new q({props:l}),r=new A({props:{$$slots:{default:[z,({args:s})=>({1:s}),({args:s})=>s?2:0]},$$scope:{ctx:a}}}),n=new H({props:{name:"Default"}}),{c(){f(e.$$.fragment),t=x(),f(r.$$.fragment),i=x(),f(n.$$.fragment)},m(s,m){c(e,s,m),_(s,t,m),c(r,s,m),_(s,i,m),c(n,s,m),p=!0},p(s,[m]){const j=m&1?V(d,[d[0],d[1],C(s[0])]):{};e.$set(j);const v={};m&6&&(v.$$scope={dirty:m,ctx:s}),r.$set(v)},i(s){p||(u(e.$$.fragment,s),u(r.$$.fragment,s),u(n.$$.fragment,s),p=!0)},o(s){g(e.$$.fragment,s),g(r.$$.fragment,s),g(n.$$.fragment,s),p=!1},d(s){s&&(w(t),w(i)),h(e,s),h(r,s),h(n,s)}}}function F(a){return[{...O(E),argTypes:{colour:{control:"color"},ringWidth:{control:{type:"range",min:2,max:20,step:1}},width:{control:{type:"range",min:5,max:100,step:5}},speed:{control:{type:"range",min:.2,max:1,step:.1}},containerPadding:{control:{type:"range",min:5,max:100,step:5}}}}]}class G extends P{constructor(e){super(),$(this,e,F,B,W,{})}}const M=L(G,{meta:{title:"Components/Spinner"},stories:{"tpl:default":{name:"default",template:!0,source:"<Spinner {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","Spinner","withComponentDocs"]}),Q=M.meta,R=["Default"],X=M.stories.Default;export{X as Default,R as __namedExportsOrder,Q as default};
|
||||
|
|
@ -1 +0,0 @@
|
|||
div.ad-block.svelte-1sukdmq.svelte-1sukdmq.svelte-1sukdmq{display:flex;justify-content:center;flex-direction:column;align-items:center;gap:10px}div.ad-block.svelte-1sukdmq div.ad-label.svelte-1sukdmq.svelte-1sukdmq{font-family:Knowledge,Source Sans Pro,Arial,Helvetica,sans-serif;font-size:12px;margin:0;line-height:1.333;color:var(--theme-colour-text-secondary);text-align:right;display:flex;align-items:center;justify-content:center;justify-items:center}div.ad-block.svelte-1sukdmq div.ad-container.svelte-1sukdmq.svelte-1sukdmq{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:32px}div.ad-block.svelte-1sukdmq div.ad-container div.ad-slot__inner.svelte-1sukdmq.svelte-1sukdmq{margin:auto 0;width:100%;max-width:100%;flex:unset}div.ad-block.svelte-1sukdmq div.ad-container div.ad-slot__inner.svelte-1sukdmq>div.svelte-1sukdmq{display:block}div.ad-block.svelte-1sukdmq div.ad-container div.ad-slot__inner.svelte-1sukdmq>div.svelte-1sukdmq div[data-freestar-ad]{display:flex;flex-direction:column;justify-content:center;align-items:center}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import{S as w,i as D,s as C,c as m,m as u,t as $,a as g,d as _,q as c,o as y,f as v,h,j as f,k as S,e as M,x as T,l as I,n as N}from"./index-C9aKRT5A.js";import{g as x,a as O}from"./spread-CgU5AtxT.js";import{p as R,M as V,T as j,S as B,w as E}from"./collect-stories-ceFdpR5E.js";import{R as P,A as z}from"./ResponsiveAd-bwMiP1BO.js";import{B as F}from"./Block-C7biTRWl.js";import"./throttle-cOUaFLOV.js";import"./isObject-C3e4t58V.js";import"./isSymbol-Br3Fhm6g.js";import"./toNumber-BrygkUtK.js";const G=`Add a sponsorship ad to your page.
|
||||
|
||||
> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
|
||||
|
||||
\`\`\`svelte
|
||||
<!-- +page.svelte -->
|
||||
<script>
|
||||
import { AdScripts } from '@reuters-graphics/graphics-components';
|
||||
<\/script>
|
||||
|
||||
<!-- Include AdScripts only ONCE per page for any type of ad -->
|
||||
<AdScripts />
|
||||
\`\`\`
|
||||
|
||||
\`\`\`svelte
|
||||
<!-- App.svelte -->
|
||||
<script>
|
||||
import { SponsorshipAd } from '@reuters-graphics/graphics-components';
|
||||
|
||||
export let embedded = false;
|
||||
<\/script>
|
||||
|
||||
<!-- Check if in an embed context! -->
|
||||
{#if !embedded}
|
||||
<SponsorshipAd />
|
||||
{/if}
|
||||
\`\`\`
|
||||
`;function b(l){let e,o,s;return{c(){e=c("div"),o=c("div"),s=M(l[2]),v(e,"class","ad-label svelte-1sukdmq")},m(n,a){h(n,e,a),f(e,o),f(o,s)},p(n,a){a&4&&T(s,n[2])},d(n){n&&S(e)}}}function H(l){let e,o,s,n,a,r,p,i=l[2]&&b(l);return r=new P({props:{desktopPlacementName:K}}),{c(){e=c("div"),i&&i.c(),o=y(),s=c("div"),n=c("div"),a=c("div"),m(r.$$.fragment),v(a,"class","svelte-1sukdmq"),v(n,"class","ad-slot__inner svelte-1sukdmq"),v(s,"class","ad-container svelte-1sukdmq"),v(e,"class","ad-block svelte-1sukdmq")},m(t,d){h(t,e,d),i&&i.m(e,null),f(e,o),f(e,s),f(s,n),f(n,a),u(r,a,null),p=!0},p(t,d){t[2]?i?i.p(t,d):(i=b(t),i.c(),i.m(e,o)):i&&(i.d(1),i=null)},i(t){p||($(r.$$.fragment,t),p=!0)},o(t){g(r.$$.fragment,t),p=!1},d(t){t&&S(e),i&&i.d(),_(r)}}}function J(l){let e,o;return e=new F({props:{id:l[0],class:"freestar-adslot "+l[1],$$slots:{default:[H]},$$scope:{ctx:l}}}),{c(){m(e.$$.fragment)},m(s,n){u(e,s,n),o=!0},p(s,[n]){const a={};n&1&&(a.id=s[0]),n&2&&(a.class="freestar-adslot "+s[1]),n&12&&(a.$$scope={dirty:n,ctx:s}),e.$set(a)},i(s){o||($(e.$$.fragment,s),o=!0)},o(s){g(e.$$.fragment,s),o=!1},d(s){_(e,s)}}}const K="reuters_sponsorlogo";function Q(l,e,o){let{id:s=""}=e,{class:n="my-12"}=e,{adLabel:a=""}=e;return l.$$set=r=>{"id"in r&&o(0,s=r.id),"class"in r&&o(1,n=r.class),"adLabel"in r&&o(2,a=r.adLabel)},[s,n,a]}class k extends w{constructor(e){super(),D(this,e,Q,J,C,{id:0,class:1,adLabel:2})}}k.__docgen={version:3,name:"SponsorshipAd.svelte",data:[{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:"my-12"},{keywords:[],visibility:"public",description:"Label placed directly above the sponsorship ad",name:"adLabel",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function U(l){let e,o,s,n,a;return o=new z({}),n=new k({}),{c(){e=c("div"),m(o.$$.fragment),s=y(),m(n.$$.fragment)},m(r,p){h(r,e,p),u(o,e,null),f(e,s),u(n,e,null),a=!0},p:N,i(r){a||($(o.$$.fragment,r),$(n.$$.fragment,r),a=!0)},o(r){g(o.$$.fragment,r),g(n.$$.fragment,r),a=!1},d(r){r&&S(e),_(o),_(n)}}}function W(l){let e,o,s,n,a,r;const p=[{title:"Components/SponsorshipAd"},{component:k},l[0]];let i={};for(let t=0;t<p.length;t+=1)i=I(i,p[t]);return e=new V({props:i}),s=new j({props:{$$slots:{default:[U]},$$scope:{ctx:l}}}),a=new B({props:{name:"Default"}}),{c(){m(e.$$.fragment),o=y(),m(s.$$.fragment),n=y(),m(a.$$.fragment)},m(t,d){u(e,t,d),h(t,o,d),u(s,t,d),h(t,n,d),u(a,t,d),r=!0},p(t,[d]){const L=d&1?x(p,[p[0],p[1],O(t[0])]):{};e.$set(L);const A={};d&2&&(A.$$scope={dirty:d,ctx:t}),s.$set(A)},i(t){r||($(e.$$.fragment,t),$(s.$$.fragment,t),$(a.$$.fragment,t),r=!0)},o(t){g(e.$$.fragment,t),g(s.$$.fragment,t),g(a.$$.fragment,t),r=!1},d(t){t&&(S(o),S(n)),_(e,t),_(s,t),_(a,t)}}}function X(l){return[{...E(G)}]}class Y extends w{constructor(e){super(),D(this,e,X,W,C,{})}}const q=R(Y,{meta:{title:"Components/SponsorshipAd"},stories:{"tpl:default":{name:"default",template:!0,source:`<div>
|
||||
<AdScripts />
|
||||
<SponsorshipAd />
|
||||
</div>`,hasArgs:!1},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","adDocs","AdScripts","SponsorshipAd","withComponentDocs"]}),le=q.meta,de=["Default"],pe=q.stories.Default;export{pe as Default,de as __namedExportsOrder,le as default};
|
||||
|
|
@ -1 +0,0 @@
|
|||
.icon.svelte-1ep7vjj{height:1rem;width:1rem;fill:currentColor}nav.pagination.svelte-5gx7fn.svelte-5gx7fn{display:flex;justify-content:center;align-items:center}nav.pagination.svelte-5gx7fn button.svelte-5gx7fn{border:1px solid var(--theme-colour-text-secondary, var(--tr-light-grey));border-radius:50%;background-color:var(--theme-colour-background);color:var(--theme-colour-text-secondary);cursor:pointer;width:35px;height:35px}nav.pagination.svelte-5gx7fn button.svelte-5gx7fn:disabled{cursor:default;color:var(--theme-colour-brand-rules);border-color:var(--theme-colour-brand-rules)}nav.pagination.svelte-5gx7fn button:disabled .icon-wrapper.svelte-5gx7fn:hover{color:var(--theme-colour-brand-rules);border-color:var(--theme-colour-brand-rules)}nav.pagination.svelte-5gx7fn button .icon-wrapper.svelte-5gx7fn{display:flex;align-items:center;justify-content:center;white-space:nowrap}nav.pagination.svelte-5gx7fn button .icon-wrapper.svelte-5gx7fn:hover{color:var(--theme-colour-text-primary);border-color:var(--theme-colour-text-primary, var(--tr-medium-grey))}nav.pagination.svelte-5gx7fn .label.svelte-5gx7fn{display:flex;align-items:center;flex-direction:column;width:auto;min-width:5rem}.visually-hidden.svelte-5gx7fn.svelte-5gx7fn{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.select.svelte-hf0fh8.svelte-hf0fh8{width:250px}.select.svelte-hf0fh8 .select--input.svelte-hf0fh8{position:relative;height:2.15rem;border:1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));border-radius:.25rem;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;background-image:url('data:image/svg+xml;utf8,<svg width="15" height="9" viewBox="0 0 15 9" xmlns="http://www.w3.org/2000/svg"><path d="M6.76474 8.30466L0.236082 1.54523C-0.0786943 1.21934 -0.0786943 0.69069 0.236082 0.364804C0.550521 0.0392666 1.19794 0.0403099 1.51305 0.364804L7.33483 6.49522L12.9249 0.475171C13.3549 0.0451683 14.1195 0.0396141 14.4339 0.365152C14.7487 0.691037 14.7487 1.21969 14.4339 1.54557L7.90492 8.30466C7.59015 8.63054 7.07952 8.63054 6.76474 8.30466Z" fill="gray"/></svg>');background-repeat:no-repeat;background-position-x:225px;background-position-y:55%}.select.svelte-hf0fh8 .select--input.svelte-hf0fh8::-ms-expand{display:none}.avoid-clicks.svelte-1vec2lc{pointer-events:none}path.svelte-1vec2lc{fill:var(--theme-colour-brand-rules, var(--tr-muted-grey))}path.active.svelte-1vec2lc{fill:var(--theme-colour-text-primary, var(--tr-dark-grey))}section.table.svelte-qryrui.svelte-qryrui{overflow-x:auto}section.table.svelte-qryrui table.svelte-qryrui{background-color:transparent;border-collapse:separate;border-spacing:0}section.table.svelte-qryrui table thead tr th.svelte-qryrui{border-bottom:1px solid var(--theme-colour-text-primary);background-color:var(--theme-colour-background);text-align:inherit}section.table.svelte-qryrui table thead tr th.sortable.svelte-qryrui{cursor:pointer;white-space:nowrap}section.table.svelte-qryrui table thead tr th .table--thead--sortarrow.svelte-qryrui{display:inline-block;position:relative;top:5px}section.table.svelte-qryrui table tbody td.svelte-qryrui{font-size:var(--theme-font-size-sm);font-weight:400;vertical-align:top;border-bottom:1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey))}section.table.svelte-qryrui table tbody td.no-results.svelte-qryrui{color:var(--theme-colour-text-secondary)}section.table.svelte-qryrui table tfoot.table--tfoot tr.svelte-qryrui{border-bottom:0}section.table.svelte-qryrui table tfoot.table--tfoot td.svelte-qryrui{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-top:clamp(.31rem,.31rem + 0vw,.31rem);margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem)}section.table.svelte-qryrui table.truncated tbody tr.svelte-qryrui:last-child:not(:first-child){border-bottom:none;mask-image:linear-gradient(to bottom,var(--theme-colour-text-primary) 0%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,var(--theme-colour-text-primary) 0%,transparent 100%)}.avoid-clicks.svelte-qryrui.svelte-qryrui{pointer-events:none}nav.input.svelte-qryrui.svelte-qryrui{padding:0;width:100%;display:flex;justify-content:flex-start;align-items:flex-end;flex-direction:row;flex-wrap:wrap;gap:clamp(.31rem,.29rem + .1vw,.38rem)}nav.show-all.svelte-qryrui button.svelte-qryrui{min-width:13rem;height:2.15rem;border:1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));border-radius:.25rem;background-color:var(--theme-colour-background);cursor:pointer}
|
||||
|
|
@ -1 +0,0 @@
|
|||
._title_13v0c_1{max-width:600px;font-size:18px;color:#666;margin-bottom:5px;margin-top:2rem;font-weight:400}._title_13v0c_1 a span{font-size:18px;line-height:18px;margin-left:2px;vertical-align:middle;font-weight:700;opacity:.6}._title_13v0c_1 a span:hover{opacity:1}._title_13v0c_1 p{font-size:.85rem;line-height:1.25;background-color:#f7fafc;padding:10px;border-radius:4px;margin-top:5px;color:#333;border:1px solid hsla(203,50%,30%,.15)}._table_13v0c_31{min-height:100px;margin:0 0 3rem;width:100%;max-width:600px;border-collapse:collapse;border-radius:4px;overflow:hidden}._table_13v0c_31 th,._table_13v0c_31 td{padding:6px 13px;font-family:Nunito Sans,Helvetica,Arial,sans-serif;font-size:14px;line-height:24px}._table_13v0c_31 thead tr{color:#333;text-align:left}._table_13v0c_31 thead tr th{font-weight:700;color:#2e3438;border:1px solid hsla(203,50%,30%,.15);margin:0;border-collapse:collapse;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}._table_13v0c_31 thead{display:block;width:100%}._table_13v0c_31 thead tr{display:table;table-layout:fixed;width:100%}._table_13v0c_31 tbody{display:block;max-height:305px;overflow-y:scroll;border-bottom:1px solid hsla(203,50%,30%,.15)}._table_13v0c_31 tbody tr{display:table;table-layout:fixed;width:100%;border:1px solid hsla(203,50%,30%,.15);border-radius:4px;font-size:.9rem;font-weight:400;color:#404040}._table_13v0c_31 tbody tr td{border-right:1px solid #eee;vertical-align:text-top;color:#2e3438;position:relative}._table_13v0c_31 tbody tr td button{text-align:left;padding:0;border:0;background-color:transparent;cursor:pointer;color:#0071a1}._table_13v0c_31 tbody tr td button span{font-size:1rem;color:inherit;margin-right:5px;vertical-align:bottom}._table_13v0c_31 tbody tr td button div.copy-tag{position:absolute;right:4px;top:50%;transform:translateY(-50%);background-color:#333;pointer-events:none;color:#fff;padding:4px 6px;border-radius:4px;font-size:12px}._table_13v0c_31 tbody tr td button:active{transform:translate(1px,1px)}._table_13v0c_31 tbody tr:nth-of-type(2n){background-color:#f7fafc}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import{R as e,r as m}from"./index-DwChlhAQ.js";import{S as u,p as y}from"./prism-CEgBVTik.js";import{s as h}from"./scss-BCrErVeE.js";import{U as f}from"./index-D0unROMo.js";const b="_title_daft4_1",g="_table_daft4_20",C="_importsnippet_daft4_125",i={title:b,table:g,importsnippet:C};u.registerLanguage("scss",h);const d=t=>t.replace(/\/_/,"/").replace(/\.scss$/,""),_=t=>{const[a,l]=m.useState(!1);let c;m.useEffect(()=>{c&&clearTimeout(c),c=setTimeout(()=>{l(!1)},1500)},[a]);const n=async({partial:s})=>{const r=`@import "@reuters-graphics/graphics-components/scss/colours/${d(s)}";`;await navigator.clipboard.writeText(r),l(!0)};return e.createElement("button",{className:"copy-btn",onClick:()=>n(t)},e.createElement("span",{className:"material-symbols-outlined"},"content_copy"),a&&e.createElement("span",{className:"copy-tag"},"Copied"))},N=({included:t=!1,partial:a="thematic/_tr.scss"})=>t?e.createElement("div",{className:i.importsnippet},e.createElement("p",null,"Included")):e.createElement("div",{className:i.importsnippet},e.createElement(u,{language:"scss",style:y},`// global.scss
|
||||
@import "@reuters-graphics/graphics-components/scss/colours/${d(a)}";`),e.createElement(_,{partial:a})),p=t=>{const a=async l=>{const c=l.wrap?`var(${l.children})`:l.children;await navigator.clipboard.writeText(c),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"))},T=t=>{const[a,l]=m.useState(!1);let c;m.useEffect(()=>{c&&clearTimeout(c),c=setTimeout(()=>{l(!1)},1e3)},[a]);const n={...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(p,{...n},t.children))):t.children.map(s=>e.createElement("div",{key:s},e.createElement(p,{...n,wrap:!0},s)))},v=t=>e.createElement("td",null,e.createElement(T,{...t},t.children)),k=t=>e.createElement("tr",null,t.children.map((a,l)=>e.createElement(v,{...t,column:l,key:l},a))),w=t=>e.createElement("th",null,t.children),H=({title:t=null,body:a,copyable:l,mdnLink:c=null,included:n=!1,partial:s})=>{const r=["Colour","CSS variable"];return e.createElement(f,null,e.createElement("div",{className:i.title},t),e.createElement(N,{included:n,partial:s}),e.createElement("table",{className:i.table},e.createElement("thead",null,e.createElement("tr",null,r.map(o=>e.createElement(w,{key:o},o)))),e.createElement("tbody",null,a.map((o,E)=>e.createElement(k,{title:t,header:r,body:a,copyable:l,mdnLink:c,key:E},o)))))};export{H as C};
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import{R as e,r as o}from"./index-DwChlhAQ.js";import{U as u}from"./index-D0unROMo.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 c=typeof l.copyable[l.column]=="function"?l.copyable[l.column](`${l.children}`):`${l.children}`;await navigator.clipboard.writeText(c),r(!0)},[n,r]=o.useState(!1);let m;return o.useEffect(()=>{m&&clearTimeout(m),m=setTimeout(()=>{r(!1)},1e3)},[n]),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,n&&e.createElement("div",{className:"copy-tag"},"Copied")):e.createElement(y,null,t.children)},f=t=>e.createElement("td",null,e.createElement(b,{...t},t.children)),h=t=>e.createElement("tr",null,t.children.map((a,n)=>e.createElement(f,{...t,column:n,key:n},a))),C=t=>e.createElement("th",null,t.children),v=({title:t=null,note:a=null,header:n,body:r,copyable:m,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",rel:"noreferrer"},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,n.map(c=>e.createElement(C,{key:c},c)))),e.createElement("tbody",null,r.map((c,i)=>e.createElement(h,{title:t,header:n,body:r,copyable:m,mdnLink:l,key:i},c)))));export{v as C};
|
||||
|
|
@ -1 +0,0 @@
|
|||
._title_daft4_1{font-size:18px;color:#666;margin-bottom:0;font-weight:400;margin-top:2rem}._title_daft4_1 a span{font-size:18px;line-height:18px;margin-left:2px;vertical-align:middle;font-weight:700;opacity:.6}._title_daft4_1 a span:hover{opacity:1}._table_daft4_20{min-height:100px;margin:0 0 3rem;width:100%;max-width:600px;border-collapse:collapse;border-radius:4px;overflow:hidden}._table_daft4_20 th,._table_daft4_20 td{padding:6px 13px;font-family:Nunito Sans,Helvetica,Arial,sans-serif;font-size:14px;line-height:24px}._table_daft4_20 thead tr{color:#333;text-align:left}._table_daft4_20 thead tr th{font-weight:700;color:#2e3438;border:1px solid hsla(203,50%,30%,.15);margin:0;border-collapse:collapse;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}._table_daft4_20 thead{display:block;width:100%}._table_daft4_20 thead tr{display:table;table-layout:fixed;width:100%}._table_daft4_20 tbody{display:block;max-height:605px;overflow-y:scroll;border-bottom:1px solid hsla(203,50%,30%,.15)}._table_daft4_20 tbody tr{display:table;table-layout:fixed;width:100%;border:1px solid hsla(203,50%,30%,.15);border-radius:4px;font-size:.9rem;font-weight:400;color:#404040}._table_daft4_20 tbody tr td{border-right:1px solid #eee;vertical-align:middle;color:#2e3438;position:relative}._table_daft4_20 tbody tr td button{text-align:left;padding:0;border:0;background-color:transparent;cursor:pointer;color:#0071a1}._table_daft4_20 tbody tr td button span{font-size:1rem;color:inherit;margin-right:5px;vertical-align:bottom}._table_daft4_20 tbody tr td button div.copy-tag{position:absolute;right:4px;top:50%;transform:translateY(-50%);background-color:#333;pointer-events:none;color:#fff;padding:4px 6px;border-radius:4px;font-size:12px}._table_daft4_20 tbody tr td button:active{transform:translate(1px,1px)}._table_daft4_20 tbody tr:nth-of-type(2n){background-color:#f7fafc}._table_daft4_20 div.swatch-container{display:flex;align-items:center}._table_daft4_20 div.swatch{width:40px;height:40px;border:1px solid hsla(203,50%,30%,.15);border-radius:10px;display:inline-block;margin-right:10px}._importsnippet_daft4_125{max-width:600px;position:relative}._importsnippet_daft4_125 p{font-size:.8rem;line-height:1;background-color:#0071a1;padding:5px 10px;color:#fff;display:inline-block;margin-bottom:5px;border-radius:2px}._importsnippet_daft4_125 pre{margin-top:0!important;border-radius:4px;border:1px solid hsla(203,50%,30%,.15);padding:.5rem 1rem!important}._importsnippet_daft4_125 pre *{font-size:.8rem}._importsnippet_daft4_125 .copy-btn{position:absolute;background-color:#0071a1;color:#fff;font-size:.8rem;border:0;padding:5px 10px;top:0;right:0;z-index:999;border-top-right-radius:4px;border-bottom-left-radius:4px;white-space:nowrap;display:inline-flex;align-items:center;cursor:pointer}._importsnippet_daft4_125 .copy-btn .material-symbols-outlined{font-size:1.1rem}._importsnippet_daft4_125 .copy-btn span.copy-tag{margin-left:5px}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue