@reuters-graphics/graphics-components 1.0.29 → 1.1.0

package/dist/components/SiteHeader/stories/docs/component.md

@@ -0,0 +1,11 @@
+Reuters dotcom site header, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-header).
+
+> **Note:** In the Graphics Kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
+
+```svelte
+<script>
+  import { SiteHeader } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteHeader />
+```

package/dist/components/SiteHeader/stories/docs/darkTheme.md

@@ -0,0 +1,11 @@
+Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component.
+
+```svelte
+<script>
+  import { SiteHeader, Theme } from '@reuters-graphics/graphics-components';
+</script>
+
+<Theme base="dark">
+  <SiteHeader />
+</Theme>
+```

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

@@ -6,7 +6,8 @@
   xmlns="http://www.w3.org/2000/svg"
   ><path
     d="M.322.313a1.056 1.056 0 0 1 1.5 0l5.679 5.53L13.18.313a1.056 1.056 0 0 1 1.5 0 .993.993 0 0 1-.001 1.461l-5.88 5.725 5.88 5.727c.397.388.426.956.085 1.369l-.086.092a1.056 1.056 0 0 1-1.5 0l-5.679-5.53-5.679 5.53a1.056 1.056 0 0 1-1.5 0 .993.993 0 0 1 .001-1.461L6.2 7.5.322 1.774C-.076 1.386-.105.818.236.405L.322.313Z"
-    fill-rule="evenodd"></path></svg
+    fill-rule="evenodd"
+  ></path></svg
 >
 
 <style>svg {

package/dist/{@types/components → components}/SiteHeader/svgs/Close.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  CloseProps */
 /** @typedef {typeof __propDef.events}  CloseEvents */
 /** @typedef {typeof __propDef.slots}  CloseSlots */
-export default class Close extends SvelteComponentTyped<{
+export default class Close extends SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class Close extends SvelteComponentTyped<{
 export type CloseProps = typeof __propDef.props;
 export type CloseEvents = typeof __propDef.events;
 export type CloseSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: never;
@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/{@types/components → components}/SiteHeader/svgs/Menu.svelte.d.ts

@@ -1,8 +1,8 @@
 /** @typedef {typeof __propDef.props}  MenuProps */
 /** @typedef {typeof __propDef.events}  MenuEvents */
 /** @typedef {typeof __propDef.slots}  MenuSlots */
-export default class Menu extends SvelteComponentTyped<{
-    width?: number;
+export default class Menu extends SvelteComponent<{
+    width?: number | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -10,14 +10,16 @@ export default class Menu extends SvelteComponentTyped<{
 export type MenuProps = typeof __propDef.props;
 export type MenuEvents = typeof __propDef.events;
 export type MenuSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        width?: number;
+        width?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -0,0 +1,67 @@
+<script context="module">
+  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 = {
+    title: 'Components/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 quickitDocs from './stories/docs/quickit.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: '',
+  };
+</script>
+
+<Template let:args>
+  <SiteHeadline {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    section: 'Graphics',
+    sectionUrl: 'https://graphics.reuters.com',
+    hed: 'Ukraine makes surprising gains in counteroffensive',
+    authors: [
+      'Dea Bankova',
+      'Michael Ovaska',
+      'Samuel Granados',
+      'Prasanta Kumar Dutta',
+    ],
+    publishTime: new Date('2021-09-12').toISOString(),
+    updateTime: new Date('2021-09-12T13:57:00').toISOString(),
+  }}"
+/>
+
+<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
+  <SiteHeadline
+    hed="{content.Hed}"
+    section="{content.Section}"
+    sectionUrl="{content.SectionUrl}"
+    authors="{content.Authors.split(',')}"
+    publishTime="{content.Published}"
+  />
+</Story>

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

@@ -0,0 +1,38 @@
+export const meta: {
+    argTypes: {
+        hedSize: {
+            control: string;
+            options: string[];
+        };
+    };
+    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>;
+}, {}> {
+}
+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 {};

package/dist/components/SiteHeadline/SiteHeadline.svelte

@@ -1,68 +1,31 @@
-<script>/**
- * Headline
- * @type {string}
- * @required
- */
-export let hed = 'Reuters Graphics Interactive';
-/**
- * Headline size
- * @type {string}
- * @
- */
-export let hedSize = 'normal';
-/**
- * Section title.
- * @type {string}
- */
-export let section = 'Graphics';
-/**
- * Section url, parsed as a string. Set to blank to remove link.
- * @type {string}
- */
-export let sectionUrl = 'https://graphics.reuters.com';
-/**
- * Array of author names, which will be slugified to create links to Reuters author pages
- */
+<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 = [];
-/**
- * Publish time as a datetime string.
- * @type {string}
- */
-export let publishTime = '';
-/**
- * Update time as a datetime string.
- * @type {string}
- */
-export let updateTime = '';
-/**
- * Add an id to to target with custom CSS.
- * @type {string}
- */
-export let id = '';
-/**
- * Add extra classes to target with custom CSS.
- * @type {string}
- */
-let cls = '';
+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';
+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';
-    }
+  switch (hedSize) {
+    case "big":
+      hedClass = "text-4xl";
+      break;
+    case "small":
+      hedClass = "text-2xl";
+      break;
+    default:
+      hedClass = "text-3xl";
+  }
 }
 </script>
 
-<Block id="{id}" class="headline-container fmt-7 fmb-6 {cls}" width="normal">
+<Block {id} class="headline-container fmt-7 fmb-6 {cls}" width="normal">
   <header class="headline">
     <div class="title">
       {#if section}
@@ -84,10 +47,6 @@ $: {
         </h1>
       {/if}
     </div>
-    <Byline
-      authors="{authors}"
-      publishTime="{publishTime}"
-      updateTime="{updateTime}"
-    />
+    <Byline {authors} {publishTime} {updateTime} />
   </header>
 </Block>

package/dist/{@types/components → components}/SiteHeadline/SiteHeadline.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -43,10 +43,12 @@ declare const __propDef: {
         [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;
-export default class SiteHeadline extends SvelteComponentTyped<SiteHeadlineProps, SiteHeadlineEvents, SiteHeadlineSlots> {
+export default class SiteHeadline extends SvelteComponent<SiteHeadlineProps, SiteHeadlineEvents, SiteHeadlineSlots> {
 }
 export {};

package/dist/components/SiteHeadline/stories/docs/component.md

@@ -0,0 +1,21 @@
+A simplified Reuters Graphics headline, loosely modelled off our dotcom site.
+
+Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround, usually shorter 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"
+/>
+```

package/dist/components/SiteHeadline/stories/docs/quickit.md

@@ -0,0 +1,30 @@
+Setup your Google Doc to work with the `SiteHeadline` component.
+
+```yaml
+# Beginning of your Google doc
+Section: Global News
+SectionUrl:
+Hed: A beautiful page
+Authors: Samuel Granados, Dea Bankova
+Published: 2022-09-12T08:30:00.000Z
+Updated:
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+
+  // These should be already imported for you.
+  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}"
+/>
+```

package/dist/components/Spinner/Spinner.stories.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import Spinner from './Spinner.svelte';
+
+  import { withComponentDocs } from '../../lib/docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      colour: { control: 'color' },
+      ringWidth: { control: { type: 'range', min: 2, max: 20, step: 1 } },
+      width: { control: { type: 'range', min: 5, max: 100, step: 5 } },
+      speed: { control: { type: 'range', min: 0.2, max: 1.0, step: 0.1 } },
+      containerPadding: {
+        control: { type: 'range', min: 5, max: 100, step: 5 },
+      },
+    },
+  };
+</script>
+
+<Meta title="Components/Spinner" component="{Spinner}" {...metaProps} />
+
+<Template let:args>
+  <Spinner {...args} />
+</Template>
+
+<Story name="Default" />

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  SpinnerProps */
+/** @typedef {typeof __propDef.events}  SpinnerEvents */
+/** @typedef {typeof __propDef.slots}  SpinnerSlots */
+export default class Spinner extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SpinnerProps = typeof __propDef.props;
+export type SpinnerEvents = typeof __propDef.events;
+export type SpinnerSlots = 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 {};

package/dist/components/Spinner/Spinner.svelte

@@ -1,21 +1,8 @@
 <!-- @component `Spinner` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Spinner--default) -->
-<script>/** Primary colour of the spinner. */
-export let colour = '#666';
-/**
- * Outer width of the spinner
- */
+<script>export let colour = "#666";
 export let width = 40;
-/**
- * Width of the spinner ring
- */
 export let ringWidth = 6;
-/**
- * How fast the spinner spins in seconds
- */
 export let speed = 0.8;
-/**
- * Vertical padding for the spinner's container
- */
 export let containerPadding = 10;
 </script>
 

package/dist/{@types/components → components}/Spinner/Spinner.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /** Primary colour of the spinner. */ colour?: string;
@@ -19,11 +19,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SpinnerProps = typeof __propDef.props;
 export type SpinnerEvents = typeof __propDef.events;
 export type SpinnerSlots = typeof __propDef.slots;
 /** `Spinner` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Spinner--default) */
-export default class Spinner extends SvelteComponentTyped<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+export default class Spinner extends SvelteComponent<SpinnerProps, SpinnerEvents, SpinnerSlots> {
 }
 export {};

package/dist/components/Spinner/stories/docs/component.md

@@ -0,0 +1,15 @@
+Simple loading spinner. Use it to help 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}
+```

package/dist/components/Table/LeftArrow.svelte

@@ -14,4 +14,5 @@
     height: 1rem;
     width: 1rem;
     fill: currentColor;
-  }</style>
+  }
+</style>

package/dist/{@types/components → components}/Table/LeftArrow.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  LeftArrowProps */
 /** @typedef {typeof __propDef.events}  LeftArrowEvents */
 /** @typedef {typeof __propDef.slots}  LeftArrowSlots */
-export default class LeftArrow extends SvelteComponentTyped<{
+export default class LeftArrow extends SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class LeftArrow extends SvelteComponentTyped<{
 export type LeftArrowProps = typeof __propDef.props;
 export type LeftArrowEvents = typeof __propDef.events;
 export type LeftArrowSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: never;
@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/Table/Pagination.svelte

@@ -1,38 +1,22 @@
-<script>import { intcomma } from 'journalize';
-import LeftArrow from './LeftArrow.svelte';
-import RightArrow from './RightArrow.svelte';
-/**
- * The current page number.
- * @type {number}
- */
+<script>import { intcomma } from "journalize";
+import LeftArrow from "./LeftArrow.svelte";
+import RightArrow from "./RightArrow.svelte";
 export let pageNumber = 1;
-/**
- * The default page size.
- * @type {number}
- */
 export let pageSize = 25;
-/**
- * The number of records in the current page.
- * @type {number}
- */
 export let pageLength = null;
-/**
- * The total number of records in the data set.
- * @type {number}
- */
 export let n = null;
 $: minRow = pageNumber * pageSize - pageSize + 1;
 $: maxRow = pageNumber * pageSize - pageSize + pageLength;
 $: numPages = Math.ceil(n / pageSize);
 function goToPreviousPage() {
-    if (pageNumber > 1) {
-        pageNumber -= 1;
-    }
+  if (pageNumber > 1) {
+    pageNumber -= 1;
+  }
 }
 function goToNextPage() {
-    if (pageNumber < numPages) {
-        pageNumber += 1;
-    }
+  if (pageNumber < numPages) {
+    pageNumber += 1;
+  }
 }
 </script>
 
@@ -105,11 +89,9 @@ nav.pagination .label {
   width: auto;
   min-width: 5rem;
 }
-
 .visually-hidden {
   clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;

package/dist/{@types/components → components}/Table/Pagination.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -22,10 +22,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type PaginationProps = typeof __propDef.props;
 export type PaginationEvents = typeof __propDef.events;
 export type PaginationSlots = typeof __propDef.slots;
-export default class Pagination extends SvelteComponentTyped<PaginationProps, PaginationEvents, PaginationSlots> {
+export default class Pagination extends SvelteComponent<PaginationProps, PaginationEvents, PaginationSlots> {
 }
 export {};

package/dist/components/Table/RightArrow.svelte

@@ -14,4 +14,5 @@
     height: 1rem;
     width: 1rem;
     fill: currentColor;
-  }</style>
+  }
+</style>

package/dist/{@types/components → components}/Table/RightArrow.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  RightArrowProps */
 /** @typedef {typeof __propDef.events}  RightArrowEvents */
 /** @typedef {typeof __propDef.slots}  RightArrowSlots */
-export default class RightArrow extends SvelteComponentTyped<{
+export default class RightArrow extends SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class RightArrow extends SvelteComponentTyped<{
 export type RightArrowProps = typeof __propDef.props;
 export type RightArrowEvents = typeof __propDef.events;
 export type RightArrowSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: never;
@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/Table/Select.svelte

@@ -1,18 +1,10 @@
-<script>import { createEventDispatcher } from 'svelte';
-/**
- * The label that appears above the select input.
- * @type {string}
- */
-export let label = '';
-/**
- * The label that appears above the select input.
- * @type {Array}
- */
+<script>import { createEventDispatcher } from "svelte";
+export let label = "";
 export let options = [];
 const dispatch = createEventDispatcher();
 function input(event) {
-    const value = event.target.value;
-    dispatch('select', { value });
+  const value = event.target.value;
+  dispatch("select", { value });
 }
 </script>