@onsvisual/svelte-components 1.0.19 → 1.0.21

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://badge.fury.io/js/@onsvisual%2Fsvelte-components.svg)](https://www.npmjs.com/package/@onsvisual/svelte-components)
 
-A library of ONS Svelte components for projects large and small. You can find documentation and examples of how to use these components on the [Storybook pages](https://onsvisual.github.io/svelte-components).
+A library of ONS Svelte components for projects large and small. You can find documentation and examples of how to use these components on the [Storybook pages](https://onsdigital.github.io/svelte-components).
 
 This component library is inspired by Reuters' fantastic [graphics-components](https://github.com/reuters-graphics/graphics-components) library. The components are adapted from the [ONS Design System](https://service-manual.ons.gov.uk/design-system/).
 

package/dist/datavis/DataCard/DataCard.svelte

@@ -4,24 +4,24 @@
 
 	/**
 	 * Title of card
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Optional: Subtitle of card
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let subtitle = "";
+	export let subtitle = null;
 	/**
 	 * Optional: URL link for card title
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let href = "";
+	export let href = null;
 	/**
 	 * Big number (expects a pre-formatted text string)
-	 * @type {string|number}
+	 * @type {string|number|null}
 	 */
-	export let value = "";
+	export let value = null;
 	/**
 	 * Mode for the data tile
 	 * @type {"number"|"sparkline"|"bar"}
@@ -29,9 +29,9 @@
 	export let mode = "number";
 	/**
 	 * Text caption describing the number
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let caption = "";
+	export let caption = null;
 	/**
 	 * An array of data (required for charts)
 	 * @type {object[]|null}
@@ -39,14 +39,14 @@
 	export let data = null;
 	/**
 	 * Text describing the source of the data
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let source = "";
+	export let source = null;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <Card {title} {href} mode="featured" {cls}>

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

@@ -2,15 +2,15 @@
 /** @typedef {typeof __propDef.events}  DataCardEvents */
 /** @typedef {typeof __propDef.slots}  DataCardSlots */
 export default class DataCard extends SvelteComponentTyped<{
-    cls?: string | undefined;
-    caption?: string | undefined;
+    cls?: string | null | undefined;
+    caption?: string | null | undefined;
     data?: object[] | null | undefined;
-    source?: string | undefined;
-    title?: string | undefined;
-    href?: string | undefined;
+    source?: string | null | undefined;
+    title?: string | null | undefined;
+    href?: string | null | undefined;
     mode?: "number" | "sparkline" | "bar" | undefined;
-    value?: string | number | undefined;
-    subtitle?: string | undefined;
+    value?: string | number | null | undefined;
+    subtitle?: string | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -21,15 +21,15 @@ export type DataCardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
-        caption?: string | undefined;
+        cls?: string | null | undefined;
+        caption?: string | null | undefined;
         data?: object[] | null | undefined;
-        source?: string | undefined;
-        title?: string | undefined;
-        href?: string | undefined;
+        source?: string | null | undefined;
+        title?: string | null | undefined;
+        href?: string | null | undefined;
         mode?: "number" | "sparkline" | "bar" | undefined;
-        value?: string | number | undefined;
-        subtitle?: string | undefined;
+        value?: string | number | null | undefined;
+        subtitle?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/datavis/Table/Table.svelte

@@ -3,9 +3,9 @@
 
 	/**
 	 * An optional title for the table
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Make the table smaller/more compact
 	 * @type {boolean}
@@ -46,9 +46,9 @@
 	let sort = columns.map(() => "none");
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 
 	$: formatters = columns.map((d) => d.formatter || formatter(d.dp));
 </script>

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

@@ -2,10 +2,10 @@
 /** @typedef {typeof __propDef.events}  TableEvents */
 /** @typedef {typeof __propDef.slots}  TableSlots */
 export default class Table extends SvelteComponentTyped<{
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     height?: number | "auto" | undefined;
     data?: object[] | undefined;
-    title?: string | undefined;
+    title?: string | null | undefined;
     compact?: boolean | undefined;
     sortable?: boolean | undefined;
     responsive?: boolean | undefined;
@@ -21,10 +21,10 @@ export type TableSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         height?: number | "auto" | undefined;
         data?: object[] | undefined;
-        title?: string | undefined;
+        title?: string | null | undefined;
         compact?: boolean | undefined;
         sortable?: boolean | undefined;
         responsive?: boolean | undefined;

package/dist/decorators/Blockquote/Blockquote.svelte

@@ -1,9 +1,9 @@
 <script>
 	/**
 	 * Attribution for the quote.
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let attribution = "";
+	export let attribution = null;
 </script>
 
 <blockquote class="ons-quote">

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

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  BlockquoteEvents */
 /** @typedef {typeof __propDef.slots}  BlockquoteSlots */
 export default class Blockquote extends SvelteComponentTyped<{
-    attribution?: string | undefined;
+    attribution?: string | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -15,7 +15,7 @@ export type BlockquoteSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        attribution?: string | undefined;
+        attribution?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/decorators/Divider/Divider.svelte

@@ -28,9 +28,9 @@
 	export let marginBottom = true;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 </script>
 
 <Container {width} {marginTop} {marginBottom} {cls}>

package/dist/decorators/Divider/Divider.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  DividerEvents */
 /** @typedef {typeof __propDef.slots}  DividerSlots */
 export default class Divider extends SvelteComponentTyped<{
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
@@ -18,7 +18,7 @@ export type DividerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;

package/dist/decorators/Em/Em.svelte

@@ -13,9 +13,9 @@
 	export let mode = "default";
 	/**
 	 * Override the font size of the surrounding text
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let fontSize = "";
+	export let fontSize = null;
 	/**
 	 * Don't break text across lines
 	 * @type {boolean}

package/dist/decorators/Em/Em.svelte.d.ts

@@ -4,7 +4,7 @@
 export default class Em extends SvelteComponentTyped<{
     mode?: "default" | "badge" | undefined;
     color?: string | undefined;
-    fontSize?: string | undefined;
+    fontSize?: string | null | undefined;
     nowrap?: boolean | undefined;
     ariaLabel?: string | null | undefined;
 }, {
@@ -21,7 +21,7 @@ declare const __propDef: {
     props: {
         mode?: "default" | "badge" | undefined;
         color?: string | undefined;
-        fontSize?: string | undefined;
+        fontSize?: string | null | undefined;
         nowrap?: boolean | undefined;
         ariaLabel?: string | null | undefined;
     };

package/dist/inputs/Button/Button.svelte

@@ -1,125 +1,125 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-  import Icon from "../../decorators/Icon/Icon.svelte";
+	import { createEventDispatcher } from "svelte";
+	import Icon from "../../decorators/Icon/Icon.svelte";
 
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-  /**
-   * Type of button
-   * @type {"button"|"sumbit"|"reset"}
-   */
-  export let type = "button";
-  /**
-   * Style variant of button
-   * @type {"primary"|"secondary"|"ghost"}
-   */
-  export let variant = "primary";
-  /**
-   * Href of button (renders button as a link)
-   * @type {string}
-   */
-  export let href = "";
-  /**
-   * Make button smaller
-   * @type {boolean}
-   */
-  export let small = false;
-  /**
-   * Icon on button, eg. "arrow", "search"
-   * @type {"arrow"|"external"|"signout"|"print"|"download"|"tick"|"search"|null}
-   */
-  export let icon = null;
-  /**
-   * Position of icon
-   * @type {"before"|"after"}
-   */
-  export let iconPosition = "before";
-  /**
-   * Show button as disabled
-   * @type {boolean}
-   */
-  export let disabled = false;
-  /**
-   * Visually hide the button text (for icon-only buttons)
-   * @type {boolean}
-   */
-  export let hideLabel = false;
-  /**
-   * aria label for button
-   * @type {string}
-   */
-  export let arialabel = "";
-  /**
-   * filename if link is used for a file download
-   * @type {string|null}
-   */
-  export let download = null;
-  /**
-   * Optional: Set an additional CSS class for the component
-   * @type {string}
-   */
-  export let cls = "";
+	/**
+	 * Type of button
+	 * @type {"button"|"sumbit"|"reset"}
+	 */
+	export let type = "button";
+	/**
+	 * Style variant of button
+	 * @type {"primary"|"secondary"|"ghost"}
+	 */
+	export let variant = "primary";
+	/**
+	 * Href of button (renders button as a link)
+	 * @type {string|null}
+	 */
+	export let href = null;
+	/**
+	 * Make button smaller
+	 * @type {boolean}
+	 */
+	export let small = false;
+	/**
+	 * Icon on button, eg. "arrow", "search"
+	 * @type {"arrow"|"external"|"signout"|"print"|"download"|"tick"|"search"|null}
+	 */
+	export let icon = null;
+	/**
+	 * Position of icon
+	 * @type {"before"|"after"}
+	 */
+	export let iconPosition = "before";
+	/**
+	 * Show button as disabled
+	 * @type {boolean}
+	 */
+	export let disabled = false;
+	/**
+	 * Visually hide the button text (for icon-only buttons)
+	 * @type {boolean}
+	 */
+	export let hideLabel = false;
+	/**
+	 * aria label for button
+	 * @type {string|null}
+	 */
+	export let arialabel = null;
+	/**
+	 * filename if link is used for a file download
+	 * @type {string|null}
+	 */
+	export let download = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
 </script>
 
 {#if href}
-  <a
-    href={!disabled ? href : null}
-    role="button"
-    {download}
-    class="ons-btn ons-btn--link ons-js-submit-btn {cls}"
-    class:ons-btn--small={small}
-    class:ons-btn--secondary={variant === "secondary"}
-    class:ons-btn--ghost={variant === "ghost"}
-    class:ons-btn--disabled={disabled}
-    on:click={(e) => dispatch("click", e)}
-    aria-label={arialabel}
-  >
-    <span class="ons-btn__inner">
-      {#if iconPosition === "before"}
-        <slot name="icon">
-          {#if icon}
-            <Icon type={icon} marginRight={!hideLabel} />
-          {/if}
-        </slot>
-      {/if}
-      <span class="ons-btn__text" class:ons-u-vh={hideLabel}><slot /></span>
-      {#if iconPosition === "after"}
-        <slot name="icon">
-          {#if icon}
-            <Icon type={icon} marginLeft={!hideLabel} />
-          {/if}
-        </slot>
-      {/if}
-    </span>
-  </a>
+	<a
+		href={!disabled ? href : null}
+		role="button"
+		{download}
+		class="ons-btn ons-btn--link ons-js-submit-btn {cls}"
+		class:ons-btn--small={small}
+		class:ons-btn--secondary={variant === "secondary"}
+		class:ons-btn--ghost={variant === "ghost"}
+		class:ons-btn--disabled={disabled}
+		on:click={(e) => dispatch("click", e)}
+		aria-label={arialabel}
+	>
+		<span class="ons-btn__inner">
+			{#if iconPosition === "before"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginRight={!hideLabel} />
+					{/if}
+				</slot>
+			{/if}
+			<span class="ons-btn__text" class:ons-u-vh={hideLabel}><slot /></span>
+			{#if iconPosition === "after"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginLeft={!hideLabel} />
+					{/if}
+				</slot>
+			{/if}
+		</span>
+	</a>
 {:else}
-  <button
-    {type}
-    class="ons-btn {cls}"
-    class:ons-btn--small={small}
-    class:ons-btn--secondary={variant === "secondary"}
-    class:ons-btn--ghost={variant === "ghost"}
-    class:ons-btn--disabled={disabled}
-    {disabled}
-    on:click={(e) => dispatch("click", e)}
-    aria-label={arialabel}
-  >
-    <span class="ons-btn__inner">
-      {#if iconPosition === "before"}
-        <slot name="icon">
-          {#if icon}
-            <Icon type={icon} marginRight={!hideLabel} />
-          {/if}
-        </slot>
-      {/if}
-      <span class="ons-btn__text" class:ons-u-vh={hideLabel}><slot /></span>
-      {#if iconPosition === "after"}
-        <slot name="icon">
-          {#if icon}
-            <Icon type={icon} marginLeft={!hideLabel} />
-          {/if}
-        </slot>
-      {/if}
-    </span>
-  </button>
+	<button
+		{type}
+		class="ons-btn {cls}"
+		class:ons-btn--small={small}
+		class:ons-btn--secondary={variant === "secondary"}
+		class:ons-btn--ghost={variant === "ghost"}
+		class:ons-btn--disabled={disabled}
+		{disabled}
+		on:click={(e) => dispatch("click", e)}
+		aria-label={arialabel}
+	>
+		<span class="ons-btn__inner">
+			{#if iconPosition === "before"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginRight={!hideLabel} />
+					{/if}
+				</slot>
+			{/if}
+			<span class="ons-btn__text" class:ons-u-vh={hideLabel}><slot /></span>
+			{#if iconPosition === "after"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginLeft={!hideLabel} />
+					{/if}
+				</slot>
+			{/if}
+		</span>
+	</button>
 {/if}

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

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  ButtonEvents */
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
 export default class Button extends SvelteComponentTyped<{
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     small?: boolean | undefined;
-    href?: string | undefined;
+    href?: string | null | undefined;
     download?: string | null | undefined;
     type?: "button" | "reset" | "sumbit" | undefined;
     variant?: "secondary" | "primary" | "ghost" | undefined;
@@ -12,7 +12,7 @@ export default class Button extends SvelteComponentTyped<{
     iconPosition?: "before" | "after" | undefined;
     disabled?: boolean | undefined;
     hideLabel?: boolean | undefined;
-    arialabel?: string | undefined;
+    arialabel?: string | null | undefined;
 }, {
     click: CustomEvent<any>;
 } & {
@@ -28,9 +28,9 @@ export type ButtonSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         small?: boolean | undefined;
-        href?: string | undefined;
+        href?: string | null | undefined;
         download?: string | null | undefined;
         type?: "button" | "reset" | "sumbit" | undefined;
         variant?: "secondary" | "primary" | "ghost" | undefined;
@@ -38,7 +38,7 @@ declare const __propDef: {
         iconPosition?: "before" | "after" | undefined;
         disabled?: boolean | undefined;
         hideLabel?: boolean | undefined;
-        arialabel?: string | undefined;
+        arialabel?: string | null | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/dist/inputs/Checkbox/Checkbox.svelte

@@ -15,9 +15,9 @@
 	export let label;
 	/**
 	 * Optional: Extended description for element
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let description = "";
+	export let description = null;
 	/**
 	 * Binding for checked state of input
 	 * @type {boolean}
@@ -35,9 +35,9 @@
 	export let item = { id, label, description, checked, disabled };
 	/**
 	 * Optional: Name of checkbox group
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let groupName = "";
+	export let groupName = null;
 	/**
 	 * Binding for checked state of input
 	 * @type {object[]|null}
@@ -55,9 +55,9 @@
 	export let compact = false;
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 
 	const checkboxes = getContext("checkboxes");
 

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

@@ -4,15 +4,15 @@
 export default class Checkbox extends SvelteComponentTyped<{
     id: string;
     label: string;
-    cls?: string | undefined;
+    cls?: string | null | undefined;
     group?: object[] | null | undefined;
     compact?: boolean | undefined;
-    description?: string | undefined;
+    description?: string | null | undefined;
     variant?: "default" | "ghost" | undefined;
     disabled?: boolean | undefined;
     checked?: boolean | undefined;
     item?: object | undefined;
-    groupName?: string | undefined;
+    groupName?: string | null | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -27,15 +27,15 @@ declare const __propDef: {
     props: {
         id: string;
         label: string;
-        cls?: string | undefined;
+        cls?: string | null | undefined;
         group?: object[] | null | undefined;
         compact?: boolean | undefined;
-        description?: string | undefined;
+        description?: string | null | undefined;
         variant?: "default" | "ghost" | undefined;
         disabled?: boolean | undefined;
         checked?: boolean | undefined;
         item?: object | undefined;
-        groupName?: string | undefined;
+        groupName?: string | null | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/dist/inputs/Checkboxes/Checkboxes.svelte

@@ -5,9 +5,9 @@
 
 	/**
 	 * Title/legend for parent <fieldset>
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let title = "";
+	export let title = null;
 	/**
 	 * Visually hide the title/legend
 	 * @type {boolean}
@@ -15,9 +15,9 @@
 	export let hideTitle = false;
 	/**
 	 * Descriptive "how to" label for inputs
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let label = "";
+	export let label = null;
 	/** Optional: Define the checkboxes as an array of {id, label, checked, description?}
 	 * @type {object[]|null}
 	 */
@@ -32,9 +32,9 @@
 	export let value = [];
 	/**
 	 * Optional: Set an additional CSS class for the component
-	 * @type {string}
+	 * @type {string|null}
 	 */
-	export let cls = "";
+	export let cls = null;
 
 	const checkboxes = writable([]);
 	setContext("checkboxes", checkboxes);