@onsvisual/svelte-components 0.1.105 → 1.0.0-next.1

package/dist/datavis/ScatterChart/ScatterChart.stories.svelte

@@ -0,0 +1,55 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import { ScatterChart } from "@onsvisual/svelte-charts";
+	import data from "../demo-data/data-scatter.js";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/ScatterChart",
+		component: ScatterChart,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		data,
+		xKey: "year",
+		yKey: "value",
+		title: "Simple scatter chart",
+		footer: "Source: ONS."
+	}}
+/>
+
+<Story
+	name="Scatter chart radius and groups"
+	args={{
+		data,
+		xKey: "year",
+		yKey: "value",
+		zKey: "group",
+		rKey: "alt",
+		r: [3, 15],
+		title: "Scatter chart radius and groups",
+		footer: "Source: ONS.",
+		legend: true
+	}}
+/>
+
+<Story
+	name="Beeswarm chart radius and groups"
+	args={{
+		data,
+		xKey: "value",
+		zKey: "group",
+		rKey: "alt",
+		r: [3, 15],
+		title: "Beeswarm chart radius and groups",
+		footer: "Source: ONS.",
+		legend: true
+	}}
+/>

package/dist/datavis/ScatterChart/ScatterChart.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ScatterChartProps */
+/** @typedef {typeof __propDef.events}  ScatterChartEvents */
+/** @typedef {typeof __propDef.slots}  ScatterChartSlots */
+export default class ScatterChart extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ScatterChartProps = typeof __propDef.props;
+export type ScatterChartEvents = typeof __propDef.events;
+export type ScatterChartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/datavis/ScatterChart/docs/component.md

@@ -0,0 +1,53 @@
+A scatter chart component with various modes, plus animation and events.
+
+Note: This component is part of the **@onsvisual/svelte-charts** library. See [more examples here](https://onsvisual.github.io/svelte-charts/).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { ScatterChart } from "@onsvisual/svelte-charts";
+
+  const data = export default [
+    { year: 1979, value: 7.19, alt: 12, group: "apples" },
+    { year: 1980, value: 7.83, alt: 15, group: "apples" },
+    { year: 1981, value: 7.24, alt: 17, group: "apples" },
+    { year: 1982, value: 7.44, alt: 28, group: "apples" },
+    { year: 1983, value: 7.51, alt: 23, group: "apples" },
+    { year: 1984, value: 7.1, alt: 17, group: "apples" },
+    { year: 1985, value: 6.91, alt: 11, group: "apples" },
+    { year: 1986, value: 7.53, alt: 13, group: "apples" },
+    { year: 1987, value: 7.47, alt: 18, group: "apples" },
+    { year: 1988, value: 7.48, alt: 20, group: "apples" },
+    { year: 1989, value: 7.03, alt: 24, group: "apples" },
+    { year: 1990, value: 6.23, alt: 26, group: "bananas" },
+    { year: 1991, value: 6.54, alt: 16, group: "bananas" },
+    { year: 1992, value: 7.54, alt: 25, group: "bananas" },
+    { year: 1993, value: 6.5, alt: 28, group: "bananas" },
+    { year: 1994, value: 7.18, alt: 11, group: "bananas" },
+    { year: 1995, value: 6.12, alt: 19, group: "bananas" },
+    { year: 1996, value: 7.87, alt: 14, group: "bananas" },
+    { year: 1997, value: 6.73, alt: 22, group: "bananas" },
+    { year: 1998, value: 6.55, alt: 13, group: "bananas" },
+    { year: 1999, value: 6.23, alt: 30, group: "bananas" },
+    { year: 2000, value: 6.31, alt: 27, group: "bananas" },
+    { year: 2001, value: 6.74, alt: 13, group: "cherries" },
+    { year: 2002, value: 5.95, alt: 18, group: "cherries" },
+    { year: 2003, value: 6.13, alt: 15, group: "cherries" },
+    { year: 2004, value: 6.04, alt: 11, group: "cherries" },
+    { year: 2005, value: 5.56, alt: 29, group: "cherries" },
+    { year: 2006, value: 5.91, alt: 26, group: "cherries" },
+    { year: 2007, value: 4.29, alt: 10, group: "cherries" },
+    { year: 2008, value: 4.72, alt: 14, group: "cherries" },
+    { year: 2009, value: 5.38, alt: 21, group: "cherries" },
+    { year: 2010, value: 4.92, alt: 20, group: "cherries" },
+    { year: 2011, value: 4.61, alt: 24, group: "dates" },
+    { year: 2012, value: 3.62, alt: 19, group: "dates" },
+    { year: 2013, value: 5.35, alt: 12, group: "dates" },
+    { year: 2014, value: 5.28, alt: 13, group: "dates" },
+    { year: 2015, value: 4.63, alt: 28, group: "dates" },
+    { year: 2016, value: 4.72, alt: 30, group: "dates" },
+  ];
+</script>
+
+<ScatterChart {data} xKey="year" yKey="value" title="Scatter chart example" footer="Source: ONS." />
+```

package/dist/datavis/Table/Table.stories.svelte

@@ -0,0 +1,32 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Table from "./Table.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const data = [
+		{ country: "Scotland", mountain: "Ben Nevis", height: 1345 },
+		{ country: "Wales", mountain: "Snowdon", height: 1085 },
+		{ country: "England", mountain: "Scarfell Pike", height: 978 },
+		{ country: "Northern Ireland", mountain: "Slieve Donard", height: 850 }
+	];
+	const columns = [
+		{ key: "country", label: "Country", sortable: true },
+		{ key: "mountain", label: "Highest mountain" },
+		{ key: "height", label: "Height in metres", sortable: true, numeric: true }
+	];
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/Table",
+		component: Table,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story name="Default" args={{ data, columns }} />
+
+<Story name="Fixed height with sticky header" args={{ data, columns, height: 200 }} />
+
+<Story name="Compact mode" args={{ data, columns, compact: true }} />

package/dist/{@types/datavis/Table/Table.svelte.d.ts → datavis/Table/Table.stories.svelte.d.ts}

@@ -2,14 +2,7 @@
 /** @typedef {typeof __propDef.events}  TableEvents */
 /** @typedef {typeof __propDef.slots}  TableSlots */
 export default class Table extends SvelteComponentTyped<{
-    height?: number | "auto";
-    title?: string;
-    data?: any[];
-    compact?: boolean;
-    responsive?: boolean;
-    rowHover?: boolean;
-    stickyHeader?: boolean;
-    columns?: any[];
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -20,14 +13,7 @@ export type TableSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        height?: number | "auto";
-        title?: string;
-        data?: any[];
-        compact?: boolean;
-        responsive?: boolean;
-        rowHover?: boolean;
-        stickyHeader?: boolean;
-        columns?: any[];
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/datavis/Table/Table.svelte

@@ -1,159 +1,151 @@
 <script>
-  import { formatter, isNumeric, ascending, descending } from "../../js/utils.js";
+	import { formatter, isNumeric, ascending, descending } from "../../js/utils.js";
 
-  /**
-   * An optional title for the table
-   * @type {string}
-   */
-  export let title = "";
-  /**
-   * Make the chart smaller/more compact
-   * @type {boolean}
-   */
-  export let compact = false;
-  /**
-   * Make the chart responsive (changes layout on narrow screens)
-   * @type {boolean}
-   */
-  export let responsive = false;
-  /**
-   * Highlight rows on hover
-   * @type {boolean}
-   */
-  export let rowHover = false;
-  /**
-   * Sticky header when table is longer than screen height
-   * @type {boolean}
-   */
-  export let stickyHeader = false;
-  /**
-   * Sticky header when table is longer than screen height
-   * @type {number|"auto"}
-   */
-  export let height = "auto";
-  /**
-   * Rows of data
-   * @type {array}
-   */
-  export let data = [];
-  /**
-   * Optional metadata for formatting columns. Array of {key, label, sortable?, numeric?, dp?} objects
-   * @type {array}
-   */
-  export let columns =
-    Array.isArray(data) && data[0] ? Object.keys(data[0]).map((key) => ({ key, label: key })) : [];
-  let _data = [...data];
-  let sort = columns.map((c) => "none");
+	/**
+	 * An optional title for the table
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * Make the chart smaller/more compact
+	 * @type {boolean}
+	 */
+	export let compact = false;
+	/**
+	 * Make the chart responsive (changes layout on narrow screens)
+	 * @type {boolean}
+	 */
+	export let responsive = false;
+	/**
+	 * Highlight rows on hover
+	 * @type {boolean}
+	 */
+	export let rowHover = false;
+	/**
+	 * Maximum height of table (in pixels). The header row becomes sticky unless the value is "auto" (default).
+	 * @type {number|"auto"}
+	 */
+	export let height = "auto";
+	/**
+	 * Rows of data
+	 * @type {object[]}
+	 */
+	export let data = [];
+	/**
+	 * Optional metadata for formatting columns. Array of {key, label, sortable?, numeric?, dp?} objects
+	 * @type {object[]}
+	 */
+	export let columns =
+		Array.isArray(data) && data[0] ? Object.keys(data[0]).map((key) => ({ key, label: key })) : [];
+	let _data = [...data];
+	let sort = columns.map((c) => "none");
 
-  $: sortable = columns.map((d) => d.sortable).includes(true);
-  $: formatters = columns.map((d) => formatter(d.dp));
+	$: sortable = columns.map((d) => d.sortable).includes(true);
+	$: formatters = columns.map((d) => formatter(d.dp));
 </script>
 
 <div
-  style:overflow="{typeof height === "number" ? "auto" : null}"
-  style:height="{typeof height === "number" ? `${height}px` : null}"
-  style:display="{typeof height !== "number" ? "contents" : null}"
+	style:overflow={typeof height === "number" ? "auto" : null}
+	style:height={typeof height === "number" ? `${height}px` : null}
+	style:display={typeof height !== "number" ? "contents" : null}
 >
-  <table
-    class="ons-table"
-    class:ons-table--sortable="{sortable}"
-    class:ons-table--compact="{compact}"
-    class:ons-table--responsive="{responsive}"
-    class:ons-table--row-hover="{rowHover}"
-    class:sticky-header="{stickyHeader}"
-    data-aria-sort="{sortable ? 'Sort by' : null}"
-    data-aria-asc="{sortable ? 'ascending' : null}"
-    data-aria-desc="{sortable ? 'descending' : null}"
-  >
-    {#if title}<caption class="ons-table__caption">{title}</caption>{/if}
-    <thead class="ons-table__head">
-      <tr class="ons-table__row">
-        {#each columns as col, i}
-          {#if col.sortable}
-            <th
-              scope="col"
-              class="ons-table__header"
-              class:ons-table__header--numeric="{col.numeric}"
-              aria-sort="{sort[i]}"
-            >
-              <button
-                aria-label="Sort by {col.label}"
-                type="button"
-                data-index="{i}"
-                class="ons-table__sort-button"
-                on:click="{() => {
-                  sort = sort.map((c, j) =>
-                    j === i && c === 'ascending' ? 'descending' : j === i ? 'ascending' : 'none'
-                  );
-                  _data = _data.sort((a, b) =>
-                    sort[i] === 'ascending'
-                      ? ascending(a[col.key], b[col.key])
-                      : descending(a[col.key], b[col.key])
-                  );
-                }}"
-              >
-                {col.label}<svg
-                  class="ons-svg-icon"
-                  viewBox="0 0 12 19"
-                  xmlns="http://www.w3.org/2000/svg"
-                  focusable="false"
-                  fill="currentColor"
-                >
-                  <path
-                    class="ons-topTriangle"
-                    d="M6 0l6 7.2H0L6 0zm0 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"></path>
-                  <path class="ons-bottomTriangle" d="M6 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"
-                  ></path>
-                </svg>
-              </button>
-            </th>
-          {:else}
-            <th
-              scope="col"
-              class="ons-table__header"
-              class:ons-table__header--numeric="{col.numeric}"
-            >
-              <span class="ons-table__header-text">{col.label}</span>
-            </th>
-          {/if}
-        {/each}
-      </tr>
-    </thead>
-    <tbody class="ons-table__body">
-      {#each _data as row}
-        <tr class="ons-table__row">
-          {#each columns as col, i}
-            <td
-              class="ons-table__cell"
-              class:ons-table__cell--numeric="{col.numeric}"
-              data-th="{col.label}"
-              >{@html col.numeric && isNumeric(row[col.key])
-                ? formatters[i](row[col.key])
-                : row[col.key] || "&ndash;"}</td
-            >
-          {/each}
-        </tr>
-      {/each}
-    </tbody>
-  </table>
+	<table
+		class="ons-table"
+		class:ons-table--sortable={sortable}
+		class:ons-table--compact={compact}
+		class:ons-table--responsive={responsive}
+		class:ons-table--row-hover={rowHover}
+		class:sticky-header={typeof height === "number"}
+		data-aria-sort={sortable ? "Sort by" : null}
+		data-aria-asc={sortable ? "ascending" : null}
+		data-aria-desc={sortable ? "descending" : null}
+	>
+		{#if title}<caption class="ons-table__caption">{title}</caption>{/if}
+		<thead class="ons-table__head">
+			<tr class="ons-table__row">
+				{#each columns as col, i}
+					{#if col.sortable}
+						<th
+							scope="col"
+							class="ons-table__header"
+							class:ons-table__header--numeric={col.numeric}
+							aria-sort={sort[i]}
+						>
+							<button
+								aria-label="Sort by {col.label}"
+								type="button"
+								data-index={i}
+								class="ons-table__sort-button"
+								on:click={() => {
+									sort = sort.map((c, j) =>
+										j === i && c === "ascending" ? "descending" : j === i ? "ascending" : "none"
+									);
+									_data = _data.sort((a, b) =>
+										sort[i] === "ascending"
+											? ascending(a[col.key], b[col.key])
+											: descending(a[col.key], b[col.key])
+									);
+								}}
+							>
+								{col.label}<svg
+									id="sort-sprite-id-0"
+									class="ons-icon"
+									viewBox="0 0 12 19"
+									xmlns="http://www.w3.org/2000/svg"
+									focusable="false"
+									fill="currentColor"
+									role="img"
+									title="ons-icon-sort-sprite"
+								>
+									<path
+										class="ons-topTriangle"
+										d="M6 0l6 7.2H0L6 0zm0 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"
+									></path>
+									<path class="ons-bottomTriangle" d="M6 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"
+									></path>
+								</svg>
+							</button>
+						</th>
+					{:else}
+						<th
+							scope="col"
+							class="ons-table__header"
+							class:ons-table__header--numeric={col.numeric}
+						>
+							<span class="ons-table__header-text">{col.label}</span>
+						</th>
+					{/if}
+				{/each}
+			</tr>
+		</thead>
+		<tbody class="ons-table__body">
+			{#each _data as row}
+				<tr class="ons-table__row">
+					{#each columns as col, i}
+						<td
+							class="ons-table__cell"
+							class:ons-table__cell--numeric={col.numeric}
+							data-th={col.label}
+							>{@html col.numeric && isNumeric(row[col.key])
+								? formatters[i](row[col.key])
+								: row[col.key] || "&ndash;"}</td
+						>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
 </div>
 
 <style>
-  .ons-table__sort-button {
-    color: var(--link, --ons-color-text-link) !important;
-  }
-  .ons-table__sort-button:hover {
-    color: var(--link-hover, --ons-color-text-link-hover) !important;
-    -webkit-text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px !important;
-            text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px !important;
-  }
-  table.sticky-header thead.ons-table__head {
-    position: sticky;
-    top: 0;
-    background: var(--background, white);
-    border-bottom: none;
-  }
-  table.sticky-header thead.ons-table__head th {
-    box-shadow: 0px -2px #707071 inset;
-    border-bottom: none;
-  }</style>
+	table.sticky-header thead.ons-table__head {
+		position: sticky;
+		top: 0;
+		background: var(--ons-color-page-light);
+		border-bottom: none;
+	}
+	table.sticky-header thead.ons-table__head th {
+		box-shadow: 0px -2px var(--ons-color-borders) inset;
+		border-bottom: none;
+	}
+</style>

package/dist/datavis/Table/Table.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  TableProps */
+/** @typedef {typeof __propDef.events}  TableEvents */
+/** @typedef {typeof __propDef.slots}  TableSlots */
+export default class Table extends SvelteComponentTyped<{
+    height?: number | "auto" | undefined;
+    data?: object[] | undefined;
+    title?: string | undefined;
+    compact?: boolean | undefined;
+    responsive?: boolean | undefined;
+    rowHover?: boolean | undefined;
+    columns?: object[] | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: number | "auto" | undefined;
+        data?: object[] | undefined;
+        title?: string | undefined;
+        compact?: boolean | undefined;
+        responsive?: boolean | undefined;
+        rowHover?: boolean | undefined;
+        columns?: object[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/datavis/Table/docs/component.md

@@ -0,0 +1,20 @@
+A table component with various customisation options.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Table } from "@onsvisual/svelte-components";
+
+  const data = [
+    { col1: "Item one", col2: 10 },
+    { col1: "Item two", col2: 20 },
+    { col1: "Item three", col2: 30 },
+  ];
+  const columns = [
+    { key: "col1", label: "Text column" },
+    { key: "col2", label: "Numeric column", numeric: true, sortable: true },
+  ];
+</script>
+
+<Table {data} {columns} />
+```

package/dist/datavis/intro.mdx

@@ -0,0 +1,22 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Data visualisation/Using svelte-charts" />
+
+# Using svelte-charts
+
+Most of the charts in this section are examples from the [@onsvisual/svelte-charts](https://github.com/onsvisual/svelte-charts/) library. To make use of the charts from that library, it is necessary to install an additional dependency in your project:
+
+```bash
+npm install @onsvisual/svelte-charts --save-dev
+```
+
+When using these charts, you need to make sure that you import them from the **svelte-charts** library and not the components library, for example:
+
+{/* prettier-ignore */}
+```html
+<script>
+  import { Chart } from  "@onsvisual/svelte-charts";
+</script>
+
+<Chart {...chart_properties}>
+```

package/dist/decorators/Blockquote/Blockquote.stories.svelte

@@ -0,0 +1,25 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Blockquote from "./Blockquote.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Decorators/Blockquote",
+		component: Blockquote,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Blockquote {...args}>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+		labore et dolore magna aliqua.
+	</Blockquote>
+{/snippet}
+
+<Story name="Default" args={{ attribution: "A N Other" }} {template} />
+
+<Story name="Quote without attribution" args={{}} {template} />

package/dist/decorators/Blockquote/Blockquote.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  BlockquoteProps */
+/** @typedef {typeof __propDef.events}  BlockquoteEvents */
+/** @typedef {typeof __propDef.slots}  BlockquoteSlots */
+export default class Blockquote extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BlockquoteProps = typeof __propDef.props;
+export type BlockquoteEvents = typeof __propDef.events;
+export type BlockquoteSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};