@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/Byline/Byline.svelte

@@ -1,45 +1,105 @@
 <!-- @component `Byline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-byline--docs) -->
-<script>import Block from "../Block/Block.svelte";
-import slugify from "slugify";
-import { apdate } from "journalize";
-export let authors = [];
-export let publishTime = "";
-export let updateTime = "";
-export let align = "left";
-export let id = "";
-let cls = "";
-export { cls as class };
-export let getAuthorPage = (author) => {
-  const authorSlug = slugify(author.trim(), { lower: true });
-  return `https://www.reuters.com/authors/${authorSlug}/`;
-};
-$: alignmentClass = align === "left" ? "text-left" : "text-center";
-const isValidDate = (datetime) => {
-  if (!datetime) return false;
-  if (!Date.parse(datetime)) return false;
-  return true;
-};
-const formatTime = (datetime) => new Date(datetime).toLocaleTimeString([], {
-  hour: "2-digit",
-  minute: "2-digit",
-  timeZoneName: "short"
-});
-const areSameDay = (first, second) => first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth() && first.getDate() === second.getDate();
+<script lang="ts">
+  import { getAuthorPageUrl } from '../../utils';
+  import Block from '../Block/Block.svelte';
+  import { apdate } from 'journalize';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * Array of author names, which will be slugified to create links to Reuters author pages
+     */
+    authors?: string[];
+    /**
+     * Publish time as a datetime string.
+     */
+    publishTime: string;
+    /**
+     * Update time as a datetime string.
+     */
+    updateTime?: string;
+    /**
+     * Alignment of the byline.
+     */
+    align?: 'left' | 'center';
+    /**
+     * Add an id to to target with custom CSS.
+     * @type {string}
+     */
+    id?: string;
+    /**
+     * Add extra classes to target with custom CSS.
+     * @type {string}
+     */
+    cls?: string;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+    /**
+     * Optional snippet for a custom byline.
+     */
+    byline?: Snippet;
+    /**
+     * Optional snippet for a custom published dateline.
+     */
+    published?: Snippet;
+    /**
+     * Optional snippet for a custom updated dateline.
+     */
+    updated?: Snippet;
+  }
+
+  let {
+    authors = [],
+    publishTime,
+    updateTime,
+    align = 'left',
+    id = '',
+    cls = '',
+    getAuthorPage = getAuthorPageUrl,
+    byline,
+    published,
+    updated,
+  }: Props = $props();
+
+  let alignmentClass = $derived(align === 'left' ? 'text-left' : 'text-center');
+
+  /**
+  /* Date validation and formatter functions
+   */
+  const isValidDate = (datetime: string) => {
+    if (!datetime) return false;
+    if (!Date.parse(datetime)) return false;
+    return true;
+  };
+
+  const formatTime = (datetime: string) =>
+    new Date(datetime).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+      timeZoneName: 'short',
+    });
+
+  const areSameDay = (first: Date, second: Date) =>
+    first.getFullYear() === second.getFullYear() &&
+    first.getMonth() === second.getMonth() &&
+    first.getDate() === second.getDate();
 </script>
 
 <Block {id} class="byline-container {alignmentClass} {cls}" width="normal">
   <aside class="article-metadata font-subhed">
     <div class="byline body-caption fmb-1">
-      {#if $$slots.byline}
+      {#if byline}
         <!-- Custom byline -->
-        <slot name="byline" />
+        {@render byline()}
       {:else}
         By
         {#if authors.length > 0}
           {#each authors as author, i}
             <a
               class="no-underline whitespace-nowrap text-primary font-bold"
-              href="{getAuthorPage(author)}"
+              href={getAuthorPage(author)}
               rel="author"
             >
               {author.trim()}</a
@@ -56,16 +116,18 @@ const areSameDay = (first, second) => first.getFullYear() === second.getFullYear
       {/if}
     </div>
     <div class="dateline body-caption fmt-0">
-      {#if $$slots.published}
+      {#if published}
         <div class="whitespace-nowrap inline-block">
-          <!-- Custom published dateline -->
-          <slot name="published" />
+          <!-- Custom published dateline snippet -->
+          <time datetime={publishTime}>
+            {@render published()}
+          </time>
         </div>
       {:else if isValidDate(publishTime)}
         <div class="whitespace-nowrap inline-block">
           Published
-          <time datetime="{publishTime}">
-            {#if isValidDate(updateTime)}
+          <time datetime={publishTime}>
+            {#if updateTime && isValidDate(updateTime)}
               {apdate(new Date(publishTime))}
             {:else}
               {apdate(new Date(publishTime))}&nbsp;&nbsp;{formatTime(
@@ -75,19 +137,23 @@ const areSameDay = (first, second) => first.getFullYear() === second.getFullYear
           </time>
         </div>
       {/if}
-      {#if $$slots.updated}
+      {#if updated}
         <div class="whitespace-nowrap inline-block">
-          <!-- Custom updated dateline -->
-          <slot name="updated" />
+          <!-- Custom updated dateline snippet -->
+          <time datetime={updateTime}>
+            {@render updated()}
+          </time>
         </div>
-      {:else if isValidDate(publishTime) && isValidDate(updateTime)}
+      {:else if isValidDate(publishTime) && isValidDate(updateTime || '')}
         <div class="whitespace-nowrap inline-block">
           Last updated
-          <time datetime="{updateTime}">
-            {#if areSameDay(new Date(publishTime), new Date(updateTime))}
-              {formatTime(updateTime)}
+          <time datetime={updateTime}>
+            {#if areSameDay(new Date(publishTime), new Date(updateTime || new Date()))}
+              {formatTime(updateTime || '')}
             {:else}
-              {apdate(new Date(updateTime))}&nbsp;&nbsp;{formatTime(updateTime)}
+              {apdate(
+                new Date(updateTime || new Date())
+              )}&nbsp;&nbsp;{formatTime(updateTime || '')}
             {/if}
           </time>
         </div>
@@ -104,7 +170,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
 */
 /* Scales by 1.125 */
-.byline-container a:hover {
+.byline a:hover {
   text-decoration-line: underline;
 }
 

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

@@ -1,49 +1,49 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * Array of author names, which will be slugified to create links to Reuters author pages
-           */ authors?: string[];
-        /**
-           * Publish time as a datetime string.
-           * @type {string}
-           */ publishTime?: string;
-        /**
-           * Update time as a datetime string.
-           * @type {string}
-           */ updateTime?: string;
-        /**
-           * Alignment of the byline.
-           * @type {string}
-           */ align?: "left" | "center";
-        /**
-           * Add an id to to target with custom CSS.
-           * @type {string}
-           */ id?: string;
-        /**
-           * Add extra classes to target with custom CSS.
-           * @type {string}
-           */ class?: string;
-        /**
-           * Custom function that returns an author page URL.
-           * @param author
-           */ getAuthorPage?: (author: string) => string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        byline: {};
-        published: {};
-        updated: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BylineProps = typeof __propDef.props;
-export type BylineEvents = typeof __propDef.events;
-export type BylineSlots = typeof __propDef.slots;
-/** `Byline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-byline--docs) */
-export default class Byline extends SvelteComponent<BylineProps, BylineEvents, BylineSlots> {
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * Array of author names, which will be slugified to create links to Reuters author pages
+     */
+    authors?: string[];
+    /**
+     * Publish time as a datetime string.
+     */
+    publishTime: string;
+    /**
+     * Update time as a datetime string.
+     */
+    updateTime?: string;
+    /**
+     * Alignment of the byline.
+     */
+    align?: 'left' | 'center';
+    /**
+     * Add an id to to target with custom CSS.
+     * @type {string}
+     */
+    id?: string;
+    /**
+     * Add extra classes to target with custom CSS.
+     * @type {string}
+     */
+    cls?: string;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+    /**
+     * Optional snippet for a custom byline.
+     */
+    byline?: Snippet;
+    /**
+     * Optional snippet for a custom published dateline.
+     */
+    published?: Snippet;
+    /**
+     * Optional snippet for a custom updated dateline.
+     */
+    updated?: Snippet;
 }
-export {};
+/** `Byline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-byline--docs) */
+declare const Byline: import("svelte").Component<Props, {}, "">;
+type Byline = ReturnType<typeof Byline>;
+export default Byline;

package/dist/components/DatawrapperChart/{stories/docs/component.md → DatawrapperChart.mdx}

@@ -1,3 +1,11 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as DatawrapperChartStories from './DatawrapperChart.stories.svelte';
+
+<Meta of={DatawrapperChartStories} />
+
+# DatawrapperChart
+
 Easily add a responsive Datawrapper embed on your page.
 
 ```svelte
@@ -23,3 +31,15 @@ You can get this from the published url on Reuters Graphics.
 - Inside **Embed code (for developers only)**, find and copy the url inside the `src` prop. (It ends in `media-embed.html`.)
 
 **Note:** There is no need to update the url if you update the chart inside Datawrapper. Any changes will be automatically reflected.
+
+<Canvas of={DatawrapperChartStories.Demo} />
+
+## With chatter
+
+By default, Datawrapper will export your chart with the chart chatter like title, description and notes.
+
+At the moment, these don't _exactly_ match our styles and can't be made to fit into the article well.
+
+Instead, it's often better to remove all the text from your Datawrapper chart before publishing it and add that text back via the component props.
+
+<Canvas of={DatawrapperChartStories.WithChatter} />

package/dist/components/DatawrapperChart/DatawrapperChart.stories.svelte

@@ -1,49 +1,41 @@
-<script context="module">import DatawrapperChart from "./DatawrapperChart.svelte";
-import componentDocs from "./stories/docs/component.md?raw";
-import withChatterDocs from "./stories/docs/withChatter.md?raw";
-import {
-  withComponentDocs,
-  withStoryDocs
-} from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Graphics/DatawrapperChart",
-  component: DatawrapperChart,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    width: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
-    }
-  }
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DatawrapperChart from './DatawrapperChart.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Graphics/DatawrapperChart',
+    component: DatawrapperChart,
+    tags: ['autodocs'],
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  });
 </script>
 
-<Template let:args>
-  <DatawrapperChart {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     src: 'https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html',
     id: 'abortion-rights-map',
     ariaLabel: 'map',
     frameTitle: 'Global abortion access',
-  }}"
+  }}
 />
 
-<Story name="With chatter" {...withStoryDocs(withChatterDocs)}>
-  <DatawrapperChart
-    frameTitle="Global abortion access"
-    ariaLabel="map"
-    id="abortion-rights-map"
-    src="https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html"
-    title="Global abortion access"
-    description="A map of worldwide access to abortion."
-    notes="{'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights'}"
-  />
-</Story>
+<Story
+  name="With chatter"
+  tags={['!autodocs']}
+  args={{
+    frameTitle: 'Global abortion access',
+    ariaLabel: 'map',
+    id: 'abortion-rights-map',
+    src: 'https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html',
+    title: 'Global abortion access',
+    description: 'A map of worldwide access to abortion.',
+    notes:
+      'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights',
+  }}
+/>

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

@@ -1,29 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        width: {
-            control: string;
-            options: string[];
-        };
+import DatawrapperChart from './DatawrapperChart.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 DatawrapperChart;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DatawrapperChartProps = typeof __propDef.props;
-export type DatawrapperChartEvents = typeof __propDef.events;
-export type DatawrapperChartSlots = typeof __propDef.slots;
-export default class DatawrapperChart extends SvelteComponent<DatawrapperChartProps, DatawrapperChartEvents, DatawrapperChartSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const DatawrapperChart: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DatawrapperChart = InstanceType<typeof DatawrapperChart>;
+export default DatawrapperChart;

package/dist/components/DatawrapperChart/DatawrapperChart.svelte

@@ -1,52 +1,107 @@
 <!-- @component `DatawrapperChart` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-datawrapperchart--docs) -->
-<script>import { onMount, onDestroy } from "svelte";
-import GraphicBlock from "../GraphicBlock/GraphicBlock.svelte";
-export let title = null;
-export let description = null;
-export let frameTitle = "";
-export let notes = null;
-export let ariaLabel = "";
-export let id = "";
-export let src;
-export let scrolling = "no";
-export let width = "normal";
-export let textWidth = "normal";
-let frameElement;
-$: frameFiller = (e) => {
-  if (void 0 !== e.data["datawrapper-height"]) {
-    const t = [frameElement];
-    for (const a in e.data["datawrapper-height"]) {
-      for (let r = 0; r < t.length; r++) {
-        if (t[r].contentWindow === e.source) {
-          t[r].style.height = e.data["datawrapper-height"][a] + "px";
+<script lang="ts">
+  import { onMount, onDestroy, type Snippet } from 'svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  import type { ContainerWidth } from '../@types/global';
+
+  type ScrollingOption = 'auto' | 'yes' | 'no';
+
+  interface Props {
+    /** Title of the graphic */
+    title?: string;
+    /** Description of the graphic, passed in as a markdown string. */
+    description?: string;
+    /**
+     * iframe title
+     */
+    frameTitle: string;
+    /**
+     * Notes to the graphic, passed in as a markdown string.
+     */
+    notes?: string;
+    /**
+     * iframe aria label
+     */
+    ariaLabel: string;
+    /*
+     * iframe id
+     */
+    id: string;
+    /**
+     * Datawrapper embed URL
+     */
+    src: string;
+    /** iframe scrolling option */
+    scrolling: ScrollingOption;
+    /** Width of the chart within the text well. */
+    width: ContainerWidth;
+    /**
+     * Set a different width for the text within the text well, for example,
+     * "normal" to keep the title, description and notes inline with the rest
+     * of the text well. Can't ever be wider than `width`.
+     */
+    textWidth: ContainerWidth;
+    /** Custom headline and chatter snippet */
+    titleSnippet?: Snippet;
+    /** Custom notes and source snippet */
+    notesSnippet?: Snippet;
+  }
+
+  let {
+    title,
+    description,
+    frameTitle = '',
+    notes,
+    ariaLabel = '',
+    id = '',
+    src,
+    scrolling = 'no',
+    width = 'normal',
+    textWidth = 'normal',
+    titleSnippet,
+    notesSnippet,
+  }: Props = $props();
+
+  let frameElement: HTMLElement;
+
+  // eslint-disable-next-line
+  const frameFiller = (e: any) => {
+    if (void 0 !== e.data['datawrapper-height']) {
+      const t = [frameElement];
+      for (const a in e.data['datawrapper-height']) {
+        for (let r = 0; r < t.length; r++) {
+          // @ts-ignore OK here
+          if (t[r].contentWindow === e.source) {
+            t[r].style.height = e.data['datawrapper-height'][a] + 'px';
+          }
         }
       }
     }
-  }
-};
-onMount(() => {
-  if (typeof window !== "undefined") {
-    window.addEventListener("message", frameFiller);
-  }
-});
-onDestroy(() => {
-  if (typeof window !== "undefined") {
-    window.removeEventListener("message", frameFiller);
-  }
-});
+  };
+
+  onMount(() => {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('message', frameFiller);
+    }
+  });
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('message', frameFiller);
+    }
+  });
 </script>
 
 <GraphicBlock {width} {textWidth} {title} {description} {notes}>
-  {#if $$slots.title}
+  {#if titleSnippet}
     <!-- Custom headline and chatter slot -->
-    <slot name="title" />
+    {@render titleSnippet()}
   {/if}
 
   <div class="datawrapper-chart">
     <iframe
-      bind:this="{frameElement}"
-      title="{frameTitle}"
-      aria-label="{ariaLabel}"
+      bind:this={frameElement}
+      title={frameTitle}
+      aria-label={ariaLabel}
       {id}
       {src}
       {scrolling}
@@ -56,8 +111,7 @@ onDestroy(() => {
     ></iframe>
   </div>
 
-  {#if $$slots.notes}
-    <!-- Custom notes and source slot -->
-    <slot name="notes" />
+  {#if notesSnippet}
+    {@render notesSnippet()}
   {/if}
 </GraphicBlock>