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

package/dist/{@types/layout/Accordion/Accordion.svelte.d.ts → layout/Accordion/Accordion.stories.svelte.d.ts}

@@ -2,12 +2,10 @@
 /** @typedef {typeof __propDef.events}  AccordionEvents */
 /** @typedef {typeof __propDef.slots}  AccordionSlots */
 export default class Accordion extends SvelteComponentTyped<{
-    showToggle?: boolean;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+}, {}> {
 }
 export type AccordionProps = typeof __propDef.props;
 export type AccordionEvents = typeof __propDef.events;
@@ -15,13 +13,11 @@ export type AccordionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        showToggle?: boolean;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export {};

package/dist/layout/Accordion/Accordion.svelte

@@ -1,37 +1,57 @@
 <script>
-  import { setContext } from "svelte";
-  import { writable } from "svelte/store";
+	import { onMount, setContext } from "svelte";
+	import Accordion from "./accordion.js";
+	import Details from "./details.js";
+	import { slugify, sleep } from "../../js/utils.js";
 
-  const elements = writable(new Set());
-  setContext("elements", elements);
+	/**
+	 * Optional: Set the unique ID of the accordion
+	 * @type {string}
+	 */
+	export let id = slugify();
+	/**
+	 * Optional: Set a CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
+	/**
+	 * Option to include a "show all" toggle above the accordion
+	 * @type {boolean}
+	 */
+	export let showToggle = false;
 
-  const allOpen = writable(false);
-  setContext("allOpen", allOpen);
+	let el, buttonEl;
 
-  function toggleAll() {
-    $elements.forEach((el) => {
-      el.open = !$allOpen;
-    });
-  }
+	setContext("dataGroup", id);
 
-  /**
-   * Option to include a "show all" toggle above the accordion
-   * @type {boolean}
-   */
-  export let showToggle = false;
+	onMount(async () => {
+		await sleep(0);
+		const detailsComponents = [...el.querySelectorAll(".ons-js-details")];
+		const detailsEls = detailsComponents.map((element) => new Details(element));
+		new Accordion(buttonEl, detailsEls);
+	});
 </script>
 
-<div id="accordion" class="ons-accordion">
-  {#if showToggle}
-    <button
-      type="button"
-      class="ons-btn ons-js-accordion-all ons-u-mb-s ons-btn--secondary ons-btn--small"
-      on:click="{() => toggleAll()}"
-    >
-      <span class="ons-btn__inner ons-js-accordion-all-inner"
-        ><span class="ons-btn__text">{$allOpen ? "Hide all" : "Show all"}</span>
-      </span>
-    </button>
-  {/if}
-  <slot />
+<div {id} class="ons-accordion {cls}" bind:this={el}>
+	{#if showToggle}
+		<button
+			type="button"
+			class="ons-btn ons-accordion__toggle-all ons-u-mb-s ons-u-d-no ons-btn--secondary ons-btn--small"
+			class:hide-toggle={!showToggle}
+			data-close-all="Hide all"
+			data-group={id}
+			bind:this={buttonEl}
+		>
+			<span class="ons-btn__inner ons-accordion__toggle-all-inner"
+				><span class="ons-btn__text">Show all</span></span
+			>
+		</button>
+	{/if}
+	<slot />
 </div>
+
+<style>
+	button.hide-toggle {
+		display: none;
+	}
+</style>

package/dist/layout/Accordion/Accordion.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  AccordionProps */
+/** @typedef {typeof __propDef.events}  AccordionEvents */
+/** @typedef {typeof __propDef.slots}  AccordionSlots */
+export default class Accordion extends SvelteComponentTyped<{
+    id?: string | undefined;
+    cls?: string | undefined;
+    showToggle?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type AccordionProps = typeof __propDef.props;
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        cls?: string | undefined;
+        showToggle?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/layout/Accordion/AccordionItem.svelte

@@ -1,86 +1,51 @@
 <script>
-  import { onMount, getContext } from "svelte";
-  import { slugify } from "../../js/utils.js";
+	import { getContext } from "svelte";
+	import { slugify } from "../../js/utils.js";
 
-  /**
-   * A title for the element
-   * @type {string}
-   */
-  export let title = "Title";
-  /**
-   * A unique for the element (optional)
-   * @type {string}
-   */
-  export let id = slugify(title);
-  /**
-   * Option for element to be open/expanded by default
-   * @type {boolean}
-   */
-  export let open = false;
+	/**
+	 * Sets the title of the accordion item
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * Sets the unique ID of the accordion item
+	 * @type {string}
+	 */
+	export let id = slugify(title);
+	/**
+	 * Set the heading level for the accordion items
+	 * @type {"h2"|"h3"}
+	 */
+	export let headingTag = "h2";
 
-  let el;
-
-  const elements = getContext("elements");
-  const allOpen = getContext("allOpen");
-
-  function updateAllOpen(e) {
-    if (el && $elements) {
-      $allOpen = e.newState === "open" ? [...$elements].every((el) => el.open) : false;
-    }
-  }
-
-  onMount(() => {
-    $elements.add(el);
-    return () => $elements.delete(el);
-  });
+	const dataGroup = getContext("dataGroup");
 </script>
 
-<details
-  id="accordion-1"
-  class="ons-collapsible ons-js-collapsible ons-details--accordion"
-  data-group="accordion"
-  bind:this="{el}"
-  bind:open="{open}"
-  on:toggle="{updateAllOpen}"
->
-  <summary class="ons-collapsible__heading ons-js-collapsible-heading ons-details__heading">
-    <h2 class="ons-collapsible__title">{title}</h2>
-    <span class="ons-collapsible__icon">
-      <svg
-        class="ons-icon"
-        viewBox="0 0 8 13"
-        xmlns="http://www.w3.org/2000/svg"
-        focusable="false"
-        fill="currentColor"
-        ><path
-          d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
-          transform="translate(-5.02 -1.59)"></path></svg
-      >
-    </span>
-  </summary>
-  <div id="{id}-content" class="ons-details__content ons-js-details-content">
-    <slot />
-  </div>
-</details>
-
-<style>
-  .ons-details__heading {
-    color: var(--link, --ons-color-text-link);
-  }
-  .ons-details__heading:hover {
-    color: var(--link, --ons-color-text-link-hover);
-  }
-  .ons-svg-icon {
-    color: var(--link, --ons-color-text-link);
-    fill: var(--link, --ons-color-text-link);
-  }
-  .ons-details__heading:hover:not(:focus) .ons-details__title {
-    -webkit-text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px;
-            text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px;
-  }
-  .ons-collapsible .ons-collapsible__icon {
-    top: 0.8rem;
-  }
-  .ons-collapsible[open] .ons-collapsible__icon {
-    top: 1.2rem;
-  }</style>
+<div {id} class="ons-details ons-js-details ons-details--accordion" data-group={dataGroup}>
+	<div class="ons-details__heading ons-js-details-heading" role="button">
+		{#if headingTag === "h3"}
+			<h3 class="ons-details__title ons-u-fs-r--b">{title}</h3>
+		{:else}
+			<h2 class="ons-details__title ons-u-fs-r--b">{title}</h2>
+		{/if}
+		<span class="ons-details__icon">
+			<svg
+				class="ons-icon"
+				viewBox="0 0 8 13"
+				xmlns="http://www.w3.org/2000/svg"
+				focusable="false"
+				fill="currentColor"
+				role="img"
+				title="ons-icon-chevron"
+			>
+				<path
+					d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
+					transform="translate(-5.02 -1.59)"
+				/>
+			</svg></span
+		>
+	</div>
+	<div id="{id}-content" class="ons-details__content ons-js-details-content">
+		<slot />
+	</div>
+</div>

package/dist/{@types/layout → layout}/Accordion/AccordionItem.svelte.d.ts

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

package/dist/layout/Accordion/accordion.d.ts

@@ -0,0 +1,18 @@
+export default class Accordion {
+    constructor(button: any, detailsEls: any);
+    openDetailsEls: any;
+    button: any;
+    buttonInner: any;
+    group: any;
+    detailsEls: any;
+    totalDetailsEls: any;
+    buttonOpenEl: any;
+    buttonOpen: any;
+    closeButton: any;
+    open: any;
+    handleButtonClick(event: any): void;
+    onOpen(): void;
+    onClose(): void;
+    canClose(): boolean;
+    setButton(): void;
+}

package/dist/layout/Accordion/accordion.js

@@ -0,0 +1,64 @@
+export default class Accordion {
+	constructor(button, detailsEls) {
+		this.openDetailsEls = 0;
+
+		this.button = button;
+		this.buttonInner = button.querySelector(".ons-accordion__toggle-all-inner");
+		this.group = button.getAttribute("data-group");
+		this.detailsEls = detailsEls.filter((details) => details.group === this.group);
+		this.totalDetailsEls = this.detailsEls.length;
+		this.buttonOpenEl = this.buttonInner.querySelector(".ons-btn__text");
+		this.buttonOpen = this.buttonOpenEl.innerHTML.trim();
+		this.closeButton = button.getAttribute("data-close-all");
+		this.open = this.detailsEls.find((details) => details.open === true);
+
+		this.detailsEls.forEach((details) => {
+			details.onOpen = this.onOpen.bind(this);
+			details.onClose = this.onClose.bind(this);
+		});
+
+		if (this.open) {
+			this.openDetailsEls = this.totalDetailsEls;
+		}
+
+		this.button.addEventListener("click", this.handleButtonClick.bind(this));
+		this.setButton();
+		this.button.classList.remove("ons-u-d-no");
+	}
+
+	handleButtonClick(event) {
+		event.preventDefault();
+
+		const open = !this.canClose();
+
+		this.detailsEls.forEach((details) => {
+			details.setOpen(open);
+		});
+	}
+
+	onOpen() {
+		this.openDetailsEls++;
+		this.setButton();
+	}
+
+	onClose() {
+		this.openDetailsEls--;
+		this.setButton();
+	}
+
+	canClose() {
+		return this.openDetailsEls === this.totalDetailsEls;
+	}
+
+	setButton() {
+		if (this.canClose()) {
+			this.buttonInner.innerHTML = this.closeButton;
+			this.button.setAttribute("data-ga-label", this.buttonOpen);
+			this.button.setAttribute("aria-expanded", "true");
+		} else {
+			this.buttonInner.innerHTML = this.buttonOpen;
+			this.button.setAttribute("data-ga-label", this.closeButton);
+			this.button.setAttribute("aria-expanded", "false");
+		}
+	}
+}

package/dist/layout/Accordion/details.d.ts

@@ -0,0 +1,14 @@
+export default class Details {
+    constructor(detailsElement: any);
+    saveState: boolean;
+    open: boolean;
+    group: any;
+    details: any;
+    detailsHeader: any;
+    content: any;
+    detailsTitle: any;
+    toggle(event: any): void;
+    setOpen(open: any): void;
+    isOpen: any;
+    keyboardInteraction(event: any): void;
+}

package/dist/layout/Accordion/details.js

@@ -0,0 +1,83 @@
+export default class Details {
+	constructor(detailsElement) {
+		this.saveState = detailsElement.getAttribute("data-save-state") === "true";
+		this.open = detailsElement.getAttribute("data-open") === "true";
+		this.group = detailsElement.getAttribute("data-group");
+
+		// Elements
+		this.details = detailsElement;
+		this.detailsHeader = this.details.querySelector(".ons-js-details-heading");
+		this.content = this.details.querySelector(".ons-js-details-content");
+		this.detailsTitle = this.details.querySelector(".ons-js-corrections-details-title");
+
+		// Initialise
+		const detailsId = detailsElement.getAttribute("id");
+
+		this.details.setAttribute("role", "group");
+		this.detailsHeader.setAttribute("role", "link");
+		this.detailsHeader.setAttribute("aria-controls", detailsId);
+		this.detailsHeader.setAttribute("tabindex", 0);
+
+		if (localStorage.getItem(detailsId) || this.open) {
+			this.setOpen(true);
+		} else {
+			this.setOpen(false);
+		}
+
+		this.detailsHeader.addEventListener("click", this.toggle.bind(this));
+		this.detailsHeader.addEventListener("keydown", this.keyboardInteraction.bind(this));
+		this.details.classList.add("ons-details--initialised");
+	}
+
+	toggle(event) {
+		event.preventDefault();
+		this.setOpen(!this.isOpen);
+	}
+
+	setOpen(open) {
+		if (open !== this.isOpen) {
+			const action = open ? "Open" : "Close";
+			const cls = open ? "add" : "remove";
+			const openAttribute = open ? "set" : "remove";
+			const setText = open ? "Close detail" : "Show detail";
+
+			this.isOpen = open;
+			this.details[`${openAttribute}Attribute`]("open", "");
+			this.details.classList[cls]("ons-details--open");
+			this.detailsHeader.setAttribute("aria-expanded", open);
+			this.content.setAttribute("aria-hidden", !open);
+			this.detailsHeader.setAttribute("data-ga-action", `${action} panel`);
+			if (this.detailsTitle) {
+				this.detailsTitle.textContent = setText;
+			}
+
+			if (this.onOpen && this.onClose) {
+				if (open) {
+					this.onOpen();
+				} else {
+					this.onClose();
+				}
+			}
+		}
+
+		if (this.saveState === true && open === true) {
+			localStorage.setItem(this.details.getAttribute("id"), true);
+		} else {
+			localStorage.removeItem(this.details.getAttribute("id"));
+		}
+	}
+
+	keyboardInteraction(event) {
+		const keyCode = event.which;
+		switch (keyCode) {
+			// Enter/Space
+			case 13:
+			case 32:
+				event.preventDefault();
+				event.stopPropagation();
+
+				this.toggle(event);
+				break;
+		}
+	}
+}

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

@@ -0,0 +1,19 @@
+An accordion component.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/accordion).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Accordion, AccordionItem } from "@onsvisual/svelte-components";
+</script>
+
+<Accordion>
+  <AccordionItem title="First item">
+    <p>Contents of first item.</p>
+  </AccordionItem>
+  <AccordionItem title="Second item">
+    <p>Contents of second item.</p>
+  </AccordionItem>
+</Accordion>
+```

package/dist/layout/AnalyticsBanner/AnalyticsBanner.stories.svelte

@@ -0,0 +1,16 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import AnalyticsBanner from "./AnalyticsBanner.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/AnalyticsBanner",
+		component: AnalyticsBanner,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
+	});
+</script>
+
+<Story name="Default" args={{}} />

package/dist/{@types/layout/AnalyticsBanner/AnalyticsBanner.svelte.d.ts → layout/AnalyticsBanner/AnalyticsBanner.stories.svelte.d.ts}

@@ -1,14 +1,8 @@
-export function analyticsEvent(props: any): void;
 /** @typedef {typeof __propDef.props}  AnalyticsBannerProps */
 /** @typedef {typeof __propDef.events}  AnalyticsBannerEvents */
 /** @typedef {typeof __propDef.slots}  AnalyticsBannerSlots */
 export default class AnalyticsBanner extends SvelteComponentTyped<{
-    width?: "wide" | "wider";
-    analyticsId?: string;
-    analyticsProps?: any;
-    hideBanner?: boolean;
-    usageCookies?: boolean;
-    pageViewEnabled?: boolean;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -19,12 +13,7 @@ export type AnalyticsBannerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        width?: "wide" | "wider";
-        analyticsId?: string;
-        analyticsProps?: object;
-        hideBanner?: boolean;
-        usageCookies?: boolean;
-        pageViewEnabled?: boolean;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;