@grantcodes/ui 2.0.0-beta4 → 2.0.0

package/src/components/sidebar/sidebar.test.js

@@ -0,0 +1,196 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup, click } from "../../test-utils/index.js";
+import "./sidebar.js";
+
+describe("Sidebar Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-sidebar");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should have left position by default", async () => {
+		element = await fixture("grantcodes-sidebar");
+		assert.strictEqual(element.position, "left", "Should have left position by default");
+	});
+
+	it("should not be collapsed by default", async () => {
+		element = await fixture("grantcodes-sidebar");
+		assert.strictEqual(element.collapsed, false, "Should not be collapsed by default");
+	});
+
+	it("should be collapsible by default", async () => {
+		element = await fixture("grantcodes-sidebar");
+		assert.strictEqual(element.collapsible, true, "Should be collapsible by default");
+	});
+
+	it("should have default width", async () => {
+		element = await fixture("grantcodes-sidebar");
+		assert.strictEqual(element.width, "280px", "Should have default width");
+	});
+
+	it("should render aside element", async () => {
+		element = await fixture("grantcodes-sidebar");
+		const aside = element.shadowRoot.querySelector("aside");
+		assert.ok(aside, "Aside element should exist");
+	});
+
+	it("should apply left position class", async () => {
+		element = await fixture("grantcodes-sidebar", {
+			position: "left",
+		});
+
+		const sidebar = element.shadowRoot.querySelector(".sidebar--left");
+		assert.ok(sidebar, "Should have left position class");
+	});
+
+	it("should apply right position class", async () => {
+		element = await fixture("grantcodes-sidebar", {
+			position: "right",
+		});
+
+		const sidebar = element.shadowRoot.querySelector(".sidebar--right");
+		assert.ok(sidebar, "Should have right position class");
+	});
+
+	it("should apply collapsed class when collapsed", async () => {
+		element = await fixture("grantcodes-sidebar", {
+			collapsed: true,
+		});
+
+		const sidebar = element.shadowRoot.querySelector(".sidebar--collapsed");
+		assert.ok(sidebar, "Should have collapsed class");
+	});
+
+	it("should render toggle button when collapsible", async () => {
+		element = await fixture("grantcodes-sidebar", {
+			collapsible: true,
+		});
+
+		const toggle = element.shadowRoot.querySelector(".sidebar__toggle");
+		assert.ok(toggle, "Toggle button should exist");
+	});
+
+	it("should not render toggle button when not collapsible", async () => {
+		element = await fixture("grantcodes-sidebar", {
+			collapsible: false,
+		});
+
+		const toggle = element.shadowRoot.querySelector(".sidebar__toggle");
+		assert.ok(!toggle, "Toggle button should not exist");
+	});
+
+	it("should toggle collapsed state when button is clicked", async () => {
+		element = await fixture("grantcodes-sidebar", {
+			collapsible: true,
+		});
+
+		const toggle = element.shadowRoot.querySelector(".sidebar__toggle");
+
+		assert.strictEqual(element.collapsed, false, "Should start not collapsed");
+
+		click(toggle);
+		await element.updateComplete;
+
+		assert.strictEqual(element.collapsed, true, "Should be collapsed after click");
+	});
+
+	it("should emit toggle event when collapsed state changes", async () => {
+		element = await fixture("grantcodes-sidebar", {
+			collapsible: true,
+		});
+
+		let toggledState = null;
+		element.addEventListener("toggle", (e) => {
+			toggledState = e.detail.collapsed;
+		});
+
+		const toggle = element.shadowRoot.querySelector(".sidebar__toggle");
+		click(toggle);
+
+		await element.updateComplete;
+
+		assert.strictEqual(toggledState, true, "Toggle event should fire with collapsed state");
+	});
+
+	it("should apply custom width", async () => {
+		element = await fixture("grantcodes-sidebar", {
+			width: "350px",
+		});
+
+		const aside = element.shadowRoot.querySelector("aside");
+		const style = aside.getAttribute("style");
+		assert.ok(style.includes("--sidebar-width: 350px"), "Should set custom width");
+	});
+
+	it("should have mobile toggle button", async () => {
+		element = await fixture("grantcodes-sidebar");
+		const mobileToggle = element.shadowRoot.querySelector(".sidebar__mobile-toggle");
+		assert.ok(mobileToggle, "Mobile toggle button should exist");
+	});
+
+	it("should have content container", async () => {
+		element = await fixture("grantcodes-sidebar");
+		const content = element.shadowRoot.querySelector(".sidebar__content");
+		assert.ok(content, "Content container should exist");
+	});
+
+	it("should have slot for content", async () => {
+		element = await fixture("grantcodes-sidebar");
+		const slot = element.shadowRoot.querySelector("slot");
+		assert.ok(slot, "Slot should exist for content");
+	});
+
+	it("should toggle mobile drawer when mobile toggle is clicked", async () => {
+		element = await fixture("grantcodes-sidebar");
+		const mobileToggle = element.shadowRoot.querySelector(".sidebar__mobile-toggle");
+
+		assert.strictEqual(element._drawerOpen, false, "Drawer should start closed");
+
+		click(mobileToggle);
+		await element.updateComplete;
+
+		assert.strictEqual(element._drawerOpen, true, "Drawer should be open after click");
+	});
+
+	it("should emit drawer-toggle event", async () => {
+		element = await fixture("grantcodes-sidebar");
+
+		let drawerState = null;
+		element.addEventListener("drawer-toggle", (e) => {
+			drawerState = e.detail.open;
+		});
+
+		const mobileToggle = element.shadowRoot.querySelector(".sidebar__mobile-toggle");
+		click(mobileToggle);
+
+		await element.updateComplete;
+
+		assert.strictEqual(drawerState, true, "Drawer toggle event should fire");
+	});
+
+	it("should render overlay when drawer is open", async () => {
+		element = await fixture("grantcodes-sidebar");
+		element._drawerOpen = true;
+
+		await element.updateComplete;
+
+		const overlay = element.shadowRoot.querySelector(".sidebar__overlay");
+		assert.ok(overlay, "Overlay should exist when drawer is open");
+	});
+
+	it("should not render overlay when drawer is closed", async () => {
+		element = await fixture("grantcodes-sidebar");
+		const overlay = element.shadowRoot.querySelector(".sidebar__overlay");
+		assert.ok(!overlay, "Overlay should not exist when drawer is closed");
+	});
+});
+
+

package/src/components/tabs/index.js

@@ -0,0 +1,2 @@
+export * from "./tabs";
+export * from "./tab";

package/src/components/tabs/internal/tabs-button.component.js

@@ -0,0 +1,39 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { GrantCodesTabsItem } from "./tabs-item.component.js";
+import { tabsStyles } from "../tabs.styles.js";
+
+export class GrantCodesTabsButton extends GrantCodesTabsItem {
+	static shadowRootOptions = {
+		...LitElement.shadowRootOptions,
+		delegatesFocus: true,
+	};
+
+	static styles = [tabsStyles];
+
+	render() {
+		console.log("GrantCodesTabsButton", this, {
+			active: this.active,
+			label: this.label,
+			index: this.index,
+			containerId: this.containerId,
+			buttonId: this.buttonId,
+			panelId: this.panelId,
+			content: this.content,
+		});
+		return html`
+			<button
+				id="${this.buttonId}"
+				type="button"
+				role="tab"
+				aria-selected=${this.active}
+				aria-controls="${this.panelId}"
+				tabindex=${ifDefined(this.active ? undefined : "-1")} 
+				class="tabs__tab ${this.active ? "is-active" : ""}"
+			>
+				<span>${this.label}</span>
+			</button>
+		`;
+	}
+}

package/src/components/tabs/internal/tabs-button.js

@@ -0,0 +1,7 @@
+import { GrantCodesTabsButton } from "./tabs-button.component.js";
+
+export * from "./tabs-button.component.js";
+export default GrantCodesTabsButton;
+
+customElements.define("grantcodes-tabs-button", GrantCodesTabsButton);
+

package/src/components/tabs/internal/tabs-item.component.js

@@ -0,0 +1,39 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+
+export class GrantCodesTabsItem extends LitElement {
+	static properties = {
+		active: { type: Boolean },
+		label: { type: String },
+		index: { type: Number },
+		containerId: { type: String },
+		buttonId: { type: String, reflect: true },
+		panelId: { type: String },
+		content: { type: String },
+	};
+
+	constructor() {
+		super();
+
+		this.active = false;
+		this.label = "";
+		this.index = -1;
+		this.containerId = "";
+	}
+
+	get buttonId() {
+		return `${this.containerId}-button-${this.index.toString()}`;
+	}
+
+	get panelId() {
+		return `${this.containerId}-panel-${this.index.toString()}`;
+	}
+
+	get content() {
+		return this.label;
+	}
+
+	render() {
+		return html``;
+	}
+}

package/src/components/tabs/tab.component.js

@@ -0,0 +1,20 @@
+import { GrantCodesTabsItem } from "./internal/tabs-item.component.js";
+import { html } from "lit/static-html.js";
+import { tabsStyles } from "./tabs.styles.js";
+
+export class GrantCodesTab extends GrantCodesTabsItem {
+	static styles = [tabsStyles];
+
+	render() {
+		return html`
+			<div
+				id="${this.panelId}"
+				role="tabpanel"
+				aria-labelledby="${this.buttonId}"
+				class="tabs__panel ${this.active ? "is-active" : ""}"
+			>
+				<slot></slot>
+			</div>
+		`;
+	}
+}

package/src/components/tabs/tab.js

@@ -0,0 +1,7 @@
+import { GrantCodesTab } from "./tab.component.js";
+
+export * from "./tab.component.js";
+export default GrantCodesTab;
+
+customElements.define("grantcodes-tab", GrantCodesTab);
+

package/src/components/tabs/tabs.component.js

@@ -0,0 +1,130 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { tabsStyles } from "./tabs.styles.js";
+import { GrantCodesTab } from "./tab.component.js";
+import { GrantCodesTabsButton } from "./internal/tabs-button.component.js";
+import "./internal/tabs-button.js";
+import { generateId } from "../../lib/generate-id.js";
+
+export class GrantCodesTabs extends LitElement {
+	// Styles are scoped to this element: they won't conflict with styles
+	// on the main page or in other components. Styling API can be exposed
+	// via CSS custom properties.
+	static styles = [tabsStyles];
+
+	static properties = {
+		label: { type: String },
+		_focusedTabIndex: { type: Number, state: true },
+	};
+
+	constructor() {
+		super();
+
+		this.label = "";
+		this._focusedTabIndex = -1;
+
+		if (!this.id) {
+			this.id = generateId("tabs");
+		}
+	}
+
+	/** @type {GrantCodesTab[]} */
+	tabs = [];
+
+	/** @type {GrantCodesTabsButton[]} */
+	tabButtons = [];
+
+	get activeTab() {
+		return this.tabs.find((tab) => tab.active) || null;
+	}
+
+	set activeTab(tab) {
+		// Ignore setting activeTab to null. As long as there are children, one tab
+		// must be selected.
+		this.tabs.forEach((t, i) => {
+			if (t === tab) {
+				t.active = true;
+				this._focusedTabIndex = i;
+			} else {
+				t.active = false;
+			}
+		});
+		this.requestUpdate();
+	}
+
+	initializeTabs() {
+		this.tabs.forEach((tab, i) => {
+			tab.index = i;
+			tab.containerId = this.id;
+		});
+
+		// If no tab is active, default to the first tab.
+		if (this.activeTab == null) {
+			this._focusedTabIndex = 0;
+			this.activeTab = this.tabs[0];
+		}
+	}
+
+	firstUpdated() {
+		const slot = this.renderRoot.querySelector("slot");
+		this.tabs = slot
+			? slot.assignedElements().filter((el) => el.tagName === "GRANTCODES-TAB")
+			: [];
+		this.tabButtons = Array.from(
+			this.renderRoot.querySelectorAll("grantcodes-tabs-button"),
+		);
+		this.initializeTabs();
+	}
+
+	handleTabKeyDown(e) {
+		if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+			e.preventDefault();
+			const tabs = this.tabs;
+			const nextIndex =
+				e.key === "ArrowRight"
+					? (this._focusedTabIndex + 1) % tabs.length
+					: (this._focusedTabIndex - 1 + tabs.length) % tabs.length;
+
+			// Focus the next tab button.
+			const tabButton = this.tabButtons[nextIndex];
+			if (tabButton) {
+				tabButton.focus();
+				this._focusedTabIndex = nextIndex;
+			}
+		}
+	}
+
+	renderTabButtons() {
+		return this.tabs.map(
+			(tab, i) => html`
+				<grantcodes-tabs-button
+					index=${i + 1}
+					label="${tab.label}"
+					containerId="${this.id}"
+					active=${tab.active}
+					@click=${() => {
+						this.activeTab = tab;
+					}}
+					@keydown=${this.handleTabKeyDown}
+				></grantcodes-tabs-button>
+			`,
+		);
+	}
+
+	render() {
+		return html`
+			<div class="tabs" id="${this.id}">
+				<div role="tablist" class="tabs__tablist" aria-label=${ifDefined(this.label)}>
+					<div class="tabs__tablist__inner">
+						${this.renderTabButtons()}
+					</div>
+				</div>
+
+				<div class="tabs__panels">
+					<slot></slot>
+				</div>
+			</div>
+		`;
+	}
+}

package/src/components/tabs/tabs.js

@@ -0,0 +1,7 @@
+import { GrantCodesTabs } from "./tabs.component.js";
+
+export * from "./tabs.component.js";
+export default GrantCodesTabs;
+
+customElements.define("grantcodes-tabs", GrantCodesTabs);
+

package/src/components/tabs/tabs.stories.js

@@ -0,0 +1,39 @@
+import { html } from "lit/static-html.js";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+const { events, args, argTypes, template } =
+	getStorybookHelpers("grantcodes-tabs");
+import "./tabs.js";
+import "./tab.js";
+
+const meta = {
+	title: "Components/Tabs",
+	component: "grantcodes-tabs",
+	args: {
+		...args,
+	},
+	argTypes,
+	render: (args) =>
+		template(
+			args,
+			html`
+				<grantcodes-tab label="Tab 1">
+					<p>This is the content of the first tab.</p>
+				</grantcodes-tab>
+				<grantcodes-tab label="Tab 2">
+					<p>This is the content of the second tab.</p>
+				</grantcodes-tab>
+				<grantcodes-tab label="Tab 3">
+					<p>This is the content of the third tab.</p>
+				</grantcodes-tab>
+			`,
+		),
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+export const Tabs = {};

package/src/components/tabs/tabs.styles.js

@@ -0,0 +1,88 @@
+import { css } from "lit";
+
+export const tabsStyles = css`
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+.tabs {
+	--border-width: 3px;
+	display: block;
+}
+
+.tabs__tablist {
+	overflow: auto;
+	contain: none;
+}
+
+.tabs__tablist__inner {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	width: fit-content;
+	min-width: 100%;
+	background-image: linear-gradient(
+		var(--g-theme-color-border-default, var(--g-color-brand-purple-100)),
+		var(--g-theme-color-border-default, var(--g-color-brand-purple-100))
+	);
+	background-size: auto var(--border-width);
+	background-position: bottom;
+	background-repeat: repeat-x;
+}
+
+.tabs__tab {
+	padding: 0.6em 1.2em;
+	line-height: 1;
+	font-size: 1rem;
+	border: none;
+	border-block-start: var(--border-width) solid transparent;
+	border-block-end: var(--border-width) solid var(--g-theme-color-border-default, var(--g-color-brand-purple-100));
+	background-color: transparent;
+	color: var(--g-theme-color-content-default);
+	opacity: 0.7;
+	white-space: nowrap;
+	cursor: pointer;
+	transition: opacity 0.2s, border-color 0.2s, background-color 0.2s;
+	--component-focus-ring-offset: calc(var(--component-focus-ring-width) * -1);
+}
+
+@media (min-width: 40em) {
+	.tabs__tab {
+		padding-inline: 1rem;
+	}
+}
+
+.tabs__tab:hover,
+.tabs__tab:focus-visible {
+	opacity: 1;
+	border-block-end-color: var(--g-theme-color-border-default, var(--g-color-brand-purple-200));
+}
+
+.tabs__tab.is-active {
+	border-block-end-color: var(--g-theme-color-border-brand, var(--g-color-brand-purple-500));
+	background-color: var(--g-theme-color-background-subtle);
+	color: var(--g-theme-color-content-default);
+	z-index: 1;
+	position: relative;
+	opacity: 1;
+}
+
+.tabs__tab:focus-visible {
+	outline: 2px solid var(--component-focus-ring-color, rgba(106, 91, 197, 0.4));
+	outline-offset: 2px;
+}
+
+.tabs__panel {
+	margin-block-start: 1rem;
+	outline-color: var(--g-theme-color-border-brand, var(--g-color-brand-purple-500));
+	outline-offset: 1rem;
+	display: none;
+}
+
+.tabs__panel.is-active {
+	display: block;
+}
+`;