@onsvisual/svelte-components 1.0.46 → 1.0.48

package/dist/layout/Tabs/Tab.svelte

@@ -1,53 +1,53 @@
-<script>
-	import { onMount, onDestroy, getContext } from "svelte";
-	import { slugify } from "../../js/utils.js";
-
-	/**
-	 * Title of tab/panel
-	 * @type {string}
-	 */
-	export let title = "Tab title";
-	/**
-	 * Hide the title within the panel
-	 * @type {boolean}
-	 */
-	export let hideTitle = true;
-	/**
-	 * ID/slug for tab (auto-generated from title if not set)
-	 * @type {string}
-	 */
-	export let id = slugify(title);
-
-	const sections = getContext("sections");
-
-	let el;
-
-	onMount(() => {
-		if (sections) {
-			$sections = [...el.parentElement.getElementsByTagName("section")].filter(
-				(s) => s.dataset.type === "Tab"
-			);
-		}
-	});
-
-	onDestroy(() => {
-		if (sections) {
-			$sections = $sections.filter((s) => s.id !== id);
-		}
-	});
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
-<section
-	{id}
-	data-title={title}
-	data-type="Tab"
-	class="ons-tabs__panel"
-	tabindex="0"
-	role="tabpanel"
-	aria-labelledby="tab_{id}"
-	bind:this={el}
->
-	<h2 id="{id}-content-title" class="ons-u-vh" class:ons-u-vh={hideTitle}>{title}</h2>
-	<slot />
-</section>
+<script>
+	import { onMount, onDestroy, getContext } from "svelte";
+	import { slugify } from "../../js/utils.js";
+
+	/**
+	 * Title of tab/panel
+	 * @type {string}
+	 */
+	export let title = "Tab title";
+	/**
+	 * Hide the title within the panel
+	 * @type {boolean}
+	 */
+	export let hideTitle = true;
+	/**
+	 * ID/slug for tab (auto-generated from title if not set)
+	 * @type {string}
+	 */
+	export let id = slugify(title);
+
+	const sections = getContext("sections");
+
+	let el;
+
+	onMount(() => {
+		if (sections) {
+			$sections = [...el.parentElement.getElementsByTagName("section")].filter(
+				(s) => s.dataset.type === "Tab"
+			);
+		}
+	});
+
+	onDestroy(() => {
+		if (sections) {
+			$sections = $sections.filter((s) => s.id !== id);
+		}
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+<section
+	{id}
+	data-title={title}
+	data-type="Tab"
+	class="ons-tabs__panel"
+	tabindex="0"
+	role="tabpanel"
+	aria-labelledby="tab_{id}"
+	bind:this={el}
+>
+	<h2 id="{id}-content-title" class="ons-u-vh" class:ons-u-vh={hideTitle}>{title}</h2>
+	<slot />
+</section>

package/dist/layout/Tabs/Tabs.stories.svelte

@@ -1,29 +1,29 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Tabs from "./Tabs.svelte";
-	import Tab from "./Tab.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/Tabs",
-		component: Tabs,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<Tabs {...args}>
-		<Tab title="Tab one">Contents of tab panel one.</Tab>
-		<Tab title="Tab two">Contents of tab panel two.</Tab>
-		<Tab title="Tab three">Contents of tab panel three.</Tab>
-	</Tabs>
-{/snippet}
-
-<Story name="Default" args={{}} {template} />
-
-<Story name="Tab panel border" args={{ border: true }} {template} />
-
-<Story name="Compact tab labels" args={{ compact: true }} {template} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Tabs from "./Tabs.svelte";
+	import Tab from "./Tab.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Tabs",
+		component: Tabs,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Tabs {...args}>
+		<Tab title="Tab one">Contents of tab panel one.</Tab>
+		<Tab title="Tab two">Contents of tab panel two.</Tab>
+		<Tab title="Tab three">Contents of tab panel three.</Tab>
+	</Tabs>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />
+
+<Story name="Tab panel border" args={{ border: true }} {template} />
+
+<Story name="Compact tab labels" args={{ compact: true }} {template} />

package/dist/layout/Tabs/Tabs.svelte

@@ -1,89 +1,89 @@
-<script>
-	import { onMount, setContext, createEventDispatcher } from "svelte";
-	import { writable } from "svelte/store";
-	import { sleep } from "../../js/utils.js";
-	import Tabs from "./tabs.js";
-
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * Make tabs smaller/more compact
-	 * @type {boolean}
-	 */
-	export let compact = false;
-	/**
-	 * Include a border around the tab panel
-	 * @type {boolean}
-	 */
-	export let border = false;
-	/**
-	 * The ID of selected tab (for binding)
-	 * @type {string|null}
-	 */
-	export let selected = null;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-
-	let el;
-
-	const sections = writable([]);
-	setContext("sections", sections);
-
-	function updateSelection(id) {
-		selected = id;
-		dispatch("change", { id });
-	}
-
-	onMount(async () => {
-		await sleep(0);
-		new Tabs(el);
-		selected = $sections?.[0]?.id;
-	});
-</script>
-
-<section
-	class="ons-tabs {cls}"
-	class:ons-tabs__border={border}
-	class:ons-tabs__compact={compact}
-	bind:this={el}
->
-	<h2 class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no ons-u-fs-m ons-u-vh">Contents</h2>
-	<div class="ons-tabs__container">
-		<ul class="ons-tabs__list ons-tabs__list--row" role="tablist">
-			{#each $sections as section}
-				<li class="ons-tab__list-item ons-tab__list-item--row" role="presentation">
-					<a
-						on:click={() => updateSelection(section.id)}
-						href="#{section.id}"
-						class="ons-tab ons-tab--row"
-						id="tab_{section.id}"
-						role="tab"
-						aria-controls={section.id}>{section.dataset.title}</a
-					>
-				</li>
-			{/each}
-		</ul>
-	</div>
-	<slot />
-</section>
-
-<style>
-	/* css to extend display options compared to design system */
-	.ons-tabs__compact .ons-tab--row {
-		font-size: 16px;
-		height: 2.2rem;
-		padding: 0.1rem 0.75rem;
-	}
-	.ons-tabs__border .ons-tabs__container {
-		border: none;
-	}
-	.ons-tabs__border :global(.ons-tabs__panel) {
-		border: 1px solid var(--ons-color-borders);
-		border-radius: 0 3px 3px 3px;
-		padding-left: 12px;
-		padding-right: 12px;
-	}
-</style>
+<script>
+	import { onMount, setContext, createEventDispatcher } from "svelte";
+	import { writable } from "svelte/store";
+	import { sleep } from "../../js/utils.js";
+	import Tabs from "./tabs.js";
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * Make tabs smaller/more compact
+	 * @type {boolean}
+	 */
+	export let compact = false;
+	/**
+	 * Include a border around the tab panel
+	 * @type {boolean}
+	 */
+	export let border = false;
+	/**
+	 * The ID of selected tab (for binding)
+	 * @type {string|null}
+	 */
+	export let selected = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+
+	let el;
+
+	const sections = writable([]);
+	setContext("sections", sections);
+
+	function updateSelection(id) {
+		selected = id;
+		dispatch("change", { id });
+	}
+
+	onMount(async () => {
+		await sleep(0);
+		new Tabs(el);
+		selected = $sections?.[0]?.id;
+	});
+</script>
+
+<section
+	class="ons-tabs {cls}"
+	class:ons-tabs__border={border}
+	class:ons-tabs__compact={compact}
+	bind:this={el}
+>
+	<h2 class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no ons-u-fs-m ons-u-vh">Contents</h2>
+	<div class="ons-tabs__container">
+		<ul class="ons-tabs__list ons-tabs__list--row" role="tablist">
+			{#each $sections as section}
+				<li class="ons-tab__list-item ons-tab__list-item--row" role="presentation">
+					<a
+						on:click={() => updateSelection(section.id)}
+						href="#{section.id}"
+						class="ons-tab ons-tab--row"
+						id="tab_{section.id}"
+						role="tab"
+						aria-controls={section.id}>{section.dataset.title}</a
+					>
+				</li>
+			{/each}
+		</ul>
+	</div>
+	<slot />
+</section>
+
+<style>
+	/* css to extend display options compared to design system */
+	.ons-tabs__compact .ons-tab--row {
+		font-size: 16px;
+		height: 2.2rem;
+		padding: 0.1rem 0.75rem;
+	}
+	.ons-tabs__border .ons-tabs__container {
+		border: none;
+	}
+	.ons-tabs__border :global(.ons-tabs__panel) {
+		border: 1px solid var(--ons-color-borders);
+		border-radius: 0 3px 3px 3px;
+		padding-left: 12px;
+		padding-right: 12px;
+	}
+</style>

package/dist/layout/Tabs/docs/component.md

@@ -1,16 +1,16 @@
-Use tabs to help users navigate between short sections of related content within a single page, showing one section at a time.
-
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/tabs).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Tab, Tabs } from "@onsvisual/svelte-components";
-</script>
-
-<Tabs>
-  <Tab title="Tab one">Contents of tab panel one.</Tab>
-  <Tab title="Tab two">Contents of tab panel two.</Tab>
-  <Tab title="Tab three">Contents of tab panel three.</Tab>
-</Tabs>
-```
+Use tabs to help users navigate between short sections of related content within a single page, showing one section at a time.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/tabs).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Tab, Tabs } from "@onsvisual/svelte-components";
+</script>
+
+<Tabs>
+  <Tab title="Tab one">Contents of tab panel one.</Tab>
+  <Tab title="Tab two">Contents of tab panel two.</Tab>
+  <Tab title="Tab three">Contents of tab panel three.</Tab>
+</Tabs>
+```