@reuters-graphics/graphics-components 0.0.31 → 0.0.34

package/dist/@types/components/@types/global.d.ts

@@ -1,4 +1,11 @@
 import type { ComponentType } from 'svelte';
+/**
+ * Used for the list of <option> tags nested in a <select> input.
+ */
+export declare type Option = {
+    value: string;
+    text: string;
+};
 /**
  * Used for any props that restrict width of a container to one of pre-fab widths.
  */

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

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

package/dist/@types/components/Table/MagnifyingGlass.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  MagnifyingGlassProps */
+/** @typedef {typeof __propDef.events}  MagnifyingGlassEvents */
+/** @typedef {typeof __propDef.slots}  MagnifyingGlassSlots */
+export default class MagnifyingGlass extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MagnifyingGlassProps = typeof __propDef.props;
+export type MagnifyingGlassEvents = typeof __propDef.events;
+export type MagnifyingGlassSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * The current page number.
+           * @type {number}
+           */ pageNumber?: number;
+        /**
+           * The default page size.
+           * @type {number}
+           */ pageSize?: number;
+        /**
+           * The number of records in the current page.
+           * @type {number}
+           */ pageLength?: number;
+        /**
+           * The total number of records in the data set.
+           * @type {number}
+           */ n?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PaginationProps = typeof __propDef.props;
+export declare type PaginationEvents = typeof __propDef.events;
+export declare type PaginationSlots = typeof __propDef.slots;
+export default class Pagination extends SvelteComponentTyped<PaginationProps, PaginationEvents, PaginationSlots> {
+}
+export {};

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

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

package/dist/@types/components/Table/Search.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * The placeholder text that appears in the search box.
+           * @type {string}
+           */ searchPlaceholder?: string;
+    };
+    events: {
+        search: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SearchProps = typeof __propDef.props;
+export declare type SearchEvents = typeof __propDef.events;
+export declare type SearchSlots = typeof __propDef.slots;
+export default class Search extends SvelteComponentTyped<SearchProps, SearchEvents, SearchSlots> {
+}
+export {};

package/dist/@types/components/Table/Select.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Option } from '../@types/global';
+declare const __propDef: {
+    props: {
+        /**
+           * The label that appears above the select input.
+           * @type {string}
+           */ label?: string;
+        /**
+           * The label that appears above the select input.
+           * @type {Array}
+           */ options?: Option[];
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SelectProps = typeof __propDef.props;
+export declare type SelectEvents = typeof __propDef.events;
+export declare type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

package/dist/@types/components/Table/SortArrow.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        sortDirection?: "ascending" | "descending";
+        /**
+           * Whether or not this arrow is currently sorting. It is false by default.
+           * @type {boolean}
+           */ active?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SortArrowProps = typeof __propDef.props;
+export declare type SortArrowEvents = typeof __propDef.events;
+export declare type SortArrowSlots = typeof __propDef.slots;
+export default class SortArrow extends SvelteComponentTyped<SortArrowProps, SortArrowEvents, SortArrowSlots> {
+}
+export {};

package/dist/@types/components/Table/Table.svelte.d.ts

@@ -0,0 +1,93 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * A source for the data.
+           * @type []
+           * @required
+           */ data: [];
+        /**
+           * A title that runs above the table.
+           * @type {string}
+           */ title?: string | null;
+        /**
+           * A block of text that runs above the table.
+           * @type {string}
+           */ dek?: string | null;
+        /**
+           * A footnote that runs below the table.
+           * @type {string}
+           */ notes?: string | null;
+        /**
+           * A source line that runs below the table.
+           * @type {string}
+           */ source?: string | null;
+        /**
+           * list of the fields to include in the table. By default everything goes.
+           * @type []
+           */ includedFields?: string[];
+        /**
+           * Whether or not the table is cutoff after a set number of rows.
+           * @type {boolean}
+           */ truncated?: boolean;
+        /**
+           * If the table is truncated, how many rows to allow before the cutoff.
+           * @type {number}
+           */ truncateLength?: number;
+        /**
+           * Whether or not the table is paginated after a set number of rows.
+           * @type {boolean}
+           */ paginated?: boolean;
+        /**
+           * The default page size.
+           * @type {number}
+           */ pageSize?: number;
+        /**
+           * Whether or not searches are allowed.
+           * @type {boolean}
+           */ searchable?: boolean;
+        /**
+           * The placeholder text that appears in the search box.
+           * @type {string}
+           */ searchPlaceholder?: string;
+        /**
+           * A field to offer uses as an interactive filter.
+           * @type {string}
+           */ filterField: string;
+        /**
+           * The label to place above the filter box
+           * @type {string}
+           */ filterLabel: string;
+        /**
+           * Whether or not sorts are allowed.
+           * @type {boolean}
+           */ sortable?: boolean;
+        /**
+           * The column to sort by. By default it's the first header.
+           * @type {string}
+           */ sortField?: string;
+        /**
+           * The columns that are allowed to sort. It's all of them by default.
+           * @type {string}
+           */ sortableFields?: string[];
+        sortDirection?: "ascending" | "descending";
+        /**
+           * Custom field formatting functions. Should be keyed to the name of the field.
+           * @type {object}
+           */ fieldFormatters?: object;
+        width?: "normal" | "wide" | "wider" | "widest" | "fluid";
+        /** Add an ID to target with SCSS. */ id?: string;
+        /** Add a class to target with SCSS. */ cls?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TableProps = typeof __propDef.props;
+export declare type TableEvents = typeof __propDef.events;
+export declare type TableSlots = typeof __propDef.slots;
+/** `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Table--default) */
+export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+}
+export {};

package/dist/@types/components/Table/X.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  XProps */
+/** @typedef {typeof __propDef.events}  XEvents */
+/** @typedef {typeof __propDef.slots}  XSlots */
+export default class X extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type XProps = typeof __propDef.props;
+export type XEvents = typeof __propDef.events;
+export type XSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/@types/components/Table/utils.d.ts

@@ -0,0 +1,5 @@
+export function filterArray(data: any, searchText: any, filterField: any, filterValue: any): any;
+export function paginateArray(array: any, pageSize: any, pageNumber: any): any;
+export function uniqueAttr(array: any, attr: any): any;
+export function unique(value: any, index: any, array: any): boolean;
+export function getOptions(data: any, attr: any): any;

package/dist/@types/index.d.ts

@@ -27,6 +27,7 @@ export { default as SiteFooter } from "./components/SiteFooter/SiteFooter.svelte
 export { default as SiteHeader } from "./components/SiteHeader/SiteHeader.svelte";
 export { default as SiteHeadline } from "./components/SiteHeadline/SiteHeadline.svelte";
 export { default as Spinner } from "./components/Spinner/Spinner.svelte";
+export { default as Table } from "./components/Table/Table.svelte";
 export { default as ToolsHeader } from "./components/ToolsHeader/ToolsHeader.svelte";
 export { default as Video } from "./components/Video/Video.svelte";
 export { default as Visible } from "./components/Visible/Visible.svelte";

package/dist/components/Article/Article.svelte

@@ -40,7 +40,6 @@ $: columnWidthVars = {
   display: block;
   margin: 0;
   padding: 0 15px;
-  overflow-x: hidden;
   background-color: var(--theme-colour-background, transparent);
 }
 article.embedded {

package/dist/components/Table/LeftArrow.svelte

@@ -0,0 +1,17 @@
+<svg
+  class="icon"
+  aria-hidden="true"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 6 11"
+  ><path
+    d="m1.76 5.134 3.887-3.887a.71.71 0 0 0 0-1.027.709.709 0 0 0-1.027 0l-4.4 4.4a.71.71 0 0 0 0 1.027l4.4 4.4c.147.147.367.22.513.22a.79.79 0 0 0 .513-.22.71.71 0 0 0 0-1.027L1.76 5.133Z"
+  ></path></svg
+>
+
+<style>
+  .icon {
+    height: 1rem;
+    width: 1rem;
+    fill: currentColor;
+  }</style>

package/dist/components/Table/MagnifyingGlass.svelte

@@ -0,0 +1,16 @@
+<svg
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M3.41069 12.0711C2.83695 11.5053 2.38137 10.8311 2.07042 10.0878C1.75947 9.3444 1.59934 8.54666 1.59934 7.74088C1.59934 6.9351 1.75947 6.13735 2.07042 5.39399C2.38137 4.65063 2.83695 3.97647 3.41069 3.41069C3.97647 2.83695 4.65063 2.38137 5.39399 2.07042C6.13735 1.75947 6.9351 1.59934 7.74088 1.59934C8.54666 1.59934 9.3444 1.75947 10.0878 2.07042C10.8311 2.38137 11.5053 2.83695 12.0711 3.41069C12.6448 3.97647 13.1004 4.65063 13.4113 5.39399C13.7223 6.13735 13.8824 6.9351 13.8824 7.74088C13.8824 8.54666 13.7223 9.3444 13.4113 10.0878C13.1004 10.8311 12.6448 11.5053 12.0711 12.0711C11.5053 12.6448 10.8311 13.1004 10.0878 13.4113C9.3444 13.7223 8.54666 13.8824 7.74088 13.8824C6.9351 13.8824 6.13735 13.7223 5.39399 13.4113C4.65063 13.1004 3.97647 12.6448 3.41069 12.0711ZM17.8254 16.6899L13.7454 12.6099C14.9941 11.0703 15.6041 9.11021 15.4497 7.13395C15.2953 5.1577 14.3882 3.3161 12.9156 1.98914C11.4429 0.662179 9.51715 -0.0489011 7.53554 0.00261584C5.55393 0.0541328 3.66769 0.864316 2.266 2.266C0.864316 3.66769 0.0541328 5.55393 0.00261584 7.53554C-0.0489011 9.51715 0.662179 11.4429 1.98914 12.9156C3.3161 14.3882 5.1577 15.2953 7.13395 15.4497C9.11021 15.6041 11.0703 14.9941 12.6099 13.7454L16.6899 17.8254C16.8453 17.9485 17.0405 18.0101 17.2384 17.9986C17.4363 17.9872 17.6231 17.9034 17.7633 17.7633C17.9034 17.6231 17.9872 17.4363 17.9986 17.2384C18.0101 17.0405 17.9485 16.8453 17.8254 16.6899Z"
+  ></path>
+</svg>
+
+<style>
+  svg path {
+    fill: var(--theme-colour-text-secondary);
+  }</style>

package/dist/components/Table/Pagination.svelte

@@ -0,0 +1,118 @@
+<script>import { intcomma } from 'journalize';
+import LeftArrow from './LeftArrow.svelte';
+import RightArrow from './RightArrow.svelte';
+/**
+ * The current page number.
+ * @type {number}
+ */
+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;
+    }
+}
+function goToNextPage() {
+    if (pageNumber < numPages) {
+        pageNumber += 1;
+    }
+}
+</script>
+
+<nav aria-label="pagination" class="pagination">
+  <button on:click="{goToPreviousPage}" disabled="{pageNumber === 1}"
+    ><div class="icon-wrapper">
+      <LeftArrow />
+      <span class="visually-hidden">Previous page</span>
+    </div></button
+  >
+  <div class="label" aria-label="page {pageNumber}" aria-current="page">
+    <div class="records">{minRow}-{maxRow} of {intcomma(n)}</div>
+  </div>
+  <button
+    on:click="{goToNextPage}"
+    disabled="{pageNumber === Math.ceil(n / pageSize)}"
+    ><div class="icon-wrapper">
+      <RightArrow />
+      <span class="visually-hidden">Next page</span>
+    </div></button
+  >
+</nav>
+
+<style>nav.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+}
+nav.pagination button {
+  border: 1px solid var(--theme-colour-text-secondary, #afafaf);
+  border-radius: 50%;
+  background: var(--theme-color-background);
+  color: var(--theme-colour-text-secondary, #afafaf);
+  cursor: pointer;
+  width: 35px;
+  height: 35px;
+}
+nav.pagination button:disabled {
+  cursor: default;
+  color: var(--theme-colour-brand-rules);
+  border-color: var(--theme-colour-brand-rules);
+}
+nav.pagination button:disabled .icon-wrapper:hover {
+  color: var(--theme-colour-brand-rules);
+  border-color: var(--theme-colour-brand-rules);
+}
+nav.pagination button .icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+nav.pagination button .icon-wrapper:hover {
+  color: var(--theme-colour-text-primary, #666666);
+  border-color: var(--theme-colour-text-primary, #666666);
+}
+nav.pagination .label {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: auto;
+  min-width: 110px;
+  margin: 0 0.5rem;
+}
+nav.pagination .label .records {
+  font-size: 0.8rem;
+  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  font-weight: 300;
+  margin: 0 1rem;
+  color: var(--theme-colour-text-primary, #666666);
+}
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}</style>

package/dist/components/Table/RightArrow.svelte

@@ -0,0 +1,17 @@
+<svg
+  class="icon"
+  aria-hidden="true"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 7 11"
+  ><path
+    d="m6.013 4.987-4.4-4.4a.71.71 0 0 0-1.027 0 .709.709 0 0 0 0 1.027L4.473 5.5.586 9.387a.71.71 0 0 0 0 1.027c.147.147.293.22.513.22.22 0 .367-.073.514-.22l4.4-4.4a.71.71 0 0 0 0-1.027Z"
+  ></path>
+</svg>
+
+<style>
+  .icon {
+    height: 1rem;
+    width: 1rem;
+    fill: currentColor;
+  }</style>

package/dist/components/Table/Search.svelte

@@ -0,0 +1,76 @@
+<script>import { createEventDispatcher } from 'svelte';
+import MagnifyingGlass from './MagnifyingGlass.svelte';
+import X from './X.svelte';
+/**
+ * The placeholder text that appears in the search box.
+ * @type {string}
+ */
+export let searchPlaceholder = 'Search in table';
+let value = '';
+$: active = value !== '';
+const dispatch = createEventDispatcher();
+function input(event) {
+    value = event.target.value;
+    dispatch('search', { value });
+}
+function clear() {
+    value = '';
+    dispatch('search', { value: '' });
+}
+</script>
+
+<div class="search" class:active>
+  <div class="search--icon">
+    <MagnifyingGlass />
+  </div>
+  <input
+    id="search--input"
+    class="search--input"
+    type="text"
+    placeholder="{searchPlaceholder}"
+    on:input="{input}"
+    bind:value
+  />
+  <div class="search--x" class:invisible="{!active}" on:click="{clear}">
+    <X />
+  </div>
+</div>
+
+<style>.search {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 256px;
+  padding: 0 0 0 0.1rem;
+}
+.search .search--icon {
+  position: absolute;
+  left: 0.5rem;
+  top: 0.15rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: var(--theme-colour-brand-rules, #d0d0d0);
+}
+.search .search--input {
+  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  color: var(--theme-colour-text-primary, #404040);
+  padding: 0 0 0 2rem;
+  font-size: 0.8rem;
+  height: 33px;
+  border: 1px solid var(--theme-colour-brand-rules, #d0d0d0);
+  background: transparent;
+  border-radius: 6px;
+  width: 100%;
+}
+.search .search--x {
+  position: absolute;
+  right: 0;
+  top: 0.15rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: var(--theme-colour-text-primary, #666666);
+  cursor: pointer;
+}
+.search .search--x.invisible {
+  display: none;
+}</style>

package/dist/components/Table/Select.svelte

@@ -0,0 +1,69 @@
+<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}
+ */
+export let options = [];
+const dispatch = createEventDispatcher();
+function input(event) {
+    const value = event.target.value;
+    dispatch('select', { value });
+}
+</script>
+
+<div class="select">
+  {#if label}
+    <label for="select--input">{label}</label>
+  {/if}
+  <select
+    class="select--input"
+    name="select--input"
+    id="select--input"
+    on:input="{input}"
+  >
+    {#each options as obj}
+      <option value="{obj.value}">{obj.text}</option>
+    {/each}
+  </select>
+</div>
+
+<style>.select {
+  width: 256px;
+  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+}
+.select label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 300;
+  color: var(--theme-colour-text-primary, #404040);
+  padding: 0 0 0.125rem 0;
+}
+.select .select--input {
+  position: relative;
+  font-size: 0.8rem;
+  font-weight: 400;
+  line-height: 1;
+  height: 33px;
+  border: 1px solid var(--theme-colour-brand-rules, #d0d0d0);
+  color: var(--theme-colour-text-primary, #404040);
+  border-radius: 6px;
+  width: 100%;
+  padding: 0.5rem;
+  -moz-appearance: none; /* Firefox */
+  -webkit-appearance: none; /* Safari and Chrome */
+  appearance: none; /* Remove the default arrow */
+  padding-right: 20px; /* Add some padding to make room for a custom arrow */
+  background: transparent;
+  background-image: url('data:image/svg+xml;utf8,<svg width="15" height="9" viewBox="0 0 15 9" xmlns="http://www.w3.org/2000/svg"><path d="M6.76474 8.30466L0.236082 1.54523C-0.0786943 1.21934 -0.0786943 0.69069 0.236082 0.364804C0.550521 0.0392666 1.19794 0.0403099 1.51305 0.364804L7.33483 6.49522L12.9249 0.475171C13.3549 0.0451683 14.1195 0.0396141 14.4339 0.365152C14.7487 0.691037 14.7487 1.21969 14.4339 1.54557L7.90492 8.30466C7.59015 8.63054 7.07952 8.63054 6.76474 8.30466Z" fill="gray"/></svg>');
+  background-repeat: no-repeat;
+  background-position-x: 235px;
+  background-position-y: 55%;
+}
+.select .select--input::-ms-expand {
+  display: none; /* Remove the default arrow in Internet Explorer 11 */
+}</style>

package/dist/components/Table/SortArrow.svelte

@@ -0,0 +1,36 @@
+<script>export let sortDirection = 'ascending';
+/**
+ * Whether or not this arrow is currently sorting. It is false by default.
+ * @type {boolean}
+ */
+export let active = false;
+</script>
+
+<svg
+  width="15"
+  height="21"
+  viewBox="0 0 15 21"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="avoid-clicks"
+>
+  <path
+    class:active="{sortDirection === 'descending' && active}"
+    d="M6.76474 20.2244L0.236082 13.4649C-0.0786943 13.139 -0.0786943 12.6104 0.236082 12.2845C0.550521 11.959 1.19794 11.96 1.51305 12.2845L7.33483 12.2845L13 12.2845C13.43 11.8545 14.1195 11.9593 14.4339 12.2849C14.7487 12.6107 14.7487 13.1394 14.4339 13.4653L7.90492 20.2244C7.59015 20.5503 7.07952 20.5503 6.76474 20.2244Z"
+  ></path>
+  <path
+    class:active="{sortDirection === 'ascending' && active}"
+    d="M7.90518 0.244414L14.4338 7.00385C14.7486 7.32973 14.7486 7.85838 14.4338 8.18427C14.1194 8.50981 13.472 8.50876 13.1569 8.18427L7.33509 8.18427L1.66992 8.18427C1.23992 8.61427 0.550443 8.50946 0.236003 8.18392C-0.0787725 7.85803 -0.0787725 7.32938 0.236003 7.0035L6.765 0.244414C7.07978 -0.0814713 7.5904 -0.0814713 7.90518 0.244414Z"
+  ></path>
+</svg>
+
+<style>.avoid-clicks {
+  pointer-events: none;
+}
+
+path {
+  fill: var(--theme-colour-brand-rules, #d0d0d0);
+}
+path.active {
+  fill: var(--theme-colour-text-primary, #404040);
+}</style>

package/dist/components/Table/Table.svelte

@@ -0,0 +1,418 @@
+<!-- @component `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Table--default) -->
+<script>import { onMount } from 'svelte';
+/**
+ * A source for the data.
+ * @type []
+ * @required
+ */
+export let data;
+/**
+ * A title that runs above the table.
+ * @type {string}
+ */
+export let title = null;
+/**
+ * A block of text that runs above the table.
+ * @type {string}
+ */
+export let dek = null;
+/**
+ * A footnote that runs below the table.
+ * @type {string}
+ */
+export let notes = null;
+/**
+ * A source line that runs below the table.
+ * @type {string}
+ */
+export let source = null;
+/**
+ * list of the fields to include in the table. By default everything goes.
+ * @type []
+ */
+export let includedFields = Object.keys(data[0]).filter((f) => f !== 'searchStr');
+/**
+ * Whether or not the table is cutoff after a set number of rows.
+ * @type {boolean}
+ */
+export let truncated = false;
+/**
+ * If the table is truncated, how many rows to allow before the cutoff.
+ * @type {number}
+ */
+export let truncateLength = 5;
+/**
+ * Whether or not the table is paginated after a set number of rows.
+ * @type {boolean}
+ */
+export let paginated = false;
+/**
+ * The default page size.
+ * @type {number}
+ */
+export let pageSize = 25;
+/**
+ * Whether or not searches are allowed.
+ * @type {boolean}
+ */
+export let searchable = false;
+/**
+ * The placeholder text that appears in the search box.
+ * @type {string}
+ */
+export let searchPlaceholder = 'Search in table';
+/**
+ * A field to offer uses as an interactive filter.
+ * @type {string}
+ */
+export let filterField;
+/**
+ * The label to place above the filter box
+ * @type {string}
+ */
+export let filterLabel;
+/**
+ * Whether or not sorts are allowed.
+ * @type {boolean}
+ */
+export let sortable = false;
+/**
+ * The column to sort by. By default it's the first header.
+ * @type {string}
+ */
+export let sortField = Object.keys(data[0])[0];
+/**
+ * The columns that are allowed to sort. It's all of them by default.
+ * @type {string}
+ */
+export let sortableFields = Object.keys(data[0]).filter((f) => f !== 'searchStr');
+export let sortDirection = 'ascending';
+/**
+ * Custom field formatting functions. Should be keyed to the name of the field.
+ * @type {object}
+ */
+export let fieldFormatters = {};
+export let width = 'normal';
+/** Add an ID to target with SCSS. */
+export let id = '';
+/** Add a class to target with SCSS. */
+export let cls = '';
+/** Import local helpers */
+import Block from '../Block/Block.svelte';
+import Pagination from './Pagination.svelte';
+import Search from './Search.svelte';
+import Select from './Select.svelte';
+import SortArrow from './SortArrow.svelte';
+import { filterArray, paginateArray, getOptions } from './utils.js';
+/** Set truncate, filtering and pagination configuration */
+let showAll = false;
+let pageNumber = 1;
+let searchText = '';
+const filterList = filterField ? getOptions(data, filterField) : undefined;
+let filterValue = '';
+$: filteredData = filterArray(data, searchText, filterField, filterValue);
+$: sortedData = sortArray(filteredData, sortField, sortDirection);
+$: currentPageData = truncated
+    ? showAll
+        ? sortedData
+        : sortedData.slice(0, truncateLength + 1)
+    : paginated
+        ? paginateArray(sortedData, pageSize, pageNumber)
+        : sortedData;
+//* * Handle show all, search, filter, sort and pagination events */
+function toggleTruncate(event) {
+    showAll = !showAll;
+}
+function handleSearchInput(event) {
+    searchText = event.detail.value;
+    pageNumber = 1;
+}
+function handleFilterInput(event) {
+    const value = event.detail.value;
+    filterValue = value === 'All' ? '' : value;
+    pageNumber = 1;
+}
+function handleSort(event) {
+    if (!sortable)
+        return;
+    sortField = event.target.getAttribute('data-field');
+    sortDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
+}
+function sortArray(array, column, direction) {
+    if (!sortable)
+        return array;
+    return array.sort((a, b) => {
+        if (a[column] < b[column]) {
+            return direction === 'ascending' ? -1 : 1;
+        }
+        else if (a[column] > b[column]) {
+            return direction === 'ascending' ? 1 : -1;
+        }
+        else {
+            return 0;
+        }
+    });
+}
+function formatValue(item, field) {
+    const value = item[field];
+    if (field in fieldFormatters) {
+        const func = fieldFormatters[field];
+        return func(value);
+    }
+    else {
+        return value;
+    }
+}
+/** Boot it up. */
+onMount(() => {
+    data.forEach((d) => {
+        // Compose the string we will allow users to search
+        d.searchStr = includedFields
+            .map((field) => d[field])
+            .join(' ')
+            .toLowerCase();
+    });
+});
+</script>
+
+<Block width="{width}" id="{id}" cls="{cls}">
+  <article class="table-wrapper">
+    {#if title || dek || searchable || filterList}
+      <header class="table--header">
+        {#if title}
+          <h2 class="table--header--title">{@html title}</h2>
+        {/if}
+        {#if dek}
+          <p class="table--header--dek">{@html dek}</p>
+        {/if}
+        {#if searchable || filterList}
+          <nav class="input">
+            {#if filterList}
+              <div class="table--header--filter">
+                <Select
+                  label="{filterLabel || filterField}"
+                  options="{filterList}"
+                  on:select="{handleFilterInput}"
+                />
+              </div>
+            {/if}
+            {#if searchable}
+              <div class="table--header--search">
+                <Search
+                  bind:searchPlaceholder
+                  on:search="{handleSearchInput}"
+                />
+              </div>
+            {/if}
+          </nav>
+        {/if}
+      </header>
+    {/if}
+    <section class="table">
+      <table
+        class:paginated
+        class:truncated="{truncated &&
+          !showAll &&
+          data.length > truncateLength}"
+      >
+        <thead class="table--thead">
+          <tr>
+            {#each includedFields as field}
+              <th
+                scope="col"
+                class="table--thead--th"
+                class:sortable="{sortable && sortableFields.includes(field)}"
+                class:sort-ascending="{sortable &&
+                  sortField === field &&
+                  sortDirection === 'ascending'}"
+                class:sort-descending="{sortable &&
+                  sortField === field &&
+                  sortDirection === 'descending'}"
+                data-field="{field}"
+                on:click="{handleSort}"
+              >
+                {field}
+                {#if sortable && sortableFields.includes(field)}
+                  <div class="table--thead--sortarrow avoid-clicks">
+                    <SortArrow
+                      bind:sortDirection
+                      active="{sortField === field}"
+                    />
+                  </div>
+                {/if}
+              </th>
+            {/each}
+          </tr>
+        </thead>
+        <tbody class="table--tbody">
+          {#each currentPageData as item, idx}
+            <tr data-row-index="{idx}">
+              {#each includedFields as field}
+                <td
+                  data-row-index="{idx}"
+                  data-field="{field}"
+                  data-value="{item[field]}"
+                >
+                  {@html formatValue(item, field)}
+                </td>
+              {/each}
+            </tr>
+          {/each}
+          {#if searchable && searchText && currentPageData.length === 0}
+            <tr>
+              <td class="no-results" colspan="{includedFields.length}">
+                No results found for "{searchText}"
+              </td>
+            </tr>
+          {/if}
+        </tbody>
+        {#if notes || source}
+          <tfoot class="table--tfoot">
+            {#if notes}
+              <tr>
+                <td colspan="{includedFields.length}">{@html notes}</td>
+              </tr>
+            {/if}
+            {#if source}
+              <tr>
+                <td colspan="{includedFields.length}">{@html source}</td>
+              </tr>
+            {/if}
+          </tfoot>
+        {/if}
+      </table>
+    </section>
+    {#if truncated && data.length > truncateLength}
+      <nav aria-label="Show all button" class="show-all">
+        <button on:click="{toggleTruncate}"
+          >{#if showAll}Show fewer rows{:else}Show {data.length -
+              truncateLength} more rows{/if}</button
+        >
+      </nav>
+    {/if}
+    {#if paginated}
+      <Pagination
+        bind:pageNumber
+        bind:pageSize
+        bind:pageLength="{currentPageData.length}"
+        bind:n="{sortedData.length}"
+      />{/if}
+  </article>
+</Block>
+
+<style>.table-wrapper {
+  font-size: 1rem;
+  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  color: var(--theme-colour-text-primary, #404040);
+}
+
+.table--header {
+  width: 100%;
+}
+.table--header h2.table--header--title {
+  font-weight: 500;
+  color: var(--theme-colour-text-primary, #404040);
+  font-size: 1.33rem;
+  padding: 0;
+  margin: 0.5rem 0;
+}
+.table--header p.table--header--dek {
+  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  color: var(--theme-colour-text-primary, #404040);
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.4;
+  padding: 0;
+  margin: 0.5rem 0;
+}
+
+section.table {
+  overflow-x: auto;
+}
+
+section.table table {
+  background-color: transparent;
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+}
+section.table table thead tr th {
+  border-bottom: 1px solid var(--theme-colour-text-primary, #666666);
+  color: var(--theme-colour-text-primary, #666666);
+  background-color: var(--theme-colour-background, #fff);
+  font-size: 0.85rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06rem;
+  line-height: 1.4;
+  padding: 0.5rem 0.25rem 0.5rem 0;
+}
+section.table table thead tr th.sortable {
+  cursor: pointer;
+}
+section.table table thead tr th .table--thead--sortarrow {
+  display: inline-block;
+  margin: 0 0 0 0.125rem;
+}
+section.table table tbody td {
+  font-size: 1rem;
+  font-weight: 300;
+  padding: 0.5rem 0.25rem 0.5rem 0;
+  vertical-align: top;
+  border-bottom: 1px solid var(--theme-colour-brand-rules, #d0d0d0);
+}
+section.table table tbody td.no-results {
+  color: var(--theme-colour-text-secondary, #d0d0d0);
+}
+section.table table tfoot.table--tfoot {
+  display: table-row;
+}
+section.table table tfoot.table--tfoot tr {
+  border-bottom: 0;
+}
+section.table table tfoot.table--tfoot td {
+  font-weight: 300;
+  color: var(--theme-colour-text-primary, #404040);
+  font-size: 0.8rem;
+  padding: 0.5rem 0 0 0;
+}
+section.table table.truncated tbody tr:last-child:not(:first-child) {
+  border-bottom: none;
+  mask-image: linear-gradient(to bottom, var(--theme-colour-text-primary) 0%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, var(--theme-colour-text-primary) 0%, transparent 100%);
+}
+
+.avoid-clicks {
+  pointer-events: none;
+}
+
+nav.input {
+  margin: 0.5rem 0;
+  padding: 0;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+nav.show-all {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+}
+nav.show-all button {
+  font-size: 0.8rem;
+  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  font-weight: 500;
+  min-width: 175px;
+  padding: 0.33rem 0.5rem;
+  border: 1px solid var(--theme-colour-brand-rules, #d0d0d0);
+  border-radius: 4px;
+  background: var(--theme-colour-background);
+  color: var(--theme-colour-text-primary, #666666);
+  cursor: pointer;
+}</style>

package/dist/components/Table/X.svelte

@@ -0,0 +1,21 @@
+<svg
+  width="14"
+  height="14"
+  viewBox="0 0 14 14"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_25_237)">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0.300421 0.292131C0.392053 0.199685 0.50109 0.126304 0.621235 0.0762269C0.741381 0.0261493 0.870256 0.000366211 1.00042 0.000366211C1.13059 0.000366211 1.25946 0.0261493 1.37961 0.0762269C1.49975 0.126304 1.60879 0.199685 1.70042 0.292131L7.00082 5.45346L12.3012 0.292131C12.3929 0.199685 12.5019 0.126304 12.622 0.0762269C12.7422 0.0261493 12.8711 0.000366211 13.0012 0.000366211C13.1314 0.000366211 13.2603 0.0261493 13.3804 0.0762269C13.5006 0.126304 13.6096 0.199685 13.7012 0.292131C13.7954 0.378994 13.8706 0.48445 13.922 0.601837C13.9734 0.719225 13.9999 0.845993 13.9998 0.974136C13.9997 1.10228 13.973 1.22901 13.9215 1.34633C13.8699 1.46364 13.7946 1.569 13.7003 1.65573L8.21229 6.99906L13.7003 12.3443C14.0708 12.7064 14.0979 13.2365 13.7796 13.622L13.6994 13.7079C13.6077 13.8003 13.4987 13.8737 13.3785 13.9238C13.2584 13.9738 13.1295 13.9996 12.9994 13.9996C12.8692 13.9996 12.7403 13.9738 12.6202 13.9238C12.5 13.8737 12.391 13.8003 12.2994 13.7079L6.99895 8.54653L1.69855 13.7079C1.60692 13.8003 1.49789 13.8737 1.37774 13.9238C1.25759 13.9738 1.12872 13.9996 0.998554 13.9996C0.86839 13.9996 0.739515 13.9738 0.619369 13.9238C0.499223 13.8737 0.390186 13.8003 0.298554 13.7079C0.204346 13.621 0.129174 13.5155 0.0777863 13.3982C0.0263988 13.2808 -8.74916e-05 13.154 2.17122e-07 13.0259C8.79258e-05 12.8977 0.0267478 12.771 0.0782959 12.6537C0.129844 12.5364 0.20516 12.431 0.299488 12.3443L5.78655 7L0.300421 1.65573C-0.0710458 1.2936 -0.0981124 0.763464 0.220154 0.377998L0.300421 0.292131Z"
+      fill="var(--theme-colour-text-secondary)"></path>
+  </g>
+  <defs>
+    <clipPath id="clip0_25_237">
+      <rect width="14" height="14" fill="var(--theme-colour-background, white)"
+      ></rect>
+    </clipPath>
+  </defs>
+</svg>

package/dist/components/Table/utils.js

@@ -0,0 +1,36 @@
+export function filterArray(data, searchText, filterField, filterValue) {
+  if (searchText) {
+    data = data.filter((item) => {
+      return item.searchStr.includes(searchText.toLowerCase());
+    });
+  }
+  if (filterValue && filterValue) {
+    data = data.filter((item) => {
+      return item[filterField] === filterValue;
+    });
+  }
+  return data;
+}
+
+export function paginateArray(array, pageSize, pageNumber) {
+  return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
+}
+
+export function uniqueAttr(array, attr) {
+  return array.map((e) => e[attr]).filter(unique);
+}
+
+export function unique(value, index, array) {
+  return array.indexOf(value) === index;
+}
+
+export function getOptions(data, attr) {
+  // Get all the unique values in the provided field. Sort it.
+  const attrList = uniqueAttr(data, attr).sort((a, b) => a.localeCompare(b));
+
+  // Tack 'All' as the front as the first option.
+  attrList.unshift('All');
+
+  // Convert the list into Option typed objects ready for our Select component
+  return attrList.map((a) => ({ text: a, value: a }));
+}

package/dist/index.js

@@ -28,6 +28,7 @@ export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte
 export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
 export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';
+export { default as Table } from './components/Table/Table.svelte';
 export {
   default as Theme,
   // @ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.31",
+  "version": "0.0.34",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -186,6 +186,16 @@
     "./components/SiteHeader/svgs/Menu.svelte": "./dist/components/SiteHeader/svgs/Menu.svelte",
     "./components/SiteHeadline/SiteHeadline.svelte": "./dist/components/SiteHeadline/SiteHeadline.svelte",
     "./components/Spinner/Spinner.svelte": "./dist/components/Spinner/Spinner.svelte",
+    "./components/Table/LeftArrow.svelte": "./dist/components/Table/LeftArrow.svelte",
+    "./components/Table/MagnifyingGlass.svelte": "./dist/components/Table/MagnifyingGlass.svelte",
+    "./components/Table/Pagination.svelte": "./dist/components/Table/Pagination.svelte",
+    "./components/Table/RightArrow.svelte": "./dist/components/Table/RightArrow.svelte",
+    "./components/Table/Search.svelte": "./dist/components/Table/Search.svelte",
+    "./components/Table/Select.svelte": "./dist/components/Table/Select.svelte",
+    "./components/Table/SortArrow.svelte": "./dist/components/Table/SortArrow.svelte",
+    "./components/Table/Table.svelte": "./dist/components/Table/Table.svelte",
+    "./components/Table/X.svelte": "./dist/components/Table/X.svelte",
+    "./components/Table/utils": "./dist/components/Table/utils.js",
     "./components/Theme/@types/component.ts": "./dist/components/Theme/@types/component.ts",
     "./components/Theme/Theme.svelte": "./dist/components/Theme/Theme.svelte",
     "./components/Theme/themes/dark": "./dist/components/Theme/themes/dark.js",