@reuters-graphics/graphics-components 1.0.30 → 1.1.0

package/dist/docs/utils/docsPage.d.ts

@@ -0,0 +1,25 @@
+export namespace parameters {
+    let viewMode: string;
+    namespace previewTabs {
+        namespace canvas {
+            let hidden: boolean;
+        }
+    }
+    let toolbar: {
+        zoom: {
+            hidden: boolean;
+        };
+        eject: {
+            hidden: boolean;
+        };
+        fullscreen: {
+            hidden: boolean;
+        };
+        'storybook/background': {
+            hidden: boolean;
+        };
+        'storybook/outline': {
+            hidden: boolean;
+        };
+    };
+}

package/dist/docs/utils/docsPage.js

@@ -0,0 +1,13 @@
+export const parameters = {
+  viewMode: 'docs',
+  previewTabs: {
+    canvas: { hidden: true },
+  },
+  toolbar: {
+    zoom: { hidden: true },
+    eject: { hidden: true },
+    fullscreen: { hidden: true },
+    'storybook/background': { hidden: true },
+    'storybook/outline': { hidden: true },
+  },
+};

package/dist/docs/utils/parseCss.d.ts

@@ -0,0 +1,3 @@
+export function cssStringToTableArray(cssString: any, withInclude?: boolean): string[][];
+export function scssVariablesToTableArray(scssString: any): any[][];
+export function extractCssColourVariables(cssString: any): any[][];

package/dist/docs/utils/parseCss.js

@@ -0,0 +1,48 @@
+import { compileString } from 'sass';
+import { convert } from '../../../bin/css-to-js/index.js';
+import { kebabCase } from 'lodash-es';
+
+export const cssStringToTableArray = (cssString, withInclude = false) => {
+  const cssObj = convert(compileString(cssString).css);
+  return Object.entries(cssObj).map(([key, value]) => {
+    const className = key.replace(/_/g, '-');
+    const properties = Object.entries(value)
+      .map(([propName, propValue]) => {
+        // Excludes any media query-ied stuff...
+        if (typeof propValue !== 'string') return '';
+        return `${kebabCase(propName)}: ${propValue.replace(
+          /\s?!important/g,
+          ''
+        )};`;
+      })
+      .join('\n');
+    return withInclude ?
+        [className, className, properties]
+      : [className, properties];
+  });
+};
+
+export const scssVariablesToTableArray = (scssString) => {
+  const regExp = /^(\$[a-zA-Z0-9-_]+):\s*(.+)$/gm;
+  const matches = scssString.matchAll(regExp);
+  return Array.from(matches).map((match) => {
+    return [match[1], match[2]];
+  });
+};
+
+export const extractCssColourVariables = (cssString) => {
+  const variableRegexp = /(--[a-zA-Z][a-zA-Z0-9-]+):\s*(.+);/g;
+  const cssVariables = [...cssString.matchAll(variableRegexp)].map(
+    ([_, g1, g2]) => [g2, g1]
+  );
+  const colours = {};
+  for (const variable of cssVariables) {
+    const [colour, css] = variable;
+    if (colours[colour]) {
+      colours[colour].push(css);
+    } else {
+      colours[colour] = [css];
+    }
+  }
+  return Object.keys(colours).map((key) => [key, colours[key]]);
+};

package/dist/docs/utils/withParams.d.ts

@@ -0,0 +1,15 @@
+export function withSource(source: object, otherOptions?: object): {
+    parameters: {
+        docs: any;
+    };
+};
+export function withStoryDocs(storyDocs: string, otherOptions?: object): {
+    parameters: {
+        docs: any;
+    };
+};
+export function withComponentDocs(componentDocs: string, otherOptions?: object): {
+    parameters: {
+        docs: any;
+    };
+};

package/dist/docs/utils/withParams.js

@@ -0,0 +1,46 @@
+/**
+ * Use custom source code in the "Show code" pull down.
+ * @param {object} source Source code object, where key is the language of the source code and value is the code string.
+ * @param {object} otherOptions Other props object options, allowing chaining with other methods like withStoryDocs
+ * @returns props object including parameters
+ */
+export const withSource = (source, otherOptions = {}) => {
+  const language = Object.keys(source)[0];
+  const code = source[language];
+  const docs = {
+    ...otherOptions?.parameters?.docs,
+    source: { code, language },
+  };
+  const parameters = { docs };
+  return { parameters };
+};
+
+/**
+ * Add custom documentation to a story.
+ * @param {string} storyDocs Markdown string of docs
+ * @param {object} otherOptions Other props object options, allowing chaining with other methods like withSource
+ * @returns props object including parameters
+ */
+export const withStoryDocs = (storyDocs, otherOptions = {}) => {
+  const docs = {
+    ...otherOptions?.parameters?.docs,
+    description: { story: storyDocs },
+  };
+  const parameters = { docs };
+  return { parameters };
+};
+
+/**
+ * Add custom documentation to the top of the component docs page.
+ * @param {string} componentDocs Markdown string of docs
+ * @param {object} otherOptions Other props object options, allowing chaining with other methods like withSource
+ * @returns props object including parameters
+ */
+export const withComponentDocs = (componentDocs, otherOptions = {}) => {
+  const docs = {
+    ...otherOptions?.parameters?.docs,
+    description: { component: componentDocs },
+  };
+  const parameters = { docs };
+  return { parameters };
+};

package/dist/globals.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 interface ChartbeatConfig {
   uid?: number;
   domain?: string;
@@ -9,18 +10,17 @@ interface ChartbeatConfig {
 }
 
 declare global {
-  // eslint-disable-next-line no-unused-vars
   interface Window {
     /** Google analytics dataLayer */
-    dataLayer: Record<string, any>,
+    dataLayer: Record<string, any>;
     /** Chartbeat config */
-    _sf_async_config: ChartbeatConfig,
+    _sf_async_config: ChartbeatConfig;
     /** Chartbeat method */
     pSUPERFLY: {
-      virtualPage: (config: { path: string, title: string }) => void,
-    },
+      virtualPage: (config: { path: string; title: string }) => void;
+    };
     /** Graphics ads */
-    graphicsAdQueue: any[],
+    graphicsAdQueue: any[];
   }
 }
 

package/dist/index.js

@@ -5,7 +5,7 @@ export { default as resizeObserver } from './actions/resizeObserver/index.js';
 // Components
 export {
   default as Analytics,
-  registerPageview
+  registerPageview,
 } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';
 export { default as AdScripts } from './components/AdSlot/AdScripts.svelte';
@@ -45,11 +45,7 @@ export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.
 export { default as Spinner } from './components/Spinner/Spinner.svelte';
 export { default as SponsorshipAd } from './components/AdSlot/SponsorshipAd.svelte';
 export { default as Table } from './components/Table/Table.svelte';
-export {
-  default as Theme,
-  // @ts-ignore
-  themes
-} from './components/Theme/Theme.svelte';
+export { default as Theme, themes } from './components/Theme/Theme.svelte';
 export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
 export { default as Video } from './components/Video/Video.svelte';
 export { default as Visible } from './components/Visible/Visible.svelte';

package/dist/scss/fonts/_font-faces.scss

@@ -1,7 +1,8 @@
 /* REUTERS KNOWLEDGE */
 @font-face {
   font-family: 'Knowledge';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-RegularItalic.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-RegularItalic.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-RegularItalic.woff')
       format('woff');
@@ -12,7 +13,8 @@
 
 @font-face {
   font-family: 'Knowledge';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Black.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Black.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Black.woff')
       format('woff');
@@ -23,7 +25,8 @@
 
 @font-face {
   font-family: 'Knowledge';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Light.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Light.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Light.woff')
       format('woff');
@@ -34,7 +37,8 @@
 
 @font-face {
   font-family: 'Knowledge';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Regular.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Regular.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Regular.woff')
       format('woff');
@@ -45,7 +49,8 @@
 
 @font-face {
   font-family: 'Knowledge';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-UltraLight.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-UltraLight.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-UltraLight.woff')
       format('woff');
@@ -56,7 +61,8 @@
 
 @font-face {
   font-family: 'Knowledge';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Bold.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Bold.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Bold.woff')
       format('woff');
@@ -67,7 +73,8 @@
 
 @font-face {
   font-family: 'Knowledge';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Medium.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Medium.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Medium.woff')
       format('woff');
@@ -79,7 +86,8 @@
 /* SOURCE SANS PRO */
 @font-face {
   font-family: 'Source Sans Pro';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Light.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Light.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Light.woff')
       format('woff');
@@ -90,7 +98,8 @@
 
 @font-face {
   font-family: 'Source Sans Pro';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Italic.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Italic.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Italic.woff')
       format('woff');
@@ -101,7 +110,8 @@
 
 @font-face {
   font-family: 'Source Sans Pro';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Bold.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Bold.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Bold.woff')
       format('woff');
@@ -112,7 +122,8 @@
 
 @font-face {
   font-family: 'Source Sans Pro';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-SemiBold.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-SemiBold.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-SemiBold.woff')
       format('woff');
@@ -123,7 +134,8 @@
 
 @font-face {
   font-family: 'Source Sans Pro';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Regular.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Regular.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Regular.woff')
       format('woff');
@@ -135,7 +147,8 @@
 /* FREIGHT TEXT */
 @font-face {
   font-family: 'FreightText';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBold.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBold.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBold.woff')
       format('woff');
@@ -146,7 +159,8 @@
 
 @font-face {
   font-family: 'FreightText';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBook.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBook.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBook.woff')
       format('woff');
@@ -157,7 +171,8 @@
 
 @font-face {
   font-family: 'FreightText';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBookItalic.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBookItalic.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBookItalic.woff')
       format('woff');
@@ -168,7 +183,8 @@
 
 @font-face {
   font-family: 'FreightText';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextLight.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextLight.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextLight.woff')
       format('woff');
@@ -179,7 +195,8 @@
 
 @font-face {
   font-family: 'FreightText';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextMedium.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextMedium.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextMedium.woff')
       format('woff');
@@ -191,7 +208,8 @@
 /* DROID SANS MONO */
 @font-face {
   font-family: 'Droid Sans Mono';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/DroidSansMono.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/DroidSansMono.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/DroidSansMono.woff')
       format('woff');
@@ -203,7 +221,8 @@
 /* NOTO SANS JAPANESE */
 @font-face {
   font-family: 'Noto Sans JP';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Bold.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Bold.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Bold.woff')
       format('woff');
@@ -214,7 +233,8 @@
 
 @font-face {
   font-family: 'Noto Sans JP';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Light.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Light.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Light.woff')
       format('woff');
@@ -225,7 +245,8 @@
 
 @font-face {
   font-family: 'Noto Sans JP';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-ExtraLight.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-ExtraLight.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-ExtraLight.woff')
       format('woff');
@@ -236,7 +257,8 @@
 
 @font-face {
   font-family: 'Noto Sans JP';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Medium.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Medium.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Medium.woff')
       format('woff');
@@ -247,7 +269,8 @@
 
 @font-face {
   font-family: 'Noto Sans JP';
-  src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Regular.woff2')
+  src:
+    url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Regular.woff2')
       format('woff2'),
     url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Regular.woff')
       format('woff');

package/dist/scss/reset/_normalize.scss

@@ -198,6 +198,7 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
+  appearance: button;
   -webkit-appearance: button;
 }