docs

docs/assets/es.regexp.flags.b81b59d3.js

@@ -1,2 +1,2 @@
-import{af as v,ae as p,be as u,at as d,bf as b}from"./iframe.32057434.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.dbeb596d.js.map
+import{af as v,ae as p,be as u,at as d,bf as b}from"./iframe.50e19cfe.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.b81b59d3.js.map

docs/assets/es.regexp.flags.b81b59d3.js.map

@@ -1 +1 @@
-{"version":3,"file":"es.regexp.flags.dbeb596d.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.b81b59d3.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"}

docs/assets/index.58c8c030.js

@@ -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.32057434.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.32057434.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.bfc38c52.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.50e19cfe.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.50e19cfe.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.58c8c030.js.map

docs/assets/renderDocs.87982ad8.js

@@ -1,2 +1,2 @@
-import{j as a,b as p,F as b}from"./iframe.32057434.js";import{R as m}from"./index.a9847430.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.ba41fda1.js.map
+import{j as a,b as p,F as b}from"./iframe.50e19cfe.js";import{R as m}from"./index.8e792bfd.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.87982ad8.js.map

docs/iframe.html

@@ -370,8 +370,8 @@
 <script>
   window.global = window;
 </script>
-    <script type="module" crossorigin src="https://reuters-graphics.github.io/graphics-components/assets/iframe.32057434.js"></script>
-    <link rel="stylesheet" href="https://reuters-graphics.github.io/graphics-components/assets/iframe.05998c82.css">
+    <script type="module" crossorigin src="https://reuters-graphics.github.io/graphics-components/assets/iframe.50e19cfe.js"></script>
+    <link rel="stylesheet" href="https://reuters-graphics.github.io/graphics-components/assets/iframe.430fa862.css">
   <style>
     .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
       display: none;

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1660682817039,"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"}}}
+{"generatedAt":1660756811909,"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"}}}

src/components/BeforeAfter/BeforeAfter.stories.svelte

@@ -17,7 +17,7 @@
 
   import {
     withComponentDocs,
-    withStoryDocs
+    withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
 
   const meta = {
@@ -42,45 +42,48 @@
 
 <Story
   name="Default"
-  args={{
+  args="{{
     beforeSrc: beforeImg,
-    beforeAlt: 'Satellite image of Russian base at Myrne taken on July 7, 2020.',
+    beforeAlt:
+      'Satellite image of Russian base at Myrne taken on July 7, 2020.',
     afterSrc: afterImg,
-    afterAlt: 'Satellite image of Russian base at Myrne taken on Oct. 20, 2020.',
-  }}
+    afterAlt:
+      'Satellite image of Russian base at Myrne taken on Oct. 20, 2020.',
+  }}"
 />
 
 <Story name="With overlays" {...withStoryDocs(withOverlaysDocs)}>
-<BeforeAfter
-  beforeSrc="{beforeImg}"
-  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-  afterSrc="{afterImg}"
-  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
->
-  <div slot="beforeOverlay" class="overlay before">
-    <h6>July 7, 2020</h6>
-    <p>Initially, this site was far smaller.</p>
-  </div>
-  <div slot="afterOverlay" class="overlay after">
-    <h6>Oct. 20, 2020</h6>
-    <p>But then forces built up.</p>
-  </div>
-  <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
-</BeforeAfter>
+  <BeforeAfter
+    beforeSrc="{beforeImg}"
+    beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+    afterSrc="{afterImg}"
+    afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+  >
+    <div slot="beforeOverlay" class="overlay before">
+      <h6>July 7, 2020</h6>
+      <p>Initially, this site was far smaller.</p>
+    </div>
+    <div slot="afterOverlay" class="overlay after">
+      <h6>Oct. 20, 2020</h6>
+      <p>But then forces built up.</p>
+    </div>
+    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+  </BeforeAfter>
 
-<style lang="scss">
-.overlay {
-  color: white;
-  padding: 15px;
-  background: rgba(0, 0, 0, 0.2);
-  &.after {
-    text-align: right;
-  }
-  h6, p {
-    color: white;
-  }
-}
-</style>
+  <style lang="scss">
+    .overlay {
+      color: white;
+      padding: 15px;
+      background: rgba(0, 0, 0, 0.2);
+      &.after {
+        text-align: right;
+      }
+      h6,
+      p {
+        color: white;
+      }
+    }
+  </style>
 </Story>
 
 <Story name="ARIA descriptions" {...withStoryDocs(ariaDescriptionsDocs)}>
@@ -112,10 +115,9 @@
       padding: 15px;
       max-width: 250px;
       background: rgba(0, 0, 0, 0.2);
-      
     }
     p {
       color: white;
     }
-    </style>
-</Story>
+  </style>
+</Story>

src/components/BeforeAfter/BeforeAfter.svelte

@@ -9,7 +9,6 @@
   /** Height of the component */
   export let height = 600;
 
-
   /**
    * If set, makes the height a ratio of the component's width.
    * @type {number}
@@ -68,7 +67,8 @@
   let isFocused = false;
   let containerWidth;
 
-  $: containerHeight = (containerWidth && heightRatio) ? containerWidth * heightRatio : height;
+  $: containerHeight =
+    containerWidth && heightRatio ? containerWidth * heightRatio : height;
 
   const onFocus = () => (isFocused = true);
   const onBlur = () => (isFocused = false);
@@ -100,16 +100,16 @@
   const move = (e) => {
     if (sliding && imgOffset) {
       const el = e.touches ? e.touches[0] : e;
-      const figureOffset = figure ?
-        parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2)) :
-        0;
+      const figureOffset = figure
+        ? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
+        : 0;
       let x = el.pageX - figureOffset - imgOffset.left;
       x =
-        x < handleMargin ?
-          handleMargin :
-          x > w - handleMargin ?
-            w - handleMargin :
-            x;
+        x < handleMargin
+          ? handleMargin
+          : x > w - handleMargin
+          ? w - handleMargin
+          : x;
       offset = x / w;
     }
   };
@@ -151,7 +151,7 @@
 />
 
 {#if beforeSrc && beforeAlt && afterSrc && afterAlt}
-  <Block {width} {id} cls="photo before-after">
+  <Block width="{width}" id="{id}" cls="photo before-after">
     <div
       style="height: {containerHeight}px;"
       bind:clientWidth="{containerWidth}"
@@ -200,7 +200,10 @@
         {#if $$slots.afterOverlay}
           <div id="image-after-label" class="overlay-container after">
             <!-- Overlay for after image -->
-            <slot name="afterOverlay" description="{`${id}-after-description`}" />
+            <slot
+              name="afterOverlay"
+              description="{`${id}-after-description`}"
+            />
           </div>
         {/if}
         <div
@@ -226,8 +229,8 @@
 {/if}
 
 <style lang="scss">
-  @import "../../scss/mixins/fonts";
-  @import "../../scss/colours/thematic/tr";
+  @import '../../scss/mixins/fonts';
+  @import '../../scss/colours/thematic/tr';
   figure.before-after-container {
     overflow: hidden;
     position: relative;
@@ -336,9 +339,8 @@
         &:last-of-type {
           margin-bottom: 0;
         }
-        
 
-        @media(max-width: 540px) {
+        @media (max-width: 540px) {
           font-size: 0.8rem;
           line-height: 1.1rem;
         }

src/components/Block/Block.stories.svelte

@@ -21,7 +21,15 @@
     argTypes: {
       width: {
         control: 'select',
-        options: ['narrower', 'narrow', 'normal', 'wide', 'wider', 'widest', 'fluid'],
+        options: [
+          'narrower',
+          'narrow',
+          'normal',
+          'wide',
+          'wider',
+          'widest',
+          'fluid',
+        ],
       },
     },
   };
@@ -52,50 +60,62 @@
     <!-- Enter bootstrap grid! -->
     <div class="container-fluid text-center">
       <div class="row">
-        <div class="col">
-          Column
-        </div>
-        <div class="col-6">
-          Column
-        </div>
-        <div class="col">
-          Column
-        </div>
+        <div class="col">Column</div>
+        <div class="col-6">Column</div>
+        <div class="col">Column</div>
       </div>
       <div class="row">
-        <div class="col">
-          Column
-        </div>
-        <div class="col">
-          Column
-        </div>
+        <div class="col">Column</div>
+        <div class="col">Column</div>
       </div>
     </div>
   </Block>
 </Story>
 
-<Story
-  name="Snap widths"
-  {...withStoryDocs(snapWidthsDocs)}
->
-<Article id="block-demo-article">
-  <div class="article-boundaries">
-    <div class="label">Article</div>
-      <Block width="narrower" snap={true} cls="block-snap-widths-demo">narrower</Block>
-      <Block width="narrow" snap={true} cls="block-snap-widths-demo">narrow</Block>
-      <Block width="normal" snap={true} cls="block-snap-widths-demo">normal</Block>
-      <Block width="wide" snap={true} cls="block-snap-widths-demo">wide</Block>
-      <Block width="wider" snap={true} cls="block-snap-widths-demo">wider</Block>
-      <Block width="narrower" snap={true} cls="block-snap-widths-demo even">narrower</Block>
-      <Block width="narrow" snap={true} cls="block-snap-widths-demo even">narrow</Block>
-      <Block width="normal" snap={true} cls="block-snap-widths-demo even skip-narrow">normal.skip-narrow</Block>
-      <Block width="wide" snap={true} cls="block-snap-widths-demo even skip-normal skip-narrow">wide.skip-normal.skip-narrow</Block>
-      <Block width="wider" snap={true} cls="block-snap-widths-demo even skip-wide">wider.skip-wide</Block>
+<Story name="Snap widths" {...withStoryDocs(snapWidthsDocs)}>
+  <Article id="block-demo-article">
+    <div class="article-boundaries">
+      <div class="label">Article</div>
+      <Block width="narrower" snap="{true}" cls="block-snap-widths-demo"
+        >narrower</Block
+      >
+      <Block width="narrow" snap="{true}" cls="block-snap-widths-demo"
+        >narrow</Block
+      >
+      <Block width="normal" snap="{true}" cls="block-snap-widths-demo"
+        >normal</Block
+      >
+      <Block width="wide" snap="{true}" cls="block-snap-widths-demo">wide</Block
+      >
+      <Block width="wider" snap="{true}" cls="block-snap-widths-demo"
+        >wider</Block
+      >
+      <Block width="narrower" snap="{true}" cls="block-snap-widths-demo even"
+        >narrower</Block
+      >
+      <Block width="narrow" snap="{true}" cls="block-snap-widths-demo even"
+        >narrow</Block
+      >
+      <Block
+        width="normal"
+        snap="{true}"
+        cls="block-snap-widths-demo even skip-narrow">normal.skip-narrow</Block
+      >
+      <Block
+        width="wide"
+        snap="{true}"
+        cls="block-snap-widths-demo even skip-normal skip-narrow"
+        >wide.skip-normal.skip-narrow</Block
+      >
+      <Block
+        width="wider"
+        snap="{true}"
+        cls="block-snap-widths-demo even skip-wide">wider.skip-wide</Block
+      >
     </div>
-</Article>
+  </Article>
 </Story>
 
-
 <style lang="scss">
   :global {
     #block-demo-article {
@@ -103,7 +123,7 @@
       position: relative;
       width: calc(100% + 30px);
       margin-left: -15px;
-      
+
       .article-boundaries {
         padding: 0 0 18px;
         width: 100%;
@@ -123,7 +143,8 @@
           }
         }
       }
-      .label, div.article-block.block-snap-widths-demo {
+      .label,
+      div.article-block.block-snap-widths-demo {
         padding-left: 3px;
         color: white;
       }
@@ -146,4 +167,4 @@
       }
     }
   }
-</style>
+</style>

src/components/Block/stories/docs/snapWidths.md

@@ -3,7 +3,7 @@ Normally, `Block` containers resize fluidly below the original `width`. Sometime
 You can use the `snap` prop to force the container to snap to each block width successively as the window sizes down.
 
 ```svelte
-<Block width="wider" snap={true}>
+<Block width="wider" snap="{true}">
   <!-- Your stuff for this block -->
 </Block>
 ```
@@ -12,7 +12,7 @@ If you want to skip certain block widths entirely, you can add one or more class
 
 ```svelte
 <!-- Will skip wide and go straight to normal column width on resize. -->
-<Block width="wider" snap={true} cls="skip-wide">
+<Block width="wider" snap="{true}" cls="skip-wide">
   <!-- Your stuff for this block -->
 </Block>
 ```
@@ -28,7 +28,7 @@ Snap width breakpoints are hard-coded to the default article well column widths,
 Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Now, defined a few SCSS variables corresponding to your custom column widths and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints.
 
 ```svelte
-<Block width="wider" snap={true} cls="custom-blocks">
+<Block width="wider" snap="{true}" cls="custom-blocks">
   <!-- Your stuff for this block -->
 </Block>
 
@@ -39,7 +39,7 @@ Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you
   $column-width-wide: 860px;
   $column-width-wider: 1400px;
 
-  @import "@reuters-graphics/graphics-components/scss/mixins";
+  @import '@reuters-graphics/graphics-components/scss/mixins';
 
   :global {
     div.custom-blocks {

src/scss/mixins/_body-text.scss

@@ -1,6 +1,6 @@
-@import "./fonts";
-@import "../typography/font-size";
-@import "../colours/thematic/tr";
+@import './fonts';
+@import '../typography/font-size';
+@import '../colours/thematic/tr';
 
 @mixin body-text {
   p,
@@ -24,13 +24,13 @@
       background-repeat: repeat-x;
       text-decoration: none;
       // TODO: Assign this to background colour CSS var and the underline will skip descenders
-    //   text-shadow:
-    // 1px 1px white,
-    // 1px -1px white,
-    // -1px 1px white,
-    // -1px -1px white;
+      //   text-shadow:
+      // 1px 1px white,
+      // 1px -1px white,
+      // -1px 1px white,
+      // -1px -1px white;
 
-      @media(max-width: 540px) {
+      @media (max-width: 540px) {
         background-position: 0 1.1rem;
       }
 
@@ -82,7 +82,7 @@
         color: $tr-dark-grey;
         font-size: 1rem;
 
-        @media(max-width: 540px) {
+        @media (max-width: 540px) {
           font-size: 0.9rem;
         }
       }

src/scss/mixins/_graphic.scss

@@ -1,5 +1,5 @@
-@import "../colours/thematic/tr";
-@import "./fonts";
+@import '../colours/thematic/tr';
+@import './fonts';
 
 @mixin graphic-text {
   h3 {
@@ -17,8 +17,8 @@
     &:last-of-type {
       margin-bottom: 1rem;
     }
-  
-    @media(max-width: 540px) {
+
+    @media (max-width: 540px) {
       font-size: 1rem;
       line-height: 1.35rem;
     }
@@ -48,9 +48,8 @@
       &:last-of-type {
         margin-bottom: 0;
       }
-      
 
-      @media(max-width: 540px) {
+      @media (max-width: 540px) {
         font-size: 0.8rem;
         line-height: 1.1rem;
       }
@@ -64,4 +63,4 @@
       }
     }
   }
-}
+}

src/scss/mixins/_note-text.scss

@@ -1,6 +1,6 @@
-@import "./fonts";
+@import './fonts';
 
-@mixin note-text {  
+@mixin note-text {
   h2,
   h3,
   h4,
@@ -31,4 +31,4 @@
       }
     }
   }
-}
+}