@grantcodes/ui 2.0.0-beta4 → 2.0.2

package/src/components/toast/toast.styles.js

@@ -0,0 +1,207 @@
+import { css } from "lit";
+
+export const toastStyles = css`
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	:host {
+		display: block;
+		pointer-events: none;
+	}
+
+	/* Toast Container */
+	.toast-container {
+		position: fixed;
+		z-index: 9999;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 1rem;
+		pointer-events: none;
+		max-inline-size: 100vw;
+		max-block-size: 100vh;
+		overflow: hidden;
+	}
+
+	/* Container positions */
+	.toast-container--top-left {
+		inset-block-start: 0;
+		inset-inline-start: 0;
+	}
+
+	.toast-container--top-center {
+		inset-block-start: 0;
+		inset-inline-start: 50%;
+		transform: translateX(-50%);
+	}
+
+	.toast-container--top-right {
+		inset-block-start: 0;
+		inset-inline-end: 0;
+	}
+
+	.toast-container--bottom-left {
+		inset-block-end: 0;
+		inset-inline-start: 0;
+	}
+
+	.toast-container--bottom-center {
+		inset-block-end: 0;
+		inset-inline-start: 50%;
+		transform: translateX(-50%);
+	}
+
+	.toast-container--bottom-right {
+		inset-block-end: 0;
+		inset-inline-end: 0;
+	}
+
+	/* Toast */
+	.toast {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.75rem;
+		min-inline-size: 300px;
+		max-inline-size: 500px;
+		padding-block: 1rem;
+		padding-inline: 1rem;
+		border-radius: var(--g-theme-border-radius-md);
+		background-color: var(--g-theme-color-background-default);
+		border-inline-start-width: 4px;
+		border-inline-start-style: solid;
+		pointer-events: auto;
+		opacity: 0;
+		transform: translateY(-1rem);
+		transition:
+			opacity 0.3s ease,
+			transform 0.3s ease;
+	}
+
+	.toast--visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	/* Variant colors */
+	.toast--info {
+		border-inline-start-color: var(--g-theme-color-background-utility-info);
+	}
+
+	.toast--success {
+		border-inline-start-color: var(--g-theme-color-background-utility-success);
+	}
+
+	.toast--warning {
+		border-inline-start-color: var(--g-theme-color-background-utility-warning);
+	}
+
+	.toast--error {
+		border-inline-start-color: var(--g-theme-color-background-utility-error);
+	}
+
+	/* Toast icon */
+	.toast__icon {
+		flex-shrink: 0;
+		inline-size: 1.5rem;
+		block-size: 1.5rem;
+	}
+
+	.toast--info .toast__icon {
+		color: var(--g-theme-color-background-utility-info);
+	}
+
+	.toast--success .toast__icon {
+		color: var(--g-theme-color-background-utility-success);
+	}
+
+	.toast--warning .toast__icon {
+		color: var(--g-theme-color-background-utility-warning);
+	}
+
+	.toast--error .toast__icon {
+		color: var(--g-theme-color-background-utility-error);
+	}
+
+	/* Toast content */
+	.toast__content {
+		flex: 1;
+		min-inline-size: 0;
+	}
+
+	.toast__title {
+		font-weight: 600;
+		font-size: var(--g-typography-font-size-16);
+		margin-block-end: 0.25rem;
+		color: var(--g-theme-color-content-default);
+	}
+
+	.toast__message {
+		font-size: var(--g-typography-font-size-14);
+		color: var(--g-theme-color-content-secondary);
+		line-height: 1.5;
+	}
+
+	/* Close button */
+	.toast__close {
+		all: unset;
+		flex-shrink: 0;
+		inline-size: 1.5rem;
+		block-size: 1.5rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--g-theme-border-radius-md);
+		color: var(--g-theme-color-content-secondary);
+		cursor: pointer;
+		transition: all 0.2s ease;
+		margin-inline-start: 0.5rem;
+	}
+
+	.toast__close:hover {
+		color: var(--g-theme-color-content-default);
+		background-color: var(--g-theme-color-background-subtle-hover);
+	}
+
+	.toast__close:focus-visible {
+		outline: 2px solid var(--component-focus-ring-color);
+		outline-offset: 2px;
+	}
+
+	/* Bottom position toasts slide up instead of down */
+	.toast--bottom-left,
+	.toast--bottom-center,
+	.toast--bottom-right {
+		transform: translateY(1rem);
+	}
+
+	.toast--bottom-left.toast--visible,
+	.toast--bottom-center.toast--visible,
+	.toast--bottom-right.toast--visible {
+		transform: translateY(0);
+	}
+
+	/* Responsive */
+	@media (max-width: 640px) {
+		.toast-container {
+			inset-inline: 0;
+			transform: none;
+		}
+
+		.toast {
+			min-inline-size: auto;
+			inline-size: 100%;
+		}
+	}
+
+	/* View transitions */
+	@media (prefers-reduced-motion: no-preference) {
+		@supports (view-transition-name: auto) {
+			.toast {
+				view-transition-name: toast;
+			}
+		}
+	}
+`;

package/src/components/toast/toast.test.js

@@ -0,0 +1,196 @@
+import { describe, it, afterEach } from "node:test";
+import { strict as assert } from "node:assert";
+import { fixture, cleanup, click } from "../../test-utils/index.js";
+import "./toast.js";
+
+describe("Toast Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render with default properties", async () => {
+		element = await fixture("grantcodes-toast");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should have info variant by default", async () => {
+		element = await fixture("grantcodes-toast");
+		assert.strictEqual(element.variant, "info", "Default variant should be info");
+	});
+
+	it("should have 5000ms duration by default", async () => {
+		element = await fixture("grantcodes-toast");
+		assert.strictEqual(element.duration, 5000, "Default duration should be 5000ms");
+	});
+
+	it("should have top-right position by default", async () => {
+		element = await fixture("grantcodes-toast");
+		assert.strictEqual(element.position, "top-right", "Default position should be top-right");
+	});
+
+	it("should be dismissible by default", async () => {
+		element = await fixture("grantcodes-toast");
+		assert.strictEqual(element.dismissible, true, "Should be dismissible by default");
+	});
+
+	it("should render toast with correct variant class", async () => {
+		element = await fixture("grantcodes-toast", {
+			variant: "success",
+		});
+
+		const toast = element.shadowRoot.querySelector(".toast--success");
+		assert.ok(toast, "Toast should have success variant class");
+	});
+
+	it("should render title when provided", async () => {
+		element = await fixture("grantcodes-toast", {
+			title: "Test Title",
+		});
+
+		const title = element.shadowRoot.querySelector(".toast__title");
+		assert.ok(title, "Title element should exist");
+		assert.strictEqual(title.textContent, "Test Title", "Title text should match");
+	});
+
+	it("should not render title when not provided", async () => {
+		element = await fixture("grantcodes-toast");
+
+		const title = element.shadowRoot.querySelector(".toast__title");
+		assert.ok(!title, "Title element should not exist");
+	});
+
+	it("should render dismiss button when dismissible", async () => {
+		element = await fixture("grantcodes-toast", {
+			dismissible: true,
+		});
+
+		const closeButton = element.shadowRoot.querySelector(".toast__close");
+		assert.ok(closeButton, "Close button should exist");
+	});
+
+	it("should not render dismiss button when not dismissible", async () => {
+		element = await fixture("grantcodes-toast", {
+			dismissible: false,
+		});
+
+		const closeButton = element.shadowRoot.querySelector(".toast__close");
+		assert.ok(!closeButton, "Close button should not exist");
+	});
+
+	it("should have role=status", async () => {
+		element = await fixture("grantcodes-toast");
+
+		const toast = element.shadowRoot.querySelector(".toast");
+		assert.strictEqual(toast.getAttribute("role"), "status", "Should have status role");
+	});
+
+	it("should have aria-live=polite", async () => {
+		element = await fixture("grantcodes-toast");
+
+		const toast = element.shadowRoot.querySelector(".toast");
+		assert.strictEqual(
+			toast.getAttribute("aria-live"),
+			"polite",
+			"Should have aria-live polite",
+		);
+	});
+
+	it("should render icon based on variant", async () => {
+		element = await fixture("grantcodes-toast", {
+			variant: "success",
+		});
+
+		const icon = element.shadowRoot.querySelector(".toast__icon");
+		assert.ok(icon, "Icon should exist");
+	});
+
+	it("should emit dismiss event when dismissed", async () => {
+		element = await fixture("grantcodes-toast", {
+			dismissible: true,
+			duration: 0, // Disable auto-dismiss
+		});
+
+		let dismissed = false;
+		element.addEventListener("dismiss", () => {
+			dismissed = true;
+		});
+
+		const closeButton = element.shadowRoot.querySelector(".toast__close");
+		click(closeButton);
+
+		// Wait a bit for animation
+		await new Promise((resolve) => setTimeout(resolve, 350));
+
+		assert.ok(dismissed, "Dismiss event should have fired");
+	});
+
+	it("should support all variant types", async () => {
+		const variants = ["info", "success", "warning", "error"];
+
+		for (const variant of variants) {
+			element = await fixture("grantcodes-toast", { variant });
+			const toast = element.shadowRoot.querySelector(`.toast--${variant}`);
+			assert.ok(toast, `Toast should have ${variant} variant class`);
+			cleanup(element);
+		}
+	});
+});
+
+describe("Toast Container Component", () => {
+	let element;
+
+	afterEach(() => {
+		cleanup(element);
+	});
+
+	it("should render toast container", async () => {
+		element = await fixture("grantcodes-toast-container");
+		assert.ok(element, "Element should be created");
+		assert.ok(element.shadowRoot, "Element should have shadow root");
+	});
+
+	it("should have top-right position by default", async () => {
+		element = await fixture("grantcodes-toast-container");
+		assert.strictEqual(element.position, "top-right", "Default position should be top-right");
+	});
+
+	it("should render container with correct position class", async () => {
+		element = await fixture("grantcodes-toast-container", {
+			position: "bottom-left",
+		});
+
+		const container = element.shadowRoot.querySelector(".toast-container--bottom-left");
+		assert.ok(container, "Container should have bottom-left position class");
+	});
+
+	it("should have slot for toast items", async () => {
+		element = await fixture("grantcodes-toast-container");
+		const slot = element.shadowRoot.querySelector("slot");
+		assert.ok(slot, "Slot should exist for toast items");
+	});
+
+	it("should support all position types", async () => {
+		const positions = [
+			"top-left",
+			"top-center",
+			"top-right",
+			"bottom-left",
+			"bottom-center",
+			"bottom-right",
+		];
+
+		for (const position of positions) {
+			element = await fixture("grantcodes-toast-container", { position });
+			const container = element.shadowRoot.querySelector(
+				`.toast-container--${position}`,
+			);
+			assert.ok(container, `Container should have ${position} position class`);
+			cleanup(element);
+		}
+	});
+});
+
+

package/src/components/tooltip/index.js

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

package/src/components/tooltip/tooltip.component.js

@@ -0,0 +1,70 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { tooltipStyles } from "./tooltip.styles.js";
+import { generateId } from "../../lib/generate-id.js";
+
+export class GrantCodesTooltip 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 = [tooltipStyles];
+
+	static properties = {
+		label: { type: String },
+		description: { type: String },
+	};
+
+	constructor() {
+		super();
+
+		this.id = generateId("tooltip");
+		/**
+		 * Label for the tooltip, used when the tooltip is the main label for the item.
+		 */
+		this.label = "";
+
+		/**
+		 * Description for the tooltip, used when the tooltip is additional descriptive text for the item.
+		 */
+		this.description = "";
+	}
+
+	/** @type {Element[]} */
+	slotted = [];
+
+	firstUpdated() {
+		const slot = this.renderRoot.querySelector("slot");
+		this.slotted = slot ? slot.assignedElements() : [];
+		const labeledElement = this.slotted[0];
+		if (labeledElement) {
+			// Set up anchor name for CSS anchor positioning
+			const tooltipSlot = this.renderRoot.querySelector(".tooltip__slot");
+			if (tooltipSlot) {
+				tooltipSlot.style.anchorName = `--tooltip-${this.id}`;
+			}
+
+			if (this.label) {
+				labeledElement.setAttribute("aria-labelledby", this.id);
+			} else if (this.description) {
+				labeledElement.setAttribute("aria-describedby", this.id);
+			}
+		}
+	}
+
+	render() {
+		if (this.label && this.description) {
+			throw new Error("You cannot provide both a label and a description");
+		}
+
+		return html`
+      <div class="tooltip">
+        <div class="tooltip__slot">
+          <slot></slot>
+        </div>
+        <p id="${this.id}" class="tooltip__content" role="tooltip">
+          ${this.label || this.description}
+        </p>
+      </div>
+    `;
+	}
+}

package/src/components/tooltip/tooltip.js

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

package/src/components/tooltip/tooltip.stories.js

@@ -0,0 +1,33 @@
+import { html } from "lit/static-html.js";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+const { events, args, argTypes, template } =
+	getStorybookHelpers("grantcodes-tooltip");
+import "./tooltip.js";
+
+const meta = {
+	title: "Components/Tooltip",
+	component: "grantcodes-tooltip",
+	args: {
+		...args,
+		label: "This is a tooltip label",
+		description: "",
+	},
+	argTypes,
+	render: (args) => template(args, html`<span>This has a tooltip</span>`),
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+export const Tooltip = {};
+
+export const Description = {
+	args: {
+		label: "",
+		description: "This is a tooltip description",
+	},
+};

package/src/components/tooltip/tooltip.styles.js

@@ -0,0 +1,78 @@
+import { css } from "lit";
+
+export const tooltipStyles = css`
+
+:host,
+.tooltip,
+.tooltip__slot {
+  width: fit-content;
+}
+
+.tooltip {
+  position: relative;
+}
+
+.tooltip__slot {
+  padding: 0.5rem;
+  margin: -0.5rem;
+  /* Anchor name will be set via JavaScript to include unique ID */
+}
+
+.tooltip__content {
+  display: none;
+  width: fit-content;
+  margin: 0;
+  max-width: 100%;
+  min-width: 6rem;
+  z-index: 100;
+  border-radius: var(--g-theme-border-radius-md);
+  padding: 0.6em 1em;
+  font-size: var(--g-typography-font-size-14);
+  line-height: 1;
+  color: var(--g-color-brand-purple-900);
+  background-color: var(--g-color-brand-purple-100);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  user-select: none;
+  text-align: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+  transition-behavior: allow-discrete;
+  
+  /* Modern CSS Anchor Positioning API */
+  /* This positions the tooltip relative to its anchor (the slot) */
+  position: absolute;
+  
+  /* Try anchor positioning first (modern browsers) */
+  position-anchor: var(--tooltip-anchor, none);
+  inset-area: block-end;
+  position-area: block-end;
+  margin-block-start: 0.5rem;
+  
+  /* Fallback for browsers without anchor positioning support */
+  @supports not (inset-area: block-end) {
+    /* Traditional positioning as fallback */
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 0.5rem;
+  }
+}
+
+.tooltip__slot:hover + .tooltip__content,
+.tooltip__slot:focus + .tooltip__content,
+.tooltip__slot:focus-within + .tooltip__content {
+  display: block;
+  opacity: 1;
+}
+
+/* Optional: Position tooltip above when near bottom of viewport */
+@media (prefers-reduced-motion: no-preference) {
+  .tooltip__content {
+    @starting-style {
+      opacity: 0;
+    }
+  }
+}
+
+`;