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

package/dist/inputs/Textarea/Textarea.stories.svelte

@@ -0,0 +1,40 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Textarea from "./Textarea.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Textarea",
+		component: Textarea,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<Textarea {...args} />
+	</div>
+{/snippet}
+
+<Story
+	name="Default"
+	args={{
+		id: "text",
+		label: "Enter some text"
+	}}
+	{template}
+/>
+
+<Story
+	name="Hidden label and character limit"
+	args={{
+		id: "text",
+		label: "Enter some text",
+		hideLabel: true,
+		charLimit: 200
+	}}
+	{template}
+/>

package/dist/{@types/inputs/Textarea/Textarea.svelte.d.ts → inputs/Textarea/Textarea.stories.svelte.d.ts}

@@ -2,14 +2,7 @@
 /** @typedef {typeof __propDef.events}  TextareaEvents */
 /** @typedef {typeof __propDef.slots}  TextareaSlots */
 export default class Textarea extends SvelteComponentTyped<{
-    id?: string;
-    width?: number;
-    label?: string;
-    value?: string;
-    description?: string;
-    hideLabel?: boolean;
-    charLimit?: number;
-    rows?: number;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -20,14 +13,7 @@ export type TextareaSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string;
-        width?: number;
-        label?: string;
-        value?: string;
-        description?: string;
-        hideLabel?: boolean;
-        charLimit?: number;
-        rows?: number;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/inputs/Textarea/Textarea.svelte

@@ -1,99 +1,103 @@
 <script>
-  import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher } from "svelte";
 
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-  /**
-   * ID for &lt;textarea&gt; element
-   * @type {string}
-   */
-  export let id = "";
-  /**
-   * A prop to bind to for the entered value
-   * @type {string}
-   */
-  export let value = "";
-  /**
-   * A label to describe the &lt;textarea&gt; element (expected for accessibility)
-   * @type {string}
-   */
-  export let label = "Enter some text";
-  /**
-   * Visually hide the label
-   * @type {boolean}
-   */
-  export let hideLabel = false;
-  /**
-   * An optional description to help users know what to enter
-   * @type {string}
-   */
-  export let description = "";
-  /**
-   * The maximum number of characters that can be entered (optional)
-   * @type {number}
-   */
-  export let charLimit = null;
-  /**
-   * The height of the &lt;textarea&gt; element in rows
-   * @type {number}
-   */
-  export let rows = 8;
-  /**
-   * The width of the &lt;textarea&gt; element in characters
-   * @type {number}
-   */
-  export let width = 30;
+	/**
+	 * ID for &lt;textarea&gt; element
+	 * @type {string}
+	 */
+	export let id = "";
+	/**
+	 * A prop to bind to for the entered value
+	 * @type {string}
+	 */
+	export let value = "";
+	/**
+	 * A label to describe the &lt;textarea&gt; element (expected for accessibility)
+	 * @type {string}
+	 */
+	export let label = "Enter some text";
+	/**
+	 * Visually hide the label
+	 * @type {boolean}
+	 */
+	export let hideLabel = false;
+	/**
+	 * An optional description to help users know what to enter
+	 * @type {string}
+	 */
+	export let description = "";
+	/**
+	 * The maximum number of characters that can be entered (optional)
+	 * @type {number|null}
+	 */
+	export let charLimit = null;
+	/**
+	 * The height of the &lt;textarea&gt; element in rows
+	 * @type {number}
+	 */
+	export let rows = 8;
+	/**
+	 * The width of the &lt;textarea&gt; element in characters
+	 * @type {number}
+	 */
+	export let width = 30;
 
-  $: remaining = charLimit && value.length ? charLimit - value.length : charLimit || null;
+	$: remaining = charLimit && value.length ? charLimit - value.length : charLimit || null;
 </script>
 
 <div class="ons-field">
-  {#if label}
-    <label
-      class="ons-label ons-label--with-description"
-      class:ons-u-vh="{hideLabel}"
-      aria-describedby="{description ? `${id}-description-hint` : null}"
-      for="{id}">{label}</label
-    >
-  {/if}
-  {#if description}
-    <span id="{id}-description-hint" class="ons-label__description ons-input--with-description"
-      >{description}</span
-    >
-  {/if}
-  <textarea
-    id="{id}"
-    bind:value="{value}"
-    class="ons-input ons-input--textarea {Number.isInteger(width) ? `ons-input--w-${width}` : null}"
-    class:ons-js-char-limit-input="{charLimit}"
-    class:ons-input--limit-reached="{remaining === 0}"
-    name="{id}"
-    rows="{rows}"
-    maxlength="{charLimit}"
-    data-char-limit-ref="{id}-lim"
-    aria-describedby="textarea-char-limit-lim"></textarea>
-  {#if Number.isInteger(remaining)}
-    <span
-      id="textarea-char-limit-lim"
-      class="ons-input__limit ons-u-fs-s--b ons-u-mt-xs"
-      class:ons-input__limit--reached="{remaining === 0}"
-      data-charcount-singular="You have {remaining} character remaining"
-      data-charcount-plural="You have {remaining} characters remaining"
-      data-charcount-limit-singular=""
-      data-charcount-limit-plural=""
-      aria-live="{remaining === 0 ? 'assertive' : 'polite'}"
-    >
-      You have {remaining}
-      {remaining === 1 ? "character" : "characters"} remaining
-    </span>
-  {/if}
+	{#if label}
+		<label
+			class="ons-label ons-label--with-description"
+			class:ons-u-vh={hideLabel}
+			aria-describedby={description ? `${id}-description-hint` : null}
+			for={id}>{label}</label
+		>
+	{/if}
+	{#if description}
+		<span id="{id}-description-hint" class="ons-label__description ons-input--with-description"
+			>{description}</span
+		>
+	{/if}
+	<textarea
+		{id}
+		bind:value
+		class="ons-input ons-input--textarea {Number.isInteger(width) ? `ons-input--w-${width}` : null}"
+		class:ons-js-char-limit-input={charLimit}
+		class:ons-input--limit-reached={remaining === 0}
+		name={id}
+		{rows}
+		maxlength={charLimit}
+		data-char-limit-ref="{id}-lim"
+		aria-describedby="textarea-char-limit-lim"
+	></textarea>
+	{#if Number.isInteger(remaining)}
+		<span
+			id="textarea-char-limit-lim"
+			class="ons-input__limit ons-u-fs-s--b ons-u-mt-xs"
+			class:ons-input__limit--reached={remaining === 0}
+			data-charcount-singular="You have {remaining} character remaining"
+			data-charcount-plural="You have {remaining} characters remaining"
+			data-charcount-limit-singular=""
+			data-charcount-limit-plural=""
+			aria-live={remaining === 0 ? "assertive" : "polite"}
+		>
+			You have {remaining}
+			{remaining === 1 ? "character" : "characters"} remaining
+		</span>
+	{/if}
 </div>
 
 <style>
-  .ons-input--textarea {
-    background: var(--background, white);
-    border-color: currentColor;
-  }
-  .ons-input--textarea:focus {
-    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
-  }</style>
+	.ons-input--textarea {
+		background: var(--background, white);
+		border-color: currentColor;
+	}
+	.ons-input--textarea:focus {
+		box-shadow:
+			0 0 0 1px currentColor,
+			0 0 0 4px #fbc900;
+	}
+</style>

package/dist/inputs/Textarea/Textarea.svelte.d.ts

@@ -0,0 +1,37 @@
+/** @typedef {typeof __propDef.props}  TextareaProps */
+/** @typedef {typeof __propDef.events}  TextareaEvents */
+/** @typedef {typeof __propDef.slots}  TextareaSlots */
+export default class Textarea extends SvelteComponentTyped<{
+    id?: string | undefined;
+    width?: number | undefined;
+    label?: string | undefined;
+    value?: string | undefined;
+    hideLabel?: boolean | undefined;
+    description?: string | undefined;
+    charLimit?: number | null | undefined;
+    rows?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TextareaProps = typeof __propDef.props;
+export type TextareaEvents = typeof __propDef.events;
+export type TextareaSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        width?: number | undefined;
+        label?: string | undefined;
+        value?: string | undefined;
+        hideLabel?: boolean | undefined;
+        description?: string | undefined;
+        charLimit?: number | null | undefined;
+        rows?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/inputs/Textarea/docs/component.md

@@ -0,0 +1,16 @@
+A standard `<input>` element with Svelte bindings and events.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Input } from "@onsvisual/svelte-components";
+
+  // Bind the <input> value to a variable (reactive)
+  let value;
+
+  // Define your own function on change
+  const handleChange = (e) => console.log(e);
+</script>
+
+<Input bind:value on:change="{handleChange}" />
+```

package/dist/intro.mdx

@@ -0,0 +1,60 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Introduction" />
+
+# @onsvisual/svelte-components
+
+<p>
+  <a href="https://www.npmjs.com/package/@onsvisual/svelte-components">
+    <img
+      src="https://badge.fury.io/js/@onsvisual%2Fsvelte-components.svg"
+      alt="npm version"
+      style={{ display: "inline-block", margin: "0 5px 0 0" }}
+    />
+  </a>
+  <a href="https://github.com/onsvisual/svelte-components">
+    <img
+      src="https://badgen.net/badge/icon/GitHub?icon=github&label"
+      alt="GitHub"
+      style={{ display: "inline-block", margin: "0 5px 0 0" }}
+    />
+  </a>
+</p>
+
+A library of ONS-branded Svelte components for projects large and small.
+
+The components and styles in this library based on the [ONS Design System](https://service-manual.ons.gov.uk/design-system/), but with a number of tweaks and additions to make them suitable for a range of interactive data visualisation and data journalism projects.
+
+## Installing the components
+
+There are two ways to start a new project using these components.
+
+### 1. Use a ready-made template
+
+When you start a project from one of the following templates, @onsvisual/svelte-components will already be installed:
+
+- [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter)
+- [robo-article](https://github.com/ONSvisual/robo-article)
+- [robo-embed](https://github.com/ONSvisual/robo-embed)
+
+### 2. Start a new Svelte Kit project from scratch
+
+If you want to start from scratch, you can set up a [new Svelte Kit project](https://kit.svelte.dev/docs/creating-a-project), then run the following command.
+
+```bash
+npm install @onsvisual/svelte-components --save-dev
+```
+
+## Using the components
+
+Checkout the [guides](?path=/docs/guides-using-these-docs--page), or dive straight into the docs to start using components.
+
+{/* prettier-ignore */}
+```html
+<script>
+  import "@onsvisual/svelte-components/css/main.css";
+  import { Section } from "@onsvisual/svelte-components";
+</script>
+
+<Section title="Hello world!">This is my first ONS Svelte component.</Section>
+```

package/dist/js/menuOptions.js

@@ -0,0 +1,14 @@
+export default [
+	{ id: "E12000001", label: "North East", group: "England" },
+	{ id: "E12000002", label: "North West", group: "England" },
+	{ id: "E12000003", label: "Yorkshire and The Humber", group: "England" },
+	{ id: "E12000004", label: "East Midlands", group: "England" },
+	{ id: "E12000005", label: "West Midlands", group: "England" },
+	{ id: "E12000006", label: "East of England", group: "England" },
+	{ id: "E12000007", label: "London", group: "England" },
+	{ id: "E12000008", label: "South East", group: "England" },
+	{ id: "E12000009", label: "South West", group: "England" },
+	{ id: "N92000002", label: "Northern Ireland", group: "Northern Ireland" },
+	{ id: "S92000003", label: "Scotland", group: "Scotland" },
+	{ id: "W92000004", label: "Wales", group: "Wales" }
+];

package/dist/{@types/js → js}/utils.d.ts

@@ -6,12 +6,18 @@ export function formatDate(str: any, locale?: string, opts?: {
     month: string;
     day: string;
 }): string;
-export function format(val: any, dp?: any): any;
-export function formatter(dp?: any): {
+export function format(val: any, dp?: null): any;
+export function formatter(dp?: null): {
     (value: number): string;
     (value: number | bigint): string;
+    (value: number | bigint | Intl.StringNumericLiteral): string;
 };
 export function ascending(a: any, b: any): number;
 export function descending(a: any, b: any): number;
 export function sleep(ms?: number): Promise<any>;
 export function contrastColor(color: any): "black" | "white";
+export function lipsum(sentences?: number, offset?: number): string;
+export function matchMedia(query: any): MediaQueryList;
+export namespace matchMedia {
+    function hasMatchMedia(): boolean;
+}

package/dist/js/utils.js

@@ -1,74 +1,91 @@
 import parse from "parse-color";
 
 const randomString = () => {
-  return Math.random().toString(16).slice(2, 8);
+	return Math.random().toString(16).slice(2, 8);
 };
 
 export const slugify = (str, suffix = false) =>
-  typeof str === "string"
-    ? str
-        .toString()
-        .normalize("NFD")
-        .replace(/[\u0300-\u036f]/g, "")
-        .toLowerCase()
-        .trim()
-        .replace(/\s+/g, "-")
-        .replace(/[^\w-]+/g, "")
-        .replace(/--+/g, "-")
-        .concat(suffix ? `-${randomString()}` : "")
-    : randomString();
+	typeof str === "string"
+		? str
+				.toString()
+				.normalize("NFD")
+				.replace(/[\u0300-\u036f]/g, "")
+				.toLowerCase()
+				.trim()
+				.replace(/\s+/g, "-")
+				.replace(/[^\w-]+/g, "")
+				.replace(/--+/g, "-")
+				.concat(suffix ? `-${randomString()}` : "")
+		: randomString();
 
 export const isNumeric = (val) => isFinite(val) && val !== null;
 
 export const validDate = (str) => {
-  if (!str) return false;
-  const date = new Date(str);
-  // @ts-ignore
-  return !isNaN(date);
+	if (!str) return false;
+	const date = new Date(str);
+	// @ts-ignore
+	return !isNaN(date);
 };
 
 export const formatDate = (
-  str,
-  locale = "en-GB",
-  opts = { year: "numeric", month: "long", day: "2-digit" }
+	str,
+	locale = "en-GB",
+	opts = { year: "numeric", month: "long", day: "2-digit" }
 ) => {
-  const date = new Date(str);
-  // @ts-ignore
-  return date.toLocaleDateString(locale, opts);
+	const date = new Date(str);
+	// @ts-ignore
+	return date.toLocaleDateString(locale, opts);
 };
 
 export const format = (val, dp = null) => {
-  return Number.isInteger(dp)
-    ? val.toLocaleString("en-GB", {
-        minimumFractionDigits: dp,
-        maximumFractionDigits: dp,
-      })
-    : val.toLocaleString("en-GB");
+	return Number.isInteger(dp)
+		? val.toLocaleString("en-GB", {
+				minimumFractionDigits: dp,
+				maximumFractionDigits: dp
+			})
+		: val.toLocaleString("en-GB");
 };
 
 export const formatter = (dp = null) => {
-  return Number.isInteger(dp)
-    ? new Intl.NumberFormat("en-GB", {
-        minimumFractionDigits: dp,
-        maximumFractionDigits: dp,
-      }).format
-    : new Intl.NumberFormat("en-GB").format;
+	return Number.isInteger(dp)
+		? new Intl.NumberFormat("en-GB", {
+				minimumFractionDigits: dp,
+				maximumFractionDigits: dp
+			}).format
+		: new Intl.NumberFormat("en-GB").format;
 };
 
 export const ascending = (a, b) =>
-  a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+	a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
 
 export const descending = (a, b) =>
-  a == null || b == null ? NaN : b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
+	a == null || b == null ? NaN : b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
 
 export const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export const contrastColor = (color) => {
-  if (!color || typeof color !== "string") return "black";
-  const rgb = parse(color).rgb;
-  if (rgb) {
-    const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
-    return brightness > 125 ? "black" : "white";
-  }
-  return "black";
+	if (!color || typeof color !== "string") return "black";
+	const rgb = parse(color).rgb;
+	if (rgb) {
+		const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+		return brightness > 125 ? "black" : "white";
+	}
+	return "black";
 };
+
+export const lipsum = (sentences = 4, offset = 0) => {
+	const texts = [
+		"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+		"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+		"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+		"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+	];
+	const passage = [];
+	for (let i = 0; i < sentences; i++) {
+		passage.push(texts[(i + offset) % 4]);
+	}
+	return passage.join(" ");
+};
+
+export const matchMedia = (query) => window.matchMedia(query);
+matchMedia.hasMatchMedia = () => typeof window.matchMedia === "function";

package/dist/{@types/js → js}/withParams.d.ts

@@ -1,15 +1,9 @@
 export function withSource(source: object, otherOptions?: object): {
-    parameters: {
-        docs: any;
-    };
+    docs: any;
 };
 export function withStoryDocs(storyDocs: string, otherOptions?: object): {
-    parameters: {
-        docs: any;
-    };
+    docs: any;
 };
 export function withComponentDocs(componentDocs: string, otherOptions?: object): {
-    parameters: {
-        docs: any;
-    };
+    docs: any;
 };

package/dist/js/withParams.js

@@ -5,14 +5,13 @@
  * @returns props object including parameters
  */
 export const withSource = (source, otherOptions = {}) => {
-  const language = Object.keys(source)[0];
-  const code = source[language];
-  const docs = {
-    ...otherOptions?.parameters?.docs,
-    source: { code, language },
-  };
-  const parameters = { docs };
-  return { parameters };
+	const language = Object.keys(source)[0];
+	const code = source[language];
+	const docs = {
+		...otherOptions?.parameters?.docs,
+		source: { code, language }
+	};
+	return { docs };
 };
 
 /**
@@ -22,12 +21,11 @@ export const withSource = (source, otherOptions = {}) => {
  * @returns props object including parameters
  */
 export const withStoryDocs = (storyDocs, otherOptions = {}) => {
-  const docs = {
-    ...otherOptions?.parameters?.docs,
-    description: { story: storyDocs },
-  };
-  const parameters = { docs };
-  return { parameters };
+	const docs = {
+		...otherOptions?.parameters?.docs,
+		description: { story: storyDocs }
+	};
+	return { docs };
 };
 
 /**
@@ -37,10 +35,9 @@ export const withStoryDocs = (storyDocs, otherOptions = {}) => {
  * @returns props object including parameters
  */
 export const withComponentDocs = (componentDocs, otherOptions = {}) => {
-  const docs = {
-    ...otherOptions?.parameters?.docs,
-    description: { component: componentDocs },
-  };
-  const parameters = { docs };
-  return { parameters };
+	const docs = {
+		...otherOptions?.parameters?.docs,
+		description: { component: componentDocs }
+	};
+	return { docs };
 };

package/dist/layout/Accordion/Accordion.stories.svelte

@@ -0,0 +1,30 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Accordion from "./Accordion.svelte";
+	import AccordionItem from "./AccordionItem.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Accordion",
+		component: Accordion,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Accordion {...args}>
+		<AccordionItem title="First item">
+			<p>Contents of first item.</p>
+		</AccordionItem>
+		<AccordionItem title="Second item">
+			<p>Contents of second item.</p>
+		</AccordionItem>
+	</Accordion>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />
+
+<Story name="With 'show all' toggle" args={{ showToggle: true }} {template} />