@grantcodes/ui 2.0.0-beta.9 → 2.0.0

package/src/components/tabs/tabs.test.js

@@ -0,0 +1,148 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup } from "../../test-utils/index.js";
+import "./tabs.js";
+import "./tab.js";
+
+describe("Tabs Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-tabs");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should have label property", async () => {
+		element = await fixture("grantcodes-tabs", {
+			label: "Navigation tabs",
+		});
+
+		assert.strictEqual(element.label, "Navigation tabs", "Label should be set");
+	});
+
+	it("should render tabs wrapper", async () => {
+		element = await fixture("grantcodes-tabs");
+		const tabs = element.shadowRoot.querySelector(".tabs");
+		assert.ok(tabs, "Tabs wrapper should exist");
+	});
+
+	it("should render tablist with role", async () => {
+		element = await fixture("grantcodes-tabs");
+		const tablist = element.shadowRoot.querySelector('[role="tablist"]');
+		assert.ok(tablist, "Tablist should exist with role");
+		assert.ok(
+			tablist.classList.contains("tabs__tablist"),
+			"Should have tablist class",
+		);
+	});
+
+	it("should render panels container", async () => {
+		element = await fixture("grantcodes-tabs");
+		const panels = element.shadowRoot.querySelector(".tabs__panels");
+		assert.ok(panels, "Panels container should exist");
+	});
+
+	it("should have slot for tab panels", async () => {
+		element = await fixture("grantcodes-tabs");
+		const slot = element.shadowRoot.querySelector(".tabs__panels slot");
+		assert.ok(slot, "Slot should exist for tab panels");
+	});
+
+	it("should generate unique ID", async () => {
+		const element1 = await fixture("grantcodes-tabs");
+		const element2 = await fixture("grantcodes-tabs");
+
+		assert.notStrictEqual(element1.id, element2.id, "IDs should be unique");
+
+		cleanup(element1);
+		cleanup(element2);
+	});
+
+	it("should initialize tabs array", async () => {
+		element = await fixture("grantcodes-tabs");
+		assert.ok(Array.isArray(element.tabs), "Tabs should be an array");
+	});
+
+	it("should initialize tabButtons array", async () => {
+		element = await fixture("grantcodes-tabs");
+		assert.ok(
+			Array.isArray(element.tabButtons),
+			"Tab buttons should be an array",
+		);
+	});
+
+	it("should have focusedTabIndex property", async () => {
+		element = await fixture("grantcodes-tabs");
+		// After firstUpdated, if there are tabs, _focusedTabIndex will be set to 0
+		// If there are no tabs, it should remain -1
+		// Since we're not adding tabs, it should remain -1, but firstUpdated may have run
+		// Check that the property exists and is a number
+		assert.ok(
+			typeof element._focusedTabIndex === "number",
+			"Should have focusedTabIndex property",
+		);
+	});
+
+	it("should support keyboard navigation", async () => {
+		element = await fixture("grantcodes-tabs");
+		// The handleTabKeyDown method handles ArrowRight and ArrowLeft
+		assert.ok(
+			element.handleTabKeyDown,
+			"Should have keyboard navigation handler",
+		);
+	});
+
+	it("should set aria-label on tablist when label is provided", async () => {
+		element = await fixture("grantcodes-tabs", {
+			label: "Main navigation",
+		});
+
+		const tablist = element.shadowRoot.querySelector('[role="tablist"]');
+		assert.strictEqual(
+			tablist.getAttribute("aria-label"),
+			"Main navigation",
+			"Tablist should have aria-label",
+		);
+	});
+
+	it("should manage active tab state", async () => {
+		element = await fixture("grantcodes-tabs");
+
+		// Create and add tab elements
+		const tab1 = document.createElement("grantcodes-tab");
+		tab1.label = "Tab 1";
+		const tab2 = document.createElement("grantcodes-tab");
+		tab2.label = "Tab 2";
+
+		element.appendChild(tab1);
+		element.appendChild(tab2);
+
+		await element.updateComplete;
+
+		// The tabs are initialized in firstUpdated
+		// Check that activeTab getter works
+		assert.ok(element.activeTab !== undefined, "Should have activeTab getter");
+	});
+
+	it("should render tab buttons for each tab", async () => {
+		element = await fixture("grantcodes-tabs");
+
+		const tab1 = document.createElement("grantcodes-tab");
+		tab1.label = "First";
+		const tab2 = document.createElement("grantcodes-tab");
+		tab2.label = "Second";
+
+		element.appendChild(tab1);
+		element.appendChild(tab2);
+
+		await element.updateComplete;
+
+		// Tab buttons are rendered via renderTabButtons method
+		// In a real browser, these would be visible in the shadow DOM
+	});
+});

package/src/components/toast/index.js

@@ -0,0 +1,3 @@
+export * from "./toast.js";
+
+

package/src/components/toast/toast.component.js

@@ -0,0 +1,187 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { cx } from "../../lib/classnames.js";
+import { toastStyles } from "./toast.styles.js";
+import { GrantCodesIcon } from "../icon/icon.component.js";
+import { AlertCircle, Info, CheckCircle2, XCircle, X } from "../../icons.js";
+
+const ICONS = {
+	info: Info,
+	success: CheckCircle2,
+	warning: AlertCircle,
+	error: XCircle,
+};
+
+export class GrantCodesToast extends LitElement {
+	static dependencies = { "grancodes-icon": GrantCodesIcon };
+	static styles = [toastStyles];
+
+	static properties = {
+		variant: { type: String },
+		title: { type: String },
+		duration: { type: Number },
+		position: { type: String },
+		dismissible: { type: Boolean },
+		_visible: { type: Boolean, state: true },
+	};
+
+	constructor() {
+		super();
+
+		/**
+		 * Visual variant
+		 * @type {'info' | 'success' | 'warning' | 'error'}
+		 */
+		this.variant = "info";
+
+		/**
+		 * Toast title
+		 * @type {string}
+		 */
+		this.title = "";
+
+		/**
+		 * Auto-dismiss duration in milliseconds (0 = no auto-dismiss)
+		 * @type {number}
+		 */
+		this.duration = 5000;
+
+		/**
+		 * Toast position
+		 * @type {'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'}
+		 */
+		this.position = "top-right";
+
+		/**
+		 * Whether toast can be manually dismissed
+		 * @type {boolean}
+		 */
+		this.dismissible = true;
+
+		/**
+		 * Internal visibility state
+		 * @type {boolean}
+		 */
+		this._visible = false;
+
+		/**
+		 * Timeout ID for auto-dismiss
+		 * @type {number | null}
+		 */
+		this._dismissTimeout = null;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		// Show toast after a brief delay for animation
+		requestAnimationFrame(() => {
+			this._visible = true;
+		});
+
+		// Set up auto-dismiss
+		if (this.duration > 0) {
+			this._dismissTimeout = setTimeout(() => {
+				this._handleDismiss();
+			}, this.duration);
+		}
+	}
+
+	disconnectedCallback() {
+		if (this._dismissTimeout) {
+			clearTimeout(this._dismissTimeout);
+		}
+		super.disconnectedCallback();
+	}
+
+	_handleDismiss() {
+		this._visible = false;
+
+		// Remove element after animation completes
+		setTimeout(() => {
+			this.dispatchEvent(
+				new CustomEvent("dismiss", {
+					bubbles: true,
+					composed: true,
+				}),
+			);
+			this.remove();
+		}, 300); // Match animation duration
+	}
+
+	_renderDismissButton() {
+		if (!this.dismissible) {
+			return html``;
+		}
+
+		return html`
+			<button
+				type="button"
+				class="toast__close"
+				@click=${this._handleDismiss}
+				aria-label="Dismiss notification"
+			>
+				<grantcodes-icon>${unsafeHTML(X)}</grantcodes-icon>
+			</button>
+		`;
+	}
+
+	render() {
+		const icon = ICONS[this.variant];
+		const toastClass = cx("toast", {
+			[`toast--${this.variant}`]: true,
+			[`toast--${this.position}`]: true,
+			"toast--visible": this._visible,
+		});
+
+		return html`
+			<div class="${toastClass}" role="status" aria-live="polite">
+				<grantcodes-icon class="toast__icon">${unsafeHTML(icon)}</grantcodes-icon>
+
+				<div class="toast__content">
+					${this.title ? html`<div class="toast__title">${this.title}</div>` : ""}
+					<div class="toast__message">
+						<slot></slot>
+					</div>
+				</div>
+
+				${this._renderDismissButton()}
+			</div>
+		`;
+	}
+}
+
+/**
+ * Toast container for managing multiple toasts
+ */
+export class GrantCodesToastContainer extends LitElement {
+	static styles = [toastStyles];
+
+	static properties = {
+		position: { type: String },
+	};
+
+	constructor() {
+		super();
+
+		/**
+		 * Position of the toast container
+		 * @type {'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'}
+		 */
+		this.position = "top-right";
+	}
+
+	render() {
+		const containerClass = cx("toast-container", {
+			[`toast-container--${this.position}`]: true,
+		});
+
+		return html`
+			<div class="${containerClass}">
+				<slot></slot>
+			</div>
+		`;
+	}
+}
+
+

package/src/components/toast/toast.js

@@ -0,0 +1,9 @@
+import { GrantCodesToast, GrantCodesToastContainer } from "./toast.component.js";
+
+export * from "./toast.component.js";
+export default GrantCodesToast;
+
+customElements.define("grantcodes-toast", GrantCodesToast);
+customElements.define("grantcodes-toast-container", GrantCodesToastContainer);
+
+

package/src/components/toast/toast.stories.js

@@ -0,0 +1,169 @@
+import { html } from "lit";
+import "./toast.js";
+
+const meta = {
+	title: "Components/Toast",
+	component: "grantcodes-toast",
+};
+
+export default meta;
+
+/**
+ * Basic toast notification that auto-dismisses after 5 seconds
+ */
+export const Toast = {
+	render: () => html`
+		<grantcodes-toast-container position="top-right">
+			<grantcodes-toast variant="info" title="Information">
+				This is an informational toast message.
+			</grantcodes-toast>
+		</grantcodes-toast-container>
+	`,
+};
+
+/**
+ * All toast variants
+ */
+export const AllVariants = {
+	render: () => html`
+		<grantcodes-toast-container position="top-right">
+			<grantcodes-toast variant="info" title="Info" duration="0">
+				This is an info toast message.
+			</grantcodes-toast>
+			<grantcodes-toast variant="success" title="Success" duration="0">
+				Operation completed successfully!
+			</grantcodes-toast>
+			<grantcodes-toast variant="warning" title="Warning" duration="0">
+				Please review before continuing.
+			</grantcodes-toast>
+			<grantcodes-toast variant="error" title="Error" duration="0">
+				An error occurred. Please try again.
+			</grantcodes-toast>
+		</grantcodes-toast-container>
+	`,
+};
+
+/**
+ * Toast without title
+ */
+export const WithoutTitle = {
+	render: () => html`
+		<grantcodes-toast-container position="top-right">
+			<grantcodes-toast variant="success" duration="0">
+				This toast has no title, just the message content.
+			</grantcodes-toast>
+		</grantcodes-toast-container>
+	`,
+};
+
+/**
+ * Non-dismissible toast (no close button)
+ */
+export const NonDismissible = {
+	render: () => html`
+		<grantcodes-toast-container position="top-right">
+			<grantcodes-toast variant="info" title="Loading" ?dismissible=${false} duration="0">
+				Please wait while we process your request...
+			</grantcodes-toast>
+		</grantcodes-toast-container>
+	`,
+};
+
+/**
+ * Different positions for toast container
+ */
+export const Positions = {
+	render: () => html`
+		<div style="position: relative; height: 400px; border: 1px solid #ccc;">
+			<grantcodes-toast-container position="top-left">
+				<grantcodes-toast variant="info" title="Top Left" duration="0">
+					Toast in top-left corner
+				</grantcodes-toast>
+			</grantcodes-toast-container>
+
+			<grantcodes-toast-container position="top-center">
+				<grantcodes-toast variant="success" title="Top Center" duration="0">
+					Toast in top-center
+				</grantcodes-toast>
+			</grantcodes-toast-container>
+
+			<grantcodes-toast-container position="top-right">
+				<grantcodes-toast variant="warning" title="Top Right" duration="0">
+					Toast in top-right corner
+				</grantcodes-toast>
+			</grantcodes-toast-container>
+
+			<grantcodes-toast-container position="bottom-left">
+				<grantcodes-toast variant="info" title="Bottom Left" duration="0">
+					Toast in bottom-left corner
+				</grantcodes-toast>
+			</grantcodes-toast-container>
+
+			<grantcodes-toast-container position="bottom-center">
+				<grantcodes-toast variant="success" title="Bottom Center" duration="0">
+					Toast in bottom-center
+				</grantcodes-toast>
+			</grantcodes-toast-container>
+
+			<grantcodes-toast-container position="bottom-right">
+				<grantcodes-toast variant="error" title="Bottom Right" duration="0">
+					Toast in bottom-right corner
+				</grantcodes-toast>
+			</grantcodes-toast-container>
+		</div>
+	`,
+};
+
+/**
+ * Stacked toasts showing multiple notifications
+ */
+export const Stacked = {
+	render: () => html`
+		<grantcodes-toast-container position="top-right">
+			<grantcodes-toast variant="info" title="First notification" duration="0">
+				This is the first toast message.
+			</grantcodes-toast>
+			<grantcodes-toast variant="success" title="Second notification" duration="0">
+				This is the second toast message.
+			</grantcodes-toast>
+			<grantcodes-toast variant="warning" title="Third notification" duration="0">
+				This is the third toast message.
+			</grantcodes-toast>
+		</grantcodes-toast-container>
+	`,
+};
+
+/**
+ * Interactive demo with button to trigger toasts
+ */
+export const Interactive = {
+	render: () => html`
+		<div>
+			<button
+				@click=${() => {
+					const container = document.querySelector("grantcodes-toast-container");
+					if (!container) {
+						const newContainer = document.createElement("grantcodes-toast-container");
+						newContainer.position = "top-right";
+						document.body.appendChild(newContainer);
+					}
+
+					const toast = document.createElement("grantcodes-toast");
+					toast.variant = "success";
+					toast.title = "Toast Created!";
+					toast.textContent = "This toast was created dynamically.";
+					toast.duration = 3000;
+
+					const finalContainer =
+						document.querySelector("grantcodes-toast-container") ||
+						document.body.appendChild(document.createElement("grantcodes-toast-container"));
+					finalContainer.appendChild(toast);
+				}}
+			>
+				Show Toast
+			</button>
+		</div>
+	`,
+};
+
+