@grantcodes/ui 2.0.0-beta4 → 2.0.2

package/src/components/dialog/dialog.test.js

@@ -0,0 +1,97 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup, click } from "../../test-utils/index.js";
+import "./dialog.js";
+
+describe("Dialog Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-dialog");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should be closed by default", async () => {
+		element = await fixture("grantcodes-dialog");
+		assert.strictEqual(element.open, false, "Dialog should be closed by default");
+	});
+
+	it("should render dialog element", async () => {
+		element = await fixture("grantcodes-dialog");
+		const dialog = element.shadowRoot.querySelector("dialog");
+		assert.ok(dialog, "Dialog element should exist");
+	});
+
+	it("should open when open property is set to true", async () => {
+		element = await fixture("grantcodes-dialog", {
+			open: true,
+		});
+
+		await element.updateComplete;
+
+		// Note: In tests, showModal() might not work as expected without a browser environment
+		assert.strictEqual(element.open, true, "Open property should be true");
+	});
+
+	it("should be dismissible by default", async () => {
+		element = await fixture("grantcodes-dialog");
+		assert.strictEqual(element.dismissible, true, "Should be dismissible by default");
+	});
+
+	it("should render dismiss button when dismissible", async () => {
+		element = await fixture("grantcodes-dialog", {
+			dismissible: true,
+		});
+
+		const dismissButton = element.shadowRoot.querySelector(".dialog__dismiss");
+		assert.ok(dismissButton, "Dismiss button should exist");
+	});
+
+	it("should not render dismiss button when not dismissible", async () => {
+		element = await fixture("grantcodes-dialog", {
+			dismissible: false,
+		});
+
+		const dismissButton = element.shadowRoot.querySelector(".dialog__dismiss");
+		assert.ok(!dismissButton, "Dismiss button should not exist");
+	});
+
+	it("should have header slot", async () => {
+		element = await fixture("grantcodes-dialog");
+		const headerSlot = element.shadowRoot.querySelector('slot[name="header"]');
+		assert.ok(headerSlot, "Header slot should exist");
+	});
+
+	it("should have footer slot", async () => {
+		element = await fixture("grantcodes-dialog");
+		const footerSlot = element.shadowRoot.querySelector('slot[name="footer"]');
+		assert.ok(footerSlot, "Footer slot should exist");
+	});
+
+	it("should have default content slot", async () => {
+		element = await fixture("grantcodes-dialog");
+		const slot = element.shadowRoot.querySelector('slot.dialog__content');
+		assert.ok(slot, "Content slot should exist");
+	});
+
+	it("should close when dismiss button is clicked", async () => {
+		element = await fixture("grantcodes-dialog", {
+			open: true,
+			dismissible: true,
+		});
+
+		const dismissButton = element.shadowRoot.querySelector(".dialog__dismiss");
+		click(dismissButton);
+
+		await element.updateComplete;
+
+		assert.strictEqual(element.open, false, "Dialog should be closed");
+	});
+});
+
+

package/src/components/dialog/index.js

@@ -0,0 +1 @@
+export * from "./dialog";

package/src/components/dropdown/dropdown.component.js

@@ -0,0 +1,225 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { generateId } from "../../lib/generate-id.js";
+import { dropdownStyles } from "./dropdown.styles.js";
+
+export class GrantCodesDropdown extends LitElement {
+	static styles = [dropdownStyles];
+
+	static properties = {
+		open: { type: Boolean, reflect: true },
+		placement: { type: String },
+		_triggerElement: { type: Object, state: true },
+	};
+
+	constructor() {
+		super();
+
+		/**
+		 * Whether the dropdown is open
+		 * @type {boolean}
+		 */
+		this.open = false;
+
+		/**
+		 * Placement of the dropdown menu
+		 * @type {string}
+		 */
+		this.placement = "bottom-start";
+
+		/**
+		 * Reference to the trigger element
+		 * @type {HTMLElement | null}
+		 */
+		this._triggerElement = null;
+
+		if (!this.id) {
+			this.id = generateId("dropdown");
+		}
+
+		this._handleDocumentClick = this._handleDocumentClick.bind(this);
+		this._handleEscape = this._handleEscape.bind(this);
+	}
+
+	get menuId() {
+		return `${this.id}-menu`;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("click", this._handleDocumentClick);
+		document.addEventListener("keydown", this._handleEscape);
+	}
+
+	disconnectedCallback() {
+		document.removeEventListener("click", this._handleDocumentClick);
+		document.removeEventListener("keydown", this._handleEscape);
+		super.disconnectedCallback();
+	}
+
+	firstUpdated() {
+		// Set up menu items roles
+		const menuSlot = this.renderRoot.querySelector('slot[name="menu"]');
+		if (menuSlot) {
+			const menuItems = menuSlot.assignedElements();
+			menuItems.forEach((item) => {
+				if (item.tagName === "GRANTCODES-DROPDOWN-ITEM") {
+					item.setAttribute("role", "menuitem");
+					item.setAttribute("tabindex", "-1");
+				}
+			});
+		}
+	}
+
+	updated(changedProperties) {
+		console.log({ changedProperties });
+		if (changedProperties.has("open")) {
+			// Update aria-expanded on trigger
+			const triggerSlot = this.renderRoot.querySelector('slot[name="trigger"]');
+			if (triggerSlot) {
+				const assignedElements = triggerSlot.assignedElements();
+				if (assignedElements.length > 0) {
+					assignedElements[0].setAttribute("aria-expanded", this.open);
+				}
+			}
+
+			if (this.open) {
+				// Focus first menu item when opened
+				requestAnimationFrame(() => {
+					const menu = this.renderRoot.querySelector(".dropdown__menu");
+					const firstItem = menu?.querySelector('[role="menuitem"]');
+					if (firstItem) {
+						firstItem.focus();
+					}
+				});
+			}
+		}
+	}
+
+	_handleDocumentClick(e) {
+		// Close dropdown if clicking outside
+		const path = e.composedPath();
+		if (!path.includes(this)) {
+			this.open = false;
+			this.requestUpdate();
+		}
+	}
+
+	_handleEscape(e) {
+		if (e.key === "Escape" && this.open) {
+			this.open = false;
+			this._triggerElement?.focus();
+		}
+	}
+
+	_handleTriggerClick(_e) {
+		this.open = !this.open;
+		this.requestUpdate();
+
+		this.dispatchEvent(
+			new CustomEvent("toggle", {
+				detail: { open: this.open },
+				bubbles: true,
+				composed: true,
+			})
+		);
+	}
+
+	_handleMenuKeydown(e) {
+		const menu = this.renderRoot.querySelector(".dropdown__menu");
+		const items = Array.from(menu?.querySelectorAll('[role="menuitem"]') || []);
+		const currentIndex = items.indexOf(e.target);
+
+		switch (e.key) {
+			case "ArrowDown": {
+				e.preventDefault();
+				const nextIndex = (currentIndex + 1) % items.length;
+				items[nextIndex]?.focus();
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				const prevIndex = (currentIndex - 1 + items.length) % items.length;
+				items[prevIndex]?.focus();
+				break;
+			}
+			case "Home":
+				e.preventDefault();
+				items[0]?.focus();
+				break;
+			case "End":
+				e.preventDefault();
+				items[items.length - 1]?.focus();
+				break;
+		}
+	}
+
+	render() {
+		const placementClass = this.placement ? `dropdown__menu--${this.placement}` : "";
+		const openClass = this.open ? "dropdown__menu--open" : "";
+		return html`
+      <div class="dropdown">
+        <div class="dropdown__trigger" @click=${this._handleTriggerClick}>
+          <slot name="trigger"></slot>
+        </div>
+        <div
+          id="${this.menuId}"
+          class="dropdown__menu ${placementClass} ${openClass}"
+          role="menu"
+          @keydown=${this._handleMenuKeydown}
+        >
+          <slot name="menu"></slot>
+        </div>
+      </div>
+    `;
+	}
+}
+
+export class GrantCodesDropdownItem extends LitElement {
+	static styles = [dropdownStyles];
+
+	static properties = {
+		disabled: { type: Boolean },
+	};
+
+	constructor() {
+		super();
+
+		/**
+		 * Whether the item is disabled
+		 * @type {boolean}
+		 */
+		this.disabled = false;
+	}
+
+	_handleClick(e) {
+		if (this.disabled) {
+			e.preventDefault();
+			return;
+		}
+
+		this.dispatchEvent(
+			new CustomEvent("select", {
+				bubbles: true,
+				composed: true,
+			})
+		);
+
+		// Close the dropdown
+		const dropdown = this.closest("grantcodes-dropdown");
+		if (dropdown) {
+			dropdown.open = false;
+		}
+	}
+
+	render() {
+		return html`
+      <div
+        class="dropdown-item ${this.disabled ? "dropdown-item--disabled" : ""}"
+        @click=${this._handleClick}
+      >
+        <slot></slot>
+      </div>
+    `;
+	}
+}

package/src/components/dropdown/dropdown.js

@@ -0,0 +1,12 @@
+import {
+	GrantCodesDropdown,
+	GrantCodesDropdownItem,
+} from "./dropdown.component.js";
+
+export * from "./dropdown.component.js";
+export default GrantCodesDropdown;
+
+customElements.define("grantcodes-dropdown", GrantCodesDropdown);
+customElements.define("grantcodes-dropdown-item", GrantCodesDropdownItem);
+
+

package/src/components/dropdown/dropdown.stories.js

@@ -0,0 +1,107 @@
+import { html } from "lit";
+import "./dropdown.js";
+import "../button/button.js";
+
+const meta = {
+	title: "Components/Dropdown",
+	component: "grantcodes-dropdown",
+};
+
+export default meta;
+
+/**
+ * Basic dropdown menu with trigger button
+ */
+export const Dropdown = {
+	render: () => html`
+		<grantcodes-dropdown>
+			<grantcodes-button slot="trigger">Open Menu</grantcodes-button>
+			<div slot="menu">
+				<grantcodes-dropdown-item>Profile</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>Settings</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>Sign out</grantcodes-dropdown-item>
+			</div>
+		</grantcodes-dropdown>
+	`,
+};
+
+/**
+ * Dropdown with disabled items
+ */
+export const WithDisabledItems = {
+	render: () => html`
+		<grantcodes-dropdown>
+			<grantcodes-button slot="trigger">Actions</grantcodes-button>
+			<div slot="menu">
+				<grantcodes-dropdown-item>Edit</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>Duplicate</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item disabled>Archive</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item disabled>Delete</grantcodes-dropdown-item>
+			</div>
+		</grantcodes-dropdown>
+	`,
+};
+
+/**
+ * Auto try flip
+ */
+export const AutoTryFlip = {
+	render: () => html`
+		<div style="height: 100vh; overflow: hidden; display: flex; justify-content: flex-end; align-items: flex-end;">
+			<grantcodes-dropdown placement="bottom-start">
+				<grantcodes-button slot="trigger">Bottom Start</grantcodes-button>
+				<div slot="menu">
+					<grantcodes-dropdown-item>Option 1</grantcodes-dropdown-item>
+					<grantcodes-dropdown-item>Option 2</grantcodes-dropdown-item>
+					<grantcodes-dropdown-item>Option 3</grantcodes-dropdown-item>
+				</div>
+			</grantcodes-dropdown>
+		</div>
+	`,
+};
+
+/**
+ * Dropdown with custom trigger content
+ */
+export const CustomTrigger = {
+	render: () => html`
+		<grantcodes-dropdown>
+			<div slot="trigger" style="padding: 0.5rem 1rem; border: 1px solid #ccc; border-radius: 0.25rem; cursor: pointer;">
+				<span style="font-weight: 600;">User Menu</span>
+				<span style="margin-left: 0.5rem;">▼</span>
+			</div>
+			<div slot="menu">
+				<grantcodes-dropdown-item>My Profile</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>Account Settings</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>Billing</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>Sign Out</grantcodes-dropdown-item>
+			</div>
+		</grantcodes-dropdown>
+	`,
+};
+
+/**
+ * Dropdown with many items showing keyboard navigation
+ */
+export const ManyItems = {
+	render: () => html`
+		<grantcodes-dropdown>
+			<grantcodes-button slot="trigger">Select Country</grantcodes-button>
+			<div slot="menu">
+				<grantcodes-dropdown-item>United States</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>United Kingdom</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>Canada</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>Australia</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>Germany</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>France</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>Spain</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>Italy</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>Japan</grantcodes-dropdown-item>
+				<grantcodes-dropdown-item>South Korea</grantcodes-dropdown-item>
+			</div>
+		</grantcodes-dropdown>
+		<p style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
+			Try using arrow keys, Home, End, and Escape to navigate
+		</p>
+	`,
+};

package/src/components/dropdown/dropdown.styles.js

@@ -0,0 +1,128 @@
+import { css } from "lit";
+
+export const dropdownStyles = css`
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	:host,
+	.dropdown {
+		display: inline-block;
+	}
+
+	.dropdown__trigger {
+		display: inline-block;
+		cursor: pointer;
+	}
+
+	.dropdown__menu {
+		display: none;
+		position: fixed;
+		anchor-name: --dropdown-trigger;
+		z-index: 1000;
+		min-inline-size: 12rem;
+		margin-block: 0.25rem;
+		padding-block: 0.5rem;
+		background-color: var(--g-theme-color-background-default);
+		border: 1px solid var(--g-theme-color-border-default);
+		border-radius: var(--g-theme-border-radius-md);
+		animation: dropdown-fade-in 0.15s ease-out;
+	}
+
+	.dropdown__menu--open {
+		display: block;
+	}
+
+	/* Position using anchor positioning when available */
+	@supports (anchor-name: --dropdown-trigger) {
+		.dropdown__menu--open {
+			position-area: bottom span-right;
+			position-try: block-end, block-start span-inline-start;
+		}
+	}
+
+	.dropdown__menu ::slotted(*) {
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* Dropdown item */
+	.dropdown-item {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		gap: 0.5rem;
+		padding-block: 0.5rem;
+		padding-inline: 1rem;
+		font-size: var(--g-typography-font-size-16);
+		color: var(--g-theme-color-content-default);
+		cursor: pointer;
+		transition: background-color 0.15s ease;
+		user-select: none;
+	}
+
+	.dropdown-item:hover {
+		background-color: var(--g-theme-color-background-subtle-hover);
+	}
+
+	.dropdown-item:focus {
+		outline: none;
+		background-color: var(--g-theme-color-background-subtle-hover);
+	}
+
+	.dropdown-item:active {
+		background-color: var(--g-theme-color-background-subtle);
+	}
+
+	.dropdown-item--disabled {
+		color: var(--g-theme-color-content-disabled);
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.dropdown-item--disabled:hover,
+	.dropdown-item--disabled:focus,
+	.dropdown-item--disabled:active {
+		background-color: transparent;
+	}
+
+	/* Animation */
+	@keyframes dropdown-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(-0.5rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	/* For top placement, reverse animation */
+	.dropdown__menu--top-start,
+	.dropdown__menu--top-end {
+		animation: dropdown-fade-in-top 0.15s ease-out;
+	}
+
+	@keyframes dropdown-fade-in-top {
+		from {
+			opacity: 0;
+			transform: translateY(0.5rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	/* View transitions support */
+	@media (prefers-reduced-motion: no-preference) {
+		@supports (view-transition-name: auto) {
+			.dropdown__menu {
+				view-transition-name: dropdown-menu;
+			}
+		}
+	}
+`;