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

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

@@ -2,15 +2,8 @@
 /** @typedef {typeof __propDef.events}  DropdownEvents */
 /** @typedef {typeof __propDef.slots}  DropdownSlots */
 export default class Dropdown extends SvelteComponentTyped<{
-    id?: string;
-    label?: string;
-    value?: any;
-    hideLabel?: boolean;
-    placeholder?: string;
-    options?: any[];
+    [x: string]: never;
 }, {
-    change: CustomEvent<any>;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
@@ -20,16 +13,9 @@ export type DropdownSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string;
-        label?: string;
-        value?: object;
-        hideLabel?: boolean;
-        placeholder?: string;
-        options?: any[];
+        [x: string]: never;
     };
     events: {
-        change: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/inputs/Dropdown/Dropdown.svelte

@@ -1,62 +1,56 @@
 <script>
-  import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher } from "svelte";
 
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-  /**
-   * Unique id for the &lt;select&gt; element
-   * @type {string}
-   */
-  export let id = "";
-  /**
-   * A label to describe the &lt;select&gt; element (expected for accessibility)
-   * @type {string}
-   */
-  export let label = "";
-  /**
-   * Visually hide the label
-   * @type {boolean}
-   */
-  export let hideLabel = false;
-  /**
-   * An optional placeholder text
-   * @type {string}
-   */
-  export let placeholder = "Select an option";
-  /**
-   * A prop to bind to for the selected value
-   * @type {object}
-   */
-  export let value = null;
-  /**
-   * An array of options, formatted {id, label}
-   * @type {array}
-   */
-  export let options = [];
+	/**
+	 * Unique id for the &lt;select&gt; element
+	 * @type {string}
+	 */
+	export let id = "";
+	/**
+	 * A label to describe the &lt;select&gt; element (expected for accessibility)
+	 * @type {string}
+	 */
+	export let label = "";
+	/**
+	 * Visually hide the label
+	 * @type {boolean}
+	 */
+	export let hideLabel = false;
+	/**
+	 * An optional placeholder text
+	 * @type {string}
+	 */
+	export let placeholder = "Select an option";
+	/**
+	 * A prop to bind to for the selected value
+	 * @type {object|null}
+	 */
+	export let value = null;
+	/**
+	 * An array of options, formatted {id, label}
+	 * @type {object[]}
+	 */
+	export let options = [];
 </script>
 
 <div class="ons-field">
-  {#if label}
-    <label class="ons-label" for="{id}" class:ons-u-vh="{hideLabel}">{label}</label>
-  {/if}
-  <select
-    id="{id}"
-    name="{id}"
-    class="ons-input ons-input--select"
-    bind:value="{value}"
-    on:change="{(e) => dispatch('change', e)}"
-  >
-    {#if placeholder}
-      <option value="{null}" selected disabled>{placeholder}</option>
-    {/if}
-    {#each options as option}
-      <option value="{option}">{option?.label || option}</option>
-    {/each}
-  </select>
+	{#if label}
+		<label class="ons-label" for={id} class:ons-u-vh={hideLabel}>{label}</label>
+	{/if}
+	<select
+		{id}
+		name={id}
+		class="ons-input ons-input--select"
+		bind:value
+		on:change={(e) => dispatch("change", e)}
+	>
+		{#if placeholder}
+			<option value={null} selected disabled>{placeholder}</option>
+		{/if}
+		{#each options as option}
+			<option value={option}>{option?.label || option}</option>
+		{/each}
+	</select>
 </div>
-
-<style>
-  .ons-input--select {
-    border-color: currentColor;
-    background-color: transparent;
-  }</style>

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

@@ -0,0 +1,37 @@
+/** @typedef {typeof __propDef.props}  DropdownProps */
+/** @typedef {typeof __propDef.events}  DropdownEvents */
+/** @typedef {typeof __propDef.slots}  DropdownSlots */
+export default class Dropdown extends SvelteComponentTyped<{
+    id?: string | undefined;
+    label?: string | undefined;
+    value?: object | null | undefined;
+    hideLabel?: boolean | undefined;
+    placeholder?: string | undefined;
+    options?: object[] | undefined;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DropdownProps = typeof __propDef.props;
+export type DropdownEvents = typeof __propDef.events;
+export type DropdownSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        label?: string | undefined;
+        value?: object | null | undefined;
+        hideLabel?: boolean | undefined;
+        placeholder?: string | undefined;
+        options?: object[] | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,22 @@
+A standard `<select>` component with Svelte bindings and events.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Dropdown } from "@onsvisual/svelte-components";
+
+  const values = [
+    { id: "1", label: "one" },
+    { id: "2", label: "two" },
+    { id: "3", label: "three" },
+  ];
+
+  // Bind the <select> value to a variable (reactive)
+  let value;
+
+  // Define your own function on change
+  const handleChange = (e) => console.log(e);
+</script>
+
+<Dropdown {options} bind:value on:change="{handleChange}" />
+```

package/dist/inputs/ErrorPanel/ErrorPanel.stories.svelte

@@ -0,0 +1,25 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import ErrorPanel from "./ErrorPanel.svelte";
+	import Input from "../Input/Input.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/ErrorPanel",
+		component: ErrorPanel,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<ErrorPanel {...args}>
+			<Input />
+		</ErrorPanel>
+	</div>
+{/snippet}
+
+<Story name="Default" args={{ message: "You entered the wrong text" }} {template} />

package/dist/inputs/ErrorPanel/ErrorPanel.stories.svelte.d.ts

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

package/dist/inputs/ErrorPanel/ErrorPanel.svelte

@@ -1,35 +1,19 @@
 <script>
-  /**
-   * Set an error message
-   * @type {string}
-   */
-  export let message = "";
+	/**
+	 * Set an error message
+	 * @type {string}
+	 */
+	export let message = "";
 </script>
 
 <div class="ons-panel ons-panel--error ons-panel--no-title" id="number-of-employees-error">
-  <span class="ons-panel__assistive-text ons-u-vh">Error: </span>
-  <div class="ons-panel__body">
-    {#if message}
-      <p class="ons-panel__error">
-        <strong>{message}</strong>
-      </p>
-    {/if}
-    <slot />
-  </div>
+	<span class="ons-panel__assistive-text ons-u-vh">Error: </span>
+	<div class="ons-panel__body">
+		{#if message}
+			<p class="ons-panel__error">
+				<strong>{message}</strong>
+			</p>
+		{/if}
+		<slot />
+	</div>
 </div>
-
-<style>
-  .ons-panel {
-    color: rgb(34, 34, 34);
-  }
-  :global(.ons-panel__body a) {
-    color: #206095 !important;
-  }
-  :global(.ons-panel__body a:hover) {
-    color: rgb(0, 60, 87) !important;
-    -webkit-text-decoration: underline solid rgb(0, 60, 87) 2px !important;
-            text-decoration: underline solid rgb(0, 60, 87) 2px !important;
-  }
-  :global(.ons-panel__body .ons-input) {
-    background: white !important;
-  }</style>

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

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

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

@@ -0,0 +1,14 @@
+Use this component to show validation errors by wrapping form inputs and fieldsets.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/error).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { ErrorPanel, Input } from "@onsvisual/svelte-components";
+</script>
+
+<ErrorPanel message="You enterered the wrong text">
+  <Input/>
+</ErrorPanel>
+```

package/dist/inputs/ErrorSummary/ErrorSummary.stories.svelte

@@ -0,0 +1,34 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import ErrorSummary from "./ErrorSummary.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/ErrorSummary",
+		component: ErrorSummary,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+
+	const items = [
+		{ label: "First issue description.", href: "#0" },
+		{ label: "Second issue description." }
+	];
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<ErrorSummary {...args} />
+	</div>
+{/snippet}
+
+<Story name="Default" args={{ title: "There are 2 problems with your answer", items }} {template} />
+
+<Story name="Error defined as text" asChild parameters={withStoryDocs(exampleDocs)}>
+	<div style:padding="12px">
+		<ErrorSummary title="There was an error">This is a text to describe the error.</ErrorSummary>
+	</div>
+</Story>

package/dist/inputs/ErrorSummary/ErrorSummary.stories.svelte.d.ts

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

package/dist/inputs/ErrorSummary/ErrorSummary.svelte

@@ -1,40 +1,42 @@
 <script>
-  import List from "../../layout/List/List.svelte";
+	import List from "../../layout/List/List.svelte";
 
-  /**
-   * Defines the title of the error
-   * @type {string}
-   */
-  export let title = "";
-  /**
-   * Define an array of errors/issues in the format {label, href?}
-   */
-  export let items = [];
+	/**
+	 * Defines the title of the error
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * Define an array of errors/issues in the format {label, href?}
+	 * @type {object[]}
+	 */
+	export let items = [];
 </script>
 
 <div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error">
-  <div class="ons-panel__header">
-    <h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">{title}</h2>
-  </div>
-  <div class="ons-panel__body">
-    {#if Array.isArray(items)}
-      <List mode="number">
-        {#each items as item}
-          <li>
-            {#if item.href}
-              <a href="{item.href}">{item.label}</a>
-            {:else}
-              {item.label}
-            {/if}
-          </li>
-        {/each}
-      </List>
-    {/if}
-    <slot />
-  </div>
+	<div class="ons-panel__header">
+		<h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">{title}</h2>
+	</div>
+	<div class="ons-panel__body">
+		{#if Array.isArray(items)}
+			<List mode="number">
+				{#each items as item}
+					<li>
+						{#if item.href}
+							<a href={item.href}>{item.label}</a>
+						{:else}
+							{item.label}
+						{/if}
+					</li>
+				{/each}
+			</List>
+		{/if}
+		<slot />
+	</div>
 </div>
 
 <style>
-  .ons-panel {
-    color: rgb(34, 34, 34);
-  }</style>
+	.ons-panel {
+		color: rgb(34, 34, 34);
+	}
+</style>

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  ErrorSummaryEvents */
 /** @typedef {typeof __propDef.slots}  ErrorSummarySlots */
 export default class ErrorSummary extends SvelteComponentTyped<{
-    title?: string;
-    items?: any[];
+    title?: string | undefined;
+    items?: object[] | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -16,8 +16,8 @@ export type ErrorSummarySlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        title?: string;
-        items?: any[];
+        title?: string | undefined;
+        items?: object[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,17 @@
+A panel to summarise errors on a form/input. The errors can be defined in an `items` array, or as plain text/html within the component.
+
+Based on [this ONS Design System pattern](https://service-manual.ons.gov.uk/design-system/patterns/error-status-pages).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { ErrorSummary } from "@onsvisual/svelte-components";
+
+  const items = [
+    { label: "First issue description.", href: "#0" },
+    { label: "Second issue description." },
+  ];
+</script>
+
+<ErrorSummary title="There are 2 problems with your answer" {items} />
+```

package/dist/inputs/ErrorSummary/docs/example.md

@@ -0,0 +1,12 @@
+In this example, the `items` array is not used, and the error is described using text/html.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { ErrorSummary } from "@onsvisual/svelte-components";
+</script>
+
+<ErrorSummary title="There was an error">
+  This is a text to describe the error.
+</ErrorSummary>
+```

package/dist/inputs/Input/Input.stories.svelte

@@ -0,0 +1,73 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Input from "./Input.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Input",
+		component: Input,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<Input {...args} />
+	</div>
+{/snippet}
+
+<Story
+	name="Default"
+	args={{
+		id: "text",
+		label: "Enter some text"
+	}}
+	{template}
+/>
+
+<Story
+	name="With hidden label"
+	args={{
+		id: "text",
+		label: "Enter some text",
+		hideLabel: true
+	}}
+	{template}
+/>
+
+<Story
+	name="With description"
+	args={{
+		id: "text",
+		label: "Enter some text",
+		description: "This is a hint on what to enter"
+	}}
+	{template}
+/>
+
+<Story
+	name="Numeric with prefix"
+	args={{
+		id: "text",
+		label: "Enter some text",
+		prefix: "£",
+		unitLabel: "British pounds sterling",
+		numeric: true,
+		width: 5,
+		charLimit: 8
+	}}
+	{template}
+/>
+
+<Story
+	name="Input error"
+	args={{
+		id: "text",
+		label: "Enter some text",
+		error: true
+	}}
+	{template}
+/>

package/dist/inputs/Input/Input.stories.svelte.d.ts

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