@grantcodes/ui 2.0.0-beta4 → 2.0.2

package/src/components/pagination/pagination.test.js

@@ -0,0 +1,98 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup } from "../../test-utils/index.js";
+import "./pagination.js";
+
+describe("Pagination Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-pagination");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should have page property defaulting to 1", async () => {
+		element = await fixture("grantcodes-pagination");
+		assert.strictEqual(element.page, 1, "Page should default to 1");
+	});
+
+	it("should have pages property defaulting to 1", async () => {
+		element = await fixture("grantcodes-pagination");
+		assert.strictEqual(element.pages, 1, "Pages should default to 1");
+	});
+
+	it("should render navigation element", async () => {
+		element = await fixture("grantcodes-pagination", {
+			pages: 5,
+		});
+
+		const nav = element.shadowRoot.querySelector("nav");
+		assert.ok(nav, "Navigation element should exist");
+	});
+
+	it("should render pagination list", async () => {
+		element = await fixture("grantcodes-pagination", {
+			pages: 5,
+		});
+
+		const list = element.shadowRoot.querySelector(".pagination");
+		assert.ok(list, "Pagination list should exist");
+	});
+
+	it("should support href property for links", async () => {
+		element = await fixture("grantcodes-pagination", {
+			page: 2,
+			pages: 5,
+			href: "/page/{page}",
+		});
+
+		assert.strictEqual(element.href, "/page/{page}", "Href property should be set");
+	});
+
+	it("should indicate current page", async () => {
+		element = await fixture("grantcodes-pagination", {
+			page: 3,
+			pages: 5,
+		});
+
+		assert.strictEqual(element.page, 3, "Current page should be 3");
+	});
+
+	it("should handle single page", async () => {
+		element = await fixture("grantcodes-pagination", {
+			page: 1,
+			pages: 1,
+		});
+
+		const list = element.shadowRoot.querySelector(".pagination");
+		assert.ok(list, "Should render even with single page");
+	});
+
+	it("should handle multiple pages", async () => {
+		element = await fixture("grantcodes-pagination", {
+			page: 1,
+			pages: 10,
+		});
+
+		const list = element.shadowRoot.querySelector(".pagination");
+		assert.ok(list, "Should render pagination for multiple pages");
+	});
+
+	it("should support navigation to different pages", async () => {
+		element = await fixture("grantcodes-pagination", {
+			page: 5,
+			pages: 10,
+		});
+
+		// The component should allow navigating to previous and next pages
+		assert.ok(element.page > 1, "Should be able to go to previous page");
+		assert.ok(element.page < element.pages, "Should be able to go to next page");
+	});
+});
+
+

package/src/components/sidebar/index.js

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

package/src/components/sidebar/sidebar.component.js

@@ -0,0 +1,165 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { cx } from "../../lib/classnames.js";
+import { sidebarStyles } from "./sidebar.styles.js";
+
+export class GrantCodesSidebar extends LitElement {
+	static styles = [sidebarStyles];
+
+	static properties = {
+		position: { type: String },
+		collapsed: { type: Boolean, reflect: true },
+		collapsible: { type: Boolean },
+		width: { type: String },
+		_drawerOpen: { type: Boolean, state: true },
+	};
+
+	constructor() {
+		super();
+
+		/**
+		 * Position of the sidebar
+		 * @type {'left' | 'right'}
+		 */
+		this.position = "left";
+
+		/**
+		 * Whether the sidebar is collapsed on desktop
+		 * @type {boolean}
+		 */
+		this.collapsed = false;
+
+		/**
+		 * Whether the sidebar can be collapsed
+		 * @type {boolean}
+		 */
+		this.collapsible = true;
+
+		/**
+		 * Custom width of the sidebar
+		 * @type {string}
+		 */
+		this.width = "280px";
+
+		/**
+		 * Whether mobile drawer is open
+		 * @type {boolean}
+		 */
+		this._drawerOpen = false;
+
+		this._handleDocumentClick = this._handleDocumentClick.bind(this);
+		this._handleEscape = this._handleEscape.bind(this);
+	}
+
+	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();
+	}
+
+	_handleDocumentClick(e) {
+		// Close mobile drawer if clicking outside
+		if (this._drawerOpen) {
+			const path = e.composedPath();
+			if (!path.includes(this)) {
+				this._drawerOpen = false;
+			}
+		}
+	}
+
+	_handleEscape(e) {
+		if (e.key === "Escape" && this._drawerOpen) {
+			this._drawerOpen = false;
+		}
+	}
+
+	_toggleCollapsed() {
+		if (!this.collapsible) return;
+
+		this.collapsed = !this.collapsed;
+		this.dispatchEvent(
+			new CustomEvent("toggle", {
+				detail: { collapsed: this.collapsed },
+				bubbles: true,
+				composed: true,
+			}),
+		);
+	}
+
+	_toggleDrawer() {
+		this._drawerOpen = !this._drawerOpen;
+		this.dispatchEvent(
+			new CustomEvent("drawer-toggle", {
+				detail: { open: this._drawerOpen },
+				bubbles: true,
+				composed: true,
+			}),
+		);
+	}
+
+	render() {
+		const sidebarClass = cx("sidebar", {
+			"sidebar--collapsed": this.collapsed,
+			[`sidebar--${this.position}`]: true,
+			"sidebar--drawer-open": this._drawerOpen,
+		});
+
+		return html`
+			<!-- Mobile Toggle Button -->
+			<button
+				type="button"
+				class="sidebar__mobile-toggle"
+				@click=${this._toggleDrawer}
+				aria-label="${this._drawerOpen ? "Close sidebar" : "Open sidebar"}"
+			>
+				☰
+			</button>
+
+			<!-- Overlay for mobile -->
+			${this._drawerOpen
+				? html`
+					<div
+						class="sidebar__overlay"
+						@click=${() => {
+							this._drawerOpen = false;
+						}}
+					></div>
+				`
+				: ""}
+
+			<!-- Sidebar -->
+			<aside
+				class="${sidebarClass}"
+				style="--sidebar-width: ${this.width}"
+			>
+				<!-- Collapse Toggle (Desktop) -->
+				${this.collapsible
+					? html`
+						<button
+							type="button"
+							class="sidebar__toggle"
+							@click=${this._toggleCollapsed}
+							aria-label="${this.collapsed ? "Expand sidebar" : "Collapse sidebar"}"
+							aria-expanded="${!this.collapsed}"
+						>
+							${this.position === "left" ? (this.collapsed ? "→" : "←") : this.collapsed ? "←" : "→"}
+						</button>
+					`
+					: ""}
+
+				<!-- Content -->
+				<div class="sidebar__content">
+					<slot></slot>
+				</div>
+			</aside>
+		`;
+	}
+}
+
+

package/src/components/sidebar/sidebar.js

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

package/src/components/sidebar/sidebar.stories.js

@@ -0,0 +1,155 @@
+import { html } from "lit";
+import "./sidebar.js";
+
+const meta = {
+	title: "Components/Sidebar",
+	component: "grantcodes-sidebar",
+};
+
+export default meta;
+
+/**
+ * Basic sidebar with navigation
+ */
+export const Sidebar = {
+	render: () => html`
+		<div style="display: flex; height: 500px; border: 1px solid #ccc;">
+			<grantcodes-sidebar>
+				<h3 style="margin-top: 0;">Navigation</h3>
+				<nav>
+					<ul style="list-style: none; padding: 0;">
+						<li style="margin-bottom: 0.5rem;"><a href="/">Dashboard</a></li>
+						<li style="margin-bottom: 0.5rem;"><a href="/projects">Projects</a></li>
+						<li style="margin-bottom: 0.5rem;"><a href="/tasks">Tasks</a></li>
+						<li style="margin-bottom: 0.5rem;"><a href="/settings">Settings</a></li>
+					</ul>
+				</nav>
+			</grantcodes-sidebar>
+			<div style="flex: 1; padding: 2rem;">
+				<h1>Main Content</h1>
+				<p>This is the main content area.</p>
+			</div>
+		</div>
+	`,
+};
+
+/**
+ * Right-positioned sidebar
+ */
+export const RightSidebar = {
+	render: () => html`
+		<div style="display: flex; height: 500px; border: 1px solid #ccc;">
+			<div style="flex: 1; padding: 2rem;">
+				<h1>Main Content</h1>
+				<p>The sidebar is on the right side.</p>
+			</div>
+			<grantcodes-sidebar position="right">
+				<h3 style="margin-top: 0;">Details</h3>
+				<p style="font-size: 0.875rem;">
+					Additional information and tools appear here.
+				</p>
+			</grantcodes-sidebar>
+		</div>
+	`,
+};
+
+/**
+ * Collapsible sidebar that can be expanded/collapsed
+ */
+export const Collapsible = {
+	render: () => html`
+		<div style="display: flex; height: 500px; border: 1px solid #ccc;">
+			<grantcodes-sidebar collapsible>
+				<h3 style="margin-top: 0;">Menu</h3>
+				<nav>
+					<ul style="list-style: none; padding: 0;">
+						<li style="margin-bottom: 0.5rem;"><a href="/">🏠 Home</a></li>
+						<li style="margin-bottom: 0.5rem;"><a href="/profile">👤 Profile</a></li>
+						<li style="margin-bottom: 0.5rem;"><a href="/messages">💬 Messages</a></li>
+						<li style="margin-bottom: 0.5rem;"><a href="/settings">⚙️ Settings</a></li>
+					</ul>
+				</nav>
+			</grantcodes-sidebar>
+			<div style="flex: 1; padding: 2rem;">
+				<h1>Main Content</h1>
+				<p>Click the toggle button to collapse/expand the sidebar.</p>
+			</div>
+		</div>
+	`,
+};
+
+/**
+ * Initially collapsed sidebar
+ */
+export const InitiallyCollapsed = {
+	render: () => html`
+		<div style="display: flex; height: 500px; border: 1px solid #ccc;">
+			<grantcodes-sidebar collapsed>
+				<nav>
+					<ul style="list-style: none; padding: 0;">
+						<li style="margin-bottom: 0.5rem;">🏠</li>
+						<li style="margin-bottom: 0.5rem;">👤</li>
+						<li style="margin-bottom: 0.5rem;">💬</li>
+						<li style="margin-bottom: 0.5rem;">⚙️</li>
+					</ul>
+				</nav>
+			</grantcodes-sidebar>
+			<div style="flex: 1; padding: 2rem;">
+				<h1>Main Content</h1>
+				<p>The sidebar starts collapsed. Click the toggle to expand it.</p>
+			</div>
+		</div>
+	`,
+};
+
+/**
+ * Custom width sidebar
+ */
+export const CustomWidth = {
+	render: () => html`
+		<div style="display: flex; height: 500px; border: 1px solid #ccc;">
+			<grantcodes-sidebar width="350px">
+				<h3 style="margin-top: 0;">Wide Sidebar</h3>
+				<p>This sidebar has a custom width of 350px.</p>
+				<p>You can set any width you need for your layout.</p>
+			</grantcodes-sidebar>
+			<div style="flex: 1; padding: 2rem;">
+				<h1>Main Content</h1>
+				<p>Main content adjusts to the sidebar width.</p>
+			</div>
+		</div>
+	`,
+};
+
+/**
+ * Mobile-responsive demo - shows drawer behavior on small screens
+ */
+export const MobileResponsive = {
+	render: () => html`
+		<div style="max-width: 600px; border: 1px solid #ccc;">
+			<div style="display: flex; min-height: 400px;">
+				<grantcodes-sidebar>
+					<h3 style="margin-top: 0;">Navigation</h3>
+					<nav>
+						<ul style="list-style: none; padding: 0;">
+							<li style="margin-bottom: 0.5rem;"><a href="/">Dashboard</a></li>
+							<li style="margin-bottom: 0.5rem;"><a href="/projects">Projects</a></li>
+							<li style="margin-bottom: 0.5rem;"><a href="/tasks">Tasks</a></li>
+							<li style="margin-bottom: 0.5rem;"><a href="/team">Team</a></li>
+							<li style="margin-bottom: 0.5rem;"><a href="/settings">Settings</a></li>
+						</ul>
+					</nav>
+				</grantcodes-sidebar>
+				<div style="flex: 1; padding: 2rem;">
+					<h1>Main Content</h1>
+					<p style="font-size: 0.875rem; color: #666;">
+						On mobile/narrow screens, the sidebar becomes a drawer.
+						Click the hamburger menu to open it.
+					</p>
+				</div>
+			</div>
+		</div>
+	`,
+};
+
+

package/src/components/sidebar/sidebar.styles.js

@@ -0,0 +1,192 @@
+import { css } from "lit";
+
+export const sidebarStyles = css`
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	:host {
+		display: contents;
+	}
+
+	.sidebar {
+		position: relative;
+		inline-size: var(--sidebar-width, 280px);
+		block-size: 100%;
+		background-color: var(--g-theme-color-background-default);
+		border-inline-end: 1px solid var(--g-theme-color-border-default);
+		overflow-y: auto;
+		transition: inline-size 0.3s ease;
+		flex-shrink: 0;
+	}
+
+	.sidebar--right {
+		border-inline-end: none;
+		border-inline-start: 1px solid var(--g-theme-color-border-default);
+	}
+
+	.sidebar--collapsed {
+		inline-size: 60px;
+	}
+
+	.sidebar--collapsed .sidebar__content {
+		padding-inline: 0.5rem;
+	}
+
+	.sidebar--collapsed .sidebar__content > *:not(.sidebar__toggle):not(.sidebar__mobile-toggle) {
+		display: none;
+	}
+
+	.sidebar--collapsed .sidebar__toggle {
+		inset-inline-end: 50%;
+		transform: translateX(50%);
+	}
+
+	/* Mobile Toggle Button */
+	.sidebar__mobile-toggle {
+		all: unset;
+		display: none;
+		position: fixed;
+		inset-block-start: 1rem;
+		inset-inline-start: 1rem;
+		z-index: 1001;
+		inline-size: 2.5rem;
+		block-size: 2.5rem;
+		align-items: center;
+		justify-content: center;
+		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);
+		cursor: pointer;
+		font-size: 1.5rem;
+		transition: all 0.2s ease;
+	}
+
+	.sidebar__mobile-toggle:hover {
+		background-color: var(--g-theme-color-background-subtle-hover);
+	}
+
+	.sidebar__mobile-toggle:focus-visible {
+		outline: 2px solid var(--component-focus-ring-color);
+		outline-offset: 2px;
+	}
+
+	/* Show mobile toggle on small screens */
+	@media (max-width: 768px) {
+		.sidebar__mobile-toggle {
+			display: flex;
+		}
+
+		.sidebar {
+			position: fixed;
+			inset-block-start: 0;
+			inset-block-end: 0;
+			inset-inline-start: -100%;
+			z-index: 1000;
+			transition: inset-inline-start 0.3s ease;
+		}
+
+		.sidebar--right {
+			inset-inline-start: auto;
+			inset-inline-end: -100%;
+			transition: inset-inline-end 0.3s ease;
+		}
+
+		.sidebar--drawer-open {
+			inset-inline-start: 0;
+		}
+
+		.sidebar--right.sidebar--drawer-open {
+			inset-inline-end: 0;
+			inset-inline-start: auto;
+		}
+	}
+
+	/* Overlay */
+	.sidebar__overlay {
+		display: none;
+		position: fixed;
+		inset: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 999;
+		animation: overlay-fade-in 0.2s ease-out;
+	}
+
+	@media (max-width: 768px) {
+		.sidebar__overlay {
+			display: block;
+		}
+	}
+
+	@keyframes overlay-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* Collapse Toggle */
+	.sidebar__toggle {
+		all: unset;
+		position: absolute;
+		inset-block-start: 1rem;
+		inset-inline-end: 0.5rem;
+		inline-size: 1.5rem;
+		block-size: 1.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		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);
+		cursor: pointer;
+		font-size: 0.875rem;
+		transition: all 0.2s ease;
+		z-index: 10;
+	}
+
+	.sidebar__toggle:hover {
+		background-color: var(--g-theme-color-background-subtle-hover);
+	}
+
+	.sidebar__toggle:focus-visible {
+		outline: 2px solid var(--component-focus-ring-color);
+		outline-offset: 2px;
+	}
+
+	.sidebar--right .sidebar__toggle {
+		inset-inline-end: auto;
+		inset-inline-start: 0.5rem;
+	}
+
+	.sidebar--right.sidebar--collapsed .sidebar__toggle {
+		inset-inline-start: 50%;
+		inset-inline-end: auto;
+		transform: translateX(-50%);
+	}
+
+	@media (max-width: 768px) {
+		.sidebar__toggle {
+			display: none;
+		}
+	}
+
+	/* Content */
+	.sidebar__content {
+		padding-block: 1rem;
+		padding-inline: 1rem;
+	}
+
+	/* View transitions */
+	@media (prefers-reduced-motion: no-preference) {
+		@supports (view-transition-name: auto) {
+			.sidebar {
+				view-transition-name: sidebar;
+			}
+		}
+	}
+`;