@onsvisual/svelte-components 1.0.44 → 1.0.45

package/dist/inputs/Button/Button.stories.svelte

@@ -1,70 +1,70 @@
-<script module>
-	// @ts-ignore
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Button from "./Button.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Inputs/Button",
-		component: Button,
-		tags: ["autodocs"],
-		argTypes: {
-			type: {
-				options: ["button", "submit", "reset"],
-				control: { type: "select" }
-			},
-			variant: {
-				options: ["primary", "secondary", "ghost"],
-				control: { type: "select" }
-			},
-			icon: {
-				control: { type: "select" }
-			},
-			iconPosition: {
-				options: ["before", "after"],
-				control: { type: "select" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<div
-		style:padding="12px"
-		style:background={args?.variant === "ghost" ? "var(--ons-color-ocean-blue)" : null}
-	>
-		<Button {...args}>{args.text}</Button>
-	</div>
-{/snippet}
-
-<Story name="Default" args={{ text: "Primary button" }} {template} />
-
-<Story name="Link" args={{ text: "Button-styled link", href: "#" }} {template} />
-
-<Story name="Secondary" args={{ text: "Secondary button", variant: "secondary" }} {template} />
-
-<Story name="Ghost" args={{ text: "Ghost button", variant: "ghost" }} {template} />
-
-<Story name="Small" args={{ text: "Small button", small: true }} {template} />
-
-<Story name="Icon before" args={{ text: "Download", icon: "download" }} {template} />
-
-<Story
-	name="Icon after"
-	args={{ text: "Continue", icon: "arrow", iconPosition: "after" }}
-	{template}
-/>
-
-<Story
-	name="Icon only, hidden text"
-	args={{ text: "Search", icon: "search", hideLabel: true }}
-	{template}
-/>
-
-<Story
-	name="Custom colour button"
-	args={{ text: "Small button", icon: "cross", color: "#00a3a6", small: true }}
-	{template}
-/>
+<script module>
+	// @ts-ignore
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Button from "./Button.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Button",
+		component: Button,
+		tags: ["autodocs"],
+		argTypes: {
+			type: {
+				options: ["button", "submit", "reset"],
+				control: { type: "select" }
+			},
+			variant: {
+				options: ["primary", "secondary", "ghost"],
+				control: { type: "select" }
+			},
+			icon: {
+				control: { type: "select" }
+			},
+			iconPosition: {
+				options: ["before", "after"],
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div
+		style:padding="12px"
+		style:background={args?.variant === "ghost" ? "var(--ons-color-ocean-blue)" : null}
+	>
+		<Button {...args}>{args.text}</Button>
+	</div>
+{/snippet}
+
+<Story name="Default" args={{ text: "Primary button" }} {template} />
+
+<Story name="Link" args={{ text: "Button-styled link", href: "#" }} {template} />
+
+<Story name="Secondary" args={{ text: "Secondary button", variant: "secondary" }} {template} />
+
+<Story name="Ghost" args={{ text: "Ghost button", variant: "ghost" }} {template} />
+
+<Story name="Small" args={{ text: "Small button", small: true }} {template} />
+
+<Story name="Icon before" args={{ text: "Download", icon: "download" }} {template} />
+
+<Story
+	name="Icon after"
+	args={{ text: "Continue", icon: "arrow", iconPosition: "after" }}
+	{template}
+/>
+
+<Story
+	name="Icon only, hidden text"
+	args={{ text: "Search", icon: "search", hideLabel: true }}
+	{template}
+/>
+
+<Story
+	name="Custom colour button"
+	args={{ text: "Small button", icon: "cross", color: "#00a3a6", small: true }}
+	{template}
+/>

package/dist/inputs/Button/Button.svelte

@@ -1,152 +1,152 @@
-<script>
-	import { createEventDispatcher } from "svelte";
-	import Icon from "../../decorators/Icon/Icon.svelte";
-	import { contrastColor, darkenColor } from "../../js/utils";
-
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * Type of button
-	 * @type {"button"|"submit"|"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;
-	/**
-	 * File name if link is used for a file download (only if href is also specified)
-	 * @type {string|null}
-	 */
-	export let download = null;
-	/**
-	 * Don't scroll when link is followed (only if href is also specified)
-	 * @type {boolean}
-	 */
-	export let noScroll = false;
-	/**
-	 * Make button smaller
-	 * @type {boolean}
-	 */
-	export let small = false;
-	/**
-	 * Icon on button, eg. "arrow", "search"
-	 * @type {"arrow"|"chevron"|"carret"|"cross"|"external"|"signout"|"print"|"download"|"tick"|"search"|"pin"|"cog"|null}
-	 */
-	export let icon = null;
-	/**
-	 * Position of icon
-	 * @type {"before"|"after"}
-	 */
-	export let iconPosition = "before";
-	/**
-	 * Rotation of icon in degrees (clockwise)
-	 * @type {number}
-	 */
-	export let iconRotation = 0;
-	/**
-	 * 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;
-	/**
-	 * Set a colour for the button
-	 * @type {string|null}
-	 */
-	export let color = 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}
-		data-sveltekit-noscroll={noScroll}
-	>
-		<span
-			class="ons-btn__inner"
-			style:background={color}
-			style:color={color ? contrastColor(color) : null}
-			style:box-shadow={color ? `0 0.1875rem 0 ${darkenColor(color)}` : null}
-		>
-			{#if iconPosition === "before"}
-				<slot name="icon">
-					{#if icon}
-						<Icon type={icon} marginRight={!hideLabel} rotation={iconRotation} />
-					{/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} rotation={iconRotation} />
-					{/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"
-			style:background={color}
-			style:color={color ? contrastColor(color) : null}
-			style:box-shadow={color ? `0 0.1875rem 0 ${darkenColor(color)}` : null}
-		>
-			{#if iconPosition === "before"}
-				<slot name="icon">
-					{#if icon}
-						<Icon type={icon} marginRight={!hideLabel} rotation={iconRotation} />
-					{/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} rotation={iconRotation} />
-					{/if}
-				</slot>
-			{/if}
-		</span>
-	</button>
-{/if}
+<script>
+	import { createEventDispatcher } from "svelte";
+	import Icon from "../../decorators/Icon/Icon.svelte";
+	import { contrastColor, darkenColor } from "../../js/utils";
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * Type of button
+	 * @type {"button"|"submit"|"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;
+	/**
+	 * File name if link is used for a file download (only if href is also specified)
+	 * @type {string|null}
+	 */
+	export let download = null;
+	/**
+	 * Don't scroll when link is followed (only if href is also specified)
+	 * @type {boolean}
+	 */
+	export let noScroll = false;
+	/**
+	 * Make button smaller
+	 * @type {boolean}
+	 */
+	export let small = false;
+	/**
+	 * Icon on button, eg. "arrow", "search"
+	 * @type {"arrow"|"carret"|"chevron"|"cog"|"cross"|"download"|"expand"|"external"|"pin"|"print"|"search"|"shrink"|"signout"|"tick"|null}
+	 */
+	export let icon = null;
+	/**
+	 * Position of icon
+	 * @type {"before"|"after"}
+	 */
+	export let iconPosition = "before";
+	/**
+	 * Rotation of icon in degrees (clockwise)
+	 * @type {number}
+	 */
+	export let iconRotation = 0;
+	/**
+	 * 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;
+	/**
+	 * Set a colour for the button
+	 * @type {string|null}
+	 */
+	export let color = 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}
+		data-sveltekit-noscroll={noScroll}
+	>
+		<span
+			class="ons-btn__inner"
+			style:background={color}
+			style:color={color ? contrastColor(color) : null}
+			style:box-shadow={color ? `0 0.1875rem 0 ${darkenColor(color)}` : null}
+		>
+			{#if iconPosition === "before"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginRight={!hideLabel} rotation={iconRotation} />
+					{/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} rotation={iconRotation} />
+					{/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"
+			style:background={color}
+			style:color={color ? contrastColor(color) : null}
+			style:box-shadow={color ? `0 0.1875rem 0 ${darkenColor(color)}` : null}
+		>
+			{#if iconPosition === "before"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginRight={!hideLabel} rotation={iconRotation} />
+					{/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} rotation={iconRotation} />
+					{/if}
+				</slot>
+			{/if}
+		</span>
+	</button>
+{/if}

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

@@ -10,7 +10,7 @@ export default class Button extends SvelteComponentTyped<{
     type?: "button" | "reset" | "submit" | undefined;
     variant?: "secondary" | "primary" | "ghost" | undefined;
     noScroll?: boolean | undefined;
-    icon?: "search" | "arrow" | "chevron" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | "pin" | "cog" | null | undefined;
+    icon?: "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | null | undefined;
     iconPosition?: "before" | "after" | undefined;
     iconRotation?: number | undefined;
     disabled?: boolean | undefined;
@@ -39,7 +39,7 @@ declare const __propDef: {
         type?: "button" | "reset" | "submit" | undefined;
         variant?: "secondary" | "primary" | "ghost" | undefined;
         noScroll?: boolean | undefined;
-        icon?: "search" | "arrow" | "chevron" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | "pin" | "cog" | null | undefined;
+        icon?: "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | null | undefined;
         iconPosition?: "before" | "after" | undefined;
         iconRotation?: number | undefined;
         disabled?: boolean | undefined;

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

@@ -1,17 +1,17 @@
-A button/link component that can be styled in various ways. It will render as an `<a>` link if it has an `href` property defined.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Button } from "@onsvisual/svelte-components";
-
-  // Define your own function on click
-  const handleClick = (e) => console.log(e);
-</script>
-
-<!-- Standard button with on:click function -->
-<Button on:click="{handleClick}">Button text</Button>
-
-<!-- Button-styled link with href -->
-<Button href="#">Link text</Button>
-```
+A button/link component that can be styled in various ways. It will render as an `<a>` link if it has an `href` property defined.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Button } from "@onsvisual/svelte-components";
+
+  // Define your own function on click
+  const handleClick = (e) => console.log(e);
+</script>
+
+<!-- Standard button with on:click function -->
+<Button on:click="{handleClick}">Button text</Button>
+
+<!-- Button-styled link with href -->
+<Button href="#">Link text</Button>
+```

package/dist/inputs/ButtonGroup/ButtonGroup.stories.svelte

@@ -1,40 +1,40 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import componentDocs from "./docs/component.md?raw";
-	import ButtonGroup from "./ButtonGroup.svelte";
-	import ButtonGroupItem from "./ButtonGroupItem.svelte";
-	import { withComponentDocs } from "../../js/withParams.js";
-
-	const { Story } = defineMeta({
-		title: "Inputs/ButtonGroup",
-		component: ButtonGroup,
-		tags: ["autodocs"],
-		argTypes: {
-			legend: { control: "text" },
-			visuallyHideLegend: { control: "boolean" }
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<ButtonGroup {...args}>
-		<ButtonGroupItem value="1" label="Option 1" />
-		<ButtonGroupItem value="2" label="Option 2" />
-		<ButtonGroupItem value="3" label="Option 3" />
-	</ButtonGroup>
-{/snippet}
-
-<Story name="Default" args={{ name: "primary", legend: "Choose an option" }} {template} />
-
-<Story
-	name="With initial value"
-	args={{ name: "primary", legend: "Choose an option", value: "2" }}
-	{template}
-/>
-
-<Story
-	name="Visually hide legend"
-	args={{ name: "primary", legend: "Choose an option", visuallyHideLegend: true }}
-	{template}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import componentDocs from "./docs/component.md?raw";
+	import ButtonGroup from "./ButtonGroup.svelte";
+	import ButtonGroupItem from "./ButtonGroupItem.svelte";
+	import { withComponentDocs } from "../../js/withParams.js";
+
+	const { Story } = defineMeta({
+		title: "Inputs/ButtonGroup",
+		component: ButtonGroup,
+		tags: ["autodocs"],
+		argTypes: {
+			legend: { control: "text" },
+			visuallyHideLegend: { control: "boolean" }
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<ButtonGroup {...args}>
+		<ButtonGroupItem value="1" label="Option 1" />
+		<ButtonGroupItem value="2" label="Option 2" />
+		<ButtonGroupItem value="3" label="Option 3" />
+	</ButtonGroup>
+{/snippet}
+
+<Story name="Default" args={{ name: "primary", legend: "Choose an option" }} {template} />
+
+<Story
+	name="With initial value"
+	args={{ name: "primary", legend: "Choose an option", value: "2" }}
+	{template}
+/>
+
+<Story
+	name="Visually hide legend"
+	args={{ name: "primary", legend: "Choose an option", visuallyHideLegend: true }}
+	{template}
+/>