@reuters-graphics/graphics-components 2.0.2 → 3.0.0

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

@@ -1,28 +1,20 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import Spinner from "./Spinner.svelte";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Utilities/Spinner",
-  component: Spinner,
-  ...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, step: 0.1 } },
-    containerPadding: {
-      control: { type: "range", min: 5, max: 100, step: 5 }
-    }
-  }
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Spinner from './Spinner.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Utilities/Spinner',
+    component: Spinner,
+    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>
 
-<Template let:args>
-  <Spinner {...args} />
-</Template>
-
-<Story name="Default" />
+<Story name="Demo" />

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

@@ -1,60 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        colour: {
-            control: string;
-        };
-        ringWidth: {
-            control: {
-                type: string;
-                min: number;
-                max: number;
-                step: number;
-            };
-        };
-        width: {
-            control: {
-                type: string;
-                min: number;
-                max: number;
-                step: number;
-            };
-        };
-        speed: {
-            control: {
-                type: string;
-                min: number;
-                max: number;
-                step: number;
-            };
-        };
-        containerPadding: {
-            control: {
-                type: string;
-                min: number;
-                max: number;
-                step: number;
-            };
-        };
+import Spinner from './Spinner.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 Spinner;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [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;
-export default class Spinner extends SvelteComponent<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Spinner: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Spinner = InstanceType<typeof Spinner>;
+export default Spinner;

package/dist/components/Spinner/Spinner.svelte

@@ -1,14 +1,38 @@
 <!-- @component `Spinner` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-spinner--docs) -->
-<script>export let colour = "#666";
-export let width = 40;
-export let ringWidth = 6;
-export let speed = 0.8;
-export let containerPadding = 10;
+<script lang="ts">
+  interface Props {
+    /** Primary colour of the spinner. */
+    colour?: string;
+    /**
+     * Outer width of the spinner
+     */
+    width?: number;
+    /**
+     * Width of the spinner ring
+     */
+    ringWidth?: number;
+    /**
+     * How fast the spinner spins in seconds
+     */
+    speed?: number;
+    /**
+     * Vertical padding for the spinner's container
+     */
+    containerPadding?: number;
+  }
+
+  let {
+    colour = '#666',
+    width = 40,
+    ringWidth = 6,
+    speed = 0.8,
+    containerPadding = 10,
+  }: Props = $props();
 </script>
 
 <div
   style:width="100%"
-  style:height="{`${width + containerPadding * 2}px`}"
+  style:height={`${width + containerPadding * 2}px`}
   class="component-container flex items-center justify-center"
 >
   <div

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

@@ -1,31 +1,24 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** Primary colour of the spinner. */ colour?: string;
-        /**
-           * Outer width of the spinner
-           */ width?: number;
-        /**
-           * Width of the spinner ring
-           */ ringWidth?: number;
-        /**
-           * How fast the spinner spins in seconds
-           */ speed?: number;
-        /**
-           * Vertical padding for the spinner's container
-           */ containerPadding?: number;
-    };
-    events: {
-        [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-utilities-spinner--docs) */
-export default class Spinner extends SvelteComponent<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+interface Props {
+    /** Primary colour of the spinner. */
+    colour?: string;
+    /**
+     * Outer width of the spinner
+     */
+    width?: number;
+    /**
+     * Width of the spinner ring
+     */
+    ringWidth?: number;
+    /**
+     * How fast the spinner spins in seconds
+     */
+    speed?: number;
+    /**
+     * Vertical padding for the spinner's container
+     */
+    containerPadding?: number;
 }
-export {};
+/** `Spinner` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-spinner--docs) */
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/Table/Table.mdx

@@ -0,0 +1,177 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as TableStories from './Table.stories.svelte';
+
+<Meta of={TableStories} />
+
+# Table
+
+The `Table` component presents data as a table that you can make searchable, filtereable, sortable, or paginated.
+
+```svelte
+<script>
+  import { Table } from '@reuters-graphics/graphics-components';
+
+  import data from './data.json'; // Import your data
+</script>
+
+<Table {data} />
+```
+
+<Canvas of={TableStories.Demo} />
+
+## Text elements
+
+Set the `title`, `dek`, `notes` and `source` options to add supporting metadata above and below the table.
+
+```svelte
+<Table
+  data={yourData}
+  title="Career home run leaders"
+  dek={`In baseball,
+a home run (also known as a "dinger" or "tater") occurs when a batter hits the
+ball over the outfield fence. When a home run is hit, the batter and any runners
+on base are able to score.`}
+  notes="Note: As of Opening Day 2023"
+  source="Source: Baseball Reference"
+/>
+```
+
+<Canvas of={TableStories.Text} />
+
+## Truncated
+
+When your table has 10 or more rows, consider clipping it by setting the `truncated` option. When it is enabled, the table is clipped and readers must click a button below the table to see all rows.
+
+By default, this configuration will limit the table to 5 records. Change the cutoff point by adjusting the `truncateLength` option.
+
+This is a good option for simple tables with between 10 and 30 rows. It works best when the table doesn't require interactivity.
+
+```svelte
+<Table data={yourData} truncated={true} source="Source: Baseball Reference" />
+```
+
+<Canvas of={TableStories.Truncated} />
+
+## Paginated
+
+When your table has many rows, you should consider breaking it up into pages by setting `paginated` to `true`. When it is enabled, readers can leaf through the data using a set of buttons below the table.
+
+By default, there are 25 records per page. Change the number by adjusting the `pageSize` option.
+
+This is a good option when publishing large tables for readers to explore. It works well with interactive features like searching and filters.
+
+```svelte
+<Table
+  data={yourData}
+  paginated={true}
+  title="Press Freedom Index"
+  source="Reporters Without Borders"
+/>
+```
+
+<Canvas of={TableStories.Paginated} />
+
+## Search bar
+
+Allow users to search the table by setting the optional `searchable` option to `true`. Modify the default text that appears in the box by setting `searchPlaceholder` to a different placeholder text.
+
+```svelte
+<Table
+  data={yourData}
+  searchable={true}
+  paginated={true}
+  searchPlaceholder="Search press freedom data"
+  ,
+  title="Press Freedom Index"
+  notes="Source: Reporters Without Borders"
+/>
+```
+
+<Canvas of={TableStories.Search} />
+
+## Filter
+
+Allow users to filter the table by providing one of the attributes as the `filterField`. This works best with categorical columns.
+
+Set `filterLabel` to make the category name more readable. For example, if the column is `Region`, set `filterLabel` to `regions` or `regions of the world`.
+
+```svelte
+<Table
+  data={yourData}
+  filterField="Region"
+  filterLabel="regions"
+  paginated={true}
+  title="Press Freedom Index"
+  notes="Source: Reporters Without Borders"
+/>
+```
+
+<Canvas of={TableStories.Filter} />
+
+## Search and filter
+
+Feel free to both search and filter.
+
+```svelte
+<Table
+  data={yourData}
+  searchable={true}
+  paginated={true}
+  filterField="Region"
+  filterLabel="regions"
+  title="Press Freedom Index"
+  dek="Reporters Without Borders ranks countries based on their level of press freedom using criteria such as the degree of media pluralism and violence against journalists."
+  source="Source: Reporters Without Borders"
+/>
+```
+
+<Canvas of={TableStories.SearchAndFilter} />
+```
+
+## Sort
+
+Allow users to sort the table by setting `sortable` to `true`. Specify the starting order by setting `sortField` to a column name and `sortDirection` to `ascending` or `descending`.
+
+By default, all fields are sortable. If you'd like to limit the columns where sorting is allowed, provide a list to the `sortableFields` option.
+
+```svelte
+<Table
+  data={yourData}
+  sortable={true}
+  paginated={true}
+  sortField="Score"
+  sortDirection="descending"
+  title="Press Freedom Index"
+  source="Source: Reporters Without Borders"
+/>
+```
+
+<Canvas of={TableStories.Sort} />
+
+## Format
+
+Format column values by supplying functions keyed to field names with the `fieldFormatters` option. Columns are still sorted using the raw, underlying values.
+
+Among other things, this feature can be used to provide a unit of measurement, such as `$` or `%`, with numeric fields.
+
+```svelte
+<script lang="ts">
+  const fieldFormatters = {
+    // The key must match the column name in the data exactly
+    'Net worth (in billions)': (v) => '$' + v.toFixed(1),
+  };
+</script>
+
+<Table
+  data={yourData}
+  {fieldFormatters}
+  sortable={true}
+  sortField="Net worth (in billions)"
+  sortDirection="descending"
+  title="The Richest Women in the World"
+  source="Source: Forbes"
+/>
+```
+
+<Canvas of={TableStories.Format} />

package/dist/components/Table/Table.stories.svelte

@@ -1,155 +1,132 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import metadataDocs from "./stories/docs/metadata.md?raw";
-import truncateDocs from "./stories/docs/truncate.md?raw";
-import paginateDocs from "./stories/docs/paginate.md?raw";
-import searchDocs from "./stories/docs/search.md?raw";
-import filterDocs from "./stories/docs/filter.md?raw";
-import bothDocs from "./stories/docs/both.md?raw";
-import sortDocs from "./stories/docs/sort.md?raw";
-import formatDocs from "./stories/docs/format.md?raw";
-import styleDocs from "./stories/docs/style.md?raw";
-import Table from "./Table.svelte";
-import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Text elements/Table",
-  component: Table,
-  ...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 Table from './Table.svelte';
 
-<script>import { Template, Story } from "@storybook/addon-svelte-csf";
-import pressFreedom from "./stories/pressFreedom.json";
-import homeRuns from "./stories/homeRuns.json";
-import richestWomen from "./stories/richestWomen.json";
-const currencyFormat = (v) => "$" + v.toFixed(1);
+  const { Story } = defineMeta({
+    title: 'Components/Graphics/Table',
+    component: Table,
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  });
 </script>
 
-<Template let:args>
-  <Table {...args} />
-</Template>
+<script lang="ts">
+  import pressFreedom from './demo/pressFreedom.json';
+  import homeRuns from './demo/homeRuns.json';
+  import richestWomen from './demo/richestWomen.json';
+  import type { Formatter } from './utils';
+
+  const currencyFormat: Formatter<number> = (v: number) => '$' + v.toFixed(1);
+</script>
 
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     width: 'normal',
     data: homeRuns,
-  }}"
+  }}
 />
 
 <Story
-  name="Metadata"
-  {...withStoryDocs(metadataDocs)}
-  args="{{
-    width: 'normal',
+  name="Text elements"
+  exportName="Text"
+  args={{
     data: homeRuns,
     title: 'Career home run leaders',
     dek: 'In baseball, a home run (also known as a "dinger" or "tater") occurs when a batter hits the ball over the outfield fence. When a home run is hit, the batter and any runners on base are able to score.',
     notes: 'Note: As of Opening Day 2023',
     source: 'Source: Baseball Reference',
-  }}"
+  }}
 />
 
 <Story
-  name="Truncate"
-  {...withStoryDocs(truncateDocs)}
-  args="{{
+  name="Truncated"
+  args={{
     data: homeRuns,
     truncated: true,
     source: 'Source: Baseball Reference',
-  }}"
+  }}
 />
 
 <Story
-  name="Paginate"
-  {...withStoryDocs(paginateDocs)}
-  args="{{
+  name="Paginated"
+  args={{
     data: pressFreedom,
-    title: 'Press Freedom Index',
     paginated: true,
+    title: 'Press Freedom Index',
     source: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
-  name="Search"
-  {...withStoryDocs(searchDocs)}
-  args="{{
+  name="Search bar"
+  exportName="Search"
+  args={{
     data: pressFreedom,
     searchable: true,
     paginated: true,
+    searchPlaceholder: 'Search press freedom data',
     title: 'Press Freedom Index',
     source: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Filter"
-  {...withStoryDocs(filterDocs)}
-  args="{{
+  args={{
     data: pressFreedom,
     paginated: true,
     filterField: 'Region',
+    filterLabel: 'regions',
     title: 'Press Freedom Index',
     notes: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Search and filter"
-  {...withStoryDocs(bothDocs)}
-  args="{{
+  exportName="SearchAndFilter"
+  args={{
     data: pressFreedom,
     searchable: true,
-    filterField: 'Region',
     paginated: true,
+    filterField: 'Region',
+    filterLabel: 'regions',
     title: 'Press Freedom Index',
     dek: 'Reporters Without Borders ranks countries based on their level of press freedom using criteria such as the degree of media pluralism and violence against journalists.',
     source: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Sort"
-  {...withStoryDocs(sortDocs)}
-  args="{{
+  args={{
     data: pressFreedom,
     sortable: true,
+    paginated: true,
     sortField: 'Score',
     sortDirection: 'descending',
-    paginated: true,
     title: 'Press Freedom Index',
     notes: 'Note: data as of 2018',
     source: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Format"
-  {...withStoryDocs(formatDocs)}
-  args="{{
+  args={{
     data: richestWomen,
-    title: 'The Richest Women in the World',
-    source: 'Source: Forbes',
+    fieldFormatters: {
+      'Net worth (in billions)': currencyFormat as Formatter<unknown>,
+    },
     sortable: true,
     sortField: 'Net worth (in billions)',
     sortDirection: 'descending',
-    fieldFormatters: { 'Net worth (in billions)': currencyFormat },
-  }}"
-/>
-
-<Story
-  name="Style"
-  {...withStoryDocs(styleDocs)}
-  args="{{
-    id: 'custom-table',
-    data: richestWomen,
     title: 'The Richest Women in the World',
     source: 'Source: Forbes',
-  }}"
+  }}
 />

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

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