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

package/dist/layout/Tabs/tabs.js

@@ -0,0 +1,302 @@
+// Tabs component JS
+
+// The tab js is based on the GDS tabs component(https://design-system.service.gov.uk/components/tabs/)
+// https://github.com/alphagov/govuk-frontend/blob/master/src/components/tabs/tabs.js
+
+import { matchMedia } from "../../js/utils.js";
+
+const classTab = "ons-tab";
+const classTabTitle = "ons-tabs__title";
+const classTabList = "ons-tabs__list";
+const classTabListItems = "ons-tab__list-item";
+const classTabsPanel = "ons-tabs__panel";
+const matchMediaUtil = matchMedia;
+
+export default class Tabs {
+	constructor(component) {
+		this.boundTabClick = this.onTabClick.bind(this);
+		this.boundTabKeydown = this.onTabKeydown.bind(this);
+
+		this.component = component;
+		this.tabsTitle = component.querySelector(`.${classTabTitle}`);
+		this.tabs = [...component.getElementsByClassName(classTab)];
+		this.tabList = component.getElementsByClassName(classTabList);
+		this.tabListContainer = this.tabList[0].parentElement;
+		this.tabListItems = [...component.getElementsByClassName(classTabListItems)];
+		this.tabPanels = [...component.getElementsByClassName(classTabsPanel)];
+
+		this.jsHiddenClass = "ons-tabs__panel--hidden";
+		this.jsTabListAsRowClass = "ons-tabs__list--row";
+		this.jsTabItemAsRowClass = "ons-tab__list-item--row";
+		this.jsTabAsListClass = "ons-tab--row";
+
+		this.noInitialActiveTab = this.component.getAttribute("data-no-initial-active-tab");
+		if (matchMediaUtil.hasMatchMedia()) {
+			this.setupViewportChecks();
+		} else {
+			this.makeTabs();
+		}
+	}
+
+	// Set up checks for responsive functionality
+	// The tabs will display as tabs up until this.breakpoint is reached
+	// Tabs will then display as a table of contents list and show full content for this.breakpoint viewports
+	// Aria tags are added only in table of contents view
+	setupViewportChecks() {
+		const breakpoint = () => {
+			let finalBreakpoint = 0;
+			this.tabListItems.forEach((tab) => {
+				finalBreakpoint += tab.offsetWidth;
+			});
+			if (finalBreakpoint < 450) {
+				return (finalBreakpoint = 450);
+			} else {
+				return finalBreakpoint;
+			}
+		};
+		this.viewport = matchMediaUtil(`(min-width: ${breakpoint()}px)`);
+		this.viewport.addListener(this.checkViewport.bind(this));
+		this.checkViewport();
+	}
+
+	checkViewport() {
+		if (this.viewport.matches) {
+			this.makeTabs();
+		} else {
+			this.makeList();
+		}
+	}
+
+	makeTabs() {
+		this.tabList[0].setAttribute("role", "tablist");
+		this.tabList[0].classList.add(this.jsTabListAsRowClass);
+
+		this.tabsTitle.classList.add("ons-u-vh");
+		this.tabListContainer.classList.add("ons-tabs__container");
+		this.tabPanels.forEach((panel) => {
+			panel.setAttribute("tabindex", "0");
+			if (panel.querySelector('[id*="content-title"]')) {
+				panel.firstElementChild.classList.add("ons-u-vh");
+			}
+		});
+
+		this.tabListItems.forEach((item) => {
+			item.setAttribute("role", "presentation");
+			item.classList.add(this.jsTabItemAsRowClass);
+		});
+
+		this.tabs.forEach((tab) => {
+			this.setAttributes(tab);
+			tab.classList.add(this.jsTabAsListClass);
+
+			tab.addEventListener("click", this.boundTabClick, true);
+			tab.addEventListener("keydown", this.boundTabKeydown, true);
+			this.hideTab(tab);
+		});
+
+		const hashTab = this.getTab(window.location.hash);
+		if (!this.noInitialActiveTab || !!hashTab) {
+			const activeTab = hashTab || this.tabs[0];
+			this.showTab(activeTab);
+		}
+
+		this.ensureTabIndexExists();
+
+		this.component.boundOnHashChange = this.onHashChange.bind(this);
+		window.addEventListener("hashchange", this.component.boundOnHashChange, true);
+	}
+
+	makeList() {
+		this.tabList[0].removeAttribute("role");
+		this.tabList[0].classList.remove(this.jsTabListAsRowClass);
+		this.tabListContainer.classList.remove("ons-tabs__container");
+		this.tabsTitle.classList.remove("ons-u-vh");
+
+		this.tabPanels.forEach((panel) => {
+			panel.removeAttribute("tabindex", "0");
+			if (panel.firstElementChild.classList.contains("ons-u-vh")) {
+				panel.firstElementChild.classList.remove("ons-u-vh");
+			}
+		});
+
+		this.tabListItems.forEach((item) => {
+			item.removeAttribute("role", "presentation");
+			item.classList.remove(this.jsTabItemAsRowClass);
+		});
+
+		this.tabs.forEach((tab) => {
+			tab.removeEventListener("click", this.boundTabClick, true);
+			tab.removeEventListener("keydown", this.boundTabKeydown, true);
+			tab.classList.remove(this.jsTabAsListClass);
+			this.unsetAttributes(tab);
+		});
+
+		window.removeEventListener("hashchange", this.component.boundOnHashChange, true);
+	}
+
+	// Handle haschange so that the browser can cycle through the tab history
+	onHashChange() {
+		const hash = window.location.hash;
+		const tabWithHash = this.getTab(hash);
+		if (!tabWithHash) {
+			return;
+		}
+
+		if (this.changingHash) {
+			this.changingHash = false;
+			return;
+		}
+
+		const currentTab = this.getCurrentTab();
+		if (!!currentTab) {
+			this.hideTab(currentTab);
+		}
+		this.showTab(tabWithHash);
+		tabWithHash.focus();
+	}
+
+	hideTab(tab) {
+		this.unhighlightTab(tab);
+		this.hidePanel(tab);
+	}
+
+	showTab(tab) {
+		this.highlightTab(tab);
+		this.showPanel(tab);
+	}
+
+	getTab(hash) {
+		return this.component.querySelector('.ons-tab[href="' + hash + '"]');
+	}
+
+	// Set aria tags
+	setAttributes(tab) {
+		const panelId = this.getHref(tab).slice(1);
+		tab.setAttribute("id", "tab_" + panelId);
+		tab.setAttribute("role", "tab");
+		tab.setAttribute("aria-controls", panelId);
+		tab.setAttribute("tabindex", "-1");
+
+		const panel = this.getPanel(tab);
+		panel.setAttribute("role", "tabpanel");
+		panel.setAttribute("aria-labelledby", tab.id);
+		panel.classList.add(this.jsHiddenClass);
+	}
+
+	// Remove aria tags for table of contents view
+	unsetAttributes(tab) {
+		tab.removeAttribute("id");
+		tab.removeAttribute("role");
+		tab.removeAttribute("aria-controls");
+		tab.removeAttribute("tabindex");
+		tab.removeAttribute("aria-selected");
+
+		const panel = this.getPanel(tab);
+		panel.removeAttribute("role");
+		panel.removeAttribute("aria-labelledby");
+		panel.classList.remove(this.jsHiddenClass);
+	}
+
+	onTabClick(e) {
+		e.preventDefault();
+		const newTab = e.target;
+		const currentTab = this.getCurrentTab();
+
+		if (!!currentTab) {
+			this.hideTab(currentTab);
+		}
+
+		if (!this.noInitialActiveTab || newTab !== currentTab) {
+			this.showTab(newTab);
+			this.createHash(newTab);
+		}
+
+		this.ensureTabIndexExists();
+	}
+
+	ensureTabIndexExists() {
+		// Ensure that at least the first tab has a tab index when all tabs are hidden.
+		if (!this.tabs.find((tab) => tab.getAttribute("tabindex") === "0")) {
+			this.tabs[0].setAttribute("tabindex", "0");
+		}
+	}
+
+	createHash(tab) {
+		const panel = this.getPanel(tab);
+		const id = panel.id;
+		panel.id = "";
+		this.changingHash = true;
+		window.location.hash = this.getHref(tab).slice(1);
+		panel.id = id;
+	}
+
+	onTabKeydown(event) {
+		if (event.which === 37) {
+			this.focusPreviousTab();
+			event.preventDefault();
+		} else if (event.which === 39) {
+			this.focusNextTab();
+			event.preventDefault();
+		} else if (event.which === 32) {
+			this.onTabClick(event);
+		}
+	}
+
+	focusNextTab() {
+		const focusedTab = this.getFocusedTab();
+		const nextTabListItem = focusedTab.nextElementSibling;
+		if (nextTabListItem) {
+			nextTabListItem.firstElementChild.focus();
+		}
+	}
+
+	focusPreviousTab() {
+		const focusedTab = this.getFocusedTab();
+		const previousTabListItem = focusedTab.previousElementSibling;
+		if (previousTabListItem) {
+			previousTabListItem.firstElementChild.focus();
+		}
+	}
+
+	getPanel(tab) {
+		const panelSelector = this.getHref(tab).replace(/\./g, "\\.");
+		const panel = this.component.querySelector(panelSelector);
+		return panel;
+	}
+
+	showPanel(tab) {
+		const panel = this.getPanel(tab);
+		panel.classList.remove(this.jsHiddenClass);
+	}
+
+	hidePanel(tab) {
+		const panel = this.getPanel(tab);
+		panel.classList.add(this.jsHiddenClass);
+	}
+
+	unhighlightTab(tab) {
+		tab.setAttribute("aria-selected", "false");
+		tab.classList.remove("ons-tab--selected");
+		tab.setAttribute("tabindex", "-1");
+	}
+
+	highlightTab(tab) {
+		tab.setAttribute("aria-selected", "true");
+		tab.classList.add("ons-tab--selected");
+		tab.setAttribute("tabindex", "0");
+	}
+
+	getFocusedTab() {
+		return document.activeElement.parentNode;
+	}
+
+	getCurrentTab() {
+		return this.component.querySelector(".ons-tab--selected");
+	}
+
+	getHref(tab) {
+		const href = tab.getAttribute("href");
+		const hash = href.slice(href.indexOf("#"), href.length);
+		return hash;
+	}
+}

package/dist/templates/EmbedArticle/EmbedArticle.stories.svelte

@@ -0,0 +1,72 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import componentDocs from "./docs/component.md?raw";
+	import Embed from "../../wrappers/Embed/Embed.svelte";
+	import Highlight from "../../layout/Highlight/Highlight.svelte";
+	import Section from "../../layout/Section/Section.svelte";
+	import Grid from "../../layout/Grid/Grid.svelte";
+	import Select from "../../inputs/Select/Select.svelte";
+
+	const { Story } = defineMeta({
+		title: "Templates/Embedded article",
+		component: Embed,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
+	});
+</script>
+
+<Story name="Default" args={{}} asChild>
+	<Embed>
+		<Highlight bigText={false} marginBottom={false}>
+			<div style:padding="0 12px">
+				<h2>This is a sub-headline</h2>
+				<p>This is a description of the embedded interactive.</p>
+				<Select label="Select your area" />
+			</div>
+		</Highlight>
+
+		<Section title="Section title" marginTop={true}>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+				laboris nisi ut aliquip ex ea commodo consequat..
+			</p>
+			<p>
+				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+		</Section>
+
+		<Grid width="medium" caption="This is a caption text">
+			<div class="grid-cell"></div>
+		</Grid>
+
+		<Section title="Another section title">
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+				laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+				voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+			</p>
+		</Section>
+
+		<Section title="Yet another section title">
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+				laboris nisi ut aliquip ex ea commodo consequat.
+			</p>
+		</Section>
+	</Embed>
+</Story>
+
+<style>
+	.grid-cell {
+		background: var(--ons-color-grey-10);
+		min-height: 200px;
+		width: 100%;
+	}
+</style>

package/dist/templates/EmbedArticle/EmbedArticle.stories.svelte.d.ts

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

package/dist/templates/EmbedArticle/docs/component.md

@@ -0,0 +1,56 @@
+A full page article template with compact header and footer, suitable for scrollytelling and other feature articles.
+
+(Note: The scroller in this example will not preview correctly in the iframe on this page. You can select the example from the menu instead.)
+
+<!-- prettier-ignore -->
+```html
+<!-- +page.svelte -->
+<script>
+  import "@onsvisual/svelte-components/css/main.css"; // This is more typically imported in the global +layout.svelte
+  import { Embed, Highlight, Select, Section, Grid } from "@onsvisual/svelte-components";
+</script>
+
+<Embed>
+  <Highlight bigText={false} marginBottom={false}>
+    <div style:padding="0 12px">
+      <h2>This is a sub-headline</h2>
+      <p>This is a description of the embedded interactive.</p>
+      <Select label="Select your area" />
+    </div>
+  </Highlight>
+
+  <Section title="Section title" marginTop={true}>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat..
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+      mollit anim id est laborum.
+    </p>
+  </Section>
+
+  <Grid width="medium" caption="This is a caption text">
+    <div class="grid-cell"></div>
+  </Grid>
+
+  <Section title="Another section title">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+  </Section>
+
+  <Section title="Yet another section title">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+  </Section>
+</Embed>
+```

package/dist/templates/FeatureArticle/FeatureArticle.stories.svelte

@@ -0,0 +1,151 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import componentDocs from "./docs/component.md?raw";
+
+	import Main from "../../wrappers/Main/Main.svelte";
+	import Header from "../../layout/Header/Header.svelte";
+	import Hero from "../../layout/Hero/Hero.svelte";
+	import Container from "../../wrappers/Container/Container.svelte";
+	import Highlight from "../../layout/Highlight/Highlight.svelte";
+	import Section from "../../layout/Section/Section.svelte";
+	import Grid from "../../layout/Grid/Grid.svelte";
+	import GridCell from "../../layout/Grid/GridCell.svelte";
+	import Blockquote from "../../decorators/Blockquote/Blockquote.svelte";
+	import Em from "../../decorators/Em/Em.svelte";
+	import Divider from "../../decorators/Divider/Divider.svelte";
+	import Scroller from "../../layout/Scroller/Scroller.svelte";
+	import ScrollerSection from "../../layout/Scroller/ScrollerSection.svelte";
+	import Footer from "../../layout/Footer/Footer.svelte";
+
+	const { Story } = defineMeta({
+		title: "Templates/Feature article",
+		component: Header,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: {
+			...withComponentDocs(componentDocs),
+			layout: "fullscreen",
+			docs: { story: { inline: false, iframeHeight: 600 } }
+		}
+	});
+</script>
+
+<script>
+	const scrollerColors = ["#ddd", "#777", "#222"];
+	let scrollerColor = scrollerColors[0];
+</script>
+
+<Story name="Default" args={{}} asChild>
+	<Header compact />
+	<Main>
+		<Hero
+			theme="blue"
+			title="This is an article title"
+			lede="This is a short, introductory sentence"
+			height={400}
+		>
+			1 January 2025
+		</Hero>
+
+		<Highlight height={400} marginBottom={false}>
+			<p>This is a test paragraph.</p>
+			<p>This is another test paragraph.</p>
+		</Highlight>
+
+		<Section title="Section title" marginTop={true}>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+				laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+				voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+				cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+			</p>
+			<Blockquote attribution="A. Person"
+				>This is a blockquote, white comprises of a large block of inset text.</Blockquote
+			>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+				laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+				voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+				cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+			</p>
+		</Section>
+
+		<Grid colWidth="medium" caption="This is a caption text">
+			<GridCell><div class="placeholder"></div></GridCell>
+			<GridCell><div class="placeholder"></div></GridCell>
+			<GridCell><div class="placeholder"></div></GridCell>
+		</Grid>
+
+		<Divider />
+
+		<Section title="Another section title">
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+				laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+				voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+				cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+			</p>
+		</Section>
+
+		<Scroller
+			id="scroller"
+			splitscreen
+			on:change={(e) => {
+				scrollerColor = scrollerColors[e.detail.index];
+				console.debug("change", e);
+			}}
+			on:enter={(e) => console.debug("enter", e)}
+			on:exit={(e) => console.debug("exit", e)}
+		>
+			<div slot="background">
+				<Container width="full" height="full" background={scrollerColor} />
+			</div>
+			<div slot="foreground">
+				<ScrollerSection>
+					<p>
+						When this first caption is visible, the background will appear <Em
+							color={scrollerColors[0]}>light grey</Em
+						>.
+					</p>
+				</ScrollerSection>
+				<ScrollerSection>
+					<p>
+						When this section caption is visible, the background will appear <Em
+							color={scrollerColors[1]}>dark grey</Em
+						>.
+					</p>
+				</ScrollerSection>
+				<ScrollerSection>
+					<p>
+						When this third caption is visible, the background will appear <Em
+							color={scrollerColors[2]}>black</Em
+						>.
+					</p>
+				</ScrollerSection>
+			</div>
+		</Scroller>
+
+		<Section title="Yet another section title">
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+				laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+				voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+				cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+			</p>
+		</Section>
+	</Main>
+	<Footer compact />
+</Story>
+
+<style>
+	.placeholder {
+		background: var(--ons-color-grey-10);
+		padding: 12px;
+		height: 200px;
+	}
+</style>

package/dist/templates/FeatureArticle/FeatureArticle.stories.svelte.d.ts

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