@grantcodes/ui 2.0.0-beta4 → 2.0.2

package/src/components/badge/badge.test.js

@@ -0,0 +1,70 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup } from "../../test-utils/index.js";
+import "./badge.js";
+
+describe("Badge Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-badge");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should have neutral variant by default", async () => {
+		element = await fixture("grantcodes-badge");
+		assert.strictEqual(element.variant, "neutral", "Default variant should be neutral");
+	});
+
+	// it("should have outline style by default", async () => {
+	// 	element = await fixture("grantcodes-badge");
+	// 	assert.strictEqual(element.style, "outline", "Default style should be outline");
+	// });
+
+	// it("should render badge with correct style class", async () => {
+	// 	element = await fixture("grantcodes-badge", {
+	// 		style: "outline",
+	// 	});
+
+	// 	const badge = element.shadowRoot.querySelector(".badge--outline");
+	// 	assert.ok(badge, "Badge should have outline style class");
+	// });
+
+	it("should render slotted content", async () => {
+		element = await fixture("grantcodes-badge");
+		element.textContent = "Badge Text";
+
+		await element.updateComplete;
+
+		assert.strictEqual(element.textContent, "Badge Text", "Slotted content should be rendered");
+	});
+
+	it("should support all variant types", async () => {
+		const variants = ["primary", "success", "warning", "error", "info", "neutral"];
+
+		for (const variant of variants) {
+			element = await fixture("grantcodes-badge", { variant });
+			const badge = element.shadowRoot.querySelector(`.badge--${variant}`);
+			assert.ok(badge, `Badge should have ${variant} variant class`);
+			cleanup(element);
+		}
+	});
+
+	// it("should support all style types", async () => {
+	// 	const styles = ["outline", "soft"];
+
+	// 	for (const style of styles) {
+	// 		element = await fixture("grantcodes-badge", { style });
+	// 		const badge = element.shadowRoot.querySelector(`.badge--${style}`);
+	// 		assert.ok(badge, `Badge should have ${style} style class`);
+	// 		cleanup(element);
+	// 	}
+	// });
+});
+
+

package/src/components/badge/index.js

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

package/src/components/breadcrumb/breadcrumb.component.js

@@ -0,0 +1,110 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { breadcrumbStyles } from "./breadcrumb.styles.js";
+
+export class GrantCodesBreadcrumb extends LitElement {
+	static styles = [breadcrumbStyles];
+
+	static properties = {
+		separator: { type: String },
+	};
+
+	constructor() {
+		super();
+
+		/**
+		 * Custom separator between breadcrumb items
+		 * @type {string}
+		 */
+		this.separator = "/";
+	}
+
+	firstUpdated() {
+		const value = this.separator ?? "/";
+		this.style.setProperty("--component-breadcrumb-separator", `'${value}'`);
+
+		// Track slot content changes to update separators
+		const slot = this.renderRoot.querySelector('slot:not([name])');
+		if (slot) {
+			slot.addEventListener("slotchange", () => this._updateSeparators());
+			this._updateSeparators();
+		}
+	}
+
+	updated(changed) {
+		if (changed.has("separator")) {
+			// Reflect separator into CSS custom property for pseudo-element content
+			const value = this.separator ?? "/";
+			this.style.setProperty("--component-breadcrumb-separator", `'${value}'`);
+		}
+
+		// Recalculate separators if light DOM may have changed
+		if (changed.size > 0) {
+			this._updateSeparators();
+		}
+	}
+
+	_updateSeparators() {
+		const slot = this.renderRoot.querySelector('slot:not([name])');
+		if (!slot) return;
+		const items = slot.assignedElements({ flatten: true }).filter((el) =>
+			el.tagName === "GRANTCODES-BREADCRUMB-ITEM",
+		);
+		items.forEach((el, index) => {
+			if (index < items.length - 1) {
+				el.setAttribute("data-has-separator", "");
+			} else {
+				el.removeAttribute("data-has-separator");
+			}
+		});
+	}
+
+	render() {
+		return html`
+			<nav aria-label="Breadcrumb" class="breadcrumb">
+				<ol class="breadcrumb__list">
+					<slot></slot>
+				</ol>
+			</nav>
+		`;
+	}
+}
+
+export class GrantCodesBreadcrumbItem extends LitElement {
+	static styles = [breadcrumbStyles];
+
+	static properties = {
+		href: { type: String },
+		current: { type: Boolean },
+	};
+
+	constructor() {
+		super();
+
+		/**
+		 * URL for the breadcrumb item
+		 * @type {string}
+		 */
+		this.href = "";
+
+		/**
+		 * Whether this is the current page
+		 * @type {boolean}
+		 */
+		this.current = false;
+	}
+
+	render() {
+		const content = this.href && !this.current
+			? html`<a href="${this.href}" class="breadcrumb__link"><slot></slot></a>`
+			: html`<span class="breadcrumb__text"><slot></slot></span>`;
+
+		return html`
+			<li class="breadcrumb__item" ?data-current=${this.current}>
+				${content}
+			</li>
+		`;
+	}
+}
+
+

package/src/components/breadcrumb/breadcrumb.js

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

package/src/components/breadcrumb/breadcrumb.stories.js

@@ -0,0 +1,25 @@
+import { html } from "lit";
+import "./breadcrumb.js";
+
+const meta = {
+	title: "Components/Breadcrumb",
+	component: "grantcodes-breadcrumb",
+};
+
+export default meta;
+
+/**
+ * Basic breadcrumb navigation showing the current page hierarchy
+ */
+export const Breadcrumb = {
+	render: () => html`
+		<grantcodes-breadcrumb>
+			<grantcodes-breadcrumb-item href="/">Home</grantcodes-breadcrumb-item>
+			<grantcodes-breadcrumb-item href="/products">Products</grantcodes-breadcrumb-item>
+			<grantcodes-breadcrumb-item href="/products/electronics">
+				Electronics
+			</grantcodes-breadcrumb-item>
+			<grantcodes-breadcrumb-item current>Laptops</grantcodes-breadcrumb-item>
+		</grantcodes-breadcrumb>
+	`,
+};

package/src/components/breadcrumb/breadcrumb.styles.js

@@ -0,0 +1,96 @@
+import { css } from "lit";
+
+export const breadcrumbStyles = css`
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	:host {
+		display: block;
+	}
+
+	.breadcrumb {
+		display: block;
+	}
+
+	.breadcrumb__list {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.breadcrumb__item {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+	font-size: var(--g-typography-font-size-14);
+	color: var(--g-color-brand-purple-700);
+	}
+
+	/* Separator using ::after pseudo-element; driven by parent via data-has-separator */
+	:host([data-has-separator]) .breadcrumb__item::after {
+		content: var(--component-breadcrumb-separator, "/");
+		display: inline-block;
+		color: var(--g-color-brand-purple-400);
+		font-weight: 300;
+		user-select: none;
+		pointer-events: none;
+	}
+
+	/* Current page styling */
+	.breadcrumb__item[data-current] {
+		font-weight: 600;
+		color: var(--color-base-primary-900);
+	}
+
+	.breadcrumb__item[data-current]::after {
+		display: none;
+	}
+
+	.breadcrumb__link {
+		color: var(--g-color-brand-purple-600);
+		text-decoration: none;
+		transition: color 0.2s ease;
+		border-radius: var(--g-theme-border-radius-md, 0.25rem);
+		padding-inline: 0.25em;
+		padding-block: 0.125em;
+		margin-inline: -0.25em;
+		margin-block: -0.125em;
+	}
+
+	.breadcrumb__link:hover {
+		color: var(--g-color-brand-purple-700);
+		text-decoration: underline;
+	}
+
+	.breadcrumb__link:focus-visible {
+		outline: 2px solid var(--component-focus-ring-color, rgba(106, 91, 197, 0.4));
+		outline-offset: 2px;
+	}
+
+	.breadcrumb__text {
+		display: inline-block;
+	}
+
+	/* Responsive: Show only last few items on small screens */
+	@media (max-width: 640px) {
+		.breadcrumb__item:not(:last-child):not(:nth-last-child(2)) {
+			display: none;
+		}
+
+		.breadcrumb__item:nth-last-child(2)::before {
+			content: "...";
+			display: inline-block;
+			margin-inline-end: 0.5rem;
+			color: var(--g-color-brand-purple-400);
+		}
+	}
+`;
+
+

package/src/components/breadcrumb/breadcrumb.test.js

@@ -0,0 +1,144 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup } from "../../test-utils/index.js";
+import "./breadcrumb.js";
+
+describe("Breadcrumb Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render breadcrumb container", async () => {
+		element = await fixture("grantcodes-breadcrumb");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should render nav element with aria-label", async () => {
+		element = await fixture("grantcodes-breadcrumb");
+		const nav = element.shadowRoot.querySelector("nav");
+		assert.ok(nav, "Nav element should exist");
+		assert.strictEqual(
+			nav.getAttribute("aria-label"),
+			"Breadcrumb",
+			"Should have breadcrumb aria-label",
+		);
+	});
+
+	it("should render ordered list", async () => {
+		element = await fixture("grantcodes-breadcrumb");
+		const list = element.shadowRoot.querySelector("ol");
+		assert.ok(list, "Ordered list should exist");
+		assert.ok(
+			list.classList.contains("breadcrumb__list"),
+			"Should have breadcrumb__list class",
+		);
+	});
+
+	it("should have default separator", async () => {
+		element = await fixture("grantcodes-breadcrumb");
+		assert.strictEqual(element.separator, "/", "Default separator should be /");
+	});
+
+	it("should have slot for breadcrumb items", async () => {
+		element = await fixture("grantcodes-breadcrumb");
+		const slot = element.shadowRoot.querySelector("slot");
+		assert.ok(slot, "Slot should exist for breadcrumb items");
+	});
+});
+
+describe("Breadcrumb Item Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render breadcrumb item", async () => {
+		element = await fixture("grantcodes-breadcrumb-item");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should render as link when href is provided", async () => {
+		element = await fixture("grantcodes-breadcrumb-item", {
+			href: "/test",
+		});
+
+		const link = element.shadowRoot.querySelector(".breadcrumb__link");
+		assert.ok(link, "Link should exist");
+		assert.strictEqual(link.getAttribute("href"), "/test", "Href should be set");
+	});
+
+	it("should render as span when no href", async () => {
+		element = await fixture("grantcodes-breadcrumb-item");
+
+		const span = element.shadowRoot.querySelector(".breadcrumb__text");
+		assert.ok(span, "Span should exist");
+	});
+
+	it("should render as span when current", async () => {
+		element = await fixture("grantcodes-breadcrumb-item", {
+			href: "/test",
+			current: true,
+		});
+
+		const span = element.shadowRoot.querySelector(".breadcrumb__text");
+		const link = element.shadowRoot.querySelector(".breadcrumb__link");
+		assert.ok(span, "Span should exist for current page");
+		assert.ok(!link, "Link should not exist for current page");
+	});
+
+	it("should have current attribute when current is true", async () => {
+		element = await fixture("grantcodes-breadcrumb-item", {
+			current: true,
+		});
+
+		const item = element.shadowRoot.querySelector(".breadcrumb__item");
+		assert.ok(
+			item.hasAttribute("data-current"),
+			"Should have data-current attribute",
+		);
+	});
+
+	it("should not have current attribute when current is false", async () => {
+		element = await fixture("grantcodes-breadcrumb-item", {
+			current: false,
+		});
+
+		const item = element.shadowRoot.querySelector(".breadcrumb__item");
+		assert.ok(
+			!item.hasAttribute("data-current"),
+			"Should not have data-current attribute",
+		);
+	});
+
+	it("should render list item", async () => {
+		element = await fixture("grantcodes-breadcrumb-item");
+		const item = element.shadowRoot.querySelector("li");
+		assert.ok(item, "List item should exist");
+	});
+
+	it("should render slotted content", async () => {
+		element = await fixture("grantcodes-breadcrumb-item");
+		element.textContent = "Home";
+
+		await element.updateComplete;
+
+		assert.strictEqual(element.textContent, "Home", "Slotted content should be rendered");
+	});
+
+	it("should not be current by default", async () => {
+		element = await fixture("grantcodes-breadcrumb-item");
+		assert.strictEqual(element.current, false, "Should not be current by default");
+	});
+
+	it("should have empty href by default", async () => {
+		element = await fixture("grantcodes-breadcrumb-item");
+		assert.strictEqual(element.href, "", "Href should be empty by default");
+	});
+});
+
+

package/src/components/breadcrumb/index.js

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

package/src/components/button/button.component.js

@@ -0,0 +1,64 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { literal } from "lit/static-html.js";
+import { buttonStyles } from "./button.styles.js";
+
+export class GrantCodesButton 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 = [buttonStyles];
+
+	static properties = {
+		href: { type: String },
+		type: { type: String },
+		name: { type: String },
+		value: { type: String },
+		disabled: { type: Boolean, reflect: true },
+	};
+
+	constructor() {
+		super();
+
+		this.href = "";
+		this.type = "button";
+		this.name = "";
+		this.value = "";
+		this.disabled = false;
+	}
+
+	// The render() method is called any time reactive properties change.
+	// Return HTML in a string template literal tagged with the `html`
+	// tag function to describe the component's internal DOM.
+	// Expressions can set attribute values, property values, event handlers,
+	// and child nodes/text.
+	/** @returns {import('lit').TemplateResult} */
+	render() {
+		const isLink = !!this.href;
+		const tag = isLink ? literal`a` : literal`button`;
+
+		if (isLink) {
+			return html`
+				<${tag}
+					class="button"
+					href=${this.href}
+					?disabled=${this.disabled}
+				>
+					<span><slot></slot></span>
+				</${tag}>
+			`;
+		}
+
+		return html`
+			<${tag}
+				class="button"
+				type=${this.type}
+				name=${this.name ?? ""}
+				value=${this.value ?? ""}
+				?disabled=${this.disabled}
+			>
+				<span><slot></slot></span>
+			</${tag}>
+		`;
+	}
+}

package/src/components/button/button.js

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

package/src/components/button/button.stories.js

@@ -0,0 +1,78 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import { html } from "lit/static-html.js";
+import "./button.js";
+const { events, args, argTypes, template } =
+	getStorybookHelpers("grantcodes-button");
+
+const meta = {
+	title: "Components/Button",
+	component: "grantcodes-button",
+	args,
+	argTypes,
+	render: (args) => template(args, html`Button label`),
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+/**
+ * Default button with standard appearance.
+ */
+export const Button = {};
+
+/**
+ * Disabled button that cannot be interacted with.
+ * The button will not respond to clicks when disabled.
+ */
+export const Disabled = {
+	args: {
+		disabled: true,
+	},
+};
+
+/**
+ * Button rendered as a link (anchor tag).
+ * Useful for navigation actions that look like buttons.
+ */
+export const AsLink = {
+	args: {
+		href: "https://example.com",
+	},
+	render: (args) => template(args, html`Link Button`),
+};
+
+/**
+ * Different button types for forms.
+ * - button: Standard button (default)
+ * - submit: Submits a form
+ * - reset: Resets form fields
+ */
+export const ButtonTypes = {
+	render: () => html`
+		<div style="display: flex; gap: 1rem;">
+			<grantcodes-button type="button">Button</grantcodes-button>
+			<grantcodes-button type="submit">Submit</grantcodes-button>
+			<grantcodes-button type="reset">Reset</grantcodes-button>
+		</div>
+	`,
+};
+
+/**
+ * Various button states for different contexts.
+ */
+export const AllStates = {
+	render: () => html`
+		<div style="display: flex; flex-direction: column; gap: 1rem; max-width: 300px;">
+			<grantcodes-button>Normal Button</grantcodes-button>
+			<grantcodes-button disabled>Disabled Button</grantcodes-button>
+			<grantcodes-button href="#">Link Button</grantcodes-button>
+			<grantcodes-button>
+				<strong>With HTML Content</strong>
+			</grantcodes-button>
+		</div>
+	`,
+};