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

package/dist/inputs/Checkbox/Checkbox.svelte

@@ -1,169 +1,162 @@
 <script>
-  import { onMount, onDestroy, getContext, createEventDispatcher } from "svelte";
+	import { onMount, onDestroy, getContext, createEventDispatcher } from "svelte";
 
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-  /**
-   * ID for input element
-   * @type {string}
-   */
-  export let id;
-  /**
-   * Name of checkbox group (optional)
-   * @type {string|null}
-   */
-  export let name = null;
-  /**
-   * Value for input element (defaults to ID)
-   * @type {string|object}
-   */
-  export let value = id;
-  /**
-   * Label for input
-   * @type {string}
-   */
-  export let label;
-  /**
-   * Binding for checked state of input
-   * @type {boolean}
-   */
-  export let checked = false;
-  /**
-   * Binding for checked state of input
-   * @type {array|null}
-   */
-  export let group = null;
-  /**
-   * (Optional) Extended description for element
-   * @type {string}
-   */
-  export let description = null;
-  /**
-   * Set display mode of checkbox
-   * @type {"default"|"ghost"}
-   */
-  export let variant = "default";
-  /**
-   * Option to disable input
-   * @type {boolean}
-   */
-  export let disabled = false;
-  /**
-   * Compact mode (no border)
-   * @type {boolean}
-   */
-  export let compact = false;
+	/**
+	 * ID for input element
+	 * @type {string}
+	 */
+	export let id;
+	/**
+	 * Optional: Name of checkbox group
+	 * @type {string}
+	 */
+	export let name = "";
+	/**
+	 * Value for input element (defaults to ID)
+	 * @type {string|object}
+	 */
+	export let value = id;
+	/**
+	 * Label for input
+	 * @type {string}
+	 */
+	export let label;
+	/**
+	 * Binding for checked state of input
+	 * @type {boolean}
+	 */
+	export let checked = false;
+	/**
+	 * Binding for checked state of input
+	 * @type {object[]|null}
+	 */
+	export let group = null;
+	/**
+	 * Optional: Extended description for element
+	 * @type {string}
+	 */
+	export let description = "";
+	/**
+	 * Set display mode of checkbox
+	 * @type {"default"|"ghost"}
+	 */
+	export let variant = "default";
+	/**
+	 * Option to disable input
+	 * @type {boolean}
+	 */
+	export let disabled = false;
+	/**
+	 * Compact mode (no border)
+	 * @type {boolean}
+	 */
+	export let compact = false;
 
-  const checkboxes = getContext("checkboxes");
+	const checkboxes = getContext("checkboxes");
 
-  let el;
+	let el;
 
-  function findAncestor(el, cls) {
-    while ((el = el.parentElement) && !el.classList.contains(cls));
-    return el;
-  }
+	function findAncestor(el, cls) {
+		while ((el = el.parentElement) && !el.classList.contains(cls));
+		return el;
+	}
 
-  function updateGroup() {
-    const newGroup = $checkboxes.filter((c) => c.checked).map((c) => c.id);
-    if (newGroup.join() !== group.join()) group = newGroup;
-  }
+	function updateGroup() {
+		const newGroup = $checkboxes.filter((c) => c.checked).map((c) => c.id);
+		if (newGroup.join() !== group.join()) group = newGroup;
+	}
 
-  function doChange(e) {
-    if (Array.isArray(group) && Array.isArray($checkboxes)) {
-      updateGroup();
-    }
-    dispatch("change", { id, checked, group, e });
-  }
+	function doChange(e) {
+		if (Array.isArray(group) && Array.isArray($checkboxes)) {
+			updateGroup();
+		}
+		dispatch("change", { id, checked, group, e });
+	}
 
-  onMount(() => {
-    if (Array.isArray(group) && Array.isArray($checkboxes)) {
-      const root = findAncestor(el, "ons-checkboxes__items");
-      $checkboxes = [...root.getElementsByTagName("input")];
-      updateGroup();
-    }
-  });
+	onMount(() => {
+		if (Array.isArray(group) && Array.isArray($checkboxes)) {
+			const root = findAncestor(el, "ons-checkboxes__items");
+			$checkboxes = [...root.getElementsByTagName("input")];
+			updateGroup();
+		}
+	});
 
-  onDestroy(() => {
-    if (Array.isArray(group) && Array.isArray($checkboxes)) {
-      $checkboxes = $checkboxes.filter((c) => c.id !== id);
-      updateGroup();
-    }
-  });
+	onDestroy(() => {
+		if (Array.isArray(group) && Array.isArray($checkboxes)) {
+			$checkboxes = $checkboxes.filter((c) => c.id !== id);
+			updateGroup();
+		}
+	});
 </script>
 
 <span
-  class="ons-checkboxes__item"
-  class:ons-checkboxes__item--ghost="{variant === 'ghost'}"
-  class:ons-checkboxes__item--no-border="{compact}"
+	class="ons-checkboxes__item"
+	class:ons-checkboxes__item--ghost={variant === "ghost"}
+	class:ons-checkboxes__item--no-border={compact}
 >
-  <span class="ons-checkbox" class:ons-checkbox--no-border="{compact}">
-    <input
-      type="checkbox"
-      id="{id}"
-      name="{name}"
-      value="{value}"
-      bind:checked="{checked}"
-      class="ons-checkbox__input ons-js-checkbox"
-      disabled="{disabled}"
-      aria-disabled="{disabled}"
-      on:change="{doChange}"
-      bind:this="{el}"
-    />
-    <label
-      class="ons-checkbox__label"
-      class:ons-label--with-description="{description}"
-      for="{id}"
-      id="{id}-label"
-      aria-describedby="{description ? `${id}-label-description-hint` : null}"
-    >
-      {label}
-      {#if description}
-        <span class="ons-label__aria-hidden-description" aria-hidden="true"
-          ><span class="ons-label__description ons-radio__label--with-description">
-            {description}
-          </span></span
-        >
-      {/if}
-    </label>
-    {#if description}
-      <span
-        class="ons-label__visually-hidden-description ons-u-vh"
-        id="{id}-label-description-hint"
-      >
-        {description}
-      </span>
-    {/if}
-  </span>
+	<span class="ons-checkbox" class:ons-checkbox--no-border={compact}>
+		<input
+			type="checkbox"
+			{id}
+			{name}
+			{value}
+			bind:checked
+			class="ons-checkbox__input ons-js-checkbox"
+			{disabled}
+			aria-disabled={disabled}
+			on:change={doChange}
+			bind:this={el}
+		/>
+		<label
+			class="ons-checkbox__label"
+			class:ons-label--with-description={description}
+			for={id}
+			id="{id}-label"
+			aria-describedby={description ? `${id}-label-description-hint` : null}
+		>
+			{label}
+			{#if description}
+				<span class="ons-label__aria-hidden-description" aria-hidden="true"
+					><span class="ons-label__description ons-radio__label--with-description">
+						{description}
+					</span></span
+				>
+			{/if}
+		</label>
+		{#if description}
+			<span
+				class="ons-label__visually-hidden-description ons-u-vh"
+				id="{id}-label-description-hint"
+			>
+				{description}
+			</span>
+		{/if}
+	</span>
 </span>
 
 <style>
-  .ons-checkboxes__item {
-    display: table;
-  }
-  .ons-checkbox__input:disabled {
-    border: 2px solid var(--ons-color-border-disabled);
-  }
-  .ons-checkboxes__item label::before {
-    background: none;
-    border-color: currentColor;
-    box-shadow: 0 0 0 1px currentColor;
-  }
-  .ons-checkboxes__item--ghost label::before {
-    opacity: 60%;
-  }
-  .ons-checkboxes__item .ons-checkbox__input:focus + .ons-checkbox__label::before {
-    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
-    opacity: 100%;
-  }
-  .ons-checkboxes__item input {
-    background: none;
-    border-color: currentColor;
-  }
-  .ons-checkboxes__item input::after {
-    border-color: currentColor;
-    border-width: 0 0 3px 3px !important;
-  }
-
-  .ons-checkboxes__item--no-border .ons-checkbox__input:focus {
-    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
-  }</style>
+	.ons-checkboxes__item--ghost .ons-checkbox__label::before {
+		background: rgba(0, 0, 0, 0);
+		border-color: var(--ons-color-text-inverse);
+		border-width: 2px;
+		opacity: 60%;
+	}
+	.ons-checkboxes__item--ghost .ons-checkbox__input,
+	.ons-checkboxes__item--ghost .ons-checkbox__input::after {
+		background: rgba(0, 0, 0, 0);
+		border-color: var(--ons-color-text-inverse);
+	}
+	.ons-checkboxes__item--ghost .ons-checkbox__input:focus + .ons-checkbox__label::before {
+		box-shadow:
+			0 0 0 1px var(--ons-color-input-border),
+			0 0 0 4px var(--ons-color-focus);
+		opacity: 100%;
+	}
+	.ons-checkboxes__item--ghost
+		.ons-checkbox__input:checked:not(:focus)
+		+ .ons-checkbox__label::before {
+		box-shadow: 0 0 0 1px var(--ons-color-text-inverse);
+	}
+</style>

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

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

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

@@ -0,0 +1,14 @@
+A checkbox element with various styling and labelling options. Its "checked" attribute can be bound to a Svelte boolean (true/false) variable.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Checkbox } from "@onsvisual/svelte-components";
+
+  let checked = false;
+</script>
+
+<Checkbox id="checkbox" label="Select this" bind:checked />
+```

package/dist/inputs/Checkboxes/Checkboxes.stories.svelte

@@ -0,0 +1,42 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import Checkbox from "../Checkbox/Checkbox.svelte";
+	import Checkboxes from "./Checkboxes.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Checkboxes",
+		component: Checkboxes,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+
+	const items = [
+		{ id: "ice-cream", label: "Ice cream", checked: true },
+		{ id: "sprinkles", label: "Sprinkles", description: "Highly recommended!", checked: false },
+		{ id: "disabled", label: "Disabled option", checked: false, disabled: true }
+	];
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<Checkboxes {...args} />
+	</div>
+{/snippet}
+
+<Story name="Default" args={{ label: "Select items", items }} {template} />
+
+<Story name="Compact without label" args={{ items, compact: true }} {template} />
+
+<Story name="Individually defined checkboxes" asChild parameters={withStoryDocs(exampleDocs)}>
+	<div style:padding="12px">
+		<Checkboxes label="Select items">
+			<Checkbox id="ice-cream" label="Ice cream" />
+			<Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" />
+			<Checkbox id="disabled" label="Disabled option" disabled />
+		</Checkboxes>
+	</div>
+</Story>

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

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

package/dist/inputs/Checkboxes/Checkboxes.svelte

@@ -1,38 +1,38 @@
 <script>
-  import { setContext } from "svelte";
-  import { writable } from "svelte/store";
-  import Checkbox from "../Checkbox/Checkbox.svelte";
+	import { setContext } from "svelte";
+	import { writable } from "svelte/store";
+	import Checkbox from "../Checkbox/Checkbox.svelte";
 
-  /**
-   * Label for grouped inputs
-   * @type {string}
-   */
-  export let label = "";
-  /** (Optional) Define the checkboxes as an array of {id, label, checked, description?}
-   * @type {array}
-   */
-  export let items = null;
-  /** Compact mode (no borders)
-   * @type {boolean}
-   */
-  export let compact = false;
-  /** Binding for selected checkboxes (if checkboxes are defined as "items")
-   * @type {array}
-   */
-  export let value = [];
+	/**
+	 * Label for grouped inputs
+	 * @type {string}
+	 */
+	export let label = "";
+	/** Optional: Define the checkboxes as an array of {id, label, checked, description?}
+	 * @type {object[]|null}
+	 */
+	export let items = null;
+	/** Compact mode (no borders)
+	 * @type {boolean}
+	 */
+	export let compact = false;
+	/** Binding for selected checkboxes (if checkboxes are defined as "items")
+	 * @type {object[]}
+	 */
+	export let value = [];
 
-  const checkboxes = writable([]);
-  setContext("checkboxes", checkboxes);
+	const checkboxes = writable([]);
+	setContext("checkboxes", checkboxes);
 </script>
 
 {#if label}
-  <p class="ons-checkboxes__label">{label}</p>
+	<p class="ons-checkboxes__label">{label}</p>
 {/if}
 <div class="ons-checkboxes__items">
-  <slot />
-  {#if items}
-    {#each items as item}
-      <Checkbox {...item} bind:group="{value}" compact="{compact}" on:change />
-    {/each}
-  {/if}
+	<slot />
+	{#if Array.isArray(items)}
+		{#each items as item}
+			<Checkbox {...item} bind:group={value} {compact} on:change />
+		{/each}
+	{/if}
 </div>

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

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

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

@@ -0,0 +1,20 @@
+A component for defining a group of [checkbox](/docs/inputs-checkbox--docs) elements, whose checked values can be bound to Svelte variables, or grouped in an array.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Checkboxes } from "@onsvisual/svelte-components";
+
+  let items = [
+    { id: "ice-cream", label: "Ice cream", checked: true },
+    { id: "sprinkles", label: "Sprinkles", description: "Highly recommended!", checked: false },
+    { id: "disabled", label: "Disabled option", checked: false, disabled: true },
+  ];
+
+  let selected = []; // An array of the selected items
+</script>
+
+<Checkboxes {items} bind:value={selected} label="Select items">
+```

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

@@ -0,0 +1,16 @@
+In this example, the child textboxes are defined explicitly.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Checkbox, Checkboxes } from "@onsvisual/svelte-components";
+
+  let selected = []; // An array of the selected items
+</script>
+
+<Checkboxes label="Select items">
+  <Checkbox id="ice-cream" label="Ice cream" bind:group={selected} />
+  <Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" bind:group={selected} />
+  <Checkbox id="disabled" label="Disabled option" bind:group={selected} />
+</Checkboxes>
+```

package/dist/inputs/Dropdown/Dropdown.stories.svelte

@@ -0,0 +1,54 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Dropdown from "./Dropdown.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import options from "../../js/menuOptions.js";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Dropdown",
+		component: Dropdown,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<Dropdown {...args} />
+	</div>
+{/snippet}
+
+<Story
+	name="Default"
+	args={{
+		id: "topic",
+		label: "Question topic",
+		options
+	}}
+	{template}
+/>
+
+<Story
+	name="Hidden label"
+	args={{
+		id: "topic",
+		label: "Question topic",
+		hideLabel: true,
+		options
+	}}
+	{template}
+/>
+
+<Story
+	name="Custom placeholder text"
+	args={{
+		id: "topic",
+		label: "Question topic",
+		hideLabel: true,
+		placeholder: "Some custom text",
+		options
+	}}
+	{template}
+/>