@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/GraphicBlock/{stories → demo}/ai2svelte/ai-chart.svelte

@@ -1,6 +1,4 @@
-<script>
-  // svelte-ignore unused-export-let
-  export let basePath = './';
+<script lang="ts">
   // For demo purposes only, hard-wiring img paths from Vite
   // @ts-ignore img
   import chartXs from '../imgs/ai-chart-xs.png';
@@ -8,12 +6,13 @@
   import chartSm from '../imgs/ai-chart-sm.png';
   // @ts-ignore img
   import chartMd from '../imgs/ai-chart-md.png';
-  let width = null;
+
+  let width = $state<number>();
 </script>
 
 <!-- Generated by ai2html v0.100.0 - 2021-09-29 12:37 -->
 
-<div id="g-_ai-chart-box" bind:clientWidth="{width}">
+<div id="g-_ai-chart-box" bind:clientWidth={width}>
   <!-- Artboard: xs -->
   {#if width && width >= 0 && width < 510}
     <div id="g-_ai-chart-xs" class="g-artboard" style="">
@@ -21,8 +20,7 @@
       <div
         id="g-_ai-chart-xs-img"
         class="g-aiImg"
-        alt=""
-        style="{`background-image: url(${chartXs});`}"
+        style={`background-image: url(${chartXs});`}
       ></div>
       <div
         id="g-ai0-1"
@@ -154,8 +152,7 @@
       <div
         id="g-_ai-chart-sm-img"
         class="g-aiImg"
-        alt=""
-        style="{`background-image: url(${chartSm});`}"
+        style={`background-image: url(${chartSm});`}
       ></div>
       <div
         id="g-ai1-1"
@@ -287,8 +284,7 @@
       <div
         id="g-_ai-chart-md-img"
         class="g-aiImg"
-        alt=""
-        style="{`background-image: url(${chartMd});`}"
+        style={`background-image: url(${chartMd});`}
       ></div>
       <div
         id="g-ai2-1"

package/dist/components/GraphicBlock/demo/ai2svelte/ai-chart.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AiChart: import("svelte").Component<Record<string, never>, {}, "">;
+type AiChart = ReturnType<typeof AiChart>;
+export default AiChart;

package/dist/components/Headline/Headline.mdx

@@ -0,0 +1,150 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as HeadlineStories from './Headline.stories.svelte';
+
+<Meta of={HeadlineStories} />
+
+# Headline
+
+The `Headline` component creates headlines in the legacy Reuters Graphics style, with the text centred on the page.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline
+  hed="Reuters Graphics Interactive"
+  dek="The beginning of a beautiful page"
+  section="World News"
+/>
+```
+
+<Canvas of={HeadlineStories.Demo} />
+
+## With bylines and dateline
+
+Optionally, you can add authors and a publish time to the headline, which the `Headline` component internally renders with the [Byline](./?path=/docs/components-text-elements-byline--docs) component.
+
+> **Note**: Since `Headline` uses `Byline`, you can customise the author page hyperlink and bylines with the `getAuthorPage`, `byline`, `published` and `updated` props.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  section={'Global news'}
+  authors={['Jane Doe']}
+  publishTime={new Date('2020-01-01').toISOString()}
+  getAuthorPage={(author) => `mailto:${author.replace(' ', '')}@example.com`}
+/>
+```
+
+<Canvas of={HeadlineStories.Byline} />
+
+## Custom hed and dek
+
+Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to override those elements with custom elements.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline width="wide">
+  <!-- Custom hed snippet -->
+  {#snippet hed()}
+    <h1 class="custom-hed">
+      <span class="small block text-base">The secret to</span>
+      “The Nutcracker's”
+      <span class="small block text-base fpt-1">success</span>
+    </h1>
+  {/snippet}
+
+  <!-- Custom dek snippet -->
+  {#snippet dek()}
+    <p class="custom-dek !fmt-3">
+      How “The Nutcracker” ballet became an<span
+        class="font-medium mx-1 px-1.5 py-1">American holday staple</span
+      >and a financial pillar of ballet companies across the country
+    </p>
+  {/snippet}
+</Headline>
+
+<!-- Custom styles -->
+<style lang="scss">
+  .custom-hed {
+    line-height: 0.9;
+  }
+  .custom-dek {
+    span {
+      background-color: #fde68a;
+    }
+  }
+</style>
+```
+
+<Canvas of={HeadlineStories.CustomHedDek} />
+
+## With crown image
+
+To add a crown image, use the `crown` [snippet](https://svelte.dev/docs/svelte/snippet).
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
+</script>
+
+<Headline
+  class="!fmt-3"
+  hed="Europa"
+  publishTime={new Date('2020-01-01').toISOString()}
+>
+  <!-- Add a crown -->
+  {#snippet crown()}
+    <img
+      src={crownImgSrc}
+      width="100"
+      class="mx-auto mb-0"
+      alt="Illustration of Europe"
+    />
+  {/snippet}
+</Headline>
+```
+
+<Canvas of={HeadlineStories.CrownImage} />
+
+## With crown graphic
+
+Add a full graphic or any other component in the crown.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // If in Graphis Kit
+
+  import Map from './ai2svelte/graphic.svelte'; // Import the crown graphic component
+</script>
+
+<Headline
+  width="wider"
+  class="!fmt-1"
+  hed={'Unfriendly skies'}
+  dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
+  section={'Ukraine Crisis'}
+  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+  publishTime={new Date('2022-03-04').toISOString()}
+>
+  <!-- Add a crown graphic -->
+  {#snippet crown()}
+    <!-- Pass `assetsPath` if in graphics kit -->
+    <Map assetsPath={assets || '/'} />
+  {/snippet}
+</Headline>
+```
+
+<Canvas of={HeadlineStories.CrownGraphic} />

package/dist/components/Headline/Headline.stories.svelte

@@ -1,122 +1,108 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import withBylineDocs from "./stories/docs/withByline.md?raw";
-import withDekDocs from "./stories/docs/withDek.md?raw";
-import customHedDocs from "./stories/docs/customHed.md?raw";
-import withCrownImgDocs from "./stories/docs/withCrownImage.md?raw";
-import withCrownGraphicDocs from "./stories/docs/withCrownGraphic.md?raw";
-import Headline from "./Headline.svelte";
-import {
-  withComponentDocs,
-  withStoryDocs
-} from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Text elements/Headline",
-  component: Headline,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    hedSize: {
-      control: "select",
-      options: ["small", "normal", "big", "bigger", "biggest"]
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Headline from './Headline.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/Headline',
+    component: Headline,
+    argTypes: {
+      hedSize: {
+        control: 'select',
+        options: ['small', 'normal', 'big', 'bigger', 'biggest'],
+      },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest'],
+      },
     },
-    width: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest"]
-    }
-  }
-};
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore img
-  import crownImgSrc from './stories/crown.png';
-  import Map from './stories/graphic.svelte';
+  import crownImgSrc from './demo/crown.png';
+  import Map from './demo/graphic.svelte';
 </script>
 
-<Template let:args>
-  <Headline {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
-    section: 'World News',
+  name="Demo"
+  args={{
     hed: 'Reuters Graphics interactive',
-    hedSize: 'normal',
-    dek: '',
-    authors: [],
-  }}"
+    dek: 'The beginning of a beautiful page',
+    section: 'World News',
+  }}
 />
 
-<Story name="With dek" {...withStoryDocs(withDekDocs)}>
-  <Headline
-    hed="{'Reuters Graphics Interactive'}"
-    dek="{'The beginning of a beautiful page'}"
-    section="{'Global news'}"
-  />
-</Story>
-
-<Story name="With byline" {...withStoryDocs(withBylineDocs)}>
+<Story name="With byline and dateline" exportName="Byline">
   <Headline
-    hed="{'Reuters Graphics Interactive'}"
-    dek="{'The beginning of a beautiful page'}"
-    section="{'Global news'}"
-    authors="{['Dea Bankova', 'Aditi Bhandari']}"
-    publishTime="{new Date('2020-01-01').toISOString()}"
+    hed={'Reuters Graphics Interactive'}
+    dek={'The beginning of a beautiful page'}
+    section={'Global news'}
+    authors={['Jane Doe']}
+    publishTime={new Date('2020-01-01').toISOString()}
+    getAuthorPage={(author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
   />
 </Story>
 
-<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
+<Story name="Custom hed and dek" exportName="CustomHedDek">
   <Headline width="wide">
-    <h1 class="custom-hed" slot="hed">
-      <span class="small block text-base">The secret to</span>
-      “The Nutcracker's”
-      <span class="small block text-base fpt-1">success</span>
-    </h1>
-    <p class="custom-dek !fmt-3" slot="dek">
-      How “The Nutcracker” ballet became an<span
-        class="font-medium mx-1 px-1.5 py-1">American holday staple</span
-      >and a financial pillar of ballet companies across the country
-    </p>
+    {#snippet hed()}
+      <h1 class="custom-hed">
+        <span class="small block text-base">The secret to</span>
+        “The Nutcracker's”
+        <span class="small block text-base fpt-1">success</span>
+      </h1>
+    {/snippet}
+    {#snippet dek()}
+      <p class="custom-dek !fmt-3">
+        How “The Nutcracker” ballet became an<span
+          class="font-medium mx-1 px-1.5 py-1">American holday staple</span
+        >and a financial pillar of ballet companies across the country
+      </p>
+    {/snippet}
   </Headline>
-  <style>.custom-hed {
-  line-height: 0.9;
-}
-
-.custom-dek span {
-  background-color: #fde68a;
-}</style>
 </Story>
 
-<Story name="With crown image" {...withStoryDocs(withCrownImgDocs)}>
-  <Headline class="!fmt-3" publishTime="{new Date('2020-01-01').toISOString()}">
+<Story name="Crown image" exportName="CrownImage">
+  <Headline
+    class="!fmt-3"
+    hed="Europa"
+    publishTime={new Date('2020-01-01').toISOString()}
+  >
     <!-- Add a crown -->
-    <img
-      slot="crown"
-      src="{crownImgSrc}"
-      width="100"
-      class="mx-auto mb-0"
-      alt="Illustration of Europe"
-    />
-    <!-- Override the hed with a named slot -->
-    <h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
+    {#snippet crown()}
+      <img
+        src={crownImgSrc}
+        width="100"
+        class="mx-auto mb-0"
+        alt="Illustration of Europe"
+      />
+    {/snippet}
   </Headline>
 </Story>
 
-<Story name="With crown graphic" {...withStoryDocs(withCrownGraphicDocs)}>
+<Story name="Crown graphic" exportName="CrownGraphic">
   <Headline
     width="wider"
     class="!fmt-1"
-    hed="{'Unfriendly skies'}"
-    dek="{'How Russia’s invasion of Ukraine is redrawing air routes'}"
-    section="{'Ukraine Crisis'}"
-    authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-    publishTime="{new Date('2022-03-04').toISOString()}"
+    hed={'Unfriendly skies'}
+    dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
+    section={'Ukraine Crisis'}
+    authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+    publishTime={new Date('2022-03-04').toISOString()}
   >
     <!-- Add a crown graphic -->
-    <div slot="crown">
+    {#snippet crown()}
       <Map />
-    </div>
+    {/snippet}
   </Headline>
 </Story>
+
+<style>.custom-hed {
+  line-height: 0.9;
+}
+
+.custom-dek span {
+  background-color: #fde68a;
+}</style>

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

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

package/dist/components/Headline/Headline.svelte

@@ -1,45 +1,101 @@
 <!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-headline--docs) -->
-<script>export let hed = "Reuters Graphics Interactive";
-let cls = "";
-export { cls as class };
-export let hedSize = "normal";
-export let dek = null;
-export let section = null;
-export let authors = [];
-export let publishTime = "";
-export let updateTime = "";
-export let width = "normal";
-import Block from "../Block/Block.svelte";
-import Byline from "../Byline/Byline.svelte";
-import Markdown from "../Markdown/Markdown.svelte";
-let hedClass;
-$: {
-  switch (hedSize) {
-    case "biggest":
-      hedClass = "text-6xl";
-      break;
-    case "bigger":
-      hedClass = "text-5xl";
-      break;
-    case "big":
-      hedClass = "text-4xl";
-      break;
-    case "small":
-      hedClass = "text-2xl";
-      break;
-    default:
-      hedClass = "text-3xl";
+<script lang="ts">
+  // Types
+  import type { HeadlineSize } from './../@types/global';
+  import type { Snippet } from 'svelte';
+
+  // Components
+  import Block from '../Block/Block.svelte';
+  import Byline from '../Byline/Byline.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+
+  interface Props {
+    /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
+    hed: string | Snippet;
+    /** Add extra classes to the block tag to target it with custom CSS. */
+    class?: string;
+    /** Headline size: small, normal, big, bigger, biggest */
+    hedSize?: HeadlineSize;
+    /** Dek, parsed as a markdown string OR as a custom snippet. */
+    dek?: string | Snippet;
+
+    /** Section title */
+    section?: string;
+    /** 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;
+    /** Width of the headline: normal, wide, wider, widest */
+    width?: 'normal' | 'wide' | 'wider' | 'widest';
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+    /** Custom crown snippet */
+    crown?: Snippet;
+    /**
+     * 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 {
+    hed = 'Reuters Graphics Interactive',
+    class: cls = '',
+    hedSize = 'normal',
+    dek,
+    section,
+    authors = [],
+    publishTime = '',
+    updateTime = '',
+    width = 'normal',
+    getAuthorPage,
+    crown,
+    byline,
+    published,
+    updated,
+  }: Props = $props();
+
+  // Set the headline text size class based on the `hedSize` prop
+  let hedClass = $state('text-3xl');
+  $effect(() => {
+    switch (hedSize) {
+      case 'biggest':
+        hedClass = 'text-6xl';
+        break;
+      case 'bigger':
+        hedClass = 'text-5xl';
+        break;
+      case 'big':
+        hedClass = 'text-4xl';
+        break;
+      case 'small':
+        hedClass = 'text-2xl';
+        break;
+      default:
+        hedClass = 'text-3xl';
+    }
+  });
 </script>
 
 <div class="headline-wrapper" style="display:contents;">
   <Block {width} class="headline text-center fmt-7 fmb-6 {cls}">
     <header class="relative">
-      {#if $$slots.crown}
+      {#if crown}
         <div class="crown-container">
-          <!-- Crown named slot -->
-          <slot name="crown" />
+          <!-- Crown snippet -->
+          {@render crown()}
         </div>
       {/if}
       <div class="title">
@@ -50,36 +106,39 @@ $: {
             {section}
           </p>
         {/if}
-        {#if $$slots.hed}
-          <!-- Headline named slot -->
-          <slot name="hed" />
-        {:else}
-          <h1 class="{hedClass}">
-            <Markdown source="{hed}" parseInline />
+        {#if typeof hed === 'string'}
+          <h1 class={hedClass}>
+            <Markdown source={hed} inline />
           </h1>
+        {:else if hed}
+          <!-- Headline snippet -->
+          {@render hed()}
         {/if}
-        {#if $$slots.dek}
-          <!-- Dek named slot-->
+        {#if typeof dek === 'string'}
           <div class="dek fmx-auto fmb-6">
-            <slot name="dek" />
+            <Markdown source={dek} />
           </div>
         {:else if dek}
+          <!-- Dek snippet-->
           <div class="dek fmx-auto fmb-6">
-            <Markdown source="{dek}" />
+            {@render dek()}
           </div>
         {/if}
       </div>
-      {#if $$slots.byline}
-        <!-- Custom byline/dateline -->
-        <slot name="byline" />
-      {:else if authors.length > 0 || publishTime}
+      {#if authors.length > 0 || publishTime}
         <Byline
-          class="fmy-4"
+          cls="fmy-4"
           {authors}
           {publishTime}
           {updateTime}
+          {getAuthorPage}
+          {published}
+          {updated}
           align="center"
         />
+      {:else if byline}
+        <!-- Custom byline/dateline -->
+        {@render byline()}
       {/if}
     </header>
   </Block>