@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/SiteHeader/scss/_grids.scss

@@ -1,99 +1,131 @@
 @use 'sass:math';
 
-@import '_breakpoints.scss';
+@use '_breakpoints.scss' as *;
 
 @mixin spacing-single($properties, $delta: 1) {
   @each $property in $properties {
-    #{$property}: (math.div(32, 1440) * 100vw * $delta);
+    & {
+      #{$property}: (math.div(32, 1440) * 100vw * $delta);
+    }
   }
 
   @include for-tablet-down {
     @each $property in $properties {
-      #{$property}: (math.div(16, 375) * 100vw * $delta);
+      & {
+        #{$property}: (math.div(16, 375) * 100vw * $delta);
+      }
     }
   }
 
   @include above-max {
     @each $property in $properties {
-      #{$property}: (32px * $delta);
+      & {
+        #{$property}: (32px * $delta);
+      }
     }
   }
 }
 
 @mixin spacing-single-half($properties, $delta: 1) {
   @each $property in $properties {
-    #{$property}: (calc(16 / 1440) * 100vw * $delta);
+    & {
+      #{$property}: (calc(16 / 1440) * 100vw * $delta);
+    }
   }
 
   @include for-tablet-down {
     @each $property in $properties {
-      #{$property}: (math.div(8, 375) * 100vw * $delta);
+      & {
+        #{$property}: (math.div(8, 375) * 100vw * $delta);
+      }
     }
   }
 
   @include above-max {
     @each $property in $properties {
-      #{$property}: (16px * $delta);
+      & {
+        #{$property}: (16px * $delta);
+      }
     }
   }
 }
 
 @mixin spacing-single-34($properties, $delta: 1) {
   @each $property in $properties {
-    #{$property}: (math.div(24, 1440) * 100vw * $delta);
+    & {
+      #{$property}: (math.div(24, 1440) * 100vw * $delta);
+    }
   }
 
   @include for-tablet-down {
     @each $property in $properties {
-      #{$property}: (math.div(12, 375) * 100vw * $delta);
+      & {
+        #{$property}: (math.div(12, 375) * 100vw * $delta);
+      }
     }
   }
 
   @include above-max {
     @each $property in $properties {
-      #{$property}: (24px * $delta);
+      & {
+        #{$property}: (24px * $delta);
+      }
     }
   }
 }
 
 @mixin spacing-150($properties, $delta: 1) {
   @each $property in $properties {
-    #{$property}: (math.div(48, 1440) * 100vw * $delta);
+    & {
+      #{$property}: (math.div(48, 1440) * 100vw * $delta);
+    }
   }
 
   @include for-tablet-down {
     @each $property in $properties {
-      #{$property}: (math.div(24, 375) * 100vw * $delta);
+      & {
+        #{$property}: (math.div(24, 375) * 100vw * $delta);
+      }
     }
   }
 
   @include above-max {
     @each $property in $properties {
-      #{$property}: (48px * $delta);
+      & {
+        #{$property}: (48px * $delta);
+      }
     }
   }
 }
 
 @mixin spacing-75($properties, $delta: 1) {
   @each $property in $properties {
-    #{$property}: (math.div(24, 1440) * 100vw * $delta);
+    & {
+      #{$property}: (math.div(24, 1440) * 100vw * $delta);
+    }
   }
 
   @include above-max {
     @each $property in $properties {
-      #{$property}: (24px * $delta);
+      & {
+        #{$property}: (24px * $delta);
+      }
     }
   }
 }
 
 @mixin spacing-50($properties, $delta: 1) {
   @each $property in $properties {
-    #{$property}: (math.div(16, 1440) * 100vw * $delta);
+    & {
+      #{$property}: (math.div(16, 1440) * 100vw * $delta);
+    }
   }
 
   @include above-max {
     @each $property in $properties {
-      #{$property}: (16px * $delta);
+      & {
+        #{$property}: (16px * $delta);
+      }
     }
   }
 }

package/dist/components/SiteHeader/svgs/Close.svelte.d.ts

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  CloseProps */
-/** @typedef {typeof __propDef.events}  CloseEvents */
-/** @typedef {typeof __propDef.slots}  CloseSlots */
-export default class Close extends SvelteComponent<{
+export default Close;
+type Close = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type CloseProps = typeof __propDef.props;
-export type CloseEvents = typeof __propDef.events;
-export type CloseSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const Close: $$__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/SiteHeader/svgs/Menu.svelte

@@ -1,5 +1,9 @@
-<script>
-  export let width = 20;
+<script lang="ts">
+  interface Props {
+    width?: number;
+  }
+
+  let { width = 20 }: Props = $props();
 </script>
 
 <svg

package/dist/components/SiteHeader/svgs/Menu.svelte.d.ts

@@ -1,25 +1,6 @@
-/** @typedef {typeof __propDef.props}  MenuProps */
-/** @typedef {typeof __propDef.events}  MenuEvents */
-/** @typedef {typeof __propDef.slots}  MenuSlots */
-export default class Menu extends SvelteComponent<{
-    width?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+interface Props {
+    width?: number;
 }
-export type MenuProps = typeof __propDef.props;
-export type MenuEvents = typeof __propDef.events;
-export type MenuSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        width?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/SiteHeadline/SiteHeadline.mdx

@@ -0,0 +1,66 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SiteHeadlineStories from './SiteHeadline.stories.svelte';
+
+<Meta of={SiteHeadlineStories} />
+
+# SiteHeadline
+
+The `SiteHeadline` component creates a simplified Reuters Graphics headline, loosely modelled off the Reuters.com styles.
+
+Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround breaking news pages.
+
+```svelte
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteHeadline
+  hed="Ukraine makes suprising gains in swift counteroffensive"
+  authors={[
+    'Dea Bankova',
+    'Michael Ovaska',
+    'Samuel Granados',
+    'Prasanta Kumar Dutta',
+  ]}
+  publishTime="2021-09-12T00:00:00.000Z"
+  updateTime="2021-09-12T12:57:00.000Z"
+/>
+```
+
+<Canvas of={SiteHeadlineStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+section: Global News # Optional
+sectionUrl: https://www.reuters.com/graphics/ # Optional
+hed: A beautiful page
+authors: Samuel Granados, Dea Bankova
+published: 2022-09-12T08:30:00.000Z
+updated:
+```
+
+... which you'll pass to the `SiteHeadline` component.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
+<SiteHeadline
+  section={content.section}
+  sectionUrl={content.sectionUrl}
+  hed={content.hed}
+  authors={content.authors.split(',')}
+  publishTime={content.published}
+  updateTime={content.updated}
+/>
+```
+
+<Canvas of={SiteHeadlineStories.ArchieML} />

package/dist/components/SiteHeadline/SiteHeadline.stories.svelte

@@ -1,49 +1,32 @@
-<script context="module">
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import SiteHeadline from './SiteHeadline.svelte';
-  import { withComponentDocs } from '../../lib/docs/utils/withParams.js';
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/SiteHeadline',
     component: SiteHeadline,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       hedSize: {
         control: 'select',
         options: ['small', 'normal', 'big'],
       },
     },
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import archieML from './stories/docs/archieML.md?raw';
-
-  import { withStoryDocs } from '../../lib/docs/utils/withParams.js';
-
   const content = {
-    Section: 'Global News',
-    SectionUrl: '',
-    Hed: 'A beautiful page',
-    Authors: 'Samuel Granados, Dea Bankova',
-    Published: '2022-09-12T08:30:00.000Z',
-    Updated: '',
+    section: 'Global News',
+    hed: 'A beautiful page',
+    authors: 'Samuel Granados, Dea Bankova',
+    published: '2022-09-12T08:30:00.000Z',
+    updated: '',
   };
 </script>
 
-<Template let:args>
-  <SiteHeadline {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
-    section: 'Graphics',
-    sectionUrl: 'https://graphics.reuters.com',
+  name="Demo"
+  args={{
     hed: 'Ukraine makes surprising gains in counteroffensive',
     authors: [
       'Dea Bankova',
@@ -53,15 +36,14 @@
     ],
     publishTime: new Date('2021-09-12').toISOString(),
     updateTime: new Date('2021-09-12T13:57:00').toISOString(),
-  }}"
+  }}
 />
 
-<Story name="ArchieML" {...withStoryDocs(archieML)}>
+<Story name="ArchieML" tags={['!autodocs', '!dev']}>
   <SiteHeadline
-    hed="{content.Hed}"
-    section="{content.Section}"
-    sectionUrl="{content.SectionUrl}"
-    authors="{content.Authors.split(',')}"
-    publishTime="{content.Published}"
+    hed={content.hed}
+    section={content.section}
+    authors={content.authors.split(',')}
+    publishTime={content.published}
   />
 </Story>

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

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

package/dist/components/SiteHeadline/SiteHeadline.svelte

@@ -1,29 +1,62 @@
 <!-- @component `SiteHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-siteheadline--docs) -->
-<script>export let hed = "Reuters Graphics Interactive";
-export let hedSize = "normal";
-export let section = "Graphics";
-export let sectionUrl = "https://graphics.reuters.com";
-export let authors = [];
-export let publishTime = "";
-export let updateTime = "";
-export let id = "";
-let cls = "";
-export { cls as class };
-import Block from "../Block/Block.svelte";
-import Byline from "../Byline/Byline.svelte";
-let hedClass;
-$: {
-  switch (hedSize) {
-    case "big":
-      hedClass = "text-4xl";
-      break;
-    case "small":
-      hedClass = "text-2xl";
-      break;
-    default:
-      hedClass = "text-3xl";
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import Byline from '../Byline/Byline.svelte';
+
+  /**
+   * Used to set headline class fluid size from text-2xl to text-4xl
+   */
+  type HeadlineSize = 'small' | 'normal' | 'big';
+
+  interface Props {
+    /** Headline */
+    hed?: string;
+    /** Headline size */
+    hedSize?: HeadlineSize;
+    /** Section title */
+    section?: string;
+    /** Section URL, parsed as a string. Set to blank to remove link */
+    sectionUrl?: 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;
+    /** Add an id to to target with custom CSS */
+    id?: string;
+    /** Add extra classes to target with custom CSS */
+    class?: string;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
   }
-}
+
+  let {
+    hed,
+    hedSize = 'normal',
+    section = 'Graphics',
+    sectionUrl = 'https://graphics.reuters.com',
+    authors,
+    publishTime,
+    updateTime = '',
+    id = '',
+    class: cls = '',
+    getAuthorPage,
+  }: Props = $props();
+
+  // Set the headline text size class based on the `hedSize` prop
+  let hedClass = $derived.by(() => {
+    switch (hedSize) {
+      case 'big':
+        return 'text-4xl';
+      case 'small':
+        return 'text-2xl';
+      default:
+        return 'text-3xl';
+    }
+  });
 </script>
 
 <Block {id} class="headline-container fmt-7 fmb-6 {cls}" width="normal">
@@ -34,7 +67,7 @@ $: {
           class="section-title mb-0 font-subhed text-xs text-secondary font-bold uppercase whitespace-nowrap tracking-wider"
         >
           {#if sectionUrl}
-            <a class="no-underline !text-secondary" href="{sectionUrl}"
+            <a class="no-underline !text-secondary" href={sectionUrl}
               >{section}</a
             >
           {:else}
@@ -48,6 +81,6 @@ $: {
         </h1>
       {/if}
     </div>
-    <Byline {authors} {publishTime} {updateTime} />
+    <Byline {authors} {publishTime} {updateTime} {getAuthorPage} />
   </header>
 </Block>

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

@@ -1,55 +1,32 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * Headline
-           * @type {string}
-           * @required
-           */ hed?: string;
-        /**
-           * Headline size
-           * @type {string}
-           * @
-           */ hedSize?: "small" | "big" | "normal";
-        /**
-           * Section title.
-           * @type {string}
-           */ section?: string;
-        /**
-           * Section url, parsed as a string. Set to blank to remove link.
-           * @type {string}
-           */ sectionUrl?: string;
-        /**
-           * 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;
-        /**
-           * 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;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SiteHeadlineProps = typeof __propDef.props;
-export type SiteHeadlineEvents = typeof __propDef.events;
-export type SiteHeadlineSlots = typeof __propDef.slots;
-/** `SiteHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-siteheadline--docs) */
-export default class SiteHeadline extends SvelteComponent<SiteHeadlineProps, SiteHeadlineEvents, SiteHeadlineSlots> {
+/**
+ * Used to set headline class fluid size from text-2xl to text-4xl
+ */
+type HeadlineSize = 'small' | 'normal' | 'big';
+interface Props {
+    /** Headline */
+    hed?: string;
+    /** Headline size */
+    hedSize?: HeadlineSize;
+    /** Section title */
+    section?: string;
+    /** Section URL, parsed as a string. Set to blank to remove link */
+    sectionUrl?: 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;
+    /** Add an id to to target with custom CSS */
+    id?: string;
+    /** Add extra classes to target with custom CSS */
+    class?: string;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
 }
-export {};
+/** `SiteHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-siteheadline--docs) */
+declare const SiteHeadline: import("svelte").Component<Props, {}, "">;
+type SiteHeadline = ReturnType<typeof SiteHeadline>;
+export default SiteHeadline;

package/dist/components/Spinner/Spinner.mdx

@@ -0,0 +1,25 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SpinnerStories from './Spinner.stories.svelte';
+
+<Meta of={SpinnerStories} />
+
+# Spinner
+
+The `Spinner` component creates a simple loading spinner. Use it to hide long loading times for components that may be loading expensive media files or crunching through lots of data.
+
+```svelte
+<script>
+  import { Spinner } from '@reuters-graphics/graphics-components';
+
+  let somethingsLoading = true;
+</script>
+
+{#if somethingsLoading}
+  <Spinner />
+{:else}
+  <p>The real deal is here.</p>
+{/if}
+```
+
+<Canvas of={SpinnerStories.Demo} />