@onsvisual/svelte-components 1.0.44 → 1.0.45

package/dist/layout/Accordion/accordion.js

@@ -1,64 +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");
-		}
-	}
-}
+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.js

@@ -1,83 +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;
-		}
-	}
-}
+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

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

@@ -1,16 +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={{}} />
+<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={{}} />