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

package/dist/layout/Tabs/Tab.svelte

@@ -1,53 +1,53 @@
 <script>
-  import { onMount, onDestroy, getContext } from "svelte";
-  import { slugify } from "../../js/utils.js";
+	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 = false;
-  /**
-   * ID/slug for tab (auto-generated from title if not set)
-   * @type {string}
-   */
-  export let id = slugify(title);
+	/**
+	 * 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");
-  const selected = getContext("selected");
+	const sections = getContext("sections");
 
-  let el;
+	let el;
 
-  onMount(() => {
-    if (sections) {
-      $sections = [...el.parentElement.getElementsByTagName("section")].filter(
-        (s) => s.dataset.type === "Tab"
-      );
-      if ($selected === null || $selected === undefined) $selected = $sections[0]?.id;
-    }
-  });
+	onMount(() => {
+		if (sections) {
+			$sections = [...el.parentElement.getElementsByTagName("section")].filter(
+				(s) => s.dataset.type === "Tab"
+			);
+		}
+	});
 
-  onDestroy(() => {
-    if (sections) {
-      $sections = $sections.filter((s) => s.id !== id);
-      if ($selected === id) $selected = $sections.length > 0 ? $sections[0].id : null;
-    }
-  });
+	onDestroy(() => {
+		if (sections) {
+			$sections = $sections.filter((s) => s.id !== id);
+		}
+	});
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
 <section
-  id="{id}"
-  data-title="{title}"
-  data-type="Tab"
-  class="ons-tabs__panel"
-  bind:this="{el}"
-  class:ons-tabs__panel--hidden="{$selected !== id}"
+	{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 />
+	<h2 id="{id}-content-title" class="ons-u-vh" class:ons-u-vh={hideTitle}>{title}</h2>
+	<slot />
 </section>

package/dist/{@types/layout → layout}/Tabs/Tab.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  TabEvents */
 /** @typedef {typeof __propDef.slots}  TabSlots */
 export default class Tab extends SvelteComponentTyped<{
-    id?: string;
-    title?: string;
-    hideTitle?: boolean;
+    id?: string | undefined;
+    title?: string | undefined;
+    hideTitle?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -17,9 +17,9 @@ export type TabSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string;
-        title?: string;
-        hideTitle?: boolean;
+        id?: string | undefined;
+        title?: string | undefined;
+        hideTitle?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +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} />

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

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

package/dist/layout/Tabs/Tabs.svelte

@@ -1,109 +1,83 @@
 <script>
-  import { setContext, createEventDispatcher } from "svelte";
-  import { writable } from "svelte/store";
+	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();
+	const dispatch = createEventDispatcher();
 
-  /**
-   * Make tabs smaller/more compact
-   */
-  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;
+	/**
+	 * Make tabs smaller/more compact
+	 */
+	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;
 
-  const sections = writable([]);
-  setContext("sections", sections);
+	let el;
 
-  const _selected = writable(selected);
-  setContext("selected", _selected);
+	const sections = writable([]);
+	setContext("sections", sections);
 
-  function showSection(id) {
-    $_selected = id;
-    [...$sections].forEach(
-      (s) =>
-        (s.className = s.id === id ? "ons-tabs__panel" : "ons-tabs__panel ons-tabs__panel--hidden")
-    );
-    dispatch("change", { id });
-  }
+	function updateSelection(id) {
+		selected = id;
+		dispatch("change", { id });
+	}
 
-  $: if (selected !== $_selected) selected = $_selected;
+	onMount(async () => {
+		await sleep(0);
+		new Tabs(el);
+		selected = $sections?.[0]?.id;
+	});
 </script>
 
-<section class="ons-tabs" class:ons-tabs__border="{border}">
-  <h2 class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no 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
-          id="tab_{section.id}"
-          class="ons-tab__list-item ons-tab__list-item--row"
-          role="presentation"
-        >
-          <a
-            href="#{section.id}"
-            class="ons-tab ons-tab--row"
-            class:ons-tab--compact="{compact}"
-            class:ons-tab--selected="{section.id === selected}"
-            data-ga="click"
-            data-ga-category="tabs"
-            data-ga-action="Show: {section.dataset.title}"
-            data-ga-label="Show: {section.dataset.title}"
-            aria-selected="{section.id === selected ? 'true' : 'false'}"
-            on:click|preventDefault="{() => showSection(section.id)}">{section.dataset.title}</a
-          >
-        </li>
-      {/each}
-    </ul>
-  </div>
-  <slot />
+<section
+	class="ons-tabs"
+	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>
-  .ons-tabs__list::after {
-    content: none;
-  }
-  .ons-tab--compact {
-    font-size: 16px;
-    height: 36px;
-    padding: 0 12px;
-    line-height: 2;
-  }
-  .ons-tab {
-    text-underline-offset: 0;
-    border-color: var(--hinted, #e2e2e3);
-  }
-  .ons-tab[aria-selected="true"] {
-    border-color: var(--ons-color-borders);
-  }
-  .ons-tab:focus {
-    box-shadow: inset 0 0 0 4px var(--hinted, #e2e2e3), inset 12px 0 0 0 var(--hinted, #e2e2e3),
-      inset -12px 0 0 0 var(--hinted, #e2e2e3), inset 0 -8px 0 0 #222;
-  }
-  .ons-tab[aria-selected="true"]:focus {
-    box-shadow: inset 0 0 0 4px var(--background, white), inset 12px 0 0 0 var(--background, white),
-      inset -12px 0 0 0 var(--background, white), inset 0 -8px 0 0 #222;
-  }
-  .ons-tab--row {
-    background: var(--hinted, #e2e2e3);
-  }
-  .ons-tab[aria-selected="true"]:not(:focus) {
-    background-color: var(--background, white);
-  }
-  .ons-tabs__border > .ons-tabs__container {
-    border: none;
-  }
-  .ons-tabs__border :global(.ons-tabs__panel) {
-    border: 1px solid var(--ons-color-borders);
-    border-radius: 4px;
-    border-top-left-radius: 0;
-    padding-left: 12px;
-    padding-right: 12px;
-  }</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/{@types/layout → layout}/Tabs/Tabs.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  TabsEvents */
 /** @typedef {typeof __propDef.slots}  TabsSlots */
 export default class Tabs extends SvelteComponentTyped<{
-    compact?: boolean;
-    selected?: string;
-    border?: boolean;
+    compact?: boolean | undefined;
+    border?: boolean | undefined;
+    selected?: string | null | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -19,9 +19,9 @@ export type TabsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        compact?: boolean;
-        selected?: string | null;
-        border?: boolean;
+        compact?: boolean | undefined;
+        border?: boolean | undefined;
+        selected?: string | null | undefined;
     };
     events: {
         change: CustomEvent<any>;

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

@@ -0,0 +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>
+```

package/dist/layout/Tabs/tabs.d.ts

@@ -0,0 +1,43 @@
+export default class Tabs {
+    constructor(component: any);
+    boundTabClick: (e: any) => void;
+    boundTabKeydown: (event: any) => void;
+    component: any;
+    tabsTitle: any;
+    tabs: any[];
+    tabList: any;
+    tabListContainer: any;
+    tabListItems: any[];
+    tabPanels: any[];
+    jsHiddenClass: string;
+    jsTabListAsRowClass: string;
+    jsTabItemAsRowClass: string;
+    jsTabAsListClass: string;
+    noInitialActiveTab: any;
+    setupViewportChecks(): void;
+    viewport: MediaQueryList | undefined;
+    checkViewport(): void;
+    makeTabs(): void;
+    makeList(): void;
+    onHashChange(): void;
+    changingHash: boolean | undefined;
+    hideTab(tab: any): void;
+    showTab(tab: any): void;
+    getTab(hash: any): any;
+    setAttributes(tab: any): void;
+    unsetAttributes(tab: any): void;
+    onTabClick(e: any): void;
+    ensureTabIndexExists(): void;
+    createHash(tab: any): void;
+    onTabKeydown(event: any): void;
+    focusNextTab(): void;
+    focusPreviousTab(): void;
+    getPanel(tab: any): any;
+    showPanel(tab: any): void;
+    hidePanel(tab: any): void;
+    unhighlightTab(tab: any): void;
+    highlightTab(tab: any): void;
+    getFocusedTab(): ParentNode | null;
+    getCurrentTab(): any;
+    getHref(tab: any): any;
+}