Merge branch 'main' into type-system
This commit is contained in:
Prasanta Kumar Dutta
commit
5affacd6d9
56 changed files with 850 additions and 624 deletions
63
.github/workflows/release.yaml
vendored
Normal file
63
.github/workflows/release.yaml
vendored
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
name: Release
|
||||
|
||||
on:
|
||||
push:
|
||||
pull_request:
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
release:
|
||||
name: Release
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: write
|
||||
# Restricts release to:
|
||||
# 1) pushes of release tags
|
||||
# 2) the default branch
|
||||
# 3) the base repository
|
||||
if: |
|
||||
github.event_name == 'push' && startsWith(github.ref, 'refs/tags') &&
|
||||
endsWith(github.event.base_ref, github.event.repository.default_branch) &&
|
||||
github.repository == 'reuters-graphics/graphics-components'
|
||||
steps:
|
||||
- id: checkout
|
||||
name: Checkout repository
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
fetch-depth: 0
|
||||
ref: ${{ github.event.repository.default_branch }}
|
||||
|
||||
- id: setup-node
|
||||
name: Setup Node.JS
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
registry-url: https://registry.npmjs.org
|
||||
scope: '@reuters-graphics'
|
||||
|
||||
- id: install-deps
|
||||
name: Install dependencies
|
||||
run: yarn install --frozen-lockfile
|
||||
|
||||
- id: build-docs
|
||||
name: Build docs
|
||||
run: npm run build:docs
|
||||
|
||||
- id: version
|
||||
name: Version
|
||||
run: npm version ${{ github.ref_name }} --no-git-tag-version
|
||||
|
||||
- id: publish
|
||||
name: Publish
|
||||
run: npm publish --access public
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||
|
||||
- id: commit
|
||||
name: Commit
|
||||
run: |
|
||||
git config --global user.name github-actions
|
||||
git config --global user.email github-actions@github.com
|
||||
git add .
|
||||
git commit -m "published ${{ github.ref_name }}"
|
||||
git push
|
||||
14
.vscode/settings.json
vendored
14
.vscode/settings.json
vendored
|
|
@ -1,12 +1,7 @@
|
|||
{
|
||||
"i18n-ally.localesPaths": [
|
||||
"locales"
|
||||
],
|
||||
"i18n-ally.localesPaths": ["locales"],
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"svelte"
|
||||
],
|
||||
"eslint.validate": ["javascript", "svelte"],
|
||||
"editor.formatOnSave": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
|
|
@ -16,5 +11,6 @@
|
|||
},
|
||||
"[mdx]": {
|
||||
"editor.wordWrap": "on"
|
||||
}
|
||||
}
|
||||
},
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
}
|
||||
|
|
|
|||
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
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,2 +1,2 @@
|
|||
import{af as v,ae as p,be as u,at as d,bf as b}from"./iframe.ff4dd639.js";var y=v,E=p,O=u,R=b,m=d,o=y.RegExp,g=o.prototype,x=E&&m(function(){var r=!0;try{o(".","d")}catch{r=!1}var a={},t="",s=r?"dgimsy":"gimsy",c=function(l,f){Object.defineProperty(a,l,{get:function(){return t+=f,!0}})},e={dotAll:"s",global:"g",ignoreCase:"i",multiline:"m",sticky:"y"};r&&(e.hasIndices="d");for(var i in e)c(i,e[i]);var n=Object.getOwnPropertyDescriptor(g,"flags").get.call(a);return n!==s||t!==s});x&&O(g,"flags",{configurable:!0,get:R});
|
||||
//# sourceMappingURL=es.regexp.flags.ce327e52.js.map
|
||||
import{af as v,ae as p,be as u,at as d,bf as b}from"./iframe.b5f8c498.js";var y=v,E=p,O=u,R=b,m=d,o=y.RegExp,g=o.prototype,x=E&&m(function(){var r=!0;try{o(".","d")}catch{r=!1}var a={},t="",s=r?"dgimsy":"gimsy",c=function(l,f){Object.defineProperty(a,l,{get:function(){return t+=f,!0}})},e={dotAll:"s",global:"g",ignoreCase:"i",multiline:"m",sticky:"y"};r&&(e.hasIndices="d");for(var i in e)c(i,e[i]);var n=Object.getOwnPropertyDescriptor(g,"flags").get.call(a);return n!==s||t!==s});x&&O(g,"flags",{configurable:!0,get:R});
|
||||
//# sourceMappingURL=es.regexp.flags.2437bda9.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"es.regexp.flags.ce327e52.js","sources":["../../node_modules/core-js/modules/es.regexp.flags.js"],"sourcesContent":["var global = require('../internals/global');\nvar DESCRIPTORS = require('../internals/descriptors');\nvar defineBuiltInAccessor = require('../internals/define-built-in-accessor');\nvar regExpFlags = require('../internals/regexp-flags');\nvar fails = require('../internals/fails');\n\n// babel-minify and Closure Compiler transpiles RegExp('.', 'd') -> /./d and it causes SyntaxError\nvar RegExp = global.RegExp;\nvar RegExpPrototype = RegExp.prototype;\n\nvar FORCED = DESCRIPTORS && fails(function () {\n var INDICES_SUPPORT = true;\n try {\n RegExp('.', 'd');\n } catch (error) {\n INDICES_SUPPORT = false;\n }\n\n var O = {};\n // modern V8 bug\n var calls = '';\n var expected = INDICES_SUPPORT ? 'dgimsy' : 'gimsy';\n\n var addGetter = function (key, chr) {\n // eslint-disable-next-line es-x/no-object-defineproperty -- safe\n Object.defineProperty(O, key, { get: function () {\n calls += chr;\n return true;\n } });\n };\n\n var pairs = {\n dotAll: 's',\n global: 'g',\n ignoreCase: 'i',\n multiline: 'm',\n sticky: 'y'\n };\n\n if (INDICES_SUPPORT) pairs.hasIndices = 'd';\n\n for (var key in pairs) addGetter(key, pairs[key]);\n\n // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe\n var result = Object.getOwnPropertyDescriptor(RegExpPrototype, 'flags').get.call(O);\n\n return result !== expected || calls !== expected;\n});\n\n// `RegExp.prototype.flags` getter\n// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags\nif (FORCED) defineBuiltInAccessor(RegExpPrototype, 'flags', {\n configurable: true,\n get: regExpFlags\n});\n"],"names":["global","require$$0","DESCRIPTORS","require$$1","defineBuiltInAccessor","require$$2","regExpFlags","require$$3","fails","require$$4","RegExp","RegExpPrototype","FORCED","INDICES_SUPPORT","O","calls","expected","addGetter","key","chr","pairs","result"],"mappings":"0EAAA,IAAIA,EAASC,EACTC,EAAcC,EACdC,EAAwBC,EACxBC,EAAcC,EACdC,EAAQC,EAGRC,EAASV,EAAO,OAChBW,EAAkBD,EAAO,UAEzBE,EAASV,GAAeM,EAAM,UAAY,CAC5C,IAAIK,EAAkB,GACtB,GAAI,CACFH,EAAO,IAAK,GAAG,CAChB,MAAC,CACAG,EAAkB,EACnB,CAED,IAAIC,EAAI,CAAA,EAEJC,EAAQ,GACRC,EAAWH,EAAkB,SAAW,QAExCI,EAAY,SAAUC,EAAKC,EAAK,CAElC,OAAO,eAAeL,EAAGI,EAAK,CAAE,IAAK,UAAY,CAC/C,OAAAH,GAASI,EACF,EACR,CAAA,CAAE,CACP,EAEMC,EAAQ,CACV,OAAQ,IACR,OAAQ,IACR,WAAY,IACZ,UAAW,IACX,OAAQ,GACZ,EAEMP,IAAiBO,EAAM,WAAa,KAExC,QAASF,KAAOE,EAAOH,EAAUC,EAAKE,EAAMF,EAAI,EAGhD,IAAIG,EAAS,OAAO,yBAAyBV,EAAiB,OAAO,EAAE,IAAI,KAAKG,CAAC,EAEjF,OAAOO,IAAWL,GAAYD,IAAUC,CAC1C,CAAC,EAIGJ,GAAQR,EAAsBO,EAAiB,QAAS,CAC1D,aAAc,GACd,IAAKL,CACP,CAAC"}
|
||||
{"version":3,"file":"es.regexp.flags.2437bda9.js","sources":["../../node_modules/core-js/modules/es.regexp.flags.js"],"sourcesContent":["var global = require('../internals/global');\nvar DESCRIPTORS = require('../internals/descriptors');\nvar defineBuiltInAccessor = require('../internals/define-built-in-accessor');\nvar regExpFlags = require('../internals/regexp-flags');\nvar fails = require('../internals/fails');\n\n// babel-minify and Closure Compiler transpiles RegExp('.', 'd') -> /./d and it causes SyntaxError\nvar RegExp = global.RegExp;\nvar RegExpPrototype = RegExp.prototype;\n\nvar FORCED = DESCRIPTORS && fails(function () {\n var INDICES_SUPPORT = true;\n try {\n RegExp('.', 'd');\n } catch (error) {\n INDICES_SUPPORT = false;\n }\n\n var O = {};\n // modern V8 bug\n var calls = '';\n var expected = INDICES_SUPPORT ? 'dgimsy' : 'gimsy';\n\n var addGetter = function (key, chr) {\n // eslint-disable-next-line es-x/no-object-defineproperty -- safe\n Object.defineProperty(O, key, { get: function () {\n calls += chr;\n return true;\n } });\n };\n\n var pairs = {\n dotAll: 's',\n global: 'g',\n ignoreCase: 'i',\n multiline: 'm',\n sticky: 'y'\n };\n\n if (INDICES_SUPPORT) pairs.hasIndices = 'd';\n\n for (var key in pairs) addGetter(key, pairs[key]);\n\n // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe\n var result = Object.getOwnPropertyDescriptor(RegExpPrototype, 'flags').get.call(O);\n\n return result !== expected || calls !== expected;\n});\n\n// `RegExp.prototype.flags` getter\n// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags\nif (FORCED) defineBuiltInAccessor(RegExpPrototype, 'flags', {\n configurable: true,\n get: regExpFlags\n});\n"],"names":["global","require$$0","DESCRIPTORS","require$$1","defineBuiltInAccessor","require$$2","regExpFlags","require$$3","fails","require$$4","RegExp","RegExpPrototype","FORCED","INDICES_SUPPORT","O","calls","expected","addGetter","key","chr","pairs","result"],"mappings":"0EAAA,IAAIA,EAASC,EACTC,EAAcC,EACdC,EAAwBC,EACxBC,EAAcC,EACdC,EAAQC,EAGRC,EAASV,EAAO,OAChBW,EAAkBD,EAAO,UAEzBE,EAASV,GAAeM,EAAM,UAAY,CAC5C,IAAIK,EAAkB,GACtB,GAAI,CACFH,EAAO,IAAK,GAAG,CAChB,MAAC,CACAG,EAAkB,EACnB,CAED,IAAIC,EAAI,CAAA,EAEJC,EAAQ,GACRC,EAAWH,EAAkB,SAAW,QAExCI,EAAY,SAAUC,EAAKC,EAAK,CAElC,OAAO,eAAeL,EAAGI,EAAK,CAAE,IAAK,UAAY,CAC/C,OAAAH,GAASI,EACF,EACR,CAAA,CAAE,CACP,EAEMC,EAAQ,CACV,OAAQ,IACR,OAAQ,IACR,WAAY,IACZ,UAAW,IACX,OAAQ,GACZ,EAEMP,IAAiBO,EAAM,WAAa,KAExC,QAASF,KAAOE,EAAOH,EAAUC,EAAKE,EAAMF,EAAI,EAGhD,IAAIG,EAAS,OAAO,yBAAyBV,EAAiB,OAAO,EAAE,IAAI,KAAKG,CAAC,EAEjF,OAAOO,IAAWL,GAAYD,IAAUC,CAC1C,CAAC,EAIGJ,GAAQR,EAAsBO,EAAiB,QAAS,CAC1D,aAAc,GACd,IAAKL,CACP,CAAC"}
|
||||
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
docs/assets/iframe.b5f8c498.js.map
Normal file
1
docs/assets/iframe.b5f8c498.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
import{r as d,D as u,j as r,T as p,S,a as x,b as m,F as v,c as y,A as C,P as T,d as I}from"./iframe.ff4dd639.js";import{Q as O,i as B,U as F,A as N,N as E,p as H,R as Y,e as k,C as j,n as w,c as W,q as G,t as K,D as L,a as U,V as $,W as q,H as z,I as J,f as Q,M as V,P as X,u as Z,v as ee,x as te,z as re,y as ae,o as se,d as oe,K as ne,m as ie,L as ce,g as le,h as de,O as ue,k as pe,l as Se,s as xe,w as me,G as ve,J as ye,E as Ce,B as Te}from"./iframe.ff4dd639.js";var f=/\s*\/\s*/,g=function(a){var e=a.title,t=e.trim().split(f);return t&&t[t.length-1]||e},h=function(a){var e=a.children,t=d.exports.useContext(u),s=e;return s||(s=g(t)),s?r(p,{className:"sbdocs-title",children:s}):null},P=function(a){var e=a.children,t=d.exports.useContext(u),s=t.id,n=t.storyById,i=n(s),c=i.parameters,l=e;return l||(l=c==null?void 0:c.componentSubtitle),l?r(S,{className:"sbdocs-subtitle",children:l}):null},b=function(a){var e=a.name,t=d.exports.useContext(u),s=t.componentStories,n=s(),i;return n&&(i=e?n.find(function(c){return c.name===e}):n[0]),i?r(x,{...i,expanded:!1,withToolbar:!0}):null},A=function(){return m(v,{children:[r(h,{}),r(P,{}),r(y,{}),r(b,{}),r(C,{story:T}),r(I,{})]})},R=function(a){var e=a.children;return r("div",{style:{fontFamily:"sans-serif"},children:e})};export{O as AddContext,B as Anchor,F as AnchorMdx,N as ArgsTable,E as CURRENT_SELECTION,H as Canvas,Y as CodeOrSourceMdx,k as ColorItem,j as ColorPalette,w as ComponentsTable,W as Description,G as DescriptionType,K as DocsContainer,L as DocsContext,A as DocsPage,U as DocsStory,$ as HeaderMdx,q as HeadersMdx,z as Heading,J as IconGallery,Q as IconItem,V as Meta,X as PRIMARY_STORY,Z as Preview,b as Primary,ee as Props,te as Source,re as SourceContainer,ae as SourceContext,se as SourceState,oe as Stories,ne as Story,ie as StoryTable,ce as Subheading,P as Subtitle,h as Title,le as Typeset,R as Wrapper,de as anchorBlockIdFromId,ue as assertIsFn,pe as extractComponentArgTypes,g as extractTitle,Se as getComponent,xe as getDescriptionProps,me as getSourceProps,ve as getStoryId,ye as getStoryProps,Ce as lookupStoryId,Te as storyBlockIdFromId};
|
||||
//# sourceMappingURL=index.567296f1.js.map
|
||||
import{r as d,D as u,j as r,T as p,S,a as x,b as m,F as v,c as y,A as C,P as T,d as I}from"./iframe.b5f8c498.js";import{Q as O,i as B,U as F,A as N,N as E,p as H,R as Y,e as k,C as j,n as w,c as W,q as G,t as K,D as L,a as U,V as $,W as q,H as z,I as J,f as Q,M as V,P as X,u as Z,v as ee,x as te,z as re,y as ae,o as se,d as oe,K as ne,m as ie,L as ce,g as le,h as de,O as ue,k as pe,l as Se,s as xe,w as me,G as ve,J as ye,E as Ce,B as Te}from"./iframe.b5f8c498.js";var f=/\s*\/\s*/,g=function(a){var e=a.title,t=e.trim().split(f);return t&&t[t.length-1]||e},h=function(a){var e=a.children,t=d.exports.useContext(u),s=e;return s||(s=g(t)),s?r(p,{className:"sbdocs-title",children:s}):null},P=function(a){var e=a.children,t=d.exports.useContext(u),s=t.id,n=t.storyById,i=n(s),c=i.parameters,l=e;return l||(l=c==null?void 0:c.componentSubtitle),l?r(S,{className:"sbdocs-subtitle",children:l}):null},b=function(a){var e=a.name,t=d.exports.useContext(u),s=t.componentStories,n=s(),i;return n&&(i=e?n.find(function(c){return c.name===e}):n[0]),i?r(x,{...i,expanded:!1,withToolbar:!0}):null},A=function(){return m(v,{children:[r(h,{}),r(P,{}),r(y,{}),r(b,{}),r(C,{story:T}),r(I,{})]})},R=function(a){var e=a.children;return r("div",{style:{fontFamily:"sans-serif"},children:e})};export{O as AddContext,B as Anchor,F as AnchorMdx,N as ArgsTable,E as CURRENT_SELECTION,H as Canvas,Y as CodeOrSourceMdx,k as ColorItem,j as ColorPalette,w as ComponentsTable,W as Description,G as DescriptionType,K as DocsContainer,L as DocsContext,A as DocsPage,U as DocsStory,$ as HeaderMdx,q as HeadersMdx,z as Heading,J as IconGallery,Q as IconItem,V as Meta,X as PRIMARY_STORY,Z as Preview,b as Primary,ee as Props,te as Source,re as SourceContainer,ae as SourceContext,se as SourceState,oe as Stories,ne as Story,ie as StoryTable,ce as Subheading,P as Subtitle,h as Title,le as Typeset,R as Wrapper,de as anchorBlockIdFromId,ue as assertIsFn,pe as extractComponentArgTypes,g as extractTitle,Se as getComponent,xe as getDescriptionProps,me as getSourceProps,ve as getStoryId,ye as getStoryProps,Ce as lookupStoryId,Te as storyBlockIdFromId};
|
||||
//# sourceMappingURL=index.60c7836e.js.map
|
||||
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,2 +1,2 @@
|
|||
import{j as a,b as p,F as b}from"./iframe.ff4dd639.js";import{R as m}from"./index.1fffea4c.js";var k={fontSize:"14px",letterSpacing:"0.2px",margin:"10px 0"},w={margin:"auto",padding:30,borderRadius:10,background:"rgba(0,0,0,0.03)"},D={textAlign:"center"},v=function(){return a("div",{style:k,className:"sb-nodocs sb-wrapper",children:p("div",{style:w,children:[a("h1",{style:D,children:"No Docs"}),p("p",{children:["Sorry, but there are no docs for the selected story. To add them, set the story's\xA0",a("code",{children:"docs"})," parameter. If you think this is an error:"]}),p("ul",{children:[a("li",{children:"Please check the story definition."}),a("li",{children:"Please check the Storybook config."}),a("li",{children:"Try reloading the page."})]}),a("p",{children:"If the problem persists, check the browser console, or the terminal you've run Storybook from."})]})})};v.displayName="NoDocs";function g(n,i,t,s,d,c,r){try{var l=n[c](r),o=l.value}catch(u){t(u);return}l.done?i(o):Promise.resolve(o).then(s,d)}function P(n){return function(){var i=this,t=arguments;return new Promise(function(s,d){var c=n.apply(i,t);function r(o){g(c,s,d,r,l,"next",o)}function l(o){g(c,s,d,r,l,"throw",o)}r(void 0)})}}function R(n,i,t,s){return N(n,i,t).then(s)}function N(n,i,t){return f.apply(this,arguments)}function f(){return f=P(regeneratorRuntime.mark(function n(i,t,s){var d,c,r,l,o,u;return regeneratorRuntime.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(r=i.parameters.docs,!((r!=null&&r.getPage||r!=null&&r.page)&&!(r!=null&&r.getContainer||r!=null&&r.container))){e.next=3;break}throw new Error("No `docs.container` set, did you run `addon-docs/preset`?");case 3:if(e.t1=r.container,e.t1){e.next=8;break}return e.next=7,(d=r.getContainer)===null||d===void 0?void 0:d.call(r);case 7:e.t1=e.sent;case 8:if(e.t0=e.t1,e.t0){e.next=11;break}e.t0=function(h){var y=h.children;return a(b,{children:y})};case 11:if(l=e.t0,e.t3=r.page,e.t3){e.next=17;break}return e.next=16,(c=r.getPage)===null||c===void 0?void 0:c.call(r);case 16:e.t3=e.sent;case 17:if(e.t2=e.t3,e.t2){e.next=20;break}e.t2=v;case 20:return o=e.t2,u=a(l,{context:t,children:a(o,{})},i.componentId),e.next=24,new Promise(function(h){m.render(u,s,h)});case 24:case"end":return e.stop()}},n)})),f.apply(this,arguments)}function I(n){m.unmountComponentAtNode(n)}export{R as renderDocs,I as unmountDocs};
|
||||
//# sourceMappingURL=renderDocs.5680e5aa.js.map
|
||||
import{j as a,b as p,F as b}from"./iframe.b5f8c498.js";import{R as m}from"./index.e16a46f9.js";var k={fontSize:"14px",letterSpacing:"0.2px",margin:"10px 0"},w={margin:"auto",padding:30,borderRadius:10,background:"rgba(0,0,0,0.03)"},D={textAlign:"center"},v=function(){return a("div",{style:k,className:"sb-nodocs sb-wrapper",children:p("div",{style:w,children:[a("h1",{style:D,children:"No Docs"}),p("p",{children:["Sorry, but there are no docs for the selected story. To add them, set the story's\xA0",a("code",{children:"docs"})," parameter. If you think this is an error:"]}),p("ul",{children:[a("li",{children:"Please check the story definition."}),a("li",{children:"Please check the Storybook config."}),a("li",{children:"Try reloading the page."})]}),a("p",{children:"If the problem persists, check the browser console, or the terminal you've run Storybook from."})]})})};v.displayName="NoDocs";function g(n,i,t,s,d,c,r){try{var l=n[c](r),o=l.value}catch(u){t(u);return}l.done?i(o):Promise.resolve(o).then(s,d)}function P(n){return function(){var i=this,t=arguments;return new Promise(function(s,d){var c=n.apply(i,t);function r(o){g(c,s,d,r,l,"next",o)}function l(o){g(c,s,d,r,l,"throw",o)}r(void 0)})}}function R(n,i,t,s){return N(n,i,t).then(s)}function N(n,i,t){return f.apply(this,arguments)}function f(){return f=P(regeneratorRuntime.mark(function n(i,t,s){var d,c,r,l,o,u;return regeneratorRuntime.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(r=i.parameters.docs,!((r!=null&&r.getPage||r!=null&&r.page)&&!(r!=null&&r.getContainer||r!=null&&r.container))){e.next=3;break}throw new Error("No `docs.container` set, did you run `addon-docs/preset`?");case 3:if(e.t1=r.container,e.t1){e.next=8;break}return e.next=7,(d=r.getContainer)===null||d===void 0?void 0:d.call(r);case 7:e.t1=e.sent;case 8:if(e.t0=e.t1,e.t0){e.next=11;break}e.t0=function(h){var y=h.children;return a(b,{children:y})};case 11:if(l=e.t0,e.t3=r.page,e.t3){e.next=17;break}return e.next=16,(c=r.getPage)===null||c===void 0?void 0:c.call(r);case 16:e.t3=e.sent;case 17:if(e.t2=e.t3,e.t2){e.next=20;break}e.t2=v;case 20:return o=e.t2,u=a(l,{context:t,children:a(o,{})},i.componentId),e.next=24,new Promise(function(h){m.render(u,s,h)});case 24:case"end":return e.stop()}},n)})),f.apply(this,arguments)}function I(n){m.unmountComponentAtNode(n)}export{R as renderDocs,I as unmountDocs};
|
||||
//# sourceMappingURL=renderDocs.0af1ddb5.js.map
|
||||
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
|
|
@ -370,8 +370,8 @@
|
|||
<script>
|
||||
window.global = window;
|
||||
</script>
|
||||
<script type="module" crossorigin src="https://reuters-graphics.github.io/graphics-components/assets/iframe.ff4dd639.js"></script>
|
||||
<link rel="stylesheet" href="https://reuters-graphics.github.io/graphics-components/assets/iframe.9fe2e314.css">
|
||||
<script type="module" crossorigin src="https://reuters-graphics.github.io/graphics-components/assets/iframe.b5f8c498.js"></script>
|
||||
<link rel="stylesheet" href="https://reuters-graphics.github.io/graphics-components/assets/iframe.8f338c0b.css">
|
||||
<style>
|
||||
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"generatedAt":1669686813046,"builder":{"name":"@storybook/builder-vite"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"yarn","version":"1.22.4"},"typescriptOptions":{"check":false},"features":{"storyStoreV7":false,"previewMdx2":false},"storybookVersion":"6.5.9","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.9"},"@storybook/addon-svelte-csf":{"version":"2.0.6"},"@storybook/builder-vite":{"version":"0.2.2"},"@storybook/mdx2-csf":{"version":"0.0.3"},"@storybook/svelte":{"version":"6.5.9"},"@storybook/testing-library":{"version":"0.0.13"},"@storybook/theming":{"version":"6.5.9"},"eslint-plugin-storybook":{"version":"0.6.3"}},"framework":{"name":"svelte","options":{"preprocess":{"defaultLanguages":{"markup":"html","style":"css","script":"javascript"}}}},"addons":{"@storybook/addon-links":{"version":"6.5.9"},"@storybook/addon-essentials":{"version":"6.5.9"},"@storybook/addon-interactions":{"version":"6.5.9"}}}
|
||||
{"generatedAt":1676231273605,"builder":{"name":"@storybook/builder-vite"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"yarn","version":"1.22.19"},"typescriptOptions":{"check":false},"features":{"storyStoreV7":false,"previewMdx2":false},"storybookVersion":"6.5.9","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.9"},"@storybook/addon-svelte-csf":{"version":"2.0.6"},"@storybook/builder-vite":{"version":"0.2.2"},"@storybook/mdx2-csf":{"version":"0.0.3"},"@storybook/svelte":{"version":"6.5.9"},"@storybook/testing-library":{"version":"0.0.13"},"@storybook/theming":{"version":"6.5.9"},"eslint-plugin-storybook":{"version":"0.6.3"}},"framework":{"name":"svelte","options":{"preprocess":{"defaultLanguages":{"markup":"html","style":"css","script":"javascript"}}}},"addons":{"@storybook/addon-links":{"version":"6.5.9"},"@storybook/addon-essentials":{"version":"6.5.9"},"@storybook/addon-interactions":{"version":"6.5.9"}}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@reuters-graphics/graphics-components",
|
||||
"version": "0.0.28",
|
||||
"version": "0.0.32",
|
||||
"type": "module",
|
||||
"private": false,
|
||||
"homepage": "https://reuters-graphics.github.io/graphics-components",
|
||||
|
|
@ -105,6 +105,7 @@
|
|||
"./components/Block/Block.svelte": "./dist/components/Block/Block.svelte",
|
||||
"./components/BodyText/BodyText.svelte": "./dist/components/BodyText/BodyText.svelte",
|
||||
"./components/DatawrapperChart/DatawrapperChart.svelte": "./dist/components/DatawrapperChart/DatawrapperChart.svelte",
|
||||
"./components/DocumentCloud/DocumentCloud.svelte": "./dist/components/DocumentCloud/DocumentCloud.svelte",
|
||||
"./components/EmbedPreviewerLink/EmbedPreviewerLink.svelte": "./dist/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte",
|
||||
"./components/FeaturePhoto/FeaturePhoto.svelte": "./dist/components/FeaturePhoto/FeaturePhoto.svelte",
|
||||
"./components/Framer/Framer.svelte": "./dist/components/Framer/Framer.svelte",
|
||||
|
|
@ -130,8 +131,10 @@
|
|||
"./components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte": "./dist/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte",
|
||||
"./components/ReutersLogo/ReutersLogo.svelte": "./dist/components/ReutersLogo/ReutersLogo.svelte",
|
||||
"./components/SEO/SEO.svelte": "./dist/components/SEO/SEO.svelte",
|
||||
"./components/SEO/analytics": "./dist/components/SEO/analytics.js",
|
||||
"./components/SEO/publisherTags": "./dist/components/SEO/publisherTags.js",
|
||||
"./components/SEO/analytics/chartbeat": "./dist/components/SEO/analytics/chartbeat.js",
|
||||
"./components/SEO/analytics/ga": "./dist/components/SEO/analytics/ga.js",
|
||||
"./components/SEO/analytics": "./dist/components/SEO/analytics/index.js",
|
||||
"./components/SEO/analytics/publisherTags": "./dist/components/SEO/analytics/publisherTags.js",
|
||||
"./components/Scroller/Background.svelte": "./dist/components/Scroller/Background.svelte",
|
||||
"./components/Scroller/Embedded/Background.svelte": "./dist/components/Scroller/Embedded/Background.svelte",
|
||||
"./components/Scroller/Embedded/Foreground.svelte": "./dist/components/Scroller/Embedded/Foreground.svelte",
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ import type { ComponentType } from 'svelte';
|
|||
*/
|
||||
export type ContainerWidth = 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||
|
||||
|
||||
/**
|
||||
* A step in the Scroller component.
|
||||
*/
|
||||
export interface ScrollerStep {
|
||||
altText?: string;
|
||||
/**
|
||||
* A background component
|
||||
* @required
|
||||
|
|
@ -19,7 +19,7 @@ export interface ScrollerStep {
|
|||
* Optional props for background component
|
||||
*/
|
||||
backgroundProps?: Object;
|
||||
/**
|
||||
/**
|
||||
* Foreground can either be a component or markdown-formatted string.
|
||||
* @required
|
||||
*/
|
||||
|
|
|
|||
38
src/components/DocumentCloud/DocumentCloud.stories.svelte
Normal file
38
src/components/DocumentCloud/DocumentCloud.stories.svelte
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<script>
|
||||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// Don't lose the "?raw" in markdown imports!
|
||||
// @ts-ignore
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
|
||||
import DocumentCloud from './DocumentCloud.svelte';
|
||||
|
||||
import { withComponentDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/DocumentCloud',
|
||||
component: DocumentCloud,
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
width: {
|
||||
control: 'select',
|
||||
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
|
||||
<Template let:args>
|
||||
<DocumentCloud {...args} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args="{{
|
||||
width: 'normal',
|
||||
slug: '3259984-Trump-Intelligence-Allegations',
|
||||
altText: 'These Reports Allege Trump Has Deep Ties To Russia',
|
||||
}}"
|
||||
/>
|
||||
41
src/components/DocumentCloud/DocumentCloud.svelte
Normal file
41
src/components/DocumentCloud/DocumentCloud.svelte
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DocumentCloud--default) -->
|
||||
<script lang="ts">
|
||||
import type { ContainerWidth } from '../@types/global';
|
||||
/** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
|
||||
|
||||
/**
|
||||
* Width of the container, one of: normal, wide, wider, widest or fluid
|
||||
*/
|
||||
export let width: ContainerWidth = 'normal';
|
||||
|
||||
/**
|
||||
* The unique identifier for the document.
|
||||
* @required
|
||||
*/
|
||||
export let slug: string;
|
||||
|
||||
/**
|
||||
* Alt text for the document.
|
||||
* @required
|
||||
*/
|
||||
export let altText: string;
|
||||
|
||||
/** Add an ID to target with SCSS. */
|
||||
export let id: string = '';
|
||||
|
||||
/** Add a class to target with SCSS. */
|
||||
export let cls: string = '';
|
||||
|
||||
import Block from '../Block/Block.svelte';
|
||||
</script>
|
||||
|
||||
<Block width="{width}" id="{id}" cls="photo {cls}">
|
||||
<iframe
|
||||
src="https://embed.documentcloud.org/documents/{slug}/?embed=1&responsive=1&title=1"
|
||||
title="{altText}"
|
||||
width="700"
|
||||
height="540"
|
||||
style="border: 1px solid #aaa; width: 100%; height: 800px; height: calc(100vh - 100px);"
|
||||
sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"
|
||||
></iframe>
|
||||
</Block>
|
||||
17
src/components/DocumentCloud/stories/docs/component.md
Normal file
17
src/components/DocumentCloud/stories/docs/component.md
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
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"
|
||||
/>
|
||||
```
|
||||
|
|
@ -1,7 +1,10 @@
|
|||
<!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SEO--default) -->
|
||||
<script lang="ts">
|
||||
import analytics from './analytics';
|
||||
import publisherTags from './publisherTags';
|
||||
import {
|
||||
loadChartbeat,
|
||||
loadGA,
|
||||
loadPublisherTags,
|
||||
} from './analytics/index.js';
|
||||
|
||||
/**
|
||||
* Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
|
||||
|
|
@ -94,8 +97,9 @@
|
|||
// Only fire analytics on prod sites
|
||||
$: {
|
||||
if (typeof window !== 'undefined' && includeAnalytics) {
|
||||
analytics(canonicalUrl, seoTitle);
|
||||
publisherTags();
|
||||
loadChartbeat(authors);
|
||||
loadGA(canonicalUrl, seoTitle);
|
||||
loadPublisherTags();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,333 +0,0 @@
|
|||
// @ts-nocheck
|
||||
/* eslint-disable */
|
||||
const attachScript = function (i, s, o, g, r, a, m) {
|
||||
i.GoogleAnalyticsObject = r;
|
||||
(i[r] =
|
||||
i[r] ||
|
||||
function () {
|
||||
(i[r].q = i[r].q || []).push(arguments);
|
||||
}),
|
||||
(i[r].l = 1 * new Date());
|
||||
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m);
|
||||
};
|
||||
/* eslint-enable */
|
||||
|
||||
export default (page, title) => {
|
||||
try {
|
||||
if (!window.ga) {
|
||||
attachScript(
|
||||
window,
|
||||
document,
|
||||
'script',
|
||||
'https://www.google-analytics.com/analytics.js',
|
||||
'ga'
|
||||
);
|
||||
|
||||
window.ga('create', 'UA-41619329-3', { cookieDomain: 'auto' });
|
||||
window.ga('require', 'linkid', 'linkid.js');
|
||||
}
|
||||
|
||||
window.ga('send', 'pageview', {
|
||||
page,
|
||||
title,
|
||||
});
|
||||
|
||||
if (!inIframe()) {
|
||||
// start time on page tracking if not in an iframe
|
||||
riveted.init({
|
||||
reportInterval: 30,
|
||||
});
|
||||
}
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
// checks if page is in an iframe
|
||||
function inIframe() {
|
||||
try {
|
||||
return window.self !== window.top;
|
||||
} catch (e) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* START: Riveted time on page tracking code
|
||||
* see aditional documentation here: https://riveted.parsnip.io/
|
||||
*/
|
||||
/* eslint-disable */
|
||||
var riveted = (function () {
|
||||
let started = false;
|
||||
let stopped = false;
|
||||
let turnedOff = false;
|
||||
let clockTime = 0;
|
||||
const startTime = new Date();
|
||||
let clockTimer = null;
|
||||
let idleTimer = null;
|
||||
let sendEvent;
|
||||
let sendUserTiming;
|
||||
let reportInterval;
|
||||
let idleTimeout;
|
||||
let nonInteraction;
|
||||
let universalGA;
|
||||
let classicGA;
|
||||
let googleTagManager;
|
||||
|
||||
function init(options) {
|
||||
/*
|
||||
* Determine which version of GA is being used
|
||||
* "ga", "_gaq", and "dataLayer" are the possible globals
|
||||
*/
|
||||
|
||||
if (typeof ga === 'function') {
|
||||
universalGA = true;
|
||||
}
|
||||
|
||||
if (typeof _gaq !== 'undefined' && typeof _gaq.push === 'function') {
|
||||
classicGA = true;
|
||||
}
|
||||
|
||||
if (
|
||||
typeof dataLayer !== 'undefined' &&
|
||||
typeof dataLayer.push === 'function'
|
||||
) {
|
||||
googleTagManager = true;
|
||||
}
|
||||
|
||||
// Set up options and defaults
|
||||
options = options || {};
|
||||
reportInterval = parseInt(options.reportInterval, 10) || 5;
|
||||
idleTimeout = parseInt(options.idleTimeout, 10) || 30;
|
||||
|
||||
if (typeof options.eventHandler === 'function') {
|
||||
sendEvent = options.eventHandler;
|
||||
}
|
||||
|
||||
if (typeof options.userTimingHandler === 'function') {
|
||||
sendUserTiming = options.userTimingHandler;
|
||||
}
|
||||
|
||||
if (
|
||||
'nonInteraction' in options &&
|
||||
(options.nonInteraction === false || options.nonInteraction === 'false')
|
||||
) {
|
||||
nonInteraction = false;
|
||||
} else {
|
||||
nonInteraction = true;
|
||||
}
|
||||
|
||||
// Basic activity event listeners
|
||||
addListener(document, 'keydown', trigger);
|
||||
addListener(document, 'click', trigger);
|
||||
addListener(window, 'mousemove', throttle(trigger, 500));
|
||||
addListener(window, 'scroll', throttle(trigger, 500));
|
||||
|
||||
// Page visibility listeners
|
||||
addListener(document, 'visibilitychange', visibilityChange);
|
||||
addListener(document, 'webkitvisibilitychange', visibilityChange);
|
||||
|
||||
// sends initial zero value
|
||||
sendEvent(0);
|
||||
}
|
||||
|
||||
/*
|
||||
* Throttle function borrowed from:
|
||||
* Underscore.js 1.5.2
|
||||
* http://underscorejs.org
|
||||
* (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
|
||||
* Underscore may be freely distributed under the MIT license.
|
||||
*/
|
||||
|
||||
function throttle(func, wait) {
|
||||
let context, args, result;
|
||||
let timeout = null;
|
||||
let previous = 0;
|
||||
const later = function () {
|
||||
previous = new Date();
|
||||
timeout = null;
|
||||
result = func.apply(context, args);
|
||||
};
|
||||
return function () {
|
||||
const now = new Date();
|
||||
if (!previous) previous = now;
|
||||
const remaining = wait - (now - previous);
|
||||
context = this;
|
||||
args = arguments;
|
||||
if (remaining <= 0) {
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
previous = now;
|
||||
result = func.apply(context, args);
|
||||
} else if (!timeout) {
|
||||
timeout = setTimeout(later, remaining);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
* Cross-browser event listening
|
||||
*/
|
||||
|
||||
function addListener(element, eventName, handler) {
|
||||
if (element.addEventListener) {
|
||||
element.addEventListener(eventName, handler, false);
|
||||
} else if (element.attachEvent) {
|
||||
element.attachEvent('on' + eventName, handler);
|
||||
} else {
|
||||
element['on' + eventName] = handler;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Function for logging User Timing event on initial interaction
|
||||
*/
|
||||
|
||||
sendUserTiming = function (timingValue) {
|
||||
if (googleTagManager) {
|
||||
dataLayer.push({
|
||||
event: 'RivetedTiming',
|
||||
eventCategory: 'Riveted',
|
||||
timingVar: 'First Interaction',
|
||||
timingValue,
|
||||
});
|
||||
} else {
|
||||
if (universalGA) {
|
||||
ga('send', 'timing', 'Riveted', 'First Interaction', timingValue);
|
||||
}
|
||||
|
||||
if (classicGA) {
|
||||
_gaq.push([
|
||||
'_trackTiming',
|
||||
'Riveted',
|
||||
'First Interaction',
|
||||
timingValue,
|
||||
null,
|
||||
100,
|
||||
]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Function for logging ping events
|
||||
*/
|
||||
|
||||
sendEvent = function (time) {
|
||||
if (googleTagManager) {
|
||||
dataLayer.push({
|
||||
event: 'Riveted',
|
||||
eventCategory: 'Riveted',
|
||||
eventAction: 'Time Spent',
|
||||
eventLabel: time,
|
||||
eventValue: reportInterval,
|
||||
eventNonInteraction: nonInteraction,
|
||||
});
|
||||
} else {
|
||||
if (universalGA) {
|
||||
ga(
|
||||
'send',
|
||||
'event',
|
||||
'Riveted',
|
||||
'Time Spent',
|
||||
time.toString(),
|
||||
reportInterval,
|
||||
{ nonInteraction }
|
||||
);
|
||||
}
|
||||
|
||||
if (classicGA) {
|
||||
_gaq.push([
|
||||
'_trackEvent',
|
||||
'Riveted',
|
||||
'Time Spent',
|
||||
time.toString(),
|
||||
reportInterval,
|
||||
nonInteraction,
|
||||
]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function setIdle() {
|
||||
clearTimeout(idleTimer);
|
||||
stopClock();
|
||||
}
|
||||
|
||||
function visibilityChange() {
|
||||
if (document.hidden || document.webkitHidden) {
|
||||
setIdle();
|
||||
}
|
||||
}
|
||||
|
||||
function clock() {
|
||||
clockTime += 1;
|
||||
if (clockTime > 0 && clockTime % reportInterval === 0) {
|
||||
sendEvent(clockTime);
|
||||
}
|
||||
}
|
||||
|
||||
function stopClock() {
|
||||
stopped = true;
|
||||
clearTimeout(clockTimer);
|
||||
}
|
||||
|
||||
function turnOff() {
|
||||
setIdle();
|
||||
turnedOff = true;
|
||||
}
|
||||
|
||||
function turnOn() {
|
||||
turnedOff = false;
|
||||
}
|
||||
|
||||
function restartClock() {
|
||||
stopped = false;
|
||||
clearTimeout(clockTimer);
|
||||
clockTimer = setInterval(clock, 1000);
|
||||
}
|
||||
|
||||
function startRiveted() {
|
||||
// Calculate seconds from start to first interaction
|
||||
const currentTime = new Date();
|
||||
const diff = currentTime - startTime;
|
||||
|
||||
// Set global
|
||||
started = true;
|
||||
|
||||
// Send User Timing Event
|
||||
sendUserTiming(diff);
|
||||
|
||||
// Start clock
|
||||
clockTimer = setInterval(clock, 1000);
|
||||
}
|
||||
|
||||
function trigger() {
|
||||
if (turnedOff) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!started) {
|
||||
startRiveted();
|
||||
}
|
||||
|
||||
if (stopped) {
|
||||
restartClock();
|
||||
}
|
||||
|
||||
clearTimeout(idleTimer);
|
||||
idleTimer = setTimeout(setIdle, idleTimeout * 1000 + 100);
|
||||
}
|
||||
|
||||
return {
|
||||
init,
|
||||
trigger,
|
||||
setIdle,
|
||||
on: turnOn,
|
||||
off: turnOff,
|
||||
};
|
||||
})();
|
||||
/* eslint-enable */
|
||||
/* END: Riveted time on page tracking code */
|
||||
33
src/components/SEO/analytics/chartbeat.js
Normal file
33
src/components/SEO/analytics/chartbeat.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/* eslint-disable */
|
||||
const attachScript = () => {
|
||||
// If script is already attached, skip
|
||||
if (
|
||||
document.querySelector(
|
||||
'script[src="//static.chartbeat.com/js/chartbeat.js"]'
|
||||
)
|
||||
)
|
||||
return;
|
||||
// ... else attach it.
|
||||
const e = document.createElement('script');
|
||||
const n = document.getElementsByTagName('script')[0];
|
||||
e.type = 'text/javascript';
|
||||
e.async = true;
|
||||
e.src = '//static.chartbeat.com/js/chartbeat.js';
|
||||
n.parentNode.insertBefore(e, n);
|
||||
};
|
||||
|
||||
export default (authors) => {
|
||||
// @ts-ignore
|
||||
const _sf_async_config = (window._sf_async_config =
|
||||
window._sf_async_config || {});
|
||||
_sf_async_config.uid = 52639;
|
||||
_sf_async_config.domain = 'reuters.com';
|
||||
_sf_async_config.flickerControl = false;
|
||||
_sf_async_config.useCanonical = true;
|
||||
_sf_async_config.useCanonicalDomain = true;
|
||||
_sf_async_config.sections = 'Graphics';
|
||||
_sf_async_config.authors = authors.map((a) => a.name).join(',');
|
||||
try {
|
||||
attachScript();
|
||||
} catch (e) {}
|
||||
};
|
||||
40
src/components/SEO/analytics/ga.js
Normal file
40
src/components/SEO/analytics/ga.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/* eslint-disable */
|
||||
const attachScript = function (i, s, o, g, r, a, m) {
|
||||
i.GoogleAnalyticsObject = r;
|
||||
(i[r] =
|
||||
i[r] ||
|
||||
function () {
|
||||
(i[r].q = i[r].q || []).push(arguments);
|
||||
}),
|
||||
(i[r].l = Date.now());
|
||||
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m);
|
||||
};
|
||||
/* eslint-enable */
|
||||
|
||||
export default (page, title) => {
|
||||
try {
|
||||
// @ts-ignore
|
||||
if (!window.ga) {
|
||||
attachScript(
|
||||
window,
|
||||
document,
|
||||
'script',
|
||||
'https://www.google-analytics.com/analytics.js',
|
||||
'ga'
|
||||
);
|
||||
|
||||
// @ts-ignore
|
||||
window.ga('create', 'UA-41619329-3', { cookieDomain: 'auto' });
|
||||
// @ts-ignore
|
||||
window.ga('require', 'linkid', 'linkid.js');
|
||||
}
|
||||
// @ts-ignore
|
||||
window.ga('send', 'pageview', {
|
||||
page,
|
||||
title,
|
||||
});
|
||||
} catch (e) {}
|
||||
};
|
||||
3
src/components/SEO/analytics/index.js
Normal file
3
src/components/SEO/analytics/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export { default as loadGA } from './ga.js';
|
||||
export { default as loadChartbeat } from './chartbeat.js';
|
||||
export { default as loadPublisherTags } from './publisherTags.js';
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import type { ContainerWidth, ScrollerStep } from '../../@types/global';
|
||||
|
||||
|
||||
export let step: ScrollerStep;
|
||||
export let backgroundWidth: ContainerWidth;
|
||||
export let index: number;
|
||||
|
|
@ -8,8 +8,8 @@
|
|||
import Block from '../../Block/Block.svelte';
|
||||
</script>
|
||||
|
||||
<Block width={backgroundWidth} cls="background-container step-{index + 1}">
|
||||
<div class="embedded-background step-{index + 1}">
|
||||
<Block width="{backgroundWidth}" cls="background-container step-{index + 1}">
|
||||
<div class="embedded-background step-{index + 1}" aria-hidden="true">
|
||||
<svelte:component
|
||||
this="{step.background}"
|
||||
{...step.backgroundProps || {}}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,23 @@
|
|||
{#if step.foreground === '' || !step.foreground}
|
||||
<!-- Empty foreground -->
|
||||
<div class="empty-step-foreground step-{index + 1}"></div>
|
||||
|
||||
{#if typeof step.altText === 'string'}
|
||||
<div class="background-alt-text visually-hidden">
|
||||
{@html marked.parse(step.altText)}
|
||||
</div>
|
||||
{/if}
|
||||
{:else if typeof step.foreground === 'string'}
|
||||
<Block cls="body-text step-{index + 1}">
|
||||
<div class="embedded-foreground step-{index + 1}">
|
||||
{@html marked.parse(step.foreground)}
|
||||
</div>
|
||||
|
||||
{#if typeof step.altText === 'string'}
|
||||
<div class="background-alt-text visually-hidden">
|
||||
{@html marked.parse(step.altText)}
|
||||
</div>
|
||||
{/if}
|
||||
</Block>
|
||||
{:else}
|
||||
<div class="embedded-foreground step-{index + 1}">
|
||||
|
|
@ -27,7 +39,7 @@
|
|||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
@import "./../../../scss/mixins";
|
||||
@import './../../../scss/mixins';
|
||||
div.embedded-foreground {
|
||||
:global {
|
||||
@include body-text;
|
||||
|
|
@ -36,4 +48,8 @@
|
|||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import type { ScrollerStep } from '../@types/global';
|
||||
import type { ScrollerStep } from '../@types/global';
|
||||
|
||||
export let steps: ScrollerStep[] = [];
|
||||
|
||||
|
|
@ -11,6 +11,11 @@
|
|||
{#if step.foreground === '' || !step.foreground}
|
||||
<!-- Empty foreground -->
|
||||
<div class="empty-step-foreground"></div>
|
||||
{#if typeof step.altText === 'string'}
|
||||
<div class="background-alt-text visually-hidden">
|
||||
{@html marked.parse(step.altText)}
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="step-foreground">
|
||||
{#if typeof step.foreground === 'string'}
|
||||
|
|
@ -22,11 +27,18 @@
|
|||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if typeof step.altText === 'string'}
|
||||
<div class="background-alt-text visually-hidden">
|
||||
{@html marked.parse(step.altText)}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style lang="scss">
|
||||
@import './../../scss/mixins';
|
||||
|
||||
div.step-foreground-container {
|
||||
height: 100vh;
|
||||
width: initial;
|
||||
|
|
@ -45,4 +57,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,9 +38,22 @@
|
|||
ID: 'my-scroller',
|
||||
StackBackground: 'true',
|
||||
Steps: [
|
||||
{ Background: 'AiMap1', Text: '#### Step 1\n\nLorem ipsum' },
|
||||
{ Background: 'AiMap2', Text: '#### Step 2\n\nLorem ipsum' },
|
||||
{ Background: 'AiMap3', Text: '#### Step 3\n\nLorem ipsum' },
|
||||
{
|
||||
Background: 'AiMap1',
|
||||
Text: '#### Step 1\n\nLorem ipsum',
|
||||
AltText: 'A map showing the Upper West side in New York City.',
|
||||
},
|
||||
{
|
||||
Background: 'AiMap2',
|
||||
Text: '#### Step 2\n\nLorem ipsum',
|
||||
AltText: 'The same map now highlights 98th Street.',
|
||||
},
|
||||
{
|
||||
Background: 'AiMap3',
|
||||
Text: '#### Step 3\n\nLorem ipsum',
|
||||
AltText:
|
||||
'The same map now highlights three locations near 98th Street where something particulary important happened.',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
|
@ -80,16 +93,19 @@
|
|||
background: BasicStep,
|
||||
backgroundProps: { colour: 'red' },
|
||||
foreground: '#### Step 1\n\nLorem ipsum red',
|
||||
altText: 'Red background',
|
||||
},
|
||||
{
|
||||
background: BasicStep,
|
||||
backgroundProps: { colour: 'blue' },
|
||||
foreground: '#### Step 2\n\nLorem ipsum blue',
|
||||
altText: 'Blue background',
|
||||
},
|
||||
{
|
||||
background: BasicStep,
|
||||
backgroundProps: { colour: 'green' },
|
||||
foreground: '#### Step 3\n\nLorem ipsum green',
|
||||
altText: 'Green background',
|
||||
},
|
||||
],
|
||||
foregroundPosition: 'middle',
|
||||
|
|
@ -142,16 +158,21 @@
|
|||
background: AiMap1,
|
||||
backgroundProps: { colour: 'red' },
|
||||
foreground: '#### Step 1\n\nLorem ipsum',
|
||||
altText: 'A map showing the Upper West side in New York City.',
|
||||
},
|
||||
{
|
||||
background: AiMap2,
|
||||
backgroundProps: { colour: 'blue' },
|
||||
foreground: '#### Step 2\n\nLorem ipsum',
|
||||
altText:
|
||||
'The same map now highlights 98th Street where something interesting happened.',
|
||||
},
|
||||
{
|
||||
background: AiMap3,
|
||||
backgroundProps: { colour: 'green' },
|
||||
foreground: '#### Step 3\n\nLorem ipsum',
|
||||
altText:
|
||||
'The same map now highlights three locations near 98th Street where something particulary important happened.',
|
||||
},
|
||||
],
|
||||
foregroundPosition: 'middle',
|
||||
|
|
|
|||
|
|
@ -12,9 +12,10 @@
|
|||
*
|
||||
* Each step object in the array can have:
|
||||
*
|
||||
* - `background` A background component **REQUIRED**
|
||||
* - `background` A background component. **REQUIRED**
|
||||
* - `backgroundProps` An object of props given to the background component
|
||||
* - `foreground` Either a markdown-formatted string or a foreground component **REQUIRED**
|
||||
* - `altText` A string describing the background graphic, which is read aloud after the foreground blurb. You can add it to each step or, if you want to add just one alt text to describe all graphics in the scroll section, add it to just the first step. **RECOMMENDED**
|
||||
* - `foregroundProps` An object of props given to the foreground component
|
||||
*
|
||||
* @required
|
||||
|
|
@ -116,6 +117,7 @@
|
|||
class="background"
|
||||
class:right="{foregroundPosition === 'left opposite'}"
|
||||
class:left="{foregroundPosition === 'right opposite'}"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="scroller-graphic-well">
|
||||
<Block
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import type { ComponentType } from 'svelte';
|
||||
|
||||
interface BlockStep {
|
||||
AltText?: string;
|
||||
Background: string;
|
||||
Text: string;
|
||||
}
|
||||
|
|
@ -30,6 +31,7 @@ export const getScrollerPropsFromDoc = (docBlock: Block, aiCharts: AiCharts, ass
|
|||
background: aiCharts[step.Background],
|
||||
backgroundProps: { assetsPath },
|
||||
foreground: step.Text,
|
||||
altText: step.AltText,
|
||||
})),
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,16 +15,19 @@ A more detailed example of using `Scroller` with graphics created by [ai2svelte]
|
|||
background: MyAiMap1,
|
||||
backgroundProps: { assetsPath: assets },
|
||||
foreground: '#### Step 1\n\nLorem ipsum',
|
||||
altText: 'A map showing TKTK',
|
||||
},
|
||||
{
|
||||
background: MyAiMap2,
|
||||
backgroundProps: { assetsPath: assets },
|
||||
foreground: '#### Step 2\n\nLorem ipsum',
|
||||
altText: 'The same map now highlights something interesting.',
|
||||
},
|
||||
{
|
||||
background: MyAiMap3,
|
||||
backgroundProps: { assetsPath: assets },
|
||||
foreground: '#### Step 3\n\nLorem ipsum',
|
||||
altText: 'The same map now shows something else that is interesting.',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
|
@ -48,14 +51,22 @@ Step1Text: #### Step 1
|
|||
|
||||
Lorem Ipsum
|
||||
:end
|
||||
AltText1: A map showing the Upper West side in New York City.
|
||||
:end
|
||||
|
||||
Step2Text: #### Step 2
|
||||
|
||||
Lorem Ipsum
|
||||
:end
|
||||
AltText2: The same map now highlights 98th Street.
|
||||
:end
|
||||
|
||||
Step3Text: #### Step 3
|
||||
|
||||
Lorem Ipsum
|
||||
:end
|
||||
AltText3: The same map now highlights three locations near 98th Street where something particulary important happened.
|
||||
:end
|
||||
```
|
||||
|
||||
```svelte
|
||||
|
|
@ -77,16 +88,19 @@ Lorem Ipsum
|
|||
background: MyAiMap1,
|
||||
backgroundProps: { basePath: assets },
|
||||
foreground: scrollerBlock.Step1Text,
|
||||
altText: scrollerBlock.AltText1,
|
||||
},
|
||||
{
|
||||
background: MyAiMap2,
|
||||
backgroundProps: { basePath: assets },
|
||||
foreground: scrollerBlock.Step2Text,
|
||||
altText: scrollerBlock.AltText2,
|
||||
},
|
||||
{
|
||||
background: MyAiMap3,
|
||||
backgroundProps: { basePath: assets },
|
||||
foreground: scrollerBlock.Step3Text,
|
||||
altText: scrollerBlock.AltText3,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,17 +11,31 @@ Check out the "Canvas" tab to play with the layout options available on this com
|
|||
import MyColourBackground from './MyColourBackground.svelte';
|
||||
|
||||
const steps = [
|
||||
{ background: MyColourBackground, backgroundProps: { colour: 'red' }, foreground: '#### Step 1\n\nLorem ipsum red' },
|
||||
{ background: MyColourBackground, backgroundProps: { colour: 'blue' }, foreground: '#### Step 2\n\nLorem ipsum blue' },
|
||||
{ background: MyColourBackground, backgroundProps: { colour: 'green' }, foreground: '#### Step 3\n\nLorem ipsum green' },
|
||||
]
|
||||
{
|
||||
background: MyColourBackground,
|
||||
backgroundProps: { colour: 'red' },
|
||||
foreground: '#### Step 1\n\nLorem ipsum red',
|
||||
altText: 'Red background',
|
||||
},
|
||||
{
|
||||
background: MyColourBackground,
|
||||
backgroundProps: { colour: 'blue' },
|
||||
foreground: '#### Step 2\n\nLorem ipsum blue',
|
||||
altText: 'Blue background',
|
||||
},
|
||||
{
|
||||
background: MyColourBackground,
|
||||
backgroundProps: { colour: 'green' },
|
||||
foreground: '#### Step 3\n\nLorem ipsum green',
|
||||
altText: 'Green background',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
<Scroller
|
||||
steps="{steps}"
|
||||
backgroundWidth="fluid"
|
||||
foregroundPosition="middle"
|
||||
embedded={false}
|
||||
embedded="{false}"
|
||||
/>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,22 +1,36 @@
|
|||
Instead of just text, you can use any component in the foreground, too, and pass whatever props you need to it.
|
||||
|
||||
If you're making your own custom foreground component, remember to add alt text describing the background graphic.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
// ...
|
||||
import MyCounter from './MyCounter.svelte';
|
||||
|
||||
const steps = [
|
||||
{ background: MyColourBackground, backgroundProps: { colour: 'red' }, foreground: MyCounter },
|
||||
{ background: MyColourBackground, backgroundProps: { colour: 'blue' }, foreground: '#### Step 2\n\nLorem ipsum blue' },
|
||||
{ background: MyColourBackground, backgroundProps: { colour: 'green' }, foreground: MyCounter, foregroundProps: { count: 100 } },
|
||||
]
|
||||
{
|
||||
background: MyColourBackground,
|
||||
backgroundProps: { colour: 'red' },
|
||||
foreground: MyCounter,
|
||||
},
|
||||
{
|
||||
background: MyColourBackground,
|
||||
backgroundProps: { colour: 'blue' },
|
||||
foreground: '#### Step 2\n\nLorem ipsum blue',
|
||||
},
|
||||
{
|
||||
background: MyColourBackground,
|
||||
backgroundProps: { colour: 'green' },
|
||||
foreground: MyCounter,
|
||||
foregroundProps: { count: 100 },
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
<Scroller
|
||||
steps="{steps}"
|
||||
backgroundWidth="fluid"
|
||||
foregroundPosition="middle"
|
||||
embedded={false}
|
||||
embedded="{false}"
|
||||
/>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -35,18 +35,26 @@ StackBackground: true
|
|||
|
||||
Lorem ipsum
|
||||
:end
|
||||
AltText: A map showing the Upper West side in New York City.
|
||||
|
||||
Can add paragraphs of alt text if you want to break up sentences.
|
||||
:end
|
||||
|
||||
Background: AiMap2
|
||||
Text: #### Step 2
|
||||
|
||||
Lorem ipsum
|
||||
:end
|
||||
AltText: The same map now highlights 98th Street.
|
||||
:end
|
||||
|
||||
Background: AiMap3
|
||||
Text: #### Step 3
|
||||
|
||||
Lorem ipsum
|
||||
:end
|
||||
AltText: The same map now highlights three locations near 98th Street where something particulary important happened.
|
||||
:end
|
||||
[]
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
</div>
|
||||
</Story>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
div {
|
||||
min-height: 625px;
|
||||
width: calc(100% + 30px);
|
||||
|
|
|
|||
|
|
@ -6,9 +6,12 @@
|
|||
// @ts-ignore
|
||||
import customiseDocs from './stories/docs/customise.md?raw';
|
||||
// @ts-ignore
|
||||
import patternDocs from './stories/docs/pattern.md?raw';
|
||||
// @ts-ignore
|
||||
import inheritanceDocs from './stories/docs/inheritance.md?raw';
|
||||
|
||||
import ThemedPage from './stories/ThemedPage.svelte';
|
||||
import SiteHeader from '../SiteHeader/SiteHeader.svelte';
|
||||
|
||||
import Theme, { themes } from './Theme.svelte';
|
||||
|
||||
|
|
@ -61,6 +64,20 @@
|
|||
</Theme>
|
||||
</Story>
|
||||
|
||||
<Story name="Background patterns" {...withStoryDocs(patternDocs)}>
|
||||
<div id="pattern-bg">
|
||||
<Theme
|
||||
base="dark"
|
||||
theme="{{
|
||||
colour: { background: 'transparent' },
|
||||
}}"
|
||||
>
|
||||
<SiteHeader />
|
||||
<ThemedPage />
|
||||
</Theme>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Inheritance" {...withStoryDocs(inheritanceDocs)}>
|
||||
<Theme theme="{themes.light}">
|
||||
<div class="themed">
|
||||
|
|
@ -111,4 +128,15 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div#pattern-bg {
|
||||
background-image: url(https://res.cloudinary.com/practicaldev/image/fetch/s--BuPz-p40--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nphrgz8yfnjylrwfr0yl.png);
|
||||
|
||||
:global(.nav-container .inner) {
|
||||
background: #161019 !important;
|
||||
}
|
||||
:global(.nav-container .dropdown) {
|
||||
background: #161019 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
36
src/components/Theme/stories/docs/pattern.md
Normal file
36
src/components/Theme/stories/docs/pattern.md
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
To use a background pattern or image, set the background colour property in your custom theme to `transparent`...
|
||||
|
||||
```svelte
|
||||
<Theme
|
||||
base="dark"
|
||||
theme="{{
|
||||
colour: { background: 'transparent' },
|
||||
}}"
|
||||
>
|
||||
<!-- Page content -->
|
||||
</Theme>
|
||||
```
|
||||
|
||||
... then set your background image in global SCSS:
|
||||
|
||||
```scss
|
||||
// global.scss
|
||||
body {
|
||||
background-color: darkblue;
|
||||
background-image: url('$assets/images/my-pattern.png');
|
||||
}
|
||||
```
|
||||
|
||||
You may also want to override the background on the header nav if it conflicts with your background, especially the dropdown menu:
|
||||
|
||||
```scss
|
||||
// global.scss
|
||||
// Main nav container
|
||||
.nav-container .inner {
|
||||
background: darkblue !important;
|
||||
// Dropdown menu
|
||||
.dropdown {
|
||||
background: darkblue !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -26,7 +26,7 @@ slug: video
|
|||
<Video
|
||||
ariaDescription={"Compulsory description of your video for screen readers."}
|
||||
src={`${assets}/videos/myVideo.mp4`} // or a URL to an external video
|
||||
size={'wide'} // normal, wide, wider, widest or fluid
|
||||
width={'wide'} // normal, wide, wider, widest or fluid
|
||||
caption={'Optional caption for your video.'}
|
||||
/>
|
||||
```
|
||||
|
|
@ -35,7 +35,7 @@ slug: video
|
|||
<Video
|
||||
ariaDescription="Description of your video for screen readers."
|
||||
src={`${assets}/videos/Sequence silent video_4.mp4`}
|
||||
size="wide"
|
||||
width="wide"
|
||||
caption="World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters"
|
||||
/>
|
||||
</DemoContainer>
|
||||
|
|
@ -69,7 +69,7 @@ Here is an example of what the same video would look like with a visibility thre
|
|||
<Video
|
||||
ariaDescription="{'Compulsory description of your video for screen readers.'}"
|
||||
src="{'path-to-video-or-external-url'}"
|
||||
size="{'normal'}"
|
||||
width="{'normal'}"
|
||||
loopVideo="{false}"
|
||||
playVideoThreshold="{0.9}"
|
||||
/>
|
||||
|
|
@ -79,7 +79,7 @@ Here is an example of what the same video would look like with a visibility thre
|
|||
<Video
|
||||
ariaDescription="Description of your video for screen readers."
|
||||
src={`${assets}/videos/Sequence silent video_4.mp4`}
|
||||
size="normal"
|
||||
width="normal"
|
||||
caption="World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters"
|
||||
loopVideo={false}
|
||||
playVideoThreshold={0.9}
|
||||
|
|
@ -182,7 +182,7 @@ and go to the top. Click anywhere on the page before scrolling down to the video
|
|||
<Video
|
||||
ariaDescription="{'Compulsory description of your video for screen readers.'}"
|
||||
src="{'path-to-video-or-external-url'}"
|
||||
size="{'normal'}"
|
||||
width="{'normal'}"
|
||||
controlsOpacity="{1}"
|
||||
loopVideo="{false}"
|
||||
muteVideo="{false}"
|
||||
|
|
@ -194,7 +194,7 @@ and go to the top. Click anywhere on the page before scrolling down to the video
|
|||
<Video
|
||||
ariaDescription="Description of your video for screen readers."
|
||||
src={`${assets}/videos/Sequence sound video.mp4`}
|
||||
size="normal"
|
||||
width="normal"
|
||||
caption="World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters"
|
||||
controlsOpacity={1}
|
||||
loopVideo={false}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ There are several ways to specify font styles.
|
|||
```svelte
|
||||
<style lang="scss">
|
||||
// Import SCSS variables
|
||||
@import 'reuters-graphics/graphics-components/dist/scss/variables';
|
||||
@import '@reuters-graphics/graphics-components/dist/scss/variables';
|
||||
|
||||
p {
|
||||
// Use one...
|
||||
|
|
@ -41,7 +41,7 @@ There are several ways to specify font styles.
|
|||
```svelte
|
||||
<style lang="scss">
|
||||
// Import SCSS mixins
|
||||
@import 'reuters-graphics/graphics-components/dist/scss/mixins';
|
||||
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
||||
|
||||
p {
|
||||
// Use one...
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ Mixin our default body text styles.
|
|||
|
||||
<style lang="scss">
|
||||
// Import SCSS mixins
|
||||
@import 'reuters-graphics/graphics-components/dist/scss/mixins';
|
||||
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
||||
|
||||
div.my-custom-text {
|
||||
// Use body-text rules for all text elements
|
||||
|
|
@ -50,7 +50,7 @@ Graphic text styles.
|
|||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'reuters-graphics/graphics-components/dist/scss/mixins';
|
||||
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
||||
|
||||
div.my-chart-container {
|
||||
@include graphic-text;
|
||||
|
|
@ -68,7 +68,7 @@ Hide text meant for screen readers.
|
|||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'reuters-graphics/graphics-components/dist/scss/mixins';
|
||||
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
||||
|
||||
div.hidden {
|
||||
@include visually-hidden;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.sve
|
|||
export { default as Block } from './components/Block/Block.svelte';
|
||||
export { default as BodyText } from './components/BodyText/BodyText.svelte';
|
||||
export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
|
||||
export { default as DocumentCloud } from './components/DocumentCloud/DocumentCloud.svelte';
|
||||
export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte';
|
||||
export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
|
||||
export { default as Framer } from './components/Framer/Framer.svelte';
|
||||
|
|
|
|||
Loading…
Reference in a new issue