@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/Theme/Theme.stories.svelte

@@ -1,109 +1,107 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import customiseDocs from "./stories/docs/customise.md?raw";
-import customiseFontDocs from "./stories/docs/customise-font.md?raw";
-import patternDocs from "./stories/docs/pattern.md?raw";
-import inheritanceDocs from "./stories/docs/inheritance.md?raw";
-import Theme, { themes } from "./Theme.svelte";
-import {
-  withComponentDocs,
-  withStoryDocs
-} from "../../docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Theming/Theme",
-  component: Theme,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    base: {
-      control: "select",
-      options: ["light", "dark"]
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Theme, { themes } from './Theme.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Theming/Theme',
+    component: Theme,
+    argTypes: {
+      base: {
+        control: 'select',
+        options: ['light', 'dark'],
+      },
+      theme: {
+        control: { expanded: true },
+      },
     },
-    themes: { control: false }
-  }
-};
+  });
 </script>
 
-<script>import { Template, Story } from "@storybook/addon-svelte-csf";
-import ThemedPage from "./stories/ThemedPage.svelte";
-import SiteHeader from "../SiteHeader/SiteHeader.svelte";
-import Headline from "./../Headline/Headline.svelte";
+<script lang="ts">
+  import ThemedPage from './demo/ThemedPage.svelte';
+  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
+  import Headline from './../Headline/Headline.svelte';
+  import BodyText from '../BodyText/BodyText.svelte';
 </script>
 
-<Template let:args>
+<Story name="Demo">
   <div class="reset-article">
-    <Theme {...args}>
+    <Theme theme={themes.light} base="light">
       <ThemedPage />
     </Theme>
   </div>
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    theme: themes.light,
-    base: 'light',
-  }}"
-/>
+</Story>
 
-<Story name="Custom theme" {...withStoryDocs(customiseDocs)}>
+<Story name="Custom theme" exportName="CustomTheme">
   <Theme
     base="dark"
-    theme="{{
+    theme={{
       colour: { accent: 'var(--tr-light-orange)' },
       font: { family: { hed: 'FreightText, serif' } },
-    }}"
+    }}
   >
     <ThemedPage />
   </Theme>
 </Story>
 
-<Story name="Custom Google font" {...withStoryDocs(customiseFontDocs)}>
+<Story name="Custom font" exportName="CustomFont">
   <Theme
     base="light"
-    theme="{{
-      font: { family: { hed: 'Bebas Neue, sans-serif' } },
-    }}"
+    theme={{
+      font: { family: { hed: 'Indie Flower', body: 'Indie Flower' } },
+    }}
   >
     <div class="gfont">
       <Headline
-        hed="{'Reuters Graphics Interactive'}"
-        dek="{'The beginning of a beautiful page'}"
-        section="{'Global news'}"
+        hed={'Reuters Graphics Interactive'}
+        dek={'The beginning of a beautiful page'}
+        section={'Global news'}
+      />
+      <BodyText
+        text={'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'}
       />
     </div>
   </Theme>
 </Story>
 
-<Story name="Background patterns" {...withStoryDocs(patternDocs)}>
+<Story name="Background patterns" exportName="BackgroundPatterns">
   <div id="pattern-bg">
     <Theme
       base="dark"
-      theme="{{
+      theme={{
         colour: { background: 'transparent' },
-      }}"
+      }}
     >
       <SiteHeader />
-      <ThemedPage />
+      <Headline
+        hed={'Reuters Graphics Interactive'}
+        dek={'The beginning of a beautiful page'}
+        section={'Global news'}
+      />
+      <BodyText
+        text={'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'}
+      />
     </Theme>
   </div>
 </Story>
 
-<Story name="Inheritance" {...withStoryDocs(inheritanceDocs)}>
-  <Theme theme="{themes.light}">
+<Story name="Inheritance" tags={['!autodocs', '!dev']}>
+  <Theme theme={themes.light}>
     <div class="themed">
       <p>Theme</p>
-      <Theme theme="{themes.dark}">
+      <Theme theme={themes.dark}>
         <div class="themed">
           <p>Sub-theme</p>
-          <Theme theme="{themes.light}">
+          <Theme theme={themes.light}>
             <div class="themed">
               <p>Sub-sub</p>
             </div>
           </Theme>
           <Theme
-            theme="{{
+            theme={{
               colour: { background: 'steelblue', 'text-primary': '#fff' },
               font: { family: { note: 'FreightText, serif' } },
-            }}"
+            }}
             base="dark"
           >
             <div class="themed">
@@ -116,7 +114,7 @@ import Headline from "./../Headline/Headline.svelte";
   </Theme>
 </Story>
 
-<style>@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
+<style>@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");
 div.themed {
   background-color: var(--theme-colour-background);
   padding: 2rem;

package/dist/components/Theme/Theme.stories.svelte.d.ts

@@ -1,32 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        base: {
-            control: string;
-            options: string[];
-        };
-        themes: {
-            control: boolean;
-        };
+import Theme from './Theme.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof Theme;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ThemeProps = typeof __propDef.props;
-export type ThemeEvents = typeof __propDef.events;
-export type ThemeSlots = typeof __propDef.slots;
-export default class Theme extends SvelteComponent<ThemeProps, ThemeEvents, ThemeSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Theme: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Theme = InstanceType<typeof Theme>;
+export default Theme;

package/dist/components/Theme/Theme.svelte

@@ -1,21 +1,55 @@
 <!-- @component `Theme` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-theming-theme--docs) -->
-<script context="module">import light from "./themes/light.js";
-import dark from "./themes/dark.js";
-export const themes = { light, dark };
+<script module lang="ts">
+  import light from './themes/light.js';
+  import dark from './themes/dark.js';
+  /**
+   * Pre-made themes you can import.
+   */
+  export const themes = { light, dark };
 </script>
 
-<script>export let theme = {};
-export let base = "light";
-import flatten from "./utils/flatten";
-import mergeThemes from "./utils/merge";
-$: mergedTheme = mergeThemes({}, themes[base] || themes.light, theme);
-$: cssVariables = Object.entries(flatten({ theme: mergedTheme })).map(([key, value]) => `--${key}: ${value};`).join(" ");
+<script lang="ts">
+  // Utils
+  import flatten from './utils/flatten.js';
+  import mergeThemes from './utils/merge.js';
+
+  // Types
+  import type { CustomTheme } from './@types/component';
+  import type { Snippet } from 'svelte';
+  type Base = 'light' | 'dark';
+
+  interface Props {
+    /** Custom theme object. Can be a partial theme with just
+     * what you want to change.
+     */
+    theme?: CustomTheme;
+    /**
+     * Base theme is one of `light` or `dark` and will be merged
+     * with your custom theme to fill in any values you don't
+     * explicitly set.
+     */
+    base?: Base;
+    /** Content wrapped inside `Theme` */
+    children: Snippet;
+  }
+
+  let { theme = {}, base = 'light', children }: Props = $props();
+
+  let mergedTheme = $derived(
+    mergeThemes({}, themes[base] || themes.light, theme)
+  );
+
+  let cssVariables = $derived(
+    Object.entries(flatten({ theme: mergedTheme }))
+      .map(([key, value]) => `--${key}: ${value};`)
+      .join(' ')
+  );
 </script>
 
-<div class="theme" style="{cssVariables}" style:display="contents">
+<div class="theme" style={cssVariables} style:display="contents">
   <!-- Clients can override the theme above by attaching custom properties to this element. -->
   <div class="theme-client-override" style="display: contents;">
     <!-- Themed content -->
-    <slot />
+    {@render children()}
   </div>
 </div>

package/dist/components/Theme/Theme.svelte.d.ts

@@ -1,37 +1,28 @@
-import { SvelteComponent } from "svelte";
 /**
  * Pre-made themes you can import.
- * @type {{ light, dark }}
  */
 export declare const themes: {
     light: import("./@types/component").Theme;
     dark: import("./@types/component").Theme;
 };
 import type { CustomTheme } from './@types/component';
-declare const __propDef: {
-    props: {
-        /** Custom theme object. Can be a partial theme with just
-           * what you want to change.
-           */ theme?: CustomTheme;
-        /**
-           * Base theme is one of `light` or `dark` and will be merged
-           * with your custom theme to fill in any values you don't
-           * explicitly set.
-           */ base?: "light" | "dark";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ThemeProps = typeof __propDef.props;
-export type ThemeEvents = typeof __propDef.events;
-export type ThemeSlots = typeof __propDef.slots;
-/** `Theme` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-theming-theme--docs) */
-export default class Theme extends SvelteComponent<ThemeProps, ThemeEvents, ThemeSlots> {
+import type { Snippet } from 'svelte';
+type Base = 'light' | 'dark';
+interface Props {
+    /** Custom theme object. Can be a partial theme with just
+     * what you want to change.
+     */
+    theme?: CustomTheme;
+    /**
+     * Base theme is one of `light` or `dark` and will be merged
+     * with your custom theme to fill in any values you don't
+     * explicitly set.
+     */
+    base?: Base;
+    /** Content wrapped inside `Theme` */
+    children: Snippet;
 }
-export {};
+/** `Theme` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-theming-theme--docs) */
+declare const Theme: import("svelte").Component<Props, {}, "">;
+type Theme = ReturnType<typeof Theme>;
+export default Theme;

package/dist/components/Theme/demo/ThemedPage.svelte

@@ -0,0 +1,36 @@
+<script>
+  import Article from '../../Article/Article.svelte';
+  import Headline from '../../Headline/Headline.svelte';
+  import BodyText from '../../BodyText/BodyText.svelte';
+  import GraphicBlock from '../../GraphicBlock/GraphicBlock.svelte';
+</script>
+
+<Article>
+  <Headline
+    hed={'Reuters Graphics Interactive'}
+    dek={'The beginning of a beautiful page'}
+    section={'Global news'}
+    authors={['Jon McClure', 'Prasanta Kumar Dutta']}
+    publishTime={new Date('2021-09-12').toISOString()}
+  />
+  <BodyText
+    text={`Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.`}
+  />
+  <GraphicBlock
+    title="Steak tar-tar"
+    description="Andouille pork loin cow buffalo pork chop shoulder."
+    notes="Source: U.S. FDA"
+  >
+    <div class="fake-graphic"></div>
+  </GraphicBlock>
+  <BodyText
+    text={'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'}
+  />
+</Article>
+
+<style>
+  div.fake-graphic {
+    height: 200px;
+    border: 1px solid var(--theme-colour-accent);
+  }
+</style>

package/dist/components/Theme/demo/ThemedPage.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ThemedPage;
+type ThemedPage = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ThemedPage: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Theme/themes/common.d.ts

@@ -1,2 +1,27 @@
-declare const _default: Omit<import("../@types/component").Theme, "colour">;
+declare const _default: {
+    font: {
+        family: {
+            serif: string;
+            'sans-serif': string;
+            monospace: string;
+            hed: string;
+            subhed: string;
+            body: string;
+            note: string;
+        };
+        size: {
+            xxs: string;
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+            '4xl': string;
+            '5xl': string;
+            '6xl': string;
+        };
+    };
+};
 export default _default;

package/dist/components/Theme/themes/dark.d.ts

@@ -1,2 +1,13 @@
-declare const _default: import("../@types/component").Theme;
+declare const _default: {
+    colour: {
+        background: string;
+        'text-primary': string;
+        'text-secondary': string;
+        accent: string;
+        'brand-logo': string;
+        'brand-rules': string;
+        'brand-shadow': string;
+    };
+    font: import("../@types/component").Font;
+};
 export default _default;

package/dist/components/Theme/themes/light.d.ts

@@ -1,2 +1,13 @@
-declare const _default: import("../@types/component").Theme;
+declare const _default: {
+    colour: {
+        background: string;
+        'text-primary': string;
+        'text-secondary': string;
+        accent: string;
+        'brand-logo': string;
+        'brand-rules': string;
+        'brand-shadow': string;
+    };
+    font: import("../@types/component").Font;
+};
 export default _default;

package/dist/components/Theme/utils/flatten.d.ts

@@ -1 +1 @@
-export default function flatten(target: any): {};
+export default function flatten<T extends Record<string, any>>(target: T): Record<string, any>;

package/dist/components/Theme/utils/flatten.js

@@ -1,38 +1,32 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isBuffer(obj) {
-  return (
-    obj &&
-    obj.constructor &&
-    typeof obj.constructor.isBuffer === 'function' &&
-    obj.constructor.isBuffer(obj)
-  );
+    return (obj &&
+        obj.constructor &&
+        typeof obj.constructor.isBuffer === 'function' &&
+        obj.constructor.isBuffer(obj));
 }
-
 const transformKey = (key) => key.replace(/[^a-z0-9-]/gi, '');
-
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default function flatten(target) {
-  const delimiter = '-';
-  const output = {};
-
-  function step(object, prev, currentDepth = 1) {
-    Object.keys(object).forEach(function (key) {
-      const value = object[key];
-      const isArray = Array.isArray(value);
-      const type = Object.prototype.toString.call(value);
-      const isbuffer = isBuffer(value);
-      const isObject = type === '[object Object]' || type === '[object Array]';
-
-      const newKey =
-        prev ? prev + delimiter + transformKey(key) : transformKey(key);
-
-      if (!isArray && !isbuffer && isObject && Object.keys(value).length) {
-        return step(value, newKey, currentDepth + 1);
-      }
-
-      output[newKey] = value;
-    });
-  }
-
-  step(target);
-
-  return output;
+    const delimiter = '-';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const output = {};
+    function step(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    object, prev, currentDepth = 1) {
+        Object.keys(object).forEach(function (key) {
+            const value = object[key];
+            const isArray = Array.isArray(value);
+            const type = Object.prototype.toString.call(value);
+            const isbuffer = isBuffer(value);
+            const isObject = type === '[object Object]' || type === '[object Array]';
+            const newKey = prev ? prev + delimiter + transformKey(key) : transformKey(key);
+            if (!isArray && !isbuffer && isObject && Object.keys(value).length) {
+                return step(value, newKey, currentDepth + 1);
+            }
+            output[newKey] = value;
+        });
+    }
+    step(target);
+    return output;
 }

package/dist/components/Theme/utils/merge.d.ts

@@ -1,4 +1,5 @@
+import type { Theme, CustomTheme } from '../@types/component';
 /**
  * Deep merges theme objects.
  */
-export default function merge(target: any, ...sources: any[]): any;
+export default function merge<T extends Record<string, unknown>>(target: T, ...sources: (Theme | CustomTheme)[]): T;

package/dist/components/Theme/utils/merge.js

@@ -1,23 +1,24 @@
 function isObject(item) {
-  return item && typeof item === 'object' && !Array.isArray(item);
+    return item !== null && typeof item === 'object' && !Array.isArray(item);
 }
-
 /**
  * Deep merges theme objects.
  */
 export default function merge(target, ...sources) {
-  if (!sources.length) return target;
-  const source = sources.shift();
-
-  if (isObject(target) && isObject(source)) {
-    for (const key in source) {
-      if (isObject(source[key])) {
-        if (!target[key]) Object.assign(target, { [key]: {} });
-        merge(target[key], source[key]);
-      } else {
-        Object.assign(target, { [key]: source[key] });
-      }
+    if (!sources.length)
+        return target;
+    const source = sources.shift();
+    if (isObject(target) && isObject(source)) {
+        for (const key in source) {
+            if (isObject(source[key])) {
+                if (!target[key])
+                    Object.assign(target, { [key]: {} });
+                merge(target[key], source[key]);
+            }
+            else {
+                Object.assign(target, { [key]: source[key] });
+            }
+        }
     }
-  }
-  return merge(target, ...sources);
+    return merge(target, ...sources);
 }

package/dist/components/ToolsHeader/ToolsHeader.mdx

@@ -0,0 +1,23 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ToolsHeaderStories from './ToolsHeader.stories.svelte';
+
+<Meta of={ToolsHeaderStories} />
+
+# ToolsHeader
+
+The `ToolsHeader` component adds a header with the Reuters Graphics logo for internal tooling sites.
+
+> **Note:** Don't use this component for public pages.
+
+```svelte
+<script>
+  import { ToolsHeader } from '@reuters-graphics/graphics-components';
+</script>
+
+<ToolsHeader>
+  <!-- Anything else goes to the right of the logo -->
+</ToolsHeader>
+```
+
+<Canvas of={ToolsHeaderStories.Demo} />

package/dist/components/ToolsHeader/ToolsHeader.stories.svelte

@@ -1,24 +1,18 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import ToolsHeader from "./ToolsHeader.svelte";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Page furniture/ToolsHeader",
-  component: ToolsHeader,
-  ...withComponentDocs(componentDocs)
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ToolsHeader from './ToolsHeader.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Page furniture/ToolsHeader',
+    component: ToolsHeader,
+  });
 </script>
 
-<Template let:args>
+<Story name="Demo" tags={['!autodocs', '!dev']}>
   <div>
-    <ToolsHeader {...args} />
+    <ToolsHeader />
   </div>
-</Template>
-
-<Story name="Default" args="{{}}" />
+</Story>
 
 <style>
   div {