graphicsBlock stuff and quikits
This commit is contained in:
Jon McClure
parent
d3a984debb
commit
98b4b9963a
86 changed files with 351 additions and 4052 deletions
|
|
@ -38,6 +38,10 @@ export const parameters = {
|
|||
'Customising components with SCSS',
|
||||
'*',
|
||||
],
|
||||
'Layout',
|
||||
['*'],
|
||||
'Components',
|
||||
['*'],
|
||||
'*',
|
||||
'Actions',
|
||||
['*'],
|
||||
|
|
|
|||
|
|
@ -34,12 +34,17 @@ div.sbdocs-content {
|
|||
}
|
||||
}
|
||||
|
||||
p.sbdocs-p, ul.sbdocs-ul, li.sbdocs-li {
|
||||
p.sbdocs-p, ul.sbdocs-ul, li.sbdocs-li, a.sbdocs-a {
|
||||
font-size: 18px;
|
||||
line-height: 29px;
|
||||
@include font-display;
|
||||
}
|
||||
|
||||
a.sbdocs-a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sbdocs {
|
||||
@include font-display;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
* Prism: Lightweight, robust, elegant syntax highlighting
|
||||
*
|
||||
* @license MIT <https://opensource.org/licenses/MIT>
|
||||
* @author Lea Verou <https://lea.verou.me>
|
||||
* @namespace
|
||||
* @public
|
||||
*/
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,31 +0,0 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
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,12 +0,0 @@
|
|||
/*!
|
||||
* OverlayScrollbars
|
||||
* https://github.com/KingSora/OverlayScrollbars
|
||||
*
|
||||
* Version: 1.13.0
|
||||
*
|
||||
* Copyright KingSora | Rene Haas.
|
||||
* https://github.com/KingSora
|
||||
*
|
||||
* Released under the MIT license.
|
||||
* Date: 02.08.2020
|
||||
*/
|
||||
|
|
@ -1 +0,0 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{942:function(module,exports){module.exports=function(e,n){return n=n||{},new Promise((function(t,r){var s=new XMLHttpRequest,o=[],u=[],i={},a=function(){return{ok:2==(s.status/100|0),statusText:s.statusText,status:s.status,url:s.responseURL,text:function(){return Promise.resolve(s.responseText)},json:function(){return Promise.resolve(s.responseText).then(JSON.parse)},blob:function(){return Promise.resolve(new Blob([s.response]))},clone:a,headers:{keys:function(){return o},entries:function(){return u},get:function(e){return i[e.toLowerCase()]},has:function(e){return e.toLowerCase()in i}}}};for(var l in s.open(n.method||"get",e,!0),s.onload=function(){s.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(e,n,t){o.push(n=n.toLowerCase()),u.push([n,t]),i[n]=i[n]?i[n]+","+t:t})),t(a())},s.onerror=r,s.withCredentials="include"==n.credentials,n.headers)s.setRequestHeader(l,n.headers[l]);s.send(n.body||null)}))}}}]);
|
||||
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
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -1,2 +0,0 @@
|
|||
import{af as v,ae as p,be as u,at as d,bf as b}from"./iframe.830bfd6b.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.0c88e440.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"es.regexp.flags.0c88e440.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
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
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.830bfd6b.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.830bfd6b.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.2cd6cb87.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
Binary file not shown.
|
Before Width: | Height: | Size: 715 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 472 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
|
|
@ -1,2 +0,0 @@
|
|||
import{j as a,b as p,F as b}from"./iframe.830bfd6b.js";import{R as m}from"./index.60a130f7.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.1ca03a0e.js.map
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 103 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
487
docs/iframe.html
487
docs/iframe.html
|
|
@ -1,487 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--suppress HtmlUnknownTarget -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Storybook</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script>
|
||||
window.CONFIG_TYPE = 'PRODUCTION';
|
||||
window.LOGLEVEL = 'info';
|
||||
window.FRAMEWORK_OPTIONS = {"preprocess":{"defaultLanguages":{"markup":"html","style":"css","script":"javascript"}}};
|
||||
window.CHANNEL_OPTIONS = {};
|
||||
window.FEATURES = {"postcss":true,"emotionAlias":false,"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":false,"modernInlineRender":false,"breakingChangesV7":false,"interactionsDebugger":false,"babelModeV7":false,"argTypeTargetsV7":false,"previewMdx2":true};
|
||||
window.STORIES = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.svelte","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.svelte)$"}];
|
||||
window.SERVER_CHANNEL_URL = undefined;
|
||||
|
||||
// We do this so that "module && module.hot" etc. in Storybook source code
|
||||
// doesn't fail (it will simply be disabled)
|
||||
window.module = undefined;
|
||||
</script>
|
||||
<base target="_parent" />
|
||||
|
||||
<style>
|
||||
/* While we aren't showing the main block yet, but still preparing, we want everything the user
|
||||
has rendered, which may or may not be in #root, to be display none */
|
||||
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide our own blocks when we aren't supposed to be showing them */
|
||||
:not(.sb-show-preparing-story) > .sb-preparing-story,
|
||||
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
|
||||
:not(.sb-show-nopreview) > .sb-nopreview,
|
||||
:not(.sb-show-errordisplay) > .sb-errordisplay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sb-show-main.sb-main-centered {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sb-show-main.sb-main-centered #root {
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
max-height: 100%; /* Hack for centering correctly in IE11 */
|
||||
}
|
||||
|
||||
/* Vertical centering fix for IE11 */
|
||||
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
.sb-show-main.sb-main-centered:after {
|
||||
content: '';
|
||||
min-height: inherit;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-show-main.sb-main-fullscreen {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sb-show-main.sb-main-padded {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sb-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
|
||||
BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sb-heading {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
margin: 10px 0;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.sb-nopreview {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sb-nopreview_main {
|
||||
margin: auto;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.sb-nopreview_heading {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sb-errordisplay {
|
||||
border: 20px solid rgb(187, 49, 49);
|
||||
background: #222;
|
||||
color: #fff;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
.sb-errordisplay_code {
|
||||
padding: 10px;
|
||||
background: #000;
|
||||
color: #eee;
|
||||
font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
|
||||
'Lucida Console', Consolas, Monaco, monospace;
|
||||
}
|
||||
|
||||
.sb-errordisplay pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sb-rotate360 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes sb-rotate360 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes sb-glow {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
@keyframes sb-glow {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* We display the preparing loaders *over* the rendering story */
|
||||
.sb-preparing-story,
|
||||
.sb-preparing-docs {
|
||||
background-color: white;
|
||||
/* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always
|
||||
on top, but this isn't possible as it would require making CSS changes that could affect user code */
|
||||
z-index: 2147483647;
|
||||
}
|
||||
|
||||
.sb-loader {
|
||||
-webkit-animation: sb-rotate360 0.7s linear infinite;
|
||||
animation: sb-rotate360 0.7s linear infinite;
|
||||
border-color: rgba(97, 97, 97, 0.29);
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-top-color: #646464;
|
||||
border-width: 2px;
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
margin-top: -16px;
|
||||
mix-blend-mode: difference;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transition: all 200ms ease-out;
|
||||
vertical-align: top;
|
||||
width: 32px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.sb-previewBlock {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
|
||||
margin: 25px auto 40px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.sb-previewBlock_header {
|
||||
align-items: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.sb-previewBlock_icon {
|
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
||||
animation: sb-glow 1.5s ease-in-out infinite;
|
||||
background: #e6e6e6;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
.sb-previewBlock_icon:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sb-previewBlock_body {
|
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
||||
animation: sb-glow 1.5s ease-in-out infinite;
|
||||
height: 182px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sb-argstableBlock {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin: 25px auto 40px;
|
||||
max-width: 600px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
.sb-argstableBlock th:first-of-type,
|
||||
.sb-argstableBlock td:first-of-type {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.sb-argstableBlock th:nth-of-type(2),
|
||||
.sb-argstableBlock td:nth-of-type(2) {
|
||||
width: 35%;
|
||||
}
|
||||
.sb-argstableBlock th:nth-of-type(3),
|
||||
.sb-argstableBlock td:nth-of-type(3) {
|
||||
width: 15%;
|
||||
}
|
||||
.sb-argstableBlock th:laste-of-type,
|
||||
.sb-argstableBlock td:laste-of-type {
|
||||
width: 25%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.sb-argstableBlock th span,
|
||||
.sb-argstableBlock td span {
|
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
||||
animation: sb-glow 1.5s ease-in-out infinite;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
color: transparent;
|
||||
}
|
||||
.sb-argstableBlock th {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body {
|
||||
border-radius: 4px;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
|
||||
}
|
||||
.sb-argstableBlock-body tr {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sb-argstableBlock-body tr:not(:first-child) {
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
.sb-argstableBlock-body tr:first-child td:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
.sb-argstableBlock-body tr:first-child td:last-child {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.sb-argstableBlock-body tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.sb-argstableBlock-body tr:last-child td:last-child {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.sb-argstableBlock-body td {
|
||||
background: #fff;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.sb-argstableBlock-body td:not(:first-of-type) {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.sb-argstableBlock-body button {
|
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
||||
animation: sb-glow 1.5s ease-in-out infinite;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
color: transparent;
|
||||
display: inline;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-summary {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-code {
|
||||
margin-right: 4px;
|
||||
margin-bottom: 4px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/* globals window */
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
try {
|
||||
if (window.top !== window) {
|
||||
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
|
||||
window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
|
||||
}
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn('unable to connect to top frame for connecting dev tools');
|
||||
}
|
||||
|
||||
window.onerror = function onerror(message, source, line, column, err) {
|
||||
if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
|
||||
// eslint-disable-next-line no-var, vars-on-top
|
||||
var xhr = new window.XMLHttpRequest();
|
||||
xhr.open('POST', '/runtime-error');
|
||||
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
|
||||
xhr.send(
|
||||
JSON.stringify({
|
||||
/* eslint-disable object-shorthand */
|
||||
message: message,
|
||||
source: source,
|
||||
line: line,
|
||||
column: column,
|
||||
error: err && { message: err.message, name: err.name, stack: err.stack },
|
||||
origin: 'preview',
|
||||
/* eslint-enable object-shorthand */
|
||||
})
|
||||
);
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
window.global = window;
|
||||
</script>
|
||||
<script type="module" crossorigin src="https://reuters-graphics.github.io/graphics-components/assets/iframe.830bfd6b.js"></script>
|
||||
<link rel="stylesheet" href="https://reuters-graphics.github.io/graphics-components/assets/iframe.8f02d025.css">
|
||||
<style>
|
||||
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
|
||||
display: none;
|
||||
}
|
||||
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
|
||||
display: none;
|
||||
}
|
||||
:not(.sb-show-preparing-story) > .sb-preparing-story,
|
||||
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
|
||||
:not(.sb-show-nopreview) > .sb-nopreview,
|
||||
:not(.sb-show-errordisplay) > .sb-errordisplay {
|
||||
display: none;
|
||||
}
|
||||
#root[hidden],
|
||||
#docs-root[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sb-preparing-story sb-wrapper">
|
||||
<div class="sb-loader"></div>
|
||||
</div>
|
||||
|
||||
<div class="sb-preparing-docs sb-wrapper">
|
||||
<div class="sb-previewBlock">
|
||||
<div class="sb-previewBlock_header">
|
||||
<div class="sb-previewBlock_icon"></div>
|
||||
<div class="sb-previewBlock_icon"></div>
|
||||
<div class="sb-previewBlock_icon"></div>
|
||||
<div class="sb-previewBlock_icon"></div>
|
||||
</div>
|
||||
<div class="sb-previewBlock_body">
|
||||
<div class="sb-loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<table aria-hidden="true" class="sb-argstableBlock">
|
||||
<thead class="sb-argstableBlock-head">
|
||||
<tr>
|
||||
<th><span>Name</span></th>
|
||||
<th><span>Description</span></th>
|
||||
<th><span>Default</span></th>
|
||||
<th><span>Control </span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="sb-argstableBlock-body">
|
||||
<tr>
|
||||
<td><span>propertyName</span><span title="Required">*</span></td>
|
||||
<td>
|
||||
<div><span>This is a short description</span></div>
|
||||
<div class="sb-argstableBlock-summary">
|
||||
<div><span class="sb-argstableBlock-code">summary</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div><span class="sb-argstableBlock-code">defaultValue</span></div>
|
||||
</td>
|
||||
<td><button>Set string</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>propertyName</span><span>*</span></td>
|
||||
<td>
|
||||
<div><span>This is a short description</span></div>
|
||||
<div class="sb-argstableBlock-summary">
|
||||
<div><span class="sb-argstableBlock-code">summary</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div><span class="sb-argstableBlock-code">defaultValue</span></div>
|
||||
</td>
|
||||
<td><button>Set string</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>propertyName</span><span>*</span></td>
|
||||
<td>
|
||||
<div><span>This is a short description</span></div>
|
||||
<div class="sb-argstableBlock-summary">
|
||||
<div><span class="sb-argstableBlock-code">summary</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div><span class="sb-argstableBlock-code">defaultValue</span></div>
|
||||
</td>
|
||||
<td><button>Set string</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="sb-nopreview sb-wrapper">
|
||||
<div class="sb-nopreview_main">
|
||||
<h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
|
||||
<p>Sorry, but you either have no stories or none are selected somehow.</p>
|
||||
<ul>
|
||||
<li>Please check the Storybook config.</li>
|
||||
<li>Try reloading the page.</li>
|
||||
</ul>
|
||||
<p>
|
||||
If the problem persists, check the browser console, or the terminal you've run Storybook from.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sb-errordisplay sb-wrapper">
|
||||
<pre id="error-message" class="sb-heading"></pre>
|
||||
<pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>
|
||||
</div>
|
||||
|
||||
<div id="root"></div>
|
||||
<div id="docs-root"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"/><style>html, body {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}</style><script>/* globals window */
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
try {
|
||||
if (window.top !== window) {
|
||||
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
}
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn('unable to connect to top frame for connecting dev tools');
|
||||
}
|
||||
|
||||
window.onerror = function onerror(message, source, line, column, err) {
|
||||
if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
|
||||
// eslint-disable-next-line no-var, vars-on-top
|
||||
var xhr = new window.XMLHttpRequest();
|
||||
xhr.open('POST', '/runtime-error');
|
||||
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
|
||||
xhr.send(
|
||||
JSON.stringify({
|
||||
/* eslint-disable object-shorthand */
|
||||
message: message,
|
||||
source: source,
|
||||
line: line,
|
||||
column: column,
|
||||
error: err && { message: err.message, name: err.name, stack: err.stack },
|
||||
origin: 'manager',
|
||||
/* eslint-enable object-shorthand */
|
||||
})
|
||||
);
|
||||
};</script><style>#root[hidden],
|
||||
#docs-root[hidden] {
|
||||
display: none !important;
|
||||
}</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
|
||||
|
||||
|
||||
|
||||
window['LOGLEVEL'] = "info";
|
||||
|
||||
|
||||
|
||||
window['FEATURES'] = {"postcss":true,"emotionAlias":false,"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":false,"modernInlineRender":false,"breakingChangesV7":false,"interactionsDebugger":false,"babelModeV7":false,"argTypeTargetsV7":false,"previewMdx2":true};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
window['DOCS_MODE'] = false;</script><script src="runtime~main.ab7768e2849c7b05f60b.manager.bundle.js"></script><script src="vendors~main.ff5c4f968b0467a4e62e.manager.bundle.js"></script><script src="main.88c40ae9090cf6ed6b2b.manager.bundle.js"></script></body></html>
|
||||
|
|
@ -1 +0,0 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{458:function(module,exports,__webpack_require__){__webpack_require__(459),__webpack_require__(832),__webpack_require__(826),__webpack_require__(830),__webpack_require__(831),__webpack_require__(827),__webpack_require__(824),__webpack_require__(823),__webpack_require__(825),__webpack_require__(822),__webpack_require__(828),__webpack_require__(829),module.exports=__webpack_require__(821)},505:function(module,exports){},832:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var _addons$setConfig,esm=__webpack_require__(100),dist_esm=__webpack_require__(1),Theme=Object(dist_esm.e)({base:"light",brandTitle:"Reuters Graphics components",brandUrl:"https://reuters-graphics.github.io/graphics-components/",brandImage:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",brandTarget:"_self"});esm.a.setConfig(((_addons$setConfig={isFullscreen:!1,showNav:!0,showPanel:!0,panelPosition:"bottom",enableShortcuts:!0,showToolbar:!0,theme:void 0,selectedPanel:void 0,initialActive:"sidebar",sidebar:{showRoots:!1,collapsedRoots:["other"]},toolbar:{title:{hidden:!1},zoom:{hidden:!1},eject:{hidden:!1},copy:{hidden:!1},fullscreen:{hidden:!1}}}).theme=Theme,_addons$setConfig))}},[[458,3,4]]]);
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"generatedAt":1660513509990,"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":true},"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 +0,0 @@
|
|||
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={3:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.e=function requireEnsure(chunkId){var promises=[],installedChunkData=installedChunks[chunkId];if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else{var promise=new Promise((function(resolve,reject){installedChunkData=installedChunks[chunkId]=[resolve,reject]}));promises.push(installedChunkData[2]=promise);var onScriptComplete,script=document.createElement("script");script.charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.src=function jsonpScriptSrc(chunkId){return __webpack_require__.p+""+({}[chunkId]||chunkId)+"."+{0:"e90a374750c335ef9b52",1:"1d7ea4bae8cba34894e3",5:"cc0b259fd92705c30956",6:"df1051eafc33ea00df71",7:"c98a4f665f9515fdf781",8:"45653ed03d608fc0ec24",9:"42821f19fb40e6ca259a"}[chunkId]+".manager.bundle.js"}(chunkId);var error=new Error;onScriptComplete=function(event){script.onerror=script.onload=null,clearTimeout(timeout);var chunk=installedChunks[chunkId];if(0!==chunk){if(chunk){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,chunk[1](error)}installedChunks[chunkId]=void 0}};var timeout=setTimeout((function(){onScriptComplete({type:"timeout",target:script})}),12e4);script.onerror=script.onload=onScriptComplete,document.head.appendChild(script)}return Promise.all(promises)},__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__.oe=function(err){throw console.error(err),err};var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,104 +0,0 @@
|
|||
/*
|
||||
object-assign
|
||||
(c) Sindre Sorhus
|
||||
@license MIT
|
||||
*/
|
||||
|
||||
/*!
|
||||
* Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io)
|
||||
*
|
||||
* Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me)
|
||||
* All Rights Reserved. Apache Software License 2.0
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
/*!
|
||||
* https://github.com/es-shims/es5-shim
|
||||
* @license es5-shim Copyright 2009-2020 by contributors, MIT License
|
||||
* see https://github.com/es-shims/es5-shim/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
/*!
|
||||
* https://github.com/paulmillr/es6-shim
|
||||
* @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com)
|
||||
* and contributors, MIT License
|
||||
* es6-shim: v0.35.4
|
||||
* see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE
|
||||
* Details and documentation:
|
||||
* https://github.com/paulmillr/es6-shim/
|
||||
*/
|
||||
|
||||
/*!
|
||||
* isobject <https://github.com/jonschlinkert/isobject>
|
||||
*
|
||||
* Copyright (c) 2014-2017, Jon Schlinkert.
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
/*! store2 - v2.13.1 - 2021-12-20
|
||||
* Copyright (c) 2021 Nathan Bubna; Licensed (MIT OR GPL-3.0) */
|
||||
|
||||
/**
|
||||
* React Router DOM v6.0.2
|
||||
*
|
||||
* Copyright (c) Remix Software Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE.md file in the root directory of this source tree.
|
||||
*
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/**
|
||||
* React Router v6.0.2
|
||||
*
|
||||
* Copyright (c) Remix Software Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE.md file in the root directory of this source tree.
|
||||
*
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/** @license React v0.19.1
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v16.14.0
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v16.14.0
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
19
package.json
19
package.json
|
|
@ -89,21 +89,24 @@
|
|||
"./package.json": "./package.json",
|
||||
"./actions/cssVariables": "./dist/actions/cssVariables/index.js",
|
||||
"./actions/resizeObserver": "./dist/actions/resizeObserver/index.js",
|
||||
"./components/Ai2svelte/index.svelte": "./dist/components/Ai2svelte/index.svelte",
|
||||
"./components/@types/global.ts": "./dist/components/@types/global.ts",
|
||||
"./components/Ai2svelte/Ai2svelte.svelte": "./dist/components/Ai2svelte/Ai2svelte.svelte",
|
||||
"./components/Article/Article.svelte": "./dist/components/Article/Article.svelte",
|
||||
"./components/BeforeAfter/BeforeAfter.svelte": "./dist/components/BeforeAfter/BeforeAfter.svelte",
|
||||
"./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/EmbedPreviewerLink/EmbedPreviewerLink.svelte": "./dist/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte",
|
||||
"./components/EndNotes/EndNotes.svelte": "./dist/components/EndNotes/EndNotes.svelte",
|
||||
"./components/FeaturePhoto/FeaturePhoto.svelte": "./dist/components/FeaturePhoto/FeaturePhoto.svelte",
|
||||
"./components/Framer/Framer.svelte": "./dist/components/Framer/Framer.svelte",
|
||||
"./components/Framer/Resizer/index.svelte": "./dist/components/Framer/Resizer/index.svelte",
|
||||
"./components/Framer/stores": "./dist/components/Framer/stores.js",
|
||||
"./components/Framer/uniqNames": "./dist/components/Framer/uniqNames.js",
|
||||
"./components/GraphicBlock/GraphicBlock.svelte": "./dist/components/GraphicBlock/GraphicBlock.svelte",
|
||||
"./components/GraphicBlock/GraphicBlockTextWrapper.svelte": "./dist/components/GraphicBlock/GraphicBlockTextWrapper.svelte",
|
||||
"./components/Headline/Headline.svelte": "./dist/components/Headline/Headline.svelte",
|
||||
"./components/Hero/Hero.svelte": "./dist/components/Hero/Hero.svelte",
|
||||
"./components/NoteText/NoteText.svelte": "./dist/components/NoteText/NoteText.svelte",
|
||||
"./components/PymChild/PymChild.svelte": "./dist/components/PymChild/PymChild.svelte",
|
||||
"./components/ReutersLogo/ReutersLogo.svelte": "./dist/components/ReutersLogo/ReutersLogo.svelte",
|
||||
"./components/SEO/analytics": "./dist/components/SEO/analytics.js",
|
||||
|
|
@ -143,7 +146,7 @@
|
|||
"./components/SiteHeader/MobileMenu/index.svelte": "./dist/components/SiteHeader/MobileMenu/index.svelte",
|
||||
"./components/SiteHeader/NavBar/DownArrow.svelte": "./dist/components/SiteHeader/NavBar/DownArrow.svelte",
|
||||
"./components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte",
|
||||
"./components/SiteHeader/NavBar/NavDropdown/SectionDrowdown.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/SectionDrowdown.svelte",
|
||||
"./components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte",
|
||||
"./components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte",
|
||||
"./components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte",
|
||||
"./components/SiteHeader/NavBar/NavDropdown/StoryCard/time": "./dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/time.js",
|
||||
|
|
@ -161,23 +164,25 @@
|
|||
"./components/SiteHeader/svgs/Menu.svelte": "./dist/components/SiteHeader/svgs/Menu.svelte",
|
||||
"./components/Spinner/Spinner.svelte": "./dist/components/Spinner/Spinner.svelte",
|
||||
"./components/Video/Controls.svelte": "./dist/components/Video/Controls.svelte",
|
||||
"./components/Video/index.svelte": "./dist/components/Video/index.svelte",
|
||||
"./components/Video/Video.svelte": "./dist/components/Video/Video.svelte",
|
||||
"./components/Visible/Visible.svelte": "./dist/components/Visible/Visible.svelte",
|
||||
"./scss/_mixins.scss": "./dist/scss/_mixins.scss",
|
||||
"./scss/_variables.scss": "./dist/scss/_variables.scss",
|
||||
"./scss/bootstrap/_main.scss": "./dist/scss/bootstrap/_main.scss",
|
||||
"./scss/bootstrap/_variables.scss": "./dist/scss/bootstrap/_variables.scss",
|
||||
"./scss/colours/thematic/_nord.scss": "./dist/scss/colours/thematic/_nord.scss",
|
||||
"./scss/colours/thematic/_tr.scss": "./dist/scss/colours/thematic/_tr.scss",
|
||||
"./scss/components/_article-metadata.scss": "./dist/scss/components/_article-metadata.scss",
|
||||
"./scss/components/_end-notes.scss": "./dist/scss/components/_end-notes.scss",
|
||||
"./scss/components/_graphic.scss": "./dist/scss/components/_graphic.scss",
|
||||
"./scss/components/_hero-title.scss": "./dist/scss/components/_hero-title.scss",
|
||||
"./scss/fonts/_font-faces.scss": "./dist/scss/fonts/_font-faces.scss",
|
||||
"./scss/fonts/_mixins.scss": "./dist/scss/fonts/_mixins.scss",
|
||||
"./scss/fonts/_rules.scss": "./dist/scss/fonts/_rules.scss",
|
||||
"./scss/fonts/_variables.scss": "./dist/scss/fonts/_variables.scss",
|
||||
"./scss/main.scss": "./dist/scss/main.scss",
|
||||
"./scss/mixins/_block.scss": "./dist/scss/mixins/_block.scss",
|
||||
"./scss/mixins/_body-text.scss": "./dist/scss/mixins/_body-text.scss",
|
||||
"./scss/mixins/_fonts.scss": "./dist/scss/mixins/_fonts.scss",
|
||||
"./scss/mixins/_graphic.scss": "./dist/scss/mixins/_graphic.scss",
|
||||
"./scss/mixins/_note-text.scss": "./dist/scss/mixins/_note-text.scss",
|
||||
"./scss/typography/_background-color.scss": "./dist/scss/typography/_background-color.scss",
|
||||
"./scss/typography/_box-shadow.scss": "./dist/scss/typography/_box-shadow.scss",
|
||||
"./scss/typography/_color.scss": "./dist/scss/typography/_color.scss",
|
||||
|
|
|
|||
4
src/components/@types/global.ts
Normal file
4
src/components/@types/global.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/**
|
||||
* Used for any props that restrict width of a container to one of pre-fab widths.
|
||||
*/
|
||||
export type ContainerWidth = 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||
|
|
@ -1,230 +0,0 @@
|
|||
<script>
|
||||
import { assets } from '$app/paths';
|
||||
let width = null;
|
||||
</script>
|
||||
|
||||
<!-- Generated by ai2html v0.100.0 - 2022-02-14 14:47 -->
|
||||
|
||||
<div id="g-ai-linechart-box" bind:clientWidth="{width}">
|
||||
<!-- Artboard: xs -->
|
||||
{#if width && width >= 0 && width < 510}
|
||||
<div id="g-ai-linechart-xs" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 187.8788% 0;"></div>
|
||||
<div
|
||||
id="g-ai-linechart-xs-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="background-image: url({assets}/images/graphics/ai-linechart-xs.png);"
|
||||
></div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: sm -->
|
||||
{#if width && width >= 510 && width < 660}
|
||||
<div id="g-ai-linechart-sm" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 121.5686% 0;"></div>
|
||||
<div
|
||||
id="g-ai-linechart-sm-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="background-image: url({assets}/images/graphics/ai-linechart-sm.png);"
|
||||
></div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: md -->
|
||||
{#if width && width >= 660 && width < 930}
|
||||
<div id="g-ai-linechart-md" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 52.7353% 0;"></div>
|
||||
<div
|
||||
id="g-ai-linechart-md-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="background-image: url({assets}/images/graphics/ai-linechart-md.png);"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai2-1"
|
||||
class="g-ai2html-settings g-aiAbs g-aiPointText"
|
||||
style="top:10.8355%;margin-top:-9.7px;left:10.3982%;width:41px;"
|
||||
>
|
||||
<p class="g-pstyle0">5%</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-2"
|
||||
class="g-ai2html-settings g-aiAbs g-aiPointText"
|
||||
style="top:29.5108%;margin-top:-9.7px;left:10.3982%;width:29px;"
|
||||
>
|
||||
<p class="g-pstyle0">0</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-3"
|
||||
class="g-ai2html-settings g-aiAbs g-aiPointText"
|
||||
style="top:35.0946%;margin-top:-11.1px;left:84.3799%;width:55px;"
|
||||
>
|
||||
<p class="g-pstyle1">Dow</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-4"
|
||||
class="g-ai2html-settings g-aiAbs g-aiPointText"
|
||||
style="top:39.9791%;margin-top:-11.1px;left:84.3801%;width:83px;"
|
||||
>
|
||||
<p class="g-pstyle2">S&P 500</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-5"
|
||||
class="g-ai2html-settings g-aiAbs g-aiPointText"
|
||||
style="top:48.3111%;margin-top:-11.1px;left:84.3801%;width:78px;"
|
||||
>
|
||||
<p class="g-pstyle3">Nasdaq</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-6"
|
||||
class="g-ai2html-settings g-aiAbs g-aiPointText"
|
||||
style="top:48.1861%;margin-top:-9.7px;left:10.3982%;width:36px;"
|
||||
>
|
||||
<p class="g-pstyle0">−5</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-7"
|
||||
class="g-ai2html-settings g-aiAbs g-aiPointText"
|
||||
style="top:67.1488%;margin-top:-9.7px;left:10.3982%;width:43px;"
|
||||
>
|
||||
<p class="g-pstyle0">−10</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-8"
|
||||
class="g-ai2html-settings g-aiAbs g-aiPointText"
|
||||
style="top:85.8241%;margin-top:-9.7px;left:10.3982%;width:43px;"
|
||||
>
|
||||
<p class="g-pstyle0">−15</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-9"
|
||||
class="g-ai2html-settings g-aiAbs g-aiPointText"
|
||||
style="top:93.0069%;margin-top:-9.7px;left:28.7755%;width:92px;"
|
||||
>
|
||||
<p class="g-pstyle0">Jan. 2, 2022</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-10"
|
||||
class="g-ai2html-settings g-aiAbs g-aiPointText"
|
||||
style="top:93.0069%;margin-top:-9.7px;left:73.7228%;width:57px;"
|
||||
>
|
||||
<p class="g-pstyle0">Jan. 9</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: lg -->
|
||||
{#if width && width >= 930 && width < 1200}
|
||||
<div id="g-ai-linechart-lg" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 66.6667% 0;"></div>
|
||||
<div
|
||||
id="g-ai-linechart-lg-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="background-image: url({assets}/images/graphics/ai-linechart-lg.png);"
|
||||
></div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: xl -->
|
||||
{#if width && width >= 1200}
|
||||
<div id="g-ai-linechart-xl" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 51.6667% 0;"></div>
|
||||
<div
|
||||
id="g-ai-linechart-xl-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="background-image: url({assets}/images/graphics/ai-linechart-xl.png);"
|
||||
></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- End ai2html - 2022-02-14 14:47 -->
|
||||
|
||||
<!-- ai file: ai-linechart.ai -->
|
||||
<style lang="scss">
|
||||
#g-ai-linechart-box,
|
||||
#g-ai-linechart-box .g-artboard {
|
||||
margin: 0 auto;
|
||||
}
|
||||
#g-ai-linechart-box p {
|
||||
margin: 0;
|
||||
}
|
||||
#g-ai-linechart-box .g-aiAbs {
|
||||
position: absolute;
|
||||
}
|
||||
#g-ai-linechart-box .g-aiImg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#g-ai-linechart-box .g-aiPointText p {
|
||||
white-space: nowrap;
|
||||
}
|
||||
#g-ai-linechart-xs {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-ai-linechart-sm {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-ai-linechart-md {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-ai-linechart-md p {
|
||||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 18px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
letter-spacing: 0em;
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
color: rgb(0, 0, 0);
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
mix-blend-mode: normal;
|
||||
font-style: normal;
|
||||
position: static;
|
||||
}
|
||||
#g-ai-linechart-md .g-pstyle0 {
|
||||
height: 18px;
|
||||
}
|
||||
#g-ai-linechart-md .g-pstyle1 {
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
font-size: 17px;
|
||||
color: rgb(116, 196, 118);
|
||||
}
|
||||
#g-ai-linechart-md .g-pstyle2 {
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
font-size: 17px;
|
||||
color: rgb(49, 130, 189);
|
||||
}
|
||||
#g-ai-linechart-md .g-pstyle3 {
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
font-size: 17px;
|
||||
color: rgb(244, 193, 0);
|
||||
}
|
||||
#g-ai-linechart-lg {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-ai-linechart-xl {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Custom CSS */
|
||||
</style>
|
||||
|
|
@ -1,320 +0,0 @@
|
|||
---
|
||||
title: Ai2svelte
|
||||
description: A shortcut for ai2svelte graphics.
|
||||
slug: ai2svelte
|
||||
---
|
||||
|
||||
<script>
|
||||
import DemoContainer from '../_docs/DemoContainer/index.svelte';
|
||||
import Ai2svelte from './index.svelte';
|
||||
import AiChart from './ai2svelte/ai-chart.exclude.svelte';
|
||||
import DataTable from './ai2svelte/data-table.exclude.svelte'
|
||||
|
||||
const fetchComponent = async(componentName) => {
|
||||
return (await import(`./ai2svelte/${componentName}.exclude.svelte`)).default
|
||||
};
|
||||
</script>
|
||||
|
||||
<section>
|
||||
|
||||
## {title}
|
||||
|
||||
Pass a component created by [ai2svelte](https://github.com/reuters-graphics/ai2svelte) to this component, which will wrap it in a graphics section tag.
|
||||
|
||||
</section>
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Ai2svelte } from '@reuters-graphics/graphics-svelte-components';
|
||||
import MyAiChart from './some-chart.svelte';
|
||||
</script>
|
||||
|
||||
<Ai2svelte
|
||||
AiGraphic="{MyAiChart}"
|
||||
ariaDescription="Description of your graphic for screen readers."
|
||||
/>
|
||||
```
|
||||
|
||||
<DemoContainer>
|
||||
<Ai2svelte AiGraphic={AiChart} ariaHidden = {true}
|
||||
ariaDescription="A map of Haiti shows the epicenter of an earthquake in the southwest of the country." />
|
||||
</DemoContainer>
|
||||
|
||||
<section>
|
||||
|
||||
## Accessibility props
|
||||
|
||||
`ariaHidden`
|
||||
|
||||
- Set to `true` by default, which means HTML text content in the
|
||||
ai2svelte component are visible on the page but not read aloud by screen readers.
|
||||
(Read more about aria-hidden elements [here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden).)
|
||||
- Set it to `false` to make the screen reader read aloud HTML text content in ai2svelte.
|
||||
|
||||
`ariaDescription`
|
||||
|
||||
- If `ariaHidden` is `true`, make sure you add an `ariaDescription`, which is invisible on the page but is read aloud by screen readers.
|
||||
- This prop takes a string, like altText for an image.
|
||||
- It should describe what the chart is showing and why it's important. This is helpful for:
|
||||
- Blind readers using screen-reading or Braille conversion software
|
||||
- All readers if the image is unavailable or takes too long to load
|
||||
- Read about writing aria description, also known as alt text, [here](https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81).
|
||||
|
||||
<section class='note'>
|
||||
|
||||
🚨 **Important:** If `ariaHidden` is `true` but you are missing `ariaDescription` or some other special alternative for screen readers (more on this later), your graphic will be hidden from the page and you will see a warning in your console.
|
||||
|
||||
</section>
|
||||
|
||||
Graphics kit users can set your `ariaHidden` prop and write your `ariaDescription` in the google doc like this:
|
||||
|
||||
</section>
|
||||
|
||||
```bash
|
||||
# In your Google doc...
|
||||
[blocks]
|
||||
|
||||
# ...
|
||||
Type: ai2svelte
|
||||
ComponentName: my-chart
|
||||
AriaHidden: true // or false
|
||||
AltText: Add a descriptive line on the graphic for screen readers.
|
||||
|
||||
[]
|
||||
```
|
||||
|
||||
<section>
|
||||
|
||||
## Graphic width
|
||||
|
||||
Adjust the size of the graphic by passing a class name corresponding to one of our well widths: `wide`, `wider`, `widest` or `fluid`.
|
||||
|
||||
</section>
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Ai2svelte } from '@reuters-graphics/graphics-svelte-components';
|
||||
import MyAiChart from './some-chart.svelte';
|
||||
</script>
|
||||
|
||||
<Ai2svelte
|
||||
AiGraphic="{MyAiChart}"
|
||||
size="wide"
|
||||
ariaDescription="A map of Haiti shows the epicenter of an earthquake in the southwest of the country."
|
||||
/>
|
||||
```
|
||||
|
||||
<DemoContainer>
|
||||
<Ai2svelte AiGraphic={AiChart} size='wide'
|
||||
ariaDescription="A map of Haiti shows the epicenter of an earthquake in the southwest of the country." />
|
||||
</DemoContainer>
|
||||
|
||||
<section>
|
||||
|
||||
## Chart title, description, source and note
|
||||
|
||||
Add additional chart chatter through slots.
|
||||
|
||||
</section>
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Ai2svelte } from '@reuters-graphics/graphics-svelte-components';
|
||||
import MyAiChart from './some-chart.svelte';
|
||||
</script>
|
||||
|
||||
<!-- Add an ID and change the default width of your graphic -->
|
||||
<Ai2svelte
|
||||
AiGraphic="{MyAiChart}"
|
||||
id="ai-map"
|
||||
size="wide"
|
||||
ariaDescription="A map of Haiti shows the epicenter of an earthquake in the southwest of the country."
|
||||
>
|
||||
<!-- Add a title and/or notes with slots -->
|
||||
<div slot="title" class="title">
|
||||
<h4>Earthquake in Haiti</h4>
|
||||
<p>A 7.0 magnitude earthquake struck the island on Tuesday.</p>
|
||||
</div>
|
||||
<aside slot="notes">
|
||||
<p class="note">Note: Data current as of Wednesday.</p>
|
||||
<p class="source">Source: USGIS</p>
|
||||
</aside>
|
||||
</Ai2svelte>
|
||||
|
||||
<style lang="scss">
|
||||
// You can now style those elements!
|
||||
h4 {
|
||||
color: darkred;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<DemoContainer>
|
||||
<Ai2svelte AiGraphic="{AiChart}" id="ai-map"
|
||||
ariaHidden = {true}
|
||||
size="wide"
|
||||
ariaDescription="A map of Haiti shows the epicenter of an earthquake in the southwest of the country." >
|
||||
<!-- Add a title and/or notes with slots -->
|
||||
<div slot="title" class="title">
|
||||
<h4>Earthquake in Haiti</h4>
|
||||
<p>A 7.0 magnitude earthquake struck the island on Tuesday.</p>
|
||||
</div>
|
||||
<aside slot="notes">
|
||||
<p class="note">Note: Data current as of Wednesday.</p>
|
||||
<p class="source">Source: USGIS</p>
|
||||
</aside>
|
||||
</Ai2svelte>
|
||||
</DemoContainer>
|
||||
|
||||
<style>
|
||||
div.title h4 {
|
||||
color: darkred;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section>
|
||||
|
||||
## Using ArchieML google doc
|
||||
|
||||
You can use this component to layout AI graphics via an [ArchieML](http://archieml.org/)-formatted Google doc by using the following pattern to dynamically import an ai2svelte component:
|
||||
|
||||
</section>
|
||||
|
||||
```bash
|
||||
# In your Google doc...
|
||||
[blocks]
|
||||
|
||||
# ...
|
||||
Type: ai2svelte
|
||||
ComponentName: my-chart
|
||||
|
||||
[]
|
||||
```
|
||||
|
||||
```svelte
|
||||
<!-- src/lib/Page.svelte -->
|
||||
<script>
|
||||
import content from '$locales/en/content.json';
|
||||
import { Ai2svelte } from '@reuters-graphics/graphics-svelte-components';
|
||||
|
||||
import { truthyString } from '$utils/truthyString';
|
||||
import { fetchComponent } from '$utils/dynamicComponents';
|
||||
</script>
|
||||
|
||||
{#each content.blocks as block}
|
||||
{#if block.Type === 'ai2svelte'}
|
||||
{#await fetchComponent(block.ComponentName)}
|
||||
<div></div>
|
||||
{:then component}
|
||||
<Ai2svelte
|
||||
AiGraphic="{component}"
|
||||
id="{block.ComponentName}"
|
||||
size="{block.Size}"
|
||||
ariaHidden="{truthyString(block.AriaHidden)}"
|
||||
ariaDescription="{block.AltText}"
|
||||
>
|
||||
<!-- Code below is optional. Can delete if you have no dek, source, note, etc. -->
|
||||
<div slot="title" class="title">
|
||||
{#if block.Title}<h4>{block.Title}</h4>{/if}
|
||||
{#if block.Chatter}<p>{block.Chatter}</p>{/if}
|
||||
</div>
|
||||
<aside slot="notes">
|
||||
{#if block.Note}<p class="note">Note: {block.Note}</p>{/if}
|
||||
{#if block.Source}<p class="source">Source: {block.Source}</p>{/if}
|
||||
</aside>
|
||||
<!-- End of optional code -->
|
||||
</Ai2svelte>
|
||||
{:catch error}
|
||||
{console.error(
|
||||
`Error fetching component: ./ai2svelte/${block.ComponentName}.svelte`,
|
||||
error
|
||||
)}
|
||||
{/await}
|
||||
{/if}
|
||||
{/each}
|
||||
```
|
||||
|
||||
<section>
|
||||
|
||||
This comes with some restrictions, though. Be sure your `fetchComponent` function follows [the limits on dynamic imports](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations).
|
||||
|
||||
**NOTE**: Make sure you wrap the function `truthyString()` around `block.StackBackground`. `truthyString()` converts the string pulled from Google docs ('true', 'false', etc.)
|
||||
into a Boolean.
|
||||
|
||||
</section>
|
||||
|
||||
<section class='pt-5'>
|
||||
|
||||
## Customising data for screen readers
|
||||
|
||||
Sometimes, in addition to or instead of adding an aria description for graphics,
|
||||
we want to also provide a data table, a lengthier description with more complex element structure or something else.
|
||||
|
||||
You can add custom information for screen readers only by using the `hidden` slot.
|
||||
|
||||
For example, for the line chart below, we can add a **data table** that helps screen-reader users navigate the data.
|
||||
|
||||
</section>
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import SRDataTable from './SRDataTable.svelte';
|
||||
</script>
|
||||
<Ai2svelte
|
||||
AiGraphic="{MyAiChart}"
|
||||
ariaDescription="A line chart showing daily closing prices for S&P 500, Dow, and Nasdaq from Dec. 31, 2021 to Jan. 10, 2022"
|
||||
>
|
||||
<slot slot="hidden">
|
||||
<SRDataTable/>
|
||||
</slot>
|
||||
<Ai2svelte/>
|
||||
```
|
||||
|
||||
<DemoContainer>
|
||||
{#await fetchComponent('ai-linechart') then component}
|
||||
<Ai2svelte AiGraphic="{component}"
|
||||
ariaDescription="A map of Haiti shows the epicenter of an earthquake in the southwest of the country.">
|
||||
<slot slot="hidden"><DataTable/></slot>
|
||||
</Ai2svelte>
|
||||
{/await}
|
||||
</DemoContainer>
|
||||
|
||||
<section>
|
||||
|
||||
This is what `<SRDataTable/>` looks like. (You can make an HTML table using DataWrapper.)
|
||||
|
||||
</section>
|
||||
|
||||
```svelte
|
||||
<table class="line-chart-data">
|
||||
<thead
|
||||
><tr>
|
||||
<th data-column="Date" data-row="-1">Date </th><th
|
||||
data-column="S&P 500"
|
||||
data-row="-1"
|
||||
>S&P 500
|
||||
</th><th data-column="Dow" data-row="-1">Dow </th><th
|
||||
data-column="Nasdaq"
|
||||
data-row="-1"
|
||||
>Nasdaq
|
||||
</th>
|
||||
</tr></thead
|
||||
>
|
||||
<tbody
|
||||
><tr> <td>December 31, 2021</td><td>0%</td><td>0</td><td>0%</td></tr><tr>
|
||||
<td>January 3, 2022</td><td>1%</td><td>1</td><td>1%</td></tr
|
||||
><tr> <td>January 4, 2022</td><td>1%</td><td>1</td><td>−0%</td></tr><tr>
|
||||
<td>January 5, 2022</td><td>−1%</td><td>0</td><td>−3%</td></tr
|
||||
><tr> <td>January 6, 2022</td><td>−1%</td><td>−0</td><td>−4%</td></tr><tr>
|
||||
<td>January 7, 2022</td><td>−2%</td><td>−0</td><td>−5%</td></tr
|
||||
><tr> <td>January 10, 2022</td><td>−2%</td><td>−1</td><td>−4%</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
```
|
||||
|
||||
<section>
|
||||
|
||||
[Read this](https://accessibility.psu.edu/images/charts/) for more information on screen-reader data tables for charts.
|
||||
|
||||
</section>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<script>
|
||||
/* This component wraps ai2svelte graphics. */
|
||||
export let AiGraphic;
|
||||
export let id = '';
|
||||
export let ariaHidden = true;
|
||||
|
||||
export let ariaDescription = null;
|
||||
|
||||
// normal, wide, wider, widest or fluid
|
||||
export let size = 'normal';
|
||||
export let onAiMounted = () => {};
|
||||
|
||||
if (ariaHidden && !ariaDescription) {
|
||||
console.warn(
|
||||
'Must provide aria description for ai2svelte components if ariaHidden is true.'
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="ai2svelte-container graphic {size}" id="{id}">
|
||||
{#if (ariaHidden && (ariaDescription || $$slots.hidden)) || !ariaHidden}
|
||||
{#if $$slots.title}
|
||||
<div class="chatter-container">
|
||||
<slot name="title" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if ariaDescription}
|
||||
<p class="visually-hidden">{ariaDescription}</p>
|
||||
{/if}
|
||||
{#if $$slots.hidden}
|
||||
<div class="visually-hidden custom">
|
||||
<slot name="hidden" />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="ai-wrapper" aria-hidden="{ariaHidden}">
|
||||
<svelte:component this="{AiGraphic}" onAiMounted="{onAiMounted}" />
|
||||
</div>
|
||||
{#if $$slots.notes}
|
||||
<div class="chatter-container">
|
||||
<slot name="notes" />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@reuters-graphics/style-theme-eisbaer/scss/components/containers/widths';
|
||||
.chatter-container {
|
||||
@extend .well;
|
||||
}
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
import { throttle } from 'lodash-es';
|
||||
import { onMount } from 'svelte';
|
||||
import Block from '../Block/Block.svelte';
|
||||
import type { ContainerWidth } from '../@types/global';
|
||||
|
||||
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||
/** Width of the chart within the text well. */
|
||||
export let width: ContainerWidth = 'normal'; // options: wide, wider, widest, fluid
|
||||
/** Height of the component */
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script lang="ts">
|
||||
type ColumnWidth = 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||
import type { ContainerWidth } from '../@types/global';
|
||||
|
||||
/** Width of the block within the article well. */
|
||||
export let width: ColumnWidth = 'normal';
|
||||
export let width: ContainerWidth = 'normal';
|
||||
|
||||
/** Add an id to the block tag to target it with custom CSS. */
|
||||
export let id: string = '';
|
||||
|
|
|
|||
|
|
@ -17,14 +17,12 @@
|
|||
</Block>
|
||||
|
||||
<!-- svelte-ignore css-unused-selector -->
|
||||
<style lang="scss">
|
||||
<style lang="scss" global>
|
||||
// Technically... we probably should unbind these styles from the component
|
||||
// and import them in the app through a separate scss file.
|
||||
@import "../../scss/mixins";
|
||||
|
||||
:global {
|
||||
div.article-block.body-text {
|
||||
@include body-text;
|
||||
}
|
||||
div.article-block.body-text {
|
||||
@include body-text;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
|
||||
import type { ContainerWidth } from '../@types/global';
|
||||
/**
|
||||
* Title of the graphic
|
||||
* @type {string}
|
||||
|
|
@ -40,7 +41,6 @@
|
|||
/** iframe scrolling option */
|
||||
export let scrolling: ScrollingOption = 'no';
|
||||
|
||||
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||
/** Width of the chart within the text well. */
|
||||
export let width: ContainerWidth = 'normal'; // options: wide, wider, widest, fluid
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
// @ts-ignore
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
// @ts-ignore
|
||||
import quickitDocs from './stories/docs/quickit.md?raw';
|
||||
// @ts-ignore
|
||||
import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
|
||||
|
||||
import FeaturePhoto from './FeaturePhoto.svelte';
|
||||
|
|
@ -45,6 +47,17 @@
|
|||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="🚀 QUICKIT"
|
||||
args={{
|
||||
src: sharkSrc,
|
||||
altText: 'A shark!',
|
||||
width: 'normal',
|
||||
caption: 'Carcharodon carcharias - REUTERS'
|
||||
}}
|
||||
{...withStoryDocs(quickitDocs)}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Missing altText"
|
||||
args={{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import Block from '../Block/Block.svelte';
|
||||
import type { ContainerWidth } from '../@types/global';
|
||||
|
||||
/**
|
||||
* Photo src
|
||||
|
|
@ -23,19 +24,14 @@
|
|||
* Height of the photo placeholder when lazy-loading
|
||||
*/
|
||||
export let height: number = 100;
|
||||
|
||||
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||
|
||||
/**
|
||||
* Width of the container, one of: normal, wide, wider, widest or fluid
|
||||
*/
|
||||
export let width: ContainerWidth = 'normal';
|
||||
|
||||
/**
|
||||
* Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
|
||||
*/
|
||||
export let lazy: boolean = false;
|
||||
|
||||
/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading. */
|
||||
export let top = 0;
|
||||
/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading. */
|
||||
|
|
|
|||
40
src/components/FeaturePhoto/stories/docs/quickit.md
Normal file
40
src/components/FeaturePhoto/stories/docs/quickit.md
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
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'}
|
||||
<FeautrePhoto
|
||||
width={block.Width}
|
||||
src={`${assets}/${block.Src}`}
|
||||
altText={block.AltText}
|
||||
caption={block.Caption}
|
||||
/>
|
||||
<!-- END copy/paste -->
|
||||
|
||||
|
||||
{/if}
|
||||
{/each}
|
||||
```
|
||||
14
src/components/GraphicBlock/AriaHidden.svelte
Normal file
14
src/components/GraphicBlock/AriaHidden.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script lang="ts">
|
||||
/**
|
||||
* Whether to wrap the graphic with an aria hidden tag.
|
||||
*/
|
||||
export let hidden: boolean = false;
|
||||
</script>
|
||||
|
||||
{#if hidden}
|
||||
<div aria-hidden="true">
|
||||
<slot></slot>
|
||||
</div>
|
||||
{:else}
|
||||
<slot></slot>
|
||||
{/if}
|
||||
|
|
@ -4,17 +4,25 @@
|
|||
// @ts-ignore
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
// @ts-ignore
|
||||
import quickitDocs from './stories/docs/quickit.md?raw';
|
||||
// @ts-ignore
|
||||
import customTextDocs from './stories/docs/customText.md?raw';
|
||||
// @ts-ignore
|
||||
import ai2svelteDocs from './stories/docs/ai2svelte.md?raw';
|
||||
// @ts-ignore
|
||||
import ariaDocs from './stories/docs/aria.md?raw';
|
||||
|
||||
import GraphicBlock from './GraphicBlock.svelte';
|
||||
|
||||
import AiMap from './stories/ai2svelte/ai-chart.svelte';
|
||||
|
||||
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
// @ts-ignore
|
||||
import PlaceholderImg from './stories/placeholder.png';
|
||||
|
||||
const meta = {
|
||||
title: 'Layout/GraphicBlock',
|
||||
title: 'Components/GraphicBlock',
|
||||
component: GraphicBlock,
|
||||
...withComponentDocs(componentDocs),
|
||||
// https://storybook.js.org/docs/svelte/essentials/controls
|
||||
|
|
@ -51,13 +59,26 @@
|
|||
}}"
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="🚀 QUICKIT"
|
||||
{...withStoryDocs(quickitDocs)}
|
||||
>
|
||||
<GraphicBlock
|
||||
width="normal"
|
||||
title="Earthquake in Haiti"
|
||||
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
||||
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
||||
>
|
||||
<AiMap />
|
||||
</GraphicBlock>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Custom text"
|
||||
{...withStoryDocs(customTextDocs)}
|
||||
>
|
||||
<GraphicBlock
|
||||
width="normal"
|
||||
notes={"Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"}
|
||||
>
|
||||
<div slot="title">
|
||||
<h5>My smaller title</h5>
|
||||
|
|
@ -65,6 +86,38 @@
|
|||
<div class="demo-graphic">
|
||||
<img src="{PlaceholderImg}" alt="placeholder" />
|
||||
</div>
|
||||
<aside slot="notes">
|
||||
<p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
|
||||
</aside>
|
||||
</GraphicBlock>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Ai2svelte"
|
||||
{...withStoryDocs(ai2svelteDocs)}
|
||||
>
|
||||
<GraphicBlock
|
||||
width="normal"
|
||||
title="Earthquake in Haiti"
|
||||
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
||||
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
||||
>
|
||||
<AiMap />
|
||||
</GraphicBlock>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="ARIA"
|
||||
{...withStoryDocs(ariaDocs)}
|
||||
>
|
||||
<GraphicBlock
|
||||
width="normal"
|
||||
title="Earthquake in Haiti"
|
||||
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
||||
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
||||
ariaDescription="A map showing the shake intensity produced by the earthquake."
|
||||
>
|
||||
<AiMap />
|
||||
</GraphicBlock>
|
||||
</Story>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<script lang="ts">
|
||||
// You can declare custom types to help users implement your component.
|
||||
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||
import type { ContainerWidth } from '../@types/global';
|
||||
|
||||
/**
|
||||
* Width of the component within the text well.
|
||||
|
|
@ -62,8 +61,14 @@
|
|||
* @type {string}
|
||||
*/
|
||||
export let ariaLabel: string = 'chart';
|
||||
/**
|
||||
* ARIA description, passed in as a markdown string.
|
||||
* @type {string}
|
||||
*/
|
||||
export let ariaDescription: string | null = null;
|
||||
|
||||
import GraphicBlockTextWrapper from "./GraphicBlockTextWrapper.svelte";
|
||||
import AriaHidden from './AriaHidden.svelte';
|
||||
import TextBlock from "./TextBlock.svelte";
|
||||
import Block from "../Block/Block.svelte";
|
||||
import { marked } from 'marked';
|
||||
</script>
|
||||
|
|
@ -71,31 +76,43 @@
|
|||
<Block {id} {snap} {noMargin} {role} {width} {ariaLabel} cls="graphic {cls}">
|
||||
<div>
|
||||
{#if $$slots.title}
|
||||
<GraphicBlockTextWrapper width={textWidth}>
|
||||
<TextBlock width={textWidth}>
|
||||
<!-- Custom title content -->
|
||||
<slot name="title" />
|
||||
</GraphicBlockTextWrapper>
|
||||
</TextBlock>
|
||||
{:else if (title)}
|
||||
<GraphicBlockTextWrapper width={textWidth}>
|
||||
<TextBlock width={textWidth}>
|
||||
<h3>{title}</h3>
|
||||
{#if (description)}
|
||||
{@html marked(description)}
|
||||
{/if}
|
||||
</GraphicBlockTextWrapper>
|
||||
</TextBlock>
|
||||
{/if}
|
||||
<AriaHidden hidden={(!!($$slots.aria) || !!ariaDescription)}>
|
||||
<!-- Graphic content -->
|
||||
<slot></slot>
|
||||
</AriaHidden>
|
||||
{#if $$slots.aria || ariaDescription}
|
||||
<div class="visually-hidden">
|
||||
{#if $$slots.aria}
|
||||
<!-- Custom ARIA markup -->
|
||||
<slot name="aria"></slot>
|
||||
{:else}
|
||||
{@html marked(ariaDescription)}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Graphic content -->
|
||||
<slot></slot>
|
||||
{#if $$slots.notes}
|
||||
<GraphicBlockTextWrapper width={textWidth}>
|
||||
<TextBlock width={textWidth}>
|
||||
<!-- Custom notes content -->
|
||||
<slot name="notes" />
|
||||
</GraphicBlockTextWrapper>
|
||||
</TextBlock>
|
||||
{:else if (notes)}
|
||||
<GraphicBlockTextWrapper width={textWidth}>
|
||||
<TextBlock width={textWidth}>
|
||||
<aside>
|
||||
{@html marked(notes)}
|
||||
</aside>
|
||||
</GraphicBlockTextWrapper>
|
||||
</TextBlock>
|
||||
{/if}
|
||||
</div>
|
||||
</Block>
|
||||
|
|
@ -108,4 +125,8 @@
|
|||
@include graphic-text;
|
||||
}
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||
import type { ContainerWidth } from '../@types/global';
|
||||
|
||||
/** Width of the component within the text well. */
|
||||
export let width: ContainerWidth | null = null;
|
||||
|
|
@ -1,5 +1,13 @@
|
|||
<script>
|
||||
import { assets } from '$app/paths';
|
||||
// svelte-ignore unused-export-let
|
||||
export let basePath = './';
|
||||
// For demo purposes only, hard-wiring img paths from Vite
|
||||
// @ts-ignore
|
||||
import chartXs from '../imgs/ai-chart-xs.png';
|
||||
// @ts-ignore
|
||||
import chartSm from '../imgs/ai-chart-sm.png';
|
||||
// @ts-ignore
|
||||
import chartMd from '../imgs/ai-chart-md.png';
|
||||
let width = null;
|
||||
</script>
|
||||
|
||||
|
|
@ -14,7 +22,7 @@
|
|||
id="g-_ai-chart-xs-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${assets}/images/graphics/ai-chart-xs.png);`}"
|
||||
style="{`background-image: url(${chartXs});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai0-1"
|
||||
|
|
@ -147,7 +155,7 @@
|
|||
id="g-_ai-chart-sm-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${assets}/images/graphics/ai-chart-sm.png);`}"
|
||||
style="{`background-image: url(${chartSm});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai1-1"
|
||||
|
|
@ -280,7 +288,7 @@
|
|||
id="g-_ai-chart-md-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${assets}/images/graphics/ai-chart-md.png);`}"
|
||||
style="{`background-image: url(${chartMd});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai2-1"
|
||||
19
src/components/GraphicBlock/stories/docs/ai2svelte.md
Normal file
19
src/components/GraphicBlock/stories/docs/ai2svelte.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
You can use `GraphicBlock` with components created by [ai2svelte](https://github.com/reuters-graphics/ai2svelte).
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { GraphicBlock } from '@reuters-graphics/graphics-components';
|
||||
import MyAiMap from './ai2svelte/my-map.svelte';
|
||||
import { assets } from '$app/paths'; // If using with the Graphics Kit
|
||||
</script>
|
||||
|
||||
<GraphicBlock
|
||||
width="normal"
|
||||
title="Earthquake in Haiti"
|
||||
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
||||
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
||||
ariaDescription="A map showing shake intensity of the quake."
|
||||
>
|
||||
<MyAiMap basePath={assets} />
|
||||
</GraphicBlock>
|
||||
```
|
||||
53
src/components/GraphicBlock/stories/docs/aria.md
Normal file
53
src/components/GraphicBlock/stories/docs/aria.md
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
If your chart isn't easily read by screen readers — for example, it has annotations that when read without the visual won't make sense — you should add an `ariaDescription` that better describes the chart.
|
||||
|
||||
The `ariaDescription` string will be processed as markdown, so you can add multiple paragraphs, links, headers or whatever else you need in markdown.
|
||||
|
||||
> **Note:** When you set an `ariaDescription`, your graphic will be automatically wrapped in a div that tells screen readers not to read the text in the graphic, but instead read the hidden ARIA description.
|
||||
|
||||
```svelte
|
||||
<GraphicBlock
|
||||
width="normal"
|
||||
title="Earthquake in Haiti"
|
||||
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
||||
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
||||
ariaDescription="A map showing the shake intensity produced by the earthquake."
|
||||
>
|
||||
<MyAiMap basePath={assets} />
|
||||
</GraphicBlock>
|
||||
```
|
||||
|
||||
Sometimes, instead of a simple ARIA description for graphics, we want to also provide a data table or something else that requires more complex markup.
|
||||
|
||||
You can add custom markup for screen readers only by using the `aria` named slot.
|
||||
|
||||
> **Note:** The `aria` slot will override the `ariaDescription` and will also hide the text in your graphic from screen readers.
|
||||
|
||||
```svelte
|
||||
<GraphicBlock
|
||||
width="normal"
|
||||
title="Earthquake in Haiti"
|
||||
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
||||
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
||||
>
|
||||
<MyAiMap basePath={assets} />
|
||||
<div slot="aria">
|
||||
<p>A shakemap shows the intensity of the 7.2-magnitude earthquake that struck Haiti at 8:29 a.m. EST, Aug. 14, 2021.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>City</th>
|
||||
<th>Felt shake strength</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Les Cayes</td>
|
||||
<td>Very strong</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jeremie</td>
|
||||
<td>Strong</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</GraphicBlock>
|
||||
```
|
||||
|
||||
[Read this](https://accessibility.psu.edu/images/charts/) for more information on using screen reader data tables for charts.
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
The `GraphicBlock` component is a subset of the [`Block`](./?path=/docs/layout-block) component that also handles text elements around a graphic.
|
||||
The `GraphicBlock` component is a special derivative of the [`Block`](./?path=/docs/layout-block) component that also handles text elements around a graphic.
|
||||
|
||||
Many other components use this one to wrap graphics with styled text. When you use it, you'll also wrap your chart elements or component with it like this:
|
||||
|
||||
|
|
|
|||
|
|
@ -7,5 +7,8 @@ You can override the markup used to generate the chart text elements by using th
|
|||
>
|
||||
<h5 slot="title">My smaller title</h5>
|
||||
<div id="my-chart" />
|
||||
<aside slot="notes">
|
||||
<p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
|
||||
</aside>
|
||||
</GraphicBlock>
|
||||
```
|
||||
|
|
|
|||
54
src/components/GraphicBlock/stories/docs/quickit.md
Normal file
54
src/components/GraphicBlock/stories/docs/quickit.md
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
An example of using `GraphicBlock` in the Graphics Kit with an ai2svelte chart and a Google Doc.
|
||||
|
||||
```yaml
|
||||
# Google doc block
|
||||
Type: ai2svelte
|
||||
ID: my-map
|
||||
Width: normal
|
||||
TextWidth: normal
|
||||
Title: Earthquake in Haiti
|
||||
Description: The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021.
|
||||
Notes: \Note: A shakemap represents the ground shaking produced by an earthquake.
|
||||
|
||||
\Source: USGIS
|
||||
:end
|
||||
Aria: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
|
||||
:end
|
||||
```
|
||||
|
||||
```svelte
|
||||
<!-- App.svelte -->
|
||||
<script>
|
||||
// Import the component ai2svelte made
|
||||
import MyMap from './ai2svelte/my-map.svelte';
|
||||
|
||||
// These should be already imported for you.
|
||||
import { GraphicBlock } from '@reuters-graphics/graphics-components';
|
||||
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 === 'ai2svelte' && block.ID === 'my-map'}
|
||||
<GraphicBlock
|
||||
width={block.Width}
|
||||
textWidth={block.TextWidth}
|
||||
title={block.Title}
|
||||
description={block.Description}
|
||||
notes={block.Notes}
|
||||
ariaDescription={block.Aria}
|
||||
>
|
||||
<MyMap basePath={assets} />
|
||||
</GraphicBlock>
|
||||
<!-- END copy/paste -->
|
||||
|
||||
|
||||
{/if}
|
||||
{/each}
|
||||
```
|
||||
|
||||
> **Note:** Unlike other components you may use in the Kit, ai2svelte graphics have to be added individually to `App.svelte` and the ai2svelte component for each graphic passed into its respective `GraphicBlock`. That's why each block in the Google Doc has an `ID` key.
|
||||
|
Before Width: | Height: | Size: 618 KiB After Width: | Height: | Size: 618 KiB |
|
Before Width: | Height: | Size: 388 KiB After Width: | Height: | Size: 388 KiB |
|
Before Width: | Height: | Size: 226 KiB After Width: | Height: | Size: 226 KiB |
|
|
@ -17,14 +17,12 @@
|
|||
</Block>
|
||||
|
||||
<!-- svelte-ignore css-unused-selector -->
|
||||
<style lang="scss">
|
||||
<style lang="scss" global>
|
||||
// Same as body text... we probably should unbind these styles from the component
|
||||
// and import them in the app through a separate scss file.
|
||||
@import "../../scss/mixins";
|
||||
|
||||
:global {
|
||||
div.article-block.notes {
|
||||
@include note-text;
|
||||
}
|
||||
div.article-block.notes {
|
||||
@include note-text;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import IntersectionObserver from 'svelte-intersection-observer';
|
||||
import Controls from './Controls.svelte';
|
||||
import Block from '../Block/Block.svelte';
|
||||
import type { ContainerWidth } from '../@types/global';
|
||||
|
||||
/// //////////////////////////////////
|
||||
/// /////////// Props ////////////////
|
||||
|
|
@ -14,14 +15,12 @@
|
|||
export let ariaHidden = true;
|
||||
export let ariaDescription = null;
|
||||
export let caption = '';
|
||||
|
||||
type ColumnWidth = 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
||||
|
||||
/**
|
||||
* Width of the block within the article well.
|
||||
* @type {string}
|
||||
*/
|
||||
export let width: ColumnWidth = 'normal';
|
||||
export let width: ContainerWidth = 'normal';
|
||||
|
||||
type PreloadOptions = 'auto' | 'none' | 'metadata';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
// export { default as Ai2svelte } from './Ai2svelte/index.svelte';
|
||||
export { default as Article } from './components/Article/Article.svelte';
|
||||
export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
|
||||
export { default as Block } from './components/Block/Block.svelte';
|
||||
|
|
|
|||
|
|
@ -3,3 +3,4 @@
|
|||
@import "mixins/fonts";
|
||||
@import "mixins/graphic";
|
||||
@import "mixins/note-text";
|
||||
@import "mixins/visually-hidden";
|
||||
|
|
|
|||
12
src/scss/mixins/_visually-hidden.scss
Normal file
12
src/scss/mixins/_visually-hidden.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@mixin visually-hidden {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Loading…
Reference in a new issue