@grantcodes/ui 2.0.0-beta.9 → 2.0.0

package/src/components/app-bar/app-bar.test.js

@@ -0,0 +1,174 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup, click } from "../../test-utils/index.js";
+import "./app-bar.js";
+
+describe("App Bar Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-app-bar");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should not be sticky by default", async () => {
+		element = await fixture("grantcodes-app-bar");
+		assert.strictEqual(element.sticky, false, "Should not be sticky by default");
+	});
+
+	it("should not be transparent by default", async () => {
+		element = await fixture("grantcodes-app-bar");
+		assert.strictEqual(element.transparent, false, "Should not be transparent by default");
+	});
+
+	it("should render header element", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const header = element.shadowRoot.querySelector("header");
+		assert.ok(header, "Header element should exist");
+	});
+
+	it("should apply sticky class when sticky", async () => {
+		element = await fixture("grantcodes-app-bar", {
+			sticky: true,
+		});
+
+		const appBar = element.shadowRoot.querySelector(".app-bar--sticky");
+		assert.ok(appBar, "Should have sticky class");
+	});
+
+	it("should apply transparent class when transparent", async () => {
+		element = await fixture("grantcodes-app-bar", {
+			transparent: true,
+		});
+
+		const appBar = element.shadowRoot.querySelector(".app-bar--transparent");
+		assert.ok(appBar, "Should have transparent class");
+	});
+
+	it("should have logo slot", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const logoSlot = element.shadowRoot.querySelector('slot[name="logo"]');
+		assert.ok(logoSlot, "Logo slot should exist");
+	});
+
+	it("should have nav slot", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const navSlot = element.shadowRoot.querySelector('slot[name="nav"]');
+		assert.ok(navSlot, "Nav slot should exist");
+	});
+
+	it("should have actions slot", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const actionsSlot = element.shadowRoot.querySelector('slot[name="actions"]');
+		assert.ok(actionsSlot, "Actions slot should exist");
+	});
+
+	it("should render mobile menu button", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const menuButton = element.shadowRoot.querySelector(".app-bar__menu-button");
+		assert.ok(menuButton, "Mobile menu button should exist");
+	});
+
+	it("should have mobile menu closed by default", async () => {
+		element = await fixture("grantcodes-app-bar");
+		assert.strictEqual(element._mobileMenuOpen, false, "Mobile menu should be closed by default");
+	});
+
+	it("should not render mobile nav when closed", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const mobileNav = element.shadowRoot.querySelector(".app-bar__mobile-nav");
+		assert.ok(!mobileNav, "Mobile nav should not be rendered when closed");
+	});
+
+	it("should render mobile nav when opened", async () => {
+		element = await fixture("grantcodes-app-bar");
+		element._mobileMenuOpen = true;
+
+		await element.updateComplete;
+
+		const mobileNav = element.shadowRoot.querySelector(".app-bar__nav--mobile-open");
+		assert.ok(mobileNav, "Mobile nav should be rendered when open");
+	});
+
+	it("should toggle mobile menu when button is clicked", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const menuButton = element.shadowRoot.querySelector(".app-bar__menu-button");
+
+		assert.strictEqual(element._mobileMenuOpen, false, "Should start closed");
+
+		click(menuButton);
+		await element.updateComplete;
+
+		assert.strictEqual(element._mobileMenuOpen, true, "Should be open after click");
+
+		click(menuButton);
+		await element.updateComplete;
+
+		assert.strictEqual(element._mobileMenuOpen, false, "Should be closed after second click");
+	});
+
+	it("should emit menu-toggle event when menu is toggled", async () => {
+		element = await fixture("grantcodes-app-bar");
+
+		let toggledState = null;
+		element.addEventListener("menu-toggle", (e) => {
+			toggledState = e.detail.open;
+		});
+
+		const menuButton = element.shadowRoot.querySelector(".app-bar__menu-button");
+		click(menuButton);
+
+		await element.updateComplete;
+
+		assert.strictEqual(toggledState, true, "Toggle event should fire with open state");
+	});
+
+	it("should have aria-label on menu button", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const menuButton = element.shadowRoot.querySelector(".app-bar__menu-button");
+		assert.ok(menuButton.hasAttribute("aria-label"), "Menu button should have aria-label");
+	});
+
+	it("should have aria-expanded on menu button", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const menuButton = element.shadowRoot.querySelector(".app-bar__menu-button");
+		assert.ok(
+			menuButton.hasAttribute("aria-expanded"),
+			"Menu button should have aria-expanded",
+		);
+	});
+
+	it("should update aria-expanded when menu is toggled", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const menuButton = element.shadowRoot.querySelector(".app-bar__menu-button");
+
+		assert.strictEqual(
+			menuButton.getAttribute("aria-expanded"),
+			"false",
+			"Should be false initially",
+		);
+
+		click(menuButton);
+		await element.updateComplete;
+
+		assert.strictEqual(
+			menuButton.getAttribute("aria-expanded"),
+			"true",
+			"Should be true when open",
+		);
+	});
+
+	it("should have nav element with aria-label", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const nav = element.shadowRoot.querySelector("nav");
+		assert.ok(nav, "Nav element should exist");
+		assert.ok(nav.hasAttribute("aria-label"), "Nav should have aria-label");
+	});
+});
+
+

package/src/components/app-bar/index.js

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

package/src/components/avatar/avatar.component.js

@@ -0,0 +1,78 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { avatarStyles } from "./avatar.styles.js";
+
+export class GrantCodesAvatar extends LitElement {
+	static properties = {
+		src: { type: String },
+		name: { type: String },
+		alt: { type: String },
+		initials: { type: String },
+		size: { type: String },
+	};
+
+	static styles = [avatarStyles];
+
+	constructor() {
+		super();
+
+		/**
+		 * Image source for the avatar
+		 */
+		this.src = "";
+		/**
+		 * The full name of the person
+		 */
+		this.name = "";
+		/**
+		 * Alt attribute text
+		 */
+		this.alt = "";
+		/**
+		 * Optional initials, used when there is no src set
+		 */
+		this.initials = "";
+		/**
+		 * Size variant: 'small', 'medium', or 'large'
+		 */
+		this.size = "medium";
+	}
+
+	/**
+	 * Helper function to get initials from the name (if not already provided)
+	 *
+	 * @return {String}  First 2 initials of the passed name
+	 */
+	getInitials() {
+		if (this.initials) return this.initials;
+		if (this.name) {
+			const [first = "", second = ""] = this.name.trim().split(" ");
+			const firstInitial = first ? first[0] : "";
+			const secondInitial = second ? second[0] : "";
+			return `${firstInitial}${secondInitial}`;
+		}
+		return "";
+	}
+
+	getAlt() {
+		if (this.alt) return this.alt;
+		return `${this.name || this.initials} avatar`;
+	}
+
+	/** @returns {import('lit').TemplateResult} */
+	getImg() {
+		if (this.src) {
+			return html`<img src=${this.src} alt=${this.getAlt()} />`;
+		}
+		return html``;
+	}
+
+	/** @returns {import('lit').TemplateResult} */
+	render() {
+		const content = this.src
+			? this.getImg()
+			: html`<span class="avatar__initials">${this.getInitials()}</span>`;
+		const sizeClass = this.size ? `avatar--${this.size}` : "";
+		return html` <div class="avatar ${sizeClass}">${content}</div> `;
+	}
+}

package/src/components/avatar/avatar.js

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

package/src/components/avatar/avatar.stories.js

@@ -0,0 +1,45 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+const { events, args, argTypes, template } =
+	getStorybookHelpers("grantcodes-avatar");
+import "./avatar.js";
+
+const meta = {
+	title: "Components/Avatar",
+	component: "grantcodes-avatar",
+	args: {
+		...args,
+		src: "https://placehold.co/160x160",
+		name: "Tommy Tobasco",
+		alt: "Tommy Tomasco Avatar",
+		initials: "2T",
+	},
+	argTypes,
+	render: (args) => template(args),
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+export const Avatar = {};
+
+export const Initials = {
+	args: {
+		src: undefined,
+	},
+};
+
+
+
+
+
+
+
+
+
+
+
+

package/src/components/avatar/avatar.styles.js

@@ -0,0 +1,42 @@
+import { css } from "lit";
+
+export const avatarStyles = css`
+
+/* Inlined component-base mixin */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:host {
+	display: block;
+}
+
+.avatar {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 3rem;
+	height: 3rem;
+	border-radius: 50%;
+	overflow: hidden;
+	background-color: var(--g-color-brand-purple-200);
+	color: var(--g-color-brand-purple-900);
+	text-align: center;
+	font-size: 1.2rem;
+	font-weight: bold;
+}
+
+.avatar__image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: center;
+}
+
+.avatar__fallback {
+	line-height: 1;
+}
+
+`;

package/src/components/avatar/avatar.test.js

@@ -0,0 +1,85 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup } from "../../test-utils/index.js";
+import "./avatar.js";
+
+describe("Avatar Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-avatar");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should display initials when name is provided", async () => {
+		element = await fixture("grantcodes-avatar", {
+			name: "John Doe",
+		});
+
+		const initialsElement = element.shadowRoot.querySelector(".avatar__initials");
+		assert.ok(initialsElement, "Initials element should exist");
+		assert.strictEqual(
+			initialsElement.textContent,
+			"JD",
+			"Should display correct initials",
+		);
+	});
+
+	it("should handle single name", async () => {
+		element = await fixture("grantcodes-avatar", {
+			name: "John",
+		});
+
+		const initialsElement = element.shadowRoot.querySelector(".avatar__initials");
+		assert.strictEqual(
+			initialsElement.textContent,
+			"J",
+			"Should display single initial",
+		);
+	});
+
+	it("should display image when src is provided", async () => {
+		element = await fixture("grantcodes-avatar", {
+			src: "https://example.com/avatar.jpg",
+			alt: "User avatar",
+		});
+
+		const imgElement = element.shadowRoot.querySelector("img");
+		assert.ok(imgElement, "Image element should exist");
+		assert.strictEqual(imgElement.src, "https://example.com/avatar.jpg");
+		assert.strictEqual(imgElement.alt, "User avatar");
+	});
+
+	it("should apply size variant", async () => {
+		element = await fixture("grantcodes-avatar", {
+			size: "large",
+		});
+
+		const avatarElement = element.shadowRoot.querySelector(".avatar");
+		assert.ok(
+			avatarElement.classList.contains("avatar--large"),
+			"Should have large size class",
+		);
+	});
+
+	it("should support different sizes", async () => {
+		const sizes = ["small", "medium", "large"];
+
+		for (const size of sizes) {
+			element = await fixture("grantcodes-avatar", { size });
+			const avatarElement = element.shadowRoot.querySelector(".avatar");
+			assert.ok(
+				avatarElement.classList.contains(`avatar--${size}`),
+				`Should have ${size} size class`,
+			);
+			cleanup(element);
+		}
+	});
+});
+
+

package/src/components/avatar/index.js

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

package/src/components/badge/badge.component.js

@@ -0,0 +1,36 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { cx } from "../../lib/classnames.js";
+import { badgeStyles } from "./badge.styles.js";
+
+export class GrantCodesBadge extends LitElement {
+	static styles = [badgeStyles];
+
+	static properties = {
+		variant: { type: String },
+	};
+
+	constructor() {
+		super();
+
+		/**
+		 * Visual variant of the badge
+		 * @type {'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'}
+		 */
+		this.variant = "neutral";
+	}
+
+	render() {
+		const badgeClass = cx("badge", {
+			[`badge--${this.variant}`]: Boolean(this.variant),
+		});
+
+		return html`
+			<span class="${badgeClass}">
+				<span class="badge__content">
+					<slot></slot>
+				</span>
+			</span>
+		`;
+	}
+}

package/src/components/badge/badge.js

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

package/src/components/badge/badge.stories.js

@@ -0,0 +1,46 @@
+import { html } from "lit";
+import "./badge.js";
+
+const meta = {
+	title: "Components/Badge",
+	component: "grantcodes-badge",
+	args: {
+		variant: "neutral",
+	},
+	argTypes: {
+		variant: {
+			control: "select",
+			options: ["primary", "success", "warning", "error", "info", "neutral"],
+		},
+	},
+	render: (args) => html`
+		<grantcodes-badge variant=${args.variant} style=${args.style}>
+			Badge
+		</grantcodes-badge>
+	`,
+};
+
+export default meta;
+
+/**
+ * Default badge with neutral variant
+ */
+export const Badge = {};
+
+export const Primary = {
+	args: {
+		variant: "primary",
+	},
+};
+
+export const Success = {
+	args: {
+		variant: "success",
+	},
+};
+
+export const Warning = {
+	args: {
+		variant: "warning",
+	},
+};

package/src/components/badge/badge.styles.js

@@ -0,0 +1,94 @@
+import { css } from "lit";
+
+export const badgeStyles = css`
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	:host {
+		display: inline-block;
+	}
+
+	.badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding-inline: 0.625em;
+		padding-block: 0.375em;
+		border-radius: var(--g-theme-border-radius-md, 0.375rem);
+		font-size: var(--g-typography-font-size-14);
+		font-weight: 500;
+		line-height: 1;
+		white-space: nowrap;
+		border-width: 1px;
+		border-style: solid;
+		transition: all 0.2s ease;
+	}
+
+	
+
+	/* Soft style variants */
+	.badge--primary {
+		background-color: color-mix(
+			in srgb,
+			var(--g-color-brand-purple-500) 15%,
+			transparent
+		);
+		color: var(--g-color-brand-purple-700);
+		border-color: transparent;
+	}
+
+	.badge--success {
+		background-color: color-mix(
+			in srgb,
+			var(--g-color-utility-green-500) 15%,
+			transparent
+		);
+		color: var(--g-color-utility-green-700);
+		border-color: transparent;
+	}
+
+	.badge--warning {
+		background-color: color-mix(
+			in srgb,
+			var(--g-color-utility-yellow-500) 15%,
+			transparent
+		);
+		color: var(--g-color-utility-yellow-700);
+		border-color: transparent;
+	}
+
+	.badge--error {
+		background-color: color-mix(
+			in srgb,
+			var(--g-color-utility-red-500) 15%,
+			transparent
+		);
+		color: var(--g-color-utility-red-700);
+		border-color: transparent;
+	}
+
+	.badge--info {
+		background-color: color-mix(
+			in srgb,
+			var(--g-color-utility-blue-500) 15%,
+			transparent
+		);
+		color: var(--g-color-utility-blue-700);
+		border-color: transparent;
+	}
+
+	.badge--neutral {
+		background-color: var(--g-color-brand-purple-100);
+		color: var(--g-color-brand-purple-800);
+		border-color: transparent;
+	}
+
+	.badge__content {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25em;
+	}
+`;