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

package/dist/inputs/Radios/Radios.svelte

@@ -1,46 +1,46 @@
 <script>
-  import Radio from "./Radio.svelte";
+	import Radio from "./Radio.svelte";
 
-  /**
-   * Unique ID for radio group (required)
-   * @type {string}
-   */
-  export let id = "name";
-  /**
-   * Label for grouped inputs
-   * @type {string}
-   */
-  export let label = "";
-  /**
-   * Binding for ID of selected option
-   * @type {string}
-   */
-  export let value = null;
-  /** (Optional) Define the radios as an array of {id, label, description?}
-   * @type {array}
-   */
-  export let items = [];
-  /**
-   * Compact mode (no border)
-   * @type {boolean}
-   */
-  export let compact = false;
+	/**
+	 * Unique ID for radio group (required)
+	 * @type {string}
+	 */
+	export let id = "name";
+	/**
+	 * Label for grouped inputs
+	 * @type {string}
+	 */
+	export let label = "";
+	/**
+	 * Binding for ID of selected option
+	 * @type {string|null}
+	 */
+	export let value = null;
+	/** Optional: Define the radios as an array of {id, label, description?}
+	 * @type {object[]}
+	 */
+	export let items = [];
+	/**
+	 * Compact mode (no border)
+	 * @type {boolean}
+	 */
+	export let compact = false;
 </script>
 
 {#if label}
-  <p class="ons-radios__label">{label}</p>
+	<p class="ons-radios__label">{label}</p>
 {/if}
 <div class="ons-radios__items">
-  <slot />
-  {#each items as item, i}
-    <Radio
-      id="{item.id}"
-      label="{item.label}"
-      description="{item.description}"
-      groupId="{id}"
-      compact="{compact}"
-      bind:value="{value}"
-      on:change
-    />
-  {/each}
+	<slot />
+	{#each items as item}
+		<Radio
+			id={item.id}
+			label={item.label}
+			description={item.description}
+			groupId={id}
+			{compact}
+			bind:value
+			on:change
+		/>
+	{/each}
 </div>

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

@@ -2,11 +2,11 @@
 /** @typedef {typeof __propDef.events}  RadiosEvents */
 /** @typedef {typeof __propDef.slots}  RadiosSlots */
 export default class Radios extends SvelteComponentTyped<{
-    id?: string;
-    label?: string;
-    compact?: boolean;
-    items?: any[];
-    value?: string;
+    id?: string | undefined;
+    label?: string | undefined;
+    compact?: boolean | undefined;
+    items?: object[] | undefined;
+    value?: string | null | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -21,11 +21,11 @@ export type RadiosSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string;
-        label?: string;
-        compact?: boolean;
-        items?: any[];
-        value?: string;
+        id?: string | undefined;
+        label?: string | undefined;
+        compact?: boolean | undefined;
+        items?: object[] | undefined;
+        value?: string | null | undefined;
     };
     events: {
         change: CustomEvent<any>;

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

@@ -0,0 +1,24 @@
+A component for defining a group of radio inputs, where the selected item id can be bound to a Svelte variable.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/radios).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Radios } from "@onsvisual/svelte-components";
+
+  let items = [
+    {
+      id: "house",
+      label: "House or bungalow",
+      description: "Includes terraced, semi-detached and detached homes.",
+    },
+    { id: "flat", label: "Flat, maisonette or apartment" },
+    { id: "mobile", label: "Caravan or other mobile or temporary structure" },
+  ];
+
+  let selected; // A binding for the selected item ID
+</script>
+
+<Radios {items} bind:value={selected} label="Select one">
+```

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

@@ -0,0 +1,21 @@
+In this example, the radios are defined explicitly rather than via an array.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Radio, Radios } from "@onsvisual/svelte-components";
+
+  let selected; // A binding for the selected item ID
+</script>
+
+<Radios label="Select one">
+  <Radio
+    groupId="radios"
+    id="house"
+    label="House or bungalow"
+    description="Includes terraced, semi-detached and detached homes."
+  />
+  <Radio groupId="radios" id="flat" label="Flat, maisonette or apartment" />
+  <Radio groupId="radios" id="mobile" label="Caravan or other mobile or temporary structure" />
+</Radios>
+```

package/dist/inputs/Select/Select.stories.svelte

@@ -0,0 +1,61 @@
+<script module>
+	// @ts-ignore
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Select from "./Select.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import options from "../../js/menuOptions.js";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Select",
+		component: Select,
+		tags: ["autodocs"],
+		argTypes: {
+			mode: {
+				options: ["search", "dropdown"],
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="0 0 200px">
+		<Select {...args} />
+	</div>
+{/snippet}
+
+<Story
+	name="Default"
+	args={{ id: "default", value: options[0], label: "Select an option", options }}
+	{template}
+/>
+
+<Story
+	name="Hidden label"
+	args={{ id: "hidden-label", label: "Select an option", hideLabel: true, options }}
+	{template}
+/>
+
+<Story
+	name="Search mode"
+	args={{
+		id: "search",
+		mode: "search",
+		label: "Type to select",
+		options
+	}}
+	{template}
+/>
+
+<Story
+	name="Options with group as suffix"
+	args={{
+		id: "group-suffix",
+		label: "Select an option",
+		groupKey: "group",
+		options
+	}}
+	{template}
+/>

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

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